Visual layout method, program product, device and medium for business data

Abstract

The present application discloses a business data visualization layout method, program product, device and medium, which relate to the field of visualization technology. By decoupling and binding business data from component templates, and generating the arrangement results of target components based on the sorting weight and coordinate mapping relationship, the application combines elastic layout with virtual DOM mechanism, supports users to adjust the component order in real time by dragging and dropping, and only performs local rendering processing on the changed components. While ensuring the consistency of data display, the dynamic adaptability and rendering efficiency of the layout are improved, thereby solving the problems of fixed layout structure, slow response and poor interactivity in the prior art, and achieving the technical effects of efficient layout update, component-level reuse and low-overhead rendering optimization.

Description

Technical Field

[0001] The present application relates to the field of data visualization technology, and in particular to a method, program product, device, and medium for visualizing layout of business data. Background Art

[0002] With the growing demand for information system visualization, especially in scenarios such as large-screen displays, business dashboards, and industrial monitoring, how to efficiently and flexibly visually present structured business data has become a major challenge in interface development.

[0003] Related technologies often use static page structures or predefined layouts, embedding business content within fixed templates for display. However, these solutions still rely on manual configuration by developers or simple sequential rendering to arrange business content on the interface. This makes it difficult to quickly map different business types, structures, or data sources, resulting in poor scalability and adaptability. Summary of the Invention

[0004] The present application provides a business data visualization layout method, program product, device and medium to at least solve the problem of lack of flexible adaptation mechanism and dynamic display of business data in related technologies.

[0005] The present application provides a method for visual layout of business data, comprising: receiving business data to be presented, and filling the business data into slots of multiple component templates respectively to generate multiple target components; determining the display position of each target component in the layout container based on the coordinate mapping relationship of each target component relative to the layout container; rendering each target component according to the corresponding display position and presenting it in a screen view to complete the visual layout of the business data.

[0006] The present application also provides a visual layout device for business data, including: a filling module for receiving business data to be presented, and filling the business data into the slots of multiple component templates respectively to generate multiple target components; a position module for determining the display position of each target component in the layout container based on the coordinate mapping relationship of each target component relative to the layout container; a rendering module for rendering each target component according to the corresponding display position and presenting it in a large-screen view to complete the visual layout of the business data.

[0007] The present application also provides an electronic device, comprising: a memory for storing a computer program; and a processor for implementing the steps of any of the above-mentioned business data visualization layout methods when executing the computer program.

[0008] The present application also provides a computer-readable storage medium, in which a computer program is stored. When the computer program is executed by a processor, the steps of any of the above-mentioned business data visualization layout methods are implemented.

[0009] The present application also provides a computer program product, including a computer program, which implements the steps of any of the above-mentioned business data visualization layout methods when executed by a processor.

[0010] Through this application, by introducing a mechanism that matches component templates based on business types and uses the slot mechanism to dynamically bind business data and component templates, the decoupling of components and business scenarios is achieved. This can solve the problems in related technologies that business data is difficult to flexibly adapt to multiple types of component templates, component location arrangement relies on static configuration, and lacks scalability, thereby achieving the technical effect of improving component layout flexibility, increasing the degree of view rendering automation, and improving development and maintenance efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0011] In order to more clearly illustrate the embodiments of the present application, the following is a brief introduction to the drawings required for use in the embodiments. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0012] Figure 1 A flowchart of a method for visualizing layout of business data provided in an embodiment of the present application;

[0013] Figure 2 A schematic diagram showing a large-screen configuration interface provided in an embodiment of the present application;

[0014] Figure 3 A schematic diagram showing a large-screen business view configuration interface provided in an embodiment of the present application;

[0015] Figure 4 A schematic diagram of the composition of a computer program product provided in an embodiment of the present application. DETAILED DESCRIPTION

[0016] The following will be combined with the accompanying drawings in the embodiments of this application to clearly and completely describe the technical solutions in the embodiments of this application. Obviously, the embodiments described are only part of the embodiments of this application, not all of them. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of this application.

[0017] It should be noted that, in the description of this application, the terms "comprises," "includes," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or elements inherent to such process, method, article, or device. The terms "first," "second," etc., in this application are used to distinguish similar objects, and are not used to describe a particular order or sequence.

[0018] In order to enable those skilled in the art to better understand the present application, the present application is further described in detail below with reference to the accompanying drawings and specific implementation methods.

[0019] An embodiment of the present application provides a method for visual layout of business data. The method is described in detail in conjunction with the execution flow of the method for visual layout of business data.

[0020] Figure 1 This is a flow chart of a method for visualizing layout of business data provided in an embodiment of the present application. Figure 1 As shown, the business data visualization layout method includes the following steps:

[0021] Step 110: Receive business data to be presented, and fill the business data into slots of multiple component templates respectively to generate multiple target components.

[0022] Among them, business data refers to information content associated with specific business scenarios, usually including text, numbers, graphics or images, etc., which are used to display business status, indicators or analysis results in the screen view.

[0023] A component template is a predefined unit of the reusable component structure constructed in this application. It contains a slot structure and style configuration, and is used to carry dynamically populated business data. Component templates are stored in the platform resource library or database, and support flexible embedding of different data instances through a slot mechanism, enabling template reuse.

[0024] There are one or more slots in the component template. Slots are a placeholder area defined by the template that allows external data or elements to be inserted into the location to customize the component content. For example, this application can achieve component development through VUE slots. The component template reserves a replaceable content area, which is used when external calls are made.<template v-slot:name> Inject specific business logic to decouple components from business scenarios.

[0025] Electronic devices can receive data sets containing business data by interacting with external platforms or backend services. Business data can be input by users or obtained by the electronic device from data sources, such as calling from a database or downloading from the Internet.

[0026] The electronic device calls multiple component templates corresponding to the business data from the platform resource library or database, and fills the business data into the slots of the multiple component templates according to the slot structure set in the component template to generate multiple target components.

[0027] Step 120: Determine the display position of each target component in the layout container according to the coordinate mapping relationship of each target component relative to the layout container.

[0028] The layout container refers to an outer display structure used to carry multiple target components.

[0029] Coordinate mapping is the process of mapping the logical index of a target component to actual screen coordinates, typically taking into account the size parameter coordinates of the layout container. Logical indexes, for example, are row coordinates and column coordinates. Size parameters include information such as the total width and height of the layout container.

[0030] The electronic device first defines a layout container and determines the display position of the target component in the layout container based on the coordinate mapping relationship of each target component relative to the layout container; the coordinate mapping relationship is calculated based on the layout index information of the component and the size parameters of the layout container to map the relative coordinate position of each component on the screen.

[0031] Step 130: Render each target component according to the corresponding display position and present it in the screen view to complete the visual layout of the business data.

[0032] The screen view is a front-end interface for displaying business data. The front-end interface can be displayed on a display device (such as a display screen) of the electronic device or on a display device connected to the electronic device.

[0033] The electronic device then renders each target component according to its corresponding display position, presenting the rendered results on the screen to complete the visual layout of the business data. Visual layout involves spatially arranging the raw business data in a clear and intuitive manner through the above steps, thereby improving user reading efficiency and interactive experience.

[0034] The business data visualization layout method provided in this application can fill business types into predefined component templates through the dynamic filling mechanism of business data, realize the decoupling of components and business scenarios, and automatically complete business data binding and component generation, which can support flexible reuse and batch rendering of component templates, effectively improving the efficiency of visualization layout and development flexibility; according to the coordinate mapping relationship of each target component relative to the layout container, the display position of each target component in the layout container is determined, which can realize the precise arrangement and position mapping of components in complex screen views, and improve the efficiency and clarity of the overall view presentation; then each target component is rendered according to the corresponding display position and presented in the screen view to complete the visualization layout of business data. Through automatic rendering and position binding, multiple data-driven components can be efficiently rendered into the screen view, realizing the linked presentation of page content and structure, compatible with adaptive scaling under different resolutions, ensuring layout consistency, thereby effectively solving the problems of low layout efficiency, weak template reuse capability, and large rendering delay in related technologies.

[0035] The business data visualization layout method provided in this application is particularly suitable for business data display environments in large-screen visualization scenarios, such as smart park central control platforms, urban operation large-screen displays, industrial production monitoring panels, and other application scenarios. Large-screen displays typically have high information density, complex layout structures, and dynamic and flexible interaction requirements. Through component template reuse, coordinate mapping positioning, and data-driven rendering mechanisms, this application can effectively support the structured presentation and interactive operation of massive business data on large screens, improving the accuracy and response efficiency of the overall visualization layout.

[0036] In related technologies, component generation usually relies on static structure predefinition, making it difficult to dynamically select templates or implement fine-grained data binding based on different types of business data. This leads to repeated interface content, poor template scalability, and a lack of an effective mechanism for transmitting contextual information, limiting the system's ability to adapt to the display of multi-source heterogeneous data.

[0037] To this end, in some embodiments, business data is respectively filled into the slots of multiple component templates to generate multiple target components, including: assigning corresponding component templates to business data according to the business type to which the business data belongs; named slots and scope slots are preset in the component template; business data is injected into the corresponding component template through the named slot, and the context information of the business data is passed through the scope slot to complete the dynamic binding of the component template and the business data to generate the target component.

[0038] The electronic device will call multiple preset component templates in the platform resource library or database, and map each business data to the corresponding type of component template according to the business type to achieve dynamic template matching.

[0039] Component templates define named slots and scoped slots to support business data binding within templates. Named slots allow developers to mark named areas within a component for specific data injection, while scoped slots allow components to pass their contextual information to external content.

[0040] For each business data instance, the electronic device inserts its core fields (such as title, value, icon, etc.) directly into the preset display area of ​​the target component through a named slot to quickly fill in the basic content. At the same time, the electronic device also passes the context information of the current business data into the component through the scope slot. Among them, context information refers to additional information related to the business data, which is usually used to enhance the interpretability of component data, such as business source, associated status, configuration items or alarm levels. Context information can be passed into the component template through the scope slot and used within the component for logical processing such as display, linkage or behavior judgment. The scope slot is bound to the dynamic area inside the component and can be called by the subcomponent and perform logical processing to achieve context-aware flexible rendering.

[0041] Ultimately, the electronic device generates a corresponding target component for each business data instance based on the data injection and binding process completed by the slots, thus constructing the basic display unit for visualization. The resulting target component can dynamically bind the corresponding data and context information and is used for subsequent visualization rendering and layout operations. This ensures that the large-screen display not only reflects the basic information of each node, but also provides real-time status and alarm notification capabilities, enhancing the depth and intuitiveness of overall operation and maintenance visualization.

[0042] In the above embodiment, by proposing a method of automatically adapting component templates to business data types and flexibly binding data and context through a slot mechanism, the reusability of component templates is retained, the integrity expression of business context is ensured, and the efficiency of component reuse is improved, thereby greatly improving the deep customization and adaptability of the visual interface, which is particularly suitable for the unified display and management of complex multi-source business data in large-screen scenarios.

[0043] In related technologies, components are typically arranged in a static order, lacking a flexible coordinate calculation mechanism. When the layout container size changes or the component order is dynamically adjusted, components cannot be accurately repositioned, resulting in disorganized or overlapping display positions.

[0044] To this end, in some embodiments, the display position of each target component in the layout container is determined based on the coordinate mapping relationship of each target component relative to the layout container, including: obtaining layout index information corresponding to each target component, the layout index information indicating the row and column coordinates of the corresponding target component in the layout container; calculating the absolute coordinate position of each target component based on the layout index information and the size parameters of the layout container; when relative positioning is enabled for the layout container, mapping the absolute coordinate position of each target component to a relative coordinate position in the layout container as the display position of each target component in the layout container.

[0045] For each target component, the electronic device retrieves its corresponding layout index information, where the layout index information is a set of row and column coordinates, used to indicate the grid position of the target component in the layout container.

[0046] The electronic device further obtains the size parameters of the layout container, including the width and height of the container. Based on the row and column coordinates and cell width and height of each target component, it calculates its absolute coordinate position in the container (such as the upper left corner (x, y) coordinates) to reflect its physical position at the pixel level.

[0047] If the layout container enables relative positioning mode, the electronic device converts the above absolute coordinate position into a relative coordinate position relative to the starting position of the container (such as percentage top: 20%; left: 40%). The relative coordinate will be used as the final display position for rendering to ensure that the component can be displayed adaptively as the container scales.

[0048] For example, in a large-screen surveillance system, the layout container dimensions are 1920×1080 pixels, divided into a 6×6 grid. A target component's layout index information is (rowIndex:2, columnIndex:3), and its cell width is 320px and height is 180px. Its absolute coordinate position is (960px, 360px). If relative positioning (position:relative) is enabled, the electronic device calculates its relative position as left:50%; top:33.3% and displays it accordingly.

[0049] In the above embodiment, a unified coordinate mapping mechanism is used to accurately calculate and update the display position of each target component, which not only supports regular arrangement based on row and column indexes, but is also suitable for repositioning after dynamic drag adjustment. Moreover, the introduction of relative positioning further enhances the adaptability in a multi-resolution large-screen environment, solves the problem of unstable component positioning or slow response in the existing technology, thereby improving the overall visual layout stability and flexibility.

[0050] In existing large-screen visualization systems, business data often presents large volumes, high content density, and significant variations in space usage. Using a fixed layout can easily lead to display overflow, data overlap, and wasted white space. This is especially true when the large screen is dynamically reconfigured, making it difficult to ensure readability and display efficiency within the component's data views.

[0051] To this end, in some embodiments, each target component is rendered according to the corresponding display position and presented in the large-screen view, including: obtaining the elastic layout parameters of each target component; the elastic layout parameters include at least the main axis direction and the placeholder space information of each data item in the filled business data; according to the main axis direction and the placeholder space information of each data item, each data item in each target component is automatically wrapped and arranged to generate a two-dimensional data display view inside each target component; the two-dimensional data display view is used as the display content of the corresponding target component, and is rendered and presented at the corresponding display position in the layout container.

[0052] When the electronic device renders each target component according to the corresponding display position and presents it in the large-screen view, the electronic device obtains the corresponding elastic layout parameters for each target component.

[0053] Flexible layout parameters refer to configuration parameters that support the dynamic arrangement of elements within a component, including but not limited to the main axis direction, alignment, and line breaking rules. The main axis direction indicates the direction in which content is arranged within a component, such as horizontally (x-axis) or vertically (y-axis).

[0054] Based on the main axis direction and the space occupied by each data item, the electronic device arranges the data items within the component row by row or column, and automatically wraps the current row when there is insufficient space. This process continues until all data items are arranged, forming a clear and orderly two-dimensional data display view. The resulting two-dimensional data display view is used as the rendering content of the corresponding target component, filling the target component's display position, rendering it in the layout container, and finally displaying it on the large screen view, completing the visualization of business data.

[0055] The space occupied information is used to indicate the space required for each data item on the screen, such as width and height.

[0056] In the above embodiment, by setting the main axis direction and space information, it is possible to adapt to data display requirements at different sizes and form a clear two-dimensional view structure within the component, achieving a structured and highly readable presentation of large amounts of heterogeneous business data. The automatic line break mechanism avoids overlapping and overflowing data items due to size changes or screen zooming, effectively improving the robustness and consistency of large-screen visualization layouts, making it particularly suitable for real-time display scenarios of information-intensive businesses.

[0057] In some embodiments, automatic line wrapping is performed on each data item in each target component according to the main axis direction and the space occupied by each data item to generate a two-dimensional data display view inside each target component, including: for any target component, based on the size parameters of the layout container, the remaining available space of the current layout row is dynamically calculated along the main axis direction of the targeted target component; for the data item to be currently arranged, whether its occupied space exceeds the remaining available space of the current layout row; if it exceeds, the targeted data item is wrapped to the next layout row, and the remaining available space of the next layout row is recalculated; the above arrangement and line wrapping process is repeated until all data items are arranged, and a two-dimensional data display view inside the targeted target component is generated.

[0058] The electronic device performs automatic line wrapping and layout processing based on the main axis direction and the space occupied by the data items to construct a two-dimensional data display view of the target component. Specifically, for any target component, the electronic device initializes the remaining available space of the current layout row along the set main axis direction (such as horizontal or vertical) based on the size parameters of the layout container (such as width or height) to store subsequent data items.

[0059] The electronic device processes the data items to be arranged one by one, and determines whether the space occupied by the data item is greater than the remaining available space in the current arrangement row; if not, it continues to arrange in the current arrangement row; if it exceeds, it triggers a line break operation.

[0060] After the line feed operation occurs, the electronic device reinitializes the remaining available space of the next arrangement row, arranges the current data item into the new row, and records the data structure of the row.

[0061] According to the above process, the electronic device repeatedly processes all data items until all data items are arranged, and finally obtains a complete two-dimensional data display view.

[0062] In the above embodiment, by dynamically calculating the remaining space of the layout rows and performing automatic line wrapping, adaptive processing can be performed for business data of different sizes, densities and structures, and a two-dimensional view structure suitable for display can be automatically constructed, which significantly improves the readability and layout rationality of the content within the component, enhances the robustness and responsiveness of the visualization system, and is particularly suitable for scenarios such as operation monitoring, alarm management, and system status presentation that require high information density display.

[0063] Multiple target components may overlap or overlap in a layout container. If a clear display priority is not set, problems such as obstruction of key content and confusion in the obstruction relationship between components may occur, affecting the visual effect and data recognition efficiency. To this end, in some embodiments, each target component is rendered according to the corresponding display position and presented in the large-screen view, further comprising: obtaining the display priority of each target component, the display priority is used to indicate the hierarchical order of each target component in the visual presentation; in the layout container, rendering operations are performed on each target component according to the display priority, so that high-priority components are displayed over low-priority components.

[0064] For each target component, the electronic device obtains its preset display priority. This priority is a weighted value used for sorting, indicating the display level of the component in the final view. Display priority can be dynamically set based on factors such as business importance, alarm level, and user-defined policies. High priority and low priority are relative terms.

[0065] The electronic device sorts all target components according to their display priority from high to low. When performing rendering operations, it draws low-priority components first and high-priority components last, so that high-priority components can cover low-priority components, thereby ensuring priority display of high-importance information.

[0066] In the above embodiment, by introducing a display priority mechanism and controlling the rendering order of target components, orderly management of view levels can be achieved in a multi-component overlapping scenario, so that key content is presented first and important information is not blocked, thereby enhancing the expressive ability of the large-screen visualization system and the user interaction experience.

[0067] In addition, in actual large-screen displays, it is common to have multiple business components in the same location, especially in the following scenarios: multiple alarm information needs to be displayed in sequence (carousel); different dimensional data under the same resource needs to be viewed in rotation (such as CPU / memory / IO); page space is limited, information density is high, and content compression is required.

[0068] At this time, the display priority is not only used for hierarchical overlay display, but also can guide the electronic device to rotate multiple components in a fixed area in order of priority, thereby realizing the rotation presentation of information.

[0069] To this end, in some embodiments, if the display positions corresponding to multiple target components overlap and the display priorities are different, the above method further includes: grouping the multiple target components according to the display priority; for a group of target components with the same display position, displaying each target component in sequence in the screen view based on a preset carousel strategy; the carousel strategy includes an automatic rotation time interval, a manual switching mechanism or a loop playback logic.

[0070] For example, on a certain computer room operation and maintenance screen, there are three alarm components A, B, and C, all mapped to the upper left corner of the main screen. However, since only a single display is allowed, the system is set to rotate every 3 seconds based on the display priority (A=80, B=60, C=40), and plays in order from high to low priority. Users can continuously view multiple key status items in the same position.

[0071] Therefore, by introducing a priority-driven component carousel mechanism, it is possible to achieve the timed display of multiple components in the same area in a large-screen environment with limited space. This not only ensures the prominence of high-priority information, but also takes into account the information integrity and display rhythm, effectively improving the expression density and interactive flexibility of the visualization system.

[0072] In addition, each component template is provided with a sorting weight indicating the arrangement order. In some embodiments, the method further comprises: in response to a drag operation triggered on a target component in the screen view, recording the initial position and target drag position of the first target component acted upon by the drag operation; upon completion of the drag operation, swapping the sorting weights of the first target component and the second target component based on the relative positional relationship between the initial position and the target drag position of the second target component; and re-rendering the first target component and the second target component based on the swapped sorting weights.

[0073] To support interactive position adjustment of a target component in a screen view, the electronic device performs the following operations:

[0074] First, a sorting weight field is preset in each component template to indicate the default order of the component in the layout container. The sorting weight is a comparable value, such as an integer. The smaller the sorting weight, the higher the component is presented.

[0075] When the user performs a drag operation in the screen view, the electronic device identifies the dragged first target component and records the initial position of the component and the target position of the user's dragging, which is usually located at another second target component.

[0076] When the drag operation is completed, the electronic device executes the sorting logic according to the relative position relationship between the first target component and the second target component, and exchanges the sorting weights of the two.

[0077] Based on the change in the sorting weight, the electronic device re-sorts the two components and triggers a re-rendering process, updating only the component areas related to the sorting adjustment, thereby completing an interactive sequential update.

[0078] In the above-mentioned embodiments, by presetting sorting weights and dynamically swapping them using drag-and-drop operations, users can effectively customize the order of components on the screen, enabling interactive configuration of component layouts. This not only improves the operability and flexibility of large-screen layouts, but also enhances the user's control over the business view, making it particularly suitable for large-screen visualization scenarios with multiple modules displayed in parallel. Through a local rendering strategy, the system can also improve operational fluency and user experience while ensuring responsiveness.

[0079] Rendering is the process of mapping the virtual structure of the target component into real DOM (Document Object Model) elements or canvas content that can be displayed by the browser. DOM is a standard that structures HTML or XML documents into a tree-like object model, allowing programming languages ​​(such as JavaScript) to access and manipulate page content, structure, and style through a unified interface.

[0080] After implementing component drag and drop rearrangement, re-rendering the entire view without differentiation will cause view jitter and waste rendering resources, seriously affecting performance and interactive experience. To this end, it is necessary to use virtual DOM technology to represent component states with virtual nodes built in memory. Then, by comparing differences, only the changed areas are updated to achieve local rendering optimization.

[0081] The virtual DOM is a memory node structure constructed as a JavaScript object that abstractly describes the real DOM structure. The virtual DOM records information such as the tag type, attribute set, and child node structure of page elements, and serves as an intermediate layer for view rendering and updates. When data is updated, the virtual DOM is updated first. Difference comparison algorithms (such as the Diff algorithm) identify changes between the new and old nodes, and only the actual changes are applied to the real DOM. This reduces unnecessary redrawing and reflow operations, improving rendering efficiency and user interaction performance.

[0082] In combination with virtual DOM technology, in some embodiments, the first target component and the second target component are re-rendered based on the exchanged sorting weights, including: obtaining unique identifiers corresponding to the first target component and the second target component respectively; based on the unique identifiers, determining the first old virtual node of the first target component before dragging and the first new virtual node after dragging, as well as the second old virtual node of the second target component before dragging and the second new virtual node after dragging; wherein the virtual node is a memory node structure constructed based on business data, and each virtual node has a mapping relationship with a target component; performing difference comparison on the first old virtual node and the first new virtual node, and on the second old virtual node and the second new virtual node, respectively, to identify changes in the first target component and the second target component before and after dragging; based on the difference comparison results, performing local rendering processing on the display positions of the first target component and the second target component in the layout container to complete the directional update of the screen view.

[0083] The electronic device obtains a unique identifier corresponding to the dragged first target component and the second target component with which the component is exchanged, and the identifier uniquely marks the position and identity of the component in the system.

[0084] Based on this identifier, the electronic device retrieves the virtual nodes of each component before and after the drag operation from memory: the first old virtual node and the first new virtual node of the first target component, and the second old virtual node and the second new virtual node of the second target component. Virtual nodes are abstract tree structures constructed in memory that represent component states in the real DOM and are the core of the virtual DOM mechanism.

[0085] The electronic device then performs a structural and property difference comparison on the old-new virtual node pairs of each component to identify which parts have actually changed.

[0086] If the recognition result only indicates that the position of the component has changed (such as the sorting weight has changed), the electronic device only updates the position style attribute of the component in the layout container.

[0087] If the recognition result indicates changes to the component's internal structure or content, the electronic device triggers the reconstruction and rendering of its internal view. Ultimately, only the changes are synchronized to the real DOM, completing a targeted update and improving rendering efficiency.

[0088] In the above-mentioned embodiments, by introducing a virtual DOM mechanism, a lightweight representation of component state can be constructed in memory, and fine-grained change identification and precise control can be achieved through virtual node comparison. Compared to traditional global rendering updates, the local rendering update mechanism offers advantages such as low overhead, high performance, and fast response. It can effectively avoid full-page refreshes and page freezes caused by dragging, improving the user interaction experience. It is particularly suitable for the frequent dynamic adjustment of components in large-screen visualization scenarios.

[0089] Among them, in some embodiments, based on the difference comparison result, local rendering processing is performed on the display positions of the first target component and the second target component in the layout container to complete the directional update of the screen view, including: when the difference comparison result indicates that the two-dimensional data display view inside the first target component and the second target component has not changed, only updating the display position of the first target component and the second target component in the layout container; when the difference comparison result indicates that the two-dimensional data display view inside the first target component and / or the second target component has changed, based on the changes of the first target component and / or the second target component before and after dragging, updating the data display view in the first target component and / or the second target component, and re-rendering the first target component and / or the second target component.

[0090] The electronic device performs differentiated local rendering processing operations on the target component based on the difference results of the virtual node comparison.

[0091] Specifically, if the comparison results show that the two-dimensional data display view generated inside the first target component and the second target component, that is, the data grid structure obtained by arranging the main axis direction and the occupied space information inside the component, has not undergone actual content changes, the electronic device only updates the style level of the display positions of the two components in the layout container, for example, by adjusting their CSS transform or top / left properties to reflect their displacement effect, without rebuilding their display content.

[0092] If the difference comparison results indicate that at least one of the above components has changed in structure, data item content, display logic, etc., the electronic device will reconstruct its internal two-dimensional data display view content based on the virtual node state before and after the component is dragged, and synchronize the changes to the real DOM based on the virtual DOM update mechanism to complete the re-rendering of the component to ensure the consistency and correctness of the data display.

[0093] In the above embodiment, by distinguishing whether the internal display structure of the component has changed, the display position or display content of the component can be updated as needed. This not only avoids unnecessary rendering operations when the data has not changed, saving system resources, but also accurately triggers component reconstruction when the content changes, ensuring the consistency and real-time nature of data display, greatly improving the rendering efficiency, response speed and system stability in large-screen dynamic interactive scenarios, and is particularly suitable for complex visualization systems with high-frequency operations of multiple components.

[0094] In some embodiments, the above method also includes: in response to a drag operation triggered on a target component in a screen view, calculating a moving path of a first target component on which the drag operation acts; based on a preset transition function, interpolating the moving path to generate multiple animation parameters; according to the animation parameters, controlling the first target component to move smoothly along the moving path in the layout container to present a smooth transition animation of the dragging process.

[0095] After receiving a user-triggered drag operation on a screen view, the electronic device determines the movement path of the first target component of the drag operation between the drag start position and the drag end position. The movement path represents the displacement trajectory of the component within the layout container based on the coordinate system and can be defined as a sequence of two-dimensional vectors that reflects the change from the initial position to the target drag position.

[0096] The electronic device then invokes a set of preset transition functions, which define the mapping between the time domain and the spatial displacement domain. These functions often employ cubic Bezier functions or easing functions to simulate the rhythm of natural motion. Based on these functions, the electronic device interpolates the movement path and generates multiple animation parameters, including the intermediate position coordinates, transparency, and scaling for each frame.

[0097] Finally, the electronic device controls the DOM element of the first target component in the layout container to perform frame-by-frame updates based on the generated animation parameters, and performs a smooth transition along the movement path, thereby presenting a natural and smooth drag movement animation in the screen view.

[0098] In the above embodiment, by introducing the movement path interpolation and transition animation control mechanism in the drag interaction, continuous visual feedback of the component from the initial position to the target position can be achieved, thereby improving the user's interaction smoothness and sense of control during the dragging process, and meeting the technical requirements for high frame rate and low latency visual feedback in large-screen display scenarios.

[0099] This application provides a method for visualizing the layout of business data. The overall process includes: calling component templates based on the business type; populating named and scoped slots with data and context information to generate the target component; calculating the display position using layout indexes and size parameters; and combining elastic layout with coordinate mapping strategies to achieve two-dimensional display and dynamic adjustment of components. Furthermore, a sorting weight and virtual DOM difference comparison mechanism are introduced to optimize local rendering efficiency in drag-and-drop interaction scenarios.

[0100] Specifically, the electronic device first receives multiple business data to be presented. Each piece of business data includes the business type to which it belongs and the display content (such as status indicators, chart data, etc.). Based on the business type, the electronic device assigns a corresponding component template to each business data. The component-based development model can effectively improve the reusability and flexibility of the front-end, which is specifically reflected in the following core scenarios: First, multi-module and cross-business reuse; second, dynamic adaptation of multi-terminal layouts. The named slot mechanism of the Vue framework allows for the reservation of replaceable content areas in the component template, which can be accessed through external calls. <templatev-slot:name>Injecting differentiated business logic decouples components from specific business scenarios. Scoped slots can pass layout context information, such as the current cell index and business indicator level, to child components, enabling context-aware rendering.

[0101] For the multiple target components generated, the electronic device sorts them according to the preset sorting weights to generate an ordered set of components. The sorting weights can be configured by the platform or dynamically adjusted through drag and drop operations to indicate the arrangement order of each target component in the layout container. During the drag and drop interaction, by dynamically exchanging block weight attributes and combining responsiveness (computed instructions in the Vue framework) to calculate layout parameters in real time, virtual DOM difference comparison and targeted updates are triggered. Only the associated weight values ​​are updated during dragging to avoid full DOM reflow. The electronic device determines the display position of each target component based on the arrangement order of the target component and the coordinate mapping relationship in the layout container.

[0102] In complex large-screen displays, the main screen area is typically positioned using position:absolute. Top and left are combined with relative positioning of the layout container to precisely control the position of the main module. Z-index is also used to control the display priority of overlay components, effectively avoiding layer occlusion.

[0103] The core principle of electronic devices mapping one-dimensional data into a two-dimensional grid view through flex-wrap is to take advantage of the automatic line wrapping feature of the flexible layout. When the layout container is set to display:flex;flex-wrap:wrap;, the data items are arranged in sequence along the main axis, and if there is insufficient space, they are automatically wrapped to form a multi-line structure. Compared with the manual grouping solution, this method relies on the native layout capabilities of the CSS engine to ensure efficient and smooth layout. When the main axis direction is horizontal, the remaining available space of the current layout row is calculated. When the next data item cannot be fully accommodated in the current row, it is wrapped to the next row, thereby achieving dynamic row and column arrangement. Finally, the two-dimensional data display view is rendered as the actual content of the component at its corresponding position.

[0104] To support interactive component ordering, electronic devices also provide a drag-based sorting weight swapping mechanism. When a user drags a target component from its original location to the location of another component, the drag's starting and target locations are recorded, and the first and second target components are identified. The sorting weights of the two components are automatically swapped, triggering a partial rendering operation.

[0105] During drag-and-drop interactions, the Vue-based transition-group component can be used to create drag-and-drop animations. By setting transition: transform1scubic-bezier(0.4, 0, 0.2, 1) through CSS, combined with GPU-accelerated rendering and v-move-class, a parabolic easing trajectory is achieved to ensure a 60FPS visual experience.

[0106] During the rendering and update process, a view optimization mechanism based on virtual DOM is employed. Virtual DOM abstracts the real DOM structure through JavaScript objects and optimizes node comparison using unique keys. Keys are bound to unique identifiers (such as UUIDs) to ensure accurate node reuse during dragging, preventing accidental deletion and unnecessary redrawing.

[0107] In addition, in scenarios where multiple components overlap, electronic devices also control the rendering level of components based on display priority. Display priority can be determined by parameters such as alarm level and business urgency, and is used to guide the presentation of high-priority components over low-priority components. The priority mechanism supports fixed-level overlay display and also supports multi-component carousel mode controlled by timeline. When there are multiple business components in a specific area, the scrolling cycle and switching strategy can be set to achieve multi-dimensional information display under spatial reuse.

[0108] In order to further illustrate the application effect of the business data visualization layout method provided by this application in an actual system, refer to the following figures for illustration.

[0109] Figure 2 This is a schematic diagram showing a large-screen configuration interface provided by an embodiment of the present application. Figure 2 As shown, the layout results of multiple target components in the layout container are displayed, such as the main screen component, system capacity component, system performance component, alarm component, hard disk failure prediction component, health component and disaster recovery component. Each component is arranged in sequence based on the preset coordinate mapping relationship or sorting weight in the display position, and the business data visualization content is generated in the form of charts, tiles, etc. in their respective areas. This layout structure reflects the core design concept of this application that supports the parallel display of multiple business modules, component decoupling and flexible configuration.

[0110] Figure 3 This is a schematic diagram showing a large-screen business view configuration interface provided by an embodiment of the present application. Figure 3 As shown, the interface provides visual entry points for large-screen size selection and component content settings. Users can select different layout grid specifications (such as 4×4, 4×3, and 3×3) through the interface and visually drag, edit, and arrange various business components on the page. The interactive logic shown in this figure reflects the application's ability to support operations such as decoupling and binding between component templates and business data, configuring sorting weights, and generating rendering views in the front-end system.

[0111] The business data visualization layout method proposed in this application, combined with the draggable layout component solution of virtual DOM, has shown significant advantages in large-screen visualization applications of storage management software, mainly reflected in the following aspects:

[0112] 1) In terms of performance optimization, the virtual DOM mechanism effectively reduces redundant rendering by over 70%, ensuring a stable 60 FPS interface frame rate even with tens of thousands of data volumes.

[0113] 2) Improve development efficiency by achieving component reuse and shortening development cycles through named slots and scoped slots;

[0114] 3) Improved interactive experience: Flex-wrap automatic layout combined with a responsive system significantly reduces the response delay of drag and drop operations;

[0115] 4) Maintenance costs are reduced, and the Vue-based component architecture improves the iterative update efficiency of functional modules.

[0116] Actual deployment tests show that in PB-level storage cluster monitoring scenarios, the data processing throughput of this application is three times that of traditional solutions, greatly improving user operation satisfaction.

[0117] Through the description of the above implementation methods, those skilled in the art can clearly understand that the method according to the above embodiment can be implemented by means of software plus the necessary general hardware platform, and of course it can also be implemented by hardware, but in many cases the former is a better implementation method.

[0118] An embodiment of the present application also provides a computer program product, which is applied to an electronic device.

[0119] Figure 4 This is a schematic diagram of the composition of a computer program product provided in an embodiment of the present application. Figure 4 As shown, the computer program product includes a filling module 401, a position module 402 and a rendering module 403.

[0120] The filling module 401 is used to receive business data to be presented, and fill the business data into the slots of multiple component templates respectively to generate multiple target components.

[0121] The position module 402 is configured to determine the display position of each target component in the layout container according to the coordinate mapping relationship between each target component and the layout container.

[0122] The rendering module 403 is used to render each target component according to the corresponding display position and present it in the large screen view to complete the visual layout of the business data.

[0123] In some embodiments, the filling module is also used to assign corresponding component templates to business data according to the business type to which the business data belongs; named slots and scope slots are preset in the component template; the business data is injected into the corresponding component template through the named slot, and the context information of the business data is passed through the scope slot to complete the dynamic binding of the component template and the business data and generate the target component.

[0124] In some embodiments, the position module is also used to obtain layout index information corresponding to each target component, where the layout index information indicates the row and column coordinates of the corresponding target component in the layout container; based on the layout index information and the size parameters of the layout container, the absolute coordinate position of each target component is calculated; when relative positioning is enabled for the layout container, the absolute coordinate position of each target component is mapped to a relative coordinate position in the layout container as the display position of each target component in the layout container.

[0125] In some embodiments, the rendering module is also used to obtain the elastic layout parameters of each target component; the elastic layout parameters include at least the main axis direction and the space occupied by each data item in the filled business data; according to the main axis direction and the space occupied by each data item, automatic line wrapping is performed on each data item in each target component to generate a two-dimensional data display view inside each target component; the two-dimensional data display view is used as the display content of the corresponding target component, and is rendered and presented in the corresponding display position in the layout container.

[0126] In some embodiments, the rendering module is also used to dynamically calculate the remaining available space of the current layout row along the main axis direction of the target component for any target component based on the size parameters of the layout container; for the data item to be currently arranged, determine whether its occupied space exceeds the remaining available space of the current layout row; if it exceeds, wrap the targeted data item to the next layout row and recalculate the remaining available space of the next layout row; repeat the above arrangement and wrapping process until all data items are arranged, and generate a two-dimensional data display view inside the targeted target component.

[0127] In some embodiments, a sorting weight indicating the arrangement order is set in each component template; the above-mentioned device also includes an interaction module for recording the initial position and target drag position of the first target component acted upon by the drag operation in response to a drag operation triggered on the target component in the screen view; when the drag operation is completed, the sorting weights of the first target component and the second target component are exchanged according to the relative position relationship between the initial position and the target drag position of the second target component; and the first target component and the second target component are re-rendered based on the sorting weights after the exchange.

[0128] In some embodiments, the rendering module is also used to obtain unique identifiers corresponding to the first target component and the second target component respectively; based on the unique identifiers, the first old virtual node of the first target component before dragging and the first new virtual node after dragging, as well as the second old virtual node of the second target component before dragging and the second new virtual node after dragging are determined respectively; wherein, the virtual node is a memory node structure constructed based on business data, and each virtual node has a mapping relationship with a target component; a difference comparison is performed on the first old virtual node and the first new virtual node, and on the second old virtual node and the second new virtual node, respectively, to identify changes in the first target component and the second target component before and after dragging; based on the difference comparison results, local rendering processing is performed on the display positions of the first target component and the second target component in the layout container to complete the directional update of the screen view.

[0129] In some embodiments, the rendering module is also used to update only the display position of the first target component and the second target component in the layout container when the difference comparison result indicates that the two-dimensional data display view inside the first target component and the second target component has not changed; when the difference comparison result indicates that the two-dimensional data display view inside the first target component and / or the second target component has changed, based on the changes of the first target component and / or the second target component before and after dragging, update the data display view in the first target component and / or the second target component, and re-render the first target component and / or the second target component.

[0130] In some embodiments, the interaction module is also used to calculate the moving path of the first target component on which the drag operation acts in response to a drag operation triggered on a target component in a screen view; interpolate the moving path based on a preset transition function to generate multiple animation parameters; and control the first target component to move smoothly along the moving path in the layout container according to the animation parameters to present a smooth transition animation of the dragging process.

[0131] An embodiment of the present application further provides an electronic device, including a memory and a processor, wherein the memory stores a computer program, and the processor is configured to run the computer program to execute the steps in any of the above-mentioned embodiments of the method for visual layout of business data.

[0132] An embodiment of the present application further provides a computer-readable storage medium, in which a computer program is stored, wherein the computer program is configured to execute the steps of any of the above-mentioned business data visualization layout method embodiments when running.

[0133] In an exemplary embodiment, the computer-readable storage medium may include, but is not limited to, various media that can store computer programs, such as a USB flash drive, a read-only memory (ROM), a random access memory (RAM), a mobile hard disk, a magnetic disk, or an optical disk.

[0134] An embodiment of the present application further provides a computer program product, which includes a computer program. When the computer program is executed by a processor, the steps of any of the above-mentioned business data visualization layout method embodiments are implemented.

[0135] An embodiment of the present application also provides another computer program product, including a non-volatile computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, it implements the steps in any of the above-mentioned business data visualization layout method embodiments.

[0136] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the above description has generally described the components and steps of each example according to their functions. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0137] The above is a detailed introduction to a method, program product, device and medium for visual layout of business data provided by this application. This article uses specific examples to illustrate the principles and implementation methods of this application. The description of the above embodiments is only used to help understand the method and core ideas of this application. It should be pointed out that for ordinary technicians in this technical field, without departing from the principles of this application, several improvements and modifications can be made to this application, and these improvements and modifications also fall within the scope of protection of the claims of this application.

Claims

1. A method for visual layout of business data, characterized in that: include: Receive business data to be presented, and fill the business data into slots of multiple component templates respectively to generate multiple target components; The component template is a preset definition unit of a reusable component structure, and is reused by embedding different data through slots; the component template is provided with a sorting weight indicating the arrangement order; Determining the display position of each target component in the layout container according to the coordinate mapping relationship of each target component relative to the layout container; Rendering each target component according to the corresponding display position and presenting it in the screen view to complete the visual layout of the business data; In response to a drag operation triggered on a target component in a screen view, recording an initial position and a target drag position of a first target component acted upon by the drag operation; When the drag operation is completed, swapping the sorting weights of the first target component and the second target component according to the relative positional relationship between the initial position and the second target component corresponding to the target drag position; Based on the exchanged sorting weights, the first target component and the second target component are re-rendered to perform a partial update of the screen view.

2. The method according to claim 1, characterized in that The step of filling the business data into the slots of multiple component templates to generate multiple target components includes: Allocate a corresponding component template to the business data according to the business type to which the business data belongs; the component template is preset with named slots and scoped slots; The business data is injected into the corresponding component template through the named slot, and the context information of the business data is passed through the scope slot to complete the dynamic binding of the component template and the business data and generate the target component.

3. The method according to claim 1, characterized in that The determining the display position of each target component in the layout container according to the coordinate mapping relationship of each target component relative to the layout container includes: Obtaining layout index information corresponding to each target component, where the layout index information indicates the row and column coordinates of the corresponding target component in the layout container; Calculating the absolute coordinate position of each target component based on the layout index information and the size parameters of the layout container; When relative positioning is enabled in the layout container, the absolute coordinate position of each target component is mapped to a relative coordinate position in the layout container to serve as the display position of each target component in the layout container.

4. The method according to any one of claims 1 to 3, characterized in that Rendering each target component according to the corresponding display position and presenting it in the large screen view includes: Obtaining elastic layout parameters of each target component; the elastic layout parameters at least include the main axis direction and the space occupied by each data item in the filled business data; Automatically wrapping and arranging the data items in each target component according to the main axis direction and the space occupied by each data item to generate a two-dimensional data display view inside each target component; The two-dimensional data display view is used as the display content of the corresponding target component, and is rendered and presented at a corresponding display position in the layout container.

5. The method according to claim 4, characterized in that The step of automatically wrapping and arranging the data items in each target component according to the main axis direction and the space occupied by each data item to generate a two-dimensional data display view within each target component includes: For any target component, based on the size parameters of the layout container, dynamically calculate the remaining available space of the current layout row along the main axis direction of the target component; For the data item to be arranged, determine whether its occupied space exceeds the remaining available space of the current arrangement row; If it exceeds, the targeted data item will be wrapped to the next layout row, and the remaining available space of the next layout row will be recalculated; Repeat the above arrangement and line wrapping process until all data items are arranged, generating a two-dimensional data display view inside the target component.

6. The method according to claim 1, characterized in that The re-rendering of the first target component and the second target component based on the exchanged sorting weights includes: Obtaining unique identifiers corresponding to the first target component and the second target component respectively; Based on the unique identifier, determining a first old virtual node of the first target component before being dragged and a first new virtual node after being dragged, as well as a second old virtual node of the second target component before being dragged and a second new virtual node after being dragged; wherein the virtual node is a memory node structure constructed based on the business data, and each virtual node has a mapping relationship with a target component; Performing difference comparison on the first old virtual node and the first new virtual node, and on the second old virtual node and the second new virtual node, respectively, to identify changes between the first target component and the second target component before and after the drag; Based on the difference comparison result, local rendering processing is performed on the display positions of the first target component and the second target component in the layout container to complete the directional update of the screen view.

7. The method according to claim 6, characterized in that The performing local rendering processing on the display positions of the first target component and the second target component in the layout container based on the difference comparison result to complete the directional update of the screen view includes: If the difference comparison result indicates that the two-dimensional data display views inside the first target component and the second target component have not changed, only the display positions of the first target component and the second target component in the layout container are updated; When the difference comparison result indicates that the two-dimensional data display view inside the first target component and / or the second target component has changed, based on the changes of the first target component and / or the second target component before and after dragging, the data display view in the first target component and / or the second target component is updated, and the first target component and / or the second target component is re-rendered.

8. The method according to claim 6 or 7, characterized in that The method further comprises: In response to a drag operation triggered on a target component in a screen view, calculating a moving path of a first target component acted upon by the drag operation; Based on a preset transition function, interpolating the movement path to generate a plurality of animation parameters; According to the animation parameters, the first target component is controlled to move smoothly along the movement path in the layout container to present a smooth transition animation of the dragging process.

9. A computer program product, characterized in that include: A filling module is used to receive business data to be presented and fill the business data into the slots of multiple component templates respectively to generate multiple target components; The component template is a preset definition unit of a reusable component structure, and is reused by embedding different data through slots; the component template is provided with a sorting weight indicating the arrangement order; A position module, configured to determine a display position of each target component in the layout container according to a coordinate mapping relationship of each target component relative to the layout container; A rendering module is used to render each target component according to the corresponding display position and present it in the large screen view to complete the visual layout of the business data; In response to a drag operation triggered on a target component in a screen view, recording an initial position and a target drag position of a first target component acted upon by the drag operation; upon completion of the drag operation, exchanging the sorting weights of the first target component and the second target component based on a relative positional relationship between the initial position and a second target component corresponding to the target drag position; Based on the exchanged sorting weights, the first target component and the second target component are re-rendered to perform a partial update of the screen view.

10. The computer program product according to claim 9, wherein The filling module is further used for: Allocate a corresponding component template to the business data according to the business type to which the business data belongs; the component template is preset with named slots and scoped slots; The business data is injected into the corresponding component template through the named slot, and the context information of the business data is passed through the scope slot to complete the dynamic binding of the component template and the business data and generate the target component.

11. The computer program product according to claim 9, wherein The location module is further configured to: Obtaining layout index information corresponding to each target component, where the layout index information indicates the row and column coordinates of the corresponding target component in the layout container; Calculating the absolute coordinate position of each target component based on the layout index information and the size parameters of the layout container; When relative positioning is enabled in the layout container, the absolute coordinate position of each target component is mapped to a relative coordinate position in the layout container to serve as the display position of each target component in the layout container.

12. The computer program product according to claim 9, wherein The rendering module is further used to: Obtaining elastic layout parameters of each target component; the elastic layout parameters at least include the main axis direction and the space occupied by each data item in the filled business data; Automatically wrapping and arranging the data items in each target component according to the main axis direction and the space occupied by each data item to generate a two-dimensional data display view inside each target component; The two-dimensional data display view is used as the display content of the corresponding target component, and is rendered and presented at a corresponding display position in the layout container.

13. An electronic device, characterized in that: include: memory for storing computer programs; A processor is configured to implement the steps of the method for visual layout of business data according to any one of claims 1 to 8 when executing the computer program.

14. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, wherein the computer program, when executed by a processor, implements the steps of the method for visual layout of business data according to any one of claims 1 to 8.

Images