A visual configuration editing method and system

Abstract

This invention discloses a visual configuration editing method and system, applied in the field of industrial internet technology. The method includes: responding to user editing signals and identifying data information of the visual configuration page; obtaining first data source identifier information corresponding to all content blocks in the visual configuration page based on the data information; identifying changes in the content blocks of the visual configuration page after user editing, and obtaining second data source identifier information corresponding to all content blocks in the visual configuration page after user editing based on the changes in the content blocks; determining the content blocks to be rendered based on the first and second data source identifier information; and rendering the visual configuration page based on the data source information corresponding to the content blocks to be rendered. The visual configuration editing method provided by this invention can achieve incremental updates at the component level and improve the loading and updating efficiency of configuration pages.

Description

Technical Field

[0001] This invention relates to the field of industrial internet technology, and in particular to a visual configuration editing method and system. Background Technology

[0002] With the rapid development of intelligent manufacturing and the Industrial Internet, visual configuration editors allow users to flexibly configure various visual components into the configuration page through drag-and-drop operations, and bind these components to the data sources of the underlying devices, thereby building an intuitive and dynamic monitoring interface. This "what you see is what you get" editing method greatly reduces the development threshold of industrial monitoring systems and improves the deployment efficiency of the system.

[0003] In existing technologies, when users need to modify a few components in a configuration page, because the visual configuration editor uses a monolithic rendering architecture where all visual components share a unified DOM tree structure, a global update strategy must be used to redraw the entire configuration page. However, this approach leads to excessive memory consumption, significantly increased page rendering latency, and noticeable flickering and lag on the user's page. This severely impacts the system's real-time performance, concurrency processing capabilities, and user experience, hindering system deployment and application efficiency in large-scale, high-concurrency scenarios and failing to meet the stringent requirements of modern industrial monitoring systems for high real-time performance, high concurrency, and high stability. Summary of the Invention

[0004] This invention provides a visual configuration editing method and system to solve the problem of full redrawing caused by the inability to achieve precise component-level control when updating the visual configuration page in the prior art, so as to achieve incremental updates at the component level and improve the loading and updating efficiency of the configuration page.

[0005] To address the aforementioned technical problems, this invention provides a visual configuration editing method, comprising: Responding to user editing signals, it identifies data information on the visual configuration page; Based on the data information, the first data source identification information corresponding to all content blocks in the visualization configuration page is obtained; Identify the changes in content blocks on the user-edited visual configuration page, and based on the changes in content blocks, obtain the second data source identification information corresponding to all content blocks on the user-edited visual configuration page; Based on the first data source identification information and the second data source identification information, the content block to be rendered is determined; The visualization configuration page is rendered based on the data source information corresponding to the content block to be rendered.

[0006] As one preferred embodiment, the identification of data information on the visual configuration page includes: Retrieve user-defined configuration type information; Based on the configuration type information, the corresponding visual configuration page in the preset template library is determined; The configuration of the first content block on the visualization configuration page is identified, and the configuration of the first content block is analyzed to obtain the data information.

[0007] As one preferred embodiment, obtaining the first data source identifier information corresponding to all content blocks in the visualization configuration page based on the data information includes: Based on the data information, determine the first data source description information for all the content blocks in the visualization configuration page; Analyze all the first data source description information to obtain the first data source identification information corresponding to each content block.

[0008] As one preferred embodiment, the step of identifying changes in content blocks on the user-edited visual configuration page, and obtaining second data source identification information corresponding to all content blocks in the user-edited visual configuration page based on these changes, includes: Identify the configuration of the second content block of the visual configuration page after user editing; The configuration of the first content block and the configuration of the second content block are analyzed to obtain the changes in the content blocks; Based on the changes in the content blocks, determine the second data source description information for all the content blocks in the user-edited visual configuration page; Analyze all the description information of the second data source to obtain the identification information of the second data source corresponding to each content block in the user-edited visualization configuration page.

[0009] As one preferred embodiment, determining the content block to be rendered based on the first data source identification information and the second data source identification information includes: The identification information of the first data source and the identification information of the second data source are analyzed to obtain the data source identification difference results; Based on the data source identifier difference results, content block mapping information is determined, wherein the content block mapping information is used to describe the correspondence between each content block and the data source identifier; The content block to be rendered is determined based on the content block mapping information.

[0010] On the other hand, the present invention provides a visual configuration editing system, comprising: The information recognition module is used to recognize data information on the visual configuration page in response to user editing signals; The first identification module is used to obtain the first data source identification information corresponding to all content blocks in the visualization configuration page based on the data information; The second identification module is used to identify the changes in the content blocks of the user-edited visual configuration page, and based on the changes in the content blocks, to obtain the second data source identification information corresponding to all the content blocks in the user-edited visual configuration page; The difference analysis module is used to determine the content block to be rendered based on the first data source identification information and the second data source identification information; The page rendering module is used to render the visual configuration page based on the data source information corresponding to the content block to be rendered.

[0011] As one preferred embodiment, the information recognition module includes: The information acquisition unit is used to acquire configuration type information set by the user. The page type determination unit is used to determine the corresponding visual configuration page in the preset template library based on the configuration type information. The first configuration unit is used to identify the configuration of the first content block of the visualization configuration page, and analyze the configuration of the first content block to obtain the data information.

[0012] As one preferred embodiment, the first identification module includes: The first description unit is used to determine the first data source description information of all the content blocks in the visualization configuration page based on the data information. The first identification unit is used to analyze all the first data source description information to obtain the first data source identification information corresponding to each content block.

[0013] As one preferred embodiment, the second identification module includes: The second configuration unit is used to identify the configuration of the second content block of the visual configuration page after the user edits it. The change analysis unit is used to analyze the configuration of the first content block and the configuration of the second content block to obtain the change status of the content block; The second description unit is used to determine the second data source description information of all the content blocks in the user-edited visual configuration page based on the changes in the content blocks; The second identification unit is used to analyze all the description information of the second data source to obtain the identification information of the second data source corresponding to each content block in the user-edited visualization configuration page.

[0014] As one preferred embodiment, the difference analysis module includes: The identification difference unit is used to analyze the identification information of the first data source and the identification information of the second data source to obtain the identification difference result of the data source; The mapping information unit is used to determine content block mapping information based on the data source identifier difference result, wherein the content block mapping information is used to describe the correspondence between each content block and the data source identifier; A content block determination unit is used to determine the content block to be rendered based on the content block mapping information.

[0015] Compared to existing technologies, the beneficial effects of the embodiments of the present invention are at least one of the following: The present invention identifies the data information of the visualized configuration page in response to user editing signals, and obtains the first data source identification information corresponding to all content blocks accordingly, thereby realizing the automated extraction of data dependencies of the configuration page and solving the problem of low development efficiency caused by the need to manually specify data binding relationships one by one in the traditional hard-coding method; The present invention obtains the second data source identification information by identifying the changes in the content blocks after user editing, thereby realizing accurate capture of data source changes before and after editing; The present invention determines the content blocks to be rendered based on the first data source identification information and the second data source identification information, thereby realizing differentiated identification only for content blocks with data source changes, solving the problem of wasted computing resources caused by full parsing and full rendering, and improving the loading and updating efficiency of the configuration page; The present invention renders the visualized configuration page based on the data source information corresponding to the content blocks to be rendered, thereby realizing on-demand partial rendering instead of overall page refresh, solving the problem of page lag and decreased user experience caused by frequent full redraws in traditional visualization solutions. Attached Figure Description

[0016] Figure 1 This is a flowchart illustrating a visual configuration editing method in one embodiment of the present invention; Figure 2 This is a configuration flowchart of one embodiment of the present invention; Figure 3 This is a flowchart of the front-end rendering process in one embodiment of the present invention; Figure 4 This is a schematic diagram of the structure of a visual configuration editing system in one embodiment of the present invention; Figure label: Among them, 11. Information recognition module; 12. First identification module; 13. Second identification module; 14. Difference analysis module; 15. Page rendering module. Detailed Implementation

[0017] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. The purpose of providing these embodiments is to make the disclosure of the present invention more thorough and comprehensive. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative effort are within the scope of protection of the present invention.

[0018] In the description of this application, the terms "first," "second," "third," etc., are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of indicated technical features. Therefore, a feature defined with "first," "second," "third," etc., may explicitly or implicitly include one or more of that feature. In the description of this application, unless otherwise stated, "a plurality of" means two or more.

[0019] In the description of this application, it should be noted that, unless otherwise expressly specified and limited, the terms "installation," "connection," and "linking" should be interpreted broadly. For example, they can refer to fixed connections, detachable connections, or integral connections; they can refer to mechanical connections or electrical connections; they can refer to direct connections or indirect connections through an intermediate medium; and they can refer to the internal communication between two components. The terms "vertical," "horizontal," "left," "right," "upper," "lower," and similar expressions used herein are for illustrative purposes only and do not indicate or imply that the device or component referred to must have a specific orientation, or be constructed and operated in a specific orientation, and therefore should not be construed as limiting the invention. The term "and / or" as used herein includes any and all combinations of one or more of the associated listed items. Those skilled in the art can understand the specific meaning of the above terms in this application based on the specific circumstances.

[0020] In the description of this application, it should be noted that, unless otherwise defined, all technical and scientific terms used in this invention have the same meaning as commonly understood by one of ordinary skill in the art. The terminology used in this specification is for the purpose of describing specific embodiments only and is not intended to limit the invention. Those skilled in the art can understand the specific meaning of the above terms in this application based on the specific circumstances.

[0021] With the deep integration and large-scale implementation of intelligent manufacturing, industrial internet, and IoT platforms, the number of devices requiring monitoring in industrial sites is increasing exponentially. These devices encompass heterogeneous terminals such as gateways, sensors, smart meters, PLCs, and industrial controllers, and data sources exhibit typical characteristics of being distributed, multi-protocol, high-concurrency, and real-time. Against this industrial backdrop, the visual configuration editor, as a core front-end support tool for industrial monitoring systems, digital twin platforms, and IoT management platforms, allows users to freely arrange visual elements such as charts, controls, and dashboards on the configuration page through drag-and-drop component arrangement, visual configuration, and a WYSIWYG low-code editing mode. It also establishes dynamic binding relationships with various data sources, including underlying device measurement points, register addresses, API interfaces, and device control tables. This enables the rapid construction of multi-dimensional visual applications such as industrial monitoring dashboards, project management views, and device-level monitoring interfaces, significantly reducing the development technical threshold of industrial monitoring systems, shortening deployment cycles, and improving system construction and iteration efficiency. It has become a key foundational technology for the digital and intelligent construction of modern industry.

[0022] Current mainstream visual configuration editing technologies generally adopt a monolithic rendering architecture, where all visual components share a single DOM tree structure, resulting in high coupling between component data dependencies, rendering logic, and page layout. When users perform editing operations and only need to modify, add, delete, or change the data source of a small number of components in the configuration page, existing technologies cannot achieve component-level rendering granularity control and differentiated update recognition. They can only execute a global full redraw strategy, performing indiscriminate parsing, data refresh, and DOM reconstruction on the entire configuration page.

[0023] One embodiment of the present invention provides a visual configuration editing method. For details, please refer to [link / reference]. Figure 1 , Figure 1 The diagram shown illustrates a flowchart of a visual configuration editing method according to one embodiment of the present invention, the method comprising steps S1 to S5: S1. Responding to user editing signals, identify data information on the visual configuration page; S2. Based on the data information, obtain the first data source identification information corresponding to all content blocks in the visualization configuration page; S3. Identify the changes in the content blocks of the user-edited visual configuration page, and based on the changes in the content blocks, obtain the second data source identification information corresponding to all the content blocks in the user-edited visual configuration page; S4. Based on the first data source identification information and the second data source identification information, determine the content block to be rendered; S5. Render the visualization configuration page based on the data source information corresponding to the content block to be rendered.

[0024] It should be noted that, in the embodiments of this invention, the visual configuration editing is mainly divided into two stages: the configuration stage and the configuration operation stage. The operation stage is further subdivided into three sub-stages: initialization and subscription, real-time data push, and front-end differential rendering. In the configuration stage, the user generates a structured, parsable configuration file through the visual editing interface by dragging and dropping and configuring. For details, please refer to [link to relevant documentation]. Figure 2 , Figure 2 The diagram illustrates a configuration flowchart in one embodiment of the present invention. Preferably, after entering the new / edit large screen configuration stage, the user adds various visual components through drag-and-drop operations in the visual editing interface, configures the component styles and layouts, and binds the components to the underlying data source, completing the interface design and data association. After configuration, the visual editing system automatically parses the component layout, style parameters, and data binding rules generated by the user's operations, generating a standardized large screen configuration JSON file. Subsequently, this configuration JSON file is stored in the database, forming a persistent and reusable configuration configuration file for subsequent runtime stages, completing the entire configuration configuration process. During the configuration runtime stage, the configuration configuration file is loaded and parsed. The front end subscribes to the corresponding data point topics from the back end according to the configuration. The back end accurately pushes real-time device data to the front end through a publish-subscribe mechanism. The front end performs differential updates based on the mapping relationship between components and data points, only performing local rendering on content blocks associated with data changes, achieving efficient, low-power, and flicker-free real-time visual display. The specific implementation of the present invention will be further described in detail below.

[0025] In step S1, at the initial stage of the user's edit operation, the basic information of the visual configuration page is collected and parsed. This provides a complete and accurate original data foundation for subsequent data source identification generation, content block change recognition, and local incremental rendering. It avoids problems such as rendering errors, full redrawing, and data binding failure caused by missing or inaccurate initial information, and ensures the implementation of the component-level accurate update mechanism from the source.

[0026] Specifically, firstly, when a user is detected performing operations such as creating, modifying, configuring, or dragging, the system responds to the user's editing signal and enters the editing and parsing state. Secondly, it retrieves the configuration type information set by the user from the user's operation context or configuration items to clarify the current editing scenario. This configuration type information is a user-defined classification identifier used to distinguish between the application level and business scenario of the visual configuration, including large-screen configuration (a macro-level monitoring view for the entire plant or campus), project configuration (a meso-level analysis view for the workshop or production line), and equipment configuration (a micro-level monitoring view for a single device). Then, based on the configuration type information, the system retrieves and loads the corresponding visual configuration page from the preset template library, completing page initialization. Next, the initialized page is parsed to identify the configuration of the first content block of the visual configuration page, i.e., the complete state of all content blocks before editing. Finally, the configuration of the first content block is extracted and standardized in a structured manner to obtain data information that can be used for subsequent calculations. Specifically, this includes: page hierarchy and type information; the identifier, position and layout parameters of each content block; the data source type corresponding to the content block (device measurement point, register address, API, static data, device control table, etc.); and the initial data binding rules and relationships.

[0027] Among them, user editing signals refer to the trigger commands generated by users performing operations in the visual configuration editing interface, and are the only signals to start the editing process. Specifically, these include commands triggered by operations such as creating a new configuration, editing a configuration, dragging and dropping components, modifying the data source, adjusting styles, saving configurations, previewing pages, deleting content blocks, and binding device measurement points.

[0028] The preset template library is a collection of standardized page templates pre-built and stored by the visual editing system, each corresponding to a different configuration type. It provides general layouts, components, styles, and data binding specifications, unifies page structure, and reduces configuration error rates. Specific templates include: industrial monitoring templates, energy statistics templates, equipment status templates, and large-screen display templates.

[0029] The first content block configuration is the initial set of all content blocks in the visual configuration page before the user's editing operation, serving as the baseline data for subsequent comparisons. Specifically, it includes: the type, quantity, position, size, style, initial binding relationship with the data source, as well as the content block's hierarchy, visibility, and interaction logic. A content block is the smallest rendering unit, i.e., a component or element, that independently carries display, control, and data interaction functions in the visual configuration page. These include: charts, dashboards, text, buttons, switches, progress bars, tables, device controls, register display units, etc. Each content block can be independently bound to a data source, rendered independently, and updated independently.

[0030] In step S2, a core connecting link between the configuration phase and the configuration operation phase, its main purpose is to transform the abstract content block configuration information in the visual configuration page into standardized identification information that can be identified and addressed by the underlying device data source. For example, in industrial monitoring scenarios, content blocks need to be precisely bound to multiple types of data sources such as device measurement points, register addresses, and API interfaces to achieve effective real-time data presentation. Without this identification mapping process, the front-end content blocks will not be able to establish an effective connection with the underlying data link, resulting in data not loading correctly, display errors, or failure to respond to changes in device status. At the same time, this step, through a unified identification system, provides accurate addressing basis for differential rendering and data subscription in the subsequent operation phase. It is a key prerequisite for achieving "one-to-one correspondence and precise association between content blocks and data sources," directly ensuring the accuracy and reliability of data interaction in high-concurrency and high-real-time scenarios of the visual configuration system.

[0031] Specifically, firstly, the unique identifier ID of each content block is clearly marked in the data information. For example, for the content block "Real-time Status Dashboard of Crane Hook" in the industrial monitoring screen, its ID is "hook_status_001". Simultaneously, the initial data source bound to this content block is recorded as "Crane Hook Angle Acquisition Measurement Point" and "Crane Hook Load Real-time Monitoring Register", along with a description of the data source type (equipment measurement point type, register address type), the equipment information (crane number TQ_001, production line A workshop), the data acquisition frequency (100ms / time), and the data unit (angle: °, load: t), etc., as the first data source description information. Secondly, the first data source description information is parsed and encoded according to preset encoding rules: using the unique ID of the content block as an index, combined with key information such as the data source type encoding, equipment encoding, data point encoding, and interface path, a globally unique data source identifier encoding is generated. A corresponding MQTT topic, WebSocket subscription path, or API call address is assigned to this data source to form complete addressing information. At the same time, a validity status bit is added to each data source identifier to mark whether the data source is online, can be collected, and can be subscribed to. Finally, the content block ID, unique data source code, subscribed topic, address path, and validity status bit are combined and encapsulated to form the first data source identification information corresponding to the content block. Following this method, all content blocks within the visual configuration page are processed sequentially, ultimately yielding the set of first data source identification information corresponding to all content blocks.

[0032] Specifically, the first data source description information refers to a structured set of descriptions obtained from parsing data information on the visual configuration page. This descriptions describe the attributes, types, sources, and binding relationships of the data sources bound to each content block, and is used to generate standardized identifiers. It includes: data source type (device measurement point, register address, device control table, static data, API interface); data source attribution information (device ID, gateway ID, project ID, register group, starting address, offset); data point information (data point identifier, field name, data unit, acquisition period, read / write type); and content block binding information (content block ID, component type, binding method, data mapping rules).

[0033] The primary data source identifier refers to a globally unique identifier generated through standardized encoding based on the primary data source description information. This identifier uniquely identifies the data source corresponding to a content block and serves as the core basis for difference comparison, data subscription, push notifications, and rendering updates. It includes: the content block's unique ID, the data source's globally unique code (UID), the data source's subscribed topic, and the data source's address path or interface information.

[0034] In step S3, as a core closed-loop link connecting the configuration and operation phases, its core purpose is to establish a dynamic baseline mapping relationship after user editing operations. Specifically, this step aims to accurately capture the changes to content blocks caused by each user editing action on the visual configuration page, including adding, deleting, dragging layouts, modifying styles, or rebinding data sources, and based on these changes, regenerate the second data source identification information corresponding to all content blocks after editing. Its core value lies in the fact that the second data source identification information generated in this step, together with the first data source identification information generated in the previous steps, constitutes a complete before-and-after comparison baseline pair. Through this pair of baseline data, the system can achieve accurate identification of the differences between the "content block and data source mapping relationship before and after editing," providing a direct calculation basis for subsequent front-end differential rendering. From a technical logic perspective, this ensures that the system only performs local rendering on the content blocks that have changed, rather than global redrawing. This is a key core step in solving technical bottlenecks such as lag, flickering, and excessive resource consumption under high concurrency in industrial scenarios.

[0035] Specifically, firstly, the system receives and parses all editing commands completed by the user in the visual configuration editing interface, such as "add dashboard component," "drag and drop button to new location," and "modify chart data source binding." After the operation is completed, a full scan of the current visual configuration page is immediately performed to capture the configuration information of the second content block. This configuration information includes the final ID, type, layout coordinates, size, style attributes of all content blocks on the page, as well as the latest binding relationship between each content block and the underlying device data source. Secondly, the system performs a field-by-field and element-by-element difference comparison analysis between the second content block configuration information and the first content block configuration information stored in the previous steps. Through comparison, the system accurately identifies changes in the content blocks, specifically: for newly added content blocks, extracting their unique ID, type, initial layout parameters, and description of the newly bound data source; for deleted content blocks, recording their original ID and original binding relationship; for content blocks with changed attributes, locating their ID and recording specific changes, such as position coordinates or style values; for content blocks with rebound data sources, recording their ID, original binding information, and new data source description. Then, for each identified change, further in-depth analysis is performed to generate second data source description information. For newly added or re-bound content blocks, the system extracts core attributes such as the type of the newly bound data source, the device ID, the data point ID, and the collection period, and combines them into complete descriptive information. For content blocks with changed or deleted attributes, the original data source descriptive information is updated or marked as invalid according to the changes. Next, a preset standardized encoding rule is invoked to uniformly encode all secondary data source descriptive information. Based on the final ID of the content block, and combined with key elements such as the new data source type encoding, device encoding, and data point encoding, a globally unique data source encoding (UID) is generated. Simultaneously, a corresponding MQTT subscription topic, WebSocket communication path, or API interface address is assigned to this new encoding to form complete addressing information. A validity status bit is also attached to indicate whether the data source can be connected normally. Finally, the final ID of the edited content block, its corresponding globally unique new data source encoding, subscription topic or addressing path, and validity status bit are combined and encapsulated to form secondary data source identification information. Following this process, all content blocks are processed sequentially, ultimately resulting in a set of secondary data source identification information corresponding to all content blocks in the visual configuration page after editing.

[0036] Specifically, the second content block configuration refers to the final state set of all content blocks in the visual configuration page after the user completes the editing operation. This includes: the final number, type, and unique identifier ID of the content blocks; the final position coordinates, size, and hierarchical relationship of the content blocks on the page; the final style attributes of the content blocks (color, font, and border, etc.); and the final binding relationship between the content blocks and the underlying data source.

[0037] Content block changes refer to structured information obtained by comparing the configuration of the second content block with that of the first content block, which describes the specific impact of user editing behavior on page content blocks. This includes: the ID, type, initial position, and bound data source information of newly added content blocks; the original ID, original position, and original bound data source information of deleted content blocks; the IDs of content blocks whose style, position, size, or other attributes have been modified, along with the specific modifications; and the IDs, original binding information, and new binding information of content blocks whose data source binding relationships have been modified.

[0038] The second data source description information refers to a structured set of descriptions obtained by parsing the configuration of the second content block, which describes the attributes, types, sources, and binding relationships of the data sources bound to each content block after editing. This includes: the type of the data source after editing (device measurement point, register address, device control table, static data, API interface); the ownership information of the data source after editing (device ID, gateway ID, project ID, etc.); the core attributes of the data points after editing (data point identifier, unit, collection cycle, etc.); and the new binding relationship and mapping rules between the content blocks and the data sources after editing.

[0039] The second data source identification information refers to the globally unique identification information generated according to standardized coding rules based on the second data source description information, used to uniquely identify the data source corresponding to each content block after editing. It includes: the unique ID of the edited content block; the globally unique code (UID) of the edited data source; the subscribed topic or address path of the edited data source; and the validity status bits of the edited data source.

[0040] Step S4 is a crucial decision-making node in the entire visual configuration editing method, implementing the core logic of differential rendering. Its core purpose is to accurately identify content blocks whose data sources have changed, been added, or deleted during the editing process by comparing the first data source identifier information before the user's editing operation with the second data source identifier information after the editing operation.

[0041] It's important to note that in traditional monolithic rendering architectures, the system cannot distinguish between changed and unchanged content, forcing a global redraw that results in significant resource waste and performance degradation. This step, however, fundamentally solves this technical bottleneck by introducing a comparison of the differences between the two versions of the identifier information. It not only provides a precise target set for subsequent local rendering but, more importantly, implements the core strategy of "updating only the changed parts." This algorithmically eliminates the stuttering and flickering caused by global refreshes, ensuring that the system maintains smooth and efficient real-time visualization capabilities even in large-scale, high-concurrency industrial monitoring scenarios.

[0042] Specifically, the system first retrieves the stored first data source identifier information generated during the configuration phase, and the second data source identifier information generated in real time after user editing. Then, using the unique ID of the content block as the core key, it performs a fast traversal and comparison of these two sets of identifier information using a trie structure. During the comparison process, the system parses the content block mapping information and checks the corresponding record of each content block ID in the two sets of identifier information one by one. Specifically, the visual editing system executes the following difference identification logic: For newly added content blocks, if the system detects that a content block ID exists only in the second data source identification information but not in the first data source identification information, the system immediately determines that the content block is a newly added item and records its complete second data source identification information as the basis for rendering; for deleted content blocks, if the system detects that a content block ID exists only in the first data source identification information but not in the second data source identification information, the system determines that the content block has been deleted and needs to be removed from the front-end view, and includes it in the set of removal tasks to be rendered; for modified content blocks, if the system detects that a content block ID exists in both sets of identification information, but the corresponding data source globally unique code, subscription topic, or addressing path, or other core identification fields have changed, the system determines that the content block is a data source modified item and records the differences between its old and new identification information as the basis for the update task to be rendered. The system summarizes and classifies the newly added, deleted, and modified items identified above to form the final data source identification difference result. Based on this discrepancy, a structured mapping data is established, creating a one-to-one binding relationship between each content block in the visual configuration page and its corresponding data source identifier. This is the content block mapping information. The system directly locates all content blocks requiring rendering operations—the content blocks to be rendered—based on this mapping information. Specifically, added and changed items are content blocks requiring incremental or update rendering, while deleted items are content blocks requiring unloading or hiding rendering. Finally, the system sends the determined list of content blocks to be rendered and their corresponding rendering instructions (add, update, remove) to the front-end rendering engine, triggering subsequent partial rendering processes.

[0043] Specifically, content block mapping information refers to structured mapping data that establishes a one-to-one binding relationship between each content block in the visual configuration page and its corresponding data source identifier, using the unique identifier of the content block as an index. It is used to achieve fast addressing, association matching and change judgment of content blocks and data sources during the comparison of data source identifiers before and after editing, determination of content blocks to be rendered, data subscription push and front-end differential rendering.

[0044] In step S5, only the content blocks to be rendered determined by difference comparison are rendered locally, precisely, and on demand based on the data source information they are bound to. This completely abandons the global redrawing mechanism of traditional configuration editing systems and solves the technical defects caused by global refresh, such as high memory consumption, large rendering latency, page flickering and stuttering, and poor concurrency performance, from the execution level. This ensures that the visual configuration page runs stably and efficiently in the high real-time, high concurrency, and large-scale device access scenarios of the industrial Internet.

[0045] Specifically, based on the identifier of the content block to be rendered, the system retrieves its bound data source information, including data point ID, subscribed topic, device address, register parameters, interface address, real-time collected values, data unit, and parsing rules, completing data preparation before rendering. The front-end rendering engine performs corresponding operations based on the rendering type: for newly added or updated content blocks, it updates component data, refreshes the display state, rebinds events, and completes partial view updates; for deleted content blocks, it unloads the component, cancels data subscriptions, and releases related resources. The entire process does not trigger a full page refresh and does not affect other unchanged content blocks. After rendering is complete, the system updates the local cache and page state records, setting the current secondary data source identifier information as the new baseline state, preparing for the next editing operation.

[0046] Preferably, the present invention provides an embodiment of front-end rendering, the specific process of which can be found in [reference needed]. Figure 3 , Figure 3 The diagram illustrates a front-end rendering process in one embodiment of the present invention. The core logic of this front-end rendering is based on the component-data point mapping relationship to achieve precise local updates and adapt to changes in window size, avoiding performance losses caused by global redraws. Specifically, after the rendering process starts, the target component whose data has changed is first located based on the pre-established component-data point mapping relationship (or the content block mapping information mentioned above). Then, differential update operations are performed on the corresponding component, only updating the data and view of the component associated with the data change, rather than performing a global redraw. After the update is completed, a page redraw is triggered, and the current window size is simultaneously checked. If the window size has not changed, the page directly enters the normal display state, completing this rendering process. If the window size has changed, the system triggers adaptive display calculation, recalculating the layout parameters and scaling ratios of each component based on the current window size, performing proportional scaling / layout reconstruction, and feeding the adjusted layout parameters back to the page redraw, re-executing the local update process until the page is adapted and displayed normally.

[0047] Another embodiment of the present invention provides a visual configuration editing system; for details, please refer to [link to documentation]. Figure 4 , Figure 4 The diagram shown illustrates the structure of a visual configuration editing system according to one embodiment of the present invention. The system includes: Information recognition module 11 is used to recognize data information on the visual configuration page in response to user editing signals; The first identification module 12 is used to obtain the first data source identification information corresponding to all content blocks in the visualization configuration page based on the data information; The second identification module 13 is used to identify the changes in the content blocks of the user-edited visual configuration page, and based on the changes in the content blocks, to obtain the second data source identification information corresponding to all the content blocks in the user-edited visual configuration page; The difference analysis module 14 is used to determine the content block to be rendered based on the first data source identification information and the second data source identification information; The page rendering module 15 is used to render the visual configuration page based on the data source information corresponding to the content block to be rendered.

[0048] Furthermore, in the above embodiments, the information recognition module includes: The information acquisition unit is used to acquire configuration type information set by the user. The page type determination unit is used to determine the corresponding visual configuration page in the preset template library based on the configuration type information. The first configuration unit is used to identify the configuration of the first content block of the visualization configuration page, and analyze the configuration of the first content block to obtain the data information.

[0049] Further, in the above embodiments, the first identification module includes: The first description unit is used to determine the first data source description information of all the content blocks in the visualization configuration page based on the data information. The first identification unit is used to analyze all the first data source description information to obtain the first data source identification information corresponding to each content block.

[0050] Furthermore, in the above embodiments, the second identification module includes: The second configuration unit is used to identify the configuration of the second content block of the visual configuration page after the user edits it. The change analysis unit is used to analyze the configuration of the first content block and the configuration of the second content block to obtain the change status of the content block; The second description unit is used to determine the second data source description information of all the content blocks in the user-edited visual configuration page based on the changes in the content blocks; The second identification unit is used to analyze all the description information of the second data source to obtain the identification information of the second data source corresponding to each content block in the user-edited visualization configuration page.

[0051] Furthermore, in the above embodiments, the difference analysis module includes: The identification difference unit is used to analyze the identification information of the first data source and the identification information of the second data source to obtain the identification difference result of the data source; The mapping information unit is used to determine content block mapping information based on the data source identifier difference result, wherein the content block mapping information is used to describe the correspondence between each content block and the data source identifier; A content block determination unit is used to determine the content block to be rendered based on the content block mapping information.

[0052] Compared to existing technologies, the beneficial effects of the embodiments of the present invention are at least one of the following: The present invention identifies the data information of the visualized configuration page in response to user editing signals, and obtains the first data source identification information corresponding to all content blocks accordingly, thereby realizing the automated extraction of data dependencies of the configuration page and solving the problem of low development efficiency caused by the need to manually specify data binding relationships one by one in the traditional hard-coding method; The present invention obtains the second data source identification information by identifying the changes in the content blocks after user editing, thereby realizing accurate capture of data source changes before and after editing; The present invention determines the content blocks to be rendered based on the first data source identification information and the second data source identification information, thereby realizing differentiated identification only for content blocks with data source changes, solving the problem of wasted computing resources caused by full parsing and full rendering, and improving the loading and updating efficiency of the configuration page; The present invention renders the visualized configuration page based on the data source information corresponding to the content blocks to be rendered, thereby realizing on-demand partial rendering instead of overall page refresh, solving the problem of page lag and decreased user experience caused by frequent full redraws in traditional visualization solutions.

[0053] The embodiments described above are merely illustrative of several implementations of the present invention, and while the descriptions are specific and detailed, they should not be construed as limiting the scope of the present invention. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of the present invention, and these modifications and improvements all fall within the scope of protection of the present invention. Therefore, the scope of protection of this patent should be determined by the appended claims.

Claims

1. A visual configuration editing method, characterized by, include: Responding to user editing signals, it identifies data information on the visual configuration page; Based on the data information, the first data source identification information corresponding to all content blocks in the visualization configuration page is obtained; Identify the changes in content blocks on the user-edited visual configuration page, and based on the changes in content blocks, obtain the second data source identification information corresponding to all content blocks on the user-edited visual configuration page; Based on the first data source identification information and the second data source identification information, the content block to be rendered is determined; The visualization configuration page is rendered based on the data source information corresponding to the content block to be rendered.

2. The method of claim 1, wherein, The data information identified on the visual configuration page includes: Retrieve user-defined configuration type information; Based on the configuration type information, the corresponding visual configuration page in the preset template library is determined; The configuration of the first content block on the visualization configuration page is identified, and the configuration of the first content block is analyzed to obtain the data information.

3. The visual configuration editing method as described in claim 1, characterized in that, The step of obtaining the first data source identifier information corresponding to all content blocks in the visualization configuration page based on the data information includes: Based on the data information, determine the first data source description information for all the content blocks in the visualization configuration page; Analyze all the first data source description information to obtain the first data source identification information corresponding to each content block.

4. The method of claim 2, wherein the visual configuration editing method is characterized by, The step of identifying changes in content blocks on the user-edited visual configuration page, and based on these changes, obtaining second data source identification information corresponding to all content blocks on the user-edited visual configuration page, includes: Identify the configuration of the second content block of the visual configuration page after user editing; The configuration of the first content block and the configuration of the second content block are analyzed to obtain the changes in the content blocks; Based on the changes in the content blocks, determine the second data source description information for all the content blocks in the user-edited visual configuration page; Analyze all the description information of the second data source to obtain the identification information of the second data source corresponding to each content block in the user-edited visualization configuration page.

5. The method of claim 1, wherein the visualization configuration is edited by a user. 5 The step of determining the content block to be rendered based on the first data source identifier information and the second data source identifier information includes: The identification information of the first data source and the identification information of the second data source are analyzed to obtain the data source identification difference results; Based on the data source identifier difference results, content block mapping information is determined, wherein the content block mapping information is used to describe the correspondence between each content block and the data source identifier; The content block to be rendered is determined based on the content block mapping information.

6. A visual configuration editing system, characterized by include: The information recognition module is used to recognize data information on the visual configuration page in response to user editing signals; The first identification module is used to obtain the first data source identification information corresponding to all content blocks in the visualization configuration page based on the data information; The second identification module is used to identify the changes in the content blocks of the user-edited visual configuration page, and based on the changes in the content blocks, to obtain the second data source identification information corresponding to all the content blocks in the user-edited visual configuration page; The difference analysis module is used to determine the content block to be rendered based on the first data source identification information and the second data source identification information; The page rendering module is used to render the visual configuration page based on the data source information corresponding to the content block to be rendered.

7. The visual configuration editing system of claim 6, wherein, The information recognition module includes: The information acquisition unit is used to acquire configuration type information set by the user. The page type determination unit is used to determine the corresponding visual configuration page in the preset template library based on the configuration type information. The first configuration unit is used to identify the configuration of the first content block of the visualization configuration page, and analyze the configuration of the first content block to obtain the data information.

8. The visual configuration editing system of claim 6, wherein, The first identification module includes: The first description unit is used to determine the first data source description information of all the content blocks in the visualization configuration page based on the data information. The first identification unit is used to analyze all the first data source description information to obtain the first data source identification information corresponding to each content block.

9. The visual configuration editing system of claim 7, wherein, The second identification module includes: The second configuration unit is used to identify the configuration of the second content block of the visual configuration page after the user edits it. The change analysis unit is used to analyze the configuration of the first content block and the configuration of the second content block to obtain the change status of the content block; The second description unit is used to determine the second data source description information of all the content blocks in the user-edited visual configuration page based on the changes in the content blocks; The second identification unit is used to analyze all the description information of the second data source to obtain the identification information of the second data source corresponding to each content block in the user-edited visualization configuration page.

10. The visual configuration editing system of claim 6, wherein, The difference analysis module includes: The identification difference unit is used to analyze the identification information of the first data source and the identification information of the second data source to obtain the identification difference result of the data source; The mapping information unit is used to determine content block mapping information based on the data source identifier difference result, wherein the content block mapping information is used to describe the correspondence between each content block and the data source identifier; A content block determination unit is used to determine the content block to be rendered based on the content block mapping information.

Images