CN107864048B - 一种基于dom对象高效绘制网络拓扑图的方法 - Google Patents
一种基于dom对象高效绘制网络拓扑图的方法 Download PDFInfo
- Publication number
- CN107864048B CN107864048B CN201710959240.8A CN201710959240A CN107864048B CN 107864048 B CN107864048 B CN 107864048B CN 201710959240 A CN201710959240 A CN 201710959240A CN 107864048 B CN107864048 B CN 107864048B
- Authority
- CN
- China
- Prior art keywords
- network
- subnet
- dom
- cloud
- cloud host
- 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.)
- Expired - Fee Related
Links
- 238000000034 method Methods 0.000 title claims abstract description 32
- 230000001351 cycling effect Effects 0.000 claims description 3
- 238000009877 rendering Methods 0.000 abstract description 2
- 230000007547 defect Effects 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008602 contraction Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
Images
Classifications
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L41/00—Arrangements for maintenance, administration or management of data switching networks, e.g. of packet switching networks
- H04L41/12—Discovery or management of network topologies
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L41/00—Arrangements for maintenance, administration or management of data switching networks, e.g. of packet switching networks
- H04L41/14—Network analysis or design
Abstract
一种基于DOM对象高效绘制网络拓扑图的方法，通过div，span，ul等简单的dom节点，结合css和js，实现网络拓扑图的功能和样式。成树状分布，拥有展开，收起节点的功能；同时包含点击对主机的查看，以及每个模块详细信息的tooltip，本发明用基础的dom实现拓扑图，使用时只需要传入基本数据，组件会读取数据，根据数据的数量及类别绘画出基本的拓扑图。对拓扑做了基本的查看，代码简单，而且只是依赖于dom，渲染和加载较快。可以根据用户的不同需求提供不同的接口，保证在大多数情况下实现用户的需求。本发明在实现的时候留了保证其余功能的接口，方便后期的扩展及使用。
Description
技术领域
本发明涉及一种网络拓扑图的绘制方法，具体涉及一种基于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对象高效绘制网络拓扑图的方法，包括以下步骤：
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）在有子网的情况下，需要判断该子网下是否包含云主机，如果包含云主机，则在点击的情况下显示云主机，同时子网右上角显示云主机数量，否则结束流程，拓扑图上显示物理网络，网桥，网络与子网。
如图1所示，网络拓扑图绘制效果，以树状展开的形式展示了网络拓扑包含的模块以及每个模块之间的关系。图1展示了在云平台软件上对网络拓扑的实现。首先通过接口，进行数据拼接，然后调用根据dom绘制拓扑图的组件的接口，进行传递参数，生成拓扑图。该方法只需要传递基本的数据，组件会根据数据进行处理绘制得到最终的结果。
Claims (7)
1.一种基于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和样式控制生成网络拓扑图。
2.根据权利要求1所述的一种基于DOM对象高效绘制网络拓扑图的方法，其特征在于，所述的网络拓扑图的步骤如下：
1）需要判断是否包含物理网络，如果包含则显示物理网络与网桥，否则结束流程；
2）在有物理网络的情况下，需要判断是否包含网络，如果包含则显示网络，否则结束流程，拓扑图上只显示物理网络与网桥；
3）在有网络的情况下，需要判断是否包含子网，如果包含则显示子网，否则结束历程，拓扑图上显示物理网络与网桥；
4）在有子网的情况下，需要判断该子网下是否包含云主机，如果包含云主机，则在点击的情况下显示云主机，同时子网右上角显示云主机数量，否则结束流程，拓扑图上显示物理网络，网桥，网络与子网。
3.根据权利要求1所述的一种基于DOM对象高效绘制网络拓扑图的方法，其特征在于，所述的物理网络与网桥是一对一的关系，每个物理网络只存在一个网桥。
4.根据权利要求1所述的一种基于DOM对象高效绘制网络拓扑图的方法，其特征在于，所述的含物理网络和网络是一対多的关系，一个物理网络下可以包含多个网络。
5.根据权利要求1所述的一种基于DOM对象高效绘制网络拓扑图的方法，其特征在于，所述的网络和子网是一对多的关系，一个网络可以包含多个子网。
6.根据权利要求1所述的一种基于DOM对象高效绘制网络拓扑图的方法，其特征在于，所述的子网和云主机是一对多的关系，一个子网可以包含多个云主机。
7.根据权利要求1所述的一种基于DOM对象高效绘制网络拓扑图的方法，其特征在于，所述的图例与拓扑图是显示关系。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710959240.8A CN107864048B (zh) | 2017-10-16 | 2017-10-16 | 一种基于dom对象高效绘制网络拓扑图的方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710959240.8A CN107864048B (zh) | 2017-10-16 | 2017-10-16 | 一种基于dom对象高效绘制网络拓扑图的方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107864048A CN107864048A (zh) | 2018-03-30 |
| CN107864048B true CN107864048B (zh) | 2021-02-05 |
Family
ID=61698685
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710959240.8A Expired - Fee Related CN107864048B (zh) | 2017-10-16 | 2017-10-16 | 一种基于dom对象高效绘制网络拓扑图的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107864048B (zh) |
Family Cites Families (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103873277B (zh) * | 2012-12-12 | 2017-08-25 | 中国科学院声学研究所 | 一种分层的网络拓扑可视化方法及系统 |
| US9485132B2 (en) * | 2014-05-08 | 2016-11-01 | Dell Products, Lp | Automated SAN network topological diagram and point-to-point cabling creation for customers environments |
| US9965451B2 (en) * | 2015-06-09 | 2018-05-08 | International Business Machines Corporation | Optimization for rendering web pages |
| CN106341406B (zh) * | 2016-09-19 | 2019-07-16 | 成都知道创宇信息技术有限公司 | 基于http响实体正文html dom树变化的准确攻击识别方法 |
| CN106713050B (zh) * | 2017-02-08 | 2020-11-13 | 腾讯科技（深圳）有限公司 | 一种网络拓扑展示方法及装置 |
-
2017
- 2017-10-16 CN CN201710959240.8A patent/CN107864048B/zh not_active Expired - Fee Related
Also Published As
| Publication number | Publication date |
|---|---|
| CN107864048A (zh) | 2018-03-30 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105630902A (zh) | 一种渲染和增量更新网页的方法 | |
| CN111669286B (zh) | 一种网管系统中拓扑图树形布局生成方法 | |
| CN105354022A (zh) | 一种页面布局文件生成方法及装置 | |
| CN103345493B (zh) | 用于移动终端上的文本内容显示的方法、装置及系统 | |
| CN103377053A (zh) | 一种控制应用的方法、装置及系统 | |
| CN113094355A (zh) | 基于国产化通信协议的模型实例化方法、装置、设备及介质 | |
| WO2023226371A1 (zh) | 目标对象交互式重现的控制方法、装置、设备及存储介质 | |
| CN105045790A (zh) | 图数据搜索系统、方法和设备 | |
| CN105354138A (zh) | 一种确定手机页面上特定控件属性的方法 | |
| CN103544320A (zh) | 一种网页生成方法及装置 | |
| CN106168959A (zh) | 网页布局方法及装置 | |
| CN106846431B (zh) | 一种支持多表现形式的统一Web图形绘制系统 | |
| CN106294686B (zh) | 一种应用于计算机技术领域思维导图中快速更新树结点位置坐标的方法 | |
| CN113822963A (zh) | 一种绘制及展示拓扑图的方法、系统、设备和存储介质 | |
| CN107864048B (zh) | 一种基于dom对象高效绘制网络拓扑图的方法 | |
| CN103605521A (zh) | 一种实现界面对位的方法及装置 | |
| CN106648586B (zh) | 一种基于网络浏览器进行vr创作的平台 | |
| CN104111951A (zh) | 栅格图片的绘制方法及装置 | |
| CN111309424A (zh) | 一种页面还原方法及相关设备 | |
| CN110442820A (zh) | 用于网页的图片合成方法以及装置 | |
| CN106612197B (zh) | 一种网络缩略图生成方法及设备 | |
| CN110989982B (zh) | 一种带返回值函数的积木块构建方法、装置、存储介质和处理器 | |
| CN107038176B (zh) | 网络图页面渲染方法、装置及设备 | |
| CN105488064A (zh) | 网页字体的预览方法及装置 | |
| CN104932982B (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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| CF01 | Termination of patent right due to non-payment of annual fee | ||
| CF01 | Termination of patent right due to non-payment of annual fee |
Granted publication date: 20210205 |