Large-screen visual dynamic display system and method

Abstract

The invention discloses a large-screen visual dynamic display system and method, and belongs to the technical field of web front ends. The system comprises a front-end timer dynamic processing module, a rear-end response processing module and a front-end UI display module. The front-end timer dynamic processing module is used for triggering a preset timer and periodically initiating a data request to the rear-end response processing module according to a preset frequency; the rear-end response processing module is used for receiving the data request sent by the front-end timer dynamic processing module, querying data from a database according to corresponding request parameters, and sending the queried data to the front-end UI display module; and the front-end UI display module is used for displaying the received data on a large screen and realizing data synchronization between the front-end UI display module and the rear-end response processing module through a data response type bidirectional binding mechanism of a vue framework. According to the invention, real-time dynamic display of the data and synchronization of front and rear end data are realized, and the timeliness and accuracy of data display are improved.

Description

Technical Field

[0001] The present invention relates to a large-screen visualized dynamic display system and method, belonging to the technical field of web front-ends. Background Art

[0002] In the current digital age, data display has become an important means of corporate decision-making, operation monitoring and information communication.

[0003] Traditional website data display methods, especially those based on static tables, have a certain degree of clarity and readability in data presentation, but their limitations are apparent in some specific application scenarios, such as large-screen displays in companies. These limitations are mainly reflected in the following aspects: Static tables cannot reflect the latest changes in data in real time. For data scenarios that require real-time monitoring, this display method obviously cannot meet the needs. In addition, static tables usually only provide limited data filtering and sorting functions, and users cannot obtain the required data information through intuitive interactive methods on the large screen.

[0004] In order to solve these problems, some solutions have appeared on the market, but most of these solutions achieve dynamic display of data by replacing the table. However, this still cannot meet the requirements of large-screen scenarios for rich, comprehensive, dynamic and real-time data display. Specifically, although the dynamic display of data is achieved, the display effect still appears monotonous in large-screen scenarios, lacking sufficient visual impact and interactivity. Secondly, due to the limitations of data transmission and processing mechanisms, the data update speed may not meet the real-time requirements. In addition, although the existing solutions provide certain interactive functions, the user operation is complicated and the feedback is not timely, resulting in a poor user experience.

[0005] Therefore, it is urgent to provide an innovative large-screen visual dynamic display platform to solve the relevant technical defects faced in the existing technology. Summary of the invention

[0006] The purpose of the present invention is to provide a large-screen visual dynamic display system and method, which aims to achieve dynamic display of large-screen data, improve data synchronization efficiency, and enhance the scalability and flexibility of the system through modular design, timer mechanism, data request and response, and data responsive two-way binding of the Vue framework.

[0007] In order to achieve the above objectives / solve the above technical problems, the present invention is implemented by adopting the following technical solutions.

[0008] On the one hand, the present invention provides a large-screen visual dynamic display system, which includes: a front-end timer dynamic processing module, a back-end response processing module and a front-end UI display module that are communicatively connected to each other; The front-end timer dynamic processing module is used to trigger a preset timer when the page is initialized, and regularly initiate a data request to the back-end response processing module according to a preset frequency; The back-end response processing module is used to receive the data request sent by the front-end timer dynamic processing module, query the corresponding data from the database according to the corresponding request parameters, and send the queried data to the front-end UI display module; The front-end UI display module is used to display the received data on the large screen, and to achieve data synchronization between the front-end UI display module and the back-end response processing module through the data responsive two-way binding mechanism of the Vue framework.

[0009] Optionally, the user also performs interactive operations through the front-end UI display module, and the interactive operations are fed back to the back-end response processing module in real time through the data-responsive two-way binding mechanism of the Vue framework, and the back-end response processing module returns data according to the new request.

[0010] Optionally, when the data of the backend response processing module changes, the corresponding relevant data of the frontend UI display module is automatically updated synchronously; conversely, the user's interactive operations on the frontend UI display module will be fed back to the corresponding relevant data of the backend response processing module in real time.

[0011] Optionally, when the data of the backend response processing module changes, the built-in diff algorithm of the vue framework is also used to process the DOM elements that need to be updated. The processing process includes: Comparative analysis of new and old data is performed using the diff algorithm; According to the comparison and analysis results of the new and old data, the minimum set of DOM elements that need to be updated is determined, and only the relevant elements in the minimum set of DOM elements are updated.

[0012] Optionally, after receiving the data request sent by the front-end timer dynamic processing module, the back-end response processing module needs to perform a corresponding legitimacy check before sending the queried data to the front-end UI display module.

[0013] Optionally, after the user performs interactive operations through the front-end UI display module, the back-end response processing module needs to perform corresponding legitimacy checks before returning data to the front-end UI display module according to the new request.

[0014] Optionally, after the user performs an interactive operation through the front-end UI display module, the back-end response processing module needs to perform corresponding legitimacy checks before returning data to the front-end UI display module according to the new request, including: When the user enters search conditions or performs other operations on the page, the front-end UI display module verifies the corresponding input or operation. If the verification fails, the user is prompted to re-enter; If the verification is passed, a series of screening conditions selected by the user on the front-end UI display module are passed as parameters to the back-end response processing module, and the back-end response processing module then sends the screened data that meets the conditions to the front-end UI display module.

[0015] Optionally, the backend response processing module also performs data preprocessing on the data returned to the frontend display UI module, and the preprocessing operation at least includes: converting the data into JSON format and data cleaning.

[0016] Optionally, the backend response processing module receives relevant requests sent by the frontend display UI module or the frontend timer dynamic processing module through HTTP or HTTPS protocol.

[0017] In a second aspect, the present invention further provides a large-screen visualized dynamic display method applicable to the large-screen visualized dynamic display system as described in the first aspect, comprising: Trigger a preset timer and send a data request at a preset time interval; if it is the first request, the data of the first page is queried by default; if it is a subsequent request, the data is requested according to the current page number; Paginate the returned data queried according to the request; if the returned data has only one page, clear the timer and end the data request process; if the returned data has multiple pages, determine whether the last page has been reached; If the last page is reached, the page number is reset to the first page, and the data is queried again from the first page when the next timer is triggered to implement a circular query; If the returned data is neither one page nor the last page, the page number is increased by 1, and the next page of data is queried in the next round of data request to realize automatic page turning; wherein, during the automatic page turning process, if the user manually operates the page, the page number corresponding to the last time the user operated the page is used as the starting page number of the data request when the subsequent timer is triggered; Repeat the above steps until the preset end condition is met.

[0018] Optionally, after the back-end response processing module receives the data request sent by the front-end timer dynamic processing module, it is necessary to perform corresponding legitimacy checks before sending the queried data to the front-end UI display module, and after the user manually operates the page through the front-end UI display module, the back-end response processing module returns the data to the front-end UI display module according to the new request.

[0019] Optionally, after the user manually operates the page through the front-end UI display module, the back-end response processing module needs to perform corresponding legitimacy checks before returning data to the front-end UI display module according to the new request, including: When the user enters search conditions or performs other operations on the page, the front-end UI display module verifies the corresponding input or operation. If the verification fails, the user is prompted to re-enter; If the verification is passed, a series of screening conditions selected by the user on the front-end UI display module are passed as parameters to the back-end response processing module, and the back-end response processing module then sends the screened data that meets the conditions to the front-end UI display module.

[0020] Optionally, the preset end condition includes: the back-end response processing module returns an end signal or the user manually stops.

[0021] Optionally, the preset time interval is set to 5s.

[0022] Compared with the prior art, the present invention has the following beneficial effects: (1) The present invention periodically requests data from the backend through the front-end timer dynamic processing module, and displays it in real time on the front-end UI display module to ensure dynamic update of data. At the same time, users can perform interactive operations through the front-end UI display module. These operations are fed back to the backend in real time through the data responsive two-way binding mechanism of the Vue framework, thus realizing close linkage between the frontend and the backend; (2) The present invention also utilizes the built-in diff algorithm of the Vue framework. When the backend data changes, the frontend UI display module can only process the minimum set of DOM elements that need to be updated, thereby improving the efficiency of data synchronization, reducing unnecessary page rendering, and optimizing the user experience; (3) Before returning relevant data, the back-end response processing module of the present invention ensures the legitimacy and security of the data by performing a legitimacy check. At the same time, the front-end UI display module also verifies the user's input or operation, further enhancing the robustness of the system; (4) The present invention can also automatically turn pages or perform cyclic queries according to the number of pages of data, thereby improving the continuity and integrity of data display. At the same time, the user's manual operation can interrupt the automatic page turning process, and the page number of the user's last operation is used as the starting page number for subsequent data requests, thereby enhancing the flexibility of the system and user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] Figure 1 Shown is a schematic flow chart of the large-screen visual dynamic display method of the present invention. DETAILED DESCRIPTION

[0024] The technical solution of the present invention is described in detail below through the accompanying drawings and specific embodiments. It should be understood that the embodiments of the present invention and the specific features in the embodiments are detailed descriptions of the technical solution of the present invention, rather than limitations on the technical solution of the present invention. The embodiments of the present invention and the technical features in the embodiments may be combined with each other unless there is a conflict.

[0025] The term "and / or" is only a description of the association relationship of the associated objects, indicating that there can be three relationships. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. In addition, the character " / " generally indicates that the associated objects are in an "or" relationship.

[0026] Example 1 This embodiment introduces a large-screen visual dynamic display system, which includes: a front-end timer dynamic processing module, a back-end response processing module and a front-end UI display module that are connected to each other in communication; The front-end timer dynamic processing module is used to trigger a preset timer when the page is initialized, and regularly initiate a data request to the back-end response processing module according to a preset frequency; The back-end response processing module is used to receive the data request sent by the front-end timer dynamic processing module, query the corresponding data from the database according to the corresponding request parameters, and send the queried data to the front-end UI display module; The front-end UI display module is used to display the received data on the large screen, and to achieve data synchronization between the front-end UI display module and the back-end response processing module through the data responsive two-way binding mechanism of the Vue framework.

[0027] In the actual application process of this embodiment, through the front-end timer dynamic processing module, the system can regularly initiate data requests to the back-end at a preset frequency, thereby ensuring that the data displayed on the large screen is updated in real time. This mechanism enables users to obtain the latest data dynamics at any time, improving the timeliness and accuracy of information. The back-end response processing module can quickly receive the data request from the front-end and query the corresponding data from the database according to the request parameters. This process is efficient and accurate, ensuring the timely transmission and processing of data. At the same time, the front-end UI display module can reflect the changes in the front-end and back-end data in real time through the data-responsive two-way binding mechanism of the vue framework, further improving the response speed of the system and user experience. And the front-end UI display module also uses advanced data visualization technology, such as charts, maps, dashboards, etc., to display the received data on the large screen in an intuitive and easy-to-understand way. This rich form of data visualization not only improves the readability of the data, but also enables users to have a more comprehensive understanding of the distribution and changing trends of the data.

[0028] Example 2 Based on Example 1, this example will introduce in detail the relevant structural composition and function implementation process of the large-screen visual dynamic display system. Among them, the relevant system mainly includes vuejs technology, axios, a third-party library for reading remote server data, js technologies such as Promise, and ant-design-vueUI interface library.

[0029] The front-end timer dynamic processing module is used to trigger the pre-set timer function when the page is initialized and complete the call of the initial data. The subsequent operations are controlled by the logic in the timer, as described below: The front-end timer dynamic processing module adopts a timer dynamic processing mechanism, which aims to obtain and update the data content displayed on the large screen in real time. The core of this mechanism lies in the timer function triggered when the page is initialized. This function is pre-set and can automatically send data requests to the back-end regularly according to the frequency set by the user or system requirements. It is worth noting that the back-end in this application may refer to the back-end server corresponding to the back-end response processing module, and the front-end can choose between the front-end timer dynamic processing module and the front-end UI display module according to the actual application scenario, which will not be repeated hereafter.

[0030] When the backend receives these requests from the frontend, it will immediately query the latest data from the database based on the parameters carried in the request (such as data type, time range, etc.). After the query is completed, the backend server will encapsulate the latest data in a specific format (such as JSON) and return it to the frontend.

[0031] After the front end receives the data returned by the back end, it will immediately use this data to update the display content on the big screen. This process is dynamic, which means that as long as the timer is still running, the front end will continue to request the latest data from the back end and update the big screen display in real time, thus ensuring that users can see the latest data changes at any time.

[0032] The front-end UI display module uses DOM technology and UI component library processing, uses Vue syntax v-for to loop the data in the table, and uses the diff algorithm to solve the problem of unnecessary repeated rendering and other memory waste. Among them, the front-end UI display module is also associated with a data-responsive two-way binding mechanism, and uses the diff algorithm to efficiently process data rendering, as described below: This embodiment adopts advanced UI design concepts and efficient component libraries, such as ant-design-vue, when building a large-screen UI interface. This choice is intended to improve the aesthetics, usability, and interactivity of the user interface. As a set of Vue.js-based enterprise-level UI design languages ​​and React's Ant Design implementation of Vue, ant-design-vue provides rich and reusable UI components, making the development process more efficient while ensuring the consistency and aesthetics of the interface.

[0033] In the process of realizing the large-screen interface, this embodiment also makes full use of the powerful functions of DOM technology and Vue framework. Through Vue's responsive data binding mechanism, page elements can be dynamically rendered and updated according to the data returned by the backend. This means that when the backend data changes, the front-end interface can reflect these changes in real time without the user having to manually refresh the page.

[0034] In addition, this embodiment also cleverly uses Vue's v-for and other instructions to display the data returned by the backend in a loop. This method not only ensures the comprehensiveness and intuitiveness of the data, but also greatly improves the efficiency of data display. Through the v-for instruction, developers can easily render each item in the data array to the page, forming a dynamic data list or chart, so that users can see all key data at a glance.

[0035] This embodiment adopts the data responsive two-way binding mechanism of the Vue framework in front-end development. The core of this mechanism is to achieve real-time synchronization between the front-end UI interface and the back-end data. To achieve this goal, this embodiment cleverly uses JavaScript's Object.defineProperty API to recursively traverse the data objects returned by the back-end.

[0036] During the traversal process, getter and setter methods are established for the properties of each data object. These getter and setter methods are not only used to read and write data, but more importantly, they also undertake the task of data monitoring and updating. When the backend data changes, the setter method will be triggered to notify the Vue framework that the data has been updated. The Vue framework will then re-render the front-end UI interface based on the latest data to ensure that the user sees the latest data.

[0037] Similarly, when users perform operations on the front-end UI interface (such as clicking a button, entering text, etc.), these operations will trigger the responsive mechanism of the Vue framework. The Vue framework will capture these operations, read the relevant data through the getter method, and then feed back the changes in these data to the back-end in real time. In this way, a closed-loop, real-time data synchronization mechanism is formed between the front-end and the back-end.

[0038] In the actual application process, the user also performs interactive operations through the front-end UI display module, and the interactive operations are fed back to the back-end response processing module in real time through the data-responsive two-way binding mechanism of the Vue framework, and the back-end response processing module returns data according to the new request. Specifically, when the data of the back-end response processing module changes, the corresponding relevant data of the front-end UI display module is automatically updated synchronously; conversely, the user's interactive operations on the front-end UI display module will be fed back to the corresponding relevant data of the back-end response processing module in real time.

[0039] In front-end development, this embodiment also uses the diff algorithm built into the Vue framework to achieve efficient update processing of DOM elements. The core of this mechanism is that when the back-end data changes, the Vue framework does not directly re-render the entire DOM tree, but first compares the new and old data to find the minimum set of DOM elements that need to be updated.

[0040] In actual application, when the data of the back-end response processing module changes, the built-in diff algorithm of the Vue framework is also used to process the DOM elements that need to be updated. The processing process includes: comparing and analyzing the new and old data through the diff algorithm; determining the minimum set of DOM elements that need to be updated based on the comparison and analysis results of the new and old data, and only updating the relevant elements in the minimum set of DOM elements.

[0041] The diff algorithm plays a key role in this process. It uses an efficient comparison strategy, such as double-end comparison and peer comparison, to quickly locate which DOM elements need to be updated. By comparing the new and old virtual DOM trees, the diff algorithm can accurately find the differences and generate an update patch. Then, the Vue framework will perform actual operations only on the DOM elements that need to be updated based on this patch, thus avoiding unnecessary DOM redrawing and rearrangement.

[0042] The backend response processing module uses efficient data processing and storage technologies, such as databases and caches, to ensure fast responses to frontend data requests. When receiving a data request from the frontend, the backend will query the corresponding data from the database based on the request parameters and return it to the frontend after necessary processing. At the same time, the backend will also format and verify the returned data to ensure the accuracy and reliability of the data.

[0043] Specifically, after receiving the data request sent by the front-end timer dynamic processing module, the back-end response processing module needs to perform corresponding legitimacy checks before sending the queried data to the front-end UI display module, and after the user interacts with the front-end UI display module, the back-end response processing module needs to perform corresponding legitimacy checks before returning the data to the front-end UI display module according to the new request. The back-end response processing module receives the relevant request sent by the front-end display UI module or the front-end timer dynamic processing module through the HTTP or HTTPS protocol.

[0044] Among them, after the user performs interactive operations through the front-end UI display module, the back-end response processing module needs to perform corresponding legitimacy checks before returning data to the front-end UI display module according to the new request, including: When the user enters search conditions or performs other operations on the page, the front-end UI display module verifies the corresponding input or operation. If the verification fails, the user is prompted to re-enter; if the verification passes, the series of screening conditions selected by the user on the front-end UI display module are passed as parameters to the back-end response processing module, and the back-end response processing module then sends the screened data that meets the conditions to the front-end UI display module.

[0045] In addition, the back-end response processing module also performs data preprocessing on the data returned to the front-end display UI module, and the preprocessing operation at least includes: converting the data into JSON format and data cleaning.

[0046] The modules mentioned above work closely together to form a complete real-time data display system. The timer dynamic processing module triggers data requests regularly and interacts with the backend response processing module to obtain the latest data. The backend response processing module is responsible for retrieving data from the data source, performing necessary processing, and then returning the data to the front end. Based on the received data, the page UI display module uses the data-responsive two-way binding mechanism and the diff algorithm to efficiently process data rendering and display the data on the large screen in an intuitive and easy-to-understand manner. Users can perform interactive operations through the page UI display module, such as filtering data, adjusting the display method, etc. These operations will be fed back to the back end in real time through the data-responsive two-way binding mechanism, and the back end will process and return data based on the new request.

[0047] In general, the collaborative work of various modules ensures the real-time, accuracy and efficiency of data. The timer dynamic processing module ensures the real-time update of data, the back-end response processing module provides stable and reliable data support, the page UI display module provides an intuitive and easy-to-understand display interface, and the data responsive two-way binding mechanism and diff algorithm optimize the data display efficiency and user experience. The entire system forms a closed-loop data processing process, realizing real-time display and dynamic interaction of data.

[0048] In addition, this embodiment not only provides basic real-time data display functions, but also has good scalability and customizability. By adding new data interfaces and processing logic, new data sources can be easily integrated into the system. At the same time, the front-end page can also be customized and developed according to user needs to meet the display requirements of different scenarios. Scalability and customizability enable this embodiment to adapt to more diverse application scenarios and user needs. Whether it is smart city management, enterprise operation management or financial data analysis, it can be customized and developed according to actual needs to achieve real-time display and dynamic interaction of data.

[0049] User experience is one of the important indicators for evaluating the quality of a system. In the design and implementation process of this embodiment, the user experience factor is fully considered, and the user experience is improved through a series of optimization measures. For example, in terms of UI design, the present invention adopts a concise and clear interface style and an intuitive display method, so that users can quickly understand and use the system. At the same time, the system also provides rich interactive functions and customization options to meet the different needs and preferences of users. In addition, this embodiment also reduces the user waiting time and improves the response speed and fluency of the system by optimizing the data loading and rendering process. Optimizing the user experience can improve user satisfaction and loyalty to the system. By improving the user experience in terms of UI design, interactive functions and system performance, this embodiment can attract more users to use the system and promote the widespread promotion and application of the system.

[0050] In the actual application process, this embodiment realizes real-time update, dynamic display and efficient rendering of data through the collaborative work of modules such as timer dynamic processing, backend response processing, page UI display, data responsive two-way binding mechanism and diff algorithm efficient processing of data rendering. At the same time, this embodiment also has good scalability and customizability, and can adapt to more diverse application scenarios and user needs. The entire system forms a closed-loop data processing flow, providing users with intuitive, easy-to-understand, real-time and accurate data display services.

[0051] Example 3 refer to Figure 1Based on the same inventive concept as in Example 1 or 2, this embodiment introduces a large-screen visualized dynamic display method applicable to the large-screen visualized dynamic display system as described in Example 1 or 2, which comprises the following steps: When the large-screen visual dynamic display system is started, the initialization operation is first performed, including loading the front-end page, configuring the back-end interface address, setting the front-end timer, etc. Next, a preset timer is triggered, and a data request is sent at a preset time interval. The function of the above timer is to periodically trigger data requests to ensure that the data displayed on the large screen is updated in real time. The interval of the timer in this embodiment can be configured according to actual needs, for example, requesting data every 5 seconds. Among them, if it is the first request, the data of the first page is queried by default; if it is a subsequent request, the data request is made according to the current page number (which may be set manually by the user or automatically recorded by the system); Paginate the returned data queried according to the request; if the returned data has only one page, clear the timer and end the data request process; if the returned data has multiple pages, determine whether the last page has been reached; If the last page is reached, the page number is reset to the first page, and the data is queried again from the first page when the next timer is triggered to implement a circular query; If the returned data is neither one page nor the last page, the page number is incremented by 1, and the next page of data is queried in the next round of data request to achieve automatic page turning. In the process of automatic page turning, if the user manually operates the page, the page number corresponding to the last time the user operated the page is used as the starting page number of the data request when the subsequent timer is triggered. This design ensures that even if the timer automatically triggers the data request, the system will continue to query data from the page number manually queried by the user. Repeat the above steps until a preset end condition is met, wherein the preset end condition includes but is not limited to: the backend response processing module returns an end signal or the user manually stops.

[0052] It is worth noting that after the back-end response processing module receives the data request sent by the front-end timer dynamic processing module, it is necessary to perform corresponding legitimacy checks before sending the queried data to the front-end UI display module, and after the user manually operates the page through the front-end UI display module, the back-end response processing module returns the data to the front-end UI display module according to the new request.

[0053] Among them, after the user manually operates the page through the front-end UI display module, the back-end response processing module must perform corresponding legitimacy checks before returning data to the front-end UI display module according to the new request, including: When the user enters search conditions or performs other operations on the page, the front-end UI display module verifies the corresponding input or operation. If the verification fails, the user is prompted to re-enter; if the verification passes, the series of screening conditions selected by the user on the front-end UI display module are passed as parameters to the back-end response processing module, and the back-end response processing module then sends the screened data that meets the conditions to the front-end UI display module. The actual application process corresponding to this embodiment is as follows: Specifically, in HTML, use Vue's responsive data two-way binding mechanism to bind the corresponding data source object to the page area through built-in instructions, and bind the corresponding method to the operation event of the area through built-in instructions. Use web page technology to process various elements and styles in the page HTML; use built-in instructions to loop and display the data in the table, and use the diff algorithm to optimize the rendering logic, reduce unnecessary DOM redrawing and reflow, and increase performance overhead. For the above operations on the DOM tree, Vue uses the responsive data two-way binding mechanism to monitor the changes of object methods in real time, collect the latest user operation information, and send it to the backend.

[0054] When you just enter the large screen page, perform two operations in the initialization hook function of vue: one is to trigger the function corresponding to the defined timer, and the other is to first send a request to the server and make further judgments on the response data. If the returned data is only one page of data, clear the timer. If there are multiple pages, determine again whether the current page is the last page. If it is, return to the first page to realize the circular display of data. If not, the number of pages is automatically increased by one to realize the automatic page turning function. If the user manually operates the page, searches or manually turns the page due to special needs during the process of automatic page turning and data refresh of the timer, the page number of the user's last operation is recorded as the starting page of the timer automatic page turning.

[0055] When a user enters search conditions on the page or automatically sends a request to the backend, it must go through a legitimacy check on the front end, and then pass the selected series of filtering conditions as parameters to the backend server. The backend filters out the data that meets the conditions based on these conditions and returns it to the browser, which can achieve dynamic real-time refresh of data and on-demand data acquisition.

[0056] It is also worth mentioning that when the timer reaches the set interval, it triggers a data request event, which requests data from the backend server by calling a function (such as fetchData). Before requesting data, the system builds the request parameters. These parameters usually include the current page number, the number of records displayed per page, etc. If the user manually triggers the query, the request parameters are built based on the user's input. Then, after the request parameters are built, the system sends an HTTP request to the backend server, and the request type is GET or POST, depending on the design of the backend API.

[0057] Secondly, after receiving the request, the backend server will process the request and return a response. The response usually includes the data itself (such as a data list in JSON format), paging information (such as the total number of pages, the current page number, etc.), and possible status codes and messages. After receiving the response, the front end will parse the data in the response, which may include converting the JSON string into a JavaScript object and extracting the data to be displayed from it. After parsing the data, the system will update the status of the front end, which may include updating the data list, updating the paging information, and updating the display status of certain UI components.

[0058] After updating the front-end status, the system will re-render the visualization elements on the large screen. This usually involves using chart libraries (such as ECharts, D3.js, etc.) to draw charts, or using other UI component libraries to display data lists, tables, etc. In addition, in actual application, in order to ensure the smoothness of the user experience, the system will also use a smooth transition effect when rendering new data. This can be achieved through CSS animation, JavaScript animation libraries (such as GSAP, Anime.js, etc.) or the animation function of the chart library itself.

[0059] During the entire operation, the system will continue to monitor the user's interactive operations. These operations may include clicking buttons, sliding the screen, entering text, etc. When the user performs interactive operations, the system will capture these operations and call the corresponding processing function. The processing function may trigger a new data request (such as the user manually turning pages or querying specific data), or update the front-end status (such as the user changing some settings).

[0060] Under the action of the timer, the system will continuously repeat the three stages of data request, data processing and display update. In this way, the data on the large screen can be updated in real time. Then, the system will stop running when certain end conditions are met. These conditions may include the user manually stopping the system, the system reaching the preset running time, the backend server returning a specific end signal, etc.

[0061] The above is only a preferred embodiment of the present invention. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the technical principles of the present invention. These improvements and modifications should also be regarded as the scope of protection of the present invention.

Claims

1. A large-screen visual dynamic display system, characterized in that: include: A front-end timer dynamic processing module, a back-end response processing module and a front-end UI display module that are connected to each other in communication; The front-end timer dynamic processing module is used to trigger a preset timer when the page is initialized, and regularly initiate a data request to the back-end response processing module according to a preset frequency; The back-end response processing module is used to receive the data request sent by the front-end timer dynamic processing module, query the corresponding data from the database according to the corresponding request parameters, and send the queried data to the front-end UI display module; The front-end UI display module is used to display the received data on the large screen, and to achieve data synchronization between the front-end UI display module and the back-end response processing module through the data responsive two-way binding mechanism of the Vue framework.

2. The large-screen visual dynamic display system according to claim 1 is characterized in that: The user also performs interactive operations through the front-end UI display module, and the interactive operations are fed back to the back-end response processing module in real time through the data responsive two-way binding mechanism of the Vue framework, and the back-end response processing module returns data according to the new request; Among them, when the data of the backend response processing module changes, the corresponding relevant data of the frontend UI display module is automatically updated synchronously; conversely, the user's interactive operations on the frontend UI display module will be fed back to the corresponding relevant data of the backend response processing module in real time.

3. The large-screen visual dynamic display system according to claim 2 is characterized in that: When the data of the backend response processing module changes, the built-in diff algorithm of the vue framework is also used to process the DOM elements that need to be updated. The processing process includes: Comparative analysis of new and old data is performed using the diff algorithm; According to the comparison and analysis results of the new and old data, the minimum set of DOM elements that need to be updated is determined, and only the relevant elements in the minimum set of DOM elements are updated.

4. The large-screen visual dynamic display system according to claim 3 is characterized in that: After receiving the data request sent by the front-end timer dynamic processing module, the back-end response processing module needs to perform corresponding legitimacy check before sending the queried data to the front-end UI display module.

5. The large-screen visual dynamic display system according to claim 3 is characterized in that: After the user performs interactive operations through the front-end UI display module, the back-end response processing module needs to perform corresponding legitimacy checks before returning data to the front-end UI display module according to the new request; wherein the legitimacy check process includes: When the user enters search conditions or performs other operations on the page, the front-end UI display module verifies the corresponding input or operation. If the verification fails, the user is prompted to re-enter; If the verification is passed, a series of screening conditions selected by the user on the front-end UI display module are passed as parameters to the back-end response processing module, and the back-end response processing module then sends the screened data that meets the conditions to the front-end UI display module.

6. The large-screen visual dynamic display system according to claim 4 or 5, characterized in that: The backend response processing module also performs data preprocessing on the data returned to the frontend display UI module, and the preprocessing operation at least includes: converting the data into JSON format and data cleaning; The back-end response processing module receives the relevant request sent by the front-end display UI module or the front-end timer dynamic processing module through the HTTP or HTTPS protocol.

7. A large-screen visual dynamic display method applicable to the large-screen visual dynamic display system according to any one of claims 1 to 6, characterized in that: include: Trigger a preset timer and send a data request at a preset time interval; if it is the first request, the data of the first page is queried by default; if it is a subsequent request, the data is requested according to the current page number; Paginate the returned data queried according to the request; if the returned data has only one page, clear the timer and end the data request process; if the returned data has multiple pages, determine whether the last page has been reached; If the last page is reached, the page number is reset to the first page, and the data is queried again from the first page when the next timer is triggered to implement a circular query; If the returned data is neither one page nor the last page, the page number is increased by 1, and the next page of data is queried in the next round of data request to realize automatic page turning; wherein, during the automatic page turning process, if the user manually operates the page, the page number corresponding to the last time the user operated the page is used as the starting page number of the data request when the subsequent timer is triggered; Repeat the above steps until the preset end condition is met.

8. The large-screen visual dynamic display method according to claim 7 is characterized in that: After the backend response processing module receives the data request sent by the frontend timer dynamic processing module, before sending the queried data to the frontend UI display module, and after the user manually operates the page through the frontend UI display module, before the backend response processing module returns the data to the frontend UI display module according to the new request, the corresponding legitimacy check shall be performed; Among them, when the user enters the search conditions or performs other operations on the page, the front-end UI display module verifies the corresponding input or operation. If the verification fails, the user is prompted to re-enter; If the verification is passed, a series of screening conditions selected by the user on the front-end UI display module are passed as parameters to the back-end response processing module, and the back-end response processing module then sends the screened data that meets the conditions to the front-end UI display module.

9. The large-screen visual dynamic display method according to claim 7, characterized in that: The preset end condition includes: the back-end response processing module returns an end signal or the user manually stops.

10. The large-screen visual dynamic display method according to claim 7, characterized in that: The preset time interval is set to 5s.

Images