Generation method based on power grid data topological graph rendering and alarm display

Abstract

The invention provides a generating method based on power grid data topological graph rendering and alarm display. The generating method comprises the steps of receiving power grid topological data; calling HTML5 to generate a canvas and a data container; analyzing the topological data of the power grid and analyzing data types, wherein the data types comprise a node data type and a connection data type; if the data type is the node data type, binding nodes and displaying node states; if the data type is the connection data type, generating a connection according to the direction and displaying a connection state; and based on the node state and the connection state, rendering a power grid topological graph in real time and displaying alarm information. The development and maintenance workload can be reduced, and the deployment and use range of the system is widened.

Description

Technical Field

[0001] The present invention relates to the technical field of real-time display of power grid topological structures, and more specifically, the present invention relates to a generation method based on power grid data topological map rendering and alarm display. Background Art

[0002] The real-time display and alarm function of the power grid topological structure are of great significance in the power system. Traditional methods for displaying power grid topological maps usually rely on dedicated software or complex graphics processing tools. These methods not only have high development costs but also are difficult to achieve cross-platform deployment on different operating systems. With the continuous development of browser technology, especially the emergence of HTML5 and Canvas, browser-based graphics rendering technology has gradually become the mainstream. However, existing browser-based methods for displaying power grid topological maps often have problems such as low rendering efficiency, poor real-time performance, and unintuitive display of alarm information when dealing with large-scale power grid data. In addition, existing alarm systems usually rely on complex backend logic and are difficult to achieve flexible customization and dynamic update of alarm rules.

[0003] In the process of implementing the embodiments of the present invention, the inventors found that there are at least the following problems or defects in the prior art: Existing methods for displaying power grid topological maps are difficult to achieve efficient real-time rendering and dynamic display of alarm information, and the customization and update of alarm rules are not flexible enough. Summary of the Invention

[0004] The present invention provides a generation method based on power grid data topological map rendering and alarm display, including:

[0005] S1. Receive power grid topological data;

[0006] S2. Call HTML5 to generate a canvas and a data container;

[0007] S3. Parse the power grid topological data and analyze its data types, where the data types include node data types and connection line data types;

[0008] S4. If the data type is a node data type, bind the node and display the node status; if the data type is a connection line data type, generate a connection line according to the direction and display the connection line status;

[0009] S5. Based on the node status and connection line status, real-time render the power grid topological map and display alarm information.

[0010] Further, after receiving the power grid topological data in step S1, it further includes:

[0011] S21. Traverse the information array in the power grid topological data;

[0012] S22. Determine the type of elements in the information array;

[0013] S23. If the element type is a node, further determine whether it is a cluster head node. If so, load the coordinates of the cluster head node; otherwise, represent it with the default 3D power grid icon. Obtain the node name and coordinates and place the node;

[0014] S24. If the element type is a connection line, obtain the two end nodes of the connection line and their pointing directions, and place the connection line according to the end nodes and directions.

[0015] Furthermore, the specific steps of calling HTML5 to generate the canvas and data container in step S2 include:

[0016] S31. Convert the received power grid topology data into an operable JavaScript object;

[0017] S32. Use the Canvas component of HTML5 to construct a graphical interface, and create a data container, a network element container, an alarm container, and a layer container;

[0018] S33. The data container listens for data changes through an event listener, and the event listener includes:

[0019] A data addition function, which is used to insert new data into the data container and specify the insertion position index;

[0020] A data deletion function, which is used to remove the specified data to be deleted from the data container;

[0021] A data clearing function, which is used to remove all data in the data container.

[0022] Furthermore, the data container is bound to the view component. When the data in the data container changes, the associated view component is automatically triggered to update the display.

[0023] Furthermore, the network element container nests the alarm container and the layer container, and the alarm container and the layer container are associated with the network element container; the alarm container stores alarm information, and the layer container stores topology level information. The dynamic update of the topology map is directly driven by modifying the data in the alarm container and the layer container.

[0024] Furthermore, the alarm information includes the following attributes:

[0025] The alarm type is a preset alarm classification identifier;

[0026] The alarm level value is a quantization value of the alarm severity set based on a preset rule;

[0027] The prompt content is preset text information corresponding to the alarm type;

[0028] When the node status meets the preset trigger condition, an alarm container is triggered to generate corresponding alarm information, and the display form of the alarm information includes color identification and text overlay.

[0029] Further, when parsing the power grid topology data in step S3, JSON format is used for data conversion, specifically:

[0030] S71. Receive the JSON format string sent by the server;

[0031] S72. Convert the string into a JavaScript object through a JSON parsing function.

[0032] Further, when displaying the node status and connection status in step S4, the following sub-steps are included:

[0033] S81. If the node status is the positioning coordinate, mark the node position on the canvas;

[0034] S82. If the node status is alarm information, overlay color identification and text prompt on the node icon;

[0035] S83. If the connection status is a directional connection, draw a connection with an arrow between two nodes.

[0036] Further, the rendering of the topology map and the alarm display are implemented based on HTML5, CSS3, jQuery, and Canvas components, and real-time data communication is performed with the server through the WebSocket protocol.

[0037] Further, the alarm display also includes custom alarm rules, specifically:

[0038] S101. Define the mapping relationship between alarm types, colors, and prompt contents;

[0039] S102. Modify the alarm level threshold and alarm trigger condition according to the actual application scenario.

[0040] According to the above embodiments of the present invention, at least the following beneficial effects are achieved: The present invention can realize the real-time rendering of the power grid topology map and the dynamic display of alarm information based on HTML5 and Canvas technologies. By parsing the power grid topology data into node and connection data types and binding the node status and connection status in real time, the power grid topology map can be efficiently drawn and the alarm information can be displayed. This method utilizes the cross-platform characteristics of HTML5 and can run seamlessly on different operating systems, reducing the complexity of development and maintenance, while improving the deployment efficiency and application scope of the system.

[0041] In addition, the present invention can flexibly meet the requirements of different application scenarios by customizing alarm rules and dynamically updating alarm information. Through the collaborative work of data containers, network element containers, alarm containers, and layer containers, dynamic updates of the topology map and real-time display of alarm information can be achieved. The display forms of alarm information include color identification and text overlay, which facilitate managers to quickly identify and handle faults, thereby improving the monitoring efficiency and operation and maintenance level of the power grid system. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] By reading the following detailed description with reference to the accompanying drawings, the above and other objects, features, and advantages of the exemplary embodiments of the present invention will become readily understandable. In the drawings, several embodiments of the present invention are shown by way of example and not limitation, wherein:

[0043] Figure 1 is a flowchart of a method for generating a power grid data topology map rendering and alarm display provided by an embodiment of the present invention;

[0044] Figure 2 is a basic topology map drawing flowchart provided by an embodiment of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0045] The principles and spirit of the present invention will be described below with reference to several exemplary embodiments. It should be understood that these embodiments are given only to enable those skilled in the art to better understand and implement the present invention, and not to limit the scope of the present invention in any way. On the contrary, these embodiments are provided to make the present invention more thorough and complete, and to be able to fully convey the scope of the present invention to those skilled in the art.

[0046] Those skilled in the art know that the embodiments of the present invention can be implemented as a system, device, equipment, method, or computer program product. Therefore, the present invention can be specifically implemented in the following forms: completely hardware, completely software (including firmware, resident software, microcode, etc.), or a combination of hardware and software.

[0047] It should be noted that any number of elements in the drawings is for illustration rather than limitation, and any naming is only for distinction and does not have any limiting meaning.

[0048] Reference is made below to Figure 1 , Figure 1 is a flowchart of a method for generating a power grid data topology map rendering and alarm display provided by an embodiment of the present invention. As Figure 1 shown, a method for generating a power grid data topology map rendering and alarm display includes:

[0049] S1. Receive power grid topology data;

[0050] S2. Call HTML5 to generate a canvas and a data container;

[0051] S3. Parse the power grid topology data and analyze its data types, where the data types include node data types and connection line data types;

[0052] S4. If the data type is a node data type, bind the node and display the node status; if the data type is a connection line data type, generate a connection line according to the direction and display the connection line status;

[0053] S5. Based on the node status and connection line status, render the power grid topology map in real time and display alarm information.

[0054] It should be noted that the present invention relates to a generation method for rendering a power grid data topology map and displaying alarms. Its core steps include receiving power grid topology data, calling HTML5 to generate a canvas and a data container, parsing the power grid topology data and analyzing its data types, binding nodes or connection lines and displaying their statuses, and rendering the power grid topology map in real time and displaying alarm information. Power grid topology data refers to the relationship data of each node and connection line in the power grid system, usually including the position information, status information of nodes, and the connection relationship between connection lines. HTML5 is a standard technology for building web pages and applications, and Canvas is a graphics drawing component in HTML5 for dynamically generating graphics on web pages. A data container is an object used to store and manage power grid topology data and can respond to data changes in real time through event listeners.

[0055] Specifically, the power grid topology data can be transmitted in JSON format by a server. After the front end receives the data, it uses a JSON parsing function to convert it into an operable JavaScript object. Node data types include information such as the name, coordinates, and status of nodes, while connection line data types include the two end nodes of the connection line and their pointing directions. The data container listens for data changes through event listeners, and the event listeners include a data addition function, a data deletion function, and a data clearing function, which are used to insert new data, remove specified data, and clear all data respectively. The network element container nests an alarm container and a layer container. The alarm container is used to store alarm information, and the layer container is used to store topology level information. By modifying the data in these containers, the dynamic update of the topology map can be directly driven.

[0056] Preferably, when parsing the power grid topology data, if the data type is node data type, bind the nodes and display the node status, which may include the positioning coordinates and alarm information. If the node status is the positioning coordinates, mark the node position on the canvas; if the node status is the alarm information, overlay a color identifier and text prompt on the node icon. If the data type is connection line data type, generate connection lines according to the direction and display the connection line status, which may include directional connection lines. At this time, draw arrowed lines between two nodes. The display form of the alarm information includes color identifier and text overlay. The color identifier can set different colors according to the alarm level, and the text overlay can display the specific alarm prompt content. In this way, the alarm information in the power grid topology map can be intuitively displayed, facilitating the management personnel to quickly identify and handle faults.

[0057] As Figure 2 shown, a flowchart of drawing a basic topology map of some embodiments, after receiving the power grid topology data in step S1, includes:

[0058] S21. Traverse the information array in the power grid topology data;

[0059] S22. Judge the type of the elements in the information array;

[0060] S23. If the element type is a node, further judge whether it is a cluster head node. If so, load the cluster head node coordinates; otherwise, represent it with the default 3D power grid icon; obtain the node name and coordinates and place the node;

[0061] S24. If the element type is a connection line, obtain the two end nodes of the connection line and their pointing directions, and place the connection line according to the end nodes and the direction.

[0062] It should be noted that after receiving the power grid topology data, the present invention further includes traversing the information array in the power grid topology data, judging the type of the elements in the information array, and performing corresponding processing according to the element type. The information array refers to a structured data set storing node and connection line information in the power grid topology data, usually stored in the form of an array. The element types include two types: nodes and connection lines. The node type represents the equipment or connection points in the power grid, and the connection line type represents the connection relationship between nodes. The cluster head node refers to a node with special functions in the power grid topology, usually used to represent the key equipment or hubs in the power grid.

[0063] Specifically, when traversing the information array, first determine the type of the element. If the element type is a node, further determine whether the node is a cluster head node. If it is a cluster head node, load its coordinate information; if it is not a cluster head node, use the default 3D power grid icon to represent it. The name and coordinate information of the node are used to accurately place the node on the canvas. If the element type is a connection line, obtain the two end nodes of the connection line and its pointing direction, and draw the connection line on the canvas based on this information. The end nodes of the connection line refer to the two nodes connected by the connection line, and the pointing direction represents the current or signal transmission direction of the connection line.

[0064] Preferably, when determining whether a node is a cluster head node, it can be identified through the attribute field of the node, such as the type identifier or function identifier of the node. For the cluster head node, its predefined coordinate information can be loaded to ensure its accurate position in the topology diagram. For non-cluster head nodes, the default 3D power grid icon can be customized according to the type of the node, such as using different icons to represent devices such as transformers and switches. When drawing the connection line, an arrowed connection line can be drawn according to the direction attribute of the connection line, and the arrow direction represents the current or signal transmission direction. In this way, the accuracy and readability of the power grid topology diagram can be ensured, facilitating the management personnel to quickly understand the power grid structure.

[0065] In some embodiments, the specific steps of calling HTML5 to generate the canvas and data container in step S2 include:

[0066] S31. Convert the received power grid topology data into an operable JavaScript object;

[0067] S32. Use the Canvas component of HTML5 to construct a graphical interface, and create a data container, a network element container, an alarm container, and a layer container;

[0068] S33. The data container listens for data changes through an event listener, and the event listener includes:

[0069] A data addition function for inserting new data into the data container and specifying the insertion position index;

[0070] A data deletion function for removing the specified data to be deleted from the data container;

[0071] A data clearing function for removing all data in the data container.

[0072] It should be noted that when the present invention calls HTML5 to generate a canvas and data containers, it specifically includes converting the received power grid topology data into an operable JavaScript object, constructing a graphical interface using the Canvas component of HTML5, and simultaneously creating data containers, network element containers, alarm containers, and layer containers. A JavaScript object refers to a data structure that can be operated on programmatically by the front end, usually storing data in the form of key-value pairs. The Canvas component is a tool provided by HTML5 for drawing graphics on web pages, supporting dynamic generation and update of graphics. The data container is used to store and manage power grid topology data, the network element container is used to store graphical information of power grid elements, the alarm container is used to store alarm information, and the layer container is used to store hierarchical information of the topology map.

[0073] Specifically, when converting the power grid topology data into a JavaScript object, the JSON format string sent by the server can be converted into an object operable by the front end through a JSON parsing function. The Canvas component is used to construct the graphical interface, and the data container listens for data changes through event listeners, which include a data addition function, a data deletion function, and a data clearing function. The data addition function is used to insert new data into the data container and specify the insertion position index, the data deletion function is used to remove the specified data to be deleted from the data container, and the data clearing function is used to remove all data from the data container. The network element container nests the alarm container and the layer container. The alarm container stores alarm information, and the layer container stores topology hierarchical information. By modifying the data in these containers, the dynamic update of the topology map can be directly driven.

[0074] Preferably, when creating the data container, real-time update and synchronization of data can be achieved through event listeners. For example, when the data in the data container changes, the associated view component is automatically triggered to update the display. The alarm container and the layer container in the network element container can achieve dynamic update of alarm information and topology levels through association with the network element container. The alarm information in the alarm container can include alarm type, alarm level, and prompt content. The alarm type is a preset alarm classification identifier, the alarm level is a quantified value of the alarm severity set based on preset rules, and the prompt content is preset text information corresponding to the alarm type. In this way, the real-time nature and accuracy of the power grid topology map can be ensured, facilitating managers to quickly identify and handle faults.

[0075] In some embodiments, the data container is bound to the view component. When the data in the data container changes, the associated view component is automatically triggered to update the display.

[0076] It should be noted that in the present invention, the data container is bound to the view component. When the data in the data container changes, it automatically triggers the update and display of the associated view component. The view component refers to the graphical interface elements used to display the power grid topology diagram, usually including nodes, connection lines, alarm information, etc. The data container listens for data changes through an event listener. An event listener is a mechanism used to trigger corresponding operations when data changes. By binding the data container to the view component, real-time update and synchronization of data can be achieved, ensuring the dynamic display of the power grid topology diagram.

[0077] Specifically, the event listener in the data container includes a data addition function, a data deletion function, and a data clearing function. The data addition function is used to insert new data into the data container and specify the insertion position index. The data deletion function is used to remove the specified data to be deleted from the data container. The data clearing function is used to remove all data in the data container. When the data in the data container changes, such as adding, deleting, or clearing data, the event listener will automatically trigger the update and display of the associated view component. The view component can dynamically adjust the display of nodes, connection lines, and alarm information according to the changes in the data container, ensuring the real-time nature and accuracy of the power grid topology diagram.

[0078] Preferably, when binding the data container to the view component, real-time update of data can be achieved through the callback function of the event listener. For example, when a new node data is added to the data container, the event listener will automatically trigger the view component to add the corresponding node icon on the canvas. When a connection line data is deleted from the data container, the event listener will automatically trigger the view component to remove the corresponding connection line on the canvas. In addition, the view component can dynamically adjust the display of alarm information according to the data changes in the data container. For example, when the node status changes, the alarm indicator and prompt content on the node are automatically updated. In this way, real-time update of the power grid topology diagram and dynamic display of alarm information can be ensured, facilitating managers to quickly identify and handle faults.

[0079] In some embodiments, the network element container nests an alarm container and a layer container, and the alarm container and the layer container are associated with the network element container; the alarm container stores alarm information, and the layer container stores topology level information, and the dynamic update of the topology diagram is directly driven by modifying the data in the alarm container and the layer container.

[0080] It should be noted that in the present invention, the network element container nests the alarm container and the layer container, and the alarm container and the layer container are associated with the network element container. The network element container refers to a container for storing graphical information and topological relationships of power grid elements. The alarm container is used to store alarm information, and the layer container is used to store hierarchical information of the topological map. By associating the alarm container and the layer container with the network element container, dynamic updates of alarm information and topological levels can be achieved, ensuring the real-time nature and accuracy of the power grid topological map.

[0081] Specifically, the data stored in the network element container is mainly used to generate topological relationships and graphically display network elements. The alarm information stored in the alarm container includes alarm type, alarm level, and prompt content. The alarm type is a preset alarm classification identifier, the alarm level is a quantified value of the alarm severity set based on preset rules, and the prompt content is preset text information corresponding to the alarm type. The topological level information stored in the layer container includes different hierarchical structures of the power grid topological map, such as the high-voltage layer, medium-voltage layer, and low-voltage layer. By modifying the data in the alarm container and the layer container, the dynamic update of the topological map can be directly driven, ensuring the real-time display of the power grid topological map.

[0082] Preferably, when modifying the data in the alarm container and the layer container, the dynamic update of the data can be achieved through the association with the network element container. For example, when the alarm information in the alarm container changes, the network element container will automatically update the associated view components to display the corresponding alarm identifier and prompt content. When the topological level information in the layer container changes, the network element container will automatically adjust the display level of the topological map to ensure the readability and accuracy of the power grid topological map. In addition, the alarm information in the alarm container can be customized according to the actual application scenario, such as setting different alarm level thresholds and alarm trigger conditions to meet the monitoring requirements of different power grid systems. In this way, the real-time update of the power grid topological map and the dynamic display of alarm information can be ensured, facilitating the management personnel to quickly identify and handle faults.

[0083] In some embodiments, the alarm information includes the following attributes:

[0084] The alarm type is a preset alarm classification identifier;

[0085] The alarm level value is a quantified value of the alarm severity set based on preset rules;

[0086] The prompt content is preset text information corresponding to the alarm type;

[0087] When the node status meets the preset trigger condition, the alarm container is triggered to generate the corresponding alarm information, and the display form of the alarm information includes color identification and text overlay.

[0088] It should be noted that the alarm information in the present invention includes an alarm type, an alarm level value, and a prompt content. The alarm type refers to a preset alarm classification identifier used to distinguish different types of alarms, such as low battery alarm, overload alarm, etc. The alarm level value is a quantitative value of the alarm severity set based on a preset rule, and the larger the value, the more severe the alarm. The prompt content is a preset text information corresponding to the alarm type, used to display specific alarm prompts in the power grid topology diagram. When the node status meets the preset trigger condition, an alarm container is triggered to generate the corresponding alarm information, and the display form of the alarm information includes color identification and text overlay, which is convenient for management personnel to quickly identify and handle faults.

[0089] Specifically, the alarm type can be customized according to the actual application scenario. For example, low battery alarm, overload alarm, short circuit alarm, etc. can be set. The alarm level value can be set through a preset rule. For example, the alarm level is divided into levels 1 to 5, and the larger the value, the more severe the alarm. The prompt content can be set with different text information according to the alarm type. For example, the low battery alarm can display "Low Battery! Please Change Battery", and the overload alarm can display "Overload! Please Check Load". When the node status meets the preset trigger condition, such as the node battery being lower than a certain threshold or the node load exceeding a certain threshold, the alarm container will automatically generate the corresponding alarm information and overlay the color identification and text prompt on the node icon.

[0090] Preferably, when setting the alarm information, the readability of the alarm information can be enhanced by means of color identification and text overlay. For example, the low battery alarm can use a red identification, the overload alarm can use a yellow identification, and the short circuit alarm can use an orange identification. The text overlay can display the specific alarm prompt content, such as "Low Battery! PleaseChange Battery" or "Overload! Please Check Load". In addition, the trigger condition of the alarm information can be customized according to the actual application scenario, such as setting different power thresholds, load thresholds, etc. In this way, the intuitiveness and accuracy of the alarm information can be ensured, which is convenient for management personnel to quickly identify and handle faults, and improves the monitoring efficiency and operation and maintenance level of the power grid system.

[0091] In some embodiments, when parsing the power grid topology data in step S3, data conversion is performed in JSON format, specifically:

[0092] S71. Receive the JSON format string sent by the server;

[0093] S72. Convert the string into a JavaScript object through a JSON parsing function.

[0094] It should be noted that when parsing the power grid topology data in the present invention, JSON format is used for data conversion. JSON (JavaScript Object Notation) is a lightweight data exchange format, usually used for data transmission between the front end and the back end. The JSON format string sent by the server contains the power grid topology data, and the front end converts the string into an operable JavaScript object through a JSON parsing function. The JavaScript object is a data structure that the front end can operate on programmatically, usually storing data in the form of key-value pairs. Through the data conversion in JSON format, the efficient transmission and parsing of the power grid topology data can be ensured.

[0095] Specifically, the JSON format string sent by the server contains the node and connection information of the power grid topology data. After receiving the JSON format string, the front end uses a JSON parsing function (such as JSON.parse()) to convert the string into a JavaScript object. The node information in the JavaScript object includes the name, coordinates, status, etc. of the node, and the connection information includes the two end nodes of the connection and its pointing direction. Through the data conversion in JSON format, the structuring and operability of the power grid topology data can be ensured, facilitating data parsing and graphical display by the front end.

[0096] Preferably, when parsing the JSON format string, real-time processing of the data can be achieved through the callback function of the JSON parsing function. For example, when the server sends a new JSON format string, the front end can immediately call the JSON parsing function to convert the string into a JavaScript object and update the display of the power grid topology map. In addition, the data conversion in JSON format can support complex data structures, such as nested node and connection information, ensuring the integrity and accuracy of the power grid topology data. In this way, the efficient transmission and parsing of the power grid topology data can be ensured, improving the real-time performance and accuracy of the power grid topology map.

[0097] In some embodiments, when displaying the node status and connection status in step S4, the following sub-steps are included:

[0098] S81. If the node status is the positioning coordinates, mark the node position on the canvas;

[0099] S82. If the node status is the warning information, superimpose a color identifier and a text prompt on the node icon;

[0100] S83. If the connection status is the directional connection, draw a connection with an arrow between the two nodes.

[0101] It should be noted that when the present invention displays the node status and the connection status, it includes marking the node positions on the canvas, overlaying color identifiers and text prompts on the node icons, and drawing arrowed connections between two nodes. The node status refers to the current status information of the node, such as the positioning coordinates or alarm information of the node. The connection status refers to the current status information of the connection, such as the direction information of the connection. By displaying the node status and the connection status, the node and connection information in the power grid topology diagram can be visually presented, facilitating managers to quickly identify and handle faults.

[0102] Specifically, the node status may include positioning coordinates and alarm information. If the node status is the positioning coordinates, the position of the node is marked on the canvas to ensure the accurate display of the node in the topology diagram. If the node status is the alarm information, color identifiers and text prompts are overlaid on the node icon. The color identifiers can be set to different colors according to the alarm level, and the text prompts can display the specific alarm content. The connection status may include the directional connection. If the connection status is the directional connection, an arrowed connection is drawn between two nodes, and the arrow direction indicates the transmission direction of the current or signal. By displaying the node status and the connection status, the accuracy and readability of the power grid topology diagram can be ensured.

[0103] Preferably, when displaying the node status, the readability of the alarm information can be enhanced through color identifiers and text prompts. For example, low battery alarm can use a red identifier, overload alarm can use a yellow identifier, and short circuit alarm can use an orange identifier. The text prompts can display the specific alarm content, such as Low Battery! Please Change Battery or Overload! Please Check Load. When displaying the connection status, an arrowed connection can be drawn according to the direction attribute of the connection, and the arrow direction indicates the transmission direction of the current or signal. In this way, the intuitive display of the node status and the connection status can be ensured, facilitating managers to quickly identify and handle faults, and improving the monitoring efficiency and operation and maintenance level of the power grid system.

[0104] In some embodiments, the rendering and alarm display of the topology diagram are implemented based on HTML5, CSS3, jQuery and Canvas components, and real-time data communication with the server is performed through the WebSocket protocol.

[0105] It should be noted that the rendering and alarm display of the topological graph are implemented based on HTML5, CSS3, jQuery, and Canvas components, and real-time data communication with the server is carried out through the WebSocket protocol. HTML5 is a standard technology for constructing web page content, CSS3 is used to control the style and layout of web pages, jQuery is a JavaScript library that simplifies HTML document traversal, event handling, animation, and Ajax interactions, and Canvas is an element provided by HTML5 for drawing graphics. The WebSocket protocol is a protocol for full-duplex communication over a single TCP connection and is suitable for real-time data transmission. By combining these technologies, efficient and real-time rendering and alarm display of the power grid topological graph can be achieved.

[0106] Specifically, the Canvas component of HTML5 is used to create a dynamic graphical interface, CSS3 is used to define the styles of graphics and layouts, and jQuery is used to simplify DOM operations and event handling. The WebSocket protocol ensures real-time communication between the client and the server, enabling the topological graph and alarm information to be updated in a timely manner. The design of the data container allows data changes, including data addition, deletion, and clearing operations, to be listened to through event listeners, thereby dynamically updating the view components. The alarm container and the layer container are associated with the network element container. By modifying the data in these containers, the dynamic update of the topological graph can be directly driven.

[0107] Preferably, the display form of the alarm information includes color identification and text overlay, and the alarm type, alarm level, and prompt content can be customized according to the actual application scenario. For example, the alarm level can be set to different values according to preset rules to represent different degrees of severity. The alarm trigger condition can be dynamically adjusted according to changes in the node status to ensure the accuracy and timeliness of the alarm information. In addition, the rendering of the topological graph and the alarm display can carry out real-time data communication with the server through the WebSocket protocol to ensure the real-time and consistency of the data.

[0108] In some embodiments, the alarm display further includes a custom alarm rule, specifically:

[0109] S101. Define the mapping relationship between the alarm type, color, and prompt content;

[0110] S102. Modify the alarm level threshold and alarm trigger condition according to the actual application scenario.

[0111] It should be noted that the rendering and alarm display of the topological graph support various interactive operations, including zooming, panning, node clicking, and alarm information viewing. The zooming operation allows users to adjust the display ratio of the topological graph. The panning operation enables users to move the view to view the content in different areas. The node clicking operation is used to select a specific node and display its detailed information. The alarm information viewing is used to display the alarm data related to the node. These interactive operations are implemented through event listeners and JavaScript scripts to ensure that users can interact with the topological graph flexibly.

[0112] Specifically, the zooming operation is implemented through the mouse wheel or touch screen gestures, supporting zooming in or out of the topological graph proportionally, and the proportion range can be set according to actual needs. The panning operation is achieved by dragging the mouse or swiping on the touch screen, allowing users to move the view to any position. The node clicking operation is implemented by listening to the mouse click event. After clicking on a node, a pop-up window or sidebar can be triggered to display the attribute information or alarm data of the node. The alarm information viewing function is realized by clicking on the alarm identifier, supporting the display of alarm details in the form of a list or a pop-up window, including information such as alarm type, level, and time.

[0113] Preferably, the proportion range of the zooming operation can be set from ten percent to five hundred percent to ensure that users can view both the global layout and focus on details. The panning operation can be combined with a boundary limit function to prevent users from dragging the view to an invalid area. The node clicking operation supports customizing the content of the pop-up window, such as displaying the name, status, connection relationship, and historical data of the node. The alarm information viewing function can support alarm filtering and sorting, such as filtering by level, time, or type, to facilitate users to quickly locate key alarms. In addition, the interactive operations can be combined with animation effects, such as smooth zooming and fade-in animations, to enhance the user experience.

[0114] The above embodiments of the present invention have the following beneficial effects: The present invention can realize the real-time rendering of the power grid topological graph and the dynamic display of alarm information based on HTML5 and Canvas technologies. By receiving the power grid topological data and parsing the data types of its nodes and connections, the node status and connection status can be bound in real time, and the power grid topological graph can be efficiently drawn and the alarm information can be displayed. This method utilizes the cross-platform characteristics of HTML5 and can run seamlessly on different operating systems, reducing the complexity of development and maintenance, while improving the deployment efficiency and application scope of the system. By customizing alarm rules and dynamically updating alarm information, different application scenarios can be flexibly responded to, and the monitoring efficiency and operation and maintenance level of the power grid system can be improved.

[0115] In addition, the present invention can achieve dynamic update of the topology map and real-time display of alarm information through the collaborative work of data containers, network element containers, alarm containers, and layer containers. The display forms of alarm information include color identification and text overlay, which facilitate quick identification and handling of faults by management personnel. Real-time data communication with the server through the WebSocket protocol can ensure the real-time and accuracy of data. This method can also directly drive the dynamic update of the topology map by modifying the data in the alarm container and layer container, further improving the system's response speed and user experience.

[0116] Furthermore, the storage medium of the embodiment of the present application stores program instructions capable of implementing all the above methods. Among them, the program instructions can be stored in the above storage medium in the form of a software product, including several instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) or a processor to execute all or part of the steps of the methods described in various embodiments of the present application. The aforementioned storage medium includes: various media that can store program codes such as USB flash drives, mobile hard disks, read-only memories (ROMs), random access memories (RAMs), magnetic disks, or optical discs, or terminal devices such as computers, servers, mobile phones, and tablets.

[0117] The above description is only some preferred embodiments of the present invention and an explanation of the applied technical principles. Those skilled in the art should understand that the scope of the invention involved in the embodiments of the present invention is not limited to the technical solutions formed by the specific combination of the above technical features, and should also cover other technical solutions formed by any combination of the above technical features or their equivalent features without departing from the above inventive concept. For example, the technical solutions formed by mutually replacing the above features with the (but not limited to) technical features with similar functions disclosed in the embodiments of the present invention.

Claims

1. A generation method based on power grid data topology graph rendering and alarm display, characterized in that, It includes the following steps: S1. Receive power grid topology data; S2. Call HTML5 to generate a canvas and a data container; S3. Parse the power grid topology data and analyze its data types, where the data types include node data types and connection line data types; S4. If the data type is a node data type, bind the node and display the node status; if the data type is a connection line data type, generate a connection line according to the direction and display the connection line status; S5. Based on the node status and the connection line status, render the power grid topology map in real time and display warning information.

2. The generation method according to claim 1, characterized in that After receiving the power grid topology data in step S1, it further includes: S21. Traverse the information array in the power grid topology data; S22. Judge the type of elements in the information array; S23. If the element type is a node, further judge whether it is a cluster head node. If so, load the coordinates of the cluster head node, otherwise represent it with a default 3D power grid icon; obtain the node name and coordinates and place the node; S24. If the element type is a connection line, obtain the two end nodes of the connection line and their pointing directions, and place the connection line according to the end nodes and the direction.

3. The generation method according to claim 1, wherein The specific steps of calling HTML5 to generate a canvas and a data container in step S2 include: S31. Convert the received power grid topology data into an operable JavaScript object; S32. Use the Canvas component of HTML5 to build a graphical interface, and create a data container, a network element container, an alarm container, and a layer container; S33. The data container listens for data changes through an event listener, and the event listener includes: A data addition function for inserting new data into the data container and specifying the insertion position index; A data deletion function for removing the specified data to be deleted from the data container; A data clearing function for removing all data in the data container.

4. The generation method according to claim 3, wherein The data container is bound to the view component, and when the data in the data container changes, the associated view component is automatically triggered to update the display.

5. The generation method according to claim 3, wherein The network element container nests the alarm container and the layer container, and the alarm container and the layer container are associated with the network element container; the alarm container stores alarm information, and the layer container stores topology level information, and the dynamic update of the topology map is directly driven by modifying the data in the alarm container and the layer container.

6. The generation method according to claim 5, wherein The alarm information includes the following attributes: The alarm type is a preset alarm classification identifier; The alarm level value is a quantitative value of the alarm severity set based on a preset rule; The prompt content is a preset text information corresponding to the alarm type; When the node status meets a preset trigger condition, the alarm container is triggered to generate corresponding alarm information, and the display form of the alarm information includes color identification and text overlay.

7. The generation method according to claim 1, wherein When parsing the power grid topology data in step S3, JSON format is used for data conversion, specifically: S71. Receive the JSON format string sent by the server; S72. Convert the string into a JavaScript object through a JSON parsing function.

8. The generation method according to claim 1, wherein When displaying the node status and the connection line status in step S4, it includes the following sub-steps: S81. If the node status is the positioning coordinate, mark the node position on the canvas; S82. If the node status is the warning information, overlay a color identifier and a text prompt on the node icon; S83. If the connection status is the directional connection, draw a connection with an arrow between two nodes.

9. The generation method according to claim 1, wherein The rendering of the topology map and the warning display are implemented based on HTML5, CSS3, jQuery and Canvas components, and real-time data communication is performed with the server through the WebSocket protocol.

10. The generation method according to claim 1, wherein The warning display also includes a custom warning rule, specifically: S101. Define the mapping relationship between the warning type, color and prompt content; S102. Modify the warning level threshold and warning trigger conditions according to the actual application scenario.

Images