Web browser-based scada configuration system and device

Abstract

The invention discloses an scada configuration system and device based on a Web browser. The scada configuration system comprises a component library system, a configuration system, a database system and a real-time communication system. The component library system comprises a standard component library and a user-defined component library, and the configuration system comprises configuration drawing, data binding and a configuration graph; the database system comprises a relational database and a time sequence database, the real-time communication system comprises data distribution and configuration connection management, when a user opens a configuration graph through a browser, configuration data are acquired from the database system and rendered in the browser, the configuration graph establishes websocket connection with the real-time communication system through the browser, and the real-time communication system performs data distribution and configuration connection management. And the real-time communication system distributes the collected data and the alarm data according to the configuration and the associated data of the equipment, and pushes the collected data and the alarm data to a bound configuration graph for display. According to the invention, flexible user-defined components are supported, conventional Internet of Things sensing equipment is satisfied, and video security and protection equipment and the like are well supported at the same time.

Description

Technical Field

[0001] The invention relates to the technical field of SCADA configuration, and in particular to a SCADA configuration system and equipment based on a Web browser. Background Art

[0002] As a monitoring system, displaying real-time data in the form of configuration can provide a more intuitive understanding of the business situation. The current configuration systems are all based on the C / S architecture, which is not convenient for upgrading and maintenance, does not support video monitoring, and has a complex operation interface and a high learning cost. Summary of the invention

[0003] The present invention provides a scada configuration system and device based on a Web browser, which can at least solve one of the technical problems in the background technology.

[0004] To achieve the above object, the present invention adopts the following technical solutions:

[0005] A scada configuration system based on a Web browser, including a component library system, a configuration system, a database system, and a real-time communication system;

[0006] The component library system includes a standard component library and a custom component library, wherein the custom components are made according to the requirements of the component library system and uploaded to the custom component library; the components in the component library are used for configuration drawing;

[0007] The configuration system includes configuration drawing, data binding and configuration diagram;

[0008] The database system includes relational database and time series database. The relational database is responsible for storing device data, configuration data, and the associated data between configuration and device.

[0009] The time series database is responsible for storing collected data and alarm data;

[0010] The real-time communication system includes data distribution and configuration connection management. When the user opens the configuration diagram through the browser, the configuration data is obtained from the database system and rendered in the browser. The configuration diagram establishes a websocket connection with the real-time communication system through the browser. The real-time communication system distributes the collected data and alarm data according to the associated data of the configuration and the device, and pushes them to the bound configuration diagram for display.

[0011] Furthermore, the user draws a configuration diagram on the configuration canvas based on the standard component library and the custom component library;

[0012] Data binding selects the components in the configuration diagram and then obtains the device and attribute list from the database system according to the configuration type;

[0013] The configuration diagram is responsible for displaying the configuration diagram and the associated collection data and alarm data after binding the device.

[0014] Furthermore, the component library system supports the sorting and alignment of multiple components, including left alignment, right alignment, center alignment, top alignment, bottom alignment and vertical center alignment;

[0015] 1) The left-aligned formula is as follows

[0016] x′ i =min(x1,x2,...,x n )

[0017] x′ is the horizontal coordinate of the left border of the current component; x1, x2, …, x n They are the horizontal coordinates of the left borders of other components respectively; min means taking the minimum left border of all other components to ensure that the current component is left-aligned;

[0018] 2) The right-aligned formula is as follows

[0019] x′=max(x1,x2,...,x n )-w i

[0020] x′ is the horizontal coordinate of the right border of the component after right alignment; x1, x2, …, x n are the horizontal coordinates of the left borders of the selected components; w i is the width of the current component; max means taking the maximum left edge of other components and subtracting the width of the current component to ensure right alignment;

[0021] 3) The formula for horizontal center alignment is as follows

[0022]

[0023] x′ is the horizontal center coordinate of the current component; x is the left boundary coordinate of other components; w j is the width of other components; n is the number of other components; w i is the width of the current component; ∑ means summing the left borders and widths of all other components to get the center position of all components, and then subtracting half the width of the current component to achieve centering;

[0024] 4) The top alignment formula is as follows

[0025] y′ i =min(y1,y2,...,y n )

[0026] y′ i The top boundary coordinates of the current component; y1, y2, ..., y nis the top boundary coordinate of other components; min means taking the minimum top boundary of all other components to ensure the top alignment of the current component;

[0027] 5) The bottom alignment formula is as follows

[0028] y′=max(y1,y2,...,y n )-h i

[0029] y′ is the bottom boundary coordinate of the current component; y1, y2, …, y n The top border coordinates of other components; h i is the height of the current component; max means taking the maximum top boundary of other components and subtracting the height of the current component to ensure bottom alignment;

[0030] 6) The formula for vertical center alignment is as follows

[0031]

[0032] y′ is the vertical center coordinate of the current component; y j The top border coordinates of other components; h j is the height of other components; n is the number of other components; h i is the height of the current component; ∑ means summing the top borders and heights of all other components to get the center position of all components, and then subtracting half the height of the current component to achieve centering.

[0033] Furthermore, the component library system supports automatic adsorption and alignment when a component is dragged, and detects its distance from other components in real time; if the distance is less than the set threshold, it aligns to the nearest component; for two components, the distance between them is calculated:

[0034] Horizontal distance:

[0035] dist x =|x1-(x2+w2)|

[0036] Vertical distance:

[0037] dist y =|y1-(y2+h2)|

[0038] Among them: x1 and y1 are the coordinates of the upper left corner of the current component; x2 and y2 are the coordinates of the upper left corner of the target component; w2 and h2 are the width and height of the target component; according to the set threshold, determine whether to adsorb:

[0039] Horizontal adsorption condition: distx≤threshold;

[0040] Vertical adsorption condition: disty≤threshold.

[0041] Furthermore, in addition to supporting the scaling of individual components, the component library system defines standards ranging from size 5 to size 50, supports text font size selection and component overall size selection, and facilitates users to uniformly maintain sizes.

[0042] Furthermore, the component library system supports global scaling of the canvas, and the scaling formula is:

[0043] When enlarged: s′=s×k

[0044] When shrinking: s′=s / k

[0045] Where s′ is the new scale; s is the current scale; and k is the scaling factor.

[0046] Furthermore, the configuration system can monitor data in real time and bind device data to the configuration. Components that support status can bind device status data and change the color of components according to different status data. Cells in the table can bind different device collection data to display real-time data of the device.

[0047] Furthermore, log in to the configuration system, open the configuration display interface, obtain the configuration diagram data and binding relationship from the back-end service, render the configuration diagram in the canvas according to the coordinates, angles, lengths, widths, and sizes of each component in the configuration diagram, and establish a websocket connection with the back-end service.

[0048] Furthermore, the configuration system obtains the binding relationship corresponding to the configuration diagram from the database system, filters out data messages matching the binding device attributes from the messages pushed by the real-time communication system, and assembles the configuration diagram, the binding relationship and the filtered data messages into a push message.

[0049] On the other hand, the present invention further discloses a computer-readable storage medium storing a computer program, wherein when the computer program is executed by a processor, the processor executes the steps of the above method.

[0050] On the other hand, the present invention further discloses a computer device, including a memory and a processor, wherein the memory stores a computer program, and when the computer program is executed by the processor, the processor executes the steps of the above method.

[0051] It can be seen from the above technical solution that the scada configuration system based on the Web browser of the present invention has the following beneficial effects:

[0052] Cross-platform: Users can access the system through a web browser on a variety of operating systems (such as Windows, Linux, Mac OS, etc.), without being restricted by a specific operating system. Whether on a desktop computer in the office, a laptop computer on site, or a mobile device, as long as there is a network connection and a browser, they can monitor and operate anytime and anywhere, greatly improving the flexibility and convenience of work.

[0053] Easy to deploy and update: There is no need to install special software on each client device. You only need to deploy and update the system on the server side. All clients can immediately use the latest version of the system through the browser, reducing the workload and cost of software installation and maintenance.

[0054] Multi-user collaboration: Supports multiple users to access and operate the system at the same time. People in different departments or positions can view and process data in real time according to their own permissions, realize information sharing and collaborative work. For example, when troubleshooting, technicians with different professions can view system data and analyze and process it at the same time, improving the efficiency of problem solving.

[0055] Easy to integrate: It can easily integrate data with other enterprise management systems (such as ERP, MES, etc.) to achieve data sharing and comprehensive analysis, provide more comprehensive information support for enterprise decision-making, and help enterprises optimize production processes, improve production efficiency and management level.

[0056] Rich visual interface: supports flexible custom components, which not only meets the needs of conventional IoT sensor devices, but also provides good support for video security and other equipment. BRIEF DESCRIPTION OF THE DRAWINGS

[0057] Figure 1 It is a flowchart of the present invention. DETAILED DESCRIPTION

[0058] In order to make the purpose, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments.

[0059] like Figure 1 As shown, the scada configuration system based on the Web browser described in this embodiment includes a component library system, a configuration system, a database system, and a real-time communication system;

[0060] The component library system includes standard component library and custom component library. Custom components are made according to the requirements of the component library system and uploaded to the custom component library. The components in the component library are mainly used for configuration drawing;

[0061] The configuration system includes configuration drawing, data binding and configuration diagram. Users draw configuration diagrams on the configuration canvas based on standard component libraries and custom component libraries. Data binding selects components in the configuration diagram and then obtains the device and attribute list from the database system according to the type of configuration. The configuration diagram is mainly responsible for displaying the configuration diagram and the associated collection data and alarm data after binding the device;

[0062] The database system includes relational database and time series database. The relational database is responsible for storing device data, configuration data, and the associated data between configuration and device. The time series database is responsible for storing acquisition data and alarm data, etc.

[0063] The real-time communication system includes data distribution and configuration connection management. When the user opens the configuration diagram through the browser, the configuration data is obtained from the database system and rendered in the browser. The configuration diagram establishes a websocket connection with the real-time communication system through the browser. The real-time communication system distributes the collected data and alarm data according to the associated data of the configuration and the device, and pushes them to the bound configuration diagram for display.

[0064] The following are specific instructions:

[0065] 1. Log in to the component library system and add component types according to component usage, such as basic shape types, pipe network component types, etc.;

[0066] 2. Upload components, define component names, select component types, and select component permissions. If the component needs to display different states, you need to upload different images of the corresponding states. Component images support mainstream image formats. Component permissions include private components and shared components. Private components are private to the uploading user and cannot be viewed or used by other users. Shared components support viewing and use by all users.

[0067] 3. When uploading components, you need to automatically generate component icons of fixed sizes. After parsing and uploading components, you need to optimize the components, such as resizing and compressing them to generate component icons that meet the component requirements.

[0068] 4. After the component icon is generated, the component data and component icon data are saved to the database system, and the component permission range is marked according to the component permission;

[0069] 5. In the component library, shared components cannot be modified, but private components can be modified, including modifying component name, component type, component permissions, replacing images, etc.;

[0070] 6. Switch to the configuration system and enter the configuration editing interface. On the left side of the interface is the component library, which displays the basic components and private component lists by default. Click More Components to pop up all component types. Check the required component type. The shared component list of the checked component type will be displayed in the component library on the left side of the interface. Private components of other users will not be displayed.

[0071] 7. There is a menu bar at the top of the interface, which supports text, connection, table, canvas color selection, font type, font size, font color, component size, zoom ratio, save and other functions;

[0072] 8. The middle part of the interface is the operation area, and the middle of the operation area is the canvas. Users draw configuration diagrams within the canvas range. Operations are not allowed in the area beyond the canvas. The canvas size can be scaled and the color of the canvas can be switched.

[0073] 9. Select the appropriate component in the component library on the left and drag it to the canvas. You can drag, scale, rotate, and perform other operations on the component separately. The component coordinates are based on the upper left corner as the origin. When dragging, you need to change the coordinates of the upper left corner. When scaling, you need to change the length and width of the component. When rotating, you need to change the angle of the component.

[0074] 10. Supports sorting and alignment of multiple components. The alignment methods include left alignment, right alignment, center alignment, top alignment, bottom alignment and vertical center alignment.

[0075] 1) The left-aligned formula is as follows

[0076] x′ i =min(x1,x2,...,x n )

[0077] x′ is the horizontal coordinate of the left border of the current component; x1, x2, …, x n They are the horizontal coordinates of the left borders of other components. min means taking the minimum left border of all other components to ensure that the current component is left-aligned.

[0078] 7) The right-aligned formula is as follows

[0079] x′=max(x1,x2,...,x n )-w i

[0080] x′ is the horizontal coordinate of the right edge of the component after right alignment. x1,x2,…,x n They are the horizontal coordinates of the left borders of their selected components. i is the width of the current component. max means taking the maximum left edge of other components and subtracting the width of the current component to ensure right alignment.

[0081] 8) The formula for horizontal center alignment is as follows

[0082]

[0083] x′ is the horizontal center coordinate of the current component. x is the left boundary coordinate of other components. j is the width of other components. n is the number of other components. i is the width of the current component. ∑ means summing the left borders and widths of all other components to get the center position of all components, and then subtracting half the width of the current component to achieve centering.

[0084] 9) The top alignment formula is as follows

[0085] y′ i =min(y1,y2,...,y n )

[0086] y′ is the top boundary coordinate of the current component. y1,y2,…,y n It is the top boundary coordinate of other components; min means taking the minimum top boundary of all other components to ensure the top alignment of the current component.

[0087] 10) The bottom alignment formula is as follows

[0088] y′=max(y1,y2,...,y n )-h i

[0089] y′ is the bottom boundary coordinate of the current component. y1,y2,…,y n The top border coordinates of other components; h i is the height of the current component. max means taking the maximum top boundary of other components and subtracting the height of the current component to ensure bottom alignment.

[0090] 11) The formula for vertical center alignment is as follows

[0091]

[0092] y′ is the vertical center coordinate of the current component. j The top edge coordinates of other components. j is the height of other components. n is the number of other components. h i is the height of the current component. ∑ means summing the top borders and heights of all other components to get the center position of all components, and then subtracting half the height of the current component to achieve centering.

[0093] 11. When dragging a component, it supports automatic adsorption and alignment, and detects the distance between it and other components in real time. If the distance is less than the set threshold, it will align to the nearest component. For two components, calculate the distance between them:

[0094] Horizontal distance: dist x =|x1-(x2+w2)|

[0095] Vertical distance: dist y =|y1-(y2+h2)|

[0096] Among them: x1 and y1 are the coordinates of the upper left corner of the current component. x2 and y2 are the coordinates of the upper left corner of the target component. w2 and h2 are the width and height of the target component. According to the set threshold, determine whether to adsorb:

[0097] Horizontal adsorption condition: distx≤threshold;

[0098] Vertical adsorption condition: disty≤threshold;

[0099] 12. In addition to supporting the scaling of individual components, the standard size from size 5 to size 50 is defined, and the text font size selection and component overall size selection are supported, making it convenient for users to maintain the size uniformly;

[0100] 13. Support global scaling of canvas. The scaling formula is:

[0101] When enlarged: s′=s×k

[0102] When shrinking: s′=s / k

[0103] Where s′ is the new zoom ratio. s is the current zoom ratio. k is the zoom factor (e.g., zoom in by 1.2, zoom out by the inverse of 1.2).

[0104] 14. Configuration needs to realize real-time data monitoring, and device data needs to be bound to the configuration. Components that support status can bind device status data, and the color of the component can be changed by different status data. The cells in the table can be bound to different device collection data to display the real-time data of the device.

[0105] 15. When binding device data, get the device list from the backend service. After selecting the bound device, get the list of all attributes of the device from the backend service. Select the corresponding attribute to bind. If it is a table, the attribute name and unit will be automatically displayed after binding. You can modify the attribute name and choose whether to display the attribute unit.

[0106] 16. Click the Save button to save the configuration diagram and binding relationship to the database system for subsequent editing and display;

[0107] 17. When editing a configuration diagram, obtain the configuration diagram data and binding relationships from the backend service, and render them in the canvas according to the coordinates, angles, lengths, widths, dimensions and other data of each component in the configuration diagram. Both the configuration diagram and the binding relationships can be modified in the editing state;

[0108] 18. After the device establishes a connection with the real-time communication system, it reports the device collection data in real time. The real-time communication system parses the message according to the protocol and pushes the parsed message to the configuration system;

[0109] 19. Log in to the configuration system, open the configuration display interface, obtain the configuration diagram data and binding relationship from the backend service, render the configuration diagram in the canvas according to the coordinates, angles, lengths, widths, dimensions and other data of each component in the configuration diagram, and establish a websocket connection with the backend service;

[0110] 20. The configuration system obtains the binding relationship corresponding to the configuration diagram from the database system, and selects the data message matching the binding device attribute from the message pushed by the real-time communication system. The configuration system assembles the configuration diagram, the binding relationship and the selected data message into a push message;

[0111] 20. The configuration system actively transmits the push message to the front-end interface through the websocket connection established with the front-end interface;

[0112] 21. The configuration display interface obtains the message pushed from the configuration system, parses the message, and displays it in the corresponding position of the bound component or table.

[0113] In summary, the scada configuration system based on a Web browser according to an embodiment of the present invention has the following beneficial effects:

[0114] 1. Traditional configuration software is a C / S architecture, which is not conducive to large-scale promotion and use. The present invention is based on a B / S architecture, which solves the problem of large-scale promotion and use;

[0115] 2. Traditional configuration software is mostly foreign software, and the operation interface is complex, which has a high threshold for operators.

[0116] 3. The present invention supports flexible custom components, which not only meet the needs of conventional IoT sensor devices, but also provide good support for video security and other equipment.

[0117] On the other hand, the present invention further discloses a computer-readable storage medium storing a computer program, wherein when the computer program is executed by a processor, the processor executes the steps of the above method.

[0118] On the other hand, the present invention further discloses a computer device, including a memory and a processor, wherein the memory stores a computer program, and when the computer program is executed by the processor, the processor executes the steps of the above method.

[0119] In another embodiment provided by the present application, a computer program product including instructions is also provided, which, when executed on a computer, enables the computer to execute any of the SCADA configuration systems based on a Web browser in the above embodiments.

[0120] It is understandable that the system, device and storage medium provided in the embodiments of the present invention correspond to the method provided in the embodiments of the present invention, and the explanation, examples and beneficial effects of the relevant contents can refer to the corresponding parts in the above methods.

[0121] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function described in the embodiment of the present application is generated in whole or in part. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions may be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium, for example, the computer instructions may be transmitted from a website site, computer, server or data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) mode to another website site, computer, server or data center. The computer-readable storage medium may be any available medium that a computer can access or a data storage device such as a server or data center that includes one or more available media integrated. The available medium may be a magnetic medium, (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid-state drive Solid State Disk (SSD)), etc.

[0122] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the existence of other identical elements in the process, method, article or device including the elements.

[0123] Each embodiment in this specification is described in a related manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the system embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0124] The above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit the same. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some of the technical features may be replaced by equivalents. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A scada configuration system based on a Web browser, characterized in that: Including component library system, configuration system, database system, and real-time communication system; The component library system includes a standard component library and a custom component library, wherein the custom components are made according to the requirements of the component library system and uploaded to the custom component library; the components in the component library are used for configuration drawing; The configuration system includes configuration drawing, data binding and configuration diagram; The database system includes relational database and time series database. The relational database is responsible for storing device data, configuration data, and the associated data between configuration and device. The time series database is responsible for storing collected data and alarm data; The real-time communication system includes data distribution and configuration connection management. When the user opens the configuration diagram through the browser, the configuration data is obtained from the database system and rendered in the browser. The configuration diagram establishes a websocket connection with the real-time communication system through the browser. The real-time communication system distributes the collected data and alarm data according to the associated data of the configuration and the device, and pushes them to the bound configuration diagram for display.

2. The SCADA configuration system based on a Web browser according to claim 1, characterized in that: The user draws the configuration diagram on the configuration canvas based on the standard component library and the custom component library; Data binding selects the components in the configuration diagram and then obtains the device and attribute list from the database system according to the configuration type; The configuration diagram is responsible for displaying the configuration diagram and the associated collection data and alarm data after binding the device.

3. The scada configuration system based on a Web browser according to claim 2, characterized in that: The component library system supports sorting and alignment of multiple components. The alignment modes include left alignment, right alignment, center alignment, top alignment, bottom alignment and vertical center alignment. 1) The left-aligned formula is as follows x′ i min(x1,x2,...,x n ) x′ is the horizontal coordinate of the left border of the current component; x1, x2, …, x n They are the horizontal coordinates of the left borders of other components respectively; min means taking the minimum left border of all other components to ensure that the current component is left-aligned; 2) The right-aligned formula is as follows x′=max(x1,x2,...,x n )-w i x′ is the horizontal coordinate of the right border of the component after right alignment; x1, x2, …, x n are the horizontal coordinates of the left borders of the selected components; w i is the width of the current component; max means taking the maximum left edge of other components and subtracting the width of the current component to ensure right alignment; 3) The formula for horizontal center alignment is as follows x′ is the horizontal center coordinate of the current component; x is the left boundary coordinate of other components; w j is the width of other components; n is the number of other components; w i is the width of the current component; ∑ means summing the left borders and widths of all other components to get the center position of all components, and then subtracting half the width of the current component to achieve centering; 4) The top alignment formula is as follows y′ i =min(y1,y2,...,y n ) y′ i The top boundary coordinates of the current component; y1, y2, ..., y n is the top boundary coordinate of other components; min means taking the minimum top boundary of all other components to ensure the top alignment of the current component; 5) The bottom alignment formula is as follows y′=max(y1,y2,...,y n )-h i y′ is the bottom boundary coordinate of the current component; y1, y2, …, y n The top border coordinates of other components; h i is the height of the current component; max means taking the maximum top boundary of other components and subtracting the height of the current component to ensure bottom alignment; 6) The formula for vertical center alignment is as follows y′ is the vertical center coordinate of the current component; y j The top border coordinates of other components; h j is the height of other components; n is the number of other components; h i is the height of the current component; ∑ means summing the top borders and heights of all other components to get the center position of all components, and then subtracting half the height of the current component to achieve centering.

4. The SCADA configuration system based on a Web browser according to claim 1, characterized in that: When a component is dragged, the component library system supports automatic adsorption and alignment, and detects the distance between it and other components in real time. If the distance is less than the set threshold, it will align to the nearest component. For two components, the distance between them is calculated: dist x =|x1-(x2+w2)| Horizontal distance: dist y =|y1-(y2+h2)| Vertical distance: Among them: x1 and y1 are the coordinates of the upper left corner of the current component; x2 and y2 are the coordinates of the upper left corner of the target component; w2 and h2 are the width and height of the target component; according to the set threshold, determine whether to adsorb: Horizontal adsorption condition: distx≤threshold; Vertical adsorption condition: disty≤threshold.

5. The SCADA configuration system based on a Web browser according to claim 1, characterized in that: In addition to supporting the scaling of individual components, the component library system defines standards ranging from size 5 to size 50, supports text font size selection and component overall size selection, making it easier for users to maintain sizes uniformly.

6. The SCADA configuration system based on a Web browser according to claim 1, characterized in that: The component library system supports global scaling of the canvas. The scaling formula is: When enlarged: s′=s×k When shrinking: s′=s / k Where s′ is the new scale; s is the current scale; and k is the scaling factor.

7. The SCADA configuration system based on a Web browser according to claim 1, characterized in that: The configuration system can monitor data in real time and bind device data to the configuration. Components that support status can bind device status data and change the color of components according to different status data. Cells in the table can bind different device collection data to display real-time data of the device.

8. The SCADA configuration system based on a Web browser according to claim 1, characterized in that: Log in to the configuration system, open the configuration display interface, obtain the configuration diagram data and binding relationship from the back-end service, render the configuration diagram in the canvas according to the coordinates, angles, lengths, widths, and sizes of each component in the configuration diagram, and establish a websocket connection with the back-end service.

9. The SCADA configuration system based on a Web browser according to claim 1, characterized in that: The configuration system obtains the binding relationship corresponding to the configuration diagram from the database system, and filters out data messages that match the binding device attributes from the messages pushed by the real-time communication system. The configuration system assembles the configuration diagram, the binding relationship and the filtered data messages into a push message.

10. A computer device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that: When the computer program is executed by the processor, the processor is caused to perform the steps of the method according to any one of claims 1 to 6.

Images