mha

@@ -74,19 +74,18 @@
 
     <style>
         .node-container{
-            position: relative;
+            //position: relative;
             //position: absolute;
             z-index: 9999;
             width: 300px;
-            height: 100px;
+            height: 106px;
             border: 1px solid #999;
             border-radius: 3px;
             overflow: hidden;
-
         }
 
         .node-container .node-container-title{
-            color: white;
+           // color: white;
             font-size: 2em;
             float:left;
             height:40px;
@@ -95,7 +94,7 @@
         .node-container .node-container-content{
             margin-top:40px;
             height: 100%;
-            background-color: white;
+            background-color: red;
         }
 
         .node-container .node-container-title-button-div{
@@ -180,6 +179,26 @@
 
     }
 
+
+    function drawHtml2(cfg) {
+        var model = cfg.model;
+        var container = Util.createDOM('<div class="node-container"></div>');
+        var title = Util.createDOM('<div class="widget-title"  style="height: 36px;"></div>');
+
+        if(!model.disabledFlag){
+            title.appendChild(Util.createDOM('<h5>'+model.label+'</h5>'));
+            var a = Util.createDOM('<a href="#" onclick="alert(1)" style="float:right;margin-right: 10px;"><H5 style="padding-right:0px;padding-left:0px;"><span class="glyphicon glyphicon-info-sign"></span></H5></a>');
+            title.appendChild(a);
+        }else{
+            title.appendChild(Util.createDOM('<h5>'+model.label+'<small style="margin-left:5px;font-size:8px;color:red;">down</small></h5>'));
+        }
+
+        var content = Util.createDOM('<div class="widget-content" style="height: 70px;">'+model.ip+'</div>');
+        container.appendChild(title);
+        container.appendChild(content);
+        return container;
+    }
+
     function createTopo(data) {
 
         // 第二步：注册节点
@@ -192,39 +211,15 @@
         G6.registNode('customNode', {
             cssSize: true, // 不使用内部 size 作为节点尺寸
             getHtml: function(cfg){
-                var model = cfg.model;
-                var container = Util.createDOM('<div class="node-container"></div>');
-                var title = Util.createDOM('<div class="node-container-title">'+model.label+'</div>');
-                container.appendChild(title);
-
-                if(!model.disabledFlag){
-                    var buttonDiv = Util.createDOM('<div class="node-container-title-button-div"></div>');
-                    var btn = Util.createDOM('' +
-                        ' <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>' +
-                        ' ');
-                    btn.addEventListener('click', function(){
-                        alert(1111);
-                    });
-                    buttonDiv.appendChild(btn);
-
-                    btn = Util.createDOM('' +
-                        ' <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>' +
-                        '');
-                    btn.addEventListener('click', function(){
-                        alert(222);
-                    });
-                    buttonDiv.appendChild(btn);
-                    container.appendChild(buttonDiv);
-                }
-
-
-                var content = Util.createDOM('<div class="node-container-content">'+model.ip+'</div>');
-                container.appendChild(content);
-                return container;
+                return drawHtml2(cfg);
             }
         }, 'html');
 
+        var nodes = data.nodes;
+        var edges = data.edges;
+
         var tree = new G6.Net({
+            behaviourFilter: ['wheelZoom', 'dragNode','dragBlank', 'dragCanvas'],
             id: "mhaTopoDiv"  ,          // 此处替换容器id
             fitView: 'autoSize' // 自动缩放  autoSize  autoZoom
            /* ,layoutCfg: {
@@ -237,27 +232,15 @@
                 }
             }*/
         });
-        tree.source(data.nodes, data.edges);
+        tree.source(nodes, edges);
         tree.node().style({
             stroke: null, // 去除默认边框
             fillOpacity: 1
-        }).color( function(obj){
-            var rst;
+        })/*.color( function(obj){
             if(obj.disabledFlag){
-                rst = '#aaa';
-            }else{
-                if(obj.noMaster==1){
-                    //rst = '#F90426';
-                    //rst = '#87CEEB';
-                    rst = '#3B89CF';
-                }else{
-                    rst = '#3B89CF';
-                }
-
-
+                return '#aaa';
             }
-            return rst;
-        }).label('serverId').shape('customNode');
+        })*/.label('serverId').shape('customNode');
         tree.edge().style({
             //stroke: 'black',
             lineWidth: 2,
@@ -291,6 +274,39 @@
     }
 
 
+
+    function drawHtml(cfg) {
+        var model = cfg.model;
+        var container = Util.createDOM('<div class="node-container"></div>');
+        var title = Util.createDOM('<div class="node-container-title">'+model.label+'</div>');
+        container.appendChild(title);
+
+        if(!model.disabledFlag){
+            var buttonDiv = Util.createDOM('<div class="node-container-title-button-div"></div>');
+            var btn = Util.createDOM('' +
+                ' <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>' +
+                ' ');
+            btn.addEventListener('click', function(){
+                alert(1111);
+            });
+            buttonDiv.appendChild(btn);
+
+            btn = Util.createDOM('' +
+                ' <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>' +
+                '');
+            btn.addEventListener('click', function(){
+                alert(222);
+            });
+            buttonDiv.appendChild(btn);
+            container.appendChild(buttonDiv);
+        }
+
+
+        var content = Util.createDOM('<div class="node-container-content">'+model.ip+'</div>');
+        container.appendChild(content);
+        return container;
+    }
+
     function drawCard(cfg, group){
         var model = cfg.model;
         var width = 300;