Visual page generation method

Abstract

The invention relates to the technical field of front-end development, and discloses a visual page generation method, which comprises the following steps of: constructing a component library by utilizing visual components; creating a visual editing page; a visual component is arranged on the editing page; configuring attributes of the visual component to obtain configuration information of the edited page; storing configuration information of the edited page; and rendering the edited page according to the stored configuration information of the edited page to obtain a page containing the layout structure and the attribute of the visual component. The problems of high technical threshold, low development efficiency and the like in the prior art are solved.

Description

Technical Field

[0001] This invention relates to the field of front-end development technology, specifically a method for generating visual pages. Background Technology

[0002] Large screens refer to display devices with a diagonal size of 40 inches or more, primarily used in command and control, conference presentations, advertising displays, and entertainment. Product types include intuitive color TVs and rear-projection TVs, with core display technologies encompassing CRT, LCD, and DLP.

[0003] Large-screen data visualization refers to the visual presentation of complex data on a large screen. It utilizes elements such as graphics, charts, and maps to present massive amounts of data in an intuitive and easy-to-understand way, helping users quickly grasp the meaning and value behind the data. In the field of large-screen data visualization, traditional large-screen page development typically requires professional front-end developers to manually write code to implement page layout and component integration.

[0004] Traditional large-screen page development methods have the following technical problems: 1. High technical threshold: Developers need to be proficient in front-end technologies such as HTML, CSS, and JavaScript, as well as data visualization libraries such as ECharts and D3.js; 2. Low development efficiency: From design to implementation, it requires multiple rounds of communication, modification and debugging, resulting in a long development cycle and difficulty in meeting rapidly changing requirements; 3. High maintenance costs: Layout adjustments or component updates require modification of the source code, which can easily introduce errors and is difficult for non-technical personnel to maintain independently; 4. Poor reusability: Similar layouts and components require repeated development, making it difficult to achieve rapid reuse.

[0005] 5. Difficulty in responsive adaptation: Adapting to different screen sizes requires writing complex responsive code.

[0006] While some existing visualization tools offer some drag-and-drop functionality, they still have the following shortcomings in the field of large-screen development: The layout management is not flexible enough, making it difficult to implement complex grid layouts; The component library is not rich enough to meet the needs of professional page development; The configuration options are not comprehensive enough to meet the needs of professional data visualization. Insufficient performance optimization makes it difficult to support scenarios with large data volumes. Summary of the Invention

[0007] To overcome the shortcomings of existing technologies, this invention provides a visual page generation method that solves problems such as high technical barriers and low development efficiency in existing technologies.

[0008] The technical solution of the present invention to solve the above-mentioned technical problems is as follows: A method for generating a visual page includes the following steps: Build a component library using visual components; Create a visual editing page; Visual components are placed on the editing page; Configure the properties of the visualization components to obtain the configuration information for the editing page; Save the configuration information on the edit page; The editing page is rendered based on the saved configuration information, resulting in a page with a layout structure and attributes that include visual components.

[0009] As a preferred technical solution, the visualization component includes one or more of the following: Basic components are the smallest indivisible functional units; Chart components are used to: transform data into intuitive visual representations in a graphical way; Map component, used to: display geospatial data; Business components are used to execute business logic.

[0010] As a preferred technical solution, the editing page includes: The component selection area is used to display visual components. The layout editing area is used to: provide a target location for adding visual components from the component selection area, and an operation area for deleting and / or adjusting visual components; wherein, adjustment includes one or more of the following operations: moving, copying, resizing, and aligning; The attribute configuration area is used to display the configuration form of the currently selected visualization component and configure its attributes.

[0011] As a preferred technical solution, the properties of the configured visualization components include one or more of the following: Style configuration, used to: configure the visual expression of visual components; Data configuration is used to: configure the content source of visualization components; Animation configuration, used to configure the animation effects of visual components; Event configuration is used to configure the interaction logic of visual components.

[0012] As a preferred technical solution, building a component library includes the following steps: Develop standardized Vue components; each Vue component contains a unified property interface; Vue component configuration styles are represented using JSON data format; Add category tags and thumbnails to Vue components; the category tags are used to identify Vue components by one or more of the following categories: basic components, chart components, map components, and business components.

[0013] As a preferred technical solution, creating an editing page includes one or more of the following methods: Develop the front-end interface of the editor using Vue.js to build the code editor interface; Use a tree-like classification to display the available visual components; The React-Grid-Layout component library is used to implement a grid layout for visual components.

[0014] As a preferred technical solution, the layout of visual components on the editing page includes one or more of the following methods: Use the mouse or the action functions in the React-Grid-Layout component library to layout visual components; where layout includes one or more of the following actions: add, delete, move, copy, resize, and align; Store the layout structure of the visual components as a layout template; Perform multi-layer management and handle the hierarchical relationships between visual components; the hierarchical relationships include: parent-child relationships and sibling relationships.

[0015] As a preferred technical solution, configuring the properties of visualization components includes one or more of the following methods: Generate a configuration form for the visual component based on the component's style; Edit the static data of the visualization component; where static data of the visualization component refers to predefined data that does not change automatically when the visualization component is run; Configure the dynamic data source for the visualization component; where the dynamic data source for the visualization component refers to the data source that can update the visualization component in real time or periodically. The configuration information of the editing page can be previewed in real time. If the configuration information of the editing page changes, the changed configuration information of the editing page will be displayed on the editing page.

[0016] As a preferred technical solution, saving the configuration information of the editing page includes one or more of the following methods: Save the configuration information of the editing page as a JSON format configuration information template; the configuration information template has import and / or export functions; Publish the configuration information for the editing page and generate a static page containing the configuration information.

[0017] As a preferred technical solution, rendering the editing page based on the saved configuration information of the editing page includes one or more of the following methods: Run the page and dynamically load the configuration information of the visual components and the page; Render the visualization component according to the configuration information and bind the configuration information.

[0018] Compared with the prior art, the present invention has the following advantages: (1) This invention utilizes visual component encapsulation to build a component library, and generates a visual page layout based on the component library, which facilitates rapid page construction and configuration, reduces the technical threshold, and allows non-technical personnel to complete page development through visual operations, reducing the dependence on professional developers; from design to implementation, there is no need to go through multiple communications, modifications and debugging, which significantly improves development efficiency; the layout and attribute configuration of the visual components are flexible, which facilitates automatic handling of adaptation issues for different screen sizes, facilitates flexible adaptation to complex grid layouts, and the component library can be continuously expanded to meet various professional visualization needs; (2) Encapsulate various visualization components such as basic components, chart components, map components, and business components to enrich the component library and facilitate more professional page development needs and support large data volume scenarios; (3) By setting up component selection area, layout editing area and attribute configuration area, operators can edit pages more quickly and conveniently; (4) Through style configuration, data configuration, animation configuration and event configuration, operators can configure attributes more quickly and conveniently, which facilitates rapid response to changes in business needs; (5) Standardized Vue components are easy to integrate and combine, and the JSON style is a commonly used style with strong universality; category tags and thumbnails make it easy to view the contents of the component library and improve the efficiency of building the component library. (6) The Vue.js development editor has rich editing functions and is easy to operate. The tree classification makes it easier to clearly display the available visual components. The React-Grid-Layout component library makes it easy to quickly build complex grid layouts. The configuration form makes it easy to intuitively display the configuration of visual components. (7) Facilitates quick and convenient page editing and layout. Components and templates are reusable, avoiding redundant development and facilitating multi-layer management; (8) Facilitates quick configuration of the properties of visual components and real-time preview of the configuration status; (9) It facilitates quick access to configuration information templates to adapt to different page development needs, further expanding application scenarios; (10) Facilitates rendering and editing pages according to development needs. Attached Figure Description

[0019] Figure 1 This is an overall flowchart of a visual page generation method according to the present invention; Figure 2 A layout diagram for the page editing page; Figure 3 Data structure diagram configured for components; Figure 4 Flowchart for large-screen rendering. Detailed Implementation

[0020] The present invention will be further described in detail below with reference to the embodiments and accompanying drawings, but the embodiments of the present invention are not limited thereto.

[0021] The principles and features of the present invention are described below. The examples given are only for explaining the present invention and are not intended to limit the scope of the present invention.

[0022] In the following embodiments of the present invention, the large screen is a display device with a diagonal size of 40 inches or more.

[0023] Example 1 like Figures 1 to 4 As shown, a method for generating a visual page includes the following steps: A method for generating a visual page includes the following steps: Build a component library using visual components; Create a visual editing page; Visual components are placed on the editing page; Configure the properties of the visualization components to obtain the configuration information for the editing page; Save the configuration information on the edit page; The editing page is rendered based on the saved configuration information, resulting in a page with a layout structure and attributes that include visual components.

[0024] The beneficial effects of this invention are: This invention utilizes visual component encapsulation to build a component library, and generates visual page layouts based on the component library. This facilitates rapid page construction and configuration, lowers the technical threshold, and allows non-technical personnel to complete page development through visual operations, reducing reliance on professional developers. From design to implementation, there is no need for multiple communications, modifications, and debugging, significantly improving development efficiency. The layout and attribute configuration of visual components are flexible, facilitating automatic handling of adaptation issues for different screen sizes and flexible adaptation to complex grid layouts. Furthermore, the component library can be continuously expanded to meet various professional visualization needs.

[0025] Based on the above technical solution, the present invention can be further improved as follows.

[0026] As a preferred technical solution, the visualization component includes one or more of the following: Basic components are the smallest indivisible functional units; Chart components are used to: transform data into intuitive visual representations in a graphical way; Map component, used to: display geospatial data; Business components are used to execute business logic.

[0027] The beneficial effects of adopting the above-mentioned preferred technical solution are: It encapsulates various visualization components, including basic components, chart components, map components, and business components, making the component library richer and easier to meet more professional page development needs and support large data volume scenarios.

[0028] As a preferred technical solution, the editing page includes: The component selection area is used to display visual components. The layout editing area is used to: provide a target location for adding visual components from the component selection area, and an operation area for deleting and / or adjusting visual components; wherein, adjustment includes one or more of the following operations: moving, copying, resizing, and aligning; The attribute configuration area is used to display the configuration form of the currently selected visualization component and configure its attributes.

[0029] The beneficial effects of adopting the above-mentioned preferred technical solution are: The component selection area, layout editing area, and attribute configuration area enable operators to edit pages more quickly and conveniently.

[0030] As a preferred technical solution, the properties of the configured visualization components include one or more of the following: Style configuration, used to: configure the visual expression of visual components; Data configuration is used to: configure the content source of visualization components; Animation configuration, used to configure the animation effects of visual components; Event configuration is used to configure the interaction logic of visual components.

[0031] The beneficial effects of adopting the above-mentioned preferred technical solution are: Through style configuration, data configuration, animation configuration, and event configuration, operators can configure attributes more quickly and conveniently, making it easier to respond quickly to changes in business needs.

[0032] As a preferred technical solution, building a component library includes the following steps: Develop standardized Vue components; each Vue component contains a unified property interface; Vue component configuration styles are represented using JSON data format; Add category tags and thumbnails to Vue components; the category tags are used to identify Vue components by one or more of the following categories: basic components, chart components, map components, and business components.

[0033] The beneficial effects of adopting the above-mentioned preferred technical solution are: Standardized Vue components are easy to integrate and combine, and the JSON style is a commonly used style with strong versatility; category tags and thumbnails make it easy to view the contents of the component library, which can improve the efficiency of building the component library.

[0034] As a preferred technical solution, creating an editing page includes one or more of the following methods: Develop the front-end interface of the editor using Vue.js to build the code editor interface; Use a tree-like classification to display the available visual components; The React-Grid-Layout component library is used to implement a grid layout for visual components.

[0035] The beneficial effects of adopting the above-mentioned preferred technical solution are: The Vue.js development editor offers rich editing features and convenient operation. The tree-like categorization makes it easier to clearly display available visual components. The React-Grid-Layout component library facilitates the rapid construction of complex grid layouts, and the configuration form provides an intuitive display of the configuration of visual components.

[0036] As a preferred technical solution, the layout of visual components on the editing page includes one or more of the following methods: Use the mouse or the action functions in the React-Grid-Layout component library to layout visual components; where layout includes one or more of the following actions: add, delete, move, copy, resize, and align; Store the layout structure of the visual components as a layout template; Perform multi-layer management and handle the hierarchical relationships between visual components; the hierarchical relationships include: parent-child relationships and sibling relationships.

[0037] The beneficial effects of adopting the above-mentioned preferred technical solution are: It facilitates quick and easy page editing and layout, and components and templates are reusable, avoiding redundant development and facilitating multi-layer management.

[0038] As a preferred technical solution, configuring the properties of visualization components includes one or more of the following methods: Generate a configuration form for the visual component based on the component's style; Edit the static data of the visualization component; where static data of the visualization component refers to predefined data that does not change automatically when the visualization component is run; Configure the dynamic data source for the visualization component; where the dynamic data source for the visualization component refers to the data source that can update the visualization component in real time or periodically. The configuration information of the editing page can be previewed in real time. If the configuration information of the editing page changes, the changed configuration information of the editing page will be displayed on the editing page.

[0039] The beneficial effects of adopting the above-mentioned preferred technical solution are: It facilitates quick configuration of the properties of visual components and allows for real-time preview of the configuration status.

[0040] As a preferred technical solution, saving the configuration information of the editing page includes one or more of the following methods: Save the configuration information of the editing page as a JSON format configuration information template; the configuration information template has import and / or export functions; Publish the configuration information for the editing page and generate a static page containing the configuration information.

[0041] The beneficial effects of adopting the above-mentioned preferred technical solution are: It facilitates quick access to configuration information templates to adapt to different page development needs, further expanding application scenarios.

[0042] As a preferred technical solution, rendering and editing pages based on saved configurations includes one or more of the following methods: Run the page and dynamically load the configuration information of the visual components and the page; Render the visualization component according to the configuration information and bind the configuration information.

[0043] The beneficial effects of adopting the above-mentioned preferred technical solution are: It facilitates rendering and editing pages according to development needs.

[0044] Example 2 like Figures 1 to 4 As shown, based on Example 1, this example provides a more detailed implementation method.

[0045] The technical problem to be solved by the present invention is to provide a method and system for generating visual large screen pages based on drag and drop, so that non-technical personnel can quickly build professional data visualization large screens, while meeting the deep customization needs of developers.

[0046] The technical solution adopted in this invention is: a method for generating a visual large-screen page based on drag and drop, which includes the following steps: 1. Build a component library: Standardize and encapsulate common large-screen visualization components, including chart components, map components, indicator card components, table components, etc. 2. Page creation and editing page: Provides a visual editing page, including a component selection area, a layout editing area, and a property configuration area; 3. Implement drag-and-drop layout management: Supports adding, moving, and adjusting components in the layout editing area by dragging and dropping with the mouse; 4. Configure component properties: Provides a visual form for configuring component properties such as style and data source; 5. Real-time preview and saving: Supports real-time preview of the large screen effect and saves the configuration as a reusable template; 6. Large screen rendering: Dynamically render the final large screen page based on the saved configuration.

[0047] As a preferred option, the large-screen components specifically include: Based on their functions, the large screen components are divided into categories such as basic components, chart components, map components, and business components; More specifically, as follows: Basic UI components: containers, text, images, etc.; Chart components: line charts, bar charts, pie charts, etc.; Map components: 2D / 3D maps, heatmaps, etc.; Business components: indicator cards, leaderboards, timelines, etc.

[0048] Each component is encapsulated as an independent Vue / React component, providing a unified interface specification; Define the component's configuration schema, including style configuration, data configuration, interaction configuration, etc. Each component is provided with default configurations and sample data to ensure it works out of the box.

[0049] Preferably, the page editing page is divided into three main areas: The left side is the component selection area, which displays available large-screen components by category; The central area is the layout editing area, which uses a grid layout system and supports free dragging and snapping alignment; The right side is the attribute configuration area, which dynamically displays the corresponding configuration form based on the currently selected component.

[0050] As a preferred embodiment, the drag-and-drop layout management is specifically implemented as follows: Implement a grid-based drag-and-drop layout using React-Grid-Layout or a similar library; It supports operations such as adding, deleting, copying, and resizing components; It provides a layout template function, which can quickly apply preset layout schemes; It supports multi-layer management and handles the hierarchical relationship between components.

[0051] Preferably, the configuration component attributes include: Style configuration: size, position, background color, border, font, etc.; Data configuration: Configuration of data sources such as static data, API interfaces, and WebSockets; Animation configuration: entrance animation, interactive animation, etc.; Event configuration: Interactive behaviors such as component interaction and click events.

[0052] A drag-and-drop-based visual large-screen page generation system, the system comprising: Component Library Module: Responsible for the management and maintenance of large-screen components; Editor module: Provides a visual page editing interface; Layout engine module: handles the layout calculation and rendering of components; Configuration Management Module: Manages the configuration data and templates of components; Rendering engine module: Dynamically renders the final large screen based on the configuration.

[0053] The present invention can achieve the following technical effects: 1. Lowering the technical barrier: Non-technical personnel can complete the development of professional large screens through visual operations, reducing reliance on professional developers; 2. Improve development efficiency: Large screen development time is reduced from several days to several hours, enabling rapid response to changes in business needs; 3. Improved maintainability: Configuration and code are separated, and modifications and adjustments do not require changes to the source code, reducing maintenance costs; 4. Enhanced reusability: Components and templates are reusable, avoiding redundant development and ensuring consistency; 5. Optimize performance: Ensure a smooth experience even with large amounts of data through techniques such as dynamic loading and lazy loading; 6. Flexible adaptation: Automatically handles adaptation issues for different screen sizes to ensure display quality; 7. Rich Expansion: The component library can be continuously expanded to meet various professional visualization needs.

[0054] Example 3 like Figures 1 to 4 As shown, this embodiment provides a more detailed implementation method based on Embodiments 1 and 2.

[0055] The method is implemented as follows: The drag-and-drop-based visualization large-screen page generation method in this embodiment includes the following steps: S1. Building the component library: Develop standardized Vue components, each containing a unified props interface; Define the component's configuration schema, using the JSON Schema specification; Add category tags and thumbnails to components for easier display in the component library.

[0056] S2. Create and edit the page: Develop the front-end interface of the editor using Vue.js; The component selection area on the left uses a tree-like classification to display available components; The central layout editing area uses React-Grid-Layout to implement a grid layout; The right-hand property configuration area dynamically renders the configuration form based on the selected component.

[0057] S3. Implement drag-and-drop layout management: When you drag a component from the component panel to the editing area, a component instance is created; Supports adjusting component position and size using the mouse, and automatically snaps to the mesh; It provides a layout template function with preset common layout schemes.

[0058] S4. Configure component properties: Generate a visual configuration form based on the component's schema; Supports direct editing of static data and configuration of dynamic data sources; Provides a real-time preview function, and configuration changes are immediately reflected in the editing area (if the large screen configuration is changed, the changed large screen configuration will be displayed on the page editing page).

[0059] S5. Save and Publish: Save the large screen configuration as a JSON template; It supports importing and exporting templates for easy reuse; Optimized static resources are generated upon release.

[0060] S6. Large screen rendering: Dynamically load components and configurations at runtime; Configure rendering components according to layout and bind configuration data; Handle the linkage and interaction between components.

[0061] The system is implemented as follows: The drag-and-drop-based visual large-screen page generation system in this embodiment includes the following modules: 1. Component Library Module: Component Registry: Manages all available components and their metadata; Component loader: Dynamically loads component code; Component Sandbox: Isolates the runtime environment of components.

[0062] 2. Editor module: Visual editing page; Drag and drop the interactive controller; Undo / Redo Manager.

[0063] 3. Layout Engine Module: Grid layout calculation; Responsive adaptation; Layout persistence.

[0064] 4. Configuration Management Module: Configure version control; Template management; Access control.

[0065] 5. Rendering Engine Module: Configure the parser; Component renderer; Performance optimizer.

[0066] More specifically, the present invention has the following features: (1) Layout process: Grid-based drag and drop with intelligent snapping: It adopts a dynamic grid layout system, which supports free dragging and intelligent snapping alignment of components, ensuring the accuracy and aesthetics of the layout.

[0067] Advantages: It introduces an adaptive grid algorithm that dynamically adjusts the grid spacing based on screen size and component density, which is superior to traditional static grid layout tools.

[0068] Layout templates and multi-layer management: It provides a library of preset layout templates (such as dashboards, monitoring panels, etc.), allowing users to apply complex layout schemes with a single click.

[0069] It supports multi-layer management and solves component occlusion problems through visual layer adjustment, avoiding the need to manually write CSS z-index.

[0070] Advantages: By combining user behavior analysis, it recommends frequently used templates, improving efficiency.

[0071] Responsive Adaptation Automation: The layout engine automatically handles adaptation to different screen sizes, eliminating the need to manually write media query code.

[0072] Advantages: It uses a proportional scaling algorithm instead of simple proportional scaling to ensure the readability of key information on different devices.

[0073] (2) Rendering process: Dynamic rendering and lazy loading: Components and resources are dynamically loaded based on configuration, reducing initial loading time.

[0074] Advantages: It introduces visible area detection, only renders components within the current screen, and loads other components when scrolling (similar to virtual list optimization).

[0075] Component-level sandbox isolation: Each component runs in an independent sandbox, avoiding style and logic pollution.

[0076] Advantages: It uses lightweight Web Workers to handle the logic of complex components, improving the performance of the main thread.

[0077] Real-time data stream processing: It supports dynamic data sources such as WebSocket and API polling, and automatically triggers component updates.

[0078] Advantages: By using a difference comparison algorithm (Diffing), only the changed data nodes are updated, reducing unnecessary DOM operations.

[0079] (3) Performance optimizer: Static resource optimization: Code splitting: Load component code on demand to avoid excessively large overall package size.

[0080] Resource compression: Automatically performs lossless compression on resources such as images and JSON configurations.

[0081] Advantages: Preloads frequently used components based on user operating habits, reducing delays during subsequent drag-and-drop operations.

[0082] Rendering performance optimization: GPU acceleration: Enables CSS3 hardware acceleration for animations and complex charts.

[0083] Dirty inspection mechanism: Only redraw component areas where the layout or data has changed.

[0084] Advantages: Dynamic frame rate adjustment strategy, degrading animation effects on low-performance devices to maintain smoothness.

[0085] Big Data Scenario Optimization: Enable data sampling or WebGL rendering for massive data charts (such as line charts with hundreds of thousands of data points).

[0086] Advantages: Progressive rendering is adopted, which preferentially displays the chart skeleton and fills in details after the data is loaded.

[0087] The following further explains some methods adopted by the present invention and their advantages: A. Adaptive grid algorithm: Data flow process: I. Input: Screen size (width, height), current component quantity and size information, minimum grid cell configuration (such as a minimum of 30px); II. Calculate the initial grid: 1. Calculate the initial number of columns according to the screen width W: cols = floor(W / minGridSize); 2. The number of rows grows dynamically without a fixed limit.

[0088] III. Dynamic adjustment: 1. Real-time monitor the component density distribution (through spatial quadtree indexing); 2. Automatically subdivide the grid in high-density areas (such as splitting 1 unit grid into 4 sub-grids); 3. Merge grid cells in low-density areas (merge 4 adjacent 1x1 grids into a 2x2 grid).

[0089] IV. Intelligent adsorption: 1. Calculate the distance Δ between the component boundary and the nearest grid line during dragging; 2. Automatically adsorb when Δ < threshold (usually 5px): position = round(componentPosition / gridSize) * gridSize.

[0090] V. Output: Dynamically updated grid coordinate system Advantages: Different from traditional static grids such as Bootstrap, this algorithm realizes local elastic adjustment while maintaining the overall grid structure by analyzing the spatial distribution characteristics of components in real time.

[0091] B. User behavior analysis: Data flow process: I. Data collection layer: 1. Record the user operation event stream: {timestamp, eventType, componentType, layoutTemplateID…}; 2. Context information: Current screen size, industry field (such as finance / manufacturing).

[0092] II. Feature Extraction: 1. Calculate high-frequency operation sequences (such as the combination "map → chart → indicator card" with an occurrence rate of 70%). 2. Calculate template usage rate: templateScore = α number of times used + β usage duration; where α represents the weight of the number of times used and β represents the weight of the usage duration.

[0093] III. Recommendation Engine: 1. Based on collaborative filtering: Find high-rated templates for similar user groups; 2. Real-time recommendations: When a user adds two chart components, a dashboard template containing three charts is recommended (accuracy rate 82%).

[0094] IV. Feedback Optimization: 1. Track recommendation adoption rate using event tracking; 2. Dynamically adjust the weights of the recommendation strategy using the Bandit algorithm.

[0095] Advantages: It combines recommendation systems with traditional UI design tools to create a domain-specific behavioral pattern library.

[0096] C. Scaling algorithm: Data flow process: I. Definition of reference: 1. Set 1920x1080 as the base resolution; 2. Mark the minimum readable size of key elements (e.g., text should be no smaller than 12px).

[0097] II. Dimensional Inspection: 1. Obtain the aspect ratio of the current screen size to the baseline: ratioW = currentW / 1920; 2. Calculate the safe scaling factor: scale = min(ratioW, ratioH)*0.9 (preserve margins).

[0098] III. Differentiated Scaling: 1. Text element: scale_text = max(scale, 1.2) (to ensure readability); 2. Chart container: proportional scaling; 3. Interactive controls: Fixed physical size (e.g., buttons should be 44x44px).

[0099] IV. Reordering Logic: 1. When scale < 0.7, a fluid layout transition is triggered; 2. Key performance indicator cards are automatically switched to vertical arrangement.

[0100] Advantages: It breaks through the limitations of simple proportional scaling and establishes a scaling strategy matrix that is sensitive to element type.

[0101] D. Visible Area Detection: Data flow process: I. Viewport Modeling: 1. Establish the geometric boundaries of the current viewport: {top, left, bottom, right}; 2. Expand the preload area: viewport += 200px (scroll buffer).

[0102] II. Spatial Index: 1. Use R-Tree to organize component location information; 2. Quick search: rtree.search(viewport).

[0103] III. Loading Control: 1. Components within the viewport: immediate rendering + binding configuration data; 2. Components outside the visible area: Render placeholder box (display loading animation).

[0104] IV. Scroll Listening: 1. Detect components entering the viewport using the Intersection Observer API; 2. Dynamic loading priority: Predicts the next visible area based on the scrolling direction; Advantages: Combining spatial indexing and scrolling prediction achieves smooth visual continuity.

[0105] E. Difference Algorithm (Diffing): Data flow process: I. Data Snapshot: 1. Current dataset: prevData = {key1:val1, key2:val2…}; 2. New dataset: nextData comes from WebSocket / API.

[0106] II. Difference Detection: 1. Key field comparison (e.g., id, timestamp); 2. Use the LCS algorithm to find the longest common subsequence.

[0107] III. Change of Classification: 1. Adding a new node: nextData exists, but prevData does not; 2. Deleting a node: prevData exists but nextData does not; 3. Update node: Same key but different value.

[0108] IV. Minimized Update: 1. Only trigger Vue / React patches for changed nodes; 2. Batch DOM operations: Use requestAnimationFrame to merge and write data; Advantages: The traditional vDOM diff algorithm is optimized for the high-frequency streaming data unique to large visualization screens.

[0109] F. Dynamic frame rate adjustment strategy: Data flow process: I. Performance Probes: 1. Real-time monitoring of FPS (via requestAnimationFrame); 2. Device capability classification: based on WebGL support, number of CPU cores, etc.

[0110] II. Strategy Matrix: i. | FPS | Device Level | Action | ii. |----- |----------|----------------------| iii.|>50 | High | Enable all animation effects| iv. | 30-50 | Medium | Simplified transition animation | v. |<30 | Low | Degrade to static rendering | III. Smooth Degradation: 1. Complex charts → Simplified SVG rendering; 2. Particle animation → CSS transition animation; 3.3D map → 2D flat map.

[0111] IV. Recovery Mechanism: 1. After a sustained FPS increase is detected for 5 seconds, the effect gradually returns to normal. Advantages: Establishes a closed-loop control flow of perception-decision-execution.

[0112] G. Progressive rendering: Data flow process: I. Skeleton Construction: 1. Quickly render static elements such as chart coordinate systems and axis labels; 2. Display a data loading progress bar (e.g., 20%).

[0113] II. Data Blocking: 1. Divide the large dataset into chunks (e.g., one chunk for every 10,000 points); 2. Prioritize rendering aggregated data (such as averages and distribution histograms).

[0114] III. Detail Filling: 1. Main thread: Renders the aggregated view; 2. Web Worker: Processes raw data in the background; 3. Time-based commit: Update via postMessage after each chunk is completed.

[0115] IV. Interaction Optimization: 1. Prioritize basic interactions (such as scaling) during the rendering process; 2. Complex interactions (such as tooltips) are enabled after the data is complete; Advantages: It transforms big data rendering into a multi-stage pipeline operation.

[0116] As described above, the present invention can be implemented well.

[0117] In the description of this invention, it should be understood that the terms "center," "longitudinal," "lateral," "length," "width," "thickness," "upper," "lower," "front," "rear," "left," "right," "vertical," "horizontal," "top," "bottom," "inner," "outer," "clockwise," "counterclockwise," "axial," "radial," and "circumferential" indicate the orientation or positional relationship based on the orientation or positional relationship shown in the accompanying drawings. They are used only for the convenience of describing this invention and simplifying the description, and are not intended to indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation. Therefore, they should not be construed as limitations on this invention.

[0118] In this invention, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. In the description of this invention, "a plurality of" means at least two, such as two, three, etc., unless otherwise explicitly specified.

[0119] In this invention, unless otherwise explicitly specified and limited, the terms "installation," "connection," "linking," and "fixing," etc., should be interpreted broadly. For example, they can refer to a fixed connection, a detachable connection, or an integral part; they can refer to a mechanical connection or an electrical connection; they can refer to a direct connection or an indirect connection through an intermediate medium; they can refer to the internal communication of two components or the interaction between two components, unless otherwise explicitly limited. Those skilled in the art can understand the specific meaning of the above terms in this invention according to the specific circumstances.

[0120] In this invention, unless otherwise explicitly specified and limited, "above" or "below" the second feature can mean that the first feature is in direct contact with the second feature, or that the first feature is in indirect contact with the second feature through an intermediate medium. Furthermore, "above," "over," and "on top" of the second feature can mean that the first feature is directly above or diagonally above the second feature, or simply that the first feature is at a higher horizontal level than the second feature. "Below," "below," and "beneath" of the second feature can mean that the first feature is directly below or diagonally below the second feature, or simply that the first feature is at a lower horizontal level than the second feature.

[0121] In the description of this invention, the terms "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., refer to specific features, structures, materials, or characteristics described in connection with that embodiment or example, which are included in at least one embodiment or example of the invention. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples. Moreover, without contradiction, those skilled in the art can combine and integrate the different embodiments or examples described in this specification, as well as the features of different embodiments or examples.

[0122] Although embodiments of the present invention have been shown and described herein, it is understood that the above embodiments are exemplary and should not be construed as limiting the present invention. Those skilled in the art can make changes, modifications, substitutions and variations to the above embodiments within the scope of the present invention.

[0123] All features disclosed in all embodiments of this specification, or steps in all methods or processes implied in the disclosure, may be combined and / or extended or replaced in any way, except for mutually exclusive features and / or steps.

[0124] The above description is merely a preferred embodiment of the present invention and is not intended to limit the present invention in any way. Based on the technical essence of the present invention, any simple modifications, equivalent substitutions, and improvements made to the above embodiments within the spirit and principles of the present invention shall still fall within the protection scope of the present invention.

Claims

1. A method of visualizing page generation, characterized by, The method comprises the following steps: A component library is constructed using a visualization component; An editing page of the visualization is created; The visualization component is laid out on the editing page; The properties of the visualization component are configured to obtain configuration information of the editing page; The configuration information of the editing page is saved; The editing page is rendered according to the saved configuration information of the editing page to obtain a page comprising a layout structure and properties of the visualization component.

2. The method of claim 1, wherein, The visualization component comprises one or more of the following: A basic component, which is the smallest functional unit that cannot be further disassembled; A chart component, which is used to convert data into intuitive visual expression in a graphical manner; A map component, which is used to display geospatial data; A business component, which is used to execute business logic.

3. The method of claim 1, wherein, The editing page comprises: A component selection area, which is used to display the visualization component; A layout editing area, which is used to provide a target site for adding the visualization component from the component selection area, and an operation area for deleting and / or adjusting the visualization component; wherein the adjusting comprises one or more of the following operations: moving, copying, resizing, and aligning; A property configuration area, which is used to display a configuration form of the currently selected visualization component, and configure the properties of the visualization component.

4. The method of claim 1, wherein, The configuration of the properties of the visualization component comprises one or more of the following: Style configuration, which is used to configure the visual expression form of the visualization component; Data configuration, which is used to configure the content source of the visualization component; Animation configuration, which is used to configure the animation effect of the visualization component; Event configuration, which is used to configure the interaction logic of the visualization component.

5. The method of claim 1 to 4, wherein, The construction of the component library comprises the following steps: Developing standardized Vue components; wherein each Vue component comprises a unified property interface; Using JSON data format to represent the configuration style of the Vue component; Adding classification tags and thumbnails to the Vue component; wherein the classification tags are used to identify the Vue component according to one or more of the following categories: basic component, chart component, map component, and business component.

6. The method of claim 1 to 4, wherein, The creation of the editing page comprises one or more of the following methods: Using Vue.js to develop the front-end interface of the code editor to build the interface of the editor; Using tree classification to display the available visualization components; Using the React-Grid-Layout component library to implement the grid layout of the visualization components.

7. The method of claim 1 to 4, wherein, The layout of the visualization component on the editing page comprises one or more of the following methods: Using a mouse or an operation function in the React-Grid-Layout component library to layout the visualization component; wherein the layout comprises one or more of the following operations: adding, deleting, moving, copying, resizing, and aligning; Storing the layout structure of the visualization component as a layout template; Managing multiple layers to handle the hierarchical relationship between the visualization components; wherein the hierarchical relationship comprises parent-child relationship and sibling relationship.

8. The method of claim 1 to 4, wherein, The configuration of the properties of the visualization component comprises one or more of the following methods: Generating a configuration form of the visualization component according to the style of the component; Editing the static data of the visualization component; wherein the static data of the visualization component refers to the data that is predefined and does not automatically change when the visualization component is running. The dynamic data source of the visualization component is configured; wherein the dynamic data source of the visualization component refers to a data source capable of updating the visualization component in real time or periodically; Real-time previewing the configuration information of the editing page, and if the configuration information of the editing page is changed, then displaying the changed configuration information of the editing page on the editing page.

9. The method of claim 1 to 4, wherein, Saving the configuration information of the editing page includes one or more of the following methods: Saving the configuration information of the editing page as a configuration information template in JSON format; wherein the configuration information template has an import and / or export function; Publishing the configuration information of the editing page to generate a static page containing the configuration information.

10. The method of claim 1 to 4, wherein, Rendering the editing page according to the saved configuration information of the editing page includes one or more of the following methods: Running the page, dynamically loading the configuration information of the visualization component and the page; Rendering the visualization component according to the configuration information and binding the configuration information.

Images