HFish/admin/data.html

548 lines
17 KiB
Go
Raw Normal View History

2019-09-03 17:19:06 +08:00
<!DOCTYPE html>
2019-12-03 21:28:24 +08:00
<html lang="zh-CN">
2019-09-03 17:19:06 +08:00
<head>
2019-12-03 21:28:24 +08:00
<meta charset="utf-8"/>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
<title>HFish 全球态势感知</title>
<link rel="stylesheet" href="/static/data/css/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/static/data/css/app.css"/>
<link rel="shortcut icon" href="/static/favicon.ico">
<style>
#datamian {
color: #fff;
overflow-y: auto;
}
.data_list {
width: 100%;
border-bottom: 1px solid #206c90;
clear: both;
height: 35px;
}
.data_list:hover {
background: rgba(55, 138, 177, 0.2)
}
.data_ul_head {
background: #307fa8;
}
.data_ul_head li {
float: left;
list-style-type: none;
margin-right: 55px;
}
.look {
color: #49addc;
cursor: pointer;
}
td {
padding-left: 7px;
}
.title {
color: #67c8fd;
text-align: center;
margin-top: -5px;
font-weight: bold;
}
.homex {
color: #4cb5f3;
position: absolute;
margin-top: 46px;
margin-left: 15px;
font-size: 16px;
cursor: pointer;
}
</style>
2019-09-03 17:19:06 +08:00
</head>
2019-12-03 21:28:24 +08:00
<body>
<header class="header">
<h3>HFish 全球态势感知</h3>
</header>
<a href="/dashboard"><span class="glyphicon glyphicon-home homex" aria-hidden="true"></span></a>
<div class="wrapper">
<div class="container-fluid">
<div class="row fill-h">
<div class="col-lg-3 fill-h">
<div class="xpanel-wrapper xpanel-wrapper-3">
<div class="xpanel">
<div class="title">中国地区 TOP 8</div>
<div class="fill-h" id="main1"></div>
</div>
</div>
<div class="xpanel-wrapper xpanel-wrapper-3">
<div class="xpanel">
<div class="title">全球地区 TOP 8</div>
<div class="fill-h" id="main2"></div>
</div>
</div>
<div class="xpanel-wrapper xpanel-wrapper-3">
<div class="xpanel">
<div class="title">IP TOP 10</div>
<div class="fill-h" id="main3"></div>
</div>
</div>
</div>
<div class="col-lg-6 fill-h">
<div class="xpanel-wrapper xpanel-wrapper-2">
<div style="height: 100%;">
<div class="fill-h" style="text-align: center;background: #0e1729;border-radius: 5px;">
<video style="mix-blend-mode: lighten;height: 100%;" autoplay loop muted>
<source src="/static/data/dq.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="xpanel-wrapper xpanel-wrapper-2">
<div class="xpanel">
<!-- 地图散点 -->
<div class="fill-h" id="datamian">
<table class="data_list_head table" id="info_list">
<tbody class="data_ul_head">
<tr>
<th style="border: 0px;width: 25%;">类型</th>
<th style="border: 0px;width: 25%;">节点</th>
<th style="border: 0px;width: 25%;">来源IP</th>
<th style="border: 0px;width: 25%;">地理信息</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-lg-3 fill-h">
<div class="xpanel-wrapper xpanel-wrapper-3">
<div class="xpanel">
<div class="title">攻击类型 TOP 10</div>
<div class="fill-h" id="main4"></div>
</div>
</div>
<div class="xpanel-wrapper xpanel-wrapper-3">
<div class="xpanel">
<div class="title">账号统计</div>
<div class="fill-h" id="main5"></div>
</div>
</div>
<div class="xpanel-wrapper xpanel-wrapper-3">
<div class="xpanel">
<div class="title">密码统计</div>
<div class="fill-h" id="main6"></div>
</div>
</div>
</div>
</div>
</div>
2019-09-03 17:19:06 +08:00
</div>
2019-12-03 21:28:24 +08:00
<script type="text/javascript" src="/static/data/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/static/data/js/echarts-3.8.5.min.js"></script>
<script type="text/javascript" src="/static/data/js/echarts-wordcloud.min.js"></script>
2020-04-12 22:19:13 +08:00
<script type="text/javascript" src="/static/js/xss.min.js"></script>
2019-12-03 21:28:24 +08:00
<script type="text/javascript">
2019-09-03 17:19:06 +08:00
2019-12-03 21:28:24 +08:00
window.onresize = function () {
main1.resize();
main2.resize();
main3.resize();
main4.resize();
main5.resize();
main6.resize();
2019-09-03 17:19:06 +08:00
};
2019-12-03 21:28:24 +08:00
var main1 = echarts.init(document.getElementById('main1'));
var main2 = echarts.init(document.getElementById('main2'));
var main3 = echarts.init(document.getElementById('main3'));
var main4 = echarts.init(document.getElementById('main4'));
var main5 = echarts.init(document.getElementById('main5'));
var main6 = echarts.init(document.getElementById('main6'));
function main1_data() {
$.ajax({
type: "GET",
url: "/data/get/china",
dataType: "json",
success: function (e) {
var d = e.data;
var listx = [];
for (var i = 0; i < d.regionList.length; i++) {
listx.push(d.regionList[i].name);
}
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
bottom: 10,
left: 'center',
data: listx,
textStyle: {
color: "#fff"
}
},
series: [{
name: '来源地区',
type: 'pie',
radius: '60%',
center: ['50%', '40%'],
label: {
normal: {
show: false,
position: 'center'
}
},
data: d.regionList,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
main1.setOption(option);
}
});
}
function main2_data() {
$.ajax({
type: "GET",
url: "/data/get/country",
dataType: "json",
success: function (e) {
var d = e.data;
var listx = [];
for (var i = 0; i < d.regionList.length; i++) {
listx.push(d.regionList[i].name);
}
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
bottom: 10,
left: 'center',
data: listx,
textStyle: {
color: "#fff"
}
},
series: [{
name: '来源国家',
type: 'pie',
radius: '60%',
center: ['50%', '40%'],
label: {
normal: {
show: false,
position: 'center'
}
},
data: d.regionList,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
main2.setOption(option);
}
});
}
function main3_data() {
$.ajax({
type: "GET",
url: "/data/get/ip",
dataType: "json",
success: function (e) {
var d = e.data;
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [{
name: 'IP分布',
type: 'pie',
radius: '30%',
center: ['50%', '50%'],
data: d.ipList,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
main3.setOption(option);
}
});
}
function main4_data() {
$.ajax({
type: "GET",
url: "/data/get/type",
dataType: "json",
success: function (e) {
var d = e.data;
var dataN = [];
var dataV = [];
for (var i = d.typeList.length - 1; i >= 0; i--) {
dataN.push(d.typeList[i].name);
dataV.push(d.typeList[i].value);
}
var option = {
tooltip: {},
xAxis: {
type: 'value',
show: false
},
yAxis: {
type: 'category',
data: dataN,
axisLine: {
lineStyle: {
color: '#67c8fd'
}
}
},
grid: {
left: '0%',
right: '0%',
bottom: '0%',
top: '3%',
containLabel: true
},
series: [{
data: dataV,
type: 'bar',
label: {
normal: {
show: true,
position: 'inside',
color: '#fff'
}
},
itemStyle: {
normal: {
color: '#307fa8'
}
}
}]
};
main4.setOption(option);
}
});
}
function main5_data() {
$.ajax({
type: "GET",
url: "/data/get/account",
dataType: "json",
success: function (e) {
var d = e.data;
var option = {
tooltip: {
show: true
},
series: [{
name: '账号',
type: "wordCloud",
gridSize: 6,
shape: 'circle',
sizeRange: [12, 50],
width: '100%',
height: '80%',
textStyle: {
normal: {
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: d
}]
};
main5.setOption(option);
}
});
}
function main6_data() {
$.ajax({
type: "GET",
url: "/data/get/password",
dataType: "json",
success: function (e) {
var d = e.data;
var option = {
tooltip: {
show: true
},
series: [{
name: '密码',
type: "wordCloud",
gridSize: 6,
shape: 'circle',
sizeRange: [12, 50],
width: '100%',
height: '80%',
textStyle: {
normal: {
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: d
}]
};
main6.setOption(option);
}
});
}
function mainInfo() {
$.ajax({
type: "GET",
url: "/data/get/info",
dataType: "json",
success: function (e) {
var d = e.data;
var _h = '';
var result = d.result;
for (var i = 0; i < result.length; i++) {
_h += ' <tr class="data_list">';
2020-04-12 22:19:13 +08:00
_h += ' <td>' + filterXSS(result[i].type) + '</td>';
_h += ' <td>' + filterXSS(result[i].agent) + '</td>';
_h += ' <td>' + filterXSS(result[i].ip) + '</td>';
_h += ' <td>' + filterXSS(result[i].country) + ' ' + filterXSS(result[i].region) + '</td>';
2019-12-03 21:28:24 +08:00
_h += ' </tr>';
}
$("#info_list").append(_h);
}
});
}
function mainWs() {
var wsuri = "ws://" + window.location.host + "/data/ws";
var sock = new WebSocket(wsuri);
sock.onopen = function () {
console.log("connected to " + wsuri);
};
sock.onclose = function (e) {
console.log("connection closed (" + e.code + ")");
};
sock.onmessage = function (e) {
var data = JSON.parse(e.data);
if (data.data.type === "center_data") {
var d = data.data.data;
var _h = '';
_h += ' <tr class="data_list">';
2020-04-12 22:19:13 +08:00
_h += ' <td>' + filterXSS(d.type) + '</td>';
_h += ' <td>' + filterXSS(d.agent) + '</td>';
_h += ' <td>' + filterXSS(d.ipx) + '</td>';
_h += ' <td>' + filterXSS(d.country) + ' ' + filterXSS(d.region) + '</td>';
2019-12-03 21:28:24 +08:00
_h += ' </tr>';
$(".data_list").before(_h);
}
}
}
function init_chart() {
main1_data();
main2_data();
main3_data();
main4_data();
main5_data();
main6_data();
}
init_chart();
mainInfo();
mainWs();
setInterval(init_chart, 300000);
2019-09-03 17:19:06 +08:00
</script>
</body>
2019-12-03 21:28:24 +08:00
2019-09-03 17:19:06 +08:00
</html>