一种基于canvas的svg与echarts图形融合方法
阅读说明：本技术 一种基于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.)
技术领域
本发明实施例涉及技术领域，具体涉及一种基于canvas的svg与echarts图形融合方法。
背景技术
配电房是配网中最重要的供电节点，由于配电房数量众多，而且在地域上分布非常分散和广泛，运用智能化手段降低人工日常运维的工作量，提高运维水平和供电可靠性的智能配电房建设是大势所趋。
为实现对配电房内设备的状态监测、环境的实时监控、行为的安全管控，支撑配网技术发展向数字化、精益化、智能化转型和驱动配电房设备管控全要素、多领域全面提升的目标顺利实现，需要一种符合电气一二次信息动态关联特征的可视化展示方法。
现有的可视化展示方案：
(1)基于C/S架构，其缺陷在于内容臃肿、结构复杂，工程维护难度极大，就地与远方界面风格很容易不统一；
(2)基于B/S架构，但是一次接线图跟设备数据展示界面分割开来，即svg图展示一次接线图，echarts组件展示数据界面，两者泾渭分明，逻辑关联弱，无法形象生动的展示一二次信息动态关联的智能配电房可视化信息。
发明内容
为此，本发明实施例提供一种，以解决现有技术中配电房一次设备与监测数据无法在Web系统中融合展示的问题。
为了实现上述目的，本发明的实施方式提供如下技术方案：
一种基于canvas的svg与echarts图形融合方法，包括如下步骤：
步骤100、对配电房一次接线图进行解析，在解析结果的基础上重新计算图形布局，将配电房一次接线图在内存中重新构建为虚拟DOM树结构，并返回至web端进行展示；
步骤200、根据虚拟DOM树结构，web端自动生成和绑定鼠标点击的事件，并通过设定的条件参数在服务器nodejs中对点击的事件进行数据查询，服务器nodejs根据查询到的配电房数据利用原生echarts组件进行渲染和初始化生成可视化曲线图形，并返回图形给web端；
步骤300、web端获取可视化曲线图形后在虚拟DOM树结构中的canvas标签中重绘所述可视化曲线图形，并重新渲染界面，实现配电房一二次接线图的融合与web动态功能的展示。
作为本发明的一种优选方案，所述配电房一次接线图按照g语言格式标准经由组态工具绘制完成。
作为本发明的一种优选方案，在步骤100中，对配电房一次接线图进行解析的具体步骤为：获取组态工具绘制的配电房一次接线图，根据规则解析图元数据和图形数据，并将图元数据和图形数据存储在symbol标签中，从数据库中获取遥信ID和遥测ID，将symbol标签中的图元数据根据引用关系重写到实际的图元处，并删除symbol节点，消除引用。
作为本发明的一种优选方案，重新构建为虚拟DOM树结构的具体步骤为：根据配电房一次接线图的遥信ID和遥测ID的类型及数量，结合数据库重新计算图形布局，在经过图形布局后的配电房一次接线图上添加canvas标签区域，并设置width和height，根据设置的width和height将配电房一次接线图在内存中重新构建为虚拟DOM树结构，并返回至web端进行展示。
作为本发明的一种优选方案，根据虚拟DOM树结构生成可视化曲线图形的具体步骤为：
根据虚拟DOM树结构获取遥测ID和遥信ID的关联图元，同时web端自动生成和绑定对应关联图元的鼠标点击事件；
Web端上点击相应关联图元，并通过关联图元指示的遥信ID和遥测ID以及条件参数查询监测数据；
服务器nodejs接受带条件参数的点击事件的数据查询；
服务器nodejss根据查询到的配电房数据，利用原生echarts组件渲染规则并初始化option，生成可视化曲线图形，并返回图形给浏览器。
本发明的实施方式具有如下优点：
本发明实现了对配电房的监测，基于canvas的svg与echarts图形融合方法，实现配电房一次设备与监测数据在Web系统中更好的融合展示，支撑配电房综合管理系统向数字化和智能化转型，能够充分展示一二次信息动态关联的配电房可视化信息。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其它的附图。
图1为本发明实施方式中的整体结构示意图；
图2为本发明实施方式中配电房一次接线图解析重构的流程示意图；
图3为本发明实施方式中可视化曲线生成的流程示意图；
图4为本发明实施方式中一二次系统融合的流程示意图。
具体实施方式
为使得本发明的发明目的、特征、优点能够更加的明显和易懂，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，下面所描述的实施例仅仅是本发明一部分实施例，而非全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。
下面结合附图并通过具体实施方式来进一步说明本发明的技术方案。
在本发明的描述中，需要理解的是，术语“上”、“下”、“顶”、“底”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。
Canvas在Java语言中具体指的是画布背景，在处理图像文件时，需要用画布，也就是利用canvas进行一系列的操作，canvas可以理解为图像背景。Svg是指可伸缩矢量图形，Echarts是一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器等。
如图1至图4所示，本发明提供了一种基于canvas的svg与echarts图形融合方法，包括如下步骤：
步骤100、对配电房一次接线图进行解析，在解析结果的基础上重新计算图形布局，将配电房一次接线图在内存中重新构建为虚拟DOM树结构，并返回至web端进行展示；
步骤200、根据虚拟DOM树结构，web端自动生成和绑定鼠标点击的事件，并通过设定的条件参数在服务器nodejs中对点击的事件进行数据查询，服务器nodejs根据查询到的配电房数据利用原生echarts组件进行渲染和初始化生成可视化曲线图形，并返回图形给web端；
步骤300、web端获取可视化曲线图形后在虚拟DOM树结构中的canvas标签中重绘所述可视化曲线图形，并重新渲染界面，实现配电房一二次接线图的融合与web动态功能的展示。
所述配电房一次接线图按照g语言格式标准经由组态工具绘制完成。
在步骤100中，对配电房一次接线图进行解析的具体步骤为：获取组态工具绘制的配电房一次接线图，根据规则解析图元数据和图形数据，并将图元数据和图形数据存储在symbol标签中，从数据库中获取遥信ID和遥测ID，将symbol标签中的图元数据根据引用关系重写到实际的图元处，并删除symbol节点，消除引用。
重新构建为虚拟DOM树结构的具体步骤为：根据配电房一次接线图的遥信ID和遥测ID的类型及数量，结合数据库重新计算图形布局，在经过图形布局后的配电房一次接线图上添加canvas标签区域，并设置width和height，根据设置的width和height将配电房一次接线图在内存中重新构建为虚拟DOM树结构，并返回至web端进行展示。
根据虚拟DOM树结构生成可视化曲线图形的具体步骤为：
根据虚拟DOM树结构获取遥测ID和遥信ID的关联图元，同时web端自动生成和绑定对应关联图元的鼠标点击事件；
Web端上点击相应关联图元，并通过关联图元指示的遥信ID和遥测ID以及条件参数查询监测数据；
服务器nodejs接受带条件参数的点击事件的数据查询；
服务器nodejss根据查询到的配电房数据，利用原生echarts组件渲染规则并初始化option，生成可视化曲线图形，并返回图形给浏览器。
本发明实现了对配电房的监测，基于canvas的svg与echarts图形融合方法，实现配电房一次设备与监测数据在Web系统中更好的融合展示，支撑配电房综合管理系统向数字化和智能化转型，能够充分展示一二次信息动态关联的配电房可视化信息。
需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。
尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。
以上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。