主机管理

@@ -37,6 +37,15 @@
             <div class="widget-content nopadding">
                 <div class="panel-body" id="hostListTopoDiv">
                 </div>
+                <p><style>
+                    .customNode {
+                        background-color: lightblue !important;
+                        padding: 0;
+                        margin: 0;
+                        list-style: none;
+                        width: 100px;
+                    }
+                </style></p>
             </div>
         </div>
     </div>
@@ -53,11 +62,28 @@
     var data=[];
     if(${antvData}){
         data=${antvData};
-
-        console.log(data);
     }
 
     function createNet(data) {
+        var Util = G6.Util;
+        G6.registNode('customHostHtml', {
+            cssSize: true, // 该配置项设置为 true 时，则节点不受 node size 控制
+            getHtml: function(cfg){
+                var model = cfg.model;
+                var hosts=model.name.split(",");
+                var dom = "";
+                for(var i=0;i<hosts.length;i++){
+                    dom+= ""+hosts[i]+"<br/>";
+                }
+
+                var nodeDivHeight="height: 20px;";
+                if(hosts.length>0){
+                    nodeDivHeight="height: "+20*hosts.length+"px;";
+                }
+                return Util.createDOM("<ul  class='customNode' style='"+nodeDivHeight+"'>"+dom+"</ul>");
+            }
+        }, 'html');
+
         var tree = new G6.Tree({
             id: "hostListTopoDiv"  ,          // 此处替换容器id
             modes:{
@@ -90,68 +116,61 @@
         //dblclick or click
         tree.on('click', function(ev){
             if(ev.itemType !== 'node'){
-                console.log(ev.itemType);
                 return;
             }
             var model=ev.item.getModel();
-            if(model.children.length>0){
+            //nodeType如果为空字符串，则代表是配置节点，如果为host，则代表主机节点
+            if(model.nodeType.length>0){
                 return;
             }
-            $.ajax({
-                url : contextPath +"/hostInfoList/querySubHostTopo",
-                type : 'post',
-                data : {
-                    typeId :  model.id
-                },
-                async : false,
-                dataType : "json",
-                success : function(resp) {
-                    if(resp!=null&&resp.code==200){
-                        model.children = resp.data;
-
-                        if(resp.data.length>0){
-                            var collapsedIds=[];//记录折叠的id
-                            var treeData=tree.save();
-                            var treeData_source=treeData.source;
-                            /*treeRemoveCollapsed(treeData_source,collapsedIds);
-
-                            console.log(collapsedIds);*/
 
-                            //方式一
-                            /*tree.destroy();
-                            var new_tree= createNet(treeData_source);
-                            if(collapsedIds.length>0){
-
-                            }*/
-
-                            //方式二
-                            tree.changeData(treeData_source);
-                            tree.autoSize();
-                            tree.refresh();
+            //当下级节点没有展示的时候
+            if(model.children.length<=0){
+                $.ajax({
+                    url : contextPath +"/hostInfoList/querySubHostTopo",
+                    type : 'post',
+                    data : {
+                        typeId :  model.id
+                    },
+                    async : false,
+                    dataType : "json",
+                    success : function(resp) {
+                        if(resp!=null&&resp.code==200){
+                            reloadCanvas(model,tree,resp.data);
                         }
-
-
                     }
+                });
+            }else{
+                //展示了下级节点，并且下级节点为主机信息
+                if(model.children[0].nodeType.length>0){
+                    reloadCanvas(model,tree,[]);
                 }
-            });
-
+            }
         });
         return tree;
     }
 
-    function treeRemoveCollapsed(node,nodeIDArray) {
-        if(node.isCollapsed){
-            node.isCollapsed=false;
-            nodeIDArray.push(node.id) ;
-        }
-        var children = node.children;
-        if (children && children.length) {
-            for (var i = 0; i < children.length; i++) {
-                 treeRemoveCollapsed(children[i],nodeIDArray);
-            }
+    function reloadCanvas(model,tree,newChildData){
+        var oldSize=model.children.length;
+        var newSize=newChildData==null?0:newChildData.length;
+        model.children = newChildData;
+
+        if(oldSize!=newSize){
+            var treeData=tree.save();
+            var treeData_source=treeData.source;
+
+
+            //方式一
+            tree.destroy();
+            createNet(treeData_source);
+
+
+            //方式二
+            /*tree.changeData(treeData_source);
+            tree.autoSize();
+            tree.refresh();*/
         }
     }
-
     createNet(data);
 
 </script>