Table rendering method, electronic equipment and storage medium

Abstract

The invention provides a table rendering method, electronic equipment and a storage medium, and the method comprises the steps: determining at least part of first data from the obtained first data based on a table size indication parameter of a table display region of a screen, and taking the first data as second data needing to be displayed in the table display region; on the basis of each piece of second data needing to be displayed, determining cell visual information corresponding to the second data needing to be displayed; and on the basis of the cell visual information corresponding to each piece of second data and the second data, rendering cells containing the second data so as to display a local table corresponding to the second data in the table display area. According to the method, a high refresh rate and low resource occupation can be ensured, and meanwhile, the table of a large amount of data can be visually displayed.

Description

Technical Field

[0001] This invention relates to the field of data processing technology, specifically to a table rendering method, an electronic device, and a storage medium. Background Technology

[0002] In the upgrading of industrial automation and intelligence, the host computer needs to efficiently display data from different protocols and display information such as equipment operating parameters, sensor data, and production status in tabular form. However, related technologies use general table controls for display, but this method has low rendering efficiency when faced with large amounts of data that are refreshed frequently. Summary of the Invention

[0003] Embodiments of the present invention provide a table rendering method, an electronic device, and a storage medium, which can improve the technical problem of low table rendering efficiency.

[0004] In a first aspect, embodiments of the present invention provide a table rendering method, the method comprising: Based on the table size indicator parameters of the table display area on the screen, at least a portion of the first data is determined from the obtained first data as the second data to be displayed in the table display area; Based on each of the second data that needs to be displayed, determine the cell visual information corresponding to the second data that needs to be displayed; Based on the visual information of the cells corresponding to each of the second data and the second data, render the cells containing the second data to display a partial table corresponding to the second data in the table display area.

[0005] In some embodiments, determining the cell visual information corresponding to each piece of second data to be displayed includes: Determine the basic visual information of the cells; Based on the status identifier corresponding to each of the second data, and the mapping relationship between the preset status identifier and the visual information adjustment parameters, the basic cell visual information corresponding to the second data is adjusted to obtain the cell visual information corresponding to the second data.

[0006] In some embodiments, adjusting the basic cell visual information corresponding to the second data based on the state identifier corresponding to each of the second data and the mapping relationship between the preset state identifier and visual information adjustment parameters to obtain the cell visual information corresponding to the second data includes: When the status indicator indicates that the second data is in a normal state, the basic cell visual information corresponding to the second data is determined as the cell visual information corresponding to the second data; When the status indicator indicates that the second data is in an abnormal state, based on the status indicator and the mapping relationship between the preset status indicator and visual information adjustment parameters, at least one sub-visual information that needs to be adjusted in the basic cell visual information, and the adjustment parameters of the sub-visual information, are determined; based on the at least one sub-visual information and the adjustment parameters of the sub-visual information, the basic cell visual information corresponding to the second data is adjusted to obtain the cell visual information corresponding to the second data. The different types of anomalies indicated by the status indicators require different adjustments to the sub-visual information and / or the adjustment parameters corresponding to the sub-visual information.

[0007] In some embodiments, the cell visual information includes at least one of the cell size indication parameters, cell background parameters, and font parameters.

[0008] In some embodiments, the cell visual information includes cell size indication parameters and font parameters; The step of rendering cells containing the second data based on the visual information of the cells corresponding to each of the second data and the second data, so as to display a partial table corresponding to the second data in the table display area, includes: Obtain the display position of the cell corresponding to each second data point in the table display area; Based on the display position of each of the second data and the visual information of the cell corresponding to the second data, render the cell that matches the size indication parameter, and render the corresponding second data in the cell by text rendering based on the font parameter; The cells are displayed in the table display area to obtain a partial table corresponding to the second data, wherein the cells are spaced apart in the table display area.

[0009] In some embodiments, the method further includes: Based on the total amount of data in the first data, determine the row headers and column headers of the full table corresponding to the first data; Based on the row headers and column headers, determine the target row headers and target column headers corresponding to the second data; Based on the display positions of the target row header and the target column header, the target row header and the target column header are displayed in the table display area to obtain a partial table corresponding to the second data.

[0010] In some embodiments, the first data is data periodically collected from sensors at several monitoring points, and the method further includes: When the total amount of the first data changes, or the total amount of data of the sensor changes, or the total amount of data of the monitoring point corresponding to the sensor changes, the step of determining the row header and column header of the full table corresponding to the first data is re-executed based on the changed total amount of data.

[0011] In some embodiments, the method further includes: In the event of a table redraw event, the table size indication parameters of the screen-based table display area are re-executed to determine at least a portion of the first data from the obtained first data as the second data to be displayed in the table display area; The table redraw event includes at least one of the following: detecting a scroll operation on the table, a change in the sorting method configured for the first data, a change in the total amount of the first data, or a change in the number of column headers.

[0012] In a second aspect, embodiments of the present invention provide an electronic device, the electronic device comprising: One or more processors; Memory; and One or more applications, wherein the one or more applications are stored in the memory and configured to be executed by the processor to implement any of the table rendering methods provided in the embodiments of this application.

[0013] Thirdly, embodiments of the present invention provide a computer-readable storage medium having a computer program stored thereon, the computer program being loaded by a processor to execute any of the table rendering methods described in the embodiments of this application.

[0014] In the embodiments of the present invention, rendering is performed by acquiring only a portion of the first data, which avoids invalid drawing operations on non-visible first data, reduces the occupancy rate and memory consumption during table rendering, and enables the visualization of large amounts of data in tables with limited hardware resources. This effectively solves the problem of low rendering efficiency faced by industrial host computers in scenarios with large data volumes and high-frequency refresh rates. Attached Figure Description

[0015] To more clearly illustrate the technical solutions in the embodiments of the present invention, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0016] Figure 1 This is an application scenario diagram of the table rendering method provided in the embodiments of the present invention; Figure 2 This is an exemplary flowchart of a table rendering method provided in an embodiment of the present invention; Figure 3 This is an exemplary flowchart of determining row headers and column headers provided by an embodiment of the present invention; Figure 4 This is an exemplary schematic diagram of a table rendering apparatus provided in an embodiment of the present invention; Figure 5 This is an exemplary schematic diagram of an electronic device provided in an embodiment of the present invention. Detailed Implementation

[0017] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention. Furthermore, it should be understood that the specific embodiments described herein are only for illustration and explanation of the present invention and are not intended to limit the present invention. In the present invention, unless otherwise stated, directional terms such as "upper" and "lower" generally refer to the upper and lower positions of the device in actual use or operation, specifically the drawing directions in the accompanying drawings; while "inner" and "outer" refer to the outline of the device.

[0018] In the process of industrial automation and intelligent upgrading, the host computer, as the core carrier of human-computer interaction, bears the important responsibility of real-time acquisition and visualization of field equipment data. Field equipment data includes, but is not limited to, key information such as equipment operating parameters, sensor data, and production status. To facilitate monitoring and analysis by operators, field equipment data is usually displayed centrally in tabular form. However, general-purpose table controls, such as the DataGrid in WPF, have complex internal structures, with each cell composed of multiple nested visual elements. Furthermore, they employ a full redraw mechanism during data refresh, leading to significant data display delays in high-frequency industrial monitoring scenarios, failing to meet the core requirement of real-time performance. Secondly, when displaying large-scale data, traditional controls need to create a large number of interface elements at once when preloading tables containing thousands of rows of data, resulting in excessively long interface loading times and affecting the efficiency of reaching a usable state.

[0019] In view of this, this invention proposes a table rendering method. Based on the table size parameters of the current table display area, a subset of the first data to be displayed is selected, and minimalist visual information is generated for each second data point, avoiding redundant control overhead. Simultaneously, dynamic visual information updates based on status identifier mapping and adaptive generation of row and column headers ensure accurate and real-time data presentation while maintaining a high refresh rate and low resource consumption.

[0020] Figure 1 This is an application scenario diagram of the table rendering method provided in the embodiments of the present invention.

[0021] The table rendering method provided in this invention can be applied to real-time data monitoring of large equipment (such as energy storage battery packs and multi-channel sensor arrays).

[0022] The implementing entity of the technical solution in this invention embodiment can be an electronic device, which can be a table rendering method apparatus. This table rendering method apparatus can be implemented in hardware and / or software, and can be configured in any electronic device with network communication capabilities. This electronic device can be a server, a terminal, or other similar device.

[0023] The server can be a standalone physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, and cloud computing. The terminal can include, but is not limited to, mobile phones, computers, and smart voice interaction devices. The terminal and server can be connected directly or indirectly via wired or wireless communication methods; this embodiment of the invention does not impose any limitations on this.

[0024] In some embodiments, the application scenario may also include, for example, networks, storage devices, etc. Networks may include any suitable wired or wireless networks that facilitate the exchange of information and / or data. Storage devices are used to store data, instructions, and / or any other information.

[0025] It is important to note that the application scenarios for the table rendering method are provided for illustrative purposes only and are not intended to limit the scope of this specification. Those skilled in the art can make various changes and modifications based on the description in this specification. For example, application scenarios may also include databases, information sources, etc. Furthermore, application scenarios may be implemented on other devices to achieve similar or different functions. However, these changes and modifications will not depart from the scope of this specification.

[0026] Figure 2 This is an exemplary flowchart of a table rendering method provided in an embodiment of the present invention. In some embodiments, process 200 may be executed based on an electronic device. Figure 2 As shown, process 200 includes the following steps.

[0027] Step 210: Based on the table size indicator parameters of the table display area on the screen, determine at least a portion of the first data from the obtained first data as the second data to be displayed in the table display area.

[0028] The table display area refers to the visible area in the user interface used to present table content. In some practical examples, the physical size of the table display area is determined by the resolution of the display device, while the logical size can be determined by the application's layout configuration parameters. For example, on a display device with a resolution of 1920×1080, the table display area can be set as a rectangular visible area with a width of 1200 pixels and a height of 600 pixels.

[0029] Table size indicator parameters are used to determine the size and layout of the table display area. For example, table size indicator parameters may include, but are not limited to, the number of rows and columns in the visible area, the height of each row, and the width of each column.

[0030] It should be noted that the table size indicator parameter can be dynamically adjusted according to the actual screen size and user needs.

[0031] In some embodiments, the table size indication parameters include at least the number of cells that can be displayed per row and the number of rows that can be accommodated within the table display area. The number of cells that can be displayed per row is obtained by dividing the width of the table display area by the set width of a single cell. For example, if the cell width is 100 pixels and the table display area width is 1200 pixels, then 12 cells can be displayed per row. The number of rows that can be accommodated is obtained by dividing the height of the table display area by the height of a single cell. For example, if the cell height is 30 pixels and the table display area height is 600 pixels, then 20 rows can be accommodated within the table display area.

[0032] The first data refers to the raw data set obtained from an external data source. For example, the first data may originate from a sensor acquisition system in industrial equipment. For instance, in a battery management system, the first data may include real-time values ​​from 3000 voltage acquisition points and their corresponding status flags. The first data can exist in the form of an array, list, etc., and may contain multiple data items, each corresponding to a sensor measurement result, including a numerical field and a status field.

[0033] The second set of data refers to the subset of data selected from the first set of data that needs to be actually rendered in the table display area.

[0034] In some embodiments, the starting data index, the number of cells that can be displayed per row, and the number of rows that can be accommodated can be determined based on the current scroll position, and the index range of the second data to be extracted can be calculated. For example, if the current scroll position indicates that the starting data index is row 100, with 10 cells per row and 20 rows that can be accommodated, then 200 data items from index 1000 to index 1199 are extracted from the first data as the second data to be rendered.

[0035] It should be understood that the second data can also be determined in any manner known to those skilled in the art, and this specification does not impose any restrictions on this.

[0036] Step 220: Based on each piece of second data that needs to be displayed, determine the cell visual information corresponding to the second data that needs to be displayed.

[0037] Cell visual information refers to a set of parameters used to control the visual effects of an individual cell on the user interface. For example, cell visual information may include, but is not limited to, parameters such as text content, background color, font color, font size, and alignment.

[0038] In some embodiments, cell visual information can be determined based on numeric and status fields in the second data. For example, if a data item has a voltage value of 3.25V and a status flag indicates "overvoltage," the corresponding cell visual information would have the text "3.25V," a red background, and white text. Cell visual information can be looked up using a predefined style mapping table, which can contain the correspondence between different status flags and cell visual information, and can be determined based on predefined rules.

[0039] It should be understood that the visual information of the cell corresponding to the second data can also be determined in any manner known to those skilled in the art, and this specification does not impose any restrictions on this.

[0040] Step 230: Based on the visual information of the cells corresponding to each second data and the second data, render the cells containing the second data to display the partial table corresponding to the second data in the table display area.

[0041] In some embodiments, the rendering process includes applying the text content of the second data and the cell visual information to the corresponding cell. For example, if the text content of the second data is the temperature value "35°C", and its corresponding cell visual information is a light beige background, a 12-pixel font size, and a black font color, then the rendered cell will be displayed as a light beige background filled with a black font and a 12-pixel graphic element.

[0042] There are several ways to render a cell containing the second data, and the specific method can be flexibly chosen based on performance requirements and the development framework.

[0043] In some embodiments of the present invention, by including only the filtered second data in a partial table, instead of all the first data, the complexity of rendering and resource consumption can be reduced, while improving refresh speed and response performance. For example, in a real-time monitoring system, the partial table can be refreshed every 0.1 seconds to ensure that users can see the latest data changes in a timely manner.

[0044] It should be understood that partial tables can also be rendered in any manner known to those skilled in the art, and this specification does not impose any restrictions on this.

[0045] In some embodiments, based on each piece of second data to be displayed, the cell visual information corresponding to the second data to be displayed is determined, including: Determine the basic visual information of the cells; Based on the status identifiers corresponding to each second data point, and the mapping relationship between preset status identifiers and visual information adjustment parameters, the basic cell visual information corresponding to the second data point is adjusted to obtain the cell visual information corresponding to the second data point.

[0046] Basic cell visual information refers to the set of parameters that define the visual effects displayed by default in each cell. For example, basic cell visual information may include, but is not limited to, parameters such as background color, text color, font size, and border style.

[0047] A status identifier refers to a tag or label corresponding to the second data, reflecting the data status of the second data. For example, status identifiers may include "balanced" or "unbalanced". It is understood that status identifiers can be determined based on user input or preset rules.

[0048] Visual information adjustment parameters are used to adjust one or more parameters in the basic cell's visual information. For example, visual information adjustment parameters may include target parameter values ​​for one or more parameters such as background color, text color, and font style.

[0049] In some embodiments, the mapping relationship between preset state identifiers and visual information adjustment parameters can be determined based on experiments or experience. For example, different preset state identifiers correspond to different visual information adjustment parameters, and the different visual information adjustment parameters may not be exactly the same or may be completely different.

[0050] In some embodiments, based on the status identifier corresponding to each second data point and the mapping relationship between preset status identifiers and visual information adjustment parameters, the basic cell visual information corresponding to the second data point is adjusted to obtain the cell visual information corresponding to the second data point, including: When the status indicator indicates that the second data is in a normal state, determine the basic cell visual information corresponding to the second data, which is the cell visual information corresponding to the second data. When the status indicator indicates that the second data is in an abnormal state, based on the status indicator and the mapping relationship between the preset status indicator and the visual information adjustment parameters, at least one sub-visual information that needs to be adjusted in the basic cell visual information, as well as the adjustment parameters of the sub-visual information, are determined; based on at least one sub-visual information and the adjustment parameters of the sub-visual information, the basic cell visual information corresponding to the second data is adjusted to obtain the cell visual information corresponding to the second data. The different types of anomalies indicated by the status indicators require different adjustments to the sub-visual information and / or the corresponding adjustment parameters.

[0051] Status indicators can be used to indicate whether secondary data is within the normal operating range or whether there is an abnormality. For example, in a battery management system, if the voltage value of a cell is within the nominal range (e.g., 3.0V to 3.6V), its status indicator is "normal"; if the voltage value of a cell is lower than 3.0V, the status indicator is "undervoltage"; and if the voltage value of a cell is higher than 3.6V, the status indicator is "overvoltage".

[0052] In some embodiments, the status identifier can be generated by comparing the second data with a preset threshold, and the status identifier can also be transmitted as metadata along with the original second data to the terminal used for rendering for subsequent visual presentation control.

[0053] In some embodiments, when a status indicator indicates that the second data is in a normal state, the basic cell visual information is used as the final cell visual information corresponding to the second data.

[0054] In some embodiments, abnormal states may include, but are not limited to, different types such as overvoltage, undervoltage, communication interruption, and high temperature.

[0055] Subvisual information refers to a specific parameter within the basic cell's visual information that needs to be adjusted. For example, subvisual information could be background color, text color, font weight, font italics, font size, etc.

[0056] In some embodiments, when a status identifier indicates that the second data is in an abnormal state, one or more sub-visual information that needs to be adjusted can be determined based on the mapping relationship. For example, the sub-visual information that matches the current status identifier and the adjustment parameters of the sub-visual information. For instance, for the abnormal state of "overpressure", the sub-visual information that needs to be adjusted may include background color and font weight; while for the abnormal state of "high temperature", the sub-visual information that needs to be adjusted may include text color, etc. Different adjustment parameters enable different abnormality types to use differentiated visual cues, avoiding information confusion.

[0057] The adjustment parameters for subvisual information refer to the target parameter values ​​to be applied to a specific subvisual information. For example, the adjustment parameter for background color could be "red," and the adjustment parameter for font weight could be "bold." The subvisual information to be adjusted and / or the corresponding adjustment parameters for the subvisual information can be predefined in the mapping relationship.

[0058] It should be understood that the sub-visual information to be adjusted and / or the adjustment parameters corresponding to the sub-visual information can also be determined in any manner known to those skilled in the art, and this specification does not impose any restrictions on this.

[0059] In some embodiments of the present invention, by querying the mapping relationship based on the status identifier, the adjustment parameters of multiple sub-visual information are dynamically combined to generate the final cell visual information, which is then applied to the rendering process. This enables differentiated display of normal and abnormal data. By adjusting the dynamic visual information, the intuitiveness and response efficiency of data monitoring can be improved.

[0060] In some embodiments, cell visual information includes at least one of cell size indication parameters, cell background parameters, and font parameters.

[0061] Cell size indicators control the amount of space a cell occupies in the user interface. For example, cell size indicators can include the cell's width and height, which can be expressed in pixels. It's understood that cell size indicators can be fixed values ​​or values ​​that vary depending on the specific circumstances.

[0062] The background parameters of a cell are used to control the display style of the cell's background. For example, the background parameters of a cell can include, but are not limited to, background color, background icon, transparency, and border style.

[0063] Font parameters are used to control the display style of text content in cells. For example, font parameters can include font type (such as SimSun, KaiTi, etc.), font size (such as 12px, etc.), font color, whether to bold, whether to italic, etc.

[0064] It should be understood that the above description of cell visual information is for illustrative purposes only, and this manual does not impose any limitations on it.

[0065] In some embodiments, cell visual information includes cell size indication parameters and font parameters; Based on the visual information of the cells corresponding to each second data point and the second data itself, render the cells containing the second data to display a partial table corresponding to the second data in the table display area, including: Get the display position of the cell corresponding to each second data point in the table display area; Based on the display position of each second data and the visual information of the cell corresponding to the second data, render the cell that matches the size indicator parameter, and render the corresponding second data in the cell by text rendering based on the font parameter; Display cells in the table display area to obtain a partial table corresponding to the second data, wherein the cells are spaced apart in the table display area.

[0066] The display position refers to the area within the table display area of ​​the user interface, where each cell is drawn in the screen coordinate system. For example, the display position can be represented by the x and y coordinates of the top-left corner of the cell.

[0067] In some embodiments, the display position of a cell in the table display area can be obtained in a variety of ways.

[0068] For example, the logical position of each cell can be obtained, which may include the row index and column index of the cell in the full table. The row index and column index can be determined by the order of the second data in the original data set and the preset number of data items per row. For example, if each row is set to display 10 data items, then the 0th to 9th data items are located in the 0th to 9th columns of the 0th row, the 10th to 19th data items are located in the 0th to 9th columns of the 1st row, and so on, converting the index of the one-dimensional data into a two-dimensional row index i and column index j.

[0069] After obtaining the row index i and column index j, along with the cell's size indicator parameter, the initial coordinate position is calculated. For example, if the cell's width is 80 pixels and its height is 30 pixels, then the X-coordinate of the j-th column is j multiplied by 80, and the Y-coordinate of the i-th row is i multiplied by 30.

[0070] It's important to note that since the total data volume of the full table often exceeds the visible area of ​​the screen (i.e., the table display area), users need to scroll to view the first data in different sections. Therefore, determining the display position also requires considering the current scroll offset. The scroll offset can include a vertical scroll offset, representing the position of the starting row of the current visible area within the full table. This scroll offset can be determined by the scroll bar position. For example, if the user scrolls down to the 50th row of the current visible area, the vertical scroll offset is 50 multiplied by the cell height. In other words, the final Y-coordinate of any row i is i multiplied by the cell height minus this vertical scroll offset.

[0071] It is understandable that horizontal scrolling is usually not required, or is only introduced when there are many columns. If horizontal scrolling exists, the scroll offset can also include the horizontal scroll offset. In this case, the final X coordinate of any j-th column is processed in a similar way to the vertical direction, based on the column index multiplied by the cell width and then subtracted by the horizontal scroll offset to obtain the final X coordinate of any j-th column.

[0072] In some embodiments, after obtaining the display position of each cell, the final rendering operation is performed in the table display area based on the display position. For example, the cells are rendered one by one according to the calculated coordinate positions to form a complete partial table.

[0073] It's important to note that there are gaps between the cells in the display area. These gaps are not achieved by drawing border lines, but rather by reserving blank areas in the layout. For example, if a cell's width is set to 80 pixels, but 82 pixels are actually allocated in the layout, the extra 2 pixels form the horizontal gap, visually creating grid spacing. Similarly, similar gaps can be set vertically. Setting these gaps avoids the performance overhead of frequently drawing lines, while also improving the readability of the table.

[0074] Figure 3 This is an exemplary flowchart of determining row and column headers provided by embodiments of the present invention. In some embodiments, process 300 may be executed based on an electronic device. Figure 3 As shown, process 300 includes the following steps.

[0075] Step 310: Based on the total amount of data in the first data, determine the row headers and column headers of the full table corresponding to the first data; Step 320: Determine the target row header and target column header corresponding to the second data based on the row header and column header; Step 330: Based on the display positions of the target row header and target column header, display the target row header and target column header in the table display area to obtain the local table corresponding to the second data.

[0076] In some embodiments, the first data may contain a large number of data items arranged in a specific order. For example, in a battery management system, the first data may include voltage measurements of 3000 battery cells, and the first data may exist in the form of an array or a list. The total data volume is the total number of data items in the first data, for example, 3000. Based on the total data volume, all the first data can be arranged according to a preset number of columns to form a two-dimensional data structure.

[0077] Row headers and column headers are logical labels used to identify each row and each column in the entire table, respectively.

[0078] The column headers reflect the data category or channel number represented by the column, such as "Channel No.1", "Channel No.2", etc. The number of column headers is determined by the preset number of data items per row. For example, if each row is set to display 10 data items, then there will be 10 column headers, corresponding to columns 0 to 9 respectively.

[0079] In some embodiments, column headers can be generated during initialization and permanently displayed in the visible area. Row headers can reflect the data range covered by the row, such as "Channel 1-10", "Channel 11-20", etc. The number of row headers can be obtained by dividing the total amount of data by the number of data items per row. For example, if there are 3000 data items and 10 items per row, there will be 300 rows, corresponding to 300 row headers. The content of each row header can express the data range contained in that row in the form of a start number and an end number.

[0080] In some embodiments, column headers can be implemented using a fixed sequence of strings, while row headers can be determined using a formulaic naming convention. For example, the row header of the i-th row can be represented as “channel” + (i × Y + 1) + “-” + (i × Y + 10), where Y is the number of data items in each row.

[0081] The target row header and target column header are the row labels and column labels within the visible area that correspond to the displayed second data.

[0082] In some embodiments, when displaying the cell corresponding to the second data, the target row header and target column header that match it can be displayed simultaneously to provide contextual information. For example, the table display area may include a data area and a header area, with column headers located above the data area and row headers located to the left of the data area, aligned with each row of data. During the drawing process, the header area can be rendered first, followed by the cells of the data area.

[0083] Understandably, as the user scrolls the table, the second data to be displayed within the current visible area changes, dynamically updating the target row headers and / or target column headers to align with the second data to be displayed. In an alternative embodiment, horizontal scrolling is typically not required, and column headers can be displayed in a fixed position.

[0084] It should be understood that the above descriptions of target row headers and / or target column headers are for illustrative purposes only, and this specification does not impose any limitations on them.

[0085] In some embodiments of the present invention, target row headers and target column headers can provide users with data location information. Even when only partial data is displayed, users can still accurately understand the location of the second data to be displayed in the current area within the original data set, which helps to achieve efficient and intuitive data monitoring and analysis.

[0086] In some embodiments, the first data is data periodically collected from sensors at several monitoring points, and the method further includes: When the total amount of data in the first data changes, or the total amount of data in the sensor changes, or the total amount of data in the monitoring point corresponding to the sensor changes, the steps of determining the row headers and column headers of the full table corresponding to the first data are re-executed based on the changed total amount of data.

[0087] The monitoring point can be a temperature sensor, pressure sensor, voltage sensor, or other type of physical quantity measurement unit in industrial equipment. Each monitoring point can correspond to one or more channels. For example, it can acquire data from multiple sensors or retrieve pre-cached data from a server according to a preset sampling period (such as once per second or once every 0.1 seconds), and organize all the data in sequence as the first data.

[0088] In some embodiments, when the total amount of the first data changes, or the total amount of the sensor data changes, or the total amount of the monitoring point corresponding to the sensor changes, the row headers and column headers of the full table are updated, and the target row headers and target column headers corresponding to the second data that needs to be displayed are determined.

[0089] In some embodiments of the present invention, the total amount of current first data can be accurately reflected by dynamically updating the target row header or target column header, ensuring the accuracy and maintainability of the information in the user interface, and can be applied to industrial monitoring systems that operate for a long time and whose monitoring points change dynamically.

[0090] In some embodiments, the method further includes: Upon detecting a table redraw event, the table size indicator parameters for the screen-based table display area are re-executed to determine at least a portion of the first data from the obtained first data as the second data to be displayed in the table display area; Table redraw events include at least one of the following: detecting a scroll operation on the table, a change in the sorting method configured for the first data, a change in the total amount of data in the first data, or a change in the number of column headers.

[0091] A table redraw event refers to any event that causes the currently displayed content to become invalid or needs to be displayed again.

[0092] A scrolling operation refers to a user's action of changing the position of the visible area of ​​the entire table. In some embodiments, the user can drag the vertical or horizontal scroll bar by using the mouse wheel, touchpad, or other means to change the current position value of the scroll bar. When a change in the vertical or horizontal scroll offset is detected, it is determined that a scrolling operation on the table has been detected.

[0093] A change in the sorting method configured for the first data refers to the process of altering the arrangement order of the original data set. For example, a change in the sorting method configured for the first data could be changed from the default collection order to an ascending or descending order based on numerical value, or a sorting order based on abnormal status, etc. In some embodiments, users can change the sorting method configured for the first data using controls such as buttons and drop-down menus in the user interface.

[0094] A change in the total amount of data in the first set of data refers to a change in the total number of data items in the first set of data. For example, adding a monitoring device increases the number of data items, while a sensor malfunctions and stops reporting data, resulting in a decrease in the number of data items.

[0095] A change in the number of column headers refers to a change in the number of columns in the entire table. For example, if each row originally displayed 10 channels, it may be adjusted to display 12 channels per row; or the number of channels displayed in a row may increase due to a change in the sensor type.

[0096] In some embodiments, after detecting a redraw event, the table size indicator parameters of the screen-based table display area are re-acquired to determine the number of cells that can be displayed per row and the number of rows that can be accommodated in the current visible area; and based on the table size indicator parameters, at least a portion of the data from the first data is re-determined as the second data to be displayed in the table display area. For example, if scrolling vertically to the beginning of row 50 and the number of visible rows is 20, the system will extract the data items corresponding to rows 50 to 69 as the second data. If the sorting method changes, the first data must first be sorted according to the new sorting rules before extracting the second data corresponding to the index range.

[0097] After determining the second data that needs to be displayed, the corresponding cell visual information is identified. Based on the cell visual information corresponding to each second data point and the text content of the second data, a rendering operation is performed to generate a cell graphic element containing the second data. The rendering process can be performed without relying on traditional UI (User Interface) controls, using lightweight direct drawing.

[0098] It should be noted that the above description of the process is for illustrative purposes only and does not limit the scope of this specification. Those skilled in the art can make various modifications and changes to the process under the guidance of this specification. However, these modifications and changes remain within the scope of this specification.

[0099] One or more embodiments of the present invention also provide a table rendering method, including: Bind the table control to a real-time data source from industrial equipment (e.g., a raw dataset) and ensure automatic notification of data changes. Set basic layout parameters (e.g., number of rows and columns in the visible area, row height, and column width) to render only cells within the visible area, preventing visual elements from being generated in non-visible areas and avoiding memory overflow issues. Furthermore, ensure that the secondary data to be displayed is adapted to display requirements by completing missing values, standardizing units, and extracting status flags.

[0100] In some embodiments, minimalist visual units can be constructed to improve rendering efficiency. For example, each cell consists of a text display unit and a boundary marker unit. The text display unit includes a numerical field of the second data, and the boundary marker unit defines a preset border style (e.g., whether to display a border line, etc.). The background color or font color of the cell can be dynamically adjusted according to the status field in the second data to achieve a visual prompt for abnormal status.

[0101] In some embodiments, row headers / column headers can be automatically generated based on the total amount of the first data to ensure precise matching with the position of the second data. The number of column headers can be a fixed value, which can be pre-generated consecutive numbers and statically displayed in the visible area after initialization. Row headers can be dynamically determined based on the total amount of data, generating a "start number - end number" format. When the total amount of the first data changes, the row headers are recalculated to ensure a one-to-one correspondence with the logical position of the second data.

[0102] In some embodiments, to avoid full redraws and improve refresh efficiency and stability, a redraw operation is triggered only when the total amount of data changes. For example, invalid updates can be filtered and unnecessary rendering can be skipped by comparing the current CellInfoCount (used to store the total amount of data for battery cells or other monitoring points in the current data source) with historical records. Before redrawing, Children.Clear() is called to release old title / cell controls to prevent memory accumulation, and style object resources are centrally managed and reused. For example, all cells in normal state share the same style object, and all cells with overpressure alarms share the same style object. By moving time-consuming operations such as data parsing and threshold judgment to background threads, and safely updating the UI through Dispatcher.Invoke, the main thread is ensured to be used for real-time refresh, avoiding user interface lag.

[0103] In some embodiments, a TextBlock+Border control can be used, without interactive controls, and virtual scrolling can be enabled, rendering only the visible area. The style resource layer manages visual style objects, decoupling style objects from logic control, supporting dynamic switching, and reusing style objects reduces memory overhead. The logic control layer dynamically calculates titles through data binding, title generation, and update judgment, filtering invalid updates, and triggering redraws only when necessary. This enables real-time rendering of tables, avoiding lag, from data binding, calculation, and judgment in the logic control layer of industrial equipment to obtaining style objects in the style resource layer, and finally rendering in the data display layer.

[0104] The solution adopted in this embodiment of the invention can achieve 0.1-second refresh rate for 3000 cells, data latency of less than 100ms, a stable scrolling frame rate of 60FPS without ghosting or blanking, a cell visual hierarchy of no more than two layers, a doubling of rendering efficiency, peak memory usage of less than 80MB, and CPU load maintained at 20% to 30%, making it suitable for use on low-configuration industrial PCs. Furthermore, it improves the maintainability and scalability of rendering; modifications to styles or logic control do not require cross-layer changes. Row / column titles are dynamically configured through dependency attributes (e.g., DisplayColumns, CellInfoCount), adapting to different monitoring points (e.g., expanding from 500 to 3000 monitoring points). In industrial scenarios, displaying the corresponding background color based on abnormal states can improve monitoring efficiency, supports 72 hours of stable operation, and eliminates memory leaks or interface lag.

[0105] For example, in a monitoring system for the voltage of 3000 battery cells in a battery pack, the refresh cycle is set to 100ms. This can be achieved by binding the CellVolInfo collection using ItemsControl, completing the data using the converter CellInfoCompletionCvt, and enabling VirtualizingStackPanel.IsVirtualizing="True" to render only 50 visible cells. Each cell consists of a Border (defining a preset border style) and a TextBlock (displaying the voltage value). The background color is controlled by CellBalancedSign, and row titles "Channel 1-10" are dynamically generated using UniformGridTitle's RowsControlLodad. CheckRedraw compares the total data volume CellInfoCount, triggering a redraw only when the total data volume changes. This reduces the initialization time to 1.8 seconds, achieves a refresh rate of 10FPS, and reduces memory usage by 60%.

[0106] For example, virtualized scrolling can be achieved by setting VirtualizationMode to Recycling in a custom VirtualizingStackPanel, reusing containers, so that the scrolling frame rate can still be maintained at 60 FPS when processing 10,000 rows of data, and the peak memory usage is reduced to 60 MB.

[0107] For example, fixing cell sizes using ItemHeight and ItemWidth avoids the time-consuming process of recalculating the layout.

[0108] For example, moving data processing to a background thread and introducing a priority queue (which prioritizes rendering data in abnormal states) reduces UI thread occupancy to 15% and response latency to less than 50ms.

[0109] For example, a switchable style resource dictionary is defined and dynamically loaded via Application.LoadComponent. A VisualStyle dependency property is added to control cell border styles, title font colors, etc. (e.g., VisualStyle="HighContrast"). Visual attributes are centrally managed through the style resource abstraction layer, supporting dynamic loading of style sheets at runtime. For instance, when a user performs an operation, such as clicking the "Switch Theme" button on the interface, or the system determines based on preset conditions (e.g., automatically switching between day / night mode based on time, or using a high-contrast mode based on an ambient light sensor), one of the style resource dictionaries is loaded into the application's resource system, replacing the currently used style. This adapts to different industry standards (e.g., industrial blue, warning red themes), reducing costs by 40% and achieving theme switching time of less than 200ms, meeting the requirements of power, chemical, and other industry standards, thus achieving efficient, stable, and highly customizable real-time table rendering.

[0110] Figure 4 This is an exemplary schematic diagram of a table rendering apparatus provided in an embodiment of the present invention.

[0111] like Figure 4 As shown, one or more embodiments of the present invention also provide a structural schematic diagram of a table rendering apparatus. The table rendering apparatus may include: The first module 401 is used to determine at least a portion of the first data from the obtained first data as the second data to be displayed in the table display area based on the table size indication parameters of the table display area on the screen; The second module 402 is used to determine the cell visual information corresponding to each second data that needs to be displayed, based on each second data that needs to be displayed. The third module 403 is used to render the cell containing the second data based on the visual information of the cell corresponding to each second data and the second data, so as to display the partial table corresponding to the second data in the table display area.

[0112] The first module 401, the second module 402, and the third module 403 can be used to execute the corresponding embodiments of the above table rendering method. For the specific implementation of these modules and more details, please refer to the corresponding method section. They will not be elaborated here.

[0113] For details on the implementation of each of the above operations, please refer to the previous examples, which will not be repeated here.

[0114] Figure 5 This is an exemplary schematic diagram of an electronic device provided in an embodiment of the present invention.

[0115] This invention also provides an electronic device 500, which may include components such as a processor 501 with one or more processing cores, a memory 502 with one or more computer-readable storage media, a power supply 503, and an input unit 504. Those skilled in the art will understand that... Figure 5 The electronic device structure shown does not constitute a limitation on the electronic device and may include more or fewer components than shown, or combine certain components, or have different component arrangements. Wherein: The processor 501 is the central processing unit for this table rendering. It connects various parts of the electronic device via various interfaces and lines. By running or executing software programs and / or modules stored in the memory 502, and by calling data stored in the memory 502, it performs various functions and processes data, thereby providing overall monitoring of the electronic device. It is understood that the processor 501 communicates with the controller via signal transmission. Optionally, the processor 501 may include one or more processing cores; preferably, the processor 501 may integrate an application processor and a modem processor. The application processor primarily handles the operating system, user interface, and applications, while the modem processor primarily handles wireless communication. It is understood that the modem processor may also not be integrated into the processor 501.

[0116] The memory 502 can be used to store software programs and modules. The processor 501 executes various functional applications and data processing by running the software programs and modules stored in the memory 502. The memory 502 may mainly include a program storage area and a data storage area. The program storage area may store the operating system, application programs required for at least one function (such as sound playback function, image playback function, etc.), etc.; the data storage area may store data created according to the use of the electronic device, etc. In addition, the memory 502 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, or other volatile solid-state storage device. Accordingly, the memory 502 may also include a memory controller to provide the processor 501 with access to the memory 502.

[0117] In some embodiments of this application, the table rendering apparatus can be implemented as a computer program, and the computer program can be implemented as follows: Figure 5 The table rendering apparatus operates on the electronic device shown. The memory of the electronic device can store the various program modules that make up the table rendering apparatus. The computer program comprised of the various program modules causes the processor to execute the steps in the table rendering methods of the various embodiments of this application described in this specification.

[0118] The electronic device includes a processor, memory, and a network interface connected via a system bus. The processor provides computing and control capabilities. The memory includes a non-volatile storage medium and internal memory. The non-volatile storage medium stores the operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage medium. The network interface is used to communicate with external electronic devices via a network connection. When the computer program is executed by the processor, it implements a table rendering method.

[0119] The electronic device also includes a power supply 503 that supplies power to various components. Preferably, the power supply 503 can be logically connected to the processor 501 through a power management system, thereby enabling functions such as charging, discharging, and power consumption management through the power management system. The power supply 503 may also include one or more DC or AC power supplies, recharging systems, power fault detection circuits, power converters or inverters, power status indicators, and other arbitrary components.

[0120] The electronic device may also include an input unit 504, which can be used to receive input digital or character information and generate keyboard, mouse, joystick, optical or trackball signal inputs related to user settings and function control.

[0121] Although not shown, the electronic device may also include a display unit, etc., which will not be described in detail here. Specifically, in this embodiment, the processor 501 in the electronic device loads the executable files corresponding to the processes of one or more applications into the memory 502 according to computer instructions, and the processor 501 runs the applications stored in the memory 502 to realize various functions, such as the table rendering methods of the various embodiments of this application described in this specification.

[0122] Those skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be performed by instructions, or by instructions controlling related hardware. These instructions can be stored in a computer-readable storage medium and loaded and executed by a processor.

[0123] In practice, each of the above units or structures can be implemented as an independent entity or can be arbitrarily combined to be implemented as the same or several entities. For the specific implementation of each of the above units or structures, please refer to the previous method embodiments, which will not be repeated here.

[0124] It should be noted that, Figure 5 This is merely one implementation of the electronic device 500 provided in this embodiment of the invention. In actual applications, the electronic device 500 may include more or fewer components, which is not limited here.

[0125] It should also be understood that, in the various embodiments of this application, the order of the above-mentioned processes does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this invention.

[0126] Based on the above embodiments and the same concept, the present invention also provides a computer-readable storage medium storing a computer program that, when run on a computer, causes the computer to perform the method provided in the above embodiments.

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

[0128] The embodiments, implementation methods, and related technical features of this invention can be combined and substituted for each other without conflict. Although the descriptions of each embodiment in this invention have different focuses, and parts not described in detail in a certain embodiment can be referred to in the relevant embodiments of other embodiments, any simple modifications, equivalent changes, and modifications made to the above embodiments based on the technical essence of this application without departing from the content of the technical solution of this application shall still fall within the scope of the technical solution of this application.

[0129] The embodiments of the present invention have been described in detail above. Specific examples have been used to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only for the purpose of helping to understand the method and core ideas of the present invention. At the same time, for those skilled in the art, there will be changes in the specific implementation methods and application scope based on the ideas of the present invention. Therefore, the content of this specification should not be construed as a limitation of the present invention.

Claims

1. A table rendering method, characterized in that, The method includes: Based on the table size indicator parameters of the table display area on the screen, at least a portion of the first data is determined from the obtained first data as the second data to be displayed in the table display area; Based on each of the second data that needs to be displayed, determine the cell visual information corresponding to the second data that needs to be displayed; Based on the visual information of the cells corresponding to each of the second data and the second data, render the cells containing the second data to display a partial table corresponding to the second data in the table display area.

2. The table rendering method according to claim 1, characterized in that, The step of determining the cell visual information corresponding to each piece of second data to be displayed includes: Determine the basic visual information of the cells; Based on the status identifier corresponding to each of the second data, and the mapping relationship between the preset status identifier and the visual information adjustment parameters, the basic cell visual information corresponding to the second data is adjusted to obtain the cell visual information corresponding to the second data.

3. The table rendering method according to claim 2, characterized in that, The step of adjusting the basic cell visual information corresponding to the second data based on the status identifier corresponding to each of the second data and the mapping relationship between the preset status identifier and visual information adjustment parameters to obtain the cell visual information corresponding to the second data includes: When the status indicator indicates that the second data is in a normal state, the basic cell visual information corresponding to the second data is determined as the cell visual information corresponding to the second data; When the status indicator indicates that the second data is in an abnormal state, based on the status indicator and the mapping relationship between the preset status indicator and visual information adjustment parameters, at least one sub-visual information that needs to be adjusted in the basic cell visual information, and the adjustment parameters of the sub-visual information, are determined; based on the at least one sub-visual information and the adjustment parameters of the sub-visual information, the basic cell visual information corresponding to the second data is adjusted to obtain the cell visual information corresponding to the second data. The different types of anomalies indicated by the status indicators require different adjustments to the sub-visual information and / or the adjustment parameters corresponding to the sub-visual information.

4. The table rendering method according to claim 2, characterized in that, The cell visual information includes at least one of the cell size indicator parameters, cell background parameters, and font parameters.

5. The table rendering method according to claim 2, characterized in that, The cell visual information includes cell size indication parameters and font parameters; The step of rendering cells containing the second data based on the visual information of the cells corresponding to each of the second data and the second data, so as to display a partial table corresponding to the second data in the table display area, includes: Obtain the display position of the cell corresponding to each second data point in the table display area; Based on the display position of each of the second data and the visual information of the cell corresponding to the second data, render the cell that matches the size indication parameter, and render the corresponding second data in the cell by text rendering based on the font parameter; The cells are displayed in the table display area to obtain a partial table corresponding to the second data, wherein the cells are spaced apart in the table display area.

6. The table rendering method according to claim 1, characterized in that, The method further includes: Based on the total amount of data in the first data, determine the row headers and column headers of the full table corresponding to the first data; Based on the row headers and column headers, determine the target row headers and target column headers corresponding to the second data; Based on the display positions of the target row header and the target column header, the target row header and the target column header are displayed in the table display area to obtain a partial table corresponding to the second data.

7. The table rendering method according to claim 6, characterized in that, The first data is data periodically collected from sensors at several monitoring points, and the method further includes: When the total amount of the first data changes, or the total amount of data of the sensor changes, or the total amount of data of the monitoring point corresponding to the sensor changes, the step of determining the row header and column header of the full table corresponding to the first data is re-executed based on the changed total amount of data.

8. The table rendering method according to any one of claims 1-7, characterized in that, The method further includes: In the event of a table redraw event, the table size indication parameters of the screen-based table display area are re-executed to determine at least a portion of the first data from the obtained first data as the second data to be displayed in the table display area; The table redraw event includes at least one of the following: detecting a scroll operation on the table, a change in the sorting method configured for the first data, a change in the total amount of the first data, or a change in the number of column headers.

9. An electronic device, characterized in that, The electronic device includes: One or more processors; Memory; and One or more applications, wherein the one or more applications are stored in the memory and configured to be executed by the processor to implement the table rendering method of any one of claims 1 to 8.

10. A computer-readable storage medium, characterized in that, It stores a computer program, which is loaded by a processor to execute the table rendering method according to any one of claims 1 to 8.

Images