CN112562032A - 一种高效绘制工控网络拓扑图的方法、装置 - Google Patents

一种高效绘制工控网络拓扑图的方法、装置 Download PDF

Info

Publication number
CN112562032A
CN112562032A CN202011520819.2A CN202011520819A CN112562032A CN 112562032 A CN112562032 A CN 112562032A CN 202011520819 A CN202011520819 A CN 202011520819A CN 112562032 A CN112562032 A CN 112562032A
Authority
CN
China
Prior art keywords
node
layout
nodes
rendering
data
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202011520819.2A
Other languages
English (en)
Inventor
关成志
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Changyang Tech Beijing Co ltd
Original Assignee
Changyang Tech Beijing Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Changyang Tech Beijing Co ltd filed Critical Changyang Tech Beijing Co ltd
Priority to CN202011520819.2A priority Critical patent/CN112562032A/zh
Publication of CN112562032A publication Critical patent/CN112562032A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/001—Texturing; Colouring; Generation of texture or colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F30/00—Computer-aided design [CAD]
    • G06F30/10—Geometric CAD
    • G06F30/12—Geometric CAD characterised by design entry means specially adapted for CAD, e.g. graphical user interfaces [GUI] specially adapted for CAD
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F30/00—Computer-aided design [CAD]
    • G06F30/10—Geometric CAD
    • G06F30/18—Network design, e.g. design based on topological or interconnect aspects of utility systems, piping, heating ventilation air conditioning [HVAC] or cabling
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation

Landscapes

  • Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Theoretical Computer Science (AREA)
  • Geometry (AREA)
  • General Engineering & Computer Science (AREA)
  • Computational Mathematics (AREA)
  • Mathematical Analysis (AREA)
  • Mathematical Optimization (AREA)
  • Pure & Applied Mathematics (AREA)
  • Computer Hardware Design (AREA)
  • Evolutionary Computation (AREA)
  • Human Computer Interaction (AREA)
  • Architecture (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明提出了一种高效绘制工控网络拓扑图的方法、装置，该方法通过计算机实施，该方法包括：根据用户选择的布局类型在所述Zrender Canvas画布上进行工控网络拓扑图的布局；获取布局在Zrender Canvas画布上的工控网络拓扑图的配置数据，基于配置数据获取工控网络拓扑图中的全部节点，获取各节点的内部维护数据与业务数据，并将所述内部维护数据与业务数据采用视觉优先的节点高速加载方式记载到内存中，通过渲染框架从全部节点中配置需要进行渲染的节点，基于需要渲染的节点的业务数据对其进行渲染；更新步骤，检测各节点的业务数据是否发生变化，如果是，则基于变化后的业务数据对该节点在Zrender Canvas画布上进行重新渲染以进行更新。本发明提高了渲染效率，且拓扑图更新及时。

Description

一种高效绘制工控网络拓扑图的方法、装置
技术领域
本发明涉及数据处理技术领域，具体涉及一种高效绘制工控网络拓扑图的方法、装置。
背景技术
工控网络拓扑绘制是面向工业互联网应用的基本能力，目前国内现有工业拓扑图绘制界面解决方案通常采用基于Html DOM、CSS模板绘制或者采用cs组态软件自身提供组件绘制，采用上述模式通常会存在以下技术问题：
采用Html DOM绘制拓扑局限性差，拓扑节点拖拽设计不灵活，网络节点状态动画定义不易扩展，并且当画面中网络节点数量巨大时存在页面加载压力大的问题。
而采用组态形式的软件基本采用cs架构，cs架构存在的问题主要时兼容性不好，无法将拓扑在任意位置发布与共享。
工业控制网络布局复杂，在传统的信息网络拓扑绘制时均以SNMP协议采集后的数据生成拓扑，该方案面向小规模局部的交换网络时可应用，当遇到大规模跨网络边界、诸多PLC、仪器仪表组件组成的工业控制网络绘制时会显得极为困难。
发明内容
本发明针对上述现有技术中一个或多个技术缺陷，设计专门的方法以解决上述技术问题，并提出了如下技术方案。
一种高效绘制工控网络拓扑图的方法，所述绘制是基于Zrender Canvas画布的，该方法包括：
布局步骤，根据用户选择的布局类型在所述Zrender Canvas画布上进行工控网络拓扑图的布局，所述布局类型包括：大数据量布局、树形布局、环形布局和力导向布局；
渲染步骤，获取布局在Zrender Canvas画布上的工控网络拓扑图的配置数据，基于所述配置数据获取工控网络拓扑图中的全部节点，获取各节点的内部维护数据与业务数据，并将所述内部维护数据与业务数据采用视觉优先的节点高速加载方式记载到内存中，通过渲染框架从全部节点中配置需要进行渲染的节点，基于需要渲染的节点的业务数据对其进行渲染；
更新步骤，检测各节点的业务数据是否发生变化，如果是，则基于变化后的业务数据对该节点在Zrender Canvas画布上进行重新渲染以进行更新。
更进一步地，所述大数据量布局是按数据类型进行标记区分，并按照数据类型相同至类型相似做位置向外扩散，计算得出各节点位置信息并绘制；所述树形布局为：采用深度优先的方式遍历整个多叉树，如果是叶子节点则其x坐标等于其左兄弟的x坐标加上间距distance，如果是非叶子节点则其x坐标等于其左兄弟的x坐标加上间距distance，同时记录下偏移量，将所有的子节点按父节点的偏移量移动，计算多叉树的轮廓值，如果轮廓值小于0则说明左右子树存在重叠，将右子树偏移该轮廓值；所述环形布局为：基于节点总数求得各节点在环上的分段数，做排序、间隔计算后得到节各点对应位置形成布局；所述力导向布局为：一个布局网络中，节点与节点之间具有引力和斥力，从初始的随机无序的布局不断演变，逐渐趋于平衡稳定的布局方式称之为力导向布局。
更进一步地，在打开已经渲染后的工控网络拓扑图时，采用动画的方式将各节点从画布的原点或中心点更新到各节点的记录位置。
更进一步地，在渲染之后，对节点配置挂件调度动画函数使该节点做帧动画展示，对节点之间的关系配置flow元素做关系流动效果动画展示。
更进一步地，将绘制好的工控网络拓扑图的当前排版导出固定的json数据格式。
本发明还提出了一种高效绘制工控网络拓扑图的装置，所述绘制是基于ZrenderCanvas画布的，该装置包括：
布局单元，根据用户选择的布局类型在所述Zrender Canvas画布上进行工控网络拓扑图的布局，所述布局类型包括：大数据量布局、树形布局、环形布局和力导向布局；
渲染单元，获取布局在Zrender Canvas画布上的工控网络拓扑图的配置数据，基于所述配置数据获取工控网络拓扑图中的全部节点，获取各节点的内部维护数据与业务数据，并将所述内部维护数据与业务数据采用视觉优先的节点高速加载方式记载到内存中，通过渲染框架从全部节点中配置需要进行渲染的节点，基于需要渲染的节点的业务数据对其进行渲染；
更新单元，检测各节点的业务数据是否发生变化，如果是，则基于变化后的业务数据对该节点在Zrender Canvas画布上进行重新渲染以进行更新。
更进一步地，所述大数据量布局是按数据类型进行标记区分，并按照数据类型相同至类型相似做位置向外扩散，计算得出各节点位置信息并绘制；所述树形布局为：采用深度优先的方式遍历整个多叉树，如果是叶子节点则其x坐标等于其左兄弟的x坐标加上间距distance，如果是非叶子节点则其x坐标等于其左兄弟的x坐标加上间距distance，同时记录下偏移量，将所有的子节点按父节点的偏移量移动，计算多叉树的轮廓值，如果轮廓值小于0则说明左右子树存在重叠，将右子树偏移该轮廓值；所述环形布局为：基于节点总数求得各节点在环上的分段数，做排序、间隔计算后得到节各点对应位置形成布局；所述力导向布局为：一个布局网络中，节点与节点之间具有引力和斥力，从初始的随机无序的布局不断演变，逐渐趋于平衡稳定的布局方式称之为力导向布局。
更进一步地，在打开已经渲染后的工控网络拓扑图时，采用动画的方式将各节点从画布的原点或中心点更新到各节点的记录位置。
更进一步地，在渲染之后，对节点配置挂件调度动画函数使该节点做帧动画展示，对节点之间的关系配置flow元素做关系流动效果动画展示。
更进一步地，将绘制好的工控网络拓扑图的当前排版导出固定的json数据格式。
本发明的技术效果在于：本发明提出了一种高效绘制工控网络拓扑图的方法、装置，该方法通过计算机实施，该方法包括：布局步骤，根据用户选择的布局类型在所述Zrender Canvas画布上进行工控网络拓扑图的布局，所述布局类型包括：大数据量布局、树形布局、环形布局和力导向布局；渲染步骤，获取布局在Zrender Canvas画布上的工控网络拓扑图的配置数据，基于所述配置数据获取工控网络拓扑图中的全部节点，获取各节点的内部维护数据与业务数据，并将所述内部维护数据与业务数据采用视觉优先的节点高速加载方式记载到内存中，通过渲染框架从全部节点中配置需要进行渲染的节点，基于需要渲染的节点的业务数据对其进行渲染；更新步骤，检测各节点的业务数据是否发生变化，如果是，则基于变化后的业务数据对该节点在Zrender Canvas画布上进行重新渲染以进行更新。本发明的渲染过程中采用内部维护数据与业务数据分离式的视觉优先的节点高速加载方式，得到配置数据时获取全部节点数量，通过渲染框架配置需要渲染的节点并做渲染。而后异步操作，操作中将依照配置建立框架内部维护数据模型，提高了渲染效率，在更新时，因业务数据的设置是通过调用setOptions方法并传入预定数据格式以做到数据更新，可做到图表的数据双向绑定更新形式，原理是基于内部开发的数据diff算法，将过去值与现在值得深度对比做到按需更新，以做到实时地检测各节点的业务数据是否发生变化，从而保证拓扑图的及时更新。
附图说明
通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显。
图1是根据本发明的实施例的一种高效绘制工控网络拓扑图的方法的流程图。
图2是根据本发明的实施例的一种高效绘制工控网络拓扑图的装置的结构图。
具体实施方式
下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释相关发明，而非对该发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与有关发明相关的部分。
需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。
图1示出了本发明的一种高效绘制工控网络拓扑图的方法，该方法通过计算机实施，所述计算机包括处理器、存储器、显示器等等，该方法包括：
一种高效绘制工控网络拓扑图的方法，所述绘制是基于Zrender Canvas画布的，通过Zrender Canvas可以定义基础画布。
1)画布可自定像素宽高
a.建立画布容器，将比例尺、缩放、辅助线、网格线加入到画布容器中，并通过宽、高、背景属性配置画布。
2)带有比例尺和元素移动排版时的位置信息
a.建立比例尺组对象，将横向和纵向两个比例尺对象加入其中，按照原点固定定位放置到拓扑上下文对象中。
3)可拖入辅助线做到类似ps的排版布局形式
a.建立辅助线组对象，将其添加拓扑上下文对象中。初始辅助线祖为空，通过比例尺边缘拖拽创建一条横向或纵向辅助线(如果拖拽处是横向比例尺则出现横向辅助线，否则反之)加入到画布中，其构建的同画布网格线机制相同为一条线段。同时可以通过ctrl+R的快捷键实现辅助线的隐藏显示切换。
4)基于当前排版导出固定的json数据格式，以便于基础画布的复用。
该方法包括：
布局步骤S101，根据用户选择的布局类型在所述Zrender Canvas画布上进行工控网络拓扑图的布局，所述布局类型包括：大数据量布局、树形布局、环形布局和力导向布局；
渲染步骤S102，获取布局在Zrender Canvas画布上的工控网络拓扑图的配置数据，基于所述配置数据获取工控网络拓扑图中的全部节点，获取各节点的内部维护数据与业务数据，并将所述内部维护数据与业务数据采用视觉优先的节点高速加载方式记载到内存中，通过渲染框架从全部节点中配置需要进行渲染的节点，基于需要渲染的节点的业务数据对其进行渲染；本发明的渲染过程中采用内部维护数据与业务数据分离式的视觉优先的节点高速加载方式，得到配置数据时获取全部节点数量，通过渲染框架配置需要渲染的节点并做渲染。而后异步操作，操作中将依照配置建立框架内部维护数据模型，提高了渲染效率，这是本发明中的一个重要发明点。
优选地，在渲染时，还可以引入了web assembly，这需要建立node和c环境，借助c的性能优势处理数据来做到优于js数倍的处理性能。
更新步骤S103，检测各节点的业务数据是否发生变化，如果是，则基于变化后的业务数据对该节点在Zrender Canvas画布上进行重新渲染以进行更新。
在更新时，因业务数据的设置是通过调用setOptions方法并传入预定数据格式以做到数据更新，可做到图表的数据双向绑定更新形式，原理是基于内部开发的数据diff算法，将过去值与现在值得深度对比做到按需更新，以做到实时地检测各节点的业务数据是否发生变化，从而保证拓扑图的及时更新，这是本发明的一个重要发明点。
本发明在Zrender Canvas画布中利用TypeScript语言进行面向对象设计的工业网络拓扑绘制，通过画布、节点、线条、布局等面向对象设计理念，实现工控网络拓扑图的绘制功能。支持拓扑节点的拖拽绘制、关联关系线、线条动画、画布线条备注、画布字体备注、节点tooltip、节点状态变化等动态表现形式；同时包含点击对主机的查看，以及根据节点属性自动布局的功能，这是本发明的一个重要发明点。
在一个实施例中，所述大数据量布局是按数据类型进行标记区分，并按照数据类型相同至类型相似做位置向外扩散(即按照类型相同->类型相似做位置扩散)，计算得出各节点位置信息并绘制；所述树形布局为：采用深度优先的方式遍历整个多叉树，如果是叶子节点则其x坐标等于其左兄弟的x坐标加上间距distance，如果是非叶子节点则其x坐标等于其左兄弟的x坐标加上间距distance，同时记录下偏移量，将所有的子节点按父节点的偏移量移动，计算多叉树的轮廓值，如果轮廓值小于0则说明左右子树存在重叠，将右子树偏移该轮廓值；所述环形布局为：基于节点总数求得各节点在环上的分段数，做排序、间隔计算后得到节各点对应位置形成布局；所述力导向布局为：一个布局网络中，节点与节点之间具有引力和斥力，从初始的随机无序的布局不断演变，逐渐趋于平衡稳定的布局方式称之为力导向布局，力导向布局适用于描述事物间关系，比如人物关系、计算机网络关系等。本发明中，用户还可以拖拽图标到任意的位置。
在一个实施例中，在打开已经渲染后的工控网络拓扑图时，采用动画的方式将各节点从画布的原点或中心点更新到各节点的记录位置。从原点的更新方式为：全部节点从[0,0]点更新位置到节点记录位置；从中心点更新的方式为：全部节点[中心点X,中心点Y]点更新位置到节点记录位置。
在一个实施例中，在渲染之后，对节点配置挂件调度动画函数使该节点做帧动画展示，对节点之间的关系配置flow元素做关系流动效果动画展示。节点可通过配置挂件调度动画函数做帧动画配置，关系可通过配置flow元素做关系流动效果动画，也可配置LineDash属性做虚线偏移流动相过，即为节点和节点之间的关系配置相应的动画展示。
在一个实施例中，将绘制好的工控网络拓扑图的当前排版导出固定的json数据格式，便于被其他程序调用。
图2示出了本发明的一种高效绘制工控网络拓扑图的装置，该装置设置在计算机上，所述绘制是基于Zrender Canvas画布的，通过Zrender Canvas可以定义基础画布。
1)画布可自定像素宽高
a.建立画布容器，将比例尺、缩放、辅助线、网格线加入到画布容器中，并通过宽、高、背景属性配置画布。
2)带有比例尺和元素移动排版时的位置信息
a.建立比例尺组对象，将横向和纵向两个比例尺对象加入其中，按照原点固定定位放置到拓扑上下文对象中。
3)可拖入辅助线做到类似ps的排版布局形式
a.建立辅助线组对象，将其添加拓扑上下文对象中。初始辅助线祖为空，通过比例尺边缘拖拽创建一条横向或纵向辅助线(如果拖拽处是横向比例尺则出现横向辅助线，否则反之)加入到画布中，其构建的同画布网格线机制相同为一条线段。同时可以通过ctrl+R的快捷键实现辅助线的隐藏显示切换。
4)基于当前排版导出固定的json数据格式，以便于基础画布的复用。
该方法包括：
布局单元201，根据用户选择的布局类型在所述Zrender Canvas画布上进行工控网络拓扑图的布局，所述布局类型包括：大数据量布局、树形布局、环形布局和力导向布局；
渲染单元202，获取布局在Zrender Canvas画布上的工控网络拓扑图的配置数据，基于所述配置数据获取工控网络拓扑图中的全部节点，获取各节点的内部维护数据与业务数据，并将所述内部维护数据与业务数据采用视觉优先的节点高速加载方式记载到内存中，通过渲染框架从全部节点中配置需要进行渲染的节点，基于需要渲染的节点的业务数据对其进行渲染；本发明的渲染过程中采用内部维护数据与业务数据分离式的视觉优先的节点高速加载方式，得到配置数据时获取全部节点数量，通过渲染框架配置需要渲染的节点并做渲染。而后异步操作，操作中将依照配置建立框架内部维护数据模型，提高了渲染效率，这是本发明中的一个重要发明点。
优选地，在渲染时，还可以引入了web assembly，这需要建立node和c环境，借助c的性能优势处理数据来做到优于js数倍的处理性能。
更新单元203，检测各节点的业务数据是否发生变化，如果是，则基于变化后的业务数据对该节点在Zrender Canvas画布上进行重新渲染以进行更新。
在更新时，因业务数据的设置是通过调用setOptions方法并传入预定数据格式以做到数据更新，可做到图表的数据双向绑定更新形式，原理是基于内部开发的数据diff算法，将过去值与现在值得深度对比做到按需更新，以做到实时地检测各节点的业务数据是否发生变化，从而保证拓扑图的及时更新，这是本发明的一个重要发明点。
本发明在Zrender Canvas画布中利用TypeScript语言进行面向对象设计的工业网络拓扑绘制，通过画布、节点、线条、布局等面向对象设计理念，实现工控网络拓扑图的绘制功能。支持拓扑节点的拖拽绘制、关联关系线、线条动画、画布线条备注、画布字体备注、节点tooltip、节点状态变化等动态表现形式；同时包含点击对主机的查看，以及根据节点属性自动布局的功能，这是本发明的一个重要发明点。
在一个实施例中，所述大数据量布局是按数据类型进行标记区分，并按照数据类型相同至类型相似做位置向外扩散(即按照类型相同->类型相似做位置扩散)，计算得出各节点位置信息并绘制；所述树形布局为：采用深度优先的方式遍历整个多叉树，如果是叶子节点则其x坐标等于其左兄弟的x坐标加上间距distance，如果是非叶子节点则其x坐标等于其左兄弟的x坐标加上间距distance，同时记录下偏移量，将所有的子节点按父节点的偏移量移动，计算多叉树的轮廓值，如果轮廓值小于0则说明左右子树存在重叠，将右子树偏移该轮廓值；所述环形布局为：基于节点总数求得各节点在环上的分段数，做排序、间隔计算后得到节各点对应位置形成布局；所述力导向布局为：一个布局网络中，节点与节点之间具有引力和斥力，从初始的随机无序的布局不断演变，逐渐趋于平衡稳定的布局方式称之为力导向布局，力导向布局适用于描述事物间关系，比如人物关系、计算机网络关系等。本发明中，用户还可以拖拽图标到任意的位置。
在一个实施例中，在打开已经渲染后的工控网络拓扑图时，采用动画的方式将各节点从画布的原点或中心点更新到各节点的记录位置。从原点的更新方式为：全部节点从[0,0]点更新位置到节点记录位置；从中心点更新的方式为：全部节点[中心点X,中心点Y]点更新位置到节点记录位置。
在一个实施例中，在渲染之后，对节点配置挂件调度动画函数使该节点做帧动画展示，对节点之间的关系配置flow元素做关系流动效果动画展示。节点可通过配置挂件调度动画函数做帧动画配置，关系可通过配置flow元素做关系流动效果动画，也可配置LineDash属性做虚线偏移流动相过，即为节点和节点之间的关系配置相应的动画展示。
在一个实施例中，将绘制好的工控网络拓扑图的当前排版导出固定的json数据格式，便于被其他程序调用。
本发明的为了描述的方便，描述以上方法时以功能分为各种单元分别描述。当然，在实施本申请时可以把各单元的功能在同一个或多个软件和/或硬件中实现。
通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。
最后所应说明的是：以上实施例仅以说明而非限制本发明的技术方案，尽管参照上述实施例对本发明进行了详细说明，本领域的普通技术人员应当理解：依然可以对本发明进行修改或者等同替换，而不脱离本发明的精神和范围的任何修改或局部替换，其均应涵盖在本发明的权利要求范围当中。

Claims (10)

1.一种高效绘制工控网络拓扑图的方法，所述绘制是基于Zrender Canvas画布的，其特征在于，该方法包括：
布局步骤，根据用户选择的布局类型在所述Zrender Canvas画布上进行工控网络拓扑图的布局，所述布局类型包括：大数据量布局、树形布局、环形布局和力导向布局；
渲染步骤，获取布局在Zrender Canvas画布上的工控网络拓扑图的配置数据，基于所述配置数据获取工控网络拓扑图中的全部节点，获取各节点的内部维护数据与业务数据，并将所述内部维护数据与业务数据采用视觉优先的节点高速加载方式记载到内存中，通过渲染框架从全部节点中配置需要进行渲染的节点，基于需要渲染的节点的业务数据对其进行渲染；
更新步骤，检测各节点的业务数据是否发生变化，如果是，则基于变化后的业务数据对该节点在Zrender Canvas画布上进行重新渲染以进行更新。
2.根据权利要求1的方法，其特征在于，所述大数据量布局是按数据类型进行标记区分，并按照数据类型相同至类型相似做位置向外扩散，计算得出各节点位置信息并绘制；所述树形布局为：采用深度优先的方式遍历整个多叉树，如果是叶子节点则其x坐标等于其左兄弟的x坐标加上间距distance，如果是非叶子节点则其x坐标等于其左兄弟的x坐标加上间距distance，同时记录下偏移量，将所有的子节点按父节点的偏移量移动，计算多叉树的轮廓值，如果轮廓值小于0则说明左右子树存在重叠，将右子树偏移该轮廓值；所述环形布局为：基于节点总数求得各节点在环上的分段数，做排序、间隔计算后得到节各点对应位置形成布局；所述力导向布局为：一个布局网络中，节点与节点之间具有引力和斥力，从初始的随机无序的布局不断演变，逐渐趋于平衡稳定的布局方式称之为力导向布局。
3.根据权利要求2的方法，其特征在于，在打开已经渲染后的工控网络拓扑图时，采用动画的方式将各节点从画布的原点或中心点更新到各节点的记录位置。
4.根据权利要求2的方法，其特征在于，在渲染之后，对节点配置挂件调度动画函数使该节点做帧动画展示，对节点之间的关系配置flow元素做关系流动效果动画展示。
5.根据权利要求4的方法，其特征在于，将绘制好的工控网络拓扑图的当前排版导出固定的json数据格式。
6.一种高效绘制工控网络拓扑图的装置，所述绘制是基于Zrender Canvas画布的，其特征在于，该装置包括：
布局单元，根据用户选择的布局类型在所述Zrender Canvas画布上进行工控网络拓扑图的布局，所述布局类型包括：大数据量布局、树形布局、环形布局和力导向布局；
渲染单元，获取布局在Zrender Canvas画布上的工控网络拓扑图的配置数据，基于所述配置数据获取工控网络拓扑图中的全部节点，获取各节点的内部维护数据与业务数据，并将所述内部维护数据与业务数据采用视觉优先的节点高速加载方式记载到内存中，通过渲染框架从全部节点中配置需要进行渲染的节点，基于需要渲染的节点的业务数据对其进行渲染；
更新单元，检测各节点的业务数据是否发生变化，如果是，则基于变化后的业务数据对该节点在Zrender Canvas画布上进行重新渲染以进行更新。
7.根据权利要求6的装置，其特征在于，所述大数据量布局是按数据类型进行标记区分，并按照数据类型相同至类型相似做位置向外扩散，计算得出各节点位置信息并绘制；所述树形布局为：采用深度优先的方式遍历整个多叉树，如果是叶子节点则其x坐标等于其左兄弟的x坐标加上间距distance，如果是非叶子节点则其x坐标等于其左兄弟的x坐标加上间距distance，同时记录下偏移量，将所有的子节点按父节点的偏移量移动，计算多叉树的轮廓值，如果轮廓值小于0则说明左右子树存在重叠，将右子树偏移该轮廓值；所述环形布局为：基于节点总数求得各节点在环上的分段数，做排序、间隔计算后得到节各点对应位置形成布局；所述力导向布局为：一个布局网络中，节点与节点之间具有引力和斥力，从初始的随机无序的布局不断演变，逐渐趋于平衡稳定的布局方式称之为力导向布局。
8.根据权利要求7的装置，其特征在于，在打开已经渲染后的工控网络拓扑图时，采用动画的方式将各节点从画布的原点或中心点更新到各节点的记录位置。
9.根据权利要求7的装置，其特征在于，在渲染之后，对节点配置挂件调度动画函数使该节点做帧动画展示，对节点之间的关系配置flow元素做关系流动效果动画展示。
10.根据权利要求9的装置，其特征在于，将绘制好的工控网络拓扑图的当前排版导出固定的json数据格式。
CN202011520819.2A 2020-12-21 2020-12-21 一种高效绘制工控网络拓扑图的方法、装置 Pending CN112562032A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011520819.2A CN112562032A (zh) 2020-12-21 2020-12-21 一种高效绘制工控网络拓扑图的方法、装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011520819.2A CN112562032A (zh) 2020-12-21 2020-12-21 一种高效绘制工控网络拓扑图的方法、装置

Publications (1)

Publication Number Publication Date
CN112562032A true CN112562032A (zh) 2021-03-26

Family

ID=75031101

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011520819.2A Pending CN112562032A (zh) 2020-12-21 2020-12-21 一种高效绘制工控网络拓扑图的方法、装置

Country Status (1)

Country Link
CN (1) CN112562032A (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113342907A (zh) * 2021-06-29 2021-09-03 积成电子股份有限公司 一种用能信息采集系统台区拓扑画像绘制方法与系统
CN113934876A (zh) * 2021-12-21 2022-01-14 成都泰盟软件有限公司 一种基于Web的作业批改方法、装置及系统
CN115309397A (zh) * 2022-08-11 2022-11-08 广州芯德通信科技股份有限公司 一种数据解释模型的画布拓扑管理方法和系统

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113342907A (zh) * 2021-06-29 2021-09-03 积成电子股份有限公司 一种用能信息采集系统台区拓扑画像绘制方法与系统
CN113342907B (zh) * 2021-06-29 2023-02-21 积成电子股份有限公司 一种用能信息采集系统台区拓扑画像绘制方法与系统
CN113934876A (zh) * 2021-12-21 2022-01-14 成都泰盟软件有限公司 一种基于Web的作业批改方法、装置及系统
CN115309397A (zh) * 2022-08-11 2022-11-08 广州芯德通信科技股份有限公司 一种数据解释模型的画布拓扑管理方法和系统
CN115309397B (zh) * 2022-08-11 2023-04-07 广州芯德通信科技股份有限公司 一种数据解释模型的画布拓扑管理方法和系统

Similar Documents

Publication Publication Date Title
CN112562032A (zh) 一种高效绘制工控网络拓扑图的方法、装置
CN105574049B (zh) 移动应用的页面处理方法、装置和系统
CN104216691B (zh) 一种创建应用的方法及装置
CN105786526B (zh) 一种基于Web的高效流程图绘制系统及方法
US7814427B2 (en) Object model tree diagram
CN111428177A (zh) 用于web内容生成的方法和系统
AU2019205973B2 (en) Responsive resize
US20160342678A1 (en) Manipulation of arbitrarily related data
CN110069257A (zh) 一种界面处理方法、装置及终端
Jacobsen et al. Metrosets: Visualizing sets as metro maps
CN110009721A (zh) 生成由曲线表示的图像的三角网格
CN104267947A (zh) 一种编辑弹窗图片的方法及弹窗图片编辑装置
CA2817554A1 (en) Mobile content management system
CN111857893B (zh) 标注图形生成方法及装置
CN110363828A (zh) 一种绘制流程图的方法及绘制流程图的设备
WO2018231901A1 (en) Detecting and managing recurring patterns in device and service configuration data
CN104090769B (zh) 一种业务数据的图形展示方法和装置
JP7289942B2 (ja) フォント生成モデルトレーニング方法、フォントライブラリ作成方法、フォント生成モデルトレーニング装置、フォントライブラリ作成装置、電子機器、コンピュータ可読記憶媒体、及び、コンピュータプログラム
CN109359281A (zh) 动态表单生成方法及装置
CN113867694A (zh) 一种智能生成前端代码的方法和系统
CN109086515B (zh) 基于svg的智能变电站ssd中一次设备绘图信息的建模方法
CN111259164A (zh) 一种面向知识图谱的交互可视化方法及系统
US8140957B2 (en) Technique for controlling screen display
US10846061B2 (en) Development environment for real-time application development
WO2023045412A1 (zh) 页面创建方法、装置和系统、计算机装置和存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination