Method and device for constructing visual interface, electronic equipment and storage medium

Abstract

The application provides a visual interface construction method and device, electronic equipment and storage medium, and relates to the technical field of data processing. The visual interface construction method comprises the following steps: collecting user requirements, determining the drawing attributes of a target interface based on the user requirements, and creating a new interface electronic drawing based on the drawing attributes; determining target component elements, a layout method of the target component elements and a data display method of the target component elements according to the user requirements, and performing component layout on the interface electronic drawing based on the layout method and the data display method to generate a plurality of block data; binding a data interface to the plurality of block data and setting visual parameters according to the user requirements to generate an interface address of the target interface; and displaying the target interface according to the monitoring requirements and the interface address. The application reduces the dependence on professional front-end development skills, so that non-technical personnel can also participate in interface construction. Overall, the development and construction efficiency of the visual interface is improved.

Description

Technical Field

[0001] This application relates to the field of data processing technology, such as a method, apparatus, electronic device, and storage medium for constructing a visual interface. Background Technology

[0002] The application of large-screen data visualization technology in the power industry is of great significance. Its core value lies in helping the industry achieve efficient management, risk warning, and intelligent decision-making through intuitive, real-time, and multi-dimensional data presentation. By unifying the display of heterogeneous data from the power system, including SCADA (Supervisory Control and Data Acquisition), GIS (Geographic Information System), IoT (Internet of Things) sensors, and meteorological data, information silos are eliminated, and multi-source data integration is achieved. Binding to backend interfaces enables second-level data refresh, dynamically displaying key indicators such as grid load, power generation, and equipment status, achieving real-time dynamic updates. Visual monitoring replaces some on-site inspections, reducing operation and maintenance costs, minimizing manual inspections, and enabling rapid fault location of abnormal data (such as voltage drops and excessive line temperatures), providing real-time alarms and highlighting, thus shortening fault response time. Currently, the development and delivery of large-screen data visualization interfaces still rely on traditional software engineering models. The core processes include: UI design and requirement alignment, where designers complete interface prototype designs based on user needs, requiring repeated communication to confirm layout, interaction logic, and data display formats; front-end and back-end separation development: front-end developers manually write HTML (Hypertext Markup Language) / CSS (Cascading Style Sheets) / JavaScript code based on design drafts to achieve static rendering of charts, dashboards, etc.; back-end integration via API (Application Programming Interface) to connect with databases, IoT devices, or third-party systems to achieve dynamic data acquisition and processing; and integration testing and deployment: after front-end and back-end integration testing, the interface is packaged and compiled, deployed to servers or clients through the operation and maintenance process, and finally delivered to users.

[0003] In the current process of generating large-screen data visualization interfaces, the core processes mentioned above require multiple rounds of code writing and modification, which takes a long time and results in low efficiency in generating visualization interfaces, thus failing to meet the requirements of real-time monitoring. Summary of the Invention

[0004] This application aims to provide a method, apparatus, electronic device, and storage medium for constructing a visual interface.

[0005] According to one aspect of this application, a method for constructing a visual interface is proposed, comprising: collecting user requirements, determining the drawing attributes of the target interface based on the user requirements, and creating a new electronic drawing of the interface based on the drawing attributes; determining the target component elements, the layout method of the target component elements, and the data display method of the target component elements according to the user requirements, and performing component layout on the electronic drawing of the interface based on the layout method and the data display method to generate multiple data modules; binding data interfaces to the multiple data modules and setting visualization parameters according to the user requirements to generate the interface address of the target interface; and displaying the target interface according to the monitoring requirements and the interface address.

[0006] According to one aspect of this application, a device for constructing a visual interface is provided, comprising: The interface adaptation module is used to collect user requirements, determine the drawing attributes of the target interface based on user requirements, and create a new electronic drawing of the interface based on the drawing attributes. The interface layout module is used to determine the target component elements, the layout method of the target component elements, and the data display method of the target component elements according to user needs, and to lay out the components on the interface electronic drawing based on the layout method and data display method to generate multiple sections of data. The data interface binding module is used to bind data interfaces to multiple data modules and set visualization parameters according to user needs, so as to generate the interface address of the target interface. The interface display module is used to display the target interface based on monitoring requirements and interface address.

[0007] According to one aspect of this application, an electronic device is provided, comprising: a processor; and a memory storing a computer program that, when executed by the processor, causes the processor to perform the method described above.

[0008] According to one aspect of this application, a non-transitory computer-readable medium is proposed, on which readable instructions are stored, which, when executed by a processor, cause the processor to perform the method described above.

[0009] It should be understood that the above general description and the following detailed description are merely exemplary and do not limit this application.

[0010] Beneficial effects: Through the embodiments provided in this application, user requirements are directly transformed into specific drawing attributes, component layouts, and data interface configurations, enabling rapid construction from requirements to a visual interface. This method automates multiple steps of interface creation and configuration, reducing reliance on professional front-end development skills (programs), allowing non-technical or business personnel to participate in interface construction through configuration, significantly shortening the development cycle. This application can flexibly select target component elements, define their layout and data display methods according to different user needs, and bind different data interfaces to the module data. This highly modular and parameterized design allows the same method to quickly adapt to diverse visualization needs, exhibiting good scalability and adaptability. By binding data interfaces to module data and setting visualization parameters, data acquisition and processing are decoupled from front-end display. This ensures that changes to the back-end data source do not directly affect the front-end display logic, improving maintainability and the flexibility of data updates. Overall, it improves the development and construction efficiency of the visual interface. Attached Figure Description

[0011] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings, without exceeding the scope of protection claimed by this application.

[0012] Figure 1 A flowchart illustrating the method for constructing the visual interface provided in the embodiments of this application; Figure 2 A block diagram of a device for constructing a visual interface provided in the embodiments of this application; Figure 3 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Detailed Implementation

[0013] Exemplary embodiments will now be described more fully with reference to the accompanying drawings. However, these exemplary embodiments can be implemented in many forms and should not be construed as limited to the embodiments set forth herein; rather, they are provided so that this application will be thorough and complete, and will fully convey the concept of the exemplary embodiments to those skilled in the art. The same reference numerals in the drawings denote the same or similar parts, and therefore repeated descriptions of them will be omitted.

[0014] Furthermore, the described features, structures, or characteristics can be combined in any suitable manner in one or more embodiments. Numerous specific details are provided in the following description to give a thorough understanding of embodiments of this application. However, those skilled in the art will recognize that the technical solutions of this application can be practiced without one or more of the specific details, or other methods, components, apparatuses, steps, etc., can be employed. In other instances, well-known methods, apparatuses, implementations, or operations are not shown or described in detail to avoid obscuring various aspects of this application.

[0015] The block diagrams shown in the accompanying drawings are merely functional entities and do not necessarily correspond to physically independent entities. That is, these functional entities can be implemented in software, in one or more hardware modules or integrated circuits, or in different network and / or processor devices and / or microcontroller devices.

[0016] The flowcharts shown in the accompanying drawings are merely illustrative and do not necessarily include all content and operations / steps, nor do they necessarily have to be performed in the described order. For example, some operations / steps can be broken down, while others can be combined or partially combined; therefore, the actual execution order may change depending on the specific circumstances.

[0017] It should be understood that although the terms first, second, third, etc., may be used herein to describe various components, these components should not be limited by these terms. These terms are used to distinguish one component from another. Therefore, the first component discussed below may be referred to as the second component without departing from the teachings of this application. As used herein, the term "and / or" includes all combinations of any one and more of the associated listed items.

[0018] For specific implementation details, please refer to the following examples.

[0019] Figure 1 A flowchart illustrating the method for constructing the visual interface provided in this application embodiment. For example... Figure 1 As shown, the method includes steps S10, S11, S12 and S13.

[0020] In step S10, user requirements are collected, and based on the user requirements, the drawing attributes of the target interface are determined, and a new electronic drawing of the interface is created based on the drawing attributes.

[0021] In this application, a requirements document template can be pre-set, which users fill out to generate a requirements document that is then sent to the server for collection. User requirements may include the desired operating environment for the visualization interface and the type of information the interface should display.

[0022] In some implementations, the drawing attributes of the target interface that the user wants to build can be extracted from the user's requirements. These drawing attributes can include whether the drawing needs to be stretched and the corresponding stretching method, etc., and a preliminary electronic drawing of the interface can be created based on the drawing attributes.

[0023] In step S11, based on user requirements, the target component element, the layout method of the target component element, and the data display method of the target component element are determined. Based on the layout method and data display method, the component is laid out on the interface electronic drawing to generate multiple module data.

[0024] In this application, user requirements may include the style of the target interface that the user wants to build, the data to be displayed, and the data display method to be used. Therefore, by extracting features from the text information corresponding to user requirements, the target component elements, layout methods, and data display methods with the same features can be matched accordingly.

[0025] In some implementations, the target component element can be directly called, and its position and display method can be adjusted on the electronic interface drawing according to the layout and data display method to obtain multiple data sections. Each data section can correspond to a target component element with its data display method set and layout completed.

[0026] In other implementations, if a user's request lacks information such as layout or data display methods, other requests from that user can be retrieved to check for similar historical requests. Some implementations match the text information corresponding to the user's request with the text information corresponding to historical requests; a match of 80% or higher is considered similar. Then, the user's request can be completed based on the specific content of the historical requests, followed by component layout. If the user has no historical requests, the text information of other users' historical requests can be matched; if no similar historical requests exist, the default layout can be used, which can be pre-set.

[0027] In step S12, according to user needs, data interfaces are bound to multiple data modules and visualization parameters are set to generate the interface address of the target interface.

[0028] In this application, user requirements may also include the type of visualization to be performed, such as visualization of actual data or visualization simulation of virtual data. Different visualization types correspond to different data interfaces. The data interface can provide visualization parameters for target component elements corresponding to multiple data segments. By setting the visualization parameters, the actual display of each data segment can be achieved.

[0029] In some implementations, the target interface, after being bound to the data interface and having its corresponding visualization parameters set, can be stored and a link generated as the interface address. In the actual implementation, users can create a preview link (i.e., the interface address) in the deployed business platform's backend management interface by entering a name (e.g., "Large Screen Homepage Monitoring Interface") and then entering the path address of each target component element.

[0030] In other implementations, if there are data or layout adjustments for the target interface, the data of the corresponding multiple sections can be edited, modified, and saved, and the interface address can be refreshed without modifying the code, publishing, or deploying.

[0031] In step S13, the target interface is displayed according to the monitoring requirements and the interface address.

[0032] In this application, the monitoring request can be used to characterize the need to display the target interface. It can be a signal input by the user or sent by clicking a link corresponding to the interface address. After receiving the monitoring request, the interface address can be displayed to the user. The user can send a signal to the server to view the interface by clicking the link. The server can then jump from the interface address to the target interface and display it.

[0033] This application achieves rapid construction from requirements to a visual interface by directly translating user needs into specific drawing attributes, component layouts, and data interface configurations. This method automates multiple steps of interface creation and configuration, reducing reliance on professional front-end development skills (programmers), allowing non-technical or business personnel to participate in interface construction through configuration, significantly shortening the development cycle. This application can flexibly select target component elements, define their layout and data display methods according to different user needs, and bind different data interfaces to the module data. This highly modular and parameterized design allows the same method to quickly adapt to diverse visualization needs, exhibiting good scalability and adaptability. By binding data interfaces to module data and setting visualization parameters, data acquisition and processing are decoupled from front-end display. This ensures that changes to the back-end data source do not directly affect the front-end display logic, improving maintainability and the flexibility of data updates. Overall, it improves the development and construction efficiency of the visual interface.

[0034] According to some embodiments, optional templates can also be matched based on a preset interface template library and user requirements; if an optional template is matched, the optional template can be adjusted according to user requirements to generate the target interface and interface address.

[0035] In this application, upon receiving a user request, a pre-defined interface template library can be invoked. This library stores historical requests and corresponding target interface templates. The user request is first compared with the target component elements, layout methods, and data display methods of historical requests in the interface template library. If a completely identical optional template is found, the target interface corresponding to that template can be directly invoked. If only partially identical optional templates are found, that template can be invoked, and the differing content can be adjusted accordingly to obtain the target interface and its address.

[0036] In some implementations, if no available template is found, a new electronic drawing of the interface can be created and the corresponding component layout can be performed.

[0037] This application avoids the tedious process of creating new electronic interface drawings from scratch by calling a pre-defined interface template library for matching. This method can quickly locate a basic template that is highly similar to the user's needs, and make adjustments and optimizations based on this high starting point, significantly shortening the initial design and layout time of the interface, achieving "second-level" initialization, and greatly improving development efficiency.

[0038] According to some embodiments, during the process of creating a new interface electronic drawing, drawing attributes can be extracted from user requirements; wherein, the drawing attributes include stretching requirements; a default electronic drawing is created according to the default interface size, and the default electronic drawing is adjusted according to the stretching requirements to determine the interface electronic drawing.

[0039] In this application, drawing attributes are extracted from user requirements, including stretching requirements. Stretching requirements may include whether stretching is needed, the stretching method, and the desired drawing size.

[0040] In some implementations, a default electronic drawing can be created first, based on the default interface size. If the user wants to stretch the default electronic drawing, specific adjustments can be made to it to obtain the final interface drawing.

[0041] This application automatically extracts drawing attributes, including "stretching requirements," from user needs, transforming vague, descriptive user requirements into precise, actionable technical parameters. Then, a new drawing is created based on the "default interface size." This process automates and rapidly initializes the interface construction project, avoiding the repetitive work of developers manually creating a basic canvas each time and ensuring consistent starting point specifications. By determining the correct canvas size (i.e., the "electronic interface drawing") before layout begins, the risk of large-scale rework and reconstruction due to adaptation issues after designing on an incorrectly sized canvas is avoided. This "adjust drawing first, then layout" process advances and simplifies potential later adaptation adjustments, significantly reducing development iterations and time costs, and improving overall construction efficiency.

[0042] According to some embodiments, in the process of generating multiple module data according to user needs, if the user needs include layout requirement information, the target component element is obtained from a preset component library according to the layout requirement information; wherein, the layout requirement information includes layout method and data display method; according to the layout method and data display method, the target component element is laid out on the interface electronic drawing to generate multiple module data.

[0043] In this application, the target component element can encapsulate different types of information, such as icons, tables, forms, dynamic interactive icons, section borders, and background layers. If the user's requirements include layout requirements, the corresponding target component element can be selected from the preset component library according to the layout requirements. Then, the target component element is laid out according to the layout method and data display method to obtain multiple sections of data.

[0044] In some implementations, the pre-built component library can store different types of components, including background components, title / theme components, border / box components, animated icon components, chart components, table components, and form item components. Different components are encapsulated in different ways. For data display components such as chart and table components, open-source components can be obtained first, then further encapsulated before being stored in the component library.

[0045] This application, by parsing the "layout requirement information" in user needs, can accurately and automatically match and retrieve "target component elements" from a pre-defined component library. This avoids the subjectivity and inefficiency of developers manually browsing and selecting components, directly transforming the requirement description into specific target component elements, greatly improving the accuracy and efficiency of component selection and reducing misunderstandings. Decomposing the interface into "multiple data modules" composed of "target component elements" is a highly modular design concept. Each data module can be considered a function or display unit, making the interface structure clear. This not only facilitates subsequent individual maintenance and updates but also allows these modules to serve as reusable modules that can be quickly called and combined in the construction of other interfaces in the future, significantly improving the reusability of development resources.

[0046] According to some embodiments, in the process of binding data structures and setting visualization parameters for multiple data modules based on user needs, the user's display information can be selected from the user's needs; based on the display information, the corresponding visualization parameters and data interfaces can be selected; the visualization parameters can be imported into multiple data modules, and the multiple data modules can be bound to the data interfaces to generate the interface address.

[0047] In this application, user display information can be extracted from user needs. This display information can include the data type the user wants to display, such as real operating data or simulated operating data. Based on the display information, it can be determined whether the user wants to generate a visual target interface corresponding to real operating data or a visual target interface corresponding to simulated operating data. Based on this, different data interfaces can be selected, and real or simulated operating data can be imported into multiple data modules for corresponding display through these interfaces. This enables the binding of multiple data modules with data ports for storage and the generation of interface addresses.

[0048] This application extracts display information from user needs, automatically and accurately matching corresponding data interfaces and setting visualization parameters for multiple bound data sections. This achieves an automated pipeline configuration from data source to front-end display, avoiding the tedious process of developers manually writing data call code one by one, and greatly reducing interface binding errors or parameter configuration mistakes caused by manual operation. By binding section data to data interfaces, once the backend data is updated, the front-end interface can automatically obtain and display the new data through the interface without rebuilding, ensuring the timeliness and effectiveness of information.

[0049] According to some embodiments, components can also be set and stored. Specifically, a front-end user interface component is created according to a preset front-end encapsulation method; a data display component is created according to a preset secondary configuration encapsulation method; and the front-end user interface component and the data display component are stored in a preset component library.

[0050] In this application, the front-end encapsulation method can be an encapsulation method for front-end user interface components, used for interface-related settings; the secondary configuration encapsulation method can be an encapsulation method for data display components, used for settings related to data display on the interface. Based on the two preset encapsulation methods, different components can be created and stored in a preset component library.

[0051] Users of this application do not need to write code from scratch when building new interfaces; they can simply select and combine suitable components from the component library. This significantly shortens the development cycle, improves development efficiency, and enables rapid iteration and delivery of interfaces. Backend developers or business personnel less familiar with frontends can also build complex visual interfaces by configuring component parameters or settings, lowering the overall technical threshold for interface construction and enabling efficient collaboration among members of different roles. Encapsulating common logic within components avoids repetitive code writing. When bugs need to be fixed or the interface style updated, only one modification is required in the component library, and all projects using the component can receive the update through version upgrades, greatly reducing maintenance costs.

[0052] According to some embodiments, the front-end encapsulation method includes adaptive scaling algorithms, front-end graphic clipping and vector modeling techniques, and animation models. Specifically, in the process of creating front-end user interface components, a background component can be created based on the adaptive scaling algorithm; preset icons and corresponding font styles can be bundled and encapsulated to generate multiple JSON configuration files, and a title / theme component can be created based on these JSON configuration files; various border effects can be encapsulated using front-end graphic clipping and vector modeling techniques to generate a border box component; and an animated icon component can be encapsulated based on the animation logic of the animation model; the background component, title / theme component, border box component, and animated icon component are then defined as the front-end user interface components.

[0053] In this application, the background component created for the background layer is not a simple image tag, but rather encapsulates an adaptive scaling algorithm. This component can accept the URL of an image uploaded or selected by the user as an input attribute, and internally incorporates logic for various adaptation modes such as center tiling, stretching, filling, and proportional scaling. It also interacts responsively with the canvas container to ensure consistent background image display across different resolutions. The complex background image size and position properties in CSS (Cascading Style Sheets) are transformed into intuitive dropdown options, shielding the complexity of front-end style implementation.

[0054] In some implementations, the background component of this application is not a static image, but an adaptive container with a built-in "adaptive scaling algorithm". The algorithm flow is as follows: Step 1: Listen for changes in the size of the target container (using the ResizeObserver API) and obtain the width of its visible area. and height .

[0055] Step 2: Parse the raw metadata of the background image selected by the user to obtain its inherent width. and inherent height .

[0056] Step 3: Calculate the aspect ratio of the target container and the original aspect ratio of the background image .

[0057] Step 4: Execute different logical branches according to the preset scaling strategy flag (scale_mode): Mode A (proportional scaling with no clipping, corresponding to CSS's contain): Calculates the scaling factor. The final rendered size is Centered, with the remaining area left blank.

[0058] Mode B (proportional scaling fill, corresponding to CSS cover): Calculates the scaling factor. The final rendered size is Centered display, with any overflowing portion cropped and hidden.

[0059] Mode C (Stretch Fill): Forces the background image's width and height to be set to... Not maintaining the aspect ratio may introduce deformation, i.e., without independent Assign the value directly. The final width is... The final height is .

[0060] Mode D (Smart Tiling): When the background image size is significantly smaller than the container size and the user selects tiling, the number of horizontal tiling operations is increased. Number of longitudinal tiling times Generates a repeating background pattern. Scaling factor. That is, without scaling, the final width is the repeating unit. The final height is the repeating unit. .

[0061] Step 5: For modes A and B, introduce "focus point" optimization. Allow users to define the key focus coordinates of the background image. (Value range 0-1), the formula for calculating the cutting offset is: This optimization ensures that the core visual elements are always visible.

[0062] For intersection clipping optimization, the scaling factor formula, final width, and final height calculation formula are the same as those for proportional no-clipping and proportional fill.

[0063] Step 6: Calculate the final position ,size The clipping or tiling parameters are converted into a layout object that the rendering engine can execute and then passed to the background renderer.

[0064] For icon theme encapsulation, icons and font styles (color, size, shadow, spacing) can be bundled together to form a "theme package," which is a title theme component. Each theme package corresponds to a JSON (JavaScript Object Notation) configuration file, describing its CSS styles and icon resource paths. JSON is a lightweight data exchange format.

[0065] Users select a complete "visual theme" (such as "tech blue" or "smart green"), rather than a single icon. By dynamically injecting corresponding CSS variables—primary color variable, title font size variable, and SVG (Scalable Vector Graphics) icon symbol tags—the entire large-screen style can be skinned with a single click, ensuring visual consistency.

[0066] In some implementations, the timing of CSS injection is as follows: The factory pattern triggers CSS variable injection in the following three situations: 1. During system initialization: After the main framework of the low-code platform is loaded, the first CSS variable is generated and injected based on the default theme to establish the visual tone.

[0067] 2. When the user actively switches themes: When the user selects a preset theme or modifies any global variable (such as --primary-color) in the UI, the factory pattern regenerates the variable set and performs hot replacement.

[0068] 3. When components are added dynamically: When a user drags a component with its own theme dependencies onto the canvas, the factory pattern detects newly introduced, undefined CSS variables and dynamically appends them to the root scope.

[0069] CSS injection methods: Dynamic injection is achieved through the following steps: Get or create a style host: Call document.getElementById('dynamic-theme-host') to check if a dedicated element created by the factory exists. <style>标签。若不存在，使用document.createElement('style')创建新标签，并设置id='dynamic-theme-host'。

[0070] 生成变量规则文本：CSS变量工厂函数接收一个JavaScript对象（如{primary:'#16c784',bg:'#fff'}），遍历该对象，按模板:root{--变量名:变量值;}生成字符串cssText。对于组件隔离场景，可使用.component-class{--变量名:值;}。

[0071] 原子化更新：比较新旧cssText的哈希值，仅当内容发生变化时才执行赋值，避免频繁DOM操作引起的页面重排。

[0072] 注入与生效：通过document.head.appendChild(styleElement)将样式节点附加到文档头部，所有引用这些CSS变量的组件在下一重绘周期自动更新。

[0073] 针对板块边框的封装，对应的边框盒子组件采用的前端图形裁剪与矢量造型技术包括SVG（Scalable Vector Graphics，可缩放矢量图形）或CSS3裁剪路径技术，用于封装多种边框效果（如流光、科技感线条、不规则形状）。

[0074] 边框盒子组件具有关键配置属性：边框颜色、边框宽度、动画时长、流光速度、动画路径的总"距离” / 动画时长以及背景颜色（内部填充色）。其内部DOM结构（Document ObjectModel Structure，文档对象模型结构）对外部完全透明，用户无需关心实现细节，只需配置几个参数即可获得复杂边框效果。

[0075] 针对动态交互图标的封装，即动画图标组件的封装，基于CSS关键帧规则，或轻量级SVG（SMIL（Synchronized Multimedia Integration Language，同步多媒体集成语言）动画，或RAF（Request Animation Frame，请求动画帧））的动画逻辑。

[0076] 提供动画参数配置化接口，如动画类型（闪烁、旋转、呼吸、流动）、动画速度 / 时长、动画迭代次数 / 循环次数。用户可通过界面选择动画类型并调节滑块控制速度，彻底避免了手动编写动画代码。

[0077] UI（User Interface，用户界面）资源与逻辑的捆绑式主题封装与动态注入过程，将大屏UI元素（背景、图标、边框）与其样式逻辑、自适应算法、动画控制逻辑进行捆绑式封装，并通过主题包（JSON配置文件）进行管理和一键式动态换肤的方法和系统，该方法将分散的样式、资源、逻辑整合为一个可统一调度和更换的"主题”单元，解决了传统方式中逐个修改样式、效率低下、容易出错的技术问题。

[0078] 动态交互图标的参数化配置与渲染过程，将CSS / JS动画效果（如闪烁、旋转）封装为可枚举类型，并将其速度、次数等属性暴露为图形化界面中的滑竿或输入框进行参数化配置的方法。建立动画类型枚举值与具体CSS关键帧规则或JS动画函数之间的映射表，并根据用户配置的参数动态生成最终动画样式的过程。将需要编程实现的动画效果转化为可视化配置，提供了前所未有的便捷性。

[0079] 复杂图表库选项映射为结构化表单的配置过程，可以将图表库的复杂配置项进行分类、抽象，并映射为多层次、联动式可视化表单，定义图表的元数据描述，描述每个配置项的组件类型（如下拉框、颜色选择器、数字输入框）、可选值、以及与其他配置项的联动关系（如选择"饼图”后，隐藏"X轴”配置项）。基于此模式，动态渲染出配置表单的界面生成器。

[0080] 在一些实现方式中，多层次映射的实现通过配置面板采用递归组件渲染算法来实现，步骤如下：解析Schema（模式）：每个组件的元数据JSONSchema组织成树形结构。顶级节点表示组件整体，其下包含"数据”、"样式”、"高级”等一级分组（对应Tab页签或折叠面板）。

[0081] 递归遍历生成：渲染器遍历Schema树。遇到类型为object的节点时，创建<fieldset>或<divclass="sub-section">作为容器，递归进入子节点。遇到类型为array的节点（如"系列配置列表”）时，生成动态列表控件，支持新增、删除、上移 / 下移，每个列表项再递归渲染。

[0082] 控件映射表：维护一套type->UI组件映射，如string映射为<input>，color映射为颜色拾取器，enum映射为<select>下拉框，从而在JSON结构与可视化控件之间建立映射。

[0083] 在一些实现方式中，联动指表单某一项的值变化动态改变其他项的可见性、可用性或取值范围，联动式映射的具体实现方式如下：联动指表单某一项的值变化动态改变其他项的可见性、可用性或取值范围，具体实现如下：在Schema中预置联动规则：为需要被控制的属性增加dependencies（依赖关系）字段，描述依赖的源控件及条件。

[0084] 建立观察者模式：渲染时为每个带有dependencies的控件注册监听器，监听其依赖的源控件。

[0085] 动态执行联动：源控件值变化触发change事件，事件处理逻辑检查所有依赖该源控件的目标控件，评估条件是否满足。满足则显示并更新选项；不满足则隐藏并清除其值，防止提交无效数据。

[0086] 深度联动优化：对于链式联动（A-B-C），采用拓扑排序确定更新优先级，避免循环依赖导致UI卡死。

[0087] 通过上述设置，当用户在低代码平台中选中画布上的"柱状图”组件时：右侧面板层级展开显示"图表数据配置”、"坐标轴样式”、"图例设置”等折叠区域。用户将"图表类型”从"柱状图”切换为"折线图”时，配置面板自动联动："柱状宽度”滑块消失，转而出现"折线平滑度”滑块和"是否显示数据点标记”开关。

[0088] 用户在"数据”区域选择"维度”字段后，"系列配置”区域的下拉列表自动过滤掉该维度字段，避免冲突。该设计极大降低非专业用户的学习成本，实现"配置项随需而动”的智能交互。

[0089] 表格条件格式化的可视化规则配置过程，可以通过图形界面定义数据规则（如"当值>100时”），并将其与视觉表现（如"单元格背景变红”）关联起来，自动生成并应用对应CSS或JS逻辑的方法。实现一个规则编辑器，将用户定义的规则解析为可执行的JS函数或CSS规则，并在表格渲染时动态应用的机制。

[0090] 本申请通过自适应伸缩算法创建背景组件，确保了该组件能够根据不同屏幕尺寸、分辨率和设备自动调整其大小和布局。这从最基础的背景层就奠定了整个界面响应式设计的基石，无需为不同设备单独开发多套样式，显著减少了适配工作量。将图标和字体样式捆绑封装并生成JSON配置文件来创建标题主题组件，无需在代码中硬编码图标和字体，只需引用配置项即可快速生成不同风格的标题，极大提升了开发效率。利用前端图形裁剪与矢量造型技术封装多种边框效果（如不规则边框、渐变边框、镂空效果等），生成的边框盒子组件更满足实际且统一的要求。基于动画模型封装动画图标组件，将动态效果变成了一个可即插即用的模块，无需深入理解复杂的CSS，只需使用封装好的组件并通过参数进行配置，就能将复杂的动画效果轻松集成到界面中，降低了使用高级动画效果的技术门槛。

[0091] 根据一些实施例，创建数据展示组件的过程中，具体可以基于预设的二次配置封装方式，将预设的数据集与对应绑定的数据源解耦，并设置对应的数据接口；根据预设的图表库中的复杂配置项的配置类型，对复杂配置项进行分类和抽象，并定义图表库中的图表的元数据描述，以生成对应的图表组件；根据预设的表格表单配置要求，配置分页器、自定义下拉框、自定义日期选择器、自定义列样式并进行视觉表现条件的格式化，以生成对应的表格组件和表单项组件；将图表组件、表格组件和表单项组件确定为数据展示组件。

[0092] 本申请中，数据展示组件的创建过程基于一套预设的二次封装配置方法实现。该方法首先将数据集与底层数据源解耦，并预留标准化的数据接口，从而确保数据层的灵活性与可配置性。随后，依据所选图表库中复杂配置项的类型，对其进行分类抽象和元数据描述，生成可复用、易配置的图表组件。同时，根据预定义的表格与表单配置规范，对分页器、下拉框、日期选择器、列样式及条件格式化等功能进行封装，分别生成对应的表格组件和表单组件。最终，将图表组件、表格组件及表单组件共同组合为完整的数据展示组件集合。

[0093] 具体而言，针对图表组件的封装，本申请对功能强大但配置繁杂的开源可视化图表库进行了深度封装。通过将数百个原始配置项分类、抽象，并映射为一套结构化的、面向业务场景的JSON Schema（即一种基于JSON的元数据描述规范），实现了配置描述与实现逻辑的分离。该过程主要包括：1.数据层解耦：将图表配置中与数据紧密相关的部分（如数据集、数据序列）与数据源绑定功能分离，通过预留的数据接口实现动态数据注入；2.样式层抽象：将坐标轴、图例、颜色等样式属性抽象为"坐标轴样式”、"图例位置”、"颜色主题”等直观的可视化配置项，用户可通过表单操作完成设置；3.交互层封装：将提示框、数据区域缩放等交互功能转化为复选框、下拉菜单等标准表单控件，显著降低配置复杂度。

[0094] 用户可在联动表单中完成图表配置。例如，当选定"柱状图”作为图表类型时，系统自动加载与之相关的特定配置项（如柱条宽度、圆角半径等）。整个配置过程为声明式，用户无需感知底层图表库的技术细节。

[0095] 在表格组件的封装中，依据预设配置要求实现了多项高级功能：1.分页器配置：支持通过界面选择是否分页及设置每页条数；2.列样式自定义：允许通过拖拽调整列宽，并通过点选设置列对齐方式（如左、中、右）；3.条件格式化：用户可通过界面定义业务规则（例如当数值大于100时单元格背景变红），系统自动将其转化为视觉表现，无需编写代码。

[0096] 上述封装将传统上需通过JavaScript编程实现的表格交互与样式逻辑全面转化为可视化操作。

[0097] 针对表单组件（如下拉框、日期选择器）的封装则侧重于预定义行为与数据绑定：1.数据源封装：下拉框可配置为静态枚举值或动态接口调用，为后续统一网关集成提供基础；2.格式自动化：日期选择器自动完成日期格式转换（如将Date对象格式化为"YYYY-MM-DD”字符串），简化参数传递；3.事件绑定：表单组件的值变化可关联触发其他组件（如图表）的数据加载行为，用户可通过界面配置规则（例如下拉框值变化时自动刷新图表并传递参数），无需编写事件监听函数。

[0098] 本申请对数据源绑定功能进行了统一抽象封装，包括静态数据编辑器与动态接口网关：1.静态数据编辑器：提供嵌入式类Excel表格编辑界面，支持用户直接粘贴来自Excel或WPS的表格数据，系统自动识别并转换为JSON数组，实现真正的所见即所得编辑；2.动态接口统一网关：通过创建API网关服务，对所有动态API请求进行集中管理：3.封装请求过程：统一处理HTTP状态码错误、网络超时及异常捕获；4.参数映射：提供图形化界面，使用户能够建立前端组件值与API请求参数间的映射关系（例如将表单组件值映射为查询参数或请求体）；5.响应数据解析：支持通过JSONPath或XPath等表达式语言配置界面，指定从API复杂响应结构中提取数据的路径，有效解决多源数据返回结构不一致的问题。

[0099] 该封装机制将前端开发中繁琐的HTTP请求操作（包括工具调用、参数拼接、错误处理与数据解析）全面可视化，用户仅需填写URL并配置映射规则即可完成此前需编码实现的复杂数据对接。

[0100] 本申请通过将数据集与数据源解耦并设置统一的数据接口，当后端数据源结构或技术栈改变时，无需修改前端组件，只需调整接口的适配逻辑即可，极大降低了前后端的耦合度和维护成本。同一个图表组件，通过更换数据接口，可以轻松展示完全不同业务领域的数据，组件复用性达到极致。对图表库的复杂配置项进行分类、抽象并定义元数据描述，可以将原本需要大量代码、难以记忆的复杂配置项，抽象成通俗易懂、结构化的配置对象。通过元数据描述，可以动态生成配置界面（如图表编辑器），让非开发人员（如产品经理、运营）也能通过可视化界面"拖拽”或"填写”出复杂的图表，极大降低了使用高级图表的技术门槛。

[0101] 根据另一些实施例，可以对高级自定义事件的事件流进行编排封装。

[0102] 在一些实现方式中，针对鼠标交互事件封装：封装方法：为每个组件注入统一的事件触发器。在设计画布中，用户可选择任一组件，并为其"单击”等事件"添加动作”。动作类型是可选择的，如："控制组件显示 / 隐藏”、"触发数据重新加载”、"跳转链接”等。这意味着用户可以通过可视化编排，实现如"点击一个按钮后，隐藏事件触发者并刷新事件监听者”的复杂交互逻辑，而无需写一行代码。

[0103] 在另一些实现方式中，针对数据生命周期事件封装：封装方法：在预设的基础组件和智能组件等数据组件的内部生命周期钩子中，抛出标准化事件如加载开始前、加载完成后、渲染成功后以及销毁时）。用户可以为这些事件绑定反馈动作。例如：当"数据加载前”时，自动显示一个"加载中”动画；当"数据加载完成后”时，自动隐藏该动画；当数据渲染失败时，触发"显示错误信息”的动作。这形成了一种自动化的事件响应机制，将原本需要程序员在代码中手动管理的加载状态、异常处理等逻辑完全可视化配置。

[0104] 基于事件驱动的可视化交互逻辑编排过程，允许用户为组件的事件（如点击、数据加载生命周期）直接绑定预定义动作（如控制组件、刷新数据），并通过图形化界面编排这些事件-动作关系，形成事件响应链路的方法和系统。设计一套动作执行器，用于执行"显示 / 隐藏组件”、"重新加载数据”等预定义命令，提供图形化界面，让用户建立"当[事件源]发生[某事件]时，执行[某动作]”的规则。该方法实现了原本必须由JavaScript代码编写的交互逻辑的可视化编程，是突破性的，它彻底改变了构建复杂交互的方式。

[0105] 组件数据生命周期的钩子事件暴露与可视化绑定过程，在数据组件（如图表、表格）内部生命周期（渲染前、渲染后、销毁等）的关键节点抛出标准化事件，并允许用户在设计器中为这些事件配置响应动作的方法。它对组件的内部状态进行了抽象和暴露，使得用户可以对加载状态、渲染结果进行精细化控制，这是一个细腻而实用的创新。

[0106] 本申请提出了一种"可视化编排-动态绑定-实时渲染”的方法和装置，该装置可以是一种一体化界面设计工具，其逻辑为：1、零代码可视化构建：提供拖拽式画布与预置组件库（如折线图、拓扑图、3D模型），支持自由布局与层级关系配置；组件属性面板开放样式自定义（颜色、尺寸、动画效果），实现"所见即所得”设计体验。

[0107] 2、动态数据绑定引擎：通过可视化配置界面连接数据源（数据库、接口形式），定义字段映射规则与刷新频率；内置表达式引擎，支持实时计算衍生指标（如环比增长率、设备健康度评分）。

[0108] 3、热更新与即时生效机制：用户修改组件属性或数据源配置后，自动触发局部渲染更新，无需重新编译部署。

[0109] 4、易上手易操作：该工具，通过界面可视化操作方式，通过预设组件拖拽，可视化数据接口绑定完成大屏实时数据监测界面开发目标，其操作难度低，上手快，无需编码基础，任何角色（产品经理、项目经理、实时运维人员等）均可完成界面开发，释放研发工程师人力，降低研发成本，提高项目交付速度。

[0110] 本申请可以重构可视化界面的生产链路，赋能企业以"零编码、实时化”方式应对业务变化，显著提升交付效率与用户满意度。

[0111] 下面描述本申请的装置实施例，其可以用于执行本申请方法实施例。对于本申请装置实施例中未披露的细节，可参照本申请方法实施例。

[0112] 图2为本申请实施例提供的可视化界面的构建装置的框图。如图2所示，可视化界面的构建装置200包括界面适应模块201、界面布局模块202、数据接口绑定模块203和界面显示模块204。

[0113] 界面适应模块201，用于收集用户需求，并基于用户需求，确定目标界面的图纸属性，并基于图纸属性新建界面电子图纸；界面布局模块202，用于根据用户需求，确定目标组件元素、目标组件元素的布局方式和目标组件元素的数据展示方式，并基于布局方式和数据展示方式在界面电子图纸上进行组件布局，以生成多个板块数据；数据接口绑定模块203，用于根据用户需求，为多个板块数据绑定数据接口并设置可视化参数，以生成目标界面的界面地址；界面显示模块204，用于根据监测需求和界面地址，展示目标界面。

[0114] 可选地，可视化界面的构建装置200还包括模板匹配模块205，用于根据预设的界面模板库和用户需求，匹配可选模板；在匹配到可选模板的情况下，根据用户需求对可选模板进行调整，以生成目标界面和界面地址。

[0115] 可选地，界面适应模块201具体用于：从用户需求中提取图纸属性；其中，图纸属性包括拉伸需求；按照默认的界面大小新建默认电子图纸，并根据拉伸需求对默认电子图纸进行调整，以确定界面电子图纸。

[0116] 可选地，界面布局模块202具体用于：在用户需求中包含布局需求信息的情况下，根据布局需求信息，从预设的组件库中获取目标组件元素；其中，布局需求信息包括布局方式和数据展示方式；根据布局方式和数据展示方式，将目标组件元素布局在界面电子图纸上，以生成多个板块数据。

[0117] 可选地，数据接口绑定模块203具体用于：从用户需求中选取用户的展示信息；根据展示信息，选取对应的可视化参数和数据接口；将可视化参数导入多个板块数据，并将多个板块数据与数据接口绑定，以生成界面地址。

[0118] 可选地，可视化界面的构建装置200还包括组件创建模块206，用于：根据预设的前端封装方式，创建前端用户界面组件；根据预设的二次配置封装方式，创建数据展示组件；将前端用户界面组件和数据展示组件存储到预设的组件库中。

[0119] 可选地，前端封装方式包括自适应伸缩算法、前端图形裁剪与矢量造型技术和动画模型；其中，组件创建模块206在根据预设的前端封装方式，创建前端用户界面组件的情况下，具体用于：基于自适应伸缩算法，创建背景组件；将预设的图标和对应的字体样式进行捆绑封装，生成多个JSON配置文件，并基于多个JSON配置文件创建标题主题组件；根据前端图形裁剪与矢量造型技术，封装多种边框效果，以生成边框盒子组件；根据动画模型的动画逻辑，封装动画图标组件；将背景组件、标题主题组件、边框盒子组件和动画图标组件确定为前端用户界面组件。

[0120] 可选地，组件创建模块206在根据预设的二次配置封装方式，创建数据展示组件的情况下，具体用于：根据预设的图表库中的复杂配置项的配置类型，对复杂配置项进行分类和抽象，并定义图表库中的图标的元数据描述，以生成对应的图表组件；根据预设的表格表单配置要求，配置分页器、自定义下拉框、自定义日期选择器、自定义列样式并进行视觉表现条件的格式化，以生成对应的表格组件和表单项组件；将图表组件、表格组件和表单项组件确定为数据展示组件。

[0121] 装置执行与前面提供的方法类似的功能，其他功能可参见前面的描述，此处不再赘述。

[0122] 图3为本申请实施例提供的电子设备的结构示意图，如图3所示，本实施例的电子设备300可以包括：存储器301和处理器302。

[0123] 存储器301上存储有计算机程序，当计算机程序被处理器302执行时，使得前述处理器302执行上述实施例中的方法。

[0124] 其中，处理器302和存储器301相连，如通过总线相连。

[0125] 可选地，电子设备300还可以包括收发器。需要说明的是，实际应用中收发器不限于一个，该电子设备300的结构并不构成对本申请实施例的限定。

[0126] 处理器302可以是CPU（Central Processing Unit，中央处理器），通用处理器，DSP（Digital Signal Processor，数据信号处理器），ASIC（Application SpecificIntegrated Circuit，专用集成电路），FPGA（Field Programmable Gate Array，现场可编程门阵列）或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框，模块和电路。处理器302也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，DSP和微处理器的组合等。

[0127] 总线可包括一通路，在上述组件之间传送信息。总线可以是PCI（PeripheralComponent Interconnect，外设部件互连标准）总线或EISA（Extended Industry StandardArchitecture，扩展工业标准结构）总线等。总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

[0128] 存储器301可以是ROM（Read Only Memory，只读存储器）或可存储静态信息和指令的其他类型的静态存储设备，RAM（Random Access Memory，随机存取存储器）或者可存储信息和指令的其他类型的动态存储设备，也可以是EEPROM（Electrically ErasableProgrammable Read Only Memory，电可擦可编程只读存储器）、CDROM（Compact DiscRead Only Memory，只读光盘）或其他光盘存储、光碟存储（包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等）、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。

[0129] 存储器301用于存储执行本申请方案的应用程序代码，并由处理器302来控制执行。处理器302用于执行存储器301中存储的应用程序代码，以实现前述方法实施例所示的内容。

[0130] 其中，电子设备包括但不限于：移动电话、笔记本电脑、数字广播接收器、PDA（个人数字助理）、PAD（平板电脑）、PMP（便携式多媒体播放器）、车载终端（例如车载导航终端）等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。还可以为服务器等。图3示出的电子设备仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

[0131] 本实施例的电子设备，可以用于执行上述任一实施例的方法，其实现原理和技术效果类似，此处不再赘述。

[0132] 本申请还提供一种非瞬时性计算机可读存储介质，其上存储有计算机可读指令，当前述指令被处理器执行时，使得处理器执行如上实施例中的方法。

[0133] 本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一种非瞬时性计算机可读取存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

[0134] 以上对本申请实施例进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明仅用于帮助理解本申请的方法及其核心思想。同时，本领域技术人员依据本申请的思想，基于本申请的具体实施方式及应用范围上做出的改变或变形之处，都属于本申请保护的范围。综上所述，本说明书内容不应理解为对本申请的限制。< / style>

Claims

1. A method for constructing a visual interface, characterized in that, include: Based on user needs, determine the drawing attributes of the target interface, and create a new electronic drawing of the interface based on the drawing attributes. Based on the user requirements, the target component elements, the layout method of the target component elements, and the data display method of the target component elements are determined. The components are then laid out on the interface electronic drawing based on the layout method and the data display method to generate multiple module data. Based on the user requirements, data interfaces are bound to the multiple data modules and visualization parameters are set to generate the interface address of the target interface. Based on the monitoring requirements and the interface address, the target interface is displayed.

2. The method according to claim 1, characterized in that, Also includes: Based on the preset interface template library and the user's requirements, selectable templates are matched; If the optional template is matched, the optional template is adjusted according to the user's needs.

3. The method according to claim 1, characterized in that, The process of determining the drawing attributes of the target interface based on user needs and creating a new electronic drawing of the interface based on the drawing attributes includes: Extract the drawing attributes from the user requirements, wherein the drawing attributes include stretching requirements; Create a new default electronic drawing according to the default interface size, and adjust the default electronic drawing according to the stretching requirements to determine the interface electronic drawing.

4. The method according to claim 1, characterized in that, The process involves determining target component elements, their layout methods, and data display methods based on user requirements, and then laying out the components on the interface electronic drawing based on these layout and data display methods to generate multiple module data, including: If the user requirements include layout requirement information, the target component element is obtained from a preset component library according to the layout requirement information, wherein the layout requirement information includes the layout method and the data display method; Based on the layout method and the data display method, the target component elements are laid out on the interface electronic drawing to generate the multiple module data.

5. The method according to claim 4, characterized in that, The step of binding data interfaces to the multiple module data and setting visualization parameters according to the user's requirements to generate the interface address of the target interface includes: Select the user's display information from the aforementioned user requirements; Based on the displayed information, select the corresponding visualization parameters and data interface; The visualization parameters are imported into the multiple module data, and the multiple module data are bound to the data interface to generate the interface address.

6. The method according to any one of claims 1-5, characterized in that, Also includes: Create front-end user interface components based on the preset front-end encapsulation method; Create a data display component based on the preset secondary configuration encapsulation method; The front-end user interface components and the data display components are stored in a preset component library.

7. The method according to claim 6, characterized in that, The front-end encapsulation method includes adaptive scaling algorithms, front-end graphic clipping and vector modeling technology, and animation models; The step of creating front-end user interface components according to a preset front-end encapsulation method includes: Based on the aforementioned adaptive scaling algorithm, a background component is created; The preset icons and corresponding font styles are bundled and encapsulated to generate multiple JSON configuration files, and a title theme component is created based on the multiple JSON configuration files; Based on the aforementioned front-end graphic clipping and vector modeling technology, various border effects are encapsulated to generate border box components; Based on the animation logic of the animation model, encapsulate the animation icon component; The background component, the title theme component, the border box component, and the animated icon component are identified as the front-end user interface components.

8. The method according to claim 6, characterized in that, The step of creating a data display component according to a preset secondary configuration encapsulation method includes: Based on the preset secondary configuration encapsulation method, the preset dataset is decoupled from the corresponding bound data source, and the corresponding data interface is set. Based on the configuration types of complex configuration items in the preset chart library, the complex configuration items are classified and abstracted, and the metadata description of the charts in the chart library is defined to generate corresponding chart components. Based on the preset table form configuration requirements, configure the pagination tool, custom dropdown list, custom date picker, and custom column style, and format the visual display conditions to generate the corresponding table components and form item components; The chart component, the table component, and the form item component are defined as the data display components.

9. A device for constructing a visual interface, characterized in that, include: The interface adaptation module is used to determine the drawing attributes of the target interface based on user needs, and to create a new electronic drawing of the interface based on the drawing attributes. The interface layout module is used to determine the target component elements, the layout method of the target component elements, and the data display method of the target component elements according to the user requirements, and to perform component layout on the interface electronic drawing based on the layout method and the data display method to generate multiple block data. The data interface binding module is used to bind data interfaces to the multiple module data and set visualization parameters according to the user's requirements, so as to generate the interface address of the target interface. The interface display module is used to display the target interface according to the monitoring requirements and the interface address.

10. An electronic device, characterized in that, include: processor; A memory storing a computer program that, when executed by the processor, causes the processor to perform the method as described in any one of claims 1-8.

Images