專利名稱：一種基于html5的集群網(wǎng)絡(luò)拓?fù)湔宫F(xiàn)方法
技術(shù)領(lǐng)域：
本發(fā)明屬于計(jì)算機(jī)技術(shù)領(lǐng)域，具體涉及一種基于HTML5的集群網(wǎng)絡(luò)拓?fù)湔宫F(xiàn)方法。
背景技術(shù)：
超大規(guī)模集群環(huán)境下的網(wǎng)絡(luò)監(jiān)控和管理，以及各節(jié)點(diǎn)之間的相互關(guān)系表現(xiàn)是非常困難的。在集群管理系統(tǒng)中，如果不能直觀地表現(xiàn)網(wǎng)絡(luò)拓?fù)潢P(guān)系，不僅導(dǎo)致管理和維護(hù)成本的增加，而且在網(wǎng)絡(luò)發(fā)生故障或在冗余網(wǎng)絡(luò)中出現(xiàn)單線網(wǎng)絡(luò)連接故障時(shí)，會導(dǎo)致網(wǎng)絡(luò)連接信息反饋不及時(shí)，無法對相應(yīng)問題作出正確反映，從而影響到集群的正常運(yùn)轉(zhuǎn)，可能會給企業(yè)造成經(jīng)濟(jì)損失。 目前表現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D的技術(shù)主要是SVG，SVG是一種可縮放矢量圖形技術(shù)。SVG特點(diǎn)之一是可以用來動態(tài)生成圖形。例如，可用SVG動態(tài)生成具有交互功能的地圖，嵌入網(wǎng)頁中，并顯示給終端用戶。SVG雖然能夠很好的動態(tài)表現(xiàn)圖形，但不是所有的瀏覽器都支持SVG格式。如果某些瀏覽器不支持它，就必須在瀏覽器上安裝插件。最常用的SVG插件來自Adobe公司(AdobeSVG Viewer)，另外Corel也提供SVG瀏覽器(Corel SVG Viewer)。然而前者宣布于2009年I月I日停止對該產(chǎn)品的支持。SVG兼容性不是特別好。需要根據(jù)具體集群進(jìn)行定制，成本聞。

發(fā)明內(nèi)容
為了克服上述現(xiàn)有技術(shù)的不足，本發(fā)明提供一種基于HTML5的集群網(wǎng)絡(luò)拓?fù)湔宫F(xiàn)方法，在集群環(huán)境下網(wǎng)絡(luò)拓?fù)鋱D可以清晰、直觀的表現(xiàn)，用戶可以輕松了解集群網(wǎng)絡(luò)信息；網(wǎng)絡(luò)拓?fù)鋱D中節(jié)點(diǎn)增加，減少，位置變化，節(jié)點(diǎn)之間相互關(guān)系改變，只需要簡單的操作就可以完成，既可以滿足一般用戶的需求，也可以為特殊用戶進(jìn)行個(gè)性化定制，采用異步讀取數(shù)據(jù)方法，實(shí)時(shí)保存修改后的信息，所見即所得，實(shí)時(shí)呈現(xiàn)。為了實(shí)現(xiàn)上述發(fā)明目的，本發(fā)明采取如下技術(shù)方案—種基于HTML5的集群網(wǎng)絡(luò)拓?fù)湔宫F(xiàn)方法，所述方法包括以下步驟步驟I :從數(shù)據(jù)庫中讀取網(wǎng)絡(luò)拓?fù)鋱D的原數(shù)據(jù)；步驟2 :將所述原數(shù)據(jù)轉(zhuǎn)換為展示數(shù)據(jù)；步驟3 :將所述展示數(shù)據(jù)轉(zhuǎn)化為網(wǎng)絡(luò)拓?fù)鋱D信息，并進(jìn)行顯示； 步驟4 修改網(wǎng)絡(luò)拓?fù)鋱D；步驟5 :保存修改信息。所述步驟I中，原數(shù)據(jù)包括網(wǎng)絡(luò)節(jié)點(diǎn)設(shè)備、設(shè)備配置信息、設(shè)備指標(biāo)信息、畫布信息和設(shè)備關(guān)系信息；原數(shù)據(jù)以List〈Map〈String, Object〉〉集合方式存儲。所述步驟2中，通過頁面設(shè)定的函數(shù)解析所述原數(shù)據(jù)，從而使其被HTML5所使用，轉(zhuǎn)換為展示數(shù)據(jù)。
所述步驟3中，所述展示數(shù)據(jù)包括網(wǎng)絡(luò)節(jié)點(diǎn)設(shè)備、設(shè)備的圖片信息、設(shè)備配置信息、設(shè)備指標(biāo)信息、畫布信息、設(shè)備關(guān)系信息和設(shè)備坐標(biāo)值；所述展示數(shù)據(jù)以json格式存儲。所述步驟3包括以下步驟步驟3-1 :根據(jù)屏幕大小重新設(shè)置設(shè)備坐標(biāo)值，根據(jù)重新設(shè)置的設(shè)備坐標(biāo)值將設(shè)備圖片定位到相應(yīng)位置；步驟3-2 :根據(jù)設(shè)備關(guān)系信息利用HTML5將節(jié)點(diǎn)之間的相互關(guān)系及網(wǎng)絡(luò)連接展現(xiàn)出來；步驟3-3 :將設(shè)備指標(biāo)值、端口信息和設(shè)備運(yùn)行情況以頁面屬性值方式賦值到頁面中。所述步驟4包括以下步驟
步驟4-1 :通過調(diào)用位置設(shè)定函數(shù)修改網(wǎng)絡(luò)拓?fù)鋱D中節(jié)點(diǎn)的位置；步驟4-2 :修改節(jié)點(diǎn)之間的相互關(guān)系；通過調(diào)用刪除節(jié)點(diǎn)間關(guān)系函數(shù)取消節(jié)點(diǎn)之間的相互關(guān)系，通過調(diào)用創(chuàng)建節(jié)點(diǎn)間關(guān)系函數(shù)建立節(jié)點(diǎn)間的相互關(guān)系；步驟4-3 :添加網(wǎng)絡(luò)節(jié)點(diǎn)；在節(jié)點(diǎn)添加導(dǎo)航中，將要添加的節(jié)點(diǎn)拖拽到目標(biāo)位置上，即完成網(wǎng)絡(luò)節(jié)點(diǎn)添加，并調(diào)用節(jié)點(diǎn)添加函數(shù)，將添加的節(jié)點(diǎn)各項(xiàng)指標(biāo)值、端口信息賦值到頁面中；步驟4-4 :刪除網(wǎng)絡(luò)節(jié)點(diǎn)；選中需要?jiǎng)h除的節(jié)點(diǎn)，通過調(diào)用刪除函數(shù)完成網(wǎng)絡(luò)節(jié)點(diǎn)刪除。所述步驟5中，將修改信息發(fā)送到數(shù)據(jù)庫中進(jìn)行保存。與現(xiàn)有技術(shù)相比，本發(fā)明的有益效果在于I.在集群環(huán)境下網(wǎng)絡(luò)拓?fù)鋱D可以清晰、直觀的表現(xiàn)，用戶可以輕松了解集群網(wǎng)絡(luò)
信息；2.網(wǎng)絡(luò)拓?fù)鋱D中節(jié)點(diǎn)增加，減少，位置變化，節(jié)點(diǎn)之間相互關(guān)系改變，只需要簡單的操作就可以完成，既可以滿足一般用戶的需求，也可以為特殊用戶進(jìn)行個(gè)性化定制；3.采用異步讀取數(shù)據(jù)方法，實(shí)時(shí)保存修改后的信息，所見即所得，實(shí)時(shí)呈現(xiàn)；4.本發(fā)明的瀏覽器兼容性好，不用安裝任何插件，安全性高；5.可以清晰的表現(xiàn)出網(wǎng)絡(luò)節(jié)點(diǎn)間的相互關(guān)系，且復(fù)雜的拓?fù)鋱D顯示不增加頁面運(yùn)算壓力。


圖I是基于HTML5的集群網(wǎng)絡(luò)拓?fù)湔宫F(xiàn)方法流程圖。
具體實(shí)施例方式下面結(jié)合附圖對本發(fā)明作進(jìn)一步詳細(xì)說明。如圖1，一種基于HTML5的集群網(wǎng)絡(luò)拓?fù)湔宫F(xiàn)方法，所述方法包括以下步驟步驟I :從數(shù)據(jù)庫中讀取網(wǎng)絡(luò)拓?fù)鋱D的原數(shù)據(jù)；步驟2 :將所述原數(shù)據(jù)轉(zhuǎn)換為展示數(shù)據(jù)；步驟3 :將所述展示數(shù)據(jù)轉(zhuǎn)化為網(wǎng)絡(luò)拓?fù)鋱D信息，并進(jìn)行顯示；
步驟4 修改網(wǎng)絡(luò)拓?fù)鋱D；步驟5:保存修改信息。所述步驟I中，原數(shù)據(jù)包括網(wǎng)絡(luò)節(jié)點(diǎn)設(shè)備、設(shè)備配置信息、設(shè)備指標(biāo)信息、畫布信息和設(shè)備關(guān)系信息；原數(shù)據(jù)不能直接用于網(wǎng)絡(luò)拓?fù)鋱D顯示。原數(shù)據(jù)以List〈Map〈String，Object〉〉集合方式存儲。所述步驟2中，通過頁面設(shè)定的函數(shù)解析所述原數(shù)據(jù)，從而使其被HTML5所使用，轉(zhuǎn)換為展示數(shù)據(jù)。 所述步驟3中，所述展示數(shù)據(jù)包括網(wǎng)絡(luò)節(jié)點(diǎn)設(shè)備、設(shè)備的圖片信息、設(shè)備配置信息、設(shè)備指標(biāo)信息、畫布信息、設(shè)備關(guān)系信息和設(shè)備坐標(biāo)值；所述展示數(shù)據(jù)以json格式存儲。網(wǎng)絡(luò)節(jié)點(diǎn)使用X、Y坐標(biāo)定位方式，以像素為單位。這種方式定位方便、精準(zhǔn)。所述步驟3包括以下步驟步驟3-1 :根據(jù)屏幕大小重新設(shè)置設(shè)備坐標(biāo)值，根據(jù)重新設(shè)置的設(shè)備坐標(biāo)值將設(shè)備圖片定位到相應(yīng)位置；步驟3-2 :根據(jù)設(shè)備關(guān)系信息利用HTML5將節(jié)點(diǎn)之間的相互關(guān)系及網(wǎng)絡(luò)連接展現(xiàn)出來；步驟3-3 :將設(shè)備指標(biāo)值、端口信息和設(shè)備運(yùn)行情況以頁面屬性值方式賦值到頁面中。所述步驟4包括以下步驟步驟4-1 :通過調(diào)用位置設(shè)定函數(shù)修改網(wǎng)絡(luò)拓?fù)鋱D中節(jié)點(diǎn)的位置；步驟4-2 :修改節(jié)點(diǎn)之間的相互關(guān)系；通過調(diào)用刪除節(jié)點(diǎn)間關(guān)系函數(shù)取消節(jié)點(diǎn)之間的相互關(guān)系，通過調(diào)用創(chuàng)建節(jié)點(diǎn)間關(guān)系函數(shù)建立節(jié)點(diǎn)間的相互關(guān)系；步驟4-3 :添加網(wǎng)絡(luò)節(jié)點(diǎn)；在節(jié)點(diǎn)添加導(dǎo)航中，將要添加的節(jié)點(diǎn)拖拽到目標(biāo)位置上，即完成網(wǎng)絡(luò)節(jié)點(diǎn)添加，并調(diào)用節(jié)點(diǎn)添加函數(shù)，將添加的節(jié)點(diǎn)各項(xiàng)指標(biāo)值、端口信息賦值到頁面中；步驟4-4 :刪除網(wǎng)絡(luò)節(jié)點(diǎn)；選中需要?jiǎng)h除的節(jié)點(diǎn)，通過調(diào)用刪除函數(shù)完成網(wǎng)絡(luò)節(jié)點(diǎn)刪除。所述步驟5中，將修改信息發(fā)送到數(shù)據(jù)庫中進(jìn)行保存。最后應(yīng)當(dāng)說明的是以上實(shí)施例僅用以說明本發(fā)明的技術(shù)方案而非對其限制，盡管參照上述實(shí)施例對本發(fā)明進(jìn)行了詳細(xì)的說明，所屬領(lǐng)域的普通技術(shù)人員應(yīng)當(dāng)理解依然可以對本發(fā)明的具體實(shí)施方式
進(jìn)行修改或者等同替換，而未脫離本發(fā)明精神和范圍的任何修改或者等同替換，其均應(yīng)涵蓋在本發(fā)明的權(quán)利要求范圍當(dāng)中。
權(quán)利要求
1.一種基于HTML5的集群網(wǎng)絡(luò)拓?fù)湔宫F(xiàn)方法，其特征在于所述方法包括以下步驟 步驟I :從數(shù)據(jù)庫中讀取網(wǎng)絡(luò)拓?fù)鋱D的原數(shù)據(jù)； 步驟2 :將所述原數(shù)據(jù)轉(zhuǎn)換為展示數(shù)據(jù)； 步驟3 :將所述展示數(shù)據(jù)轉(zhuǎn)化為網(wǎng)絡(luò)拓?fù)鋱D信息，并進(jìn)行顯示； 步驟4 :修改網(wǎng)絡(luò)拓?fù)鋱D； 步驟5 :保存修改信息。
2.根據(jù)權(quán)利要求I所述的基于HTML5的集群網(wǎng)絡(luò)拓?fù)湔宫F(xiàn)方法，其特征在于所述步驟I中，原數(shù)據(jù)包括網(wǎng)絡(luò)節(jié)點(diǎn)設(shè)備、設(shè)備配置信息、設(shè)備指標(biāo)信息、畫布信息和設(shè)備關(guān)系信息；原數(shù)據(jù)以List〈Map〈String, Object 集合方式存儲。
3.根據(jù)權(quán)利要求I所述的基于HTML5的集群網(wǎng)絡(luò)拓?fù)湔宫F(xiàn)方法，其特征在于所述步驟2中，通過頁面設(shè)定的函數(shù)解析所述原數(shù)據(jù)，從而使其被HTML5所使用，轉(zhuǎn)換為展示數(shù)據(jù)。
4.根據(jù)權(quán)利要求I所述的基于HTML5的集群網(wǎng)絡(luò)拓?fù)湔宫F(xiàn)方法，其特征在于所述步驟3中，所述展示數(shù)據(jù)包括網(wǎng)絡(luò)節(jié)點(diǎn)設(shè)備、設(shè)備的圖片信息、設(shè)備配置信息、設(shè)備指標(biāo)信息、畫布信息、設(shè)備關(guān)系信息和設(shè)備坐標(biāo)值；所述展示數(shù)據(jù)以json格式存儲。
5.根據(jù)權(quán)利要求I所述的基于HTML5的集群網(wǎng)絡(luò)拓?fù)湔宫F(xiàn)方法，其特征在于所述步驟3包括以下步驟 步驟3-1 :根據(jù)屏幕大小重新設(shè)置設(shè)備坐標(biāo)值，根據(jù)重新設(shè)置的設(shè)備坐標(biāo)值將設(shè)備圖片定位到相應(yīng)位置； 步驟3-2 :根據(jù)設(shè)備關(guān)系信息利用HTML5將節(jié)點(diǎn)之間的相互關(guān)系及網(wǎng)絡(luò)連接展現(xiàn)出來； 步驟3-3 :將設(shè)備指標(biāo)值、端口信息和設(shè)備運(yùn)行情況以頁面屬性值方式賦值到頁面中。
6.根據(jù)權(quán)利要求I所述的基于HTML5的集群網(wǎng)絡(luò)拓?fù)湔宫F(xiàn)方法，其特征在于所述步驟4包括以下步驟 步驟4-1 :通過調(diào)用位置設(shè)定函數(shù)修改網(wǎng)絡(luò)拓?fù)鋱D中節(jié)點(diǎn)的位置； 步驟4-2 :修改節(jié)點(diǎn)之間的相互關(guān)系；通過調(diào)用刪除節(jié)點(diǎn)間關(guān)系函數(shù)取消節(jié)點(diǎn)之間的相互關(guān)系，通過調(diào)用創(chuàng)建節(jié)點(diǎn)間關(guān)系函數(shù)建立節(jié)點(diǎn)間的相互關(guān)系； 步驟4-3 :添加網(wǎng)絡(luò)節(jié)點(diǎn)；在節(jié)點(diǎn)添加導(dǎo)航中，將要添加的節(jié)點(diǎn)拖拽到目標(biāo)位置上，即完成網(wǎng)絡(luò)節(jié)點(diǎn)添加，并調(diào)用節(jié)點(diǎn)添加函數(shù)，將添加的節(jié)點(diǎn)各項(xiàng)指標(biāo)值、端口信息賦值到頁面中； 步驟4-4:刪除網(wǎng)絡(luò)節(jié)點(diǎn)；選中需要?jiǎng)h除的節(jié)點(diǎn)，通過調(diào)用刪除函數(shù)完成網(wǎng)絡(luò)節(jié)點(diǎn)刪除。
7.根據(jù)權(quán)利要求I所述的基于HTML5的集群網(wǎng)絡(luò)拓?fù)湔宫F(xiàn)方法，其特征在于所述步驟5中，將修改信息發(fā)送到數(shù)據(jù)庫中進(jìn)行保存。
全文摘要
本發(fā)明提供一種基于HTML5的集群網(wǎng)絡(luò)拓?fù)湔宫F(xiàn)方法，包括以下步驟從數(shù)據(jù)庫中讀取網(wǎng)絡(luò)拓?fù)鋱D的原數(shù)據(jù)；將所述原數(shù)據(jù)轉(zhuǎn)換為展示數(shù)據(jù)；將所述展示數(shù)據(jù)轉(zhuǎn)化為網(wǎng)絡(luò)拓?fù)鋱D信息，并進(jìn)行顯示；修改網(wǎng)絡(luò)拓?fù)鋱D；保存修改信息。本方法在集群環(huán)境下網(wǎng)絡(luò)拓?fù)鋱D可以清晰、直觀的表現(xiàn)，用戶可以輕松了解集群網(wǎng)絡(luò)信息；網(wǎng)絡(luò)拓?fù)鋱D中節(jié)點(diǎn)增加，減少，位置變化，節(jié)點(diǎn)之間相互關(guān)系改變，只需要簡單的操作就可以完成，既可以滿足一般用戶的需求，也可以為特殊用戶進(jìn)行個(gè)性化定制，采用異步讀取數(shù)據(jù)方法，實(shí)時(shí)保存修改后的信息，所見即所得，實(shí)時(shí)呈現(xiàn)。
文檔編號G06F17/30GK102855315SQ20121030936
公開日2013年1月2日 申請日期2012年8月28日 優(yōu)先權(quán)日2012年8月28日
發(fā)明者李立京, 張晉鋒 申請人:曙光信息產(chǎn)業(yè)(北京)有限公司