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>
|