[發明專利]一種基于DOM對象高效繪制網絡拓撲圖的方法

有效

• 申請號: 201710959240.8
• 申請日: 2017-10-16
• 公開（公告）號: CN107864048B
• 公開（公告）日: 2021-02-05
• 發明（設計）人: 韓雪飛
• 申請（專利權）人: 北京易訊通信息技術股份有限公司
• 主分類號: H04L12/24
• 分類號: H04L12/24
• 代理公司: 西安西達專利代理有限責任公司 61202
• 代理人: 李文義

一種基于DOM對象高效繪制網絡拓撲圖的方法，通過div，span，ul等簡單的dom節點，結合css和js，實現網絡拓撲圖的功能和樣式。成樹狀分布，擁有展開，收起節點的功能；同時包含點擊對主機的查看，以及每個模塊詳細信息的tooltip，本發明用基礎的dom實現拓撲圖，使用時只需要傳入基本數據，組件會讀取數據，根據數據的數量及類別繪畫出基本的拓撲圖。對拓撲做了基本的查看，代碼簡單，而且只是依賴于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包含其中的網絡以及該網絡下的子網，以及該子網下的云主機；