hostTopo.jsp 8.06 KB

Raw Blame History Permalink

<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@ page import="com.ui.contants.ProjectConstant"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <jsp:include page="/jsp/common/include.jsp" flush="true"/>
    <script src="<%=basePath %>js/antv/antv-g6-1.1.6.js" charset="UTF-8" type="text/javascript"></script>
    <script>
        var contextPath = '<%=basePath %>';
    </script>
    <title>YOHO!运维</title>
</head>
<body>

<!-- 头部 -->
<div id="head">
</div>
<!-- 右侧具体内容 -->
<div id="content">
    <div id="breadcrumb">
        <a href="#" title="Go to Home" class="tip-bottom"><i
                class="icon-home"></i> Home</a> <a href="#" class="current">主机拓扑图</a>
    </div>
    <div class="container-fluid">

        <div class="widget-box" style="min-height: 600px;">
            <div id="hostListTopoDiv" style="width:600px;float:left">

            </div>
            <div class="widget-content nopadding" style="margin-left: 600px;border-left: 1px solid #E5E5E5;">
                <div class="panel-body">

                    <div>
                        <div class="form-inline" role="form"
                             style="float: left;">
                            <div class="input-group" style="float: left;">
                                <span class="input-group-addon">云可用区：</span>
                                <select id="cloudDetailType" name="cloudDetailType" class="form-control">
                                    <option value="0">全部</option>
                                    <%--<option value="1">AWS</option>--%>
                                    <option value="21">腾讯云</option>
                                    <option value="22">腾讯云az2</option>
                                    <option value="23">腾讯云az3</option>
                                    <%--<option value="3">其他</option>--%>
                                </select>
                            </div>
                            <button class="btn btn-primary" style="margin-left: 18px;" onclick="queryHost()">搜索</button>
                        </div>
                        <div id="hostInfoTable" style="margin-top:2px;float: left;min-height: 500px;">

                        </div>
                </div>

            </div>
        </div>
    </div>
    </div>
</div>
</body>
<script src="<%=basePath %>script/common/genarate_left_panel.js?v=<%=ProjectConstant.MENU_VERSION %>"></script>
<script>
    $("#li_host").addClass("active open");
    $("#li_hostTopo").addClass("active");
</script>
<script type="text/javascript">
    // 第一步：获取数据
    var data=${antvData};
    // 第二步：注册图形
    G6.registNode('rect', {
        // 设置锚点
        getAnchorPoints: function(){
            return [
                [0.5, 1], // 右边边的中点
                [0, 0.5] // 左边边的中点
            ];
        }
    });
    var nodes = data.nodes;
   /* for(var i=0;i<nodes.length;i++){
        nodes[i].size=[100,30];
    }*/
    var edges = [];//data.edges;

    // 第三步：进行布局
     /*var Layout = G6.Layout;
     var margin = 60;
     var height = 1000 - 2 * margin;
     var width = 500 - 2 * margin;

     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 = y;
        node.y = x;
    });

    console.log(nodes);*/
    // 第四步：初始化图
    var net = new G6.Net({
        // fitView: 'autoZoom' // 自动缩放
        height: ${antvHeight},         // 此处替换高度
        behaviourFilter: ['wheelZoom', 'dragNode','dragBlank', 'dragCanvas'],
        id: "hostListTopoDiv"            // 此处替换容器id
    });
    // 第五步：载入数据
    net.source(nodes, edges);
    // 第六步：数据映射
    net.node()
        .style(function(obj){
            var keepRatio=0;
            if(obj.level==0){
                keepRatio = 1;
            }
            var attrs = {};
            attrs.fill = 'l (0) 0:#ccc ' + keepRatio + ':#ccc ' + keepRatio + ':#00A263';
            //attrs.fill = '#00A263';// #':#E6504A';
            attrs.fillOpacity = 0.4;
            return attrs;
        });
    net.edge()
        .shape('smooth')
        .style({
            stroke: "#00A263",
            strokeOpacity: 0.6,
            arrow: true
        });
    // 第七步：添加图例

    // 第八步：渲染关系图
    net.render();

    //dblclick
    var checkStyle = {
        fill:"#FF0000",
        lineWidth: 2
    };
    var normalStyle = {
        fill:"#00A263",
        lineWidth: 1
    };

    var page_selected_node=[];
    net.on('click', function(ev){
        if(ev.itemType !== 'node'){
            return;
        }
        var model=ev.item.getModel();
        if(model.level==0){
            return ;
        }

        var changeStyle={};
        if(model.checked){
            model.checked=false;
            changeStyle =normalStyle;

            for(var arri=0;arri<page_selected_node.length;arri++){
                if(page_selected_node[arri].id==model.id){
                    page_selected_node.splice(arri,1);
                    break;
                }
            }
        }else{
            model.checked=true;
            changeStyle = checkStyle;
            page_selected_node.push(model);
        }

        var keyShape = ev.item.getKeyShape();
        keyShape.attr(changeStyle);
        net.refresh();
    });

    $(function () {
        //加载表格
        $("#hostInfoTable").table({
            columnAutoWidth : false,
            striped : true,
            title : "主机信息列表",
            dataType : "json",
            pagination : true,
            pageSize : 10,
            loadFilter : function(data) {
                return defaultLoadFilter(data);
            },
            columns : [
                {
                    title: 'NO',
                    width : "40px",
                    formatter: function (value, row, index) {
                        return index+1;
                    }
                },
                {
                    title : "IP",
                    field : "hostIp",
                    width : "30%"
                }, {
                    title : "云可用区",
                    field : "cloudDetailType",
                    formatter : function(value, rowData, rowIndex) {
                        if(value == 1){
                            return 'AWS';
                        } else if(value == 21){
                            return '腾讯云';
                        }else if(value == 22){
                            return '腾讯云az2';
                        }else if(value == 23){
                            return '腾讯云az3';
                        }else{
                            return value;
                        }
                    },
                    width : "20%"
                },  {
                    title : "标签",
                    field : "tags",
                    formatter : function(value, rowData, rowIndex) {
                        if(value != null && value != ""){
                            return value.substr(0,value.length-1);
                        }

                    }
                }]
        });
    });


    function queryHost() {
        console.log(page_selected_node);

        var opt = $("#hostInfoTable").data("table");
        opt.url=contextPath +"hostInfoList/getHostInfos";

        var cloudDetailType = $("#cloudDetailType").val();
        var param={
            'cloudDetailType': cloudDetailType,
            tags:'["upstream-switch"]'
        };

        $("#hostInfoTable").table("load",param);

    }
</script>