mirror of https://github.com/ehang-io/nps
105 lines
3.1 KiB
Go
Executable File
105 lines
3.1 KiB
Go
Executable File
<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>
|