nps/web/views/index/index.html

<div class="row">
    <div class="col-md-3">
        <div class="widget-small warning coloured-icon"><i class="icon fa fa-html5 fa-3x"></i>
            <div class="info">
                <h4>HTTP端口</h4>
                <p><b>{{.p}}</b></p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="widget-small danger coloured-icon"><i class="icon fa fa-home fa-3x"></i>
            <div class="info">
                <h4>域名解析数</h4>
                <p><b>{{.data.hostCount}}</b></p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="widget-small primary coloured-icon"><i class="icon fa fa-users fa-3x"></i>
            <div class="info">
                <h4>总客户端数</h4>
                <p><b>{{.data.clientCount}}</b></p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="widget-small info coloured-icon"><i class="icon fa fa-user-secret fa-3x"></i>
            <div class="info">
                <h4>在线客户端数</h4>
                <p><b>{{.data.clientOnlineCount}}</b></p>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="tile">
            <h3 class="tile-title">流量</h3>
            <div class="embed-responsive embed-responsive-16by9">
                <canvas class="embed-responsive-item" id="flow"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="tile">
            <h3 class="tile-title">代理类型</h3>
            <div class="embed-responsive embed-responsive-16by9">
                <canvas class="embed-responsive-item" id="types"></canvas>
            </div>
        </div>
    </div>
</div>
<script>
    var pdataFlow = [
        {
            value: {{.data.inletFlowCount}},
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "入口流量"
        },
        {
            value: {{.data.exportFlowCount}},
            color: "#FDB45C",
            highlight: "#FFC870",
            label: "出口流量"
        }
    ]
    var pdataTypes = [
        {
            value: {{.data.tunnelServerCount}},
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "tcp隧道"
        },
        {
            value: {{.data.socks5ServerCount}},
            color: "#85FEAA",
            highlight: "#85FEAA",
            label: "socks5隧道"
        },
        {
            value: {{.data.httpProxyServerCount}},
            color: "#4B653C",
            highlight: "#4B653C",
            label: "http代理"
        },
        {
            value: {{.data.udpServerCount}},
            color: "#90653C",
            highlight: "#90653C",
            label: "udp代理"
        },
        {
            value: {{.data.hostCount}},
            color: "#FDB45C",
            highlight: "#FDB45C",
            label: "域名解析"
        }
    ]
    var ctxp = $("#flow").get(0).getContext("2d");
    var pieChart = new Chart(ctxp).Pie(pdataFlow);
    var ctxd = $("#types").get(0).getContext("2d");
    var doughnutChart = new Chart(ctxd).Doughnut(pdataTypes);
</script>