An integrated data monitoring and web front-end integrated display system and method

Abstract

The application discloses a kind of integrated data monitoring and Web front end integration display system and method, it is related to power grid data monitoring display technical field, the system includes: file reading generation module, graphic display service module and support service module, wherein, file reading generation module is used to build security I area, based on data monitoring and acquisition service, read and traverse graphic template data in database;Graphic display service module is used to build security IV area, based on graphic logic calculation technology, process specification picture file exported by security I area;Support service module is used to configure basic service, realize the full-duplex transmission of data between security I area and security IV area.The application uses CIM / G as the access specification of graphic picture file, utilizes the advantage of Canvas technology, combines the powerful equipment relationship description ability of CIM / G file, meets the efficient, flexible display demand of modern power system.

Description

Technical Field

[0001] This invention relates to the field of power grid data monitoring and display technology, and in particular to a display system and method that integrates data monitoring and web front-end. Background Technology

[0002] With the rapid development and construction of the State Grid, the system's graphical functions need to perform power grid monitoring and equipment monitoring in Safety Zone I, and also need to have equipment inspection functions in Safety Zone IV. Equipment maintenance personnel need to understand the equipment's operating status in real time through a web browser, which places higher demands on the graphical display of Safety Zone IV.

[0003] Currently, the graphic image file storage formats used in Security Zone I monitoring systems are generally SVG (Scalable Vector Graphics) and custom formats. Security Zone IV web screen display methods primarily include SVG and Ajax-based methods and CIM / G-Web-based methods. Depending on the web screen display method used in Security Zone IV, SVG or CIM / G format files need to be exported from Security Zone I for use in Security Zone IV. SVG is a standard open vector image format based on plain text XML. It can be dynamically changed by data and has good interactive performance. Furthermore, text-based SVG files are much smaller than other graphic file formats with the same amount of information. However, traditional purely interactive web methods using SVG are not satisfactory to users in terms of user experience and response efficiency. They suffer from insufficient expressive power, low efficiency in web browsers, and inability to handle large amounts of data and animated scenarios, thus requiring improvement.

[0004] For example, Chinese patent CN109828755B discloses a method for displaying power grid graphics. This method uses the Flex platform to parse CIM / G (Graphical Exchange Format Based on CIM) files, clearly and accurately converting the equipment, equipment attributes, and connection relationships between equipment in the power grid CIM / G into graphics for easy observation and analysis. However, this method mainly describes the use of Flex technology to parse and display CIM / G files, lacking a description of the method for generating CIM / G files in the security I zone. Furthermore, it lacks a method for parsing extended custom graphic elements such as plugins and interval templates. Flex technology is more suitable for scenarios requiring rapid web page layout construction, such as enterprise portals and backend management systems. In terms of drawing capabilities, dynamic interactivity, and freedom, it is inferior to Canvas technology. Canvas is more suitable for scenarios requiring complex drawing and dynamic interaction. Summary of the Invention

[0005] Therefore, it is necessary to provide an integrated data monitoring and web front-end display system and method to address the aforementioned technical issues.

[0006] In a first aspect, the present invention provides an integrated data monitoring and web front-end display system, comprising: a file reading and generation module, a graphics display service module, and a support service module, wherein... The file reading and generation module is used to build Security Zone I. Based on data monitoring and acquisition services, it reads and traverses graphic element template data from the database; and based on data exchange standards, it sets the extended specification format for graphic element template file conversion and generates standardized screen files. The graphics display service module is used to build Security Zone IV. Based on graphics logic computing technology, it processes the standardized screen files exported from Security Zone I and displays them in an integrated manner on the front end. The support service module is used to configure basic services, enable full-duplex data transmission between Security Zone I and Security Zone IV, and provide data support for the operation of graphics services.

[0007] Furthermore, the file reading and generation module includes: a specification definition extension submodule, a configuration screen generation submodule, and a screen file generation submodule, among which, The specification defines an extension submodule, which combines a general information model and a general data format to formulate a data exchange standard, serving as an extension specification format for graphic element template data; The configuration screen generation submodule is used to traverse the template data of various types of graphic elements from the database, generate their corresponding standard text, and traverse the screen file list to save the standard graphic element attributes. The image file generation submodule is used to load standard image files, read the exported standard text and standard graphic element attributes, and generate standard image files based on the attribute settings.

[0008] Furthermore, the system iterates through the database to retrieve template data of various graphic elements, generates corresponding specification texts, and then iterates through the list of screen files to save the specification graphic element attributes, including: Iterate through the file and model object mapping relationship between power graphic elements and custom graphic elements, and iterate through each graphic element separately. Based on the associated model object, generate the power graphic element specification text and custom graphic element specification text corresponding to each type of graphic element, and store them in the set directory. Load the mapping relationship between the primary power equipment bay template screen file and the model object, generate all bay template specification text, and save them to the designated directory; Iterate through the list of screen files to be exported, get the model object corresponding to the screen file, export the screen attribute parameters, and then iterate through the layers under the screen to export the layer information. Iterate through the elements under the layer, the plugin elements under the layer, and the interval elements under the elements in turn, and save their respective standard element attributes.

[0009] Furthermore, the process involves loading the standard display file, reading the exported standard text and standard graphic element attributes, and generating the standard display file based on the attribute settings, including: Load the contents of the standard image file, store them in memory, and then read the image attribute parameters and layer attributes in sequence; Iterate through the element nodes under each layer, create different element objects according to the element type, read the various attributes of the elements in the standard image file, and then set them to the element objects. Read the plugin properties under the layer, create a plugin object, and dynamically load plugin instances; Read the interval properties of the layer, create the interval element object in the image, and set the properties of the interval element according to the read interval properties.

[0010] Furthermore, the graphics display service module includes: a webpage display layer, a webpage logic processing layer, and an intermediate service layer, among which, The web page presentation layer is used to display application-level data and graphics in real time; The web page logic processing layer is used to respond to requests sent by the web page presentation layer and forward them to the corresponding intermediate service layer according to the function type of the request; then, it encapsulates the data processed by the intermediate service layer into the format corresponding to the web page presentation layer and returns it to the web page presentation layer. The middle service layer provides parsing and calculation services for standardized image files, obtains data processing results that meet the requirements, and pushes them to the web page display layer in real time.

[0011] Furthermore, the middleware layer includes: a file parsing service unit, a computing engine service unit, a real-time data service unit, and a general data service unit, among which... The file parsing service unit is used to obtain the file parsing result of the standard screen file based on recursive parsing, and convert the standard screen file from the extended standard format to the lightweight format; The computing engine service unit is used to read file parsing results, obtain rendering instructions based on periodic real-time calculations, and generate primitive and connector color decision instructions in real time. The real-time data service unit is used to subscribe to the real-time database in the form of orders and, in conjunction with the full-duplex communication technology of the web page logic processing layer, push data to the web page presentation layer in real time. The general data service unit is used to encapsulate the operation logic of commercial database tables and provide a unified external interface to adapt to different types of databases.

[0012] Furthermore, the file parsing results are read, and rendering instructions are obtained based on periodic real-time calculations. Real-time color decision instructions for primitives and connecting lines are also generated, including: The system requests the real-time data required for the standard image file from the real-time database, stores it in memory, calculates the graphics that need to be refreshed for the standard image file in turn based on the file parsing results, reads the values ​​required for each graphic from memory, performs a full image calculation, and obtains the rendering instructions. Coloring is performed based on measurement type rules and quality code coloring rules, and decoupled state coloring is performed based on topology results to obtain color decision instructions for primitives and connecting lines.

[0013] Furthermore, the supporting service modules include: a file synchronization service unit, a relational database, a real-time database, and a message service bus unit, among which... The file synchronization service unit is used to synchronize and update service data files, and realize full-duplex data transmission between Security Zone I and Security Zone IV. Relational databases are used to store and manage relational data required by the system. Real-time databases are used to store and manage real-time data and support the processing of real-time data. The message service bus unit is used to realize communication and data transmission between module units to ensure smooth and efficient information flow between various components.

[0014] Secondly, the present invention also provides a method for integrating data monitoring and web front-end display, the method comprising the following steps: S1. Generate a standard screen file for Security Zone I based on a pre-defined extended specification format; S2. Based on the file synchronization service of the support service module, a full-duplex transmission channel is established between Security Zone I and Security Zone IV to synchronize the standard screen file to Security Zone IV; S3. Based on graphics logic computing technology, it processes the standard screen files exported from Security Zone I and displays them in an integrated manner on the front end of Security Zone IV.

[0015] Furthermore, based on graphics logic computing technology, the standardized screen files exported from Security Zone I are processed and displayed in an integrated manner on the front end of Security Zone IV, including the following steps: S31. The file parsing service unit recursively parses the metafiles that the tags in the standard screen file depend on, converts them into a lightweight format and returns them to the web page front end, and at the same time returns the calculated objects and attributes to the calculation engine service unit. S32. The computing engine service unit reads the file parsing results, obtains rendering instructions based on periodic real-time calculations, and generates color decision instructions for primitives and connecting lines in real time. S33. The web page front-end uses the coordinate information in the standard screen file to draw basic graphic elements, and then uses the basic graphic elements to draw power graphic elements and custom graphic elements. S34. Implement interactive operation and real-time updates of the monitoring screen on the web page front end.

[0016] The beneficial effects of this invention are as follows: 1. This invention adopts CIM / G as the storage standard for graphic image files in Security Zone I. The generated CIM / G files are transmitted to Security Zone IV for use by the Web system via a file synchronization service. Security Zone I and Security Zone IV use unified graphic files based on the CIM / G standard. In the Security Zone IV Web system, leveraging the advantages of Canvas technology and combining it with the powerful device relationship description capabilities of CIM / G files, the efficient and flexible display needs of modern power systems can be met.

[0017] 2. By adopting the CIM / G standard for graphic exchange and storage, the graphical representation of power equipment and power grid information is achieved. The definition of power equipment graphic drawing and storage methods in CIM / G improves description efficiency. The CIM / G-based power grid dispatch control system's web graphic display adopts a B / S architecture, consisting of a front-end display layer and a back-end service layer. The front-end display layer uses common web browser technologies to display the power grid dispatch control system monitoring screen in real time on a web browser. The back-end service layer runs the graphic logic calculation program, providing data services for the graphic display by calling the platform's underlying service interfaces. The data control and processing modules of the web front-end and back-end achieve bidirectional data communication, thus solving the problem of low description efficiency in the SVG-based common graphic exchange format. Combined with the latest Canvas technology, it brings a comprehensive improvement in the performance of real-time monitoring screens in animation, 3D, and large-scale data rendering, promoting practical results in the integration of automation and informatization. Attached Figure Description

[0018] The accompanying drawings, which are included to provide a further understanding of the invention and form part of this invention, illustrate exemplary embodiments of the invention and are used to explain the invention, but do not constitute an undue limitation of the invention. In the drawings: Figure 1 This is a schematic diagram of a unified data monitoring and web front-end display system according to an embodiment of the present invention; Figure 2 This is a system logic block diagram of an integrated data monitoring and web front-end display system according to an embodiment of the present invention; Figure 3 This is a flowchart of a method for generating standard screen files based on the CIM / G standard in an integrated data monitoring and web front-end display system according to an embodiment of the present invention; Figure 4 This is a flowchart of the web-side CIM / G file parsing and Canvas-based rendering process in an integrated data monitoring and web front-end display system according to an embodiment of the present invention. Figure 5 This is a flowchart of an integrated data monitoring and web front-end display method according to an embodiment of the present invention.

[0019] The attached diagram is labeled as follows: 1. File reading and generation module; 2. Graphic display service module; 3. Support service module. Detailed Implementation

[0020] To make the objectives, technical solutions, and advantages of this invention clearer, the invention will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the invention.

[0021] Please see Figures 1-2 A unified display system integrating data monitoring and web front-end, comprising: a file reading and generation module 1, a graphic display service module 2, and a support service module 3.

[0022] File reading and generation module 1 is used to build Security Zone I. Based on data monitoring and acquisition services, it reads and traverses element template data from the database. Based on data exchange standards, it sets extended specification formats for element template file conversion, generating standardized screen files. The generation process is as follows: Figure 3 As shown.

[0023] In the description of this invention, the file reading and generation module 1 includes: a specification formulation extension submodule, a configuration screen generation submodule, and a screen file generation submodule.

[0024] The specification defines an extension submodule, which combines a general information model and a general data format to develop a data exchange standard, serving as an extension specification format for graphic element template data.

[0025] The configuration screen generation submodule is used to traverse the template data of various types of graphic elements from the database, generate their corresponding standard text, and traverse the screen file list to save the standard graphic element attributes.

[0026] In the description of this invention, the process involves traversing various types of graphic element template data from the database to generate corresponding standard text, and traversing the screen file list to save the standard graphic element attributes, including: Step S101: Traverse the file and model object mapping relationship between power graphic elements and custom graphic elements, and traverse each graphic element separately. Generate the power graphic element specification text and custom graphic element specification text corresponding to each type of graphic element based on the associated model object, and store them in the set directory.

[0027] The power element types include: isolating switches, generators, two-winding transformers, three-winding transformers, voltage transformers, current transformers, capacitors, circuit breakers, grounding switches, reactors, fuses, loads, handcarts, terminals, fault indicators, busbars, grounding, and operating condition elements.

[0028] Custom primitives refer to primitives of different forms that are customized through any combination of basic drawing elements, excluding power primitives, such as power flow lines and pie charts.

[0029] Based on the file and model object mapping relationship of the loaded power elements and custom elements, each element is traversed separately, and a standard text conforming to the CIM / G standard (hereinafter referred to as "G text") is generated for each type of element according to the associated model object. That is, the power element standard text or the custom element standard text corresponding to each power element and custom element is stored in the set directory.

[0030] Specifically, two-winding and three-winding transformers need to be processed separately as winding sub-objects, and handcarts need to be processed separately as upper and lower handcart sub-objects. Each type of graphic element is stored in a separate directory. The naming format for graphic element files is: graphic element name.suffix.icn.g.

[0031] Step S102: Load the mapping relationship between the primary power equipment bay template screen file and the model object, generate all bay template specification texts, and store them in the set directory.

[0032] Specifically, based on the mapping relationship between the loaded interval template screen files and objects, all interval template G text files are generated and stored in the designated directory. The naming format of the interval template G text files is: interval name.suffix.bay.g.

[0033] Step S103: Traverse the list of screen files to be exported, obtain the model object corresponding to the screen file, export the screen attribute parameters (including screen width, height, background color, background image, time marker, etc.), and then traverse the layers under the screen to export the layer information (such as layer ID, layer name, etc.).

[0034] Step S104: Iterate through the elements under the layer, the plugin elements under the layer, and the interval elements under the elements in sequence, and save their respective standard element attributes.

[0035] Specifically, the process iterates through the elements in the layer: based on the type of each element, the corresponding specification text is organized and output according to the CIM / G standard. For electrical elements and custom elements on the screen, reference attributes need to be set to express references to basic elements. The element reference format is "#element filename:element ID". Output element types include: isolating switches, generators, two-winding transformers, three-winding transformers, voltage transformers, current transformers, capacitors, circuit breakers, grounding switches, reactors, fuses, loads, handcarts, terminals, fault indicators, busbars, grounding, operating condition elements, and other custom element types.

[0036] Traverse the plugin elements under the layer: get the plugin name, top left corner coordinates, width, and height, get the plugin data, and save the plugin information to the corresponding plugin's G-element attribute.

[0037] Traverse the interval elements under the element: get the coordinates of the upper left corner of the bounding rectangle of the interval element, the interval width, the interval height, and the interval object ID. Get the keyid of each sub-device within the interval, compare it with the device in the interval template, determine the display and hiding status of each sub-device, and finally save the interval information to the corresponding G element attribute.

[0038] It's important to note that the `tfr` attribute of graphic elements and images needs to be converted from a `QTransform` object because the monitoring system uses Qt technology. Mirroring must be considered during the conversion. The following describes the methods for calculating rotation angles and zoom levels.

[0039] 1) Rotation angle calculation method var transform:QTransform transform = item.transform() / / item is a primitive object var line:QLineF line=QlineF(QPointF(0,0), QPointF(0,0)) line = line * transform var rAngle=line.angle(QLineF(0, 0, 1, 0)) If line.dy() < 0 then rAngle=360-rAngle end if var m11=transform.m11() if m11<0 then rAngle-=180 end if 2) Scaling calculation method var transform:QTransform transform = item.transform() / / item is a primitive object var m11=transform.m11() var m12=transform.m12() var m21=transform.m21() var m22=transform.m22() var scaleX = sqrt(m11*m11 + m12*m12) / / Calculate the square root var scaleY=sqrt(m21*m21+m22*m22) if m11<0 then scaleX=-scaleX end if if (m22<0) || (rAngle==90&&m21==1&&m12==1) || (rAngle==270&&m21==-1&&m12==-1) then scaleY=-scaleY end if The image file generation submodule is used to load standard image files, read the exported standard text and standard graphic element attributes, and generate standard image files based on the attribute settings.

[0040] In the description of this invention, loading the standard screen file, reading the exported standard text and standard graphic element attributes, and generating the standard screen file based on the attribute settings include: Step S111: Load the contents of the standard screen file, store it in memory, and read the screen attribute parameters and layer attributes in sequence.

[0041] The Security Zone I monitoring system prioritizes loading CIM / G files. Since CIM / G files are in XML format, RapidXML technology is required for reading them. RapidXML is an open-source C++ library for parsing and manipulating XML (Extensible Markup Language) documents. It provides a fast, lightweight, and easy-to-use method for processing XML data.

[0042] After loading the CIM / G file content into memory, read and set the screen attribute parameters (including background color, background fill method, width, height, etc.). Then read and set the layer attributes (including element name, visibility, selectability, editability, etc.).

[0043] Step S112: Traverse the graphic element nodes under each layer, create different graphic element objects according to the graphic element type, and read the various attributes of the graphic elements in the standard screen file, and then set them to the graphic element objects.

[0044] The loaded graphic element types include basic graphic elements, power graphic elements, custom graphic elements, plug-ins, and intervals. Basic graphic element types include lines, rectangles, ellipses, elliptical arcs, polylines, polygons, static text, images, Bézier curves, and hotspots. Power graphic element types include isolating switches, generators, two-winding transformers, three-winding transformers, voltage transformers, current transformers, capacitors, circuit breakers, grounding switches, reactors, fuses, loads, handcarts, terminals, fault indicators, busbars, grounding, and operating condition elements.

[0045] Step S113: Read the plugin properties under the layer, create a plugin object, dynamically load the plugin instance, and complete the relevant data initialization and display internally within the plugin instance.

[0046] Step S114: Read the interval attributes under the layer (including the coordinates of the upper left corner of the outer rectangle of the interval, the interval type, the interval template reference relationship, etc.), create the interval graphic element object in the picture, and set the attributes of the interval graphic element according to the read interval attributes; for the sub-graphic elements inside the interval, load and parse the corresponding interval template file content according to the interval template reference relationship, and draw the sub-graphic element object inside the interval according to the interval attribute settings.

[0047] The Graphics Display Service Module 2 is used to build Security Zone IV. Based on graphics logic computing technology, it processes the standardized screen files exported from Security Zone I and displays them in an integrated manner on the front end.

[0048] In particular, Safety Zone IV adopts a front-end and back-end separated B / S architecture. The real-time monitoring screen on the B / S side uses Canvas technology to draw basic graphics such as lines, rectangles, ellipses, elliptical arcs, polylines, polygons, static text, images, Bézier curves, and hotspots based on the graphic element coordinate information provided in the CIM / G file (standard screen file). These basic graphics are then combined to draw power circuit graphics, including isolating switches, generators, two-winding transformers, three-winding transformers, voltage transformers, current transformers, capacitors, circuit breakers, grounding switches, reactors, fuses, loads, handcarts, terminals, fault indicators, busbars, grounding, and operating condition elements. By extending the CIM / G standard, various custom graphic elements can also be drawn.

[0049] In the description of this invention, the graphics display service module 2 includes: a web page display layer, a web page logic processing layer, and an intermediate service layer.

[0050] The web page presentation layer is used to display application-level data and graphics in real time.

[0051] Specifically, the web front-end rendering adopts object-oriented management technology. A picture contains a graphic CIM / G file and several primitive CIM / G files. The graphic contains basic information such as the coordinates and model data of each primitive, while the primitive files contain information such as the shape and status of the primitive.

[0052] In addition, the web presentation layer (WEB presentation layer) uses Canvas technology to display various application-level data and graphics of interest to users in real time on the web browser, including application menus, graphical displays, and operation menus. The application menus provide users with additional screen browsing functions; the graphical displays show substation wiring diagrams, power grid flow diagrams, system diagrams, etc., displaying the status of electrical equipment, measured values, electrical signals, and full topology coloring; the operation menus include functions such as zooming in and out, switching between screens, dragging screens, and forward and backward navigation.

[0053] The web page logic processing layer responds to requests sent by the web page presentation layer and, based on the function type of the request, forwards it to the corresponding intermediate service layer. The intermediate service layer then encapsulates the processed data into the format corresponding to the web page presentation layer and returns it to the web page presentation layer.

[0054] The middle service layer provides parsing and calculation services for standardized image files, obtains data processing results that meet the requirements, and pushes them to the webpage display layer in real time. Its processing flow is as follows: Figure 4 As shown.

[0055] In the description of this invention, the intermediate service layer includes: a file parsing service unit, a computing engine service unit, a real-time data service unit, and a general data service unit.

[0056] The file parsing service unit is used to obtain the file parsing results of the standard screen file based on recursive parsing, and to convert the standard screen file from the extended standard format to the lightweight format.

[0057] Specifically, Security Zone IV recursively parses the standard screen files that the tags in the screen files depend on through the file parsing service unit, and returns them to the web front end in JSON format. At the same time, it needs to return the calculated objects and properties to the calculation engine service unit.

[0058] In addition, the standard screen file (CIM / G file) parsing includes functions for parsing graphic G language files, parsing graphic element G language files, loading plugin JS files, and parsing plugins.

[0059] CIM / G files are divided into graphic G language files (file extension pic.g) and primitive G language files (file extension icn.g). The graphic G language file, besides explaining the basic attributes of the graph, also references the primitive G language file and describes the relative position, size, and flipping information of the primitives within the graph. The primitive G language file is a collection describing a series of basic graphic information (including circles, rectangles, triangles, lines, curves, text, etc.). CIM / G file parsing includes a graphic G language file parsing module, a primitive G language file parsing module, a plugin parsing module, and a plugin JS file loading module.

[0060] The computing engine service unit is used to read file parsing results, obtain rendering instructions based on periodic real-time calculations, and generate primitive and connector color decision instructions in real time.

[0061] Specifically, the computing engine service unit is the module that handles server-side primitive rendering tasks. Its main functions are divided into two parts: one is to generate dynamic primitive rendering instructions in real time, and the other is to generate primitive and connector color decision (topology coloring, measurement type coloring, quality code coloring) instructions in real time. The color decision can be flexibly configured with computing priority.

[0062] In the description of this invention, reading the file parsing results, obtaining rendering instructions based on periodic real-time calculations, and generating primitive and connector color decision instructions in real time include: Step S201: Request the real-time data required for the standard screen file (including parameter values, graphic definitions, formula definitions, and parameter definitions of the graphics to be calculated) from the real-time database, store it in memory, calculate the graphics to be refreshed in the standard screen file in sequence based on the file parsing results, and read the values ​​required for each graphic calculation (including obid, otype, atype, link relationships, etc.) from memory, perform a full-image calculation, and obtain the rendering instructions.

[0063] Step S202: Color the primitives and connecting lines according to the measurement type rules and quality code coloring rules, and perform decoupling state coloring according to the topology results to obtain the primitive and connecting line color decision instructions.

[0064] The color decision instructions for the connectors include quality code coloring, measurement type coloring, topology coloring, and color decision chain management.

[0065] The real-time data service unit is used to subscribe to the real-time database in the form of orders and, in conjunction with the full-duplex communication technology of the web page logic processing layer, push data to the web page presentation layer in real time.

[0066] The general data service unit is used to encapsulate the operation logic of commercial database tables and provide a unified external interface to adapt to different types of databases.

[0067] Support Service Module 3 is used to configure basic services, realize full-duplex data transmission between Security Zone I and Security Zone IV, and provide data support for the operation of graphics services.

[0068] In the description of this invention, the support service module 3 includes: a file synchronization service unit, a relational database, a real-time database, and a message service bus unit.

[0069] The file synchronization service unit is used to synchronize and update service data files, and to realize full-duplex data transmission between Security Zone I and Security Zone IV.

[0070] In addition, the file synchronization service also supports data synchronization for other files in Security Zone I and Security Zone IV, real-time databases, and commercial databases.

[0071] Relational databases are used to store and manage relational data required by the system.

[0072] A real-time database is used to store and manage real-time data and supports the processing of real-time data.

[0073] The message service bus unit is used to realize communication and data transmission between module units to ensure smooth and efficient information flow between various components.

[0074] Please see Figure 5 It also provides a method for integrating data monitoring with a unified web front-end display, which includes the following steps: S1. Generate a standard screen file for Security Zone I based on a pre-defined extended specification format.

[0075] S2. Based on the file synchronization service of the support service module, a full-duplex transmission channel is established between Security Zone I and Security Zone IV to synchronize the standard screen files to Security Zone IV.

[0076] S3. Based on graphics logic computing technology, it processes the standard screen files exported from Security Zone I and displays them in an integrated manner on the front end of Security Zone IV.

[0077] In the description of this invention, the process of processing the standardized screen file exported from Security Zone I and displaying it in an integrated manner on the front end of Security Zone IV, based on graphics logic computing technology, includes the following steps: S31. The file parsing service unit recursively parses the metafiles that the tags in the specification screen file depend on, converts them into a lightweight format and returns them to the web page front end, and at the same time returns the calculated objects and attributes to the calculation engine service unit.

[0078] S32. The computing engine service unit reads the file parsing results, obtains rendering instructions based on periodic real-time calculations, and generates primitive and connecting line color decision instructions in real time.

[0079] S33. The web page front-end uses the coordinate information in the standard screen file to draw basic graphic elements, and then uses the basic graphic elements to draw power graphic elements and custom graphic elements.

[0080] S34. Implement interactive operation and real-time updates of the monitoring screen on the web page front end.

[0081] In a specific embodiment, this invention combines the CIM / G specification and Canvas technology to design an integrated SCADA monitoring system and front-end web display system and method. Firstly, the monitoring system in Security Zone I adopts the CIM / G specification as the storage format for screen files. Utilizing the file and data synchronization service provided by the system platform, the CIM / G files and data used in Security Zone I are synchronized to Security Zone IV. Security Zone IV provides CIM / G file parsing capabilities. The web front-end, based on the parsed JSON file, uses Canvas technology to render the configuration screen. Simultaneously, a calculation engine service pushes the latest calculation results to the web front-end via WebSocket based on screen information and graphic element attributes, thereby triggering the configuration screen update mechanism and achieving real-time screen refresh. Ultimately, this provides a real-time monitoring subsystem based on the CIM / G specification and Canvas technology.

[0082] CIM / G is a new type of power system graphical description language. It is not only an open power system graphical storage format, but also a standard for power grid graphical exchange between different application systems, manufacturers and power companies. It can solve the shortcomings of SVG-based public graphical exchange formats, such as the inability to directly express the integration of power system graphics and models.

[0083] CIM / G stands for "CIM Based Graphic Exchange Format," a graphical description specification for power systems. It addresses the shortcomings of SVG-based common graphical exchange formats, which cannot directly express the integration of power system graphics and models. Developed based on the CIM-based graphical exchange standard in IEC 61970-453, G is a new graphical description language applied to power systems. G uses graphics to express relevant information about power equipment and the power grid, supports efficient access to power graphics and model-related data, and facilitates the exchange of power graphics and model-related data between different systems. G is a markup-based, XML-compliant plain text language, compatible with the basic SVG drawing format.

[0084] As a core technology of smart grid dispatching technical support systems, CIM / G has been widely applied in practical engineering applications of smart grid dispatching technical support systems. Furthermore, based on non-power system graphics, the descriptive scope of the CIM / G specification can be expanded, allowing the expanded CIM / G specification to be applied to monitoring systems for rail, industry, hydropower, and new energy sources.

[0085] As part of the HTML5 standard, Canvas provides a method for drawing graphics using JavaScript. This method is simple to use and very powerful, offering a rich API for drawing paths, rectangles, arcs, characters, and adding images. Because Canvas is a W3C standard, it is compatible with almost all browsers and its security is guaranteed. Canvas is highly efficient at drawing, especially in scenarios with a large number of nodes and those requiring animation. Canvas also provides rendering effects such as gradients and shadows, enhancing the drawing quality.

[0086] Canvas is a new tag added in HTML5 that allows developers to draw various patterns on it using JavaScript. It can be used in animation, games, data visualization, real-time video processing, and other fields. Modern browsers are specifically optimized for Canvas drawing, and can even directly utilize the GPU resources of the target device. SVG is an independent vector graphics language that has been a W3C standard for over a decade, but its development has been slow. When using SVG for drawing, it is highly efficient and has the lowest implementation cost when the graphics are not complex and the number of nodes required to be drawn per unit area is small. Canvas is a typical pixel-based drawing technology, also known as bitmap drawing technology. Its foundation is to draw all the points through algorithms. When drawing graphics with stacking or animation, the advantages of Canvas become obvious.

[0087] In summary, by utilizing the above-described technical solution of this invention, the present invention adopts CIM / G as the storage and retrieval standard for graphical display files in Security Zone I. The generated CIM / G files are transmitted to Security Zone IV via a file synchronization service for use by the Web system. Security Zone I and Security Zone IV use unified graphical files based on the CIM / G standard. In the Security Zone IV Web system, leveraging the advantages of Canvas technology and combining it with the powerful device relationship description capabilities of CIM / G files, the efficient and flexible display needs of modern power systems can be met. By adopting the CIM / G standard for graphic exchange and storage, the graphical representation of power equipment and power grid information is achieved. The definition of power equipment graphic drawing and storage methods in CIM / G improves description efficiency. The CIM / G-based power grid dispatch control system's web graphic display adopts a B / S architecture, consisting of a front-end display layer and a back-end service layer. The front-end display layer uses common web browser technologies to display the power grid dispatch control system monitoring screen in real time on a web browser. The back-end service layer runs the graphic logic calculation program, providing data services for the graphic display by calling the platform's underlying service interfaces. The data control and processing modules of the web front-end and back-end achieve bidirectional data communication, thus solving the low description efficiency of the SVG-based common graphic exchange format. Combined with the latest Canvas technology, it brings a comprehensive improvement in the performance of real-time monitoring screens in animation, 3D, and large-scale data rendering, promoting practical results in the integration of automation and informatization.

[0088] It should be understood that although the steps in the flowcharts of the accompanying figures are shown sequentially as indicated by the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the accompanying figures may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the sub-steps or stages of other steps.

Claims

1. A unified display system integrating data monitoring and web front-end, characterized in that, The system includes: a file reading and generation module, a graphics display service module, and a support service module. The file reading and generation module is used to build a security zone I, read and traverse graphic element template data from the database based on data monitoring and acquisition services, and set the extended specification format for the conversion of the graphic element template file based on data exchange standards to generate a standard screen file. The graphics display service module is used to build Security Zone IV, process the standard screen files exported from Security Zone I based on graphics logic computing technology, and display them in an integrated manner on the front end. The support service module is used to configure basic services, realize full-duplex data transmission between Security Zone I and Security Zone IV, and provide data support for the operation of graphics services; The file reading and generation module includes: a specification definition extension submodule, a configuration screen generation submodule, and a screen file generation submodule, wherein... The specification defines an extension submodule, which combines a general information model and a general data format to formulate a data exchange standard, serving as an extension specification format for graphic element template data; The configuration screen generation submodule is used to traverse the template data of various types of graphic elements from the database, generate their corresponding standard text, and traverse the screen file list to save the standard graphic element attributes. The image file generation submodule is used to load the standard image file, read the exported standard text and standard graphic element attributes, and generate the standard image file according to the attribute settings. The process of traversing the database to retrieve template data of various types of graphic elements, generating corresponding standard text, and traversing the list of screen files to save the standard graphic element attributes includes: Iterate through the file and model object mapping relationship between power graphic elements and custom graphic elements, and iterate through each graphic element separately. Based on the associated model object, generate the power graphic element specification text and custom graphic element specification text corresponding to each type of graphic element, and store them in the set directory. Load the mapping relationship between the primary power equipment bay template screen file and the model object, generate all bay template specification text, and save them to the designated directory; Iterate through the list of screen files to be exported, get the model object corresponding to the screen file, export the screen attribute parameters, and then iterate through the layers under the screen to export the layer information. Iterate through the elements under the layer, the plugin elements under the layer, and the interval elements under the elements in turn, and save their respective standard element attributes.

2. The integrated data monitoring and web front-end display system according to claim 1, characterized in that, The process of loading the standard screen file, reading the exported standard text and standard graphic element attributes, and generating the standard screen file based on the attribute settings includes: Load the contents of the standard image file, store them in memory, and then read the image attribute parameters and layer attributes in sequence; Iterate through the element nodes under each layer, create different element objects according to the element type, and read the various attributes of the elements in the standard image file and set them to the element objects. Read the plugin properties under the layer, create a plugin object, and dynamically load plugin instances; Read the interval properties of the layer, create the interval element object in the image, and set the properties of the interval element according to the read interval properties.

3. The integrated data monitoring and web front-end display system according to claim 1, characterized in that, The graphics display service module includes: a webpage display layer, a webpage logic processing layer, and an intermediate service layer, wherein... The webpage presentation layer is used to display application-level data and graphics in real time; The web page logic processing layer is used to respond to requests sent by the web page presentation layer and forward them to the corresponding intermediate service layer according to the function type of the request; then, it encapsulates the data processed by the intermediate service layer into the format corresponding to the web page presentation layer and returns it to the web page presentation layer. The intermediate service layer is used to provide parsing and calculation services for standardized image files, obtain data processing results that meet the requirements, and push them to the web page display layer in real time.

4. The integrated data monitoring and web front-end display system according to claim 3, characterized in that, The intermediate service layer includes: a file parsing service unit, a computing engine service unit, a real-time data service unit, and a general data service unit, wherein... The file parsing service unit is used to obtain the file parsing result of the standard screen file based on recursive parsing, and convert the standard screen file from the extended standard format to the lightweight format; The computing engine service unit is used to read the file parsing results, obtain rendering instructions based on periodic real-time calculations, and generate primitive and connecting line color decision instructions in real time. The real-time data service unit is used to subscribe to the real-time database in the form of an order, and push data to the web page presentation layer in real time in conjunction with the full-duplex communication technology of the web page logic processing layer. The general data service unit is used to encapsulate the operation logic of commercial database tables and provide a unified external interface to adapt to different types of databases.

5. The integrated data monitoring and web front-end display system according to claim 4, characterized in that, The process of reading the file parsing results, obtaining rendering instructions based on periodic real-time calculations, and generating primitive and connector color decision instructions in real time includes: The system requests the real-time data required for the standard image file from the real-time database, stores it in memory, calculates the graphics that need to be refreshed for the standard image file in turn based on the file parsing results, reads the values ​​required for each graphic from memory, performs a full image calculation, and obtains the rendering instructions. Coloring is performed based on measurement type rules and quality code coloring rules, and decoupled state coloring is performed based on topology results to obtain color decision instructions for primitives and connecting lines.

6. The integrated data monitoring and web front-end display system according to claim 1, characterized in that, The supporting service module includes: a file synchronization service unit, a relational database, a real-time database, and a message service bus unit, wherein... The file synchronization service unit is used to synchronize and update data files, and to realize full-duplex data transmission between Security Zone I and Security Zone IV. The relational database is used to store and manage the relational data required by the system; The real-time database is used to store and manage real-time data and supports the processing of real-time data. The message service bus unit is used to realize communication and data transmission between module units to ensure smooth and efficient information flow between various components.

7. A method for integrating data monitoring and web front-end display, used to implement the integrated data monitoring and web front-end display system as described in any one of claims 1-6, characterized in that, The method includes the following steps: S1. Generate a standard screen file for Security Zone I based on a pre-defined extended specification format; S2. Based on the file synchronization service of the support service module, establish a full-duplex transmission channel between Security Zone I and Security Zone IV, and synchronize the standard screen file to Security Zone IV; S3. Based on graphics logic computing technology, it processes the standard screen files exported from Security Zone I and displays them in an integrated manner on the front end of Security Zone IV.

8. The integrated data monitoring and web front-end display method according to claim 7, characterized in that, The process of processing the standardized screen file exported from Security Zone I and displaying it in an integrated manner on the front end of Security Zone IV, based on graphics logic computing technology, includes the following steps: S31. The file parsing service unit recursively parses the metafiles that the tags in the standard screen file depend on, converts them into a lightweight format and returns them to the web page front end, and at the same time returns the calculated objects and attributes to the calculation engine service unit. S32. The computing engine service unit reads the file parsing results, obtains rendering instructions based on periodic real-time calculations, and generates primitive and connecting line color decision instructions in real time. S33. The web page front-end uses the coordinate information in the specified screen file to draw basic graphic elements, and then uses the basic graphic elements to draw power graphic elements and custom graphic elements. S34. Implement interactive operation and real-time updates of the monitoring screen on the web page front end.

Images