[发明专利]一种基于DOM对象高效绘制网络拓扑图的方法

摘要

一种基于DOM对象高效绘制网络拓扑图的方法，通过div，span，ul等简单的dom节点，结合css和js，实现网络拓扑图的功能和样式。成树状分布，拥有展开，收起节点的功能；同时包含点击对主机的查看，以及每个模块详细信息的tooltip，本发明用基础的dom实现拓扑图，使用时只需要传入基本数据，组件会读取数据，根据数据的数量及类别绘画出基本的拓扑图。对拓扑做了基本的查看，代码简单，而且只是依赖于dom，渲染和加载较快。可以根据用户的不同需求提供不同的接口，保证在大多数情况下实现用户的需求。本发明在实现的时候留了保证其余功能的接口，方便后期的扩展及使用。

主权项

一种基于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和样式控制生成网络拓扑图。