html 流程图根据dom,一种基于DOM对象高效绘制网络拓扑图的方法与流程

最新推荐文章于 2023-03-24 15:00:00 发布

weixin_39774044

最新推荐文章于 2023-03-24 15:00:00 发布

阅读量356

点赞数

文章标签： html 流程图根据dom

本发明涉及一种网络拓扑图的绘制方法，具体涉及一种基于DOM对象高效绘制网络拓扑图的方法。

背景技术：

基于DOM对象高效绘制网络拓扑图主要使用html，css以及JavaScript。通过dom结构搭建拓扑图的基础框架；通过css实现拓扑图的样式和排列；通过JavaScript实现拓扑图的动态变化，包括对云主机的展开，子网的伸缩等。拓扑图包括网卡，网桥，网络，子网以及子网下的云主机，按树状展开，同时需要在其他地方使用，以组件的方式实现。前四部分直接初始化dom节点，通过数据量来确定dom节点的数量；云主机部分动态生成dom，同时保证在点击其它空白处的时候云主机树状图消失。通过JavaScript原型链的方式，向原型中添加方法，并在需要的时候调用，从而实现基于dom的拓扑图。

现有的拓扑图是多数是使用canvas或者svg等图形实现的，还有部分是使用3D或者2.5D等工具进行实现。缺点及解决的技术如下：

使用不够方便。现有的拓扑图使用的时候需要传入大量的参数及属性，才能够保证正确绘出图形。功能繁琐，加载较慢。现有的拓扑图为满足需求，都会加入大量的功能实现，导致代码过多，加载较慢，同时使用需要传入过多属性。不方便扩展。现有的拓扑图因为功能等拥有大量代码，不方便后期维护与扩展。

技术实现要素：

为了克服上述现有技术的不足，本发明的目的是提供一种基于DOM对象高效绘制网络拓扑图的方法，通过div，span，ul等简单的dom节点，结合css和js，实现网络拓扑图的功能和样式。成树状分布，拥有展开，收起节点的功能；同时包含点击对主机的查看，以及每个模块详细信息的tooltip。

为了实现上述目的，本发明采用的技术方案是：

一种基于DOM对象高效绘制网络拓扑图的方法，包括以下步骤：

1)首先需要初始化读取用户传入的数组，当初始化之后需要根据设计图对每部分进行样式处理；

2)物理网络部分：读取数组后判断是否包含brige，name以及nic字段，如果存在，初始化都dom .ef-topoNew-net.name以及dom .ef-topoNew-net.brige用来显示该物理网络的名称以及网桥，如果包含多个物理网络，则循环该数组第一层，通过数组的length决定初始化的物理网络的dom的个数与值；

3)网络部分：当确定包含物理网络的时候，循环该物理网络下面的vlan字段，如果vlan的length不为0，则初始化网络部分dom .ef-topoNew-net-content，该部分不仅需要显示网络的名称，后期的子网及云主机都放在该dom内部，根据vlan的length确实dom的个数，每个dom包含其中的网络以及该网络下的子网，以及该子网下的云主机；

4)子网部分：当确定包含网络时，判断该vlan下的subnet字段的length是否存在并且length大于0，如果存在且length大于0，循环该字段，初始化dom .ef-topoNew-net-subnet,根据subnet的length确实dom的个数，每个dom包含其中的该子网以及该子网下的云主机，同时需要判断子网的ip_use字段，如果该字段的数值大于1需要在子网的右上角加上云主机数量显示(ip_use-1，需要去掉网关占用)；当子网的个数大于3个时候，需要对该网络的子网进行展开和缩回的处理，如果该子网个数大于6个，需要进行翻页显示，每页显示的最大个数为6；当一个子网展开的时候，其余的子网均为缩回状态；

5)云主机部分：当确定包含子网时，点击该子网时对外暴露事件click，使用者需要调用子网下的云主机的后台接口，拿到数据后通过事件返回，判断返回数据的length是否大于0，如果该数据大于0，则循环该数组，初始化dom ef-topoNew-net-vm，用于存放云主机；如果云主机个数小于8，则根据云主机的个数自适应高度，如果个数大于8，则最大高度为8个的高度，进行翻页显示，且当点击其他空白处时，云主机部分会消失，再次查看依赖用户的点击；

6)图例部分：图例对每个部分做了一个解释，通过html和css的dom和样式控制生成。

以下对每部分的详细阐述：

所述的网卡部分：网卡部分是对物理网络的名称展示；

所述的网桥部分：网桥部分是对物理网络的网桥名称的展示，鼠标放上去是可以显示该物理网络的网桥和网卡；

所述的网络部分：网路部分是对网络的名称的显示，鼠标放上去时可以显示该网络的名称，类型，物理网络，VLAN ID和状态，状态通过不同的图标和文字进行不同的显示；

所述的子网部分：子网部分是对子网名称的显示，鼠标放上去是可以显示该子网的名称，cidr，网关和ip占用情况，同时右上角的数字标注该子网下的云主机的数量；

所述的云主机部分：云主机部分主要显示云主机的名称，依赖于用户点击子网操作显示，鼠标放上去时显示该云主机的名称，网卡，配置，宿主机，项目，用户和状态，不同的状态采用不同的图标加文字进行描述；同时会高亮该云主机所在的网络；

所述的图例部分：图例部分用于展示该拓扑图所包含的所有元素，以及他们对应的图标。显示在整个页面的右上角，方便用户查看，简单明了。

所述的物理网络与网桥是一对一的关系，每个物理网络只存在一个网桥。

所述的含物理网络和网络是一対多的关系，一个物理网络下可以包含多个网络。

所述的网络和子网是一对多的关系，一个网络可以包含多个子网。

所述的子网和云主机是一对多的关系，一个子网可以包含多个云主机。

所述的图例与拓扑图是显示关系。

所述的网络拓扑图的步骤如下：

1)需要判断是否包含物理网络，如果包含则显示物理网络与网卡，否则结束流程；

2)在有物理网络的情况下，需要判断是否包含网络，如果包含则显示网络，否则结束流程，拓扑图上只显示物理网络与网桥；

3)在有网络的情况下，需要判断是否包含子网，如果包含则显示子网，否则结束历程，拓扑图上显示物理网络，网桥与网路；

4)再有子网的情况下，需要判断该子网下是否包含云主机，如果包含云主机，则在点击的情况下显示云主机，同时子网右上角显示云主机数量，否则结束流程，拓扑图上显示物理网络，网桥，网络与子网。

本发明的有益效果是：

本发明用基础的dom实现拓扑图，使用时只需要传入基本数据，组件会读取数据，根据数据的数量及类别绘画出基本的拓扑图。对拓扑做了基本的查看，代码简单，而且只是依赖于dom，渲染和加载较快。可以根据用户的不同需求提供不同的接口，保证在大多数情况下实现用户的需求。本发明在实现的时候留了保证其余功能的接口，方便后期的扩展及使用。

附图说明

图1为本发明的网络拓扑图。

图2为本发明的拓扑部分关系图。

图3为本发明的网络拓扑流程图。

具体实施方式

以下结合附图对本发明进一步叙述。

如图2、3所示，一种基于DOM对象高效绘制网络拓扑图的方法，包括以下步骤：