[发明专利]一种基于Antv的自定义可视化拓扑图的实现方法

权利要求书

1.一种基于Antv的自定义可视化拓扑图的实现方法，其特征在于，其实现方法包括以下5个模块：拓扑设备基础信息模块，拓扑图渲染模块，拓扑拖拽控制模块，拓扑链接控制模块，拓扑图数据化模块；

模块一：拓扑设备基础信息模块，用于初始化拓扑元素的基础信息内容，也是用户自定义的可扩展的信息，采用用户自定义的设备信息来进行绘制，包括列表呈现和初始化数据关联；

模块二、拓扑图渲染模块，用于数据加载和渲染，将数据的加载和图的渲染分开进行；

模块三、拓扑拖拽控制模块，用于给与每个设备元素绑定拖拽事件，定义参数和内容进行扩展图形想要的样式；

模块四、拓扑链接控制模块，用于增加鼠标移动到拓扑元素上的动作以及鼠标移出动作，将两个拓扑元素链接起来；

模块五、拓扑图数据化模块，包括了数据存储以及重新获取更新拓扑图链接信息。

2.根据权利要求1所述的基于Antv的自定义可视化拓扑图的实现方法，其特征在于：所述拓扑设备基础信息模块，具体实现方法如下：

1)列表呈现：

a、可扩展的设备信息管理，这个模块是不包含在整个拓扑图模块的，而是有一个单独的设备管理模块，该模块是对设备信息进行扩展的，常规的有设备名称name、设备类型type、设备Mac、设备编码code等,可扩展信息包括设备的状态，设备的告警级别level，设备的图片image(拓扑图中展示的图形)等，这边根据实际需求进行扩展，还可以添加比如设备是否可以跟其他设备关联，是否可以成为子集设备等复杂关联配置；

b、在vue中通过fetch获取远程的设备数据，这些数据包括了name(元素名称)、size(元素图片尺寸)、cid(元素唯一识别)、status(元素当前状态)、shape(拓扑图形类型)等，其他元素信息基本都包含在上述(a)的配置中，整理这些数据成数组，然后通过页面遍历绘制所需的列表；

2)初始化数据关联：列表中所呈现的设备应该是未出现在拓扑中的数据，所以在拓扑图中进行设备添加和删除的时候，需要动态的触发事件来更新关联的设备数据，方式就是采用公共组件通讯事件总线(eventBus)的自定义事件($emit)来传递触发的数据，

其数据格式为：

[{name,label,size,type,cid,ip,mac,status,deplay,typeName,description,manufacture,x:0,y:0,shape:customNode,image,inPoints:[0.5,0.5],outPoints:[0.5,0.5]},{}...]。

3.根据权利要求1所述的基于Antv的自定义可视化拓扑图的实现方法，其特征在于：所述拓扑图渲染模块，具体实现方法如下：

1)拓扑图容器：需要在HTML中创建一个用于容纳G6绘制的图的容器，通常div标签；G6在绘制时会在该容器下追加canvas标签，然后将图绘制在其中；

2)拓扑图数据准备：引入G6的数据源为JSON格式的对象；该对象中需要有节点(nodes)和边(edges)字段，分别用数组表示；nodes数组中包含节点对象，唯一的id是每个节点对象中必要的属性，x、y用于定位；edges数组中包含边对象，source和target是每条边的必要属性，分别代表了该边的起始点id与目标点id；

3)拓扑图实例化：图实例化时，至少需要为图设置容器、宽、高；采用G6.Graph来实例化拓扑图；

4)拓扑图渲染：数据的加载和图的渲染是两个步骤，可以分开进行，graph.data(initData)加载数据，graph.render()渲染数据。