基於HTML5的網絡拓撲圖 - 設備狀態面板

電信網管系統中，設備狀態信息的實時展現很是重要，一般會掛載一堆圖標來展現狀態或告警信息，圖標的信息量有限，有時須要更詳細的面板，甚至以圖表的形式展示，本文將結合最近客戶提到的需求，使用 Qunee1.6 beta版本，實現拓撲圖中設備信息的實時顯示。

Qunee 中ui 的定製很是靈活，每一個圖元節點均可以掛載多個 ui 控件，支持9X9=81種相對位置，單節點上能掛載多個 ui 元素，並進行排列和佈局，另外每一個 ui 元素能夠綁定圖元屬性，屬性變化，ui 元素會及時更新界面。

需求分析

網絡設備拓撲圖，默認設備爲普通節點，雙擊時展開，顯示CPU，內存，流量等信息，使用柱狀圖和不一樣顏色的文字來展現，再雙擊變回普通節點 這裏須要定製節點，普通模式下，節點包含圖標和文字，展開模式下，節點主體變成一個圓角矩陣的面板，上面分佈多個組件：圖標，文字，柱狀圖等，其中柱狀圖能夠參照以前 監控圖例子中的BarUI，其餘都有現成的組件可用，面板使用內置的Shape圖形，圖標依舊使用ImageUI，文字使用 LabelUI，位置分佈則藉助position和 anchorPosition 屬性進行設置

CPU 柱狀圖的實現

此外，還須要將 CPU 的數值與柱狀圖綁定，這裏用到Q.Element#addUI(ui, bindingProperties)函數，在第二個參數中設定數據綁定，若是有多個屬性須要綁定可使用數組，下面的例子將cpuBar的 data 屬性與 node 的cpu屬性進行了綁定，綁定後就能夠經過node.set("cpu", 0.45)這樣的方式對 ui 進行屬性設置了

以 CPU 柱狀圖爲例，左邊是文字，右邊是柱狀圖，文字向右對齊，柱狀圖左對齊

此外，還須要將 CPU 的數值與柱狀圖綁定，這裏用到Q.Element#addUI(ui, bindingProperties)函數，在第二個參數中設定數據綁定，若是有多個屬性須要綁定可使用數組，下面的例子將cpuBar的 data 屬性與 node 的cpu屬性進行了綁定，綁定後就能夠經過node.set("cpu", 0.45)這樣的方式對 ui 進行屬性設置了

CPU 柱狀圖相關代碼

 
 
 
 


  
  
  
  
 
   var cpu =  
   new Q.LabelUI("CPU"); 
   
 cpu.position = {x: 27, y: 47}; 
   
 cpu.anchorPosition = Q.Position.RIGHT_MIDDLE; 
   
 
   var cpuBar =  
   new BarUI(); 
   
 cpuBar.position = {x: 30, y: 47}; 
   
 cpuBar.anchorPosition = Q.Position.LEFT_MIDDLE; 
   
 node.addUI(cpu); 
   
 node.addUI(cpuBar, { 
   
     property : "cpu", 
   
     propertyType : Q.Consts.PROPERTY_TYPE_CLIENT, 
   
     bindingProperty : "data" 
   
 }); 
   
 node.set("cpu", 0.56); 
  

 
 
 
 

實際使用中咱們對函數作了封裝，看起來會不太同樣，下面是節點展開時的 ui 分佈設置，主體爲一個140 X 120的圓角矩形，上面分佈多個文本，圖標和柱狀圖

 
 
 
 


  
  
  
  
 
   var w = 140, h = 120, r = 10; 
   
 
   var shape = Q.Shapes.getRect(-w/2, -h/2, w, h, r, r); 
   
 
   this.image = shape; 
   
 
   var gradient =  
   new Q.Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, ["#F4F4F4", "#FFFFFF", "#DFDFDF", "#E9E9E9"]); 
   
 gradient.angle = Math.PI / 2; 
   
 
   this.setStyle(Q.Styles.SHAPE_FILL_GRADIENT, gradient); 
   
 
   this.setStyle(Q.Styles.SHAPE_STROKE, 0); 
   
 
   this.setStyle(Q.Styles.SHAPE_OUTLINE, 1); 
   
 
   this.setStyle(Q.Styles.SHAPE_OUTLINE_STYLE, "#C9C9C9"); 
   
 
   this.setStyle(Q.Styles.LAYOUT_BY_PATH,  
   false); 
   
 
   function addUIAt(node, ui, x, y, bindingProperty, value){ 
   
     ui.syncSelection =  
   false; 
   
     ui.zIndex = 1; 
   
     ui.position = {x: x, y: y}; 
   
     ui.anchorPosition = Q.Position.LEFT_TOP; 
   
     ui.fontSize = 10; 
   
      
   var binding; 
   
      
   if(bindingProperty){ 
   
         binding = { 
   
             property : bindingProperty, 
   
             propertyType : Q.Consts.PROPERTY_TYPE_CLIENT, 
   
             bindingProperty : "data" 
   
         } 
   
     } 
   
     node.addUI(ui, binding); 
   
      
   return ui; 
   
 } 
   
 
   var icon =  
   new Q.ImageUI(image); 
   
 icon.size =  
   this.iconSize; 
   
 addUIAt( 
   this, icon, 15, 12, "icon").anchorPosition = Q.Position.CENTER_MIDDLE; 
   
 addUIAt( 
   this,  
   new Q.LabelUI(name), 30, 5); 
   
 addUIAt( 
   this,  
   new Q.LabelUI(id), 30, 22).color = "#D00"; 
   
 addUIAt( 
   this,  
   new Q.LabelUI("CPU"), 27, 47).anchorPosition = Q.Position.RIGHT_MIDDLE; 
   
 addUIAt( 
   this,  
   new Q.LabelUI("MEM"), 27, 65).anchorPosition = Q.Position.RIGHT_MIDDLE; 
   
 addUIAt( 
   this,  
   new BarUI(), 30, 47, "cpu").anchorPosition = Q.Position.LEFT_MIDDLE; 
   
 addUIAt( 
   this,  
   new BarUI(), 30, 65, "memory").anchorPosition = Q.Position.LEFT_MIDDLE; 
   
 addUIAt( 
   this,  
   new Q.LabelUI("Incoming:"), 71, 90).anchorPosition = Q.Position.RIGHT_MIDDLE; 
   
 addUIAt( 
   this,  
   new Q.LabelUI("Outgoing:"), 71, 106).anchorPosition = Q.Position.RIGHT_MIDDLE; 
   
 
   var ui = addUIAt( 
   this,  
   new Q.LabelUI(), 75, 90, "incoming"); 
   
 ui.anchorPosition = Q.Position.LEFT_MIDDLE; 
   
 ui.color = "#C20"; 
   
 ui = addUIAt( 
   this,  
   new Q.LabelUI(), 75, 106, "outgoing"); 
   
 ui.anchorPosition = Q.Position.LEFT_MIDDLE; 
   
 ui.color = "#C20"; 
  

 
 
 
 

大致效果

  

進一步封裝

接下來進一步封裝，實現普通模式和展開模式切換，並增長鼠標交互，雙擊進行切換 這裏咱們繼承 Node，定義了一個CustomServerNode類，並增長了showDetail屬性，默認爲 true 表示展開狀態，設置爲 false 時則隱藏全部掛載的 ui，並設置image爲圖片，保留 image 和默認文本標籤

showDetail屬性定義

 
 
 
 


  
  
  
  

    Object.defineProperties(CustomServerNode.prototype, { 
   
     showDetail: { 
   
         get:  
   function(){ 
   
              
   return  
   this._showDetail; 
   
         }, 
   
         set:  
   function(show){ 
   
              
   if( 
   this._showDetail == show){ 
   
                  
   return; 
   
             } 
   
              
   this._showDetail = show; 
   
              
   this.image = show ?  
   this.shape :  
   this.get("image"); 
   
              
   this.name = show ? "雙擊合併" : ( 
   this.get("name") + "\n" +  
   this.get("id")); 
   
              
   var uis =  
   this.bindingUIs; 
   
              
   if(uis){ 
   
                 uis.forEach( 
   function(ui){ 
   
                     ui.ui.visible = show; 
   
                 }) 
   
                  
   this.invalidate(); 
   
             } 
   
         } 
   
     } 
   
 }) 
  

 
 
 
 

增長雙擊交互

 
 
 
 


  
  
  
  

    graph.ondblclick =  
   function(evt){ 
   
      
   var element = evt.getData(); 
   
      
   if(element){ 
   
         element.showDetail = !element.showDetail; 
   
     } 
   
 } 
  

 
 
 
 

運行效果

在線演示

http://demo.qunee.com/#VOIP Demo