主机拓扑

@@ -2,11 +2,15 @@ package com.ui.ctrl;
 
 
 import com.alibaba.fastjson.JSON;
+import com.google.common.collect.Lists;
 import com.google.gson.Gson;
 import com.ui.common.TagTypeEnum;
 import com.ui.contants.HttpUriContants;
 import com.ui.http.HttpRestClient;
+import com.ui.model.AntvData;
+import com.ui.model.AntvNode;
 import com.ui.model.BaseResponse;
+import com.ui.model.HostGroup;
 import com.ui.model.req.HostInfoReq;
 import com.ui.model.req.SetHostTagsReq;
 import com.ui.model.req.TagReq;
@@ -18,10 +22,7 @@ import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.ResponseBody;
 import org.springframework.web.servlet.ModelAndView;
 
-import java.util.ArrayList;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
+import java.util.*;
 
 /**
  * Created by yoho on 2016/6/14.
@@ -51,9 +52,228 @@ public class HostInfoCtrl {
     public ModelAndView toHostTopoList() {
         ModelAndView mv = new ModelAndView();
         mv.setViewName("host/hostTopoList");
+
+        //初始化数据
+        Map<String,List<HostGroup>> initDataMap = tmpConstructData();
+
+        int beginx=60;
+        int beginy=60;
+        int gap_h=100;
+        int gap_x=300;
+        int intval=140;
+        List<AntvNode> nodes=new ArrayList<>();
+        List<Map<String,String>> edges=new ArrayList<>();
+
+        int count=0;
+        int maxSize=0;
+        for (Map.Entry<String, List<HostGroup>> entry : initDataMap.entrySet()) {
+            String topNode = entry.getKey();
+            AntvNode node=new AntvNode();
+            node.setId(topNode);
+            node.setLabel(topNode);
+            node.setShape("rect");
+            node.setX(beginx+(count*gap_x));
+            node.setY(beginy);
+            nodes.add(node);
+            int secondCount=1;
+            List<HostGroup> ls=entry.getValue();
+            if(ls.size()>maxSize){
+                maxSize = ls.size();
+            }
+            for(HostGroup secondeNode:ls){
+                String sndNodeID=""+secondeNode.getId();
+                AntvNode nodeSnd=new AntvNode();
+                nodeSnd.setId(sndNodeID);
+                nodeSnd.setLabel(secondeNode.getGroupName());
+                nodeSnd.setShape("rect");
+                nodeSnd.setX(beginx+(count*gap_x)+intval);
+                nodeSnd.setY(beginy+secondCount*gap_h);
+                nodes.add(nodeSnd);
+
+                secondCount++;
+                //连线
+                Map<String,String> edgeMap=new HashMap<>();
+                edgeMap.put("source",topNode);
+                edgeMap.put("target",sndNodeID);
+                edges.add(edgeMap);
+
+            }
+            count++;
+        }
+
+        AntvData data=new AntvData();
+        data.setNodes(nodes);
+        data.setEdges(edges);
+        Gson gson = new Gson();
+        String jsonString=gson.toJson( data,AntvData.class);
+        mv.addObject("antvData",jsonString);
+        mv.addObject("antvHeight",100*(maxSize+1));
         return mv;
     }
 
+
+    private Map<String,List<HostGroup>> tmpConstructData(){
+        Map<String,List<HostGroup>> initDataMap=new LinkedHashMap<>();
+        HostGroup group6=new HostGroup();
+        group6.setId(1006);
+        group6.setGroupName("search");
+
+        HostGroup group5=new HostGroup();
+        group5.setId(1005);
+        group5.setGroupName("mysql");
+
+        HostGroup group4=new HostGroup();
+        group4.setId(1004);
+        group4.setGroupName("中间件");
+
+        HostGroup group3=new HostGroup();
+        group3.setId(1003);
+        group3.setGroupName("service");
+
+        HostGroup group2=new HostGroup();
+        group2.setId(1002);
+        group2.setGroupName("gateway");
+
+        HostGroup group1=new HostGroup();
+        group1.setId(1001);
+        group1.setGroupName("nginx");
+
+        initDataMap.put("前台", Lists.newArrayList(group1,group2,group3,group4,group5,group6));
+
+        HostGroup group26=new HostGroup();
+        group26.setId(2006);
+        group26.setGroupName("greenplum");
+
+        HostGroup group25=new HostGroup();
+        group25.setId(2005);
+        group25.setGroupName("mysql");
+
+        HostGroup group24=new HostGroup();
+        group24.setId(2004);
+        group24.setGroupName("中间件");
+
+        HostGroup group22=new HostGroup();
+        group22.setId(2003);
+        group22.setGroupName("service");
+
+        HostGroup group21=new HostGroup();
+        group21.setId(2001);
+        group21.setGroupName("nginx");
+        initDataMap.put("crm", Lists.newArrayList(group21,group22,group24,group25,group26));
+
+        HostGroup group35=new HostGroup();
+        group35.setId(3005);
+        group35.setGroupName("mysql");
+
+
+        HostGroup group32=new HostGroup();
+        group32.setId(3002);
+        group32.setGroupName("service");
+
+        HostGroup group31=new HostGroup();
+        group31.setId(3001);
+        group31.setGroupName("nginx");
+        initDataMap.put("线下店", Lists.newArrayList(group31,group32, group35));
+
+        HostGroup group68=new HostGroup();
+        group68.setId(68);
+        group68.setGroupName("code-deploy");
+
+        HostGroup group67=new HostGroup();
+        group67.setId(67);
+        group67.setGroupName("health");
+
+        HostGroup group66=new HostGroup();
+        group66.setId(66);
+        group66.setGroupName("kafka");
+
+
+        HostGroup group65=new HostGroup();
+        group65.setId(65);
+        group65.setGroupName("zabbix");
+
+        HostGroup group64=new HostGroup();
+        group64.setId(64);
+        group64.setGroupName("gitlab");
+
+        HostGroup group63=new HostGroup();
+        group63.setId(63);
+        group63.setGroupName("influxdb");
+
+
+        HostGroup group62=new HostGroup();
+        group62.setId(62);
+        group62.setGroupName("dns");
+
+        HostGroup group61=new HostGroup();
+        group61.setId(61);
+        group61.setGroupName("nginx");
+        initDataMap.put("线下店", Lists.newArrayList(group31,group32, group35));
+        initDataMap.put("ops", Lists.newArrayList(group61,group62,group63,group64,group65,group66,group67,group68));
+
+
+        HostGroup group75=new HostGroup();
+        group75.setId(75);
+        group75.setGroupName("dns");
+
+        HostGroup group74=new HostGroup();
+        group74.setId(74);
+        group74.setGroupName("mysql");
+
+        HostGroup group73=new HostGroup();
+        group73.setId(73);
+        group73.setGroupName("search");
+
+
+        HostGroup group72=new HostGroup();
+        group72.setId(72);
+        group72.setGroupName("nginx");
+
+        HostGroup group71=new HostGroup();
+        group71.setId(71);
+        group71.setGroupName("socail");
+
+        initDataMap.put("web", Lists.newArrayList(group71,group72,group73,group74,group75));
+
+
+        HostGroup group86=new HostGroup();
+        group86.setId(86);
+        group86.setGroupName("containers");
+
+
+        HostGroup group85=new HostGroup();
+        group85.setId(85);
+        group85.setGroupName("dns");
+
+        HostGroup group84=new HostGroup();
+        group84.setId(84);
+        group84.setGroupName("mysql");
+
+        HostGroup group83=new HostGroup();
+        group83.setId(83);
+        group83.setGroupName("search");
+
+
+        HostGroup group82=new HostGroup();
+        group82.setId(82);
+        group82.setGroupName("nginx");
+
+        HostGroup group81=new HostGroup();
+        group81.setId(81);
+        group81.setGroupName("socail");
+        initDataMap.put("media", Lists.newArrayList(group81,group82,group83,group84,group85,group86));
+
+        HostGroup group92=new HostGroup();
+        group92.setId(92);
+        group92.setGroupName("mysql");
+
+        HostGroup group91=new HostGroup();
+        group91.setId(91);
+        group91.setGroupName("平台端");
+        initDataMap.put("后台", Lists.newArrayList(group91,group92));
+        return initDataMap;
+    }
+
     @RequestMapping("/toHostTopoSub")
     public ModelAndView toHostTopoSub(String id) {
         ModelAndView mv = new ModelAndView();

+package com.ui.model;
+
+import lombok.Data;
+
+import java.util.List;
+import java.util.Map;
+
+@Data
+public class AntvData {
+
+    private List<AntvNode> nodes;
+    private List<Map<String,String>> edges;
+}

+package com.ui.model;
+
+import lombok.Data;
+
+@Data
+public class AntvNode {
+    private int x;
+    private int y;
+    private String shape;//rect
+    private String label;
+    private String id;
+}

@@ -12,6 +12,7 @@
 <html>
 <head>
     <jsp:include page="/jsp/common/include.jsp" flush="true"/>
+    <script src="https://gw.alipayobjects.com/as/g/datavis/g6/1.1.6/index.js"></script>
     <script>
         var contextPath = '<%=basePath %>';
     </script>
@@ -34,14 +35,14 @@
                 <h5>主机管理-主机拓扑图</h5>
             </div>
             <div class="widget-content nopadding">
-                <div class="panel-body">
-                    <button class="btn btn-large btn-primary" style="background-color: green;margin-left:50px;"  onclick="hostTopo('qiantai')">
+                <div class="panel-body" id="hostListTopoDiv">
+                    <%--<button class="btn btn-large btn-primary" style="background-color: green;margin-left:50px;"  onclick="hostTopo('qiantai')">
                         前台:218
                     </button>
 
                     <button class="btn btn-large btn-primary" style="background-color: green;margin-left:50px;"  onclick="hostTopo('线下店')">
                         线下店:5
-                    </button>
+                    </button>--%>
                 </div>
             </div>
         </div>
@@ -53,10 +54,130 @@
     $("#li_host").addClass("active open");
     $("#li_hostTopo").addClass("active");
 </script>
-<script>
+<script type="text/javascript">
+    // 第一步：获取数据
+    var data2 = {
+        "nodes": [
+            {
+                x:120,
+                y:60,
+                "shape": "rect",
+                "label": "首页000000000",
+                "level":1,
+                "id": "add1174b"
+            },
+            {
+                x:180,
+                y:123,
+                "shape": "rect",
+                "label": "页面1",
+                "level":2,
+                "id": "fbc69eaa"
+            },
+            {
+                x:180,
+                y:250,
+                "shape": "rect",
+                "label": "页面2",
+                "level":2,
+                "id": "6d0df4b8"
+            },
+            {
+                x:180,
+                y:376,
+                "shape": "rect",
+                "label": "页面3",
+                "level":2,
+                "id": "fcaedf74"
+            }
+        ],
+        "edges": [
+            {
+                "source": "add1174b",
+                "target": "fbc69eaa",
+                "id": "ae85ce02"
+            },
+            {
+                "source": "add1174b",
+                "target": "6d0df4b8",
+                "id": "4f2a272a"
+            },
+            {
+                "source": "add1174b",
+                "target": "fcaedf74",
+                "id": "e1d27d5d"
+            }
+        ]
+    };
+
+    var data=${antvData};
+    console.log(data);
+    // 第二步：注册图形
+    G6.registNode('rect', {
+        // 设置锚点
+        getAnchorPoints: function(){
+            return [
+                [0.5, 1], // 右边边的中点
+                [0, 0.5] // 左边边的中点
+            ];
+        }
+    });
+    // 第三步：进行布局
+    var Layout = G6.Layout;
+    var margin = 60;
+    var height = 800 - 2 * margin;
+    var width = 500 - 2 * margin;
+    var nodes = data.nodes;
+    var edges = data.edges;
+    /*var layout = new Layout.Flow({
+        nodes: nodes,
+        edges: edges
+    });
+    nodes = layout.getNodes();*/
+
+    /*nodes.map(function(node) {
+        var x = node.x * width + margin;
+        var y = node.y * height + margin;
+        node.x = x;
+        node.y = y;
+       /!* node.x =  node.level* 10;
+
+        node.y = node.level*100 +gap;
+        gap = node.level*gap;*!/
+
+
+        console.log(node.x,node.y);
+    });*/
 
-    function hostTopo(id){
-        window.location.href = getUrlBasePath() + "/hostInfoList/toHostTopoSub?id="+id;
-    }
+    console.log(nodes);
+    // 第四步：初始化图
+    var net = new G6.Net({
+        id: "hostListTopoDiv",            // 此处替换容器id
+        height: ${antvHeight},         // 此处替换高度
+       // width:1000,
+       // fitView: 'autoZoom' // 自动缩放
+    });
+    // 第五步：载入数据
+    net.source(nodes, edges);
+    // 第六步：数据映射
+    net.node()
+        .style(function(obj){
+            var keepRatio=0;
+            var attrs = {};
+            attrs.fill = 'l (0) 0:#00A263 ' + keepRatio + ':#00A263 ' + keepRatio + ':#E6504A';
+            //attrs.fill = '#00A263';// #':#E6504A';
+            attrs.fillOpacity = 0.4;
+            return attrs;
+        });
+    net.edge()
+        .shape('VH')
+        .style({
+            stroke: "#00A263",
+            strokeOpacity: 0.6,
+            arrow: true
+        });
+    // 第七步：添加图例
 
+    // 第八步：渲染关系图
+    net.render();
 </script>