阅读说明：本技术 一种基于canvas的svg与echarts图形融合方法 (SVG and echarts graph fusion method based on canvas ) 是由 张翔 曾光辉 李惠成 陈东辉 于 2020-04-21 设计创作，主要内容包括：本发明实施例公开了一种基于canvas的svg与echarts图形融合方法,包括如下步骤：步骤100、对配电房一次接线图进行解析,并重新计算图形布局,将配电房一次接线图在内存中重新构建为虚拟DOM树结构；步骤200、根据虚拟DOM树结构,web端自动生成和绑定鼠标点击的事件,并通过设定的条件参数在服务器nodejs中对点击的事件进行数据查询,服务器nodejs根据查询到的配电房数据利用原生echarts组件进行渲染和初始化生成可视化曲线图形；步骤300、web端获取可视化曲线图形后在虚拟DOM树结构中的canvas标签中重绘所述可视化曲线图形,并重新渲染界面,实现配电房一二次接线图的融合与web动态功能的展示；本发明以解决配电房一次设备与监测数据无法在Web系统中融合展示的问题。(The embodiment of the invention discloses a canvas-based svg and echarts graph fusion method, which comprises the following steps: step 100, analyzing the primary wiring diagram of the power distribution room, recalculating the graphic layout, and reconstructing the primary wiring diagram of the power distribution room into a virtual DOM tree structure in a memory; 200, automatically generating and binding an event clicked by a mouse by a web end according to a virtual DOM tree structure, carrying out data query on the clicked event in a server nodejs through set condition parameters, and rendering and initializing the server nodejs by using a native echarts component according to queried power distribution room data to generate a visual curve graph; step 300, after acquiring the visual curve graph, the web end redraws the visual curve graph in a canvas label in a virtual DOM tree structure, and redraws an interface, so that the fusion of a primary and secondary wiring diagram of a power distribution room and the display of a web dynamic function are realized; the invention aims to solve the problem that primary equipment and monitoring data of a power distribution room cannot be displayed in a Web system in a fusion mode.)

1. A svg and echarts graph fusion method based on canvas is characterized by comprising the following steps:

step 100, analyzing the primary wiring diagram of the power distribution room, recalculating the graphic layout on the basis of the analysis result, reconstructing the primary wiring diagram of the power distribution room into a virtual DOM tree structure in a memory, and returning to the web end for displaying;

200, automatically generating and binding an event clicked by a mouse by a web end according to a virtual DOM tree structure, carrying out data query on the clicked event in a server nodejs through set condition parameters, rendering and initializing the server nodejs by using a native echarts component according to queried power distribution room data to generate a visual curve graph, and returning the graph to the web end;

step 300, after the web side obtains the visual curve graph, redrawing the visual curve graph in a canvas label in the virtual DOM tree structure, and redrawing an interface, so that the fusion of a primary and secondary wiring diagram of the power distribution room and the display of a web dynamic function are realized.

2. The canvas-based svg and echarts graphic fusion method as claimed in claim 1, wherein the distribution room primary wiring diagram is drawn by a configuration tool according to g language format standard.

3. The canvas-based svg and echarts graph fusion method as claimed in claim 1, wherein in step 100, the specific steps of analyzing the primary wiring diagram of the power distribution room are as follows: the method comprises the steps of obtaining a power distribution room primary wiring diagram drawn by a configuration tool, analyzing primitive data and graphic data according to rules, storing the primitive data and the graphic data in a symbol label, obtaining a remote signaling ID and a remote signaling ID from a database, rewriting the primitive data in the symbol label to an actual primitive according to a reference relation, deleting a symbol node, and eliminating reference.

4. The canvas-based svg and echarts graph fusion method according to claim 3, wherein the specific steps of reconstructing into the virtual DOM tree structure are as follows: according to the type and the number of the telemetering IDs and the telecommands IDs of the power distribution room primary wiring diagram, the graph layout is recalculated by combining a database, a canvas tag area is added to the power distribution room primary wiring diagram after the graph layout, the width and the height are set, the power distribution room primary wiring diagram is reconstructed into a virtual DOM tree structure in a memory according to the set width and height, and the virtual DOM tree structure is returned to the web end for displaying.

5. The canvas-based svg and echarts graph fusion method as claimed in claim 1, wherein the specific steps of generating the visual curve graph according to the virtual DOM tree structure are as follows:

acquiring related primitives of the remote sensing ID and the remote signaling ID according to the virtual DOM tree structure, and automatically generating and binding a mouse click event corresponding to the related primitives by the web end;

clicking a corresponding associated primitive on the Web end, and inquiring monitoring data through a remote signaling ID and a remote sensing ID indicated by the associated primitive and a condition parameter;

the server nodejs receives the data query of the click event with the condition parameters;

and the server nodejss uses the native echarts component to render rules and initialize option according to the inquired power distribution room data to generate a visual curve graph and returns the graph to the browser.

Technical Field

The embodiment of the invention relates to the technical field, in particular to a svg and echarts graph fusion method based on canvas.

Background

The power distribution room is the most important power supply node in the distribution network, and as the power distribution rooms are numerous and are distributed very dispersedly and widely in regions, the workload of artificial daily operation and maintenance is reduced by applying an intelligent means, and the construction of the intelligent power distribution room for improving the operation and maintenance level and the power supply reliability is great tendency.

In order to realize the state monitoring of equipment in a power distribution room, the real-time monitoring of the environment and the safety control of behaviors, the aim that the development of the distribution network technology is smoothly realized towards the full-element and multi-field comprehensive promotion of the digital, lean and intelligent transformation and driving of the equipment control of the power distribution room is achieved, and a visual display method which accords with the dynamic association characteristics of the electrical primary and secondary information is needed.

The existing visual display scheme:

(1) based on a C/S (client/server) framework, the method has the defects of overstaffed content, complex structure, great engineering maintenance difficulty and easy non-uniformity of local and remote interface styles;

(2) based on the B/S framework, the primary wiring diagram is separated from the equipment data display interface, namely the svg diagram displays the primary wiring diagram, the echarts component displays the data interface, the two are distinct and have weak logical association, and the visualized information of the intelligent power distribution room dynamically associated with the primary information and the secondary information cannot be vividly displayed.

Disclosure of Invention

Therefore, the embodiment of the invention provides a method for displaying monitoring data of a power distribution room in a Web system.

In order to achieve the above object, an embodiment of the present invention provides the following:

a svg and echarts graph fusion method based on canvas comprises the following steps:

step 100, analyzing the primary wiring diagram of the power distribution room, recalculating the graphic layout on the basis of the analysis result, reconstructing the primary wiring diagram of the power distribution room into a virtual DOM tree structure in a memory, and returning to the web end for displaying;

200, automatically generating and binding an event clicked by a mouse by a web end according to a virtual DOM tree structure, carrying out data query on the clicked event in a server nodejs through set condition parameters, rendering and initializing the server nodejs by using a native echarts component according to queried power distribution room data to generate a visual curve graph, and returning the graph to the web end;

step 300, after the web side obtains the visual curve graph, redrawing the visual curve graph in a canvas label in the virtual DOM tree structure, and redrawing an interface, so that the fusion of a primary and secondary wiring diagram of the power distribution room and the display of a web dynamic function are realized.

In a preferred embodiment of the present invention, the power distribution room primary wiring diagram is drawn by a configuration tool according to the g language format standard.

As a preferred aspect of the present invention, in step 100, the specific step of analyzing the primary wiring diagram of the power distribution room is: the method comprises the steps of obtaining a power distribution room primary wiring diagram drawn by a configuration tool, analyzing primitive data and graphic data according to rules, storing the primitive data and the graphic data in a symbol label, obtaining a remote signaling ID and a remote signaling ID from a database, rewriting the primitive data in the symbol label to an actual primitive according to a reference relation, deleting a symbol node, and eliminating reference.

As a preferred scheme of the invention, the specific steps of reconstructing the virtual DOM tree structure are as follows: according to the type and the number of the telemetering IDs and the telecommands IDs of the power distribution room primary wiring diagram, the graph layout is recalculated by combining a database, a canvas tag area is added to the power distribution room primary wiring diagram after the graph layout, the width and the height are set, the power distribution room primary wiring diagram is reconstructed into a virtual DOM tree structure in a memory according to the set width and height, and the virtual DOM tree structure is returned to the web end for displaying.

As a preferred scheme of the invention, the specific steps of generating the visual curve graph according to the virtual DOM tree structure are as follows:

acquiring related primitives of the remote sensing ID and the remote signaling ID according to the virtual DOM tree structure, and automatically generating and binding a mouse click event corresponding to the related primitives by the web end;

clicking a corresponding associated primitive on the Web end, and inquiring monitoring data through a remote signaling ID and a remote sensing ID indicated by the associated primitive and a condition parameter;

the server nodejs receives the data query of the click event with the condition parameters;

and the server nodejss uses the native echarts component to render rules and initialize option according to the inquired power distribution room data to generate a visual curve graph and returns the graph to the browser.

The embodiment of the invention has the following advantages:

the invention realizes the monitoring of the power distribution room, realizes better fusion display of primary equipment and monitoring data of the power distribution room in a Web system based on the canvas svg and echarts graph fusion method, supports the transformation of a power distribution room comprehensive management system to digitalization and intellectualization, and can fully display the power distribution room visual information dynamically associated with primary and secondary information.

Drawings

In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to these drawings without inventive exercise.

FIG. 1 is a schematic view of the overall structure of an embodiment of the present invention;

fig. 2 is a schematic flow chart of analysis and reconstruction of a primary wiring diagram of a power distribution room in the embodiment of the present invention;

FIG. 3 is a schematic flow chart of visualization curve generation according to an embodiment of the present invention;

fig. 4 is a schematic flow chart of a secondary system fusion in the embodiment of the invention.

Detailed Description

In order to make the objects, features and advantages of the present invention more obvious and understandable, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention, and it is obvious that the embodiments described below are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.

The technical scheme of the invention is further explained by the specific implementation mode in combination with the attached drawings.

In the description of the present invention, it is to be understood that the terms "upper", "lower", "top", "bottom", "inner", "outer", and the like, indicate orientations or positional relationships based on those shown in the drawings, and are used only for convenience in describing the present invention and for simplicity in description, and do not indicate or imply that the referenced devices or elements must have a particular orientation, be constructed and operated in a particular orientation, and thus, are not to be construed as limiting the present invention.

The Canvas refers to a Canvas background in the Java language, and when processing an image file, a series of operations are performed by using the Canvas, that is, the Canvas is understood as an image background. Svg is scalable vector graphics, Echarts is a pure Javascript diagram library, can smoothly run on PC and mobile equipment, and is compatible with most current browsers and the like.

As shown in fig. 1 to 4, the present invention provides a canvas-based svg and echarts graph fusion method, which includes the following steps:

step 100, analyzing the primary wiring diagram of the power distribution room, recalculating the graphic layout on the basis of the analysis result, reconstructing the primary wiring diagram of the power distribution room into a virtual DOM tree structure in a memory, and returning to the web end for displaying;

200, automatically generating and binding an event clicked by a mouse by a web end according to a virtual DOM tree structure, carrying out data query on the clicked event in a server nodejs through set condition parameters, rendering and initializing the server nodejs by using a native echarts component according to queried power distribution room data to generate a visual curve graph, and returning the graph to the web end;

step 300, after the web side obtains the visual curve graph, redrawing the visual curve graph in a canvas label in the virtual DOM tree structure, and redrawing an interface, so that the fusion of a primary and secondary wiring diagram of the power distribution room and the display of a web dynamic function are realized.

And the power distribution room primary wiring diagram is drawn by a configuration tool according to the g language format standard.

In step 100, the specific steps of analyzing the primary wiring diagram of the power distribution room are as follows: the method comprises the steps of obtaining a power distribution room primary wiring diagram drawn by a configuration tool, analyzing primitive data and graphic data according to rules, storing the primitive data and the graphic data in a symbol label, obtaining a remote signaling ID and a remote signaling ID from a database, rewriting the primitive data in the symbol label to an actual primitive according to a reference relation, deleting a symbol node, and eliminating reference.

The specific steps of reconstructing the virtual DOM tree structure are as follows: according to the type and the number of the telemetering IDs and the telecommands IDs of the power distribution room primary wiring diagram, the graph layout is recalculated by combining a database, a canvas tag area is added to the power distribution room primary wiring diagram after the graph layout, the width and the height are set, the power distribution room primary wiring diagram is reconstructed into a virtual DOM tree structure in a memory according to the set width and height, and the virtual DOM tree structure is returned to the web end for displaying.

The specific steps of generating the visual curve graph according to the virtual DOM tree structure are as follows:

acquiring related primitives of the remote sensing ID and the remote signaling ID according to the virtual DOM tree structure, and automatically generating and binding a mouse click event corresponding to the related primitives by the web end;

clicking a corresponding associated primitive on the Web end, and inquiring monitoring data through a remote signaling ID and a remote sensing ID indicated by the associated primitive and a condition parameter;

the server nodejs receives the data query of the click event with the condition parameters;

and the server nodejss uses the native echarts component to render rules and initialize option according to the inquired power distribution room data to generate a visual curve graph and returns the graph to the browser.

The invention realizes the monitoring of the power distribution room, realizes better fusion display of primary equipment and monitoring data of the power distribution room in a Web system based on the canvas svg and echarts graph fusion method, supports the transformation of a power distribution room comprehensive management system to digitalization and intellectualization, and can fully display the power distribution room visual information dynamically associated with primary and secondary information.

It is noted that, herein, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus.

Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that changes, modifications, substitutions and alterations can be made in these embodiments without departing from the principles and spirit of the invention, the scope of which is defined in the appended claims and their equivalents.

The above-mentioned embodiments are only used for illustrating the technical solutions of the present invention, and not for limiting the same; although the present invention has been described in detail with reference to the foregoing embodiments, it will be understood by those of ordinary skill in the art that: the technical solutions described in the foregoing embodiments may still be modified, or some technical features may be equivalently replaced; and such modifications or substitutions do not depart from the spirit and scope of the corresponding technical solutions of the embodiments of the present invention.