A page-based board data display method and device, electronic equipment and storage medium

Abstract

Embodiments of the present application provide a page board data display method and device, electronic equipment and storage medium, relating to the technical field of data processing. The method comprises obtaining device data, establishing an association relationship between the device data, and generating a tree-shaped data structure; based on the tree-shaped data structure, establishing each level set of the device data; using the tree-shaped data structure to render the association relationship between the devices for display using a three-dimensional model; reorganizing and updating the page data in the first level set, and displaying the data interface; establishing an association relationship for the parent level expansion item and the corresponding child level expansion item, and when the second page and the following multiple pages of the parent level expansion item are cycled to, performing data updating and reorganization processing on the current page to achieve a data linkage display effect, thereby solving the problem of chaotic association relationship between data in the existing method.

Description

Technical Field

[0001] This application relates to the field of data processing technology, and more specifically, to a method, apparatus, electronic device, and storage medium for displaying data on a page-based panel. Background Technology

[0002] The existing data display interface switches between pages automatically by triggering page clicks, displaying the current sub-level data. However, it fails to visually display the relationships between data levels. During the slideshow of each level of the interface, the relationships between data at each level cannot be clearly displayed. When there are too many layers of the display interface and a large amount of data, the relationships between the data become chaotic. Summary of the Invention

[0003] The purpose of this application is to provide a method, apparatus, electronic device, and storage medium for displaying page-based data. It establishes a relationship between parent expanded items and their corresponding child expanded items. When the page rotates to the second page or multiple pages below the parent expanded item, the current page is updated and reorganized to achieve a data linkage display effect, thus solving the problem of chaotic relationships between data in existing methods.

[0004] This application provides a method for displaying page-based data, the method comprising:

[0005] Acquire device data, establish relationships between the device data, and generate a tree-shaped data structure;

[0006] Based on the tree-shaped data structure, establish the various levels of sets for the device data;

[0007] The tree-like data structure is used to render the relationships between devices, which can then be displayed using a 3D model.

[0008] Reorganize and update the paginated data in the first-level collection, and display the data interface.

[0009] In the above implementation process, a unique identifier is used to establish the relationship between device data, and the pagination data in the first-level set is reorganized and updated. This ensures that when a device in the first-level panel is expanded and automatically rotates to the next pagination number, the parent element of the second-level expanded item (the first-level expanded item) remains at the same index position. This makes the relationship between data at all levels clear and understandable, and solves the problem of chaotic relationship between data in existing methods.

[0010] Furthermore, establishing the association between the device data and generating a tree-shaped data structure includes:

[0011] A unique identifier is generated using a random number, a timestamp, and a returned status value;

[0012] A tree node is generated based on the unique identifier and attribute information. The attribute information includes child-level data, which includes device name, number of devices, and device status.

[0013] In the above implementation process, a tree-shaped data structure is established through a unique identifier. The tree-shaped data structure can be used to intuitively represent the relationship between the data of various devices.

[0014] Furthermore, based on the tree-like data structure, various levels of sets for the device data are established, including:

[0015] The first-level data corresponding to the parent node of the tree data structure is paginated using a preset pagination rule to obtain paginated data;

[0016] Each page of data is displayed as a primary set of the device data;

[0017] The child data corresponding to the parent node is displayed as a child set of the first-level set.

[0018] In the above implementation process, the relationships between device data represented by the tree data structure are displayed in the form of parent set and corresponding child set, making the relationships between device data at each level more intuitive.

[0019] Furthermore, prior to the step of utilizing the association between rendering devices using a tree data structure, the method further includes:

[0020] Initialize the pagination panel using parameters from three.js to create a pagination container and enable pagination carousel.

[0021] In the above implementation process, a pagination container is created to facilitate the pagination display of device data at the same level.

[0022] Furthermore, the method of utilizing tree-structured data to render the relationships between devices for display using a 3D model includes:

[0023] Create a 3D model of the first-level data in the tree data structure;

[0024] The created 3D model is then mounted onto the view for display.

[0025] In the above implementation process, the relationships between devices are rendered using HTML and displayed as a 3D model, making the process clearer and more understandable.

[0026] Furthermore, the reorganization and update of the paginated data in the primary set includes:

[0027] When the carousel reaches the second page, if the first-level expanded items on the first page are in an expanded state, the data from the first page will be arranged in the corresponding positions of the expanded items on the second page.

[0028] In the above implementation process, displaying the first page data at the corresponding position of the second page expansion item clarifies the relationship between the first page data and the second page data.

[0029] Further, arranging the first pagination data to the corresponding positions in the second pagination expansion items includes:

[0030] Obtain the index position of the first paginated data in the tree data structure;

[0031] The data from the first pagination will be displayed at the same index position as the expanded item in the second pagination.

[0032] In the above implementation process, the data in the first page is displayed at the same index position as the expanded items in the second page, which can more intuitively show the data relationship and enable users to understand the relationship between devices and the device status more quickly.

[0033] This application embodiment also provides a paginated data display device, the device comprising:

[0034] The data association module is used to acquire device data, establish the association relationship between the device data, and generate a tree-shaped data structure.

[0035] A data hierarchy module is used to establish sets of various levels of the device data based on the tree-shaped data structure.

[0036] The rendering module is used to render the relationships between devices using a tree-like data structure in order to display 3D models.

[0037] The Reorganization and Update module is used to reorganize and update the paginated data in the first-level collection and display the data interface.

[0038] In the above implementation process, a unique identifier is used to establish the relationship between device data, and the pagination data in the first-level set is reorganized and updated. This ensures that when a device in the first-level panel is expanded and automatically rotates to the next pagination number, the parent element of the second-level expanded item (the first-level expanded item) remains at the same index position. This makes the relationship between data at all levels clear and understandable, and solves the problem of chaotic relationship between data in existing methods.

[0039] This application also provides an electronic device, which includes a memory and a processor. The memory stores a computer program, and the processor runs the computer program to enable the electronic device to perform the page panel data display method described in any one of the above-described methods.

[0040] This application also provides a readable storage medium storing computer program instructions, which, when read and executed by a processor, perform the page panel data display method described in any of the above-described embodiments. Attached Figure Description

[0041] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments of this application will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0042] Figure 1 A flowchart illustrating a method for displaying page-by-page data according to an embodiment of this application;

[0043] Figure 2 A flowchart illustrating the generation process of the tree data structure provided in this application embodiment;

[0044] Figure 3 Flowcharts illustrating the establishment of sets at each level provided in embodiments of this application;

[0045] Figure 4 A schematic diagram of the display interface provided in an embodiment of this application;

[0046] Figure 5 A rendering flowchart provided for an embodiment of this application;

[0047] Figure 6 A flowchart of the reorganization and update process provided for embodiments of this application;

[0048] Figure 7 A structural block diagram of the page-padding data display device provided in the embodiments of this application;

[0049] Figure 8 A structural block diagram of another page-based data display device provided in an embodiment of this application.

[0050] icon:

[0051] 100 - Data Association Module; 101 - Identifier Generation Module; 102 - Tree Structure Generation Module; 200 - Data Hierarchy Module; 201 - Pagination Module; 202 - First-Level Collection Module; 203 - Child-Level Collection Module; 300 - Rendering Module; 310 - Panel Initialization Module; 301 - Model Creation Module; 302 - Display Module; 400 - Reorganization and Update Module; 401 - Subscript Acquisition Module; 402 - Reorganization Module. Detailed Implementation

[0052] The technical solutions in the embodiments of this application will now be described with reference to the accompanying drawings.

[0053] It should be noted that similar reference numerals and letters in the following figures indicate similar items; therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures. Furthermore, in the description of this application, terms such as "first," "second," etc., are used only to distinguish descriptions and should not be construed as indicating or implying relative importance.

[0054] Example 1

[0055] Please refer to Figure 1 , Figure 1 This is a flowchart illustrating a method for displaying page-based data in an embodiment of this application. This method more clearly displays the relationships between device data. By uniquely identifying each level of data set, a relationship is established between the current parent expanded item and its corresponding child expanded items. When the parent data is expanded, during the parent page-based page carousel process, the current expanded state of the page is recorded. When the carousel reaches the next page, the data on the next page is updated and reorganized to achieve a data-linked display effect.

[0056] This method can be visualized through a web browser, generating a visual interface for observing device operation. Combined with Hypertext Transfer Protocol communication, it can be better associated with device status, enabling users to monitor and view device status through a web browser. This greatly reduces labor costs, achieves intuitive monitoring of multiple devices by one person, displays device status in real time, and can promptly resolve special situations such as alarms.

[0057] The method specifically includes the following steps:

[0058] Step S100: Obtain device data, establish the association between the device data, and generate a tree data structure;

[0059] like Figure 2 The diagram shown is a flowchart of the generation process for a tree-like data structure, which includes the following steps:

[0060] Step S101: Generate a unique identifier using a random number, a timestamp, and a returned status value;

[0061] Step S102: Generate tree nodes based on the unique identifier and attribute information, wherein the attribute information includes child data, and the child data includes device name, number of devices and device status.

[0062] Specifically, a tree-like data structure is established by using unique identifiers to create relationships between device data.

[0063] The parent node of the tree-structured data is the first-level data, which also includes attribute information. The attribute information includes, but is not limited to, the device name, the number of devices, and the status of the devices within their respective units. This attribute information belongs to the child-level data, which establishes a relationship between the device data at each level.

[0064] The unique identifier (ID) is a unique string generated by "random number + timestamp + return status value". This string is used as the unique identifier of the data node. The generated unique identifier and the node are combined and stored in a tree data structure, thereby establishing a tree data structure for the device data.

[0065] The parent data ensures the uniqueness of the first-level data structure through a unique identifier. The second-level data sets the children attribute according to the parent and includes its child data, and so on, to build a tree structure.

[0066] Step S200: Establish the set of each level of the device data based on the tree data structure;

[0067] like Figure 3 The diagram shown is a flowchart of the creation of sets at each level. Specifically:

[0068] Step S201: Paginate the first-level data corresponding to the parent node of the tree data structure using a preset pagination rule to obtain paginated data;

[0069] Step S202: Display each page of data as a primary set of the device data;

[0070] Step S203: Display the child data corresponding to the parent node as a child set of the first-level set.

[0071] like Figure 4The diagram illustrates the display interface. All device data required for the display can be obtained via network request. The device data is then paginated according to the pagination rules needed for the actual scenario. For example, primary data can be paginated in groups of eight, or any other group can be used; no restrictions are placed here. After pagination, the device data on the current page can be displayed by clicking the page number on the pagination panel. Figure 4 After the first-level data is paginated, it is displayed on the page corresponding to the first-level pagination panel. After the first-level expanded item subset, i.e. the child data, is paginated, it is displayed on the page corresponding to the second-level pagination panel (the child set).

[0072] In a tree-structured data structure, the first-level data corresponding to the parent node is displayed and paginated in the first-level set, the child data corresponding to the child node is displayed and paginated in the child set, and so on. This allows tree-structured data to be associated and displayed in a graph.

[0073] Step S300: Utilize the tree data structure to render the relationships between devices, so as to display them using a 3D model;

[0074] Before step S300, the pagination panel needs to be initialized using the three.js parameters to create a pagination container and perform a pagination carousel.

[0075] First, the paginated carousel behavior is created. Specifically, the device data in the first-level collection is paginated into 8 devices / domains. After processing the data structure, the scene is created using three.js, the light source is set, the camera position is placed, and the interface is rendered using a renderer. Then, each pagination container is created by creating a planar collection using three.js. The pagination container is designed as a carousel panel to display the current data page number. The above creation is added to the view layer of the scene.

[0076] like Figure 5 The diagram shown is a rendering flowchart. Step S300 may specifically include:

[0077] Step S301: Create a three-dimensional model of the first-level data in the tree data structure;

[0078] Step S302: Attach the created 3D model to the view for display.

[0079] A tree-like data structure with interconnected relationships is established. The device data contained in the first-level data is used to create a 3D model. Data including device status, device identification text, and device quantity is imported, and the necessary rendering elements such as light sources and cameras are combined. After creation, it is mounted on the view.

[0080] When creating the model, the position of the 3D model is adjusted by rotation transformation so that the display model is rotated to a reasonable display angle.

[0081] Step S400: Reorganize and update the paginated data in the first-level collection, and display the data interface.

[0082] When the carousel reaches the second page, with the first-level expanded items on the first page in an expanded state, the data from the first page is arranged in the corresponding positions of the expanded items on the second page, such as... Figure 6 The diagram shown is a flowchart of the reorganization and update process, specifically:

[0083] Step S401: Obtain the index position of the first paginated data in the tree data structure;

[0084] Step S402: Display the first pagination data at the same index position as the second pagination expansion item.

[0085] When the device data (first-level expanded item) of a device in the first-level collection and its associated sub-items are clicked, the sub-data corresponding to the current expanded item is found in a loop by using the association relationship of the unique identifiers of each node in the established tree data structure, and the requested second-level data is added to the first-level data structure to create a display interface for the expanded item and its sub-data.

[0086] In a tree-structured data system, child elements are associated with their parent's unique ID. The parent then generates a children tree to store the child data based on these relationships. For example, after the first-level data is displayed in the interface of the first-level collection, clicking on a first-level expanded item will display the data of its child collections. This requires dynamic requests, i.e., retrieving the data based on its parent identifier.

[0087] When the first-level page panel in the first-level collection rotates to the second page, the data items on the second page are reorganized and updated. The parent elements of the first-level expanded items (i.e., the second-level expanded items) on the first page are arranged to the same index position as the data on the second page. This process is repeated, and subsequent page numbers are always displayed at the same index position as the first-level expanded items remain expanded. The index is the position of the first-level data in the tree data structure.

[0088] The specific implementation process of data restructuring is as follows:

[0089] Iterate through all the first-level data, divide all the data into groups of 8, find the index position of the first-level panel expansion item corresponding to each group, and insert the first-level expansion data item into the array. After completing the above processing, merge the data, regroup the data into groups of 8, and complete the entire data update. Therefore, the second page displays the result after the data from the first page and the data from the second page are recombined.

[0090] The number of panels in each group can be determined based on the size of the panel design. For example, in this application, placing 8 panels on the interface makes up one screen, which is the optimal display state.

[0091] The data interface can be displayed in a browser, providing a visual representation of the data. Three.js is used to convert 3D world coordinates into screen coordinates. This data is then used to initialize the interface, which is then rendered by the browser to display the monitoring equipment's visual interface and real-time device status information. This application, combined with Three.js, enables functions such as controlling the interface size, dragging, and zooming.

[0092] After visualizing the device data, users can intuitively observe and monitor the device's operation through a web browser. Combined with Hypertext Transfer Protocol communication, users can better and faster understand the device status, promptly detect various device states, and achieve intuitive and synchronous device monitoring.

[0093] As one implementation method, this approach can be applied to any layout and scheme that displays the cascading relationships of related data. By requesting and obtaining the primary data set from the database, the data is divided into multiple pages according to the pagination rules required by the scenario. Plane geometry is created based on three.js as the page panel, and page number text is created based on three.js. When a device in the primary panel is expanded, the page automatically rotates to the next page number, and the device data in the primary panel remains in the same related position. Users can intuitively view the data relationship and better and faster locate device problems.

[0094] Example 2

[0095] This application provides a paginated data display device, such as... Figure 7 The diagram shown is a structural block diagram of a paginated data display device, which includes, but is not limited to:

[0096] The data association module 100 is used to acquire device data, establish the association relationship between the device data, and generate a tree data structure.

[0097] Data hierarchical module 200 is used to establish various levels of sets of the device data based on the tree data structure;

[0098] Rendering module 300 is used to render the relationships between devices using a tree-structured data structure in order to display a 3D model;

[0099] The Reorganization and Update Module 400 is used to reorganize and update the paginated data in the first-level collection and display the data interface.

[0100] like Figure 8The diagram shown is a structural block diagram of another type of split-page data display device, wherein the data association module 100 includes, but is not limited to:

[0101] The identifier generation module 101 is used to generate a unique identifier using a random number, a timestamp, and a returned status value;

[0102] The tree structure generation module 102 is used to generate tree nodes based on the unique identifier and attribute information. The attribute information includes child data, which includes device name, number of devices, and device status.

[0103] A tree-like data structure is established by using unique identifiers, which can intuitively represent the relationships between data from various devices.

[0104] Data classification module 200 includes, but is not limited to:

[0105] The pagination module 201 is used to paginate the first-level data corresponding to the parent node of the tree data structure using preset pagination rules to obtain paginated data.

[0106] The primary collection module 202 is used to display each page of data as a primary collection of the device data;

[0107] The child set module 203 is used to display the child data corresponding to the parent node as a child set of the first-level set.

[0108] The relationships between device data represented by the tree data structure are displayed in the form of parent set and corresponding child set, making the relationships between device data at each level more intuitive.

[0109] The device also includes a panel initialization module 310, which initializes the pagination panel using three.js parameters to create a pagination container and perform a pagination carousel.

[0110] Rendering module 300 includes, but is not limited to:

[0111] The model creation module 301 is used to create a three-dimensional model of the first-level data in the tree data structure.

[0112] The display module 302 is used to mount the created 3D model onto the view for display.

[0113] Reorganization and update module 400 includes, but is not limited to:

[0114] The index acquisition module 401 is used to acquire the index position of the first paginated data in the tree data structure;

[0115] The reorganization module 402 is used to display the first pagination data at the same index position as the second pagination expansion item.

[0116] The data from the first page is displayed at the same index position as the expanded items in the second page, which can more intuitively show the data relationships and enable users to quickly understand the relationships between devices and the device status.

[0117] By using unique identifiers to establish relationships between device data, the paginated data in the first-level collection is reorganized and updated. This ensures that when a device in the first-level panel is expanded and the page automatically rotates to the next page number, the parent element of the second-level expanded item (the first-level expanded item) remains at the same index position. This makes the relationships between data at all levels clear and understandable, solving the problem of chaotic relationships between data in existing methods.

[0118] By establishing a tree-like data structure using unique identifiers, data relationships can be displayed through an intuitive interface; the current status of the device can be displayed through a visual interface and hypertext transfer protocol, making it easier for users to identify device problems more quickly and effectively.

[0119] This application also provides an electronic device, which includes a memory and a processor. The memory stores a computer program, and the processor runs the computer program to enable the electronic device to perform the page panel data display method described in Embodiment 1.

[0120] This application also provides a readable storage medium storing computer program instructions. When the computer program instructions are read and executed by a processor, the page panel data display method described in embodiment 1 is performed.

[0121] In the several embodiments provided in this application, it should be understood that the disclosed apparatus and methods can also be implemented in other ways. The apparatus embodiments described above are merely illustrative. For example, the flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of apparatus, methods, and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions marked in the blocks may occur in a different order than those marked in the drawings. For example, two consecutive blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram and / or flowchart, and combinations of blocks in block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or action, or using a combination of dedicated hardware and computer instructions.

[0122] In addition, the functional modules in the various embodiments of this application can be integrated together to form an independent part, or each module can exist independently, or two or more modules can be integrated to form an independent part.

[0123] If the aforementioned functions are implemented as software functional modules and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0124] The above description is merely an embodiment of this application and is not intended to limit the scope of protection of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of protection of this application. It should be noted that similar reference numerals and letters in the following figures indicate similar items; therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures.

[0125] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

[0126] It should be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

Claims

1. A method for displaying data in a split-page panel, characterized in that, The method includes: Acquire device data, establish relationships between the device data, and generate a tree-shaped data structure; Based on the tree data structure, the device data is established into various levels of collections, specifically including: paginating the first-level data corresponding to the parent node of the tree data structure using a preset pagination rule to obtain paginated data; displaying each paginated data as a first-level collection of the device data; and displaying the child data corresponding to the parent node as a child collection of the first-level collection. The tree-like data structure is used to render the relationships between devices, which can then be displayed using a 3D model. The paginated data in the first-level collection is reorganized and updated, and the data interface is displayed. Specifically, the reorganization and update includes: when the carousel reaches the second page, if the first-level expanded items on the first page are in an expanded state, arranging the first-level expanded items to the corresponding positions of the expanded items on the second page, specifically: obtaining the index position of the first-level expanded items in the tree data structure; and displaying the first-level expanded items at the same index position of the expanded items on the second page.

2. The method for displaying page-by-page data according to claim 1, characterized in that, The step of establishing the association between the device data and generating a tree-shaped data structure includes: A unique identifier is generated using a random number, a timestamp, and a returned status value; A tree node is generated based on the unique identifier and attribute information. The attribute information includes child-level data, which includes device name, number of devices, and device status.

3. The method for displaying page-by-page data according to claim 1, characterized in that, Prior to the step of rendering the relationships between devices using a tree-like data structure, the method further includes: Initialize the pagination panel using parameters from three.js to create a pagination container and enable pagination carousel.

4. The method for displaying page-by-page data according to claim 1, characterized in that, The method of using a tree-structured data structure to render the relationships between devices for display using a 3D model includes: Create a 3D model of the first-level data in the tree data structure; The created 3D model is then mounted onto the view for display.

5. A paginated data display device, characterized in that, The device includes: The data association module is used to acquire device data, establish the association relationship between the device data, and generate a tree-shaped data structure. The data hierarchy module is used to establish various levels of collections of the device data based on the tree data structure. Specifically, it includes: paginating the first-level data corresponding to the parent node of the tree data structure using a preset pagination rule to obtain paginated data; displaying each paginated data as a first-level collection of the device data; and displaying the child data corresponding to the parent node as a child collection of the first-level collection. The rendering module is used to render the relationships between devices using a tree-like data structure in order to display 3D models. The reorganization and update module is used to reorganize and update the paginated data in the first-level collection and display the data interface. Specifically, the reorganization and update includes: when the carousel reaches the second page, if the first-level expanded items on the first page are in an expanded state, arranging the first-level expanded items to the corresponding positions of the expanded items on the second page, specifically: obtaining the index position of the first-level expanded items in the tree data structure; and displaying the first-level expanded items at the same index position of the expanded items on the second page.

6. An electronic device, characterized in that, The electronic device includes a memory and a processor, the memory being used to store a computer program, and the processor running the computer program to cause the electronic device to perform the page panel data display method according to any one of claims 1 to 4.

7. A readable storage medium, characterized in that, The readable storage medium stores computer program instructions, which are read and executed by a processor to perform the page panel data display method according to any one of claims 1 to 4.

Images