mirror of
https://gitee.com/lauix/HFish
synced 2025-05-12 04:48:01 +08:00
532 lines
13 KiB
Go
532 lines
13 KiB
Go
{{template "header"}}
|
|
<style>
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.openx {
|
|
background: #3dd209;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 100%;
|
|
display: -webkit-inline-box;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.closex {
|
|
background: #dc0e0e;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 100%;
|
|
display: -webkit-inline-box;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.lb_web {
|
|
color: #039cfd;
|
|
}
|
|
|
|
.lb_ssh {
|
|
color: #953fb9;
|
|
}
|
|
|
|
.lb_redis {
|
|
color: #e44242;
|
|
}
|
|
|
|
.lb_mysql {
|
|
color: #cabd23;
|
|
}
|
|
|
|
.lb_ftp {
|
|
color: #32cc16;
|
|
}
|
|
|
|
.lb_telnet {
|
|
color: #6b79c1;
|
|
}
|
|
|
|
.lb_deep {
|
|
color: #000000;
|
|
}
|
|
|
|
</style>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="btn-group pull-right m-t-15">
|
|
<a type="button" class="btn btn-custom" href="https://github.com/hacklcx/HFish/blob/master/README.md"
|
|
target="_blank">查看帮助 <span class="m-l-5"><i
|
|
class="zmdi zmdi-help-outline"></i></span>
|
|
</a>
|
|
</div>
|
|
<h4 class="page-title">仪表盘</h4>
|
|
</div>
|
|
<div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
|
|
<div class="card-box tilebox-two">
|
|
<i class="icon-ghost pull-xs-right text-muted"></i>
|
|
<h6 class="lb_ssh text-uppercase m-b-15 m-t-10">SSH 蜜罐</h6>
|
|
<h2 class="m-b-10"><span data-plugin="counterup">{{.sshSum}}</span></h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
|
|
<div class="card-box tilebox-two">
|
|
<i class="icon-layers pull-xs-right text-muted"></i>
|
|
<h6 class="lb_redis text-uppercase m-b-15 m-t-10">Redis 蜜罐</h6>
|
|
<h2 class="m-b-10" data-plugin="counterup">{{.redisSum}}</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
|
|
<div class="card-box tilebox-two">
|
|
<i class="icon-chart pull-xs-right text-muted"></i>
|
|
<h6 class="lb_mysql text-uppercase m-b-15 m-t-10">Mysql 蜜罐</h6>
|
|
<h2 class="m-b-10"><span data-plugin="counterup">{{.mysqlSum}}</span></h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
|
|
<div class="card-box tilebox-two">
|
|
<i class="icon-layers pull-xs-right text-muted"></i>
|
|
<h6 class="lb_ftp text-uppercase m-b-15 m-t-10">FTP 蜜罐</h6>
|
|
<h2 class="m-b-10"><span data-plugin="counterup">{{.ftpSum}}</span></h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-md-6 col-lg-6 col-xl-4">
|
|
<div class="card-box tilebox-two">
|
|
<i class="icon-plane pull-xs-right text-muted"></i>
|
|
<h6 class="lb_telnet text-uppercase m-b-15 m-t-10">TELNET 蜜罐</h6>
|
|
<h2 class="m-b-10"><span data-plugin="counterup">{{.telnetSum}}</span></h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-md-6 col-lg-6 col-xl-4">
|
|
<div class="card-box tilebox-two">
|
|
<i class="icon-fire pull-xs-right text-muted"></i>
|
|
<h6 class="lb_web text-uppercase m-b-15 m-t-10">WEB 蜜罐</h6>
|
|
<h2 class="m-b-10"><span data-plugin="counterup">{{.webSum}}</span></h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-md-6 col-lg-6 col-xl-4">
|
|
<div class="card-box tilebox-two">
|
|
<i class="icon-globe pull-xs-right text-muted"></i>
|
|
<h6 class="lb_deep text-uppercase m-b-15 m-t-10">DEEP 蜜罐</h6>
|
|
<h2 class="m-b-10"><span data-plugin="counterup">{{.deepSum}}</span></h2>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col-md-2">
|
|
<div class="card-box" style="height: 395px;">
|
|
<p class="title">服务状态</p>
|
|
<p><span class="openx"></span>ADMIN</p>
|
|
|
|
{{if eq .apiStatus "1"}}
|
|
<p><span class="openx"></span>API</p>
|
|
{{else}}
|
|
<p><span class="closex"></span>API</p>
|
|
{{end}}
|
|
|
|
{{if eq .webStatus "1"}}
|
|
<p><span class="openx"></span>WEB</p>
|
|
{{else}}
|
|
<p><span class="closex"></span>WEB</p>
|
|
{{end}}
|
|
|
|
{{if eq .deepStatus "1"}}
|
|
<p><span class="openx"></span>DEEP</p>
|
|
{{else}}
|
|
<p><span class="closex"></span>DEEP</p>
|
|
{{end}}
|
|
|
|
{{if eq .sshStatus "1"}}
|
|
<p><span class="openx"></span>SSH</p>
|
|
{{else}}
|
|
<p><span class="closex"></span>SSH</p>
|
|
{{end}}
|
|
|
|
{{if eq .redisStatus "1"}}
|
|
<p><span class="openx"></span>REDIS</p>
|
|
{{else}}
|
|
<p><span class="closex"></span>REDIS</p>
|
|
{{end}}
|
|
|
|
{{if eq .mysqlStatus "1"}}
|
|
<p><span class="openx"></span>MYSQL</p>
|
|
{{else}}
|
|
<p><span class="closex"></span>MYSQL</p>
|
|
{{end}}
|
|
|
|
{{if eq .telnetStatus "1"}}
|
|
<p><span class="openx"></span>TELNET</p>
|
|
{{else}}
|
|
<p><span class="closex"></span>TELNET</p>
|
|
{{end}}
|
|
|
|
{{if eq .ftpStatus "1"}}
|
|
<p><span class="openx"></span>FTP</p>
|
|
{{else}}
|
|
<p><span class="closex"></span>FTP</p>
|
|
{{end}}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-10">
|
|
<div class="card-box">
|
|
<div id="myChart" style="width:100%;height:355px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{template "footer" }}
|
|
<script src="/static/libs/echarts/echarts.js"></script>
|
|
<script>
|
|
|
|
var webData = [
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0
|
|
];
|
|
|
|
var sshData = [
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0
|
|
];
|
|
|
|
var redisData = [
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0
|
|
];
|
|
|
|
var mysqlData = [
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0
|
|
];
|
|
|
|
var deepData = [
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0
|
|
];
|
|
|
|
var ftpData = [
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0
|
|
];
|
|
|
|
var telnetData = [
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0
|
|
];
|
|
|
|
var myChart = echarts.init(document.getElementById('myChart'));
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "/get/dashboard/data",
|
|
dataType: "json",
|
|
success: function (e) {
|
|
if (e.code == 200) {
|
|
var d = e.data;
|
|
|
|
for (var item in d.mysql) {
|
|
mysqlData[parseInt(item)] = d.mysql[item];
|
|
}
|
|
|
|
for (var item in d.redis) {
|
|
redisData[parseInt(item)] = d.redis[item];
|
|
}
|
|
|
|
for (var item in d.ssh) {
|
|
sshData[parseInt(item)] = d.ssh[item];
|
|
}
|
|
|
|
for (var item in d.web) {
|
|
webData[parseInt(item)] = d.web[item];
|
|
}
|
|
|
|
for (var item in d.deep) {
|
|
deepData[parseInt(item)] = d.deep[item];
|
|
}
|
|
|
|
for (var item in d.ftp) {
|
|
ftpData[parseInt(item)] = d.ftp[item];
|
|
}
|
|
|
|
for (var item in d.telnet) {
|
|
telnetData[parseInt(item)] = d.telnet[item];
|
|
}
|
|
|
|
var option = {
|
|
title: {
|
|
text: '今日数据'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['WEB', 'DEEP', 'SSH', 'REDIS', 'MYSQL', 'TELNET', 'FTP']
|
|
},
|
|
grid: {
|
|
left: '0%',
|
|
right: '0%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: [
|
|
'00',
|
|
'01',
|
|
'02',
|
|
'03',
|
|
'04',
|
|
'05',
|
|
'06',
|
|
'07',
|
|
'08',
|
|
'09',
|
|
'10',
|
|
'12',
|
|
'13',
|
|
'14',
|
|
'15',
|
|
'16',
|
|
'17',
|
|
'18',
|
|
'19',
|
|
'20',
|
|
'21',
|
|
'22',
|
|
'23'
|
|
]
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: 'WEB',
|
|
type: 'line',
|
|
stack: '总量',
|
|
areaStyle: {normal: {}},
|
|
data: webData
|
|
},
|
|
{
|
|
name: 'DEEP',
|
|
type: 'line',
|
|
stack: '总量',
|
|
areaStyle: {normal: {}},
|
|
data: deepData
|
|
},
|
|
{
|
|
name: 'SSH',
|
|
type: 'line',
|
|
stack: '总量',
|
|
areaStyle: {normal: {}},
|
|
data: sshData
|
|
},
|
|
{
|
|
name: 'REDIS',
|
|
type: 'line',
|
|
stack: '总量',
|
|
areaStyle: {normal: {}},
|
|
data: redisData
|
|
},
|
|
{
|
|
name: 'MYSQL',
|
|
type: 'line',
|
|
stack: '总量',
|
|
areaStyle: {normal: {}},
|
|
data: mysqlData
|
|
},
|
|
{
|
|
name: 'TELNET',
|
|
type: 'line',
|
|
stack: '总量',
|
|
areaStyle: {normal: {}},
|
|
data: telnetData
|
|
},
|
|
{
|
|
name: 'FTP',
|
|
type: 'line',
|
|
stack: '总量',
|
|
areaStyle: {normal: {}},
|
|
data: ftpData
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
</script> |