Real-time large-screen visualization optimization method and device for automatically adapting screen and terminal

Abstract

The invention discloses a real-time large screen visualization optimization method and device for automatically adapting to a screen and a terminal, and the method comprises the steps: setting the display content of a visualization large screen according to requirements, and determining the resolution size of the display content; carrying out multi-screen automatic adaptation on the display content by adopting a mode of combining expansibility and dynamic calculation, and carrying out equal-ratio zooming and self-adaptive filling; in a large-screen display process, rendering real-time updated data by adopting a network socket technology; the front-end billboard interface is controlled to carry out data visual rendering through an enterprise-level chart library, so that data can be displayed in a chart form; and monitoring each item of data of the visual interface of the billboard, and when the corresponding item of data reaches a corresponding early warning threshold value, performing interface early warning display, and sending a short message notification at the same time to perform real-time early warning. The method can automatically adapt to large screens with various resolutions, updates various data of the large-screen board in real time, and displays the data in a chart form, so that the effect of real-time early warning is achieved.

Description

Technical Field

[0001] The present invention relates to the technical field of intelligent terminals, and particularly relates to a real-time large-screen visualization optimization method, device, intelligent terminal and storage medium for automatically adapting to screens. Background Art

[0002] Large-screen visualization is widely used in fields such as urban operation centers, commerce, finance, manufacturing, and exhibitions. It can intuitively display data and help decision-makers quickly understand complex information, becoming an important tool for data-driven decision-making.

[0003] In the prior art, in the face of large-screen displays with various resolutions nowadays, visualization dashboards of corresponding sizes are developed for each screen, resulting in high development costs and high labor costs.

[0004] Therefore, the prior art still needs to be improved and developed. Summary of the Invention

[0005] The technical problem to be solved by the present invention is to provide a real-time large-screen visualization optimization method, device, intelligent terminal and storage medium for automatically adapting to screens. The real-time large-screen visualization optimization method of the present invention uses a visualization dashboard that automatically adapts to various screens, which can greatly reduce development costs.

[0006] The technical solution adopted by the present invention to solve the problem is as follows:

[0007] A real-time large-screen visualization optimization method for automatically adapting to screens, which includes:

[0008] Set the display content of the visualization large screen according to requirements, and determine the resolution size of the display content;

[0009] Adopt a combination of extensibility and dynamic calculation to automatically adapt the display content to multiple screens, and perform equal ratio scaling and adaptive filling to automatically adapt to large screens with different resolutions;

[0010] During the large-screen display process, use the WebSocket network socket technology to render the real-time updated data and update the data of each item on the large-screen dashboard in real time;

[0011] And control the front-end dashboard interface to perform visual rendering of the data through the Echarts enterprise-level chart library for display in the form of charts;

[0012] Monitor the data of each item on the dashboard visualization interface. When the data of the corresponding item reaches the corresponding warning threshold, perform an interface warning display and send a text message notification at the same time for real-time warning.

[0013] The described real-time large-screen visualization optimization method for automatic screen adaptation, wherein, before the step of monitoring the data items on the dashboard visualization interface and when the corresponding data item reaches the corresponding warning threshold:

[0014] Pre-set established warning rules for each chart in advance. The warning rules include: data trend anomaly warning threshold, data anomaly warning threshold, heat map warning threshold, scatter plot distribution anomaly warning threshold, and warning threshold of the sensor.

[0015] The described real-time large-screen visualization optimization method for automatic screen adaptation, wherein the step of automatically adapting the display content to multiple screens by using a combination of scalability and dynamic calculation, and performing equal ratio scaling and adaptive filling to automatically adapt to large screens with different resolutions includes:

[0016] Use a combination of scale scalability and dynamic calculation to automatically adapt the display content to multiple screens, and calculate a scaling ratio based on the size of the display content and the size of the current screen;

[0017] Control the entire page to be scaled proportionally according to the calculated scaling ratio;

[0018] On the basis of equal ratio scaling, perform adaptive filling, and increase the width or height to the right or downwards as needed to control the display content to fill the full screen display.

[0019] The described real-time large-screen visualization optimization method for automatic screen adaptation, wherein the step of automatically adapting the display content to multiple screens by using a combination of scalability and dynamic calculation, and performing equal ratio scaling and adaptive filling to automatically adapt to large screens with different resolutions further includes:

[0020] Calculate the height and width of the browser, and dynamically adjust the scaling ratio according to the aspect ratio of the display content, and control the entire page to be scaled proportionally;

[0021] Dynamically adjust the layout when the screen size changes by monitoring the resize event to ensure adaptive filling when the window size changes.

[0022] The described real-time large-screen visualization optimization method for automatic screen adaptation, wherein the step of rendering real-time updated data by using the WebSocket network socket technology and real-time updating the data items on the large-screen dashboard during the large-screen display process includes:

[0023] During the large-screen display process, when the data changes, control the use of the WebSocket network socket technology to control the server to actively push data to the front end;

[0024] Control the front end to update data in real time for rendering, so as to update the data of the large screen dashboard in real time.

[0025] The real-time large screen visualization optimization method for automatic screen adaptation, wherein, during the large screen display process, the WebSocket network socket technology is adopted to render the real-time updated data, and the steps of updating the data of the large screen dashboard in real time further include:

[0026] When a large amount of data needs to be rendered, control the use of a virtual scroll list to only render the elements within the visible area;

[0027] When a scroll operation is detected, control the dynamic loading and unloading of data.

[0028] The real-time large screen visualization optimization method for automatic screen adaptation, wherein, for monitoring the data of the dashboard visualization interface, when the data of the corresponding item reaches the corresponding warning threshold, the steps of performing interface warning display and simultaneously sending a text message notification for real-time warning include:

[0029] Monitor the data of the dashboard visualization interface. When the data of the corresponding item reaches the corresponding warning threshold, control to highlight the current warning information in the form of a warning light, a flashing icon or text to attract the user's attention;

[0030] And control the large screen to receive user operation instructions and interact with the data by clicking and dragging methods;

[0031] When the data of the corresponding item reaches the corresponding warning threshold, perform interface warning display and simultaneously send a text message notification for real-time warning.

[0032] A real-time large screen visualization optimization device for automatic screen adaptation, wherein the device includes:

[0033] A preset module for presetting established warning rules for each chart, and the warning rules include: data trend abnormal warning threshold, data abnormal warning threshold, heat map warning threshold, scatter plot distribution abnormal warning threshold, warning threshold of the sensor;

[0034] A setting and determination module for setting the display content of the visualization large screen according to requirements and determining the resolution size of the display content;

[0035] An automatic adaptation module for automatically adapting the display content to multiple screens in a combined manner of scalability and dynamic calculation, and performing equal ratio scaling and adaptive filling to automatically adapt to large screens with different resolutions;

[0036] Update rendering module, which is used to control the use of WebSocket network socket technology during the large-screen display process to render real-time updated data and real-time update the data of each item on the large-screen dashboard;

[0037] Chart rendering module, which is used to control the front-end dashboard interface to perform visual rendering of data through the Echarts enterprise-level chart library and display it in the form of charts;

[0038] Early warning module, which is used to monitor the data of each item on the dashboard visual interface. When the data of the corresponding item reaches the corresponding early warning threshold, an interface early warning display is performed, and at the same time, a text message notification is sent for real-time early warning.

[0039] An intelligent terminal, which includes a memory and one or more programs. One or more programs are stored in the memory and are configured to be executed by one or more processors. The one or more programs include those for executing the method described in any one of the above.

[0040] A computer-readable storage medium, wherein when the instructions in the storage medium are executed by the processor of an electronic device, the electronic device can execute the method described in any one of the above.

[0041] Advantages of the present invention: The present invention provides a real-time large-screen visualization optimization method, device, intelligent terminal and storage medium for automatic screen adaptation. The present invention provides a real-time large-screen visualization optimization method for automatic screen adaptation, which can automatically adapt to large screens of various resolutions, real-time update the data of each item on the large-screen dashboard, display it in the form of charts, and achieve the effect of real-time early warning. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] In order to more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the following drawings are only some embodiments recorded in the present invention. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings.

[0043] Figure 1 It is a flowchart of the real-time large-screen visualization optimization method for automatic screen adaptation provided in Embodiment 1 of the present invention.

[0044] Figure 2 It is a flowchart of the real-time large-screen visualization optimization method for automatic screen adaptation provided in Embodiment 2 of the present invention.

[0045] Figure 3Principle block diagram of an embodiment of an automated screen adaptation real-time large-screen visualization optimization device provided by the present invention.

[0046] Figure 4 It is the internal structure principle block diagram of an intelligent terminal provided by an embodiment of the present invention. Detailed implementation manners

[0047] To make the objectives, technical solutions and advantages of the present invention clearer and more definite, the following further describes the present invention in detail with reference to the accompanying drawings and by way of examples. It should be understood that the specific examples described herein are only used to explain the present invention and are not used to limit the present invention.

[0048] Large-screen visualization is widely used in fields such as urban operation centers, commerce, finance, manufacturing, and exhibitions. It can visually display data, help decision-makers quickly understand complex information, and become an important tool for data-driven decision-making. Facing large-screen displays with various resolutions nowadays, developing visualization dashboards of corresponding sizes for each screen will result in high development costs.

[0049] Therefore, the present invention provides a real-time large-screen visualization optimization method for automatically adapting to screens. The visualization dashboard of the present invention that automatically adapts to various screens can greatly reduce development costs. In various fields, only by updating data in real time can decision-makers make corresponding adjustments faster according to the data. Therefore, this article will introduce a real-time large-screen visualization optimization method for automatically adapting to screens.

[0050] As Figure 1 shown, a real-time large-screen visualization optimization method for automatically adapting to screens according to Embodiment 1 of the present invention includes the following steps:

[0051] Step S100, preset established warning rules for each chart, and the warning rules include: data trend anomaly warning threshold, data anomaly warning threshold, heat map warning threshold, scatter plot distribution anomaly warning threshold, and warning threshold of sensors.

[0052] Large-screen visualization is widely used in fields such as urban operation centers, commerce, finance, manufacturing, and exhibitions. It can visually display data. Before the specific implementation of the embodiment of the present invention, warning rules need to be set for each chart displayed by large-screen visualization so as to be able to detect and respond to data anomalies in a timely manner. These rules include:

[0053] Data trend anomaly warning threshold: used to monitor whether the data trend deviates from the normal range.

[0054] Data anomaly warning threshold: used to trigger a warning when a data point deviates from the normal value.

[0055] Heat map warning threshold: used for setting the threshold for displaying hot spots in a specific area.

[0056] Scatter plot distribution anomaly warning threshold: used to monitor the distribution of data points in the scatter plot and identify abnormal situations.

[0057] Warning threshold of the sensor: used for the warning mechanism when the sensor data exceeds the set value.

[0058] In the embodiments of the present invention, by setting warning rules, potential problems can be quickly identified and timely responses can be made to avoid more serious consequences. And it can ensure that data trends and anomalies are continuously monitored, improving the reliability of decision-making.

[0059] Step S200: Set the display content of the visualization large screen according to requirements and determine the resolution size of the display content;

[0060] In the embodiments of this step, the content of the visualization large screen is set according to actual needs, and the resolution and size of the screen are determined. The display content includes the design of the large screen design draft. Determine the resolution size of the design draft, such as a resolution of 1920*1080, etc.

[0061] And select the charts, data, and information formats to be displayed to improve the readability and usage efficiency of the information.

[0062] For example, in a production monitoring center, it is possible to select to display the real-time efficiency, failure rate, and equipment status of the production line on the large screen and ensure that this information can be clearly displayed on the large screen. Set an appropriate resolution (such as the full high-definition format of 1920x1080 pixels) for each chart based on the content.

[0063] The embodiments of this step facilitate users to understand the data faster and improve the decision-making efficiency through reasonable display settings; and appropriate resolution and chart design can improve the visualization effect and attract users to pay attention to important information.

[0064] Step S300: Adopt a combination of scalability and dynamic calculation to automatically adapt the display content to multiple screens, and perform equal ratio scaling and adaptive filling to automatically adapt to large screens with different resolutions;

[0065] In the embodiments of this step, a combination of scalability and dynamic calculation is adopted to ensure that the displayed content can automatically adapt to different screen sizes. Performing equal ratio scaling and adaptive filling can make the visualization content maintain a good display effect on large screens with different resolutions.

[0066] For example, there may be multiple monitoring screens for displaying data at the same time. If a certain chart needs to be displayed as 1000x800 pixels on the main screen, on other screens, the chart will be scaled and adjusted according to their respective resolutions to fit various sizes while maintaining the ratio unchanged to ensure that the information is not distorted.

[0067] The advantage of this is that no matter which screen size is used, the information can be kept consistent, enhancing the user experience. And the automatic adaptation function reduces the workload of manual adjustment, enabling users to focus more on the core data and decisions. The present invention can effectively improve the efficiency and accuracy of data visualization and promote a faster decision-making process.

[0068] Further, the step S300 specifically includes:

[0069] S301. Adopt a combination of scale scalability and dynamic calculation to automatically adapt the display content to multiple screens, and calculate a scaling ratio according to the size of the display content and the size of the current screen;

[0070] In the embodiment of this step, the scale (scalability) technology is combined with the dynamic calculation method to ensure that the display content can be self-adapted on multiple screens. That is, the present invention will automatically calculate a scaling ratio according to the size of the content to be displayed (for example, the original size of a chart or panel) and the size of the current screen (for example, a large screen with different resolutions) to ensure that the content can maintain good readability and aesthetics on different display devices.

[0071] During specific implementation, first, the present invention needs to determine the original size of the content to be displayed, such as width and height. Obtain the screen size: Then, obtain the resolution and size of the current display device, such as width and height.

[0072] Then calculate the scaling ratio: Use a formula to calculate the scaling ratio, for example:

[0073]

[0074] Finally, apply the calculated scaling ratio to the content to adjust its display size while ensuring that the ratio of the content remains unchanged.

[0075] For example, when there is a visualization large screen, the original content size is 800x600 pixels, and the current screen resolution is 1920x1080 pixels.

[0076] 1. Content width = 800px, content height = 600px.

[0077] 2. Target screen width = 1920px, target screen height = 1080px.

[0078] 3. First, calculate the scaling ratio of the width:

[0079] 1920 / 800 = 2.4;

[0080] Then, calculate the scaling ratio of the height:

[0081] 1080 / 600 = 1.8;

[0082] 4. Take the minimum value, that is, the scaling ratio is 1.8;

[0083] 5. Therefore, the size of the new displayed content is:

[0084] New width = 800 × 1.8 = 1440px, new height = 600 × 1.8 = 1080px;

[0085] In this way, the present invention can automatically adapt to different screen sizes and resolutions, avoid the trouble of manual adjustment, and improve the convenience of operation. And the visual performance of the present invention on different display devices can be kept consistent, without being deformed or distorted due to scaling, ensuring that users can receive information completely. Moreover, when users view information on different devices, they will not suffer from visual fatigue due to poor display effects, which helps to improve the overall user experience. Furthermore, the present invention automatically calculates the scaling ratio, saving the time and effort of manual adjustment, making the information display faster and more efficient.

[0086] S302. According to the calculated scaling ratio, control the equal ratio scaling of the entire page;

[0087] In traditional development, the front end usually uses solutions such as vh, vw, rem, etc. for adaptation, but there will be defects such as the need to separately adapt fonts, spacing, etc. The present invention adopts an automatic adaptation large screen solution, specifically using the method of scale (scalability) + dynamic calculation to complete the scaling of the corresponding ratio, achieving the effect of adapting to various large screens.

[0088] Among them, regarding the equal ratio scaling, the present invention uses the transform: scale() method to perform equal ratio scaling, that is, the present invention will calculate a scaling ratio according to the size of the content to be displayed (i.e., the design draft) and the size of the current screen, and then scale the entire page to ensure that there is no blank space due to different screen ratios.

[0089] In specific implementation, in this step, according to the scaling ratio calculated in the previous step, the entire page is scaled proportionally. Proportional scaling means that while maintaining the original content ratio and shape, the sizes of all elements in the page are adjusted according to a determined ratio. That is, in the embodiments of the present invention, whether it is text, charts, or other visual components, they will all be uniformly adjusted according to this scaling ratio to ensure consistent display on different screen sizes and avoid visual chaos caused by ratio imbalance.

[0090] Specifically, regarding confirming the scaling ratio, the scaling ratio calculated in the previous steps can be used. Then apply the scaling ratio, that is, apply this ratio to the height and width of all elements in the page.

[0091] The specific operations are as follows: Set the new width and new height of each element:

[0092] New width = original width × scaling ratio; New width = original width × scaling ratio;

[0093] New height = original height × scaling ratio; New height = original height × scaling ratio;

[0094] Then update the layout and position. Specifically, after updating the sizes of all elements, it may be necessary to adjust the page layout to ensure that the relative positions between elements remain coordinated.

[0095] For example, when the original size of the visual page is 800×600 pixels, after calculation, the scaling ratio is obtained as 1.5.

[0096] 1) Page content: Chart size: width 400px, height 300px. Text box size: width 200px, height 50px.

[0097] 2) Proportional scaling:

[0098] The new width of the chart = 400px × 1.5 = 600px, the new height = 300px × 1.5 = 450px. The new width of the text box = 200px × 1.5 = 300px, the new height = 50px × 1.5 = 75px.

[0099] 3) Output result: All elements of the entire page are scaled according to a ratio of 1.5, ensuring the overall consistency and harmony of all content.

[0100] In this invention, all page elements are enlarged or reduced in equal proportion to ensure that the visual effects remain consistent, and the information conveyed will not be distorted due to shape distortion. Moreover, on different devices, the text and graphics can maintain an appropriate size, ensuring that the information is clearly readable and helping users accurately understand the data content. The consistent page layout and element sizes enable users to obtain a similar experience on different devices, reducing the confusion caused by interface changes. And this invention reduces the time for manually adjusting the element sizes through automated equal-proportion scaling, improving the efficiency of design and development.

[0101] S303. On the basis of equal-proportion scaling, perform adaptive filling, and increase the width or height to the right or downwards as needed to control the display content to fill the full screen for display.

[0102] In the embodiments of this invention, equal-proportion scaling means that when changing the size of an image, its aspect ratio remains unchanged. This can prevent image distortion, such as elongation or compression, thus maintaining the clarity and original shape of the image.

[0103] After equal-proportion scaling, the image may not completely fill the entire display area. This invention adopts adaptive filling, and increases the width or height of the image to the right or downwards as needed to ensure that the image or design content can fill the entire screen to the maximum extent. This usually involves appropriate cropping, or adding a background color or pattern in the required area to achieve the effect of full-screen display.

[0104] That is, on the basis of equal-proportion scaling in this invention, the width or height is increased to the right or downwards as needed to achieve the effect of filling the full screen. This method will not squeeze or stretch the elements. It simply sets the width and height of the container to achieve adaptability.

[0105] For example, when a user is designing a promotional poster and the original image is a landscape photo of 640x480 pixels. When it is displayed on a full HD screen of 1920x1080 pixels, the following steps can be taken for processing:

[0106] First, perform equal-proportion scaling: Enlarge the picture proportionally to be close to 1920x1080 while maintaining the aspect ratio. For example, the image can be enlarged to 1280x960 pixels, and in this way, there will be no distortion.

[0107] Then, perform adaptive filling: Since the height of the 1280x960 image is less than 1080 pixels, in the embodiments of this invention, the height can be increased downwards. To fill the entire screen, the adjacent width part will be filled with a background color similar to the landscape shooting or a blurred effect, which not only makes the picture more complete but also maintains visual harmony.

[0108] Through the above steps, the final display effect fills the entire screen while preserving the beauty of the image and the integrity of the content, significantly enhancing the user's visual experience.

[0109] In the embodiment of the present invention, through adaptive filling, users can obtain a more consistent and pleasant visual experience on different devices, whether it is a computer, a tablet or a mobile phone. Moreover, it can improve the visualization effect. The full-screen display makes the content more attractive, strengthens the visual impact, and helps users focus on the image or information more easily. And the adaptive filling method can ensure that the content is still clearly visible on different screen sizes and will not be affected by different devices.

[0110] In addition, in the embodiment of the invention, the height and width of the browser can be calculated, and according to the aspect ratio of the displayed content, the zoom ratio can be dynamically adjusted to control the equal ratio zoom of the entire page;

[0111] That is, in the embodiment of the present invention, the height and width of the browser can be calculated, and the zoom ratio can be dynamically adjusted according to the aspect ratio of the design draft, thereby solving the problem of white space caused by inconsistent screen ratios. If there are white edges, the overflow of the body can be set to hidden; to hide the excess part, so that the scroll bar and white edges can be eliminated.

[0112] Setting the overflow of the body to hidden means that in the CSS style of the web page, the overflow handling method of the body element is set to "hidden". In this way, when the web page content exceeds the visible area of the body element, the excess part will not be displayed, and users cannot view the hidden content by scrolling.

[0113] In addition, in the embodiment of the invention, the layout can also be dynamically adjusted by monitoring the resize event when the screen size changes to ensure adaptive filling when the window size changes.

[0114] That is, in the embodiment of the present invention, when monitoring the change of the window size, the layout can be dynamically adjusted by monitoring the resize event to ensure adaptability when the window size changes.

[0115] Step S400: During the large-screen display process, the WebSocket network socket technology is adopted to render the real-time updated data and update the data of each item on the large-screen dashboard in real time;

[0116] In the embodiments of the present invention, during the large-screen display process, the WebSocket network socket technology is used, and the present invention will perform real-time data communication in an efficient manner. WebSocket is a full-duplex communication protocol that allows a persistent connection to be established between the server and the client and can send data bidirectionally at any time.

[0117] Specifically, using the WebSocket technology, the client (such as a large screen or a display terminal) can maintain a persistent connection with the server. When data changes occur on the server, the updated data can be immediately pushed to the client without the client having to frequently initiate requests. This method effectively reduces latency compared to the traditional HTTP request method and improves the real-time nature of data updates.

[0118] For example, when a large shopping mall uses a large screen to display real-time sales data, customer traffic, and promotional information. Through the WebSocket technology, the mall's backend system can directly push this updated data to the front end of the large-screen display every time new sales data or customers enter or leave.

[0119] Sales data: Whenever a customer completes a purchase, the backend system will push this sales record to the front end via WebSocket, and data such as the total sales amount and best-selling products on the large screen will be updated immediately.

[0120] Customer traffic: The mall can also use sensors to monitor the number of people entering and leaving in real time, and use WebSocket to push the current customer traffic data to the large screen to help management personnel keep track of the flow of people in real time.

[0121] Promotional information: When a new promotional activity is launched in the mall, the backend can immediately notify the front end via WebSocket to change the prompt information on the large screen to attract customers' attention.

[0122] It can be seen that in this way, in the embodiments of the present invention, the large screen of the mall always displays the latest data, which can better provide information for customers and at the same time bring timely decision-making support to mall managers. This real-time update process not only improves the user experience but also helps businesses enhance customers' sense of participation.

[0123] The present invention uses WebSocket to provide low-latency data transmission, which can immediately notify the client when data changes, ensuring that the information displayed on the large-screen dashboard is always the latest. The traditional polling method requires frequent requests to the server, wasting bandwidth and resources. In contrast, the present invention uses WebSocket to send data only when needed after establishing a connection, which is more efficient. And using WebSocket can simplify the code logic of the client, eliminating the need to handle complex request and response mechanisms, making application development more convenient.

[0124] In a further embodiment, step S400 specifically includes:

[0125] S401. During the large-screen display process, when the data changes, control the use of WebSocket network socket technology to control the server to actively push data to the front end;

[0126] S402. Control the front end to update the data in real time for rendering to update the various data on the large-screen dashboard in real time;

[0127] That is, the present invention uses WebSocket (network socket) technology for real-time data rendering. WebSocket provides a full-duplex communication mechanism, allowing the server to actively push data to the client. When the data changes, the server can actively push the data to the front end, and the front end updates the data in real time for rendering.

[0128] S403. When a large amount of data needs to be rendered, control the use of a virtual scroll list to only render the elements within the visible area;

[0129] S404. When a scroll operation is detected, control the dynamic loading and unloading of data.

[0130] That is, in the embodiment of the present invention, when a large amount of data needs to be rendered, the virtual scroll list can improve the rendering efficiency. Only the elements within the visible area are rendered, and when the user scrolls, the data is dynamically loaded and unloaded, reducing the rendering burden during page initialization and accelerating the initial rendering speed.

[0131] Step S500. And control the front-end dashboard interface to perform visual rendering of the data through the Echarts enterprise-level chart library for display in the form of charts;

[0132] In the embodiment of the present invention, control the front-end dashboard interface to use the ECharts chart library for data visual rendering, that is, utilize the various chart types and customization functions provided by the ECharts chart library to display the data through intuitive graphics. ECharts is an open-source chart library based on JavaScript, supporting rich chart types such as line charts, bar charts, pie charts, etc., and can efficiently present complex data in a visual way.

[0133] Specifically, the present invention can process the data obtained from the backend and input it into ECharts by configuring various parameters and attributes of ECharts, and it is responsible for rendering and generating the corresponding charts. This way makes the data display more attractive, and users can obtain information from the charts at a glance.

[0134] Of course, in other embodiments, the visualization solution of the present invention may also adopt chart or atlas component libraries such as Echarts, HighCharts, and relation-graph to complete the visualization rendering of data.

[0135] In the present invention, data is presented through charts, which can help users quickly understand information. For example, trend changes, proportional relationships, etc. can be intuitively reflected in the form of charts. And the present invention adopts ECharts to support interactive operations. Users can view more detailed information by hovering, clicking, etc., which improves the user experience. Moreover, ECharts provides rich configuration options, and the styles, colors, animations, etc. of the charts can be customized according to specific requirements, so as to better conform to the corporate image and user needs. And when faced with a large amount of data, ECharts adopts an efficient rendering strategy, which can smoothly display a large amount of data and ensure the front-end performance.

[0136] Step S600: Monitor the data on the kanban visualization interface. When the data of the corresponding item reaches the corresponding warning threshold, perform an interface warning display and simultaneously send a text message notification for real-time warning.

[0137] In the embodiments of the present invention, according to the previously set warning rules, a set warning rule is set for each chart, such as abnormal data trends, abnormal data, heat maps, scatter plot distribution abnormal rules, sensor threshold abnormal rules, etc. Monitor the data on the kanban visualization interface. When the data of the corresponding item reaches the corresponding warning threshold, perform an interface warning display and simultaneously send a text message notification for real-time warning.

[0138] Specifically, when monitoring the data on the kanban visualization interface and the data of the corresponding item reaches the corresponding warning threshold, it is possible to control to highlight the current warning information by means of warning lights, flashing icons or texts, etc. to attract the user's attention;

[0139] And it is possible to control the large screen to receive user operation instructions and interact with the data by clicking and dragging; that is, in the embodiments of the present invention, the large screen should have an interactive function, and users can interact with the data by clicking, dragging, etc. and deeply understand the detailed information.

[0140] When the data of the corresponding item reaches the corresponding warning threshold, perform an interface warning display and simultaneously send a text message notification for real-time warning. That is, in the embodiments of the present invention, the large screen should have an alarm and notification function, and when the risk exceeds the threshold or reaches the warning condition, send an alarm message to the relevant personnel in a timely manner.

[0141] The following further illustrates an automated screen adaptation real-time large screen visualization optimization method according to an embodiment of the present invention through another more specific embodiment.

[0142] As Figure 2 shown, an automated adaptive screen real-time large screen visualization optimization method in a specific application embodiment of the present invention includes the following steps:

[0143] S10. UI design of the content and size of the visualization large screen;

[0144] As Figure 2 shown, the present invention first designs a large screen design draft, completes the design of the design draft (display content), determines the resolution size of the design draft, such as a resolution of 1920*1080, etc.; the size dashboard of the client design draft of the present invention is scaled proportionally to the real screen size dashboard;

[0145] S11. Automatically adapt multiple screens through the development solution of scale, and use the transform:scale() method for proportional scaling;

[0146] That is, in the embodiment of the present invention, the transform:scale() method can be used for proportional scaling, which means that it will calculate a scaling ratio based on the size of the design draft and the size of the current screen, and then scale the entire page to ensure that the content will not have blank spaces due to different screen ratios.

[0147] S12. Implement real-time data update and rendering through WebSocket technology;

[0148] That is, in the embodiment of the present invention, for real-time data rendering, the WebSocket (network socket) technology is adopted. WebSocket provides a full-duplex communication mechanism, allowing the server to actively push data to the client. When the data changes, the server can actively push the data to the front end, and the front end updates the data in real time for rendering.

[0149] S13. The front-end dashboard interface completes the visualization rendering of data through graph libraries such as Echarts (enterprise-level chart library);

[0150] S14. Set the warning threshold or rules;

[0151] In the embodiment of the present invention, data will be monitored on the server side, and when the monitored data changes, data will be pushed to the front end in a timely manner. The present invention will also set established warning rules for each chart, such as abnormal data trends, abnormal data, heat maps, scatter plot distribution abnormal rules, sensor threshold abnormal rules, etc.

[0152] S15. When the warning threshold is reached, the warning lights on the dashboard visualization interface will flash, and the red frame will flash, and the interface will be warned by popping up pictures and texts. At the same time, messages such as text messages can be pushed to the corresponding person in charge.

[0153] As Figure 2 shown, in the embodiment of the present invention, when the monitoring data of the server exceeds the threshold, the data on the kanban visualization interface is monitored. When the corresponding data reaches the corresponding warning threshold, an interface warning display is performed, and at the same time, a text message notification is sent for real-time warning. The positioning anomaly module realizes visual warning interaction and will promptly notify relevant personnel to handle the warning information in a timely manner.

[0154] Exemplary device

[0155] As Figure 3 shown, the embodiment of the present invention provides a real-time large-screen visualization optimization device for automatic screen adaptation, and the device includes:

[0156] A presetting module 310, configured to preset established warning rules for each chart, and the warning rules include: data trend anomaly warning threshold, data anomaly warning threshold, heat map warning threshold, scatter plot distribution anomaly warning threshold, and warning threshold of the sensor;

[0157] A setting and determination module 320, configured to set the display content of the visualization large screen according to requirements and determine the resolution size of the display content;

[0158] An automatic adaptation module 330, configured to adopt a combination of extensibility and dynamic calculation to automatically adapt the display content to multiple screens, and perform equal ratio scaling and adaptive filling to automatically adapt to large screens with different resolutions;

[0159] An update rendering module 340, configured to control the use of WebSocket network socket technology during the large screen display process to render real-time updated data and update the data of each item on the large screen kanban in real time;

[0160] A chart rendering module 350, configured to control the front-end kanban interface to perform visual rendering of data through the Echarts enterprise-level chart library for display in the form of charts;

[0161] A warning module 360, configured to monitor the data of each item on the kanban visualization interface. When the corresponding data reaches the corresponding warning threshold, an interface warning display is performed, and at the same time, a text message notification is sent for real-time warning, as specifically described above.

[0162] Based on the above embodiments, the present invention further provides an intelligent terminal, and its principle block diagram can be as Figure 4As shown. The intelligent terminal includes a processor, a memory, a network interface, a display screen, and a database connected through a system bus. Among them, the processor of the intelligent terminal is used to provide computing and control capabilities. The memory of the intelligent terminal includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage medium. The network interface of the intelligent terminal is used to communicate with an external terminal through a network connection. The computer program, when executed by the processor, implements a real-time large-screen visualization optimization method for automatic screen adaptation. The database of the intelligent terminal is used to store the real-time large-screen visualization optimization program for automatic screen adaptation.

[0163] Those skilled in the art can understand that Figure 4 the principle block diagram shown in is only a block diagram of some structures related to the solution of the present invention, and does not constitute a limitation on the intelligent terminal to which the solution of the present invention is applied. The specific intelligent terminal may include more or fewer components than those shown in the figure, or combine some components, or have different component arrangements.

[0164] In one embodiment, an intelligent terminal is provided, including a memory, and one or more programs, where one or more programs are stored in the memory and are configured to be executed by one or more processors. The one or more programs include instructions for performing the following operations:

[0165] Set the display content of the visualization large screen according to requirements, and determine the resolution size of the display content;

[0166] Adopt a combination of scalability and dynamic calculation to automatically adapt the display content to multiple screens, and perform proportional scaling and adaptive filling to automatically adapt to large screens with different resolutions;

[0167] During the large-screen display process, use the WebSocket network socket technology to render the real-time updated data and update the data of each item on the large-screen dashboard in real time;

[0168] And control the front-end dashboard interface to perform visual rendering of the data through the Echarts enterprise-level chart library to display it in the form of charts;

[0169] Monitor the data of each item on the dashboard visualization interface. When the data of the corresponding item reaches the corresponding warning threshold, perform an interface warning display and send a text message notification at the same time for real-time warning, as described above.

[0170] Among them, before the step of monitoring the data of each item on the dashboard visualization interface and when the data of the corresponding item reaches the corresponding warning threshold, it includes:

[0171] Set predefined warning rules for each chart in advance. The warning rules include: data trend anomaly warning threshold, data anomaly warning threshold, heat map warning threshold, scatter plot distribution anomaly warning threshold, and warning threshold of sensors.

[0172] Among them, the steps of automatically adapting the display content to multiple screens by combining scalability and dynamic calculation, and performing proportional scaling and adaptive filling to automatically adapt to large screens with different resolutions include:

[0173] Adopt the combination of scale scalability and dynamic calculation to automatically adapt the display content to multiple screens, and calculate a scaling ratio according to the size of the display content and the size of the current screen;

[0174] Control the proportional scaling of the entire page according to the calculated scaling ratio;

[0175] On the basis of proportional scaling, perform adaptive filling, and increase the width or height to the right or down as needed to control the display content to fill the full screen display.

[0176] Among them, the steps of automatically adapting the display content to multiple screens by combining scalability and dynamic calculation, and performing proportional scaling and adaptive filling to automatically adapt to large screens with different resolutions also include:

[0177] Dynamically adjust the scaling ratio by calculating the height and width of the browser and according to the aspect ratio of the display content, and control the proportional scaling of the entire page;

[0178] Dynamically adjust the layout when the screen size changes by monitoring the resize event to ensure adaptive filling when the window size changes.

[0179] Among them, in the process of large screen display, the steps of rendering real-time updated data and updating the data of each item on the large screen dashboard by using the WebSocket network socket technology include:

[0180] In the process of large screen display, when the data changes, control the use of the WebSocket network socket technology to control the server to actively push data to the front end;

[0181] Control the front end to render real-time updated data to update the data of each item on the large screen dashboard in real time.

[0182] Among them, in the process of large screen display, the steps of rendering real-time updated data and updating the data of each item on the large screen dashboard by using the WebSocket network socket technology also include:

[0183] When a large amount of data needs to be rendered, the control adopts a virtual scrolling list to only render the elements within the visible area;

[0184] When a scrolling operation is detected, the control dynamically loads and unloads data.

[0185] Among them, the steps of monitoring the data of the kanban visualization interface, when the data of the corresponding item reaches the corresponding warning threshold, performing an interface warning display, and simultaneously sending a text message notification for real-time warning include:

[0186] Monitor the data of the kanban visualization interface. When the data of the corresponding item reaches the corresponding warning threshold, control to highlight the current warning information in the form of a warning light, a flashing icon or text to attract the user's attention;

[0187] And control the large screen to receive user operation instructions to interact with the data by clicking and dragging;

[0188] When the data of the corresponding item reaches the corresponding warning threshold, perform an interface warning display, and simultaneously send a text message notification for real-time warning, as specifically described above.

[0189] Those of ordinary skill in the art can understand that all or part of the processes of implementing the methods in the above embodiments can be completed by instructing relevant hardware through a computer program. The computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above methods. Among them, any reference to a memory, storage, database or other medium used in the various embodiments provided by the present invention can include non-volatile and / or volatile memories. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory can include random access memory (RAM) or an external cache. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDR SDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.

[0190] In summary, the present invention provides a real-time large-screen visualization optimization method, device, intelligent terminal and storage medium for automatic screen adaptation. The present invention provides a real-time large-screen visualization optimization method for automatic screen adaptation, which can automatically adapt to large screens of various resolutions, and update various data of the large-screen dashboard in real time, and display them in the form of charts, so as to achieve the effect of real-time warning.

Claims

1. A real-time large-screen visualization optimization method for automatically adapting the screen, characterized in that: include: Set the visual large-screen display content as required and determine the resolution size of the display content; The display content is automatically adapted to multiple screens by combining scalability and dynamic calculation, and geometric scaling and adaptive filling are performed to automatically adapt to large screens with different resolutions; During the large-screen display process, WebSocket network socket technology is used to render real-time updated data and update various data on the large-screen billboard in real time; And control the front-end dashboard interface to render the data visually through the Echarts enterprise-level chart library, so as to display it in the form of charts; Monitor various data on the dashboard visualization interface. When the corresponding data reaches the corresponding warning threshold, the interface warning will be displayed and SMS notification will be sent at the same time for real-time warning.

2. The real-time large-screen visualization optimization method for automatic screen adaptation according to claim 1 is characterized in that: The step of monitoring various data on the dashboard visualization interface and detecting when the corresponding data reaches the corresponding warning threshold includes: Predetermined warning rules are set for each chart in advance, and the warning rules include: data trend abnormality warning threshold, data abnormality warning threshold, heat map warning threshold, scatter plot distribution abnormality warning threshold, and sensor warning threshold.

3. The real-time large-screen visualization optimization method for automatic screen adaptation according to claim 1 is characterized in that: The steps of automatically adapting the display content to multiple screens by combining scalability and dynamic calculation, and performing geometric scaling and adaptive filling to automatically adapt to large screens with different resolutions include: The display content is automatically adapted to multiple screens by combining scale scalability and dynamic calculation, and a scaling ratio is calculated according to the size of the display content and the size of the current screen; According to the calculated zoom ratio, control the proportional zoom of the entire page; Based on proportional scaling, adaptive padding is performed to increase the width or height to the right or downward as needed to control the display content to fill the full screen.

4. The real-time large-screen visualization optimization method for automatic screen adaptation according to claim 3 is characterized in that: The step of automatically adapting the display content to multiple screens by combining scalability and dynamic calculation, and performing geometric scaling and adaptive filling to automatically adapt to large screens with different resolutions also includes: By calculating the height and width of the browser and dynamically adjusting the zoom ratio according to the aspect ratio of the displayed content, the entire page is controlled to be zoomed in and out in a proportional manner; By monitoring the resize event, the layout is dynamically adjusted when the screen size changes, ensuring that adaptive filling is maintained when the window size changes.

5. The real-time large-screen visualization optimization method for automatic screen adaptation according to claim 1 is characterized in that: In the large-screen display process, the WebSocket network socket technology is used to render the real-time updated data. The steps of real-time updating of various data of the large-screen billboard include: During the large-screen display process, when the data changes, the control uses WebSocket network socket technology to control the server to actively push data to the front end; Control the front-end to update data in real time for rendering, so as to update the data of the large-screen billboard in real time.

6. The real-time large-screen visualization optimization method for automatic screen adaptation according to claim 1 is characterized in that: In the large-screen display process, the WebSocket network socket technology is used to render the real-time updated data, and the step of real-time updating of various data of the large-screen billboard also includes: When large amounts of data need to be rendered, the control uses a virtual scroll list to render only the elements within the visible area; Controls the dynamic loading and unloading of data when scrolling is detected.

7. The real-time large-screen visualization optimization method for automatic screen adaptation according to claim 2 is characterized in that: The steps of monitoring various data on the dashboard visualization interface, and displaying an interface warning when the corresponding data reaches the corresponding warning threshold, and sending a text message notification at the same time, and performing real-time warning include: Monitor various data on the dashboard visualization interface. When the corresponding data reaches the corresponding warning threshold, the control highlights the current warning information through warning lights, flashing icons or text to attract the user's attention. And control the large screen to receive user operation instructions and interact with data by clicking and dragging; When the corresponding item data reaches the corresponding warning threshold, an interface warning display will be made and a text message notification will be sent at the same time for real-time warning.

8. A real-time large-screen visualization optimization device for automatic screen adaptation, characterized in that: The device comprises: A pre-setting module is used to pre-set a predetermined warning rule for each chart, wherein the warning rule includes: a data trend abnormality warning threshold, a data abnormality warning threshold, a heat map warning threshold, a scatter plot distribution abnormality warning threshold, and a sensor warning threshold; The setting and determination module is used to set the visual large-screen display content according to requirements and determine the resolution size of the display content; An automatic adaptation module, for automatically adapting the display content to multiple screens by combining scalability and dynamic calculation, and performing geometric scaling and adaptive filling to automatically adapt to large screens with different resolutions; Update the display module, which is used in the large-screen display process. It uses WebSocket network socket technology to control the rendering of real-time update data and update various data on the large-screen billboard in real time. The chart rendering module is used to control the front-end dashboard interface to render data visually through the Echarts enterprise-level chart library, so as to display it in the form of charts; The early warning module is used to monitor the data on the visual interface of the dashboard. When the corresponding data reaches the corresponding early warning threshold, the interface will display an early warning and send a text message notification at the same time for real-time early warning.

9. An intelligent terminal, characterized in that: The device comprises a memory and one or more programs, wherein the one or more programs are stored in the memory and are configured to be executed by one or more processors, and the one or more programs include being used to execute the method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: When the instructions in the storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the method as described in any one of claims 1 to 7.

Images