一种基于jTopo的网络拓扑图展示方法与流程

本发明涉及到web前端数据可视化技术，尤其涉及一种基于jtopo的大数据量网络拓扑的编辑及展示方法。

背景技术：

随着云计算、大数据的迅速崛起，一轮产业和技术改革已悄然发生，如何挖掘大数据下的深层关系，进行直观有效的展示及良好的交互体验成为web前端及市场关注的焦点。现有的网络拓扑制作方法基本是采用flash来实现的，但是这种方法在安全性和兼容性方面存在的缺陷已不能满足于目前类似于互联网这类行业的高速扩展的业务需求。目前web版的网络拓扑图基本都采用基于html5的方式来制作。jtopo是一款国产化的完全基于html5canvas的面向开发人员，需要进行二次开发的关系、拓扑图形化界面开发工具。但是jtopo在原生所生成的拓扑图不仅功能非常简单，而且不支持界面的自动布局，每一个节点的位置都需要代码设置横纵坐标，在当前大数据背景下是非常不理想的，而且数据中心对应软硬件数量的逐渐增多，单单依靠工作人员对这些设备的监控，首先由于目前工作人员采用的监控方式为每隔一段时间则对这些软硬件进行一次工作状态的获取，不能保证获取各软硬件工作状态的实时性，其次由于工作人员可能由于自身的疏忽或者专业知识不够导致获取到的工作状态为错误的工作状态，不能够保证其可以准确的获取到各软硬件的工作状态，因此急需一种能够实时准确的获取到各软硬件工作状态的技术方案。

技术实现要素：

本发明的目的在于提供一种基于jtopo的网络拓扑图展示方法，用于解决上述现有技术的问题。

本发明一种基于jtopo的网络拓扑图展示方法，其中，包括：区域，能够提供编辑拓扑图使用的图元；该区域包括图元区以及编辑区；在绘制网络拓扑阶段从图元区拖拽添加设备；上传目标图标，获取该图标的路径以及名称，并上传服务器，并显示在页面图元区；进行图元拖拽；编辑区提供接受并显示对应图元以实现拓扑图编辑的画布；从设备库中获取一单位下的所有未添加到当前拓扑页面的设备；在画布的中心点进行画圆布局设备；或根据设备ip的大小，以当前位置为原点，进行4列矩阵布局排序；矩阵布局获取设备并根据设备的父节点fromip，对设备按父节点进行归类，将同属于一个父节点的设备放在同一个区域；分别对每一个面积区域按其中包含的设备自身ip大小进行排序；获取当舞台所有元素位置的边界大小，获取上边距及左边距；遍历画布上的所有图元，逐个规定其位置，并进行绘制存在父节点的设备以及不存在父节点的设备，绘制完毕后，把新绘制的区域且无固定位置的统一设置xy坐标，以画布的中心为原点，进行向右平铺排列；让画布居中显示。

根据本发明的基于jtopo的网络拓扑图展示方法的一实施例，其中，矩阵布局首先要获取设备并根据设备的父节点fromip，对设备按父节点进行归类，包括：数据准备：首先从设备表获得所有的设备信息，然后遍历设备信息；如果设备的fromip不存在，则将其放入没有父节点的设备数组中；如果设备的父节点fromip存在，则将父节点相等的设备放入同一个数组。

根据本发明的基于jtopo的网络拓扑图展示方法的一实施例，其中，如果设备的父节点fromip存在：绘制无父节点的设备，包括：绘制没有fromip的节点，以画布原点(x0,y0)为起点，分4列布局，首先确定第一个设备的位置(targetx，targety)，其中，targetx＝x0-(4*(60+100)),targety＝y0；x0为当前场景中心点x坐标，y0为当前场景中心点y坐标，60为节点宽度，4为列数；遍历节点将x坐标依次加100；绘制存在父节点的设备，包括：1、先绘制一个区域；2、根据节点数量，和第一个节点的宽高，计算区域框的宽高；3、遍历数据，假如当前遍历到的数据元为fromip，判断fromip有三种情况：根据fromip从画布中获取该节点，1)若存在，则在该节点所在区域的下方，创建树形布局的区域框，并把子节点放入框内，然后进行垂直拐角连线。

根据本发明的基于jtopo的网络拓扑图展示方法的一实施例，其中，如果设备的fromip不存在，判断该fromip是否存在于设备表中，若存在，则重新绘制一个区域，在该区域内则把该设备为原点，进行fromip对象内的节点绘制；如果节点不在区域内，则把该节点拿出来，新绘制一个区域，并把该节点放入中心，子节点根据它为原点进行圆形绘制。

根据本发明的基于jtopo的网络拓扑图展示方法的一实施例，其中，区域还包括告警区；告警区能够确定任一图元对应真实工作状态为异常工作状态时输出告警信息，在编辑区添加连线，首先选择父设备，在父设备上添加连线中选择连线类型，根服务器实时发送的设备状态值，进行图元及连线的颜色变化、大小变化来标识不同的设备状态。

根据本发明的基于jtopo的网络拓扑图展示方法的一实施例，其中，进行图元拖拽包括：先判断当前拖拽节点是否有自己的区域，如果有，从该区域脱离出来；获取该节点在画布的真实坐标，包含上下左右四个值；拖拽执行时，最当前画布的区域节点进行遍历，通过节点的坐标值与区域节点坐标值进行比对，来判断当前节点是否在区域节点之上，如果在区域节点之上，存储到临时数组中。如果该坐标存在两个以上区域，对他们的x坐标进行比较排序，取距离节点最近的区域作为当前区域。

根据本发明的基于jtopo的网络拓扑图展示方法的一实施例，其中，在外界发出更换命令下将指定的图标更换并自动刷新展示在图元区。

本发明的基于jtopo的网络拓扑图展示方法，基于jtopo二次开发的网络拓扑以提供一种能够实时准确的获取到数据中心中各软硬件的工作状态的技术方案。

附图说明

图1所示为图元展示图；

图2所示为乱序图；

图3所示为矩阵图；

图4所示为环形图。

具体实施方式

为使本发明的目的、内容、和优点更加清楚，下面结合附图和实施例，对本发明的具体实施方式作进一步详细描述。

图1所示为图元展示图，图2所示为乱序图，图3所示为矩阵图，图4所示为环形图，如图1至图4所示，本发明一种基于jtopo的网络拓扑图展示方法，实现的应用拓扑图编辑器，包括图元区、编辑区、告警区。

该区域用于提供编辑拓扑图使用的图元；该模块可以在外界发出更换命令下将指定的图标更换并自动刷新展示在图元区。在绘制网络拓扑阶段从该区域拖拽添加设备，鼠标点击右侧菜单中的设备元件，拖动至画布区域，松开鼠标左键。此时会弹出设备信息维护窗口，在该窗口填写关键信息，点击确定即可添加设备(设备添加后会直接保存至设备库，可进入资产信息管理中进行更详细的信息维护)。

上传目标图标包括：

首先在html代码中输入type＝‘file’的input，当在页面点击上传图标时，在其change事件中获取该图标的路径，名称等上传服务器，并显示在页面图元区，如图1。

图元拖拽，包括：

1、先判断当前拖拽节点是否有自己的区域，如果有，从该区域脱离出来

2、获取该节点在画布的真实坐标，包含上下左右四个值

3、拖拽执行时，最当前画布的区域节点进行遍历，通过节点的坐标值与区域节点坐标值进行比对，来判断当前节点是否在区域节点之上，如果在区域节点之上，存储到临时数组中。如果该坐标存在两个以上区域，对他们的x坐标进行比较排序，取距离节点最近的区域作为当前区域。

4、通过临时数组的长度，进行判断操作。如果数组为空，把cuurrentareafornode值为空，如果数组长度大于0，把当前cuurrentareafornode值为该区域equipid。

oldareacolor对象存储equipid作为键，值为当前区域颜色。然后该区域颜色变为激活的颜色

编辑区包括：

该区域用于提供接受并显示对应图元以实现拓扑图编辑的画布。点击相关按钮取该单位设备，即可从设备库中自动获取该单位下的所有未添加到当前拓扑页面的设备。默认会在画布的中心点进行画圆布局设备。在画布中拖拽选中所有设备(图2)，在被选中的设备上右键，可对设备进行自动排序和删除操作。自动排序(图3)，会根据设备ip的大小，以当前右击的位置为原点，进行5列布局排序。该方法首先获取设备并根据fromip对设备按排序归类，将同属于一个fromip的设备放在同一个区域，方便后续连线操作。再分别对每一个区域按设备自身ip大小进行排序。然后获取当舞台所有元素位置的边界大小，获取上边距及左边距_currentnodepos.top，_currentnodepos.left；遍历画布上的所有图元sortnodes.foreach，逐个规定其位置node.setlocation(_node_x,_node_y)。

先获得设备，并将设备根据fromip进行分类，_categorys[fromips[i]].push(item)；fromip分类完毕，把各分类下的设备根据ip进行排序，_categorys[i]＝ips_sort(_categorys[i])；绘制没有fromip的节点，并以原点为起点，分4列布局，targetx＝scenecenterx-(4*(60+100))；scenecenterx为当前场景中心点x坐标，60为节点宽度，50为节点之间的间距，4为列数；遍历节点将x坐标依次加100。

如果该ip存在于设备表中，则把此设备放入数组中，并把该fromip下的所有设备放入该设备对象的childs里面；

如果设备列表中不存在，就在当前画布中寻找，如果画布中存在该设备，则把该设备为原点，进行fromip对象内的节点绘制

如果画布中也不存在，则单独拿出一块儿区域绘制fromip下的所有设备，包括：

查询ip是否存在与对象序列中，ipinnodesindex＝formipisinnodes(nodes,i)；

查询ip是否都存在于画布中nodea不为空，说明可以在当前画布绘制区域与连线关系，

然后判断节点是否已经在画布上绘制过，以当前节点为中心进行画圆绘制

先绘制一个区域的方法包括：

根据节点数量，和第一个节点的宽高，进行计算区域框的宽高；

根据nodea所在的区域，计算新添加区域的坐标

执行树形布局排列；

判断nodea是否在区域内，如果在区域内，则在该节点所在区域的下方，创建树形布局的区域框，并把nodez放入框内，然后进行垂直拐角连线

如果节点不在区域内，则把该节点拿出来，新绘制一个区域，并把该节点放入中心，nodez根据它为原点进行圆形绘制；

绘制完毕，把新绘制的区域且无固定位置的统一设置xy坐标，以画布的中心为原点，进行向右平铺排列

最后，让画布居中显示；

告警区包括：

告警模块，用于当确定任一图元对应真实工作状态为异常工作状态时输出告警信息。在编辑区添加连线，首先选择父设备(如由a连线至b，则a是b的父设备，b是a的子设备)，在父设备(a)上右键，添加连线中选择连线类型，然后点击子设备(b)，此时连线自动生成。根服务器实时发送的设备状态值，进行图元及连线的颜色变化、大小变化来标识不同的设备状态以方便工作人员及时处理。

连线的颜色默认有四种：

蓝色：代表当前设备与设备的网络状态为未知；

红色：代表当前设备与设备的网络状态为告警；

绿色：代表当前设备与设备的网络状态为通畅；

灰色：代表当前设备与设备的网络状态为不通

图元的颜色默认两种：

蓝色：代表当前设备无异常

灰色：代表当前设备不在线

黄色闪烁：代表当前设备有告警信息，提示工作人员着重处理。

结论

本发明提供的一种基于jtopo技术实现的应用拓扑图编辑、展示方案，可以包括图元区、编辑区及告警区，其中：所述图元区，用于提供编辑拓扑图使用的图元；所述编辑区，用于提供接受并显示对应图元以实现拓扑图编辑的画布；所述告警区，用于实时对应真实工作状态为异常工作状态时输出告警信息。由此，工作人员可以根据真实的软硬件将其以拓扑图的方式编辑到应用拓扑图编辑器上，进而该应用拓扑图编辑器能够实时获取对应软硬件的工作状态并显示，从而工作人员无需像现有技术中一样实现对软硬件的监控，只需由应用拓扑图编辑器中随时获取对应软硬件的工作状态即可，从而能够实时准确的获取到数据中心中各软硬件的工作状态。

数据可视化不仅仅是帮助数据的最后呈现，而是需要兼顾美学形式与功能的需求，挖掘数据的关联性，动态双向的智能交互。本发明提供一种基于jtopo技术实现的大数据量网络拓扑的编辑及展示方案，以能够实时准确的获取到数据中心中各软硬件的工作状态。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明技术原理的前提下，还可以做出若干改进和变形，这些改进和变形也应视为本发明的保护范围。