An optimization system and method for data visualization large-screen display control

Abstract

The application discloses a kind of data visualization large screen display control optimization system and method, comprising: large screen display end, for sending page request information to gateway control unit, obtain the return response result of gateway control unit, render data to the display component of large screen display page;Gateway control unit, for the page request information is identified, to the static resource request and dynamic data request of background server forwarding;Control end, for designing the component of layout large screen display page;Monitoring unit, for collecting the request log and abnormal situation of gateway control unit, visual display is in monitoring page;Background server, for providing the request static page resource of large screen display end, dynamic data request submits data calculation server;The application improves the efficiency of large screen data change, timely response scene application constantly changing demand, while incorporating the ability of permission control, data response monitoring etc., improve the security, reliability of large screen display.

Description

TECHNICAL FIELD

[0001] The present application belongs to the technical field of data visualization and data application, and particularly relates to an optimization system and method for data visualization large-screen display control. BACKGROUND

[0002] In recent years, with the rise of smart parks and smart cities, there are more and more application scenarios for large-screen data visualization. As one of the forms of data visualization technology, data large screen can visualize and display complex multi-source data in a limited page window, and can present real-time business insights hidden behind the ever-changing and complex data, and is widely used in smart cities, smart parks, finance, medical care, urban transportation and other fields.

[0003] In the connection of city index system of data resource layer, the fusion of various intelligent model algorithms, the support of economic operation, social management, market supervision and other typical field scene construction, based on the componentization idea, the city index system model is encapsulated into more specific function component library for page display, and multiple types of dragable visualization view components are provided to realize the free arrangement of large-screen display charts, and the reusability and expandability of the system are improved.

[0004] In the aspect of large-screen design application, the traditional way is: display requirement → component selection design → large-screen deployment display; the problems are: multi-scene large-screen content switching, timely and on-demand adjustment of components, all of which need to be redesigned and deployed, based on browser page full-screen refresh switching or partial component replacement, which may cause white screen or blank screen problems.

[0005] In the aspect of large-screen control, the traditional way is: PC computer → large screen (one machine multiple screens / same screen display); the problems are: PC computer control action is synchronized on the large screen, especially for web page large screen under browser mode, mouse movement or page address jump, etc., which affects the display effect of the large screen.

[0006] The problem of real-time refreshing has been met in many large-screen display design methods, some designs not only can refresh data in real time but also can define the refreshing interval time. However, in the scene of complex data analysis and intelligent model algorithm processing, the data response time often exceeds the real-time or quasi-real-time effect of the large-screen display, and when the data result is wrong, it cannot be corrected and processed in time, especially for some chart display effect requirements, the refreshing of dynamic data needs to be improved. SUMMARY

[0007] In view of the above deficiencies of the prior art, the purpose of the present application is to provide an optimization system and method for data visualization large-screen display control, so as to solve the problems of the prior art, such as the display of the large screen being affected by the same screen control, the white screen of the large screen caused by data delay, the insufficient expandability of the display content of the large screen, and the insufficient data fault tolerance.

[0008] To achieve the above purpose, the technical solution adopted by the present application is as follows:

[0009] The optimization system for data visualization large-screen display control of the present application comprises:

[0010] The large-screen display end is used for sending page request information to the gateway control unit, using HTTP / HTTPS request GET and POST methods to obtain the return response result of the gateway control unit, and rendering data content to the display component of the large-screen display page; the Websock is used to listen to the control instruction request of the gateway control unit in real time, and the display component is switched;

[0011] The gateway control unit is used for identifying the page request information, forwarding the static resource request and the dynamic data request to the background server, and storing the dynamic data result in the Redis cache library; the control end instruction is received, the Websock listening channel is used, and the instruction is forwarded to the large-screen display end;

[0012] The control end is used for designing the component of the large-screen display page, initiating a re-control instruction request, sending the page of the large-screen display end through the gateway control unit, and controlling the display switching and refreshing of the large-screen page component;

[0013] The monitoring unit is used for collecting the request log and abnormal conditions of the gateway control unit, visualizing the display on the monitoring page, and providing gateway execution analysis and performance warning;

[0014] The background server is used for providing the request static page resource of the large-screen display end, submitting the dynamic data request to the data calculation server, and returning the model calculation result.

[0015] Further, the gateway control unit comprises a request response interface module, a request identification module, a response monitoring module, and a configuration service module.

[0016] The request response interface module uniformly receives the page request and the data update request of the front end;

[0017] The request identification module adopts the disassembled request URL path to identify the static resource request and the dynamic data request, initiates the HTTP interface call of the static resource acquisition of the background application server through the HTTP request component, and obtains the page static resource information;

[0018] According to the API interface feedback result of the background application server, it is judged whether it is the first call within the set time limit for the same request, if it is the first call, the result is cached in the dynamic cache area Value value, the request path and parameters are taken as the Key value of the cache, and the dynamic data result is returned to the front-end page;

[0019] The response monitoring module is used for dynamically analyzing the dynamic data update time limit of the large-screen page through the request frequency, response time, dynamic cache area access frequency of static resources and dynamic data, and dynamically adjusting the set time limit of the dynamic cache area through the analysis result, initiating a dynamic data update request, and updating the cache area data.

[0020] In addition, response logs and warning problem log information are recorded and written into a log file library.

[0021] The configuration service module dynamically configures the display components of the large-screen display page, initiates a page control request by redefining the update replacement of the existing display components, and timely obtains page configuration update information of the control end to control the replacement and refresh of specific display components.

[0022] The permission control module identifies the source IP address, user authentication and URL request rule of the page request, returns limited response information to the request without authorization access, so as to protect the resource security of the background application server.

[0023] Further, the control end comprises a monitoring page module, a control page module and a large-screen synchronization page module.

[0024] The monitoring page module realizes visual display and editing of the configuration information and access authorization control information of the request proxy, and submits the configuration result in the form of JSON configuration data to the gateway control unit in the form of interface access mode.

[0025] The control page module adopts a zero-code visual component drag-and-drop layout mode to configure the display position, component and style of the large-screen framework, and submits the configuration result in the form of JSON configuration data to the gateway control unit in the form of interface access mode.

[0026] The monitoring data and log information of the gateway control unit are obtained and visually displayed on the monitoring page, the cache acquisition time limit parameter can be adjusted, and abnormal response processing can be performed.

[0027] The large-screen synchronization page module synchronizes the display page content of the large screen, triggers the response result of the dynamic data interface of the gateway control unit, controls the start and page update of the large-screen display page, and performs large-screen synchronization monitoring.

[0028] An optimization method for data visualization large-screen display control according to the above system comprises the following steps:

[0029] 1) Receive the page request of large screen display;

[0030] 2) Route the page request according to the standard of WEB page and the access rule of business data, and convert the protocol;

[0031] 3) Adopt the disassembled request URL path to identify the static resource request and dynamic data request, initiate the HTTP interface call of static resource acquisition of the back-end application server through the HTTP request component, acquire the page static resource information (including HTML, JS script, picture, etc.), and feedback to the front-end large screen display page;

[0032] 4) Initiate the dynamic data call request to the back-end application server API interface;

[0033] 5) According to the feedback result of the API interface of the back-end application server, judge whether it is the first call within the set time limit for the same request, if it is the first call, cache the result in the dynamic cache area Value value, and the request path and parameter are used as the Key value of the cache, and the dynamic data result is returned to the front-end large screen display page; if it is not the first call (i.e. there is cached result in the dynamic cache area), directly return the cached result to the front-end large screen page before calling the API interface;

[0034] 6) Dynamically analyze the dynamic data update time limit of the large screen page according to the request frequency, response time, dynamic cache area access frequency of static resource and dynamic data, and dynamically adjust the set time limit of the dynamic cache area according to the analysis result, and initiate the dynamic data update request to update the cache area data;

[0035] 7) Dynamically configure the display components of the large screen display page, redefine the data logic change of the existing display components, and initiate the page control request; the large screen display page acquires the page configuration update information of the control end in time, and controls the switching and refreshing of specific display components;

[0036] 8) The control end realizes the visual display and editing of the configuration information and access authorization control information of the request proxy, submits the configuration result to the gateway control unit in the form of interface access mode, and submits the configuration data in the form of JSON;

[0037] 9) Adopt the drag-and-drop layout mode of zero-code visual components to configure the display position, components and style of the large screen framework, submit the configuration result to the gateway control unit in the form of interface access mode, and submit the configuration data in the form of JSON;

[0038] 10) Real-time acquire the monitoring data and log information of the gateway control unit, display the visual data result on the monitoring page, and adjust the cache acquisition time limit parameter and perform abnormal response processing;

[0039] 11) Synchronize the large screen display page content, trigger the gateway control unit to dynamically cache the response result of the dynamic data interface, control the start and page update of the large screen display page, and perform large screen synchronization monitoring.

[0040] Further, the step 3) specifically further comprises: identifying the source IP address of the page request, user authentication, URL request rules, returning limited response information for unauthorized access requests, to ensure the security of the background application server resources.

[0041] Further, in step 4), the dynamic data calling request is initiated by accessing the API interface corresponding to the response provided by the background application server through the REST HTTP, gRPC, and GraphQL components.

[0042] Further, in step 5), when the Key value of the same API interface request exists within the dynamic cache area, the dynamic data calling request is not initiated to the background application server, and the Value value of the dynamic cache area is directly returned to the front-end large screen display page.

[0043] Further, the abnormal access of static or dynamic resources is sent to the background monitoring page in real time through websock communication, improving the dynamic monitoring response timeliness and problem positioning ability of the large screen management and maintenance technical personnel.

[0044] The beneficial effects of the present application are:

[0045] The present application improves the large screen data change efficiency, timely responds to the changing needs of scene applications, and at the same time integrates permission control, data response monitoring and other capabilities, improves the security and reliability of the large screen display, and combines the micro-frontend architecture of the configuration display component and the micro-service architecture mode introduced by the backend, improves the content scalability of the large screen application and the fault tolerance of the data service, strengthens the timeliness, reduces information lag, and enhances user experience. BRIEF DESCRIPTION OF DRAWINGS

[0046] Figure 1 The principle diagram in the system embodiment of the present application. DETAILED DESCRIPTION

[0047] In order to facilitate the understanding of those skilled in the art, the present application will be further described below in conjunction with the embodiments and drawings, and the content mentioned in the embodiments is not a limitation of the present application.

[0048] Referring to Figure 1 The present application is a data visualization large screen display control optimization system, which comprises:

[0049] The large-screen display end is configured to send page request information to the gateway control unit, use HTTP / HTTPS request GET and POST methods to obtain the return response result of the gateway control unit, and render data content to the display component of the large-screen display page; the application Websock is configured to listen to the control instruction request of the gateway control unit in real time and switch the display component;

[0050] The gateway control unit is configured to identify the page request information, forward static resource requests and dynamic data requests to a background server, and store dynamic data results in a Redis cache library; receive control end instructions, forward the instructions to the large-screen display end through a Websock listening channel, and forward the instructions to the large-screen display end;

[0051] The gateway control unit comprises a request response interface module, a request identification module, a response monitoring module, and a configuration service module.

[0052] The request response interface module uniformly receives page requests and data update requests from the front end.

[0053] The request identification module identifies static resource requests and dynamic data requests by disassembling request URL paths, initiates HTTP interface calls for static resource acquisition of the background application server through an HTTP request component, and obtains page static resource information.

[0054] According to the API interface feedback result of the background application server, it is judged whether it is the first call within the set time limit, if it is the first call, the result is cached in the dynamic cache area Value value, the request path and the parameter are used as the Key value of the cache, and the dynamic data result is returned to the front end page;

[0055] The response monitoring module is configured to dynamically analyze the dynamic data update time limit of the large-screen page through the request frequency, response time, and dynamic cache area access frequency of static resources and dynamic data, dynamically adjust the set time limit of the dynamic cache area according to the analysis result, initiate a dynamic data update request, and update the cache area data.

[0056] In addition, response logs and warning problem log information are recorded and written into a log file library.

[0057] The configuration service module is configured to dynamically configure the display component of the large-screen display page, initiate a page control request by redefining the update and replacement of the existing display component, obtain page configuration update information of the control end in a timely manner, and control the replacement and refresh of specific display components.

[0058] The permission control module is configured to identify the source IP address, user authentication, and URL request rule of the page request, return limited response information to unauthorized access requests, and protect the security of the resources of the background application server.

[0059] The control terminal is used for designing the components of the layout large-screen display page, initiating a re-control instruction request, and sending the page of the large-screen display terminal to the gateway control unit to control the large-screen page component display switching and refreshing.

[0060] The monitoring unit is used for collecting the request log and abnormal conditions of the gateway control unit, visualizing the display on the monitoring page, and providing gateway execution analysis and performance warning.

[0061] The background service terminal is used for providing the request static page resource of the large-screen display terminal, submitting the dynamic data request to the data calculation server, and returning the model calculation result.

[0062] The control terminal comprises a monitoring page module, a control page module, and a large-screen synchronization page module.

[0063] The monitoring page module realizes the visual display and editing of the configuration information and access authorization control information of the request proxy, and submits the configuration result in the form of JSON format configuration data to the gateway control unit in the interface access mode.

[0064] The control page module adopts the drag-and-drop layout mode of zero-code visual components, configures the display position, components, and style of the large-screen framework, and submits the configuration result in the form of JSON format configuration data to the gateway control unit in the interface access mode.

[0065] The monitoring data and log information of the gateway control unit are visualized on the monitoring page, the cache acquisition time limit parameter can be adjusted, and abnormal response processing can be performed.

[0066] The large-screen synchronization page module synchronizes the large-screen display page content, triggers the response result of the dynamic data interface of the gateway control unit dynamic cache, controls the start and page update of the large-screen display page, and performs large-screen synchronization monitoring.

[0067] An optimization method for data visualization large-screen display control of the application is based on the above system, and the steps are as follows:

[0068] 1) receiving a page request of the large-screen display;

[0069] 2) routing the page request according to the standard and business data access rule of the WEB page, and converting the protocol;

[0070] 3) adopting the disassembled request URL path to identify the static resource request and the dynamic data request, initiating the HTTP interface call of the static resource acquisition of the background application server through the HTTP request component, acquiring the page static resource information (including HTML, JS script, picture, etc.), and feeding back to the front-end large-screen display page;

[0071] 4) Initiate a dynamic data call request to the background application server API interface;

[0072] 5) According to the feedback result of the API interface of the background application server, judge whether it is the first call within the set time limit for the same request, if it is the first call, cache the result in the dynamic cache area Value value, the request path and the parameter as the cache Key value, and return the dynamic data result to the front-end large screen display page; if it is not the first call (i.e. there is a cached result in the dynamic cache area), directly return the cached result to the front-end large screen page before calling the API interface;

[0073] 6) Dynamically analyze the dynamic data update time limit of the large screen page according to the request frequency, response time, dynamic cache area access frequency of static resources and dynamic data, and dynamically adjust the set time limit of the dynamic cache area according to the analysis result, initiate a dynamic data update request, and update the cache area data;

[0074] 7) Dynamically configure the display components of the large screen display page, redefine the data logic change of the existing display components, and initiate a page control request; the large screen display page obtains the page configuration update information of the control end in time, and controls the switching and refreshing of specific display components;

[0075] 8) The control end realizes visual display and editing of the configuration information and access authorization control information of the request proxy, submits the configuration result to the gateway control unit in the form of interface access mode, and submits the configuration data in the form of JSON;

[0076] 9) Use the drag-and-drop layout method of zero-code visual components to configure the display position, components and style of the large screen framework, submit the configuration result to the gateway control unit in the form of interface access mode, and submit the configuration data in the form of JSON;

[0077] 10) Real-time acquisition of monitoring data and log information of the gateway control unit, display of visual data results on the monitoring page, adjustment of cache acquisition time limit parameters, and abnormal response processing;

[0078] 11) Synchronize the content of the large screen display page, trigger the gateway control unit to dynamically cache the response result of the dynamic data interface, control the start and page update of the large screen display page, and perform large screen synchronization monitoring.

[0079] Further, the step 3) further comprises: identifying the source IP address, user authentication and URL request rule of the page request, returning limited response information to the unauthorized access request to protect the security of the background application server resources.

[0080] Specifically, the step 4) is accessed by REST HTTP, gRPC, GraphQL component access call, corresponding API interface of the response provided by the background application server, initiates the dynamic data call request.

[0081] Specifically, the Key value of the same API interface request in the step 5) is the dynamic data within the validity period when existing in the dynamic cache area, then the dynamic data call request is not initiated to the background application server, and the Value value of the dynamic cache area is directly returned to the front-end large screen display page.

[0082] Specifically, the abnormal access of static or dynamic resources is sent to the background monitoring page in real time through websock communication, so that the dynamic supervision response timeliness and problem positioning ability of the large screen management and maintenance technical personnel are improved.

[0083] The application has many specific application ways, and the above description is only the preferred embodiment of the application, and it should be pointed out that, for ordinary technical personnel in the technical field, some improvements can be made without departing from the principle of the application, and these improvements should be regarded as the protection scope of the application.

Claims

1. An optimization system for data visualization dashboard control, characterized in that, The application relates to a gateway control unit and a control terminal for a large-screen display terminal. The large-screen display terminal comprises a large-screen display terminal, a gateway control unit and a control terminal. The large-screen display terminal is used for sending page request information to the gateway control unit, using HTTP / HTTPS request GET and POST methods, obtaining the return response result of the gateway control unit, rendering data content to a display component of a large-screen display page, and applying a Websock real-time connection to listen to the control instruction request of the gateway control unit and switch the display component. The gateway control unit is used for identifying the page request information, forwarding static resource requests and dynamic data requests to a background server, storing dynamic data results in a Redis cache library, receiving control terminal instructions, forwarding the instructions to the large-screen display terminal through a Websock listening channel, and sending the page of the large-screen display terminal to the control terminal. The control terminal is used for designing a layout of a display component of a large-screen display page, initiating a re-control instruction request, and controlling the display switching and refreshing of a large-screen page component. The monitoring unit is used for collecting request logs and abnormal conditions of the gateway control unit, visually displaying the request logs and abnormal conditions on a monitoring page, and providing gateway execution analysis and performance early warning. The background server is used for providing a requested static page resource of the large-screen display terminal, submitting a dynamic data request to a data calculation server, and returning a model calculation result. The gateway control unit comprises a request response interface module, a request identification module, a response monitoring module and a configuration service module. The request response interface module uniformly receives page requests and data update requests from the front end. The request identification module adopts a request URL path disassembly method to identify static resource requests and dynamic data requests, initiates an HTTP interface call for static resource acquisition of a background application server through an HTTP request component, and obtains page static resource information. According to the API interface feedback result of the background application server, it is judged whether the same request is a first call within a set time limit. If the request is a first call, the result is cached in a dynamic cache area value, the request path and parameters are used as a cache key value, and the dynamic data result is returned to the front end page. The response monitoring module is used for dynamically analyzing the dynamic data update time limit of a large-screen page according to the request frequency, response time and dynamic cache area access frequency of static resources and dynamic data, dynamically adjusting the set time limit of the dynamic cache area according to the analysis result, initiating a dynamic data update request, and updating the cache area data.

2. The system for optimization of control of data visualization dashboards according to claim 1, characterized in that, The configuration service module dynamically configures display components of a large-screen display page, initiates a page control request by redefining the update and replacement of existing display components, timely obtains page configuration update information of the control terminal, and controls the replacement and refreshing of specific display components. The permission control module identifies the source IP address, user authentication and URL request rule of a page request, returns limited response information to unauthorized access requests, and the like. The control terminal comprises a monitoring page module, a control page module and a large-screen synchronization page module. The monitoring page module realizes visual display and editing of configuration information and access authorization control information of a request proxy, submits configuration results in an interface access mode, and submits JSON format configuration data to the gateway control unit. The control page module is used for designing a layout of a display component of a large-screen display page, initiating a re-control instruction request, and controlling the display switching and refreshing of a large-screen page component. The large-screen synchronization page module is used for synchronizing the display component of the large-screen display page with the control terminal. The control page module adopts a zero-code visual component drag-and-drop layout method to configure the display position, component and style of the large screen framework, and submits the configuration data in JSON format to the gateway control unit in an interface access mode. The monitoring data and log information of the gateway control unit are acquired and visualized on the monitoring page. The cache acquisition time limit parameter can be adjusted, and abnormal response processing can be performed. The large screen synchronization page module synchronizes the display page content of the large screen, triggers the gateway control unit to dynamically cache the response results of the dynamic data interface, controls the startup and page update of the large screen display page, and performs large screen synchronization monitoring.

3. An optimization method for data visualization big screen display control, based on the system of any one of claims 1-2, characterized in that, The steps are as follows: 1) Receive a page request for large screen display; 2) Perform routing request and protocol conversion according to the WEB page standard and business data access rules; 3) Adopt the request URL path disassembly method to identify static resource requests and dynamic data requests, initiate an HTTP interface call to the background application server through the HTTP request component to obtain static resource information, and feed back to the front-end large screen display page; 4) Initiate a dynamic data call request to the background application server API interface; 5) According to the feedback result of the background application server API interface, determine whether it is the first call within the set time limit for the same request. If it is the first call, cache the result in the dynamic cache area Value value, and request the path and parameters as the cache Key value. At the same time, return the dynamic data result to the front-end large screen display page; If it is not the first call, directly return the cache result to the front-end large screen page before calling the API interface; 6) Dynamically analyze the dynamic data update time limit of the large screen page according to the request frequency, response time and dynamic cache area access frequency of static resources and dynamic data, and dynamically adjust the set time limit of the dynamic cache area according to the analysis result, initiate a dynamic data update request, and update the cache area data; 7) Dynamically configure the display components of the large screen display page, redefine the data logic changes of the existing display components, and initiate a page control request; the large screen display page acquires the page configuration update information of the control end in time, and controls the switching and refreshing of specific display components; 8) The control end realizes visual display and editing of the configuration information and access authorization control information of the request proxy, and submits the configuration data in JSON format to the gateway control unit in an interface access mode; 9) Adopt a zero-code visual component drag-and-drop layout method to configure the display position, component and style of the large screen framework, and submit the configuration data in JSON format to the gateway control unit in an interface access mode; 10) Real-time acquisition of the monitoring data and log information of the gateway control unit, visual display of the data results on the monitoring page, adjustment of the cache acquisition time limit parameter, and abnormal response processing; 11) Synchronize the display page content of the large screen, trigger the gateway control unit to dynamically cache the response results of the dynamic data interface, control the startup and page update of the large screen display page, and perform large screen synchronization monitoring.

4. The method of claim 3, wherein, The step 3) further comprises: identifying the source IP address of the page request, user authentication, URL request rules, returning a restricted response information for unauthorized access requests, and ensuring the security of the background application server resources.

5. The method of claim 3, wherein, In the step 4), the dynamic data calling request is initiated by accessing and calling the REST HTTP, gRPC, GraphQL components corresponding to the API interface provided by the background application server.

6. The method of claim 3, wherein, In the step 5), when the Key value of the same API interface request exists in the dynamic cache area within the effective period, the dynamic data calling request is not initiated to the background application server, and the Value value in the dynamic cache area is directly returned to the front-end large-screen display page.

Images