Method and system for constructing dynamic data visualization operation and maintenance platform

Abstract

This invention provides a method and system for constructing a dynamic data visualization operation and maintenance platform, relating to the field of data processing technology. The method includes: Step 1, in the initial project canvas, dragging and dropping basic / decorative / custom components from the built-in model library of the visualization design platform to build the basic structure and visual layout of the visualization page; by setting component attributes, performing operations such as arranging, locking, hiding, and copying, a page structure with clear interactive logic is formed; Step 2, by inputting natural language keywords or voice commands, the generated result is obtained, and the generated result is embedded into the current page layout to achieve intelligent component expansion and visual enhancement. This invention can efficiently build operation and maintenance visualization pages with clear interaction and visual adaptation, quantify visual complexity and dynamically optimize rendering parameters, simplify the deployment process, and achieve efficient, smooth page operation and convenient access.

Description

Technical Field

[0001] This invention relates to the field of data processing technology, and in particular to a method and system for constructing a dynamic data visualization and maintenance platform. Background Technology

[0002] When building visual monitoring dashboards for data center operations and maintenance, existing visualization design platforms typically support drag-and-drop layouts and basic component configurations, which can meet the needs of most static or low-dynamic scenarios. However, in operational environments where monitoring tasks are frequently adjusted, existing methods may have some aspects that warrant optimization.

[0003] For example, when a cloud computing operations team was building a real-time monitoring page for the "Double Eleven" shopping festival, they needed to simultaneously display the performance curves, network topology, and alarm lists of dozens of nodes. As the promotion progressed, operations personnel might temporarily add a traffic prediction component to the already crowded canvas using natural language commands. In this dynamic adjustment process, most existing tools embed the new component as an independent object, with limited adaptive perception of the overall visual density distribution of the page, making it difficult to determine in real time which areas might become visual focal points due to component stacking and which areas would be relatively sparse.

[0004] Due to the lack of quantitative modeling of layout geometry features (such as component bounding box distribution), the rendering scheduling strategies of some existing solutions are relatively fixed. For example, they may use similar animation frame rates or data refresh intervals for each component within the canvas. In some densely populated areas, this may cause delays in interactive response (such as frame drops when dragging the map). In sparsely populated areas, continuous high-frequency refresh may cause some idle computing resources. Specifically, when the distribution of components in the canvas forms an irregular visual center of gravity, existing methods may still have room for improvement in dynamically converting these geometric features into rendering priority criteria. This would provide more possibilities for balancing page smoothness and data real-time performance in highly dynamic operation and maintenance scenarios. Summary of the Invention

[0005] The technical problem to be solved by the present invention is to provide a method and system for building a dynamic data visualization operation and maintenance platform, thereby improving the platform's adaptability to complex operation and maintenance scenarios.

[0006] To solve the above-mentioned technical problems, the technical solution of the present invention is as follows: Firstly, a method for constructing a dynamic data visualization and operation and maintenance platform, the method comprising: Step 1: In the initial canvas of the project, drag and drop basic / decorative / custom components from the built-in model library of the visual design platform to build the basic structure and visual layout of the visual page; by setting component properties, perform operations such as arranging, locking, hiding, and copying to form a page structure with clear interaction logic; Step 2: By inputting natural language keywords or voice commands, the generated results are obtained and embedded into the current page layout to achieve intelligent component expansion and visual enhancement; Step 3: Extract the coordinates of the bottom left, bottom right, top left, and top right corners of the bounding boxes of all components in the current canvas as four constraint points. Based on the four constraint points, a parametric elliptical region is generated to obtain the visual focus field covering the layout of the main components. Step 4: Map the elliptical parameterized region to a unit square parameter plane, construct a continuously distributed visual complexity density function on the unit square parameter plane, and discretize the unit square parameter plane into several sub-regions. Calculate the approximate integral value on each sub-region as the visual rendering influence coefficient of the corresponding sub-region. Step 5: Based on the visual rendering impact coefficient of each sub-region, generate a weighted global visual complexity curve, and dynamically adjust the rendering priority, animation frame rate, and data refresh interval of each sub-region component; after completing the page design and interaction configuration, generate an access QR code or link, deploy the visualization page to the target terminal screen, and support real-time browser preview and interaction.

[0007] Secondly, the dynamic data visualization operation and maintenance platform construction system includes: The page building module is used to drag and drop basic / decorative / custom components from the built-in model library of the visual design platform in the initial canvas of the project to build the basic structure and visual layout of the visual page; by setting component properties, operations such as arranging, locking, hiding, and copying are performed to form a page structure with clear interaction logic; The intelligent generation extension module is used to obtain the generated result by inputting natural language keywords or voice commands, and embed the generated result into the current page layout to achieve intelligent component expansion and visual enhancement; The visual focus field construction module is used to extract the coordinates of the bottom left, bottom right, top left, and top right corners of the bounding boxes of all components in the current canvas as four constraint points. Based on the four constraint points, an elliptical parameterized region is fitted to obtain a visual focus field that covers the layout of the main components. The visual complexity quantification module is used to map the elliptical parameterized region to a unit square parameter plane, construct a continuously distributed visual complexity density function on the unit square parameter plane, discretize the unit square parameter plane into several sub-regions, calculate the integral approximation value on each sub-region, and use it as the visual rendering influence coefficient of the corresponding sub-region. The dynamic rendering optimization and deployment module is used to generate a global visual complexity curve based on the visual rendering impact coefficient of each sub-region, and dynamically adjust the rendering priority, animation frame rate and data refresh interval of each sub-region component; after completing the page design and interaction configuration, it generates an access QR code or link to deploy the visual page to the target terminal screen, supporting real-time browser preview and interaction.

[0008] Thirdly, a computer-readable storage medium storing a program that, when executed by a processor, implements the method.

[0009] The above-described solution of the present invention has at least the following beneficial effects: The drag-and-drop component configuration provides a visual interface, simplifying the page building process and enabling the setup of basic layouts and interactive logic. Leveraging AI-generated natural language or voice, it quickly responds to dynamic design needs in operational scenarios, generating and seamlessly embedding appropriate visual elements. This allows pages to be adjusted in real-time to meet operational monitoring requirements, enhancing the timeliness and creativity of designs. By extracting component bounding box coordinates and fitting the visual focus field, it captures the core visual layout areas of the page, resolving the issue of insufficient perception of visual density distribution. Furthermore, by constructing a visual complexity density function and calculating rendering influence coefficients, it accurately determines the visual complexity of different areas of the page, enabling the platform to precisely identify visual centers of gravity and sparse areas, providing data support for the rational allocation of resources.

[0010] Based on the visual rendering impact coefficient, the rendering priority, animation frame rate, and data refresh interval of each region are dynamically adjusted, allowing computing resources to be allocated on demand. This avoids interactive stuttering and response latency issues caused by insufficient resources in high-complexity areas, while also solving the problem of idle computing resources caused by high-frequency refreshes in low-complexity areas, thus balancing the smoothness of page interaction and the real-time nature of data display. From rapid page construction and intelligent expansion to dynamic rendering optimization, the entire process supports real-time adjustments to monitoring needs during operation and maintenance. It can effectively cope with frequent additions of components and dynamic changes in layout in operation and maintenance scenarios, improving the platform's adaptability to complex operation and maintenance scenarios. Page deployment is completed by generating QR codes or links, supporting real-time browser preview and interaction, allowing operation and maintenance personnel to view monitoring data anytime, anywhere, improving the convenience and timeliness of operation and maintenance monitoring. Through rendering scheduling strategies, the platform's computing resource allocation method is optimized, reducing ineffective computing consumption and improving the overall operational stability of the platform, providing reliable technical support for long-term, high-load operation and maintenance monitoring work. Attached Figure Description

[0011] Figure 1 This is a flowchart illustrating the method for constructing a dynamic data visualization operation and maintenance platform provided in an embodiment of the present invention.

[0012] Figure 2 This is a schematic diagram of the dynamic data visualization operation and maintenance platform construction system provided in the embodiments of the present invention. Detailed Implementation

[0013] Exemplary embodiments of the present disclosure will now be described in more detail with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be implemented in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.

[0014] like Figure 1 As shown, embodiments of the present invention propose a method for constructing a dynamic data visualization operation and maintenance platform, the method comprising the following steps: Step 1: In the initial canvas of the project, drag and drop basic / decorative / custom components from the built-in model library of the visual design platform to build the basic structure and visual layout of the visual page; by setting component properties, perform operations such as arranging, locking, hiding, and copying to form a page structure with clear interaction logic; Step 2: By inputting natural language keywords or voice commands, the generated results are obtained and embedded into the current page layout to achieve intelligent component expansion and visual enhancement; Step 3: Extract the coordinates of the bottom left, bottom right, top left, and top right corners of the bounding boxes of all components in the current canvas as four constraint points. Based on the four constraint points, a parametric elliptical region is generated to obtain the visual focus field covering the layout of the main components. Step 4: Map the elliptical parameterized region to a unit square parameter plane, construct a continuously distributed visual complexity density function on the unit square parameter plane, and discretize the unit square parameter plane into several sub-regions. Calculate the approximate integral value on each sub-region as the visual rendering influence coefficient of the corresponding sub-region. Step 5: Based on the visual rendering impact coefficient of each sub-region, generate a weighted global visual complexity curve, and dynamically adjust the rendering priority, animation frame rate, and data refresh interval of each sub-region component; after completing the page design and interaction configuration, generate an access QR code or link, deploy the visualization page to the target terminal screen, and support real-time browser preview and interaction.

[0015] In this embodiment of the invention, a drag-and-drop component configuration visual operation method simplifies the page building process, enabling the completion of basic layout and interaction logic settings. Utilizing AI-generated natural language or speech, it quickly responds to dynamic design needs in operation and maintenance scenarios, generating suitable visual elements and seamlessly embedding them, allowing the page to be adjusted in real time according to operation and maintenance monitoring requirements, improving the timeliness and creativity of the design. By extracting component bounding box coordinates and fitting the visual focus field, the core visual layout area of ​​the page is captured, solving the problem of insufficient perception of page visual density distribution. By constructing a visual complexity density function and calculating the rendering influence coefficient, accurate determination of the visual complexity of different areas of the page is achieved, enabling the platform to accurately identify the visual center of gravity and sparse areas, providing data support for the rational allocation of resources.

[0016] Based on the visual rendering impact coefficient, the rendering priority, animation frame rate, and data refresh interval of each region are dynamically adjusted, allowing computing resources to be allocated on demand. This avoids interactive stuttering and response latency issues caused by insufficient resources in high-complexity areas, while also solving the problem of idle computing resources caused by high-frequency refreshes in low-complexity areas, thus balancing the smoothness of page interaction and the real-time nature of data display. From rapid page construction and intelligent expansion to dynamic rendering optimization, the entire process supports real-time adjustments to monitoring needs during operation and maintenance. It can effectively cope with frequent additions of components and dynamic changes in layout in operation and maintenance scenarios, improving the platform's adaptability to complex operation and maintenance scenarios. Page deployment is completed by generating QR codes or links, supporting real-time browser preview and interaction, allowing operation and maintenance personnel to view monitoring data anytime, anywhere, improving the convenience and timeliness of operation and maintenance monitoring. Through rendering scheduling strategies, the platform's computing resource allocation method is optimized, reducing ineffective computing consumption and improving the overall operational stability of the platform, providing reliable technical support for long-term, high-load operation and maintenance monitoring work.

[0017] In another preferred embodiment of the present invention, prior to step 1: Step 001: Provide a B / S architecture-based visual design platform and establish a user login and authentication mechanism by accessing the server address through a browser to obtain user operation permissions. After logging in, users can create new visual projects through the platform homepage, setting the project name, canvas width and height, and selecting a matching application scenario template to generate the initial project canvas. Specifically, this includes: First, deploying the browser / server architecture-based visual design platform. The platform server is deployed on a designated server and assigned a dedicated server address. Users can access this server address through various modern browsers to enter the platform's login interface. The platform establishes a robust user login and authentication mechanism, setting up two types of operation accounts: a super administrator account and ordinary user accounts. Ordinary user accounts are activated and configured with permissions by the super administrator account on the platform server. After the user enters the matching username and password information on the login interface, the platform server verifies the validity of the entered username and password. If the verification is successful, the corresponding operation permissions are assigned to the user according to the account type. If the verification fails, a login failure message is displayed. After obtaining operation permissions, the user can enter the platform's homepage operation interface to carry out subsequent visual project creation operations.

[0018] After entering the platform homepage, users can see core functional modules such as New, All Projects, My Templates, and Template Market. The New module is the entry point for creating visual projects. After clicking this module, the platform will pop up a basic project information configuration window. The window contains three required configuration fields: Project Name, Canvas Width, and Canvas Height. Users should fill in the project name in the corresponding input boxes according to their actual visual operation and maintenance needs, and set the width and height values ​​of the canvas. The width and height values ​​of the canvas should be set according to the display requirements of the target deployment terminal screen. The unit of measurement is pixels. After setting, click the submit button in the window to confirm and submit the basic project information.

[0019] After receiving the basic project information submitted by the user, the platform redirects to the template marketplace module. This module contains built-in visualization templates covering various application scenarios, including matching templates for different operation and display scenarios such as large-screen data dashboards, IoT control screens, meeting screens, school classroom screens, and advertising screens. Users can filter and select visualization templates that match their project application scenarios from the template marketplace based on their pre-defined project requirements. The platform then integrates the user-selected template with the previously submitted project name and canvas width and height parameters. Based on the set canvas width and height values, the platform performs proportional size adaptation calculations on the selected template. The calculation method involves multiplying the original width and height of the template by the ratio of the set canvas width and height to the original width and height of the template, respectively, to achieve complete adaptation and display of the template content within the set canvas size. Then, through the platform's canvas generation engine, based on the adapted template and the project's basic parameters, the platform generates the initial canvas for the visualization project. The initial canvas will fully inherit the basic layout and component framework of the selected template, while matching the width and height dimensions set by the user. After generation, users can perform subsequent component configuration, layout adjustments, and other operations on this initial canvas.

[0020] This embodiment, based on a browser / server architecture platform design, breaks the limitations of operating terminals. Users do not need to install a dedicated client; they can access the platform simply through a general browser, lowering the barrier to entry. It establishes a layered user login and authentication mechanism, achieving fine-grained management of platform operation permissions through the division of permissions between super administrators and ordinary users. This ensures the security of project data and operation content within the platform and avoids project data risks caused by unauthorized operations. It provides a standardized project basic information configuration process, supporting users to independently set canvas width and height parameters, accurately matching the screen display requirements of different target deployment terminals, ensuring that the initial canvas size highly matches the actual application scenario. It also includes multiple built-in features. The system provides visual templates for scenes and integrates them with project parameters, eliminating the need for users to build a canvas framework from scratch. This saves time on initial project setup and improves the efficiency of creating visual projects. The standardized layout of the templates also provides users with professional design references. Automatic adaptation calculations between template and canvas sizes ensure that the content of the selected template is displayed completely and harmoniously within the defined canvas, avoiding issues such as stretching, cropping, and incomplete display due to size mismatches. This guarantees the visual effect and layout rationality of the initial canvas. The generated initial canvas inherits the basic layout and component framework of the template while retaining space for subsequent customization, balancing project creation efficiency with personalized design needs.

[0021] In a preferred embodiment of the present invention, step 1 includes: Step 100: In the initial project canvas, select basic components, decorative components, or custom components from the built-in model library of the visual design platform by dragging and dropping, and place them at the target coordinates on the canvas. Use the move tool provided by the design tool module to adjust the component position, use the crop tool to crop the component display area, use the transform tool to change the component's aspect ratio, use the rotate tool to set the component angle, use the rounded corner tool to define the component's corner radius, and use the scale tool to adjust the component size proportionally. Specifically, in the generated initial project canvas, the platform builds a built-in model library based on the component management module and resource management module. The component management module first completes the selection of basic components, decorative components, and custom components. The platform's architecture is structured around three main categories. Basic components are developed and pre-built by the platform itself, including standardized functional components such as text, charts, forms, maps, and IoT-related components. Decorative components are developed using resources from the resource management module, such as decorative image libraries and SVG vector graphics, and include visual enhancement components like main titles, subtitles, cards, and background images. Custom components are designed by users through combinations of basic components and saved to the model library, forming a personalized component library. All three categories are uniformly managed, categorized, and maintained within the model library. Users can filter and select components based on their operational visualization needs, and drag and drop selected components from the model library to the target coordinates on the canvas. After completing the initial layout of the components, various operation tools from the platform's design tool module are used to precisely adjust the geometric shape of the components. The operation methods for each tool are as follows: Using the move tool, drag the component to change its coordinates on the canvas for precise positioning; using the crop tool, select the display area of ​​the component to crop any parts exceeding the display requirements, retaining the core content; using the transform tool, drag the edge control points of the component to change its width and height ratio to fit the canvas layout; using the rotate tool, drag the rotation control points of the component or directly input angle values ​​to set the rotation angle for adjustment; and using the rounded corner tool, drag the component... The corner control points of the component can be set, or the corner radius value can be directly entered to define the curvature of the component's corners and optimize the visual presentation of the component. By dragging the control points of the component with the scaling tool at a fixed ratio, the width and height of the component are multiplied by the same scaling factor. The scaling factor can be selected from fixed values ​​such as 0.25, 0.5, 0.75, 1.25, 1.5, 2.0, etc., to achieve proportional enlargement or reduction of the component size and ensure that the component shape is not stretched or deformed. During all tool operations, the canvas will display the component's coordinates, size, angle, corner radius and other parameters in real time. Users can make precise adjustments to the geometric shape of the component based on the parameter feedback, so that each component forms a preliminary visual layout on the canvas.

[0022] Step 101: Bind the component to a data source via the property panel. The data source includes static JSON data and real-time data configured through dynamic requests. Set the component's style parameters in the property panel, including color, border, transparency, and font attributes. Configure the component's animation effects, including focus animation and entrance animation, and set the animation duration and delay. Specifically, after adjusting the component's geometric shape, proceed to the platform's property panel operation stage to bind the component to a data source, set style parameters, and configure animation effects, achieving a dual definition of the component's function and visual appearance. Regarding data source binding, the property panel provides two binding methods: static data and dynamic data. For static JSON data, users can directly enter or import data content in the static data editing area of ​​the property panel to complete the binding between the component and static data. For real-time data configured through dynamic requests, users fill in the request address, configure the request header and request parameters, select the data request method, and set the data synchronization time in the dynamic request configuration area of ​​the property panel. The platform will then send a data request to the specified server according to the configured parameters to obtain real-time operation and maintenance data and complete the binding with the component. Formatting of the obtained dynamic data is also supported. Ensure the data matches the display requirements of the components; regarding style parameter settings, users can customize the component's color, border, transparency, and font attributes in the style configuration area of ​​the attribute panel. Colors can be selected as solid colors or gradient effects; border width, style, and color can be set; transparency is adjusted by entering a value between 0 and 1, with 0 being completely transparent and 1 being completely opaque; font attributes allow for individual settings of font type, size, color, and weight. After all style parameters are set, the canvas will preview the component's style effect in real time; regarding animation effect configuration... The properties panel offers two main animation types: focus animation and entrance animation. Focus animation includes various effects such as blinking, pulse, bounce, and left-right swaying. Entrance animation includes various effects such as bottom-up, left-right, right-left, and top-down. Users first select the animation type and specific animation effect to be configured, and then set the duration and delay time of the animation respectively. The time unit is seconds. The animation duration is the length of a single complete playback of the animation, and the animation delay time is the interval between when the component is loaded and when the animation starts playing. After setting, the animation effect can be previewed in the canvas, and multiple adjustments are supported until it matches the visual requirements.

[0023] Step 102 involves binding event triggering logic to components. These events include single click, double click, mouse press, mouse release, and mouse leave. The triggering logic includes showing, hiding, toggling, page navigation, style changes, and custom script execution. The layer order of all components within the canvas is adjusted using a hierarchy management tool, including moving up, down, placing on top, and placing at the bottom. Selected components are then hidden, locked, copied, pasted, or deleted to create a page structure with a complete visual layout and clear interactive logic. Specifically, after configuring the component's data source and attributes, event triggering logic is bound to each component, and then the layer order is adjusted. The layer management tool provides fine-grained management of all component layers within the canvas, ultimately forming a page structure with a complete visual layout and clear interactive logic. Regarding event triggering logic binding, the platform configures an independent event binding entry point for each component. Users first select the event type to bind in the event configuration area of ​​the properties panel. Selectable event types include mouse interaction events such as single click, double click, mouse down, mouse down, and mouse away. Then, the corresponding triggering logic is configured for the selected event type. Triggering logic includes component display, component hiding, component state switching, page navigation, component style changes, and custom script execution. If a custom script is selected, users can write their own execution script in the code editing area. After completion, event triggering tests can be performed on the canvas to verify the execution effect of the triggering logic and ensure that the component's interaction logic meets the operational requirements. Regarding layer hierarchy management, the platform's hierarchy management tool is used. This tool displays all components within the canvas as layers, with each layer corresponding to one component, clearly showing the component's name and hierarchy order. Users can perform hierarchy adjustment operations on specified layers, including moving layers up, down, placing layers on top, and placing layers at the bottom, changing the visual stacking order of components on the canvas through hierarchy adjustments. The system avoids occlusion issues between components. It also allows for basic operations on selected layers, including hiding, locking, copying, pasting, and deleting. Hiding temporarily hides components from the canvas's visual display, locking fixes the component's position and shape to prevent accidental operations, copying and pasting quickly reuses configured components, and deleting removes unnecessary components from the canvas. After completing event logic binding and layer hierarchy management for all components, the overall visual layout and interaction logic of the canvas are comprehensively validated to ensure reasonable component layout and smooth interaction, ultimately forming a basic page structure that meets the needs of operation and maintenance visualization.

[0024] This embodiment enables visual selection and fine-grained geometric adjustment of components. Component layout and shape definition can be completed without writing code, lowering the technical threshold for page construction. Simultaneously, the precise design of various operation tools ensures that the geometric shape and layout position of components highly match the actual needs of operation and maintenance visualization, improving the accuracy of page layout. It supports dual data source binding of static and dynamic real-time data, satisfying both the need for fixed data display and the real-time synchronous display of operation and maintenance data, allowing the visualization page to accurately reflect the real-time status of the operation and maintenance site. It provides rich component style and animation effect configuration options, supporting personalized customization of the component's visual presentation. This allows the visualization page style to match the enterprise brand and operation and maintenance scenario, and also enables customization through animation effects. The system highlights core operational data, enhancing the visual appeal and data clarity of the page. It enables flexible binding of components to mouse interaction events, supporting various trigger logic configurations. Operations personnel can easily view data and switch pages using simple mouse operations, improving the convenience and efficiency of operations. Professional layer hierarchy management allows for precise adjustment of the visual stacking order of components, resolving occlusion issues. Hide and lock operations further enhance the controllability of the page editing process, preventing layout chaos caused by accidental operations and improving the efficiency and accuracy of page editing. All configuration operations support real-time preview and repeated adjustments, with the canvas providing real-time feedback on the operation effects. Users can optimize component layout, attributes, and interaction logic based on the preview results, increasing the success rate of page construction.

[0025] In a preferred embodiment of the present invention, step 2 includes: Step 200: Activate the AI-assisted design module in the visualization design platform interface. Receive natural language keywords input by the user via a text input box, or receive voice commands from the user via a voice acquisition device. Convert the received natural language keywords or voice commands into a text sequence, and input it into a pre-trained generative AI model for semantic parsing and intent recognition. The generative AI model generates corresponding visualization element descriptions based on the parsing results and calls the visualization design platform's built-in rendering engine to generate specific visualization elements. These visualization elements include dynamic background images, IoT device control switch components, and custom data charts. Specifically, this includes: completing the basic structure of the visualization page. After setup, users can find the AI-assisted design module's entry point in the visual design platform's interface. Activating the module by clicking on it will display two interactive entry points: text input and voice capture. This allows users to issue design commands in multiple formats. If the user chooses text input, they can enter natural language keywords in the platform's text input box. These keywords can include design requirements such as the type, style, function, and application scenario of the visual element. If the user chooses voice input, the platform will use a voice capture device to receive the user's voice commands and simultaneously launch a speech-to-text processing program to convert the received voice commands into a standardized text sequence, ensuring consistent command parsing.The platform employs a pre-trained generative AI model for initial model building and training. During the building phase, a dual-modal network architecture integrating natural language processing and visual generation is constructed based on a deep learning framework. The natural language processing layer comprises a three-level network structure for semantic parsing, intent recognition, and keyword extraction. The visual generation layer consists of specialized generation networks for element structure generation, visual style rendering, and interaction logic configuration. Furthermore, an attention mechanism and a dedicated component generation network layer are integrated into the dual-modal network fusion layer, enabling the model to accurately capture the core information in the design requirement text and establish precise associations with the feature dimensions of the visualization elements. This adapts to the diverse visualization element generation needs in operation and maintenance scenarios, such as dynamic backgrounds, IoT components, and data charts. During the training phase, a massive dataset of text descriptions and element style pairings related to visualization design is collected. This dataset covers detailed design requirement descriptions and corresponding visual features, structural parameters, and interaction logic information for various visualization elements, including dynamic backgrounds, IoT components, and data charts. It also includes targeted basic component feature data from the platform's component library, dedicated design data for operation and maintenance visualization scenarios, and benchmark case data from multiple industries. Multiple rounds of iterative training are conducted on the model. In each training round, the model generates parameters related to visualization elements based on the input text description. After training, the deviation between the model's generated results and the labeled data is accurately calculated using a loss function. Then, based on the deviation, gradient descent is used to backpropagate to each network layer of the model. The semantic parsing weights of the natural language processing layer (0.1 to 0.9), the intent recognition threshold (0.5 to 0.8), and the keyword extraction coefficient (0.2 to 0.8) are finely adjusted sequentially according to a preset learning rate of 0.001 to 0.01. The structural generation parameters, style rendering factors, and interaction logic configuration values ​​of the visual generation layer are also adjusted. At the same time, the weight allocation ratio of the attention mechanism in the fusion layer (0.3 to 0.9) and the node connection parameters of the component generation dedicated network layer are optimized. The training is continuously iterated until the model's semantic parsing accuracy reaches more than 95% and the visualization element generation matching degree reaches more than 90%, which are preset standards. This gives the model stable and accurate semantic parsing and visualization element generation capabilities. After training, the model is packaged and deployed to the AI-assisted design module. A dedicated interface calling protocol and system resource allocation strategy are configured for it to ensure that the platform can call the model in real time and efficiently during use.The platform inputs the keywords or converted text sequences mentioned above into the pre-trained generative AI model. The model first performs sentence-by-sentence semantic analysis of the text sequence using natural language processing technology to extract the core design requirements. Then, it uses intent recognition technology to determine the type, functional attributes, and visual features of the visualization elements required by the user, forming precise design requirement instructions. Based on the analysis and recognition results, the generative AI model generates corresponding visualization element description information, which includes core parameters such as the element's structure, function, visual style, and interaction logic. Subsequently, the model sends this description information to the rendering engine built into the visualization design platform. The rendering engine, based on the parameters of the description information, calls basic resources such as text icons, SVG vector graphics, and IoT-related image libraries in the platform's resource management module, and combines them with the component generation mechanism to generate specific visualization elements. The generated visualization elements include dynamic background images, IoT device control switch components, and custom data charts, meeting the design requirements of various elements in operation and maintenance visualization scenarios.

[0026] Step 201: Automatically insert the visual elements into the preset anchor points on the current canvas, or place them in a designated area of ​​the canvas in response to the user's drag-and-drop operation. Perform adaptive size adjustment on the inserted elements to match the aspect ratio with the existing canvas layout. Automatically apply the current theme's color and font style through the style inheritance mechanism to complete intelligent component expansion and visual enhancement. Specifically, after the rendering engine generates specific visual elements, the platform will start the element embedding and adaptive adjustment process. The platform's preset anchor points are the center positions of each functional area in the canvas, and the canvas's perimeter is preset. The platform automatically calibrates the coordinates of each preset anchor point position based on the canvas size and existing layout. This includes the center of the white space, the midpoint of the gaps between existing components, and the four corner auxiliary areas of the canvas. First, it checks if such preset anchor points exist on the canvas. If they do, the visual element is automatically inserted into that anchor point. If not, it waits for user input and responds to mouse dragging, placing the visual element in the designated area of ​​the canvas to complete the initial element layout. After the initial layout is complete, the platform performs adaptive size adjustments on the inserted elements, first obtaining the overall width and height of the existing canvas layout. The platform performs proportional scaling, extracting layout parameters such as the spacing between surrounding components and the width and height of the canvas area containing the element. It then calculates the maximum width and height that the area can accommodate, multiplying the original width and height of the visual element by the ratio of the maximum width and height that the canvas target area can accommodate to the element's original width and height. This achieves proportional scaling of the element's size, ensuring its aspect ratio matches the existing canvas layout and preventing issues like overcrowding or wasted space due to improper size. After adaptive scaling, the platform optimizes the visual style of the visual element through a style inheritance mechanism. First, it identifies the global theme style of the current visualization page, extracting core style parameters such as primary and secondary colors, font type, font size, and font weight. These parameters are automatically applied to newly inserted visual elements, ensuring consistency between the element's color, font, and other visual characteristics and the existing page style. If the newly inserted element is a functional component such as an IoT device control switch or a custom data chart, the platform will also inherit the interaction logic and data display specifications of similar components on the page, ensuring that the new element forms an organic whole with the original page's functionality, visuals, and interactions. Ultimately, this completes the intelligent component expansion and visual enhancement of the visualization page.

[0027] This embodiment enables multi-form design command interaction, supporting both text and voice input methods to cater to different user habits, allowing maintenance personnel to quickly and conveniently issue design requirements and improve command input efficiency. Relying on a pre-trained generative AI model, it achieves accurate semantic parsing and intent recognition, accurately extracting core design requirements from the user's natural language, avoiding design deviations caused by ambiguous command expressions, and ensuring that the generated visualization elements highly match user needs. The rendering engine can flexibly generate various visualization elements such as dynamic backgrounds, IoT control components, and custom charts, enriching the page's component types and visual presentation, and quickly meeting the dynamic design needs of temporarily adding components and optimizing visual effects in maintenance scenarios. It supports both automatic insertion and manual drag-and-drop placement of visualization elements, achieving... It enables rapid element layout while retaining user-defined adjustment space, allowing element layout to accurately match the actual layout needs of the canvas. Through adaptive size adjustment calculations, the aspect ratio of newly inserted elements perfectly matches the existing canvas layout, ensuring the overall page layout's coordination and aesthetics, avoiding the tedious manual size adjustments, and improving layout efficiency. The style inheritance mechanism allows new elements to automatically match the page's global theme style, achieving a unified visual style without requiring users to manually adjust the color, font, or other style parameters of new elements, saving visual optimization time and improving page design efficiency. New elements synchronously inherit the interaction and data display specifications of similar components, ensuring consistency in page interaction logic and data display, allowing maintenance personnel to operate new elements without needing to readjust, improving the convenience and smoothness of maintenance operations.

[0028] In a preferred embodiment of the present invention, step 3 includes: Step 300: In the page structure after completing intelligent component expansion and visual enhancement, traverse all placed components in the current canvas. Obtain the bounding box coordinates of each component in the canvas pixel coordinate system by calling the component's boundary attribute interface, including the horizontal and vertical coordinates of the top-left, top-right, bottom-left, and bottom-right corners of each bounding box. Specifically, after completing the intelligent component expansion and visual enhancement of the visualization page, the platform starts the component layout quantitative analysis program. First, it analyzes all placed basic components, decorative components, custom components, and AI-generated components in the current canvas. The platform performs a full traversal of all components to ensure that no component is missed. For each traversed component, the platform will automatically call the component's boundary attribute interface. This interface is a dedicated attribute interface for the canvas pixel coordinate system, which can directly read the complete coordinate information of the component's bounding box in the canvas pixel coordinate system. It can accurately obtain the coordinates of the four corner points of each component's bounding box, namely the horizontal and vertical coordinates of the top left corner, the horizontal and vertical coordinates of the top right corner, the horizontal and vertical coordinates of the bottom left corner, and the vertical and vertical coordinates of the bottom right corner. The coordinates of the four corner points of all components are collected and stored in a unified manner to form a canvas component bounding box coordinate dataset.

[0029] Step 301: Extract the minimum and maximum values ​​of the x-coordinate and y-coordinate from the corner coordinates of all components' bounding boxes, and denote them as the left boundary, right boundary, lower boundary, and upper boundary, respectively. Determine four constraint points based on these boundary values: the lower left corner, lower right corner, upper left corner, and upper right corner. Using the arithmetic mean of the four constraint points as the coordinates of the ellipse center, calculate the first distance between the lower left and upper right corners and the direction of their connecting line, and the second distance between the lower right and upper left corners and the direction of their connecting line. Compare the first and second distances, and select the larger distance value. The direction of the connecting line corresponding to the smaller distance value is taken as the direction of the major axis of the ellipse, and the direction of the connecting line corresponding to the smaller distance value is taken as the direction of the minor axis of the ellipse. Specifically, based on the canvas component bounding box coordinate dataset collected in step 300, the platform first performs coordinate extremum extraction, iterates through the four corner points of all component bounding boxes, selects the minimum and maximum values, and records them as the left boundary x-coordinate and right boundary x-coordinate respectively; it iterates through the four corner points of all component bounding boxes, selects the minimum and maximum values, and records them as the lower boundary y-coordinate and upper boundary y-coordinate respectively; based on the extracted coordinate extremum, four constraint points are determined. The bottom left corner point represents the combination of the left boundary x-coordinate and the bottom boundary y-coordinate; the bottom right corner point represents the combination of the right boundary x-coordinate and the bottom boundary y-coordinate; the top left corner point represents the combination of the left boundary x-coordinate and the top boundary y-coordinate; and the top right corner point represents the combination of the right boundary x-coordinate and the top boundary y-coordinate. The platform calculates the arithmetic mean of the coordinates of the four constraint points to obtain the x-coordinate and y-coordinate of the ellipse center. The x-coordinate of the ellipse center is the sum of the x-coordinate values ​​of the four constraint points divided by four, and the y-coordinate of the ellipse center is the sum of the y-coordinate values ​​of the four constraint points divided by four. This coordinate is the center coordinate of the visual focus field ellipse. Subsequently, respectively... Calculate the distance and direction of the line connecting two sets of diagonal constraint points. First, calculate the straight-line distance between the lower left and upper right corner points, denoted as the first distance, and determine the direction of the line connecting these two points. Second, calculate the straight-line distance between the lower right and upper left corner points, denoted as the second distance, and determine the direction of the line connecting these two points. After completing the calculation of the two sets of distances, compare the first and second distances. Select the direction of the line corresponding to the larger distance value as the major axis direction of the ellipse, and select the direction of the line corresponding to the smaller distance value as the minor axis direction of the ellipse, thus clarifying the axial direction attribute of the ellipse.

[0030] Step 302: Calculate the projection length of each constraint point to the ellipse center along the major axis, and take the maximum value as the length of the ellipse's semi-major axis. Similarly, take the maximum projection length along the minor axis as the length of the ellipse's semi-minor axis. Based on the ellipse center coordinates, semi-major axis lengths, semi-minor axis lengths, and the angle along the major axis, construct the ellipse parametric equation to generate an elliptical parametric region covering the layout of the main components. Define this elliptical parametric region as the visual focus field. Specifically, the platform uses the ellipse center, major axis direction, and minor axis direction determined in Step 301 as a basis to perform precise calculations of the ellipse semi-axis lengths. This involves projecting the four constraint points perpendicularly onto the ellipse's major axis. The projection length is calculated by first calculating the vector formed by the constraint point and the ellipse center, and then calculating the projection value of this vector onto a unit vector along the major axis. The absolute value of the value is the projection length from the constraint point to the center of the ellipse along the major axis. The four projection lengths are iterated through, and the maximum value is selected; this value is the length of the semi-major axis of the ellipse. Next, the four constraint points are projected perpendicularly onto the minor axis of the ellipse. Following the same calculation method, the vector formed by the constraint point and the center of the ellipse is first calculated, and then the projection value of this vector onto the unit vector along the minor axis is calculated. The absolute value of this projection is taken as the projection length from the constraint point to the center of the ellipse along the minor axis. The four projection lengths are iterated through, and the maximum value is selected; this value is the length of the semi-minor axis of the ellipse. After determining all parameters—the coordinates of the ellipse center, the length of the semi-major axis, the length of the semi-minor axis, and the angle along the major axis—the platform, according to the standard parametric equation construction rules for planar ellipses, substitutes all the above parameters into the parametric equation of the ellipse. The parametric equation of the ellipse is: ,in , The x and y coordinates of the center of the ellipse are: The length of the major semi-axis For the length of the shorter half-axis, The angle between the major axis and the horizontal axis of the canvas pixel coordinate system. The parameter θ is defined as a parameter with a value range of 0 to 2π. Based on this formula, an elliptical parametric equation is constructed to adapt to the layout of the canvas components. According to this parametric equation, a corresponding elliptical parametric region is generated in the canvas pixel coordinate system. The platform iterates through the continuous values ​​of parameter θ in the range of 0 to 2π, substitutes each value into the elliptical parametric equation, and calculates a set of horizontal and vertical coordinate values ​​in the canvas pixel coordinate system. All the calculated coordinate points are connected in sequence to form a closed elliptical contour. Then, all pixel areas inside the elliptical contour are calibrated to obtain a complete elliptical parametric region. This elliptical parametric region can completely cover the layout range of the main components in the canvas without omitting any core component layout areas. The platform formally defines this elliptical parametric region as the visual focus field, completing the geometric quantitative modeling of the layout of the main components of the canvas.

[0031] This embodiment achieves full traversal of all components in the canvas and precise extraction of bounding box coordinates. It directly obtains coordinate information in the pixel coordinate system using a dedicated boundary attribute interface, avoiding errors from manual measurement and calculation, and ensuring the accuracy of the basic data for subsequent geometric modeling. By extracting coordinate extrema, four constraint points are determined, accurately defining the core area of ​​the component layout in the canvas, ensuring the visual focus field covers the core layout area. The arithmetic mean method is used to calculate the coordinates of the ellipse center, and the ellipse axis direction is determined by comparing the distances of diagonal constraint points. This calculation logic is scientific and closely matches the geometric characteristics of the component layout, allowing the generated ellipse to accurately match the overall shape of the component layout. The ellipse semi-axis length is determined by projecting constraint points onto the axis direction and taking the maximum projection length, ensuring that the parameterized ellipse region completely covers the layout range of all components, preventing core components from exceeding the visual focus field, and ensuring the comprehensiveness of the visual focus field's quantification of the component layout. Based on the complete ellipse parameters, a dedicated parametric equation is constructed and a visual focus field is generated, realizing the geometric quantification modeling of the main component layout of the canvas, transforming the abstract component layout into specific mathematical parameters and geometric regions.

[0032] In a preferred embodiment of the present invention, step 4 includes: Step 400: Based on the elliptical parametric equation of the visual focus field, establish an isoparametric mapping relationship from the elliptical parameterized region to the unit square parameter plane. Any point within the elliptical parameterized region is mapped to a corresponding point on the unit square parameter plane through coordinate transformation, and points on the elliptical boundary are mapped to the square boundary. On the unit square parameter plane, based on the number of components, data update frequency, and animation density attributes of each component in the original canvas at their corresponding positions within the elliptical parameterized region, a continuously distributed visual complexity density function is constructed using spatial interpolation. Spatial interpolation is calculated based on the attribute values ​​of each component's mapped points and their distance weights on the parameter plane. Specifically, the platform establishes an isoparametric mapping relationship from the elliptical parameterized region to the unit square parameter plane based on the elliptical parametric equation of the visual focus field. First, the pixel coordinates of any point within the elliptical parameterized region are defined as coordinate values ​​in the canvas pixel coordinate system. Then, through coordinate normalization transformation, the horizontal and vertical coordinates of this point are mapped to the numerical range of 0 to 1, respectively. A unique mapping is achieved from any point within the elliptical parameterized region to its corresponding point on the unit square parameterized plane. Simultaneously, points on the elliptical boundary are accurately mapped to the boundary of the unit square parameterized plane after coordinate transformation, ensuring a one-to-one correspondence between the boundary and interior points before and after mapping. After establishing the isoparametric mapping relationship, the platform constructs a visual complexity density function on the unit square parameterized plane. First, the core attributes of each component's corresponding position within the elliptical parameterized region in the original canvas are extracted, including component quantity, data update frequency, and animation density. These three attribute values ​​are normalized and mapped to a uniform value range of 0 to 1. Then, weight coefficients are assigned to the three attributes: component quantity weight is set to 0.4, data update frequency weight to 0.3, and animation density weight to 0.3. A weighted sum is then used to obtain the comprehensive visual complexity value of each component, which is used as the base data. Simultaneously, the coordinates of each component within the elliptical parameterized region are isoparametrically mapped to their corresponding points on the unit square parameterized plane. A continuously distributed visual complexity density function is constructed using inverse distance weighted spatial interpolation. This interpolation method uses the comprehensive visual complexity value of each component mapping point as the interpolation node. For any point to be interpolated on the unit square parameter plane, the Euclidean distance from the point to all interpolation nodes is first calculated. Then, the reciprocal of the distance is taken to obtain the basic weight. If there is a case where the distance is 0, the comprehensive visual complexity value of the corresponding interpolation node is directly used as the density value of the point to be interpolated. If all distances are greater than 0, all basic weights are normalized so that the sum of the weights is 1. Then, the comprehensive visual complexity value of each interpolation node is multiplied by the corresponding normalized distance weight and summed to obtain the visual complexity density value of the point to be interpolated. By performing the above interpolation calculation on all points on the unit square parameter plane, a continuously distributed visual complexity density function covering the entire parameter plane is constructed. The formula for the visual complexity density function is as follows: ,in Let be the coordinates of any point on the unit square parametric plane. This represents the total number of interpolation nodes. For the point to be interpolated to the th Euclidean distance of interpolation nodes For the first The overall visual complexity value of each interpolation node.

[0033] Step 401a: For each rectangular sub-region, utilizing the continuous differentiability of the visual complexity density function, calculate the function value of the visual complexity density function and its gradient component along the outward normal direction of the boundary on the boundary of the rectangular sub-region. Specifically, the platform first uniformly divides the unit square parameter plane into 10,000 rectangular sub-regions of the same size according to a preset 100×100 grid density. The horizontal and vertical spans of each sub-region on the unit square parameter plane are both 0.01, ensuring that the divided sub-regions can finely cover the entire parameter plane, achieving visual complexity density density. Fine-grained evaluation of the degree: For each divided rectangular sub-region, utilizing the continuous differentiability of the visual complexity density function, traverse the four closed boundaries of the rectangular sub-region. On each boundary, select 10 uniformly distributed sampling points according to the principle of equal spacing, calculate the visual complexity density function value at each sampling point, and take the arithmetic mean of the function values ​​of all sampling points as the representative value of the visual complexity density function of that boundary. At the same time, calculate the gradient component of the visual complexity density function along the outward normal direction of each boundary. First, solve the first-order partial derivatives of the visual complexity density function with respect to the horizontal and vertical coordinates to obtain the gradient vector of the function. Then, based on the orientation of the rectangular sub-region boundaries, determine the unit vector of the outward normal direction of each boundary, where, This represents a small change in the horizontal axis. This represents a small change in the vertical axis. Let be the first-order partial derivative of the visual complexity density function with respect to the x-axis. The gradient vector of the visual complexity density function with respect to the ordinate is multiplied by the unit vector of the corresponding boundary outward normal direction. The result of the dot product is the gradient component of the visual complexity density function along the outward normal direction of the boundary. The gradient components of the outward normal direction of each of the four boundaries of the rectangular sub-region are obtained in the above manner.

[0034] Step 401b: According to the principle of integral transformation, the double integral of the visual complexity density function within the rectangular sub-region is converted into a line integral along the closed boundary of the rectangular sub-region. The integrand of the line integral is determined by a linear combination of the function values ​​on the boundary and the normal gradient components. Specifically, to obtain the overall quantized value of visual complexity within the rectangular sub-region, the double integral of the visual complexity density function within the rectangular sub-region needs to be calculated. The physical meaning of this double integral is the cumulative summation of the visual complexity density values ​​of all pixels within the rectangular sub-region on the two-dimensional plane, used to quantify the total visual complexity within the sub-region. The computational logic for reducing complexity load and rendering computational pressure involves dividing the rectangular sub-region into an infinite number of tiny area units along the horizontal and vertical axes. The visual complexity density value corresponding to each tiny area unit is calculated as a product of its area. All these products are then continuously summed to obtain the total visual complexity quantification value for the entire rectangular sub-region. Based on Green's theorem, a core principle of integral transformation, the platform performs a transformation on this double integral. Green's theorem clarifies that a double integral over a bounded closed region of a plane has an equivalent transformation relationship with the line integral along the positive closed boundary of that region. Its standard formula is... ,in It is a bounded closed region in the plane, that is, the rectangular sub-region to be calculated in this scene; For the region Take the positive closed boundary curves, that is, the four closed boundaries of the rectangular sub-region; , In the closed region The bivariate function with continuous first-order partial derivatives is directly related to the visual complexity density function in this scene; this formula can reduce the dimension of the two-dimensional surface integral to a one-dimensional line integral; for the visual complexity density function in this scene, let Any point within the rectangular sub-region The visual complexity density function at a given location is the integrand of the double integral to be calculated. To satisfy the equivalent transformation conditions of Green's theorem, a two-dimensional vector field matching this function is constructed to determine the bivariate function. , The specific expression, take , ,Should The expression can guarantee ,at the same time , will , Substituting the specific expression into the standard formula of Green's theorem, we achieve a complete equivalence transformation between the double integral of the visual complexity density function within the rectangular subregion and the line integral along the four closed boundaries of the rectangular subregion, satisfying the equivalence transformation conditions of Green's theorem. Then, according to the transformation rules of Green's theorem, the double integral of the visual complexity density function, which originally needed to be calculated in the two-dimensional plane of the rectangular subregion, is equivalently transformed into the line integral of the visual complexity density function along the four closed boundaries of the rectangular subregion. The integrand of the line integral is composed of the representative values ​​of the visual complexity density function at each boundary of the rectangular subregion and the gradient components of the corresponding outward normal directions. A linear combination is used to determine the linear combination method. The linear combination method is to multiply the representative value of the visual complexity density function of each boundary by the combination coefficient k1 and the gradient component by the combination coefficient k2, and then add them together. The value of k1 is 0.6 and the value of k2 is 0.4. Because the representative value of the visual complexity density function is the basic manifestation of the visual load of the sub-region boundary and occupies the core weight, and the gradient component reflects the changing trend of visual complexity at the boundary and is an auxiliary correction term, this coefficient ratio ensures that the integrand can accurately reflect the core visual features of the boundary and also takes into account the impact of complexity changes, ensuring that the transformed line integral result is highly similar to the original double integral result.

[0035] Step 401c: Discretize the boundary of the rectangular sub-region into multiple boundary micro-elements. For each boundary micro-element, calculate its contribution to the line integral based on the function value and normal gradient component at the midpoint of the corresponding boundary micro-element, multiplied by the length of the corresponding boundary micro-element. Summate the contribution values ​​of all boundary micro-elements to obtain an approximate integral value of the visual complexity density function over the corresponding rectangular sub-region. Use this approximate integral value as the visual rendering influence coefficient of the corresponding rectangular sub-region. Specifically, the platform discretizes the four closed boundaries of the rectangular sub-region, and divides each boundary with a length of 0.01 into micro-elements of a preset length of 0.001. The length is uniformly divided into 10 boundary elements, the length of which is adapted to the size of the sub-region to ensure that the discretized boundary elements can accurately fit the original boundary shape. For each boundary element, its geometric midpoint is first determined, and the visual complexity density function value and the gradient component of the outward normal direction at the midpoint are calculated. Then, the visual complexity density function value and the gradient component are multiplied by 0.6 and 0.4 respectively according to the linear combination rule in step 401b, and then added to calculate the integrand of the element. The integrand of the element is multiplied by the actual length of the boundary element (0.001) to obtain the contribution value of the boundary element to the line integral of the overall visual complexity density function. The contribution values ​​of all boundary elements in the rectangular sub-region are calculated in the above manner, and then the contribution values ​​of all boundary elements are summed. The sum obtained is the approximate value of the double integral of the visual complexity density function on the rectangular sub-region. This double integral approximation fully quantifies the total visual complexity, component rendering load, animation calculation pressure, and data refresh requirements within the corresponding rectangular sub-region. It directly determines the weight of system resource allocation required for rendering in that region and serves as the core quantitative basis for the platform's rendering scheduling. Therefore, the platform formally defines this double integral approximation as the visual rendering influence coefficient of the corresponding rectangular sub-region, and completes the calculation of the visual rendering influence coefficient of all rectangular sub-regions on the unit square parameter plane according to this process.

[0036] This embodiment establishes an isoparametric mapping relationship from an elliptical parameterized region to a unit square parameterized plane, realizing the transformation from an irregular visual focal field to a regular parameterized plane, and transforming the complex geometric region quantification problem into a regular plane computation problem. A visual complexity density function is constructed based on the number of components, data update frequency, and animation density. The selected attribute dimensions accurately match the visual complexity characteristics of the operation and maintenance visualization scenario, realistically reflecting the visual load of different areas of the canvas and providing a practical quantitative basis for rendering scheduling. A continuous density function is constructed using a distance-weighted spatial interpolation method, which preserves the attribute characteristics of each component position and achieves continuous value coverage of the entire parameterized plane, avoiding computational gaps caused by discrete points and improving the precision of visual complexity quantification. The unit square parameterized plane is divided into several rectangular sub-regions for regional calculation, achieving regional precision of visual complexity. The evaluation method accurately identifies the differences in visual load in different small areas of the canvas, solving the problem of insufficient accuracy in the overall evaluation method. It utilizes the property of continuous differentiability of functions to calculate boundary function values ​​and external normal gradient components, and combines the principle of integral transformation to convert double integrals into line integrals, simplifying the dimensionality and complexity of integral calculations and improving efficiency while ensuring accuracy. By discretizing the boundaries and summing the contribution values ​​of infinitesimal elements to calculate approximate integral values, it converts continuous line integrals into discrete numerical calculations, adapting to the platform's computer operation logic and enabling fast and efficient acquisition of integral results, meeting the computational needs of the platform's real-time rendering scheduling. Using the approximate integral value as a visual rendering influence coefficient, it achieves accurate quantification of the visual complexity of each sub-region. The coefficient value can intuitively reflect the visual load of each region, providing a clear and quantifiable judgment standard for subsequent dynamic adjustment of rendering priority, animation frame rate, and other parameters.

[0037] In a preferred embodiment of the present invention, step 5 includes: Step 500: Based on the visual rendering influence coefficients of each sub-region, a weighted summation is performed according to the arrangement order of the sub-regions on the parameter plane to generate a global visual complexity curve reflecting the distribution of visual complexity along a certain direction of the parameter plane. Specifically, the platform calculates the weighted summation of the visual rendering influence coefficients of all rectangular sub-regions on the unit square parameter plane according to the grid arrangement order of the sub-regions from left to right and from top to bottom. The specific method of weighted summation is to start from the weighted summation result of the previous sub-region and add the product of the visual rendering influence coefficient of the current sub-region and the position weight of the corresponding sub-region. The position weight is uniformly set to 1. The reason for this value is that all rectangular sub-regions on the unit square parameter plane are of the same size and have equal influence weight on the global visual complexity. There is no need to distinguish the priority of sub-regions at different positions. The uniform value of 1 can ensure that the weighted summation result truly reflects the cumulative effect of the visual complexity of each sub-region and avoids distortion of the global curve due to differences in position weights. By iterating through all sub-regions and accumulating the values ​​one by one, a continuous global visual complexity curve is generated that fully reflects the horizontal distribution of visual complexity along the parameter plane. The value of each point on the curve corresponds to the cumulative visual complexity at the corresponding position on the parameter plane.

[0038] Step 501: Based on the global visual complexity curve, identify the peak and valley intervals of the visual complexity distribution. Then, according to the visual rendering influence coefficient of each sub-region, assign rendering priority, animation frame rate, and data refresh interval to components within each sub-region using a monotonic mapping relationship. Specifically, the rendering priority and visual rendering influence coefficient are monotonically increasing, the animation frame rate and visual rendering influence coefficient are monotonically decreasing, and the data refresh interval and visual rendering influence coefficient are monotonically decreasing. This includes: the platform dividing the curve values ​​into intervals based on the generated global visual complexity curve and calculating all... The average and standard deviation of the curve values ​​are used to identify peak intervals where curve values ​​are greater than the average plus one standard deviation, and trough intervals where curve values ​​are less than the average minus one standard deviation. This clarifies the criteria for determining peak and trough intervals. Then, based on the visual rendering impact coefficient of each rectangular sub-region, a monotonic mapping relationship is used to assign rendering parameters to all components within the sub-region. The rendering priority uses a monotonically increasing mapping: Rendering priority = Visual rendering impact coefficient × Rendering priority amplification factor, where the rendering priority amplification factor is set to 10 because the visual rendering impact coefficient is a decimal. (Value range 0 to 1), multiplying by 10 converts it to an integer range of 1 to 10, facilitating platform recognition and sorting. A higher visual rendering impact coefficient results in a higher rendering priority. The animation frame rate uses a monotonically decreasing mapping: Animation frame rate = Base frame rate 60 - Visual rendering impact coefficient × Frame rate adjustment coefficient. The frame rate adjustment coefficient is set to 40. Because the visual rendering impact coefficient ranges from 0 to 1, multiplying by 40 allows for frame rate adjustment between 20 and 60 frames per second. This ensures that the frame rate doesn't drop too low or stutter in high-load areas while effectively reducing rendering pressure. A higher visual rendering impact coefficient results in a higher animation frame rate. Low; the data refresh interval adopts a monotonically decreasing mapping. The data refresh interval = platform default basic data refresh interval 2 seconds - visual rendering impact coefficient × refresh interval adjustment coefficient, where the refresh interval adjustment coefficient is 1.5. Because the visual rendering impact coefficient is in the range of 0 to 1, multiplying by 1.5 can adjust the refresh interval between 0.5 and 2 seconds, ensuring that data refresh is not lagging in high-load areas and that resources are not wasted in low-load areas. The larger the visual rendering impact coefficient, the shorter the data refresh interval. Through the above mapping relationship, the rendering priority, animation frame rate and data refresh interval allocation of components in all sub-areas are completed.

[0039] Step 502: After completing the above parameter adjustments, generate an access QR code or link containing the final visualization page through the publishing module provided by the visualization design platform, and deploy the page to the target terminal screen. It supports real-time preview and interactive operation through a browser. Specifically, after the platform completes the rendering parameter adjustment of all components, it calls the page publishing module built into the visualization design platform to package and encapsulate the configured visualization page, generating a QR code and network link that can be accessed externally; the page file is deployed to the target server and terminal screen specified by the platform. The page supports opening in mainstream browsers, realizing functions such as real-time preview of the visualization page, dynamic data refresh, and component interactive control, completing the generation, scheduling, and online operation of the entire set of operation and maintenance visualization pages.

[0040] This embodiment generates a global visual complexity curve by orderly weighting and accumulating the visual rendering impact coefficients of each sub-region. This curve can intuitively and holistically reflect the visual complexity distribution pattern of the entire canvas. It automatically identifies peak and valley intervals, accurately locating areas with high visual load and high rendering pressure, avoiding stuttering or resource waste caused by traditional uniform scheduling. It uses a strict monotonic mapping relationship to allocate rendering parameters, with clear logic and stable calculation, ensuring a high degree of matching between rendering priority, animation frame rate, data refresh interval and visual complexity, thus improving page smoothness. High-load areas automatically reduce animation frame rate and shorten data refresh interval, ensuring the real-time performance of key data while reducing rendering pressure. Low-load areas maintain a high frame rate, improving the overall visual experience. It automatically generates access QR codes and links and completes deployment, simplifying the release process, supporting real-time browser preview and interaction, and adapting to the operation and maintenance visualization needs of multiple terminals and scenarios.

[0041] like Figure 2 As shown, embodiments of the present invention also provide a dynamic data visualization operation and maintenance platform construction system, including: The page building module is used to drag and drop basic / decorative / custom components from the built-in model library of the visual design platform in the initial canvas of the project to build the basic structure and visual layout of the visual page; by setting component properties, operations such as arranging, locking, hiding, and copying are performed to form a page structure with clear interaction logic; The intelligent generation extension module is used to obtain the generated result by inputting natural language keywords or voice commands, and embed the generated result into the current page layout to achieve intelligent component expansion and visual enhancement; The visual focus field construction module is used to extract the coordinates of the bottom left, bottom right, top left, and top right corners of the bounding boxes of all components in the current canvas as four constraint points. Based on the four constraint points, an elliptical parameterized region is fitted to obtain a visual focus field that covers the layout of the main components. The visual complexity quantification module is used to map the elliptical parameterized region to a unit square parameter plane, construct a continuously distributed visual complexity density function on the unit square parameter plane, discretize the unit square parameter plane into several sub-regions, calculate the integral approximation value on each sub-region, and use it as the visual rendering influence coefficient of the corresponding sub-region. The dynamic rendering optimization and deployment module is used to generate a global visual complexity curve based on the visual rendering impact coefficient of each sub-region, and dynamically adjust the rendering priority, animation frame rate and data refresh interval of each sub-region component; after completing the page design and interaction configuration, it generates an access QR code or link to deploy the visual page to the target terminal screen, supporting real-time browser preview and interaction.

[0042] It should be noted that this system is a system corresponding to the above method. All implementation methods in the above method embodiments are applicable to this embodiment and can achieve the same technical effect.

[0043] Embodiments of the present invention also provide a computer-readable storage medium storing instructions that, when executed on a computer, cause the computer to perform the method described above. All implementations in the above method embodiments are applicable to this embodiment and can achieve the same technical effects.

[0044] The above description represents the preferred embodiments of the present invention. It should be noted that those skilled in the art can make various improvements and modifications without departing from the principles of the present invention, and these improvements and modifications should also be considered within the scope of protection of the present invention.

Claims

1. A method for constructing a dynamic data visualization operation and maintenance platform, characterized in that, The method includes: Step 1: In the initial canvas of the project, drag and drop basic / decorative / custom components from the built-in model library of the visual design platform to build the basic structure and visual layout of the visual page; by setting component properties, perform operations such as arranging, locking, hiding, and copying to form a page structure with clear interaction logic; Step 2: By inputting natural language keywords or voice commands, the generated results are obtained and embedded into the current page layout to achieve intelligent component expansion and visual enhancement; Step 3: Extract the coordinates of the bottom left, bottom right, top left, and top right corners of the bounding boxes of all components in the current canvas as four constraint points. Based on the four constraint points, a parametric elliptical region is generated to obtain the visual focus field covering the layout of the main components. Step 4: Map the elliptical parameterized region to a unit square parameter plane, construct a continuously distributed visual complexity density function on the unit square parameter plane, and discretize the unit square parameter plane into several sub-regions. Calculate the approximate integral value on each sub-region as the visual rendering influence coefficient of the corresponding sub-region. Step 5: Based on the visual rendering impact coefficient of each sub-region, generate a weighted global visual complexity curve, and dynamically adjust the rendering priority, animation frame rate, and data refresh interval of each sub-region component; after completing the page design and interaction configuration, generate an access QR code or link, deploy the visualization page to the target terminal screen, and support real-time browser preview and interaction.

2. The method for constructing a dynamic data visualization operation and maintenance platform according to claim 1, characterized in that, Before step 1: It provides a visual design platform based on B / S architecture, and establishes a user login and authentication mechanism by accessing the server address through a browser to obtain user operation permissions. After logging in, users can create a new visual project through the platform homepage, set the project name, canvas width and height, select a matching application scenario template, and generate the initial canvas of the project.

3. The method for constructing a dynamic data visualization operation and maintenance platform according to claim 2, characterized in that, Step 1 includes: In the initial canvas of the project, select basic components, decorative components, or custom components from the built-in model library of the visual design platform by dragging and dropping, and place them at the target coordinate position on the canvas; use the move tool provided by the design tool module to adjust the position of the components, use the crop tool to crop the display area of ​​the components, use the transform tool to change the aspect ratio of the components, use the rotate tool to set the angle of the components, use the rounded corner tool to define the curvature of the component corners, and use the scale tool to adjust the size of the components proportionally; Bind the component to a data source through the properties panel. The data source includes static JSON data and real-time data configured through dynamic requests. Set the component's style parameters in the properties panel, including color, border, transparency, and font properties. Configure the component's animation effects, including focus animation and entrance animation, and set the animation duration and delay. Bind event triggering logic to components. The events include single click, double click, mouse press, mouse release, and mouse leave. The triggering logic includes showing, hiding, toggling, page navigation, style change, and custom script execution. Adjust the layer order of all components in the canvas using a hierarchy management tool, including moving up, down, placing on top, and placing on bottom. Perform hidden, locked, copied, pasted, or deleted operations on selected components to form a page structure with a complete visual layout and clear interaction logic.

4. The method for constructing a dynamic data visualization operation and maintenance platform according to claim 3, characterized in that, Step 2 includes: Activate the AI-assisted design module in the visualization design platform interface. Receive natural language keywords input by the user through a text input box, or receive the user's voice commands through a voice acquisition device. After converting the received natural language keywords or voice commands into a text sequence, input it into a pre-trained generative AI model for semantic parsing and intent recognition. The generative AI model generates corresponding visualization element descriptions based on the parsing results and calls the built-in rendering engine of the visualization design platform to generate specific visualization elements. The visualization elements include dynamic background images, IoT device control switch components, and custom data charts. The system automatically inserts visual elements into preset anchor points on the current canvas, or places them in a specified area of ​​the canvas in response to user dragging. It performs adaptive size adjustments on the inserted elements to match the aspect ratio with the existing canvas layout, and automatically applies the colors and font styles of the current theme through a style inheritance mechanism, thus completing intelligent component expansion and visual enhancement.

5. The method for constructing a dynamic data visualization operation and maintenance platform according to claim 4, characterized in that, Step 3 includes: In the page structure after completing the intelligent component expansion and visual enhancement, all placed components in the current canvas are traversed, and the bounding box coordinates of each component in the canvas pixel coordinate system are obtained by calling the component's boundary attribute interface, including the horizontal and vertical coordinate values ​​of the top left, top right, bottom left, and bottom right corners of each bounding box. Extract the minimum and maximum values ​​of the x-coordinate and y-coordinate from the corner coordinates of the bounding boxes of all components, and denote them as the left boundary, right boundary, lower boundary, and upper boundary, respectively. Based on these boundary values, determine four constraint points: the lower left corner, lower right corner, upper left corner, and upper right corner. Use the arithmetic mean of the four constraint points as the coordinates of the ellipse center. Calculate the first distance between the lower left and upper right corners and the direction of their connecting line, and the second distance between the lower right and upper left corners and the direction of their connecting line. Compare the first and second distances, and select the direction of the connecting line corresponding to the larger distance value as the direction of the major axis of the ellipse, and the direction of the connecting line corresponding to the smaller distance value as the direction of the minor axis of the ellipse. Calculate the projection lengths of each constraint point to the center of the ellipse along the major axis, and take the maximum value as the length of the semi-major axis of the ellipse. Take the maximum value of the projection lengths along the minor axis as the length of the semi-minor axis of the ellipse. Based on the coordinates of the ellipse center, the lengths of the semi-major and semi-minor axes, and the angle along the major axis, construct the parametric equation of the ellipse, generate an elliptical parametric region covering the layout of the main components, and define the elliptical parametric region as the visual focus field.

6. The method for constructing a dynamic data visualization operation and maintenance platform according to claim 5, characterized in that, Step 4 includes: Based on the elliptic parametric equation of the visual focal field, an isoparametric mapping relationship is established from the elliptical parameterized region to the unit square parameter plane. Any point within the elliptical parameterized region is mapped to a corresponding point on the unit square parameter plane through coordinate transformation, and points on the elliptical boundary are mapped to the square boundary. On the unit square parameter plane, based on the number of components, data update frequency, and animation density attributes of each component in the original canvas at corresponding positions within the elliptical parameterized region, a continuously distributed visual complexity density function is constructed through spatial interpolation. Spatial interpolation is calculated based on the attribute values ​​of each component's mapping points and their distance weights on the parameter plane. The unit square parameter plane is divided into several rectangular sub-regions according to a preset grid density. The visual complexity density function is approximated by numerical integration within each rectangular sub-region to obtain the approximate integral value on the corresponding sub-region. The approximate integral value is defined as the visual rendering influence coefficient of the corresponding sub-region.

7. The method for constructing a dynamic data visualization operation and maintenance platform according to claim 6, characterized in that, The unit square parameter plane is divided into several rectangular sub-regions according to a preset grid density. Within each rectangular sub-region, a numerical integral approximation of the visual complexity density function is performed to obtain the approximate integral value for that sub-region. This approximate integral value is defined as the visual rendering influence coefficient for that sub-region, including: For each rectangular sub-region, the function value of the visual complexity density function and the gradient component of the visual complexity density function along the outward normal direction of the boundary are calculated on the boundary of the rectangular sub-region using the continuous differentiability property of the visual complexity density function. Based on the principle of integral transformation, the double integral of the visual complexity density function inside the rectangular sub-region is transformed into the line integral along the closed boundary of the rectangular sub-region. The integrand of the line integral is determined by a linear combination of the function value on the boundary and the normal gradient component. The boundary of the rectangular sub-region is discretized into multiple boundary elements. For each boundary element, the contribution of the corresponding boundary element to the line integral is calculated by multiplying the function value and normal gradient component at the midpoint of the corresponding boundary element by the length of the corresponding boundary element. The contribution values ​​of all boundary elements are summed to obtain the approximate integral value of the visual complexity density function on the corresponding rectangular sub-region. The approximate integral value is used as the visual rendering influence coefficient of the corresponding rectangular sub-region.

8. The method for constructing a dynamic data visualization operation and maintenance platform according to claim 7, characterized in that, Step 5 includes: Based on the visual rendering influence coefficient of each sub-region, the sub-regions are weighted and accumulated according to their arrangement order on the parameter plane to generate a global visual complexity curve that reflects the distribution of visual complexity along a certain direction of the parameter plane. Based on the global visual complexity curve, the peak and valley intervals of the visual complexity distribution are identified. According to the visual rendering influence coefficient of each sub-region, the rendering priority, animation frame rate and data refresh interval are assigned to the components in each sub-region using a monotonic mapping relationship. The rendering priority is monotonically increasing with the visual rendering influence coefficient, the animation frame rate is monotonically decreasing with the visual rendering influence coefficient, and the data refresh interval is monotonically decreasing with the visual rendering influence coefficient. After adjusting the above parameters, the publishing module provided by the visual design platform generates an access QR code or link containing the final visual page, and deploys the page to the target terminal screen, supporting real-time preview and interactive operation through a browser.

9. A dynamic data visualization operation and maintenance platform construction system, wherein the system implements the method as described in any one of claims 1 to 8, characterized in that, include: The page building module is used to drag and drop basic / decorative / custom components from the built-in model library of the visual design platform in the initial canvas of the project to build the basic structure and visual layout of the visual page; By setting component properties, operations such as arranging, locking, hiding, and copying can be performed to form a page structure with clear interaction logic; The intelligent generation extension module is used to obtain the generated result by inputting natural language keywords or voice commands, and embed the generated result into the current page layout to achieve intelligent component expansion and visual enhancement; The visual focus field construction module is used to extract the coordinates of the bottom left, bottom right, top left, and top right corners of the bounding boxes of all components in the current canvas as four constraint points. Based on the four constraint points, an elliptical parameterized region is fitted to obtain a visual focus field that covers the layout of the main components. The visual complexity quantification module is used to map the elliptical parameterized region to a unit square parameter plane, construct a continuously distributed visual complexity density function on the unit square parameter plane, discretize the unit square parameter plane into several sub-regions, calculate the integral approximation value on each sub-region, and use it as the visual rendering influence coefficient of the corresponding sub-region. The dynamic rendering optimization and deployment module is used to generate a global visual complexity curve based on the visual rendering impact coefficient of each sub-region, and dynamically adjust the rendering priority, animation frame rate and data refresh interval of each sub-region component; after completing the page design and interaction configuration, it generates an access QR code or link to deploy the visual page to the target terminal screen, supporting real-time browser preview and interaction.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a program that, when executed by a processor, implements the method as described in any one of claims 1 to 8.

Images