Method for constructing visual screen system and visual screen system
By collecting the configuration files and front-end preset framework of the service subsystem in the visual large-screen system, determining the display parameters, realizing the visual operation window display and data processing in the front-end interface, the problem of existing systems relying on complex back-end architectures is solved, and the effect of simplifying the architecture, reducing costs and improving flexibility is achieved.
Patent Information
- Application Number
- CN202411926316.3
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-25
- Publication Date
- 2025-05-23
AI Technical Summary
The existing visual large-screen systems rely on complex back-end architectures, resulting in complex system architecture, long development cycle, high maintenance costs, and high coupling between the front-end and the back-end, limiting the flexibility and scalability of the system.
By collecting the service subsystems that need to be displayed, the configuration files of each service subsystem are determined, the display parameters are determined based on the front-end preset framework and configuration files, the visual operation window display is realized in the front-end interface, and the front-end directly receives data and processes user input, reducing dependence on the back-end.
It simplifies the system architecture, reduces development and maintenance costs, improves the flexibility and scalability of the system, and ensures real-time data updates and smooth user interaction.
Smart Images

Figure CN120029572A_ABST
Abstract
Description
Technical Field
[0001] The present disclosure relates to the field of computer processing technology, and in particular to a method for constructing a visualization screen system and a visualization screen system. Background Art
[0002] Currently, there are many visualization large-screen projects on the market. These solutions usually rely on back-end services for data processing and storage, and display system status or data visualization through front-end pages. Such systems usually require a complete back-end architecture to manage data, implement business logic, and ensure data updates.
[0003] However, existing technologies usually require complex back-end development and database architecture for data storage, processing and updating, resulting in complex system architecture, long development cycle and high maintenance cost. In addition, the coupling between back-end services and front-end display is strong, which increases the difficulty of system deployment and debugging, and limits flexibility and scalability. Summary of the invention
[0004] The present disclosure provides a method for constructing a visualization screen system and a visualization screen system to at least solve the above technical problems existing in the prior art.
[0005] According to a first aspect of the present disclosure, a method for constructing a visualization screen system is provided, the method comprising:
[0006] Collect the service subsystems that need to be displayed by the visualization screen system, and determine the configuration file of each service subsystem, wherein the configuration file includes data type configuration and display form configuration;
[0007] Based on the front-end preset framework and the configuration files of each service subsystem, determine the display parameters of each service subsystem on the front-end interface, wherein the display parameters include display position and display mode;
[0008] Based on the display parameters, the visual operation windows corresponding to the various service subsystems are displayed in the front-end interface.
[0009] In one possible implementation, after displaying the visual operation windows corresponding to the various service subsystems in the front-end interface, the method further includes:
[0010] receiving transmission data of each service subsystem through the application interface of each service subsystem; displaying the transmission data in the visualization operation window corresponding to each service subsystem; and
[0011] Receive an input operation from a user, and respond to the input operation from the user.
[0012] In one possible implementation manner, displaying the transmission data in a visualization operation window corresponding to each service subsystem includes:
[0013] Using a chart library to display the transmission data in a visualization operation window corresponding to each service subsystem; and / or,
[0014] The transmission data is analyzed based on a display model, and the analysis results are displayed in a visualization operation window corresponding to each service subsystem, wherein the display model is used to determine whether the transmission data is abnormal, predict trends based on the transmission data, or provide an analysis report based on the transmission data.
[0015] In one possible implementation, after receiving the user's input operation, the method further includes:
[0016] authenticating the user, wherein the user is provided with an available service subsystem;
[0017] After the user passes the identity authentication, the user performs an input operation in an available service subsystem in response.
[0018] In one possible implementation manner, after receiving the transmission data of each service subsystem through the application interface of each service subsystem, the method further includes:
[0019] storing the transmission data in a data buffer; and / or obtaining updated transmission data from an application interface of each service subsystem at intervals of a first preset time; storing the updated transmission data in the data buffer;
[0020] The transmission data and / or updated transmission data are obtained from the data buffer.
[0021] In one possible implementation manner, before displaying the visual operation window corresponding to each service subsystem in the front-end interface, the method further includes:
[0022] Based on the front-end preset framework, the transmission data is formatted.
[0023] In one possible implementation, before determining the display parameters of each service subsystem on the front-end interface, the process includes:
[0024] Determine the display parameters of each service subsystem on the front-end interface according to the responsive design or the preset terminal layout table; and / or,
[0025] The user's historical behavior operations are obtained at intervals of a second preset time, and the display parameters of each service subsystem on the front-end interface are adjusted according to the historical behavior operations.
[0026] In one embodiment, the method further comprises:
[0027] Providing independent data services to each service subsystem through a microserver, wherein the microserver belongs to a backend system, and the data services include testing, development and deployment;
[0028] Based on the interface corresponding to the micro-server, the data services performed by each service subsystem are received and displayed in the visualization operation window corresponding to each service subsystem.
[0029] According to a second aspect of the present disclosure, a visualization screen system is provided, the system comprising: a front-end preset framework and a plurality of service subsystems, the front-end preset framework comprising: a data display module, a data processing module, and a data interaction module, wherein:
[0030] The data processing module is used to collect the service subsystems that need to be displayed by the visualization screen system, determine the configuration file of each service subsystem, wherein the configuration file includes data type configuration and display form configuration; based on the front-end preset framework and the configuration file of each service subsystem, determine the display parameters of each service subsystem on the front-end interface, wherein the display parameters include display position and display mode;
[0031] The data display module is used to display the visual operation window corresponding to each service subsystem in the front-end interface based on the display parameters;
[0032] The data processing module is further used to receive transmission data from each service subsystem through the application interface of each service subsystem;
[0033] The data display module is further used to display the transmission data in the visual operation window corresponding to each service subsystem; and
[0034] The data interaction module is used to receive user input operations and respond to the user input operations.
[0035] In one embodiment, the system further includes at least one of the following modules:
[0036] a data processing module, configured to analyze the transmission data based on a display model, and display the analyzed analysis results in a visualization operation window corresponding to each service subsystem, wherein the display model is used to determine whether the transmission data is abnormal, predict trends based on the transmission data, or provide an analysis report based on the transmission data; and / or,
[0037] The data display module is further used to display other data associated with the preset data in response to a user's click operation on the preset data, wherein the preset data is data with a pre-established data association relationship; and / or,
[0038] a data restriction access module, for authenticating the user, wherein the user is provided with an available service subsystem; after the user passes the identity authentication, responding to the user's input operation in the available service subsystem; and / or,
[0039] A data cache module is used to store the transmission data in a data cache; and / or, obtain updated transmission data from the application interface of each service subsystem at a first preset time interval; store the updated transmission data in the data cache; obtain the transmission data and / or updated transmission data from the data cache; and / or,
[0040] A layout adjustment module is used to determine the display parameters of each service subsystem on the front-end interface according to a responsive design or a preset terminal layout table; and / or, obtain the user's historical behavior operation at a second preset time interval, and adjust the display parameters of each service subsystem on the front-end interface according to the historical behavior operation; and / or,
[0041] A micro-server docking module is used to provide independent data services to each service subsystem through a micro-server, wherein the micro-server belongs to a back-end system and the data services include testing, development and deployment; based on the interface corresponding to the micro-server, the data services provided by each service subsystem are received and displayed in a visual operation window corresponding to each service subsystem; and / or,
[0042] The edge device docking module is used to process the transmission data through the edge device and receive the processed transmission data.
[0043] According to a third aspect of the present disclosure, there is provided an electronic device, including:
[0044] at least one processor; and
[0045] a memory communicatively connected to the at least one processor; wherein,
[0046] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the method described in the present disclosure.
[0047] According to a fourth aspect of the present disclosure, a non-transitory computer-readable storage medium storing computer instructions is provided, wherein the computer instructions are used to cause the computer to execute the method described in the present disclosure.
[0048] The method for constructing a visualization screen system and the visualization screen system disclosed in the present invention collect service subsystems that need to be displayed by the visualization screen system, determine the configuration file of each service subsystem, wherein the configuration file includes data type configuration and display form configuration; based on the front-end preset framework and the configuration file of each service subsystem, determine the display parameters of each service subsystem on the front-end interface, wherein the display parameters include display position and display mode; based on the display parameters, display the visualization operation window corresponding to each service subsystem in the front-end interface, which can realize the visualization interface by directly integrating multiple systems only through the front-end architecture without relying on the back-end system, simplifying the architecture, and improving the deployment and maintenance efficiency.
[0049] It should be understood that the content described in this section is not intended to identify the key or important features of the embodiments of the present disclosure, nor is it intended to limit the scope of the present disclosure. Other features of the present disclosure will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS
[0050] The above and other objects, features and advantages of the exemplary embodiments of the present disclosure will become readily understood by reading the detailed description below with reference to the accompanying drawings. In the accompanying drawings, several embodiments of the present disclosure are shown in an exemplary and non-limiting manner, in which:
[0051] In the drawings, the same or corresponding reference numerals represent the same or corresponding parts.
[0052] Figure 1 A schematic diagram of an implementation flow of a method for constructing a visualization screen system provided by an embodiment of the present disclosure is shown;
[0053] Figure 2 A schematic diagram of the structure of a visualization screen system provided by an embodiment of the present disclosure is shown;
[0054] Figure 3 A schematic diagram of the structure of another visualization screen system provided by an embodiment of the present disclosure is shown;
[0055] Figure 4 A schematic diagram of the structure of an electronic device according to an embodiment of the present disclosure is shown. DETAILED DESCRIPTION
[0056] In order to make the purpose, features, and advantages of the present disclosure more obvious and easy to understand, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the drawings in the embodiments of the present disclosure. Obviously, the described embodiments are only part of the embodiments of the present disclosure, not all of the embodiments. Based on the embodiments in the present disclosure, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of the present disclosure.
[0057] At present, there are many visualization large-screen projects on the market, and some solutions display data through front-end technologies (such as Vue, React, etc.) combined with application programming interfaces (APIs). These solutions usually rely on back-end services for data processing and storage, and display system status or data visualization through front-end pages. For example, Vue-based visualization large-screen solutions often use front-end frameworks combined with existing back-end interfaces to achieve data display and interaction. Such systems usually require a complete back-end architecture to manage data, implement business logic, and ensure data updates. Therefore, the existing technical solutions have the following disadvantages:
[0058] 1. Dependence on backend architecture, complex system: Currently, most integrated visualization large-screen solutions rely on backend services for data storage, processing, and updating, resulting in complex system architecture, long development cycle, and high maintenance costs. The coupling between backend services and front-end display is strong, which increases the difficulty of system deployment and debugging.
[0059] 2. Data transmission and update delays: Since existing solutions need to obtain real-time data through back-end interfaces, this often leads to delays between data transmission, processing and display, affecting the timeliness of data updates and the real-time nature of visualization effects.
[0060] 3. Poor scalability: In the existing solution, if you need to integrate a new system or expand functions, you usually need to modify the backend code, which increases the complexity of subsequent maintenance and iteration and limits the flexibility and scalability of the system.
[0061] 4. High system coupling and insufficient flexibility: Traditional solutions usually tightly couple the front-end and back-end, making it impossible to independently optimize or update the front-end, and difficult to achieve flexible integration with other systems. The system has poor flexibility and scalability.
[0062] 5. High deployment and operation and maintenance costs: As existing technologies require the configuration and maintenance of a complete backend architecture and database support, the deployment and operation and maintenance costs of the overall system are high, which is a big challenge, especially for small projects or teams with limited resources.
[0063] Therefore, this embodiment provides a method for constructing a visualization screen system to solve the above problems, specifically as follows:
[0064] Figure 1 FIG. 4 is a flowchart of a method for constructing a visualization screen system provided by an embodiment of the present disclosure. This method can be executed by a device for constructing a visualization screen system provided by an embodiment of the present disclosure, and the device can be implemented in a software and / or hardware manner. The method specifically includes:
[0065] S110. Collect service subsystems required to be displayed by the visualization screen system, and determine a configuration file for each service subsystem, where the configuration file includes data type configuration and display form configuration.
[0066] Among them, the visualization screen system is a data visualization display method that converts data into an easily understandable form by using forms such as graphs and charts, helping users quickly grasp the meaning and trend of the data, and then performing data analysis and decision-making. Visualization screens are usually used for data display and analysis within institutions such as enterprises, governments, and schools, and can also be used as a way to publish public information. The data displayed on the visualization large screen (i.e., the visualization screen) can be various types of data, such as numbers, texts, pictures, etc., and can be real-time, historical, static, or dynamic. This data visualization method can help users more quickly grasp the meaning and trend of the data and make more accurate data analysis and decisions.
[0067] Among them, the service subsystem can be a service system added according to requirements. For example, it can be a Customer Relationship Management (CRM), an Enterprise Resource Planning (ERP) system, an intelligent monitoring system, etc.
[0068] Specifically, since each service subsystem is a data source required for the integrated large screen and is responsible for providing the data of its respective subsystem for display on the front-end visualization interface, this embodiment adds each service subsystem required to be displayed by the visualization screen system according to user requirements. Since the display forms and data types of different service subsystems are different, after determining each service subsystem in this embodiment, it is necessary to determine the configuration file for each service subsystem.
[0069] S120. Based on the front-end preset framework and the configuration file of each service subsystem, determine the display parameters of each service subsystem on the front-end interface, where the display parameters include display position and display method;
[0070] Among them, the front-end preset framework can be a framework system for building a front-end interface, which includes multiple sub-modules and is responsible for displaying data of various service subsystems.
[0071] After collecting the service subsystems that need to be displayed, this embodiment needs to layout the display position and display method of each service subsystem on the screen interface according to the data type configuration and display form configuration of each service subsystem, so as to adjust the display parameters suitable for each service subsystem.
[0072] S130. Based on the display parameters, display the visualization operation windows corresponding to the various service subsystems in the front-end interface.
[0073] Specifically, this embodiment can display the visualization operation window corresponding to each service subsystem in the front-end interface based on the display parameters, and each visualization operation window is used to display the corresponding data for user selection.
[0074] This embodiment adopts a complete front-end architecture, without relying on complex back-end code and database support, reducing the complexity of system development, deployment and maintenance.
[0075] In the embodiment of the present disclosure, after the visual operation window corresponding to each service subsystem is displayed in the front-end interface, it also includes: receiving transmission data of each service subsystem through the application interface of each service subsystem; displaying the transmission data in the visual operation window corresponding to each service subsystem; and receiving user input operations and responding to the user input operations.
[0076] Specifically, in this embodiment, each service subsystem has its own application interface, and each service subsystem (such as CRM system, ERP system, equipment monitoring system, etc.) transmits the transmission data to the front-end application through the interface. Each service subsystem can provide different types of data according to different business needs, such as sales data, inventory data or equipment status.
[0077] At the same time, this embodiment can also obtain transmission data from each service subsystem by receiving API requests based on the front-end interface. Then this embodiment formats, cleans duplicate data and summarizes the received transmission data to ensure that it meets the requirements of visual display. For example, this embodiment can display the processed data on a large screen in the form of charts, maps, digital displays, etc. Finally, this embodiment can receive user input operations and respond to the user's input operations. In addition, users can also choose different viewing modes to view different data analysis results.
[0078] Compared with the traditional system integration method, this embodiment simplifies the integration process and improves the scalability and flexibility of the system through API docking between the front end and multiple system modules. The real-time display of data is ensured by the real-time connection between the front end and each service subsystem. Whenever the data of a service subsystem changes, the front-end interface will update the display content in a timely manner. In addition, data is directly obtained from each service subsystem through the front-end preset framework, which reduces the intermediate transmission links, ensures the real-time update of data, and ensures that users can obtain the latest information in a timely manner. Compared with the back-end data update delay in the prior art solution, this solution can display the latest data faster and more real-time, and reduce the system development and maintenance costs. At the same time, the integration of new system modules becomes easier, supports flexible function expansion, optimizes the user experience, and through the smooth front-end interface and interactive functions, users can view and operate data more efficiently.
[0079] In the disclosed embodiment, the display of the transmission data in the visualization operation window corresponding to each service subsystem includes: displaying the transmission data in the visualization operation window corresponding to each service subsystem using a chart library; and / or analyzing the transmission data based on a display model, and displaying the analyzed results in the visualization operation window corresponding to each service subsystem, wherein the display model is used to determine whether the transmission data is abnormal, predict trends based on the transmission data, or provide an analysis report based on the transmission data.
[0080] Among them, the chart library is a data visualization tool, such as ECharts, D3.js, which can realize the graphical display of data. Specifically, this embodiment can use a suitable chart library method to perform visualization according to the type of transmission data uploaded by different service subsystems. At the same time, the user can also perform operations such as data filtering, real-time refresh, and viewing detailed information on the displayed transmission data.
[0081] In addition, this embodiment can analyze the transmitted data based on the display model, introduce an intelligent analysis module in the data processing layer, use machine learning or big data analysis technology to perform real-time analysis on the collected data, and dynamically adjust the visual display content according to the analysis results. The analyzed results are displayed in the visual operation window corresponding to each service subsystem. By way of example, this embodiment can provide service functions such as automatic identification of abnormal data, trend prediction, or intelligent analysis reports for decision-making.
[0082] This embodiment can enhance decision support, specifically, real-time analysis and trend forecasting can help management make timely decisions; it can improve the value of data, specifically, it can not only display data, but also tap more potential business value through intelligent analysis; it can also achieve automated response, specifically, through intelligent data processing, automatic detection and response to data changes, and improve user experience.
[0083] In one possible implementation, after receiving the user's input operation, the method further includes: authenticating the user, wherein the user is provided with an available service subsystem; and responding to the user's input operation within the available service subsystem after the user passes the identity authentication.
[0084] This embodiment can perform identity authentication (such as OAuth, JWT, etc.) and data encryption technology on the user after receiving the user's input operation to enhance the security of data transmission. After the verification is passed, the user's input operation in the service subsystem is responded to.
[0085] At the same time, this embodiment sets up different service subsystems for different users to ensure that users at different levels and with different roles can only view and operate data that matches their permissions. This embodiment can customize different data display permissions according to business roles, improve the level of refinement of system management, avoid data leakage and illegal access through permission management, and provide stricter security measures for industries involving sensitive data (such as finance, medical care, etc.) to meet compliance requirements.
[0086] In the embodiment of the present disclosure, after receiving the transmission data of each service subsystem through the application interface of each service subsystem, it also includes: storing the transmission data in a data buffer; and / or obtaining updated transmission data from the application interface of each service subsystem after a first preset time interval; storing the updated transmission data in the data cache; obtaining the transmission data and / or the updated transmission data from the data buffer.
[0087] The first preset time may be a time interval set according to actual needs.
[0088] Specifically, in order to reduce the data transmission delay between the front end and each service subsystem module, this embodiment adopts a data caching strategy and is provided with a data cache. Data caching is implemented at the front end, and when the data does not change frequently, data is directly obtained from the data cache, rather than being obtained from the service subsystem module in real time every time. At the same time, this embodiment can also obtain updated transmission data from the application interface of each service subsystem at intervals of a first preset time; store the updated transmission data in the data cache, and maintain the real-time nature of the data by timed pulling or incremental updating. In this way, this embodiment can directly obtain the transmission data and / or updated transmission data from the data cache.
[0089] This embodiment reduces frequent data requests by setting a data buffer, improves system response speed, reduces delays, reduces network traffic consumption, improves system performance, and is particularly suitable for scenarios with multiple data sources, saving bandwidth. In addition, this embodiment reduces network traffic consumption, improves system performance, and is particularly suitable for scenarios with multiple data sources. Even if a short-term failure occurs in the back-end system, the cache mechanism can ensure the continuous display of large-screen data and improve the availability of the visualization screen system.
[0090] In the embodiment of the present disclosure, before displaying the visual operation window corresponding to each service subsystem in the front-end interface, it also includes: formatting the transmission data based on the front-end preset framework.
[0091] Specifically, this embodiment can be designed with front-end data processing logic to ensure that data from various systems can be correctly displayed on the front-end interface. Therefore, this embodiment can format the transmitted data, such as number formatting, date formatting, chart adaptation, etc.
[0092] In the embodiment of the present disclosure, before determining the display parameters of each service subsystem on the front-end interface, it includes: determining the display parameters of each service subsystem on the front-end interface according to a responsive design or a preset terminal layout table; and / or obtaining the user's historical behavior operations at a second preset time interval, and adjusting the display parameters of each service subsystem on the front-end interface according to the historical behavior operations.
[0093] The second preset time may be a time interval set according to actual needs. The preset terminal layout table records the front-end layouts corresponding to different screen sizes.
[0094] Specifically, in addition to the existing large-screen display, this embodiment can add adaptation to other platforms (such as mobile phones, tablets, and desktops), use responsive design or the front-end layout of different devices in the preset terminal layout table to adapt to the display needs of multiple terminals, so as to ensure that the system's visualization effects and interactive experience are consistent on different devices and screen sizes.
[0095] This embodiment ensures that users can obtain a consistent experience regardless of the device they access the system on, thereby enhancing the user experience, being able to adapt to the needs of different scenarios, supporting cross-platform use, improving the diversity and flexibility of the system, and increasing the applicability of the system; it can also meet the growing needs of enterprises for different scenarios, and is particularly suitable for enterprises to share and display data across platforms, and improve the scalability of screen use.
[0096] In addition, this embodiment can adjust the visualization layout and display content in real time based on user behavior and needs. Specifically, this embodiment can analyze the user's operation history or behavior pattern through a machine learning algorithm, and obtain the user's historical behavior operation at a second preset time interval, and adjust the display parameters of each service subsystem on the front-end interface according to the historical behavior operation to dynamically optimize the content and layout displayed on the large screen. For example, optimize the data items that users frequently access, increase the priority of key data, and dynamically adjust the display mode of charts.
[0097] This embodiment adjusts the interface layout and content according to user needs to improve user participation and operational efficiency, so that users can view the most relevant data first, reduce unnecessary interference and waste of time, and dynamically display key information based on real-time data and user behavior to improve data operability.
[0098] In addition, this embodiment can add an analysis module for user behavior data to record and analyze the user's interactive behavior on the large screen (such as clicks, screening, browsing time, etc.). Then, based on these data feedback, the large screen content and layout design are continuously optimized to better meet user needs through analysis of user behavior.
[0099] In the disclosed embodiment, the method further includes: providing independent data services to each service subsystem through a microserver, wherein the microserver belongs to a backend system, and the data services include testing, development and deployment; based on an interface corresponding to the microserver, receiving the data services provided by each service subsystem, and displaying them in a visualization operation window corresponding to each service subsystem.
[0100] This embodiment combines the existing front-end-driven integrated large-screen system with the microservice architecture, that is, the data services of each system module are implemented through microservices at the back end. Each system module is separated through microservices to form services that can be independently developed, tested and deployed. The front-end system calls these services through APIs for data display. Microservices enable system modules to be independently expanded to support more complex business needs. At the same time, each microservice can be independently upgraded and maintained, avoiding the impact of large-scale system updates, and a single service failure will not affect the operation of the entire system, improving the stability and availability of the system.
[0101] In an embodiment of the present disclosure, the method further includes: in response to a user's click operation on preset data, displaying other data associated with the preset data, wherein the preset data is data with a pre-established data association relationship. In the large-screen display, this embodiment adds a multi-dimensional data linkage function. For example, by clicking on a data point, other related data (such as trend charts, maps, tables, etc.) will be automatically updated synchronously so that the user can view relevant detailed information. This linkage effect can help users better understand the relationship between data.
[0102] Therefore, this embodiment can provide users with the opportunity to view information at different levels through multi-dimensional data linkage, obtain a more comprehensive analysis view, and enhance user analysis capabilities; improve the interaction between users and the system through the linkage effect, make data display more vivid and interesting, and enhance interactivity; and enable users to more intuitively understand the connections and impacts between data, reduce the blindness of decision-making, and improve data understanding efficiency.
[0103] In the disclosed embodiment, the method further includes: processing the transmission data through the edge device, and receiving the processed transmission data. For systems that require real-time response (such as IoT device monitoring), some data processing and calculation can be performed on the edge device to reduce the delay in data transmission to the central server. Combined with the distributed architecture, distributed data processing and storage are supported, so that the system can efficiently process massive data and ensure the real-time nature of the data and the high availability of the system. In this way, this embodiment can realize local data processing through edge computing, reduce data transmission delays, improve system response speed, and reduce delays; the distributed architecture improves the fault tolerance of the system, ensures the high availability of the system, and improves distributed fault tolerance; edge computing and distributed architecture can support large-scale data processing and storage, adapt to the growing needs of enterprises, and improve the processing of large-scale data.
[0104] This embodiment receives data from various system modules and displays them on a large screen. It connects to the data sources of various systems through a front-end visualization interface and displays them to users in the form of charts, images, text, etc. Among them, the front-end display interface (Vue): a front-end interface built with the Vue framework, which contains multiple sub-modules and is responsible for displaying data from various system modules. Specifically including:
[0105] Data display module: used to display data in the form of charts, lists, maps, etc., to ensure that the data can be conveyed to users intuitively.
[0106] Data processing module: responsible for the front-end processing and formatting of data, such as filtering, sorting, and aggregation.
[0107] User interaction module: provides interactive functions between users and the large screen, including click, filter, search, etc.
[0108] The specific implementation process of this embodiment may include the following steps:
[0109] Step 1: Demand analysis: This includes collecting and analyzing the data interfaces of the systems to be integrated (such as CRM, ERP, equipment monitoring, etc.); and determining the data type and display format required for visual display.
[0110] Step 2: Front-end interface design: including using the Vue framework to design the front-end visual interface, defining the data display module, data processing module and interaction module; and designing different views and interaction methods according to requirements to ensure the flexibility of the system and user experience.
[0111] Step 3, data interface docking: including data interface docking with various system modules to ensure that data can be transmitted to the front-end interface in real time and accurately; and during the docking process, the data formats of different systems need to be adapted and converted.
[0112] Step 4: Data processing and formatting: This includes designing the front-end data processing logic to ensure that data from various systems can be correctly displayed on the front-end interface; as well as formatting the data, such as number formatting, date formatting, chart adaptation, etc.
[0113] Step 5: Visual display and interactive function implementation: including the use of chart libraries (such as ECharts, D3.js, etc.) to achieve graphical display of data; and the implementation of user interactive functions such as data filtering, real-time refresh, and viewing detailed information.
[0114] Step 6: Testing and optimization: This includes front-end testing to ensure the accuracy and real-time nature of data display, as well as optimizing the loading speed of the front-end interface and the user interaction experience.
[0115] Step 7, Online and Maintenance: This includes deploying the developed visualization screen to the actual environment and providing it to users; as well as regularly maintaining and updating the system to ensure the continuous and stable operation of the system.
[0116] This embodiment verifies the effectiveness in the front-end large-screen visualization system. The following are the experiments and test results conducted in actual applications, mainly focusing on the front-end performance, user interaction experience, and the real-time and smoothness of data display.
[0117] First, real-time verification of data updates:
[0118] In the experimental scenario: Test the real-time performance of data display of multiple system integration in the front-end visualization interface, especially the update frequency of charts and data panels.
[0119] Exemplary test method: simulate rapid changes in business data, use a regularly updated data source, and measure the delay of front-end page refresh and chart update. Data is directly obtained and displayed through the front-end, simulating different data volumes and update frequencies.
[0120] Experimental results of the traditional solution: Although the data source does not go through the back-end interface, there is usually an update delay, and it takes a long time to refresh the chart or data panel, especially when the data volume is large.
[0121] The experimental results of this technical solution: The front-end uses local caching and data preloading to control data update delay within 0.5-1 second. Each data module, chart, and data display interface refreshes very smoothly, and users can hardly perceive the delay.
[0122] Therefore, the conclusion drawn from this part of the test is: this technical solution significantly improves the real-time performance of data updates and ensures the timely presentation of information in the visualization interface.
[0123] Second, front-end performance and page rendering speed verification:
[0124] In the experimental scenario: Test the performance when rendering large amounts of data in the front-end code, especially the responsiveness of the page in the fast rendering of multiple data charts and dynamic components.
[0125] An example test method is to load different sizes of data on the front end (such as thousands of records or multiple large-size charts), measure the time required for page loading and rendering, and record the freezes during user interaction.
[0126] Experimental results of the traditional solution: The page loading time is long, the rendering speed is slow when the amount of data is large, and there are occasional delays or freezes when interacting with charts (such as zooming in and filtering).
[0127] Experimental results of this technical solution: Through the virtual DOM technology and optimization strategies such as lazy loading and block loading of the Vue framework, the front-end rendering speed is significantly accelerated, the page loading time is controlled within 2 seconds, the interaction is smooth, and there is no obvious lag.
[0128] Therefore, the conclusion drawn from this part of the test is: This technical solution significantly improves the user experience in terms of front-end rendering and user interaction response speed, especially when the amount of data is large, it can still maintain good performance.
[0129] Third, user interaction experience verification:
[0130] In the experimental scenario: test the convenience and fluency of users when operating interactive functions such as data filtering, chart switching, and information query on the front-end large screen.
[0131] Exemplary testing method: Conduct on-site operation tests on multiple users to observe the response time and interaction fluency of users in the process of filtering data, selecting dates, viewing detailed data, etc.
[0132] Experimental results of the traditional solution: When users filter or switch charts, there is a certain delay in the operation, especially when the amount of data increases, the interface response will be stuck.
[0133] Experimental results of this technical solution: The front-end interface is completely implemented based on Vue.js, using technologies such as data caching, dynamic update and lazy loading. All interactive operations (such as filtering, chart switching) respond quickly and interact smoothly, and user operation feedback is real-time.
[0134] Experimental conclusion of this technical solution: This technical solution greatly improves the user's interactive experience, the operation is very smooth, and it adapts to the needs of complex data interaction.
[0135] Fourth, system stability verification:
[0136] In the experimental scenario: Run the test for a long time to observe the stability of the system when it is open for a long time, including the browser memory usage, interface refresh stability, etc.
[0137] Exemplary testing method: Run the system continuously, simulate long-term data display and multiple interactive operations, monitor memory usage and system stability, especially the browser's response speed.
[0138] Experimental results of the traditional solution: After running for a long time, the browser's memory usage is high, and the page occasionally lags or crashes, affecting the user experience.
[0139] Experimental results of this technical solution: Through the efficient memory management and componentized design of the Vue.js framework, the system can run stably for a long time, the memory usage is always kept within a reasonable range, and the page will not freeze or crash.
[0140] Therefore, the conclusion drawn from this part of the test is: this technical solution performs well in terms of system stability and resource management, and can support long-term, large-scale data display without obvious performance degradation.
[0141] Fifth, cross-platform adaptation verification:
[0142] In the experimental scenario: verify the display effect and interactive experience of this technical solution on different devices (such as PC, tablet, mobile phone, etc.).
[0143] Exemplary testing method: Test on multiple devices and different screen sizes to see whether the large-screen visual interface can automatically adapt to different screens and whether user interaction is convenient.
[0144] Experimental results of traditional solutions: poor adaptability to different devices, especially on mobile or small-screen devices, data display and interactive functions are not fully adapted, and some interfaces are not fully displayed.
[0145] Experimental results of this technical solution: Through responsive design and Vue's component technology, the interface can automatically adjust the layout on various devices to ensure that all data and interactive functions can adapt to different screens.
[0146] Therefore, the conclusion drawn from this part of the test is that this technical solution performs well in cross-platform adaptation, ensuring consistent display effects on different devices and a smooth interactive experience.
[0147] In summary, through experiments and verifications on data update real-time, front-end performance, user interaction experience, system stability, and cross-platform adaptation, we can conclude that this technical solution has demonstrated excellent performance and user experience in the front-end large-screen visualization system. In particular, it is significantly superior to existing technical solutions in terms of data update speed, page rendering smoothness, and system stability, and can provide an efficient, stable, and user-friendly data display experience.
[0148] Figure 2 is a structural diagram of a visualization screen system provided by an embodiment of the present disclosure, such as Figure 2 As shown, the system includes: a front-end preset framework 210 and multiple service subsystems 220, the front-end preset framework includes: a data display module 211, a data processing module 212, and a data interaction module 213, wherein:
[0149] The data processing module 212 is used to collect the service subsystems that need to be displayed by the visualization screen system, determine the configuration file of each service subsystem, wherein the configuration file includes data type configuration and display form configuration; based on the front-end preset framework and the configuration file of each service subsystem, determine the display parameters of each service subsystem on the front-end interface, wherein the display parameters include display position and display mode;
[0150] The data display module 211 is used to display the visual operation window corresponding to each service subsystem in the front-end interface based on the display parameters;
[0151] The data processing module 212 is further used to receive transmission data of each service subsystem through the application interface of each service subsystem;
[0152] The data display module 211 is further used to display the transmission data in the visual operation window corresponding to each service subsystem; and
[0153] The data interaction module 213 is used to receive user input operations and respond to the user input operations.
[0154] Figure 3 is a structural diagram of another visualization screen system provided by an embodiment of the present disclosure, such as Figure 3 As shown, the system further includes at least one of the following modules:
[0155] The data processing module 212 is further used to analyze the transmission data based on the display model, and display the analysis results in the visualization operation window corresponding to each service subsystem, wherein the display model is used to determine whether the transmission data is abnormal, predict trends based on the transmission data, or provide an analysis report based on the transmission data; and / or,
[0156] The data display module 211 is further configured to display other data associated with the preset data in response to a user clicking operation on the preset data, wherein the preset data is data with a pre-established data association relationship; and / or,
[0157] The data restriction access module 214 is used to authenticate the user, wherein the user is provided with an available service subsystem; after the user passes the authentication, respond to the user's input operation in the available service subsystem; and / or,
[0158] The data cache module 215 is used to store the transmission data in a data cache; and / or, obtain updated transmission data from the application interface of each service subsystem at a first preset interval; store the updated transmission data in the data cache; obtain the transmission data and / or updated transmission data from the data cache; and / or,
[0159] The layout adjustment module 216 is used to determine the display parameters of each service subsystem on the front-end interface according to the responsive design or the preset terminal layout table; and / or, obtain the user's historical behavior operation at a second preset time interval, and adjust the display parameters of each service subsystem on the front-end interface according to the historical behavior operation; and / or,
[0160] The micro-server docking module 217 is used to provide independent data services to each service subsystem through the micro-server, wherein the micro-server belongs to the back-end system and the data services include testing, development and deployment; based on the interface corresponding to the micro-server, the data services provided by each service subsystem are received and displayed in the visual operation window corresponding to each service subsystem; and / or,
[0161] The edge device docking module 218 is used to process the transmission data through the edge device and receive the processed transmission data.
[0162] Specifically, the data display module 211 is also used to display other data associated with the preset data in response to the user's click operation on the preset data, wherein the preset data is data with a pre-established data association relationship. In the large-screen display, this embodiment adds a multi-dimensional data linkage function. For example, by clicking on a data point, other related data (such as trend charts, maps, tables, etc.) will be automatically updated synchronously so that the user can view relevant detailed information. This linkage effect can help users better understand the relationship between data.
[0163] Therefore, this embodiment can provide users with the opportunity to view information at different levels through multi-dimensional data linkage, obtain a more comprehensive analysis view, and enhance user analysis capabilities; improve the interaction between users and the system through the linkage effect, make data display more vivid and interesting, and enhance interactivity; and enable users to more intuitively understand the connections and impacts between data, reduce the blindness of decision-making, and improve data understanding efficiency.
[0164] With respect to the edge device docking module 218, this embodiment can perform partial data processing and calculation on the edge device for systems that require real-time response (such as IoT device monitoring) to reduce the delay in data transmission to the central server. Combined with a distributed architecture, it supports distributed data processing and storage, enabling the system to efficiently process massive amounts of data and ensure the real-time nature of the data and the high availability of the system. In this way, this embodiment can realize local data processing through edge computing, reduce data transmission delays, improve system response speed, and reduce delays; the distributed architecture improves the fault tolerance of the system, ensures the high availability of the system, and improves distributed fault tolerance; edge computing and distributed architecture can support large-scale data processing and storage, adapt to the growing needs of enterprises, and improve the processing of large-scale data.
[0165] The innovative features of this embodiment include the following:
[0166] First, front-end driven back-end-free architecture design:
[0167] This technical solution uses a large-screen visualization system built entirely on front-end technology (such as the Vue framework), rather than relying on traditional back-end services for data processing and storage. The front end directly obtains data from various system modules (such as CRM, ERP, monitoring systems, etc.) for display, which completely simplifies the system architecture, eliminates the complex back-end dependencies and database management in the traditional architecture, and breaks through the technical bottleneck of tight coupling of back-end code in previous integrated systems.
[0168] Second, real-time data update and seamless integration:
[0169] Traditional system integration solutions rely on back-end data interfaces for real-time data transmission, while this technical solution directly obtains real-time data from each system through the front-end interface, eliminating back-end transmission delays and ensuring instant data updates. Whether it is data information acquisition or display, this solution achieves efficient integration and real-time updates at the front end, greatly improving the real-time and accuracy of data visualization.
[0170] Third, modular and standardized system integration method:
[0171] This technical solution adopts a modular design concept, connecting different business systems (such as CRM, ERP, intelligent monitoring, etc.) to the large-screen display system through standardized API interfaces. This integration method simplifies the process of system access and expansion, making the integration of new modules and functional expansion easier, and has high scalability and flexibility.
[0172] Fourth, efficient front-end data processing and visualization:
[0173] Through the Vue framework and chart libraries (such as ECharts, D3.js, etc.) for front-end data processing and display, it can provide a variety of visualization effects such as rich graphics, charts, maps, etc. This approach not only improves the user experience, but also improves the intuitiveness and interactivity of data display, allowing users to more flexibly operate and view data of different dimensions.
[0174] Fifth, simplified user interaction function:
[0175] In traditional system integration solutions, user interaction usually relies on backend processing and there are many levels of interaction. This technical solution optimizes the user interaction process through front-end modular design and provides a simpler and more intuitive operation interface. Users can quickly filter, view, and refresh data, improving the usability of the system.
[0176] The advantages of this embodiment include the following:
[0177] First, reduce development and maintenance costs:
[0178] Since this technical solution does not rely on complex backend services, it reduces the need for server resources, database management, and backend code development, thereby significantly reducing development costs and operation and maintenance costs. The development cycle is shortened, the maintenance workload is reduced, and the efficiency and economy of the project are greatly improved.
[0179] Second, improve system scalability:
[0180] The modular design of this technical solution makes the integration of new systems or functions more flexible and efficient. Whether it is the docking of new modules or the expansion of existing module functions, it can be completed with a low technical threshold, meeting the ever-changing business needs and enhancing the long-term sustainable development capabilities of the system.
[0181] Third, improve data real-time and accuracy:
[0182] This solution directly obtains real-time data from each system through the front end, avoiding the delay of the intermediate back-end transmission layer and ensuring that the data can be updated and displayed accurately in real time. This is especially important for scenarios with high timeliness requirements such as real-time monitoring and emergency response, and significantly improves the performance and response speed of the system.
[0183] Fourth, optimize user experience:
[0184] This solution uses front-end technology to deeply optimize the display and interaction of data, making it easier for users to interact with the large-screen interface. Without the need for complex back-end operations, users can intuitively view data charts, perform data screening, and interactive operations, which improves the convenience and comfort of user operations.
[0185] Fifth, flexible deployment and maintenance:
[0186] This technical solution does not require cumbersome backend settings, the system deployment is relatively simple, and it is easy to quickly go online in different environments. For companies and teams that need to respond quickly to market changes, this simplified architecture has great advantages. At the same time, the flexibility of the front-end technology also makes the system more efficient in the later update and maintenance process, and can be quickly adjusted and optimized according to needs.
[0187] Sixth, higher security:
[0188] Due to the simplification of the system architecture, especially the removal of heavy back-end services, the data transmission process has a shorter path, avoiding multiple transmissions and complex security verifications between the back-end and the front-end in traditional systems. This helps to improve the overall security of the system and reduce data leakage and potential security risks in the intermediate links.
[0189] According to an embodiment of the present disclosure, the present disclosure also provides an electronic device and a readable storage medium.
[0190] Figure 4A schematic block diagram of an example electronic device 400 that can be used to implement an embodiment of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present disclosure described and / or required herein.
[0191] like Figure 4 As shown, the device 400 includes a computing unit 401, which can perform various appropriate actions and processes according to a computer program stored in a read-only memory (ROM) 402 or a computer program loaded from a storage unit 408 into a random access memory (RAM) 403. In the RAM 403, various programs and data required for the operation of the device 400 can also be stored. The computing unit 401, the ROM 402, and the RAM 403 are connected to each other via a bus 404. An input / output (I / O) interface 405 is also connected to the bus 404.
[0192] A number of components in the device 400 are connected to the I / O interface 405, including: an input unit 406, such as a keyboard, a mouse, etc.; an output unit 407, such as various types of displays, speakers, etc.; a storage unit 408, such as a disk, an optical disk, etc.; and a communication unit 409, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 409 allows the device 400 to exchange information / data with other devices through a computer network such as the Internet and / or various telecommunication networks.
[0193] The computing unit 401 may be a variety of general and / or special processing components with processing and computing capabilities. Some examples of the computing unit 401 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, digital signal processors (DSPs), and any appropriate processors, controllers, microcontrollers, etc. The computing unit 401 performs the various methods and processes described above, such as building a visual screen system method. For example, in some embodiments, the xxx method may be implemented as a computer software program, which is tangibly contained in a machine-readable medium, such as a storage unit 408. In some embodiments, part or all of the computer program may be loaded and / or installed on the device 400 via ROM 402 and / or communication unit 409. When the computer program is loaded into RAM 403 and executed by the computing unit 401, one or more steps of the method for building a visual screen system described above may be performed. Alternatively, in other embodiments, the computing unit 401 may be configured to perform a sound correction method in any other appropriate manner (e.g., by means of firmware).
[0194] Various implementations of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chips (SOCs), complex programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various implementations can include: being implemented in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which can be a special purpose or general purpose programmable processor that can receive data and instructions from a storage system, at least one input device, and at least one output device, and transmit data and instructions to the storage system, the at least one input device, and the at least one output device.
[0195] The program code for implementing the method of the present disclosure may be written in any combination of one or more programming languages. These program codes may be provided to a processor or controller of a general-purpose computer, a special-purpose computer, or other programmable data processing device, so that the program code, when executed by the processor or controller, enables the functions / operations specified in the flow chart and / or block diagram to be implemented. The program code may be executed entirely on the machine, partially on the machine, partially on the machine and partially on a remote machine as a stand-alone software package, or entirely on a remote machine or server.
[0196] In the context of the present disclosure, a machine-readable medium may be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, device, or equipment. A machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or equipment, or any suitable combination of the foregoing. A more specific example of a machine-readable storage medium may include an electrical connection based on one or more lines, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
[0197] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user can provide input to the computer. Other types of devices can also be used to provide interaction with the user; for example, the feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including acoustic input, voice input, or tactile input).
[0198] The systems and techniques described herein may be implemented in a computing system that includes back-end components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes front-end components (e.g., a user computer with a graphical user interface or a web browser through which a user can interact with implementations of the systems and techniques described herein), or a computing system that includes any combination of such back-end components, middleware components, or front-end components. The components of the system may be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: a local area network (LAN), a wide area network (WAN), and the Internet.
[0199] A computer system may include a client and a server. The client and the server are generally remote from each other and usually interact through a communication network. The relationship of client and server is generated by computer programs running on respective computers and having a client-server relationship with each other. The server may be a cloud server, a server of a distributed system, or a server combined with a blockchain.
[0200] It should be understood that the various forms of processes shown above can be used to reorder, add or delete steps. For example, the steps recorded in this disclosure can be executed in parallel, sequentially or in different orders, as long as the desired results of the technical solutions disclosed in this disclosure can be achieved, and this document does not limit this.
[0201] In addition, the terms "first" and "second" are used for descriptive purposes only and should not be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of the features. In the description of the present disclosure, the meaning of "plurality" is two or more, unless otherwise clearly and specifically defined.
[0202] The above is only a specific embodiment of the present disclosure, but the protection scope of the present disclosure is not limited thereto. Any person skilled in the art who is familiar with the technical field can easily think of changes or substitutions within the technical scope disclosed in the present disclosure, which should be included in the protection scope of the present disclosure. Therefore, the protection scope of the present disclosure should be based on the protection scope of the claims.
Claims
1. A method for constructing a visualization screen system, characterized in that: The method comprises: Collect the service subsystems that need to be displayed by the visualization screen system, and determine the configuration file of each service subsystem, wherein the configuration file includes data type configuration and display form configuration; Based on the front-end preset framework and the configuration files of each service subsystem, determine the display parameters of each service subsystem on the front-end interface, wherein the display parameters include display position and display mode; Based on the display parameters, the visual operation windows corresponding to the various service subsystems are displayed in the front-end interface.
2. The method according to claim 1, characterized in that After displaying the visual operation windows corresponding to each service subsystem in the front-end interface, the following steps are also included: receiving transmission data of each service subsystem through the application interface of each service subsystem; displaying the transmission data in the visualization operation window corresponding to each service subsystem; and Receive an input operation from a user, and respond to the input operation from the user.
3. The method according to claim 2, characterized in that The step of displaying the transmission data in the visualization operation window corresponding to each service subsystem includes: Using a chart library to display the transmission data in a visualization operation window corresponding to each service subsystem; and / or, The transmission data is analyzed based on a display model, and the analysis results are displayed in a visualization operation window corresponding to each service subsystem, wherein the display model is used to determine whether the transmission data is abnormal, predict trends based on the transmission data, or provide an analysis report based on the transmission data.
4. The method according to claim 2, characterized in that: After receiving the user's input operation, the method further includes: authenticating the user, wherein the user is provided with an available service subsystem; After the user passes the identity authentication, the user performs an input operation in an available service subsystem in response.
5. The method according to claim 1, characterized in that After receiving the transmission data of each service subsystem through the application interface of each service subsystem, the method further includes: storing the transmission data in a data buffer; and / or obtaining updated transmission data from an application interface of each service subsystem at intervals of a first preset time; storing the updated transmission data in the data buffer; The transmission data and / or updated transmission data are obtained from the data buffer.
6. The method according to claim 1, characterized in that Before displaying the visual operation windows corresponding to each service subsystem in the front-end interface, the method further includes: Based on the front-end preset framework, the transmission data is formatted.
7. The method according to claim 1, characterized in that Before determining the display parameters of each service subsystem on the front-end interface, the following steps are included: Determine the display parameters of each service subsystem on the front-end interface according to the responsive design or the preset terminal layout table; and / or, The user's historical behavior operations are obtained at intervals of a second preset time, and the display parameters of each service subsystem on the front-end interface are adjusted according to the historical behavior operations.
8. The method according to claim 1, characterized in that The method further comprises: Providing independent data services to each service subsystem through a microserver, wherein the microserver belongs to a backend system, and the data services include testing, development and deployment; Based on the interface corresponding to the micro-server, the data services performed by each service subsystem are received and displayed in the visualization operation window corresponding to each service subsystem.
9. A visual screen system, characterized in that: The system includes: a front-end preset framework and multiple service subsystems, wherein the front-end preset framework includes: a data display module, a data processing module, and a data interaction module, wherein: The data processing module is used to collect the service subsystems that need to be displayed by the visualization screen system, determine the configuration file of each service subsystem, wherein the configuration file includes data type configuration and display form configuration; based on the front-end preset framework and the configuration file of each service subsystem, determine the display parameters of each service subsystem on the front-end interface, wherein the display parameters include display position and display mode; The data display module is used to display the visual operation window corresponding to each service subsystem in the front-end interface based on the display parameters; The data processing module is further used to receive transmission data from each service subsystem through the application interface of each service subsystem; The data display module is further used to display the transmission data in the visual operation window corresponding to each service subsystem; and The data interaction module is used to receive user input operations and respond to the user input operations.
10. A visual screen system, characterized in that: The system further comprises at least one of the following modules: The data processing module is further used to display the transmission data in a visualization operation window corresponding to each service subsystem by using a display method of a chart library; and / or, analyze the transmission data based on a display model, and display the analyzed analysis results in the visualization operation window corresponding to each service subsystem, wherein the display model is used to determine whether the transmission data is abnormal, predict trends based on the transmission data, or provide an analysis report based on the transmission data; and / or, The data display module is further used to format the transmission data based on the front-end preset framework before displaying the visual operation window corresponding to each service subsystem in the front-end interface; and / or, in response to a user's click operation on the preset data, display other data associated with the preset data, wherein the preset data is data with a pre-established data association relationship; and / or, a data restriction access module, for authenticating the user, wherein the user is provided with an available service subsystem; after the user passes the identity authentication, responding to the user's input operation in the available service subsystem; and / or, A data cache module is used to store the transmission data in a data cache; and / or, obtain updated transmission data from the application interface of each service subsystem at a first preset time interval; store the updated transmission data in the data cache; obtain the transmission data and / or updated transmission data from the data cache; and / or, A layout adjustment module is used to determine the display parameters of each service subsystem on the front-end interface according to a responsive design or a preset terminal layout table; and / or, obtain the user's historical behavior operation at a second preset time interval, and adjust the display parameters of each service subsystem on the front-end interface according to the historical behavior operation; and / or, A micro-server docking module is used to provide independent data services to each service subsystem through a micro-server, wherein the micro-server belongs to a back-end system and the data services include testing, development and deployment; based on the interface corresponding to the micro-server, the data services provided by each service subsystem are received and displayed in a visual operation window corresponding to each service subsystem; and / or, The edge device docking module is used to process the transmission data through the edge device and receive the processed transmission data.