mirror of
https://gitee.com/lauix/HFish
synced 2025-05-11 04:18:02 +08:00
444 lines
13 KiB
Go
444 lines
13 KiB
Go
{{template "header"}}
|
||
<link href="/static/libs/page/jquery.sPage.css" rel="stylesheet"/>
|
||
<style>
|
||
.card-box {
|
||
padding: 0px;
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
margin-bottom: 0rem;
|
||
}
|
||
|
||
#tableList .td {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
thead {
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.project {
|
||
font-weight: bold;
|
||
padding-left: 5px;
|
||
}
|
||
|
||
.fa-trash-o {
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.info {
|
||
color: #039cfd;
|
||
cursor: pointer;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.label {
|
||
line-height: 11px;
|
||
}
|
||
|
||
.lb_ssh {
|
||
background-color: #953fb9;
|
||
}
|
||
|
||
.lb_redis {
|
||
background-color: #e44242;
|
||
}
|
||
|
||
.lb_mysql {
|
||
background-color: #cabd23;
|
||
}
|
||
|
||
.lb_ftp {
|
||
background-color: #32cc16;
|
||
}
|
||
|
||
.lb_telnet {
|
||
background-color: #6b79c1;
|
||
}
|
||
|
||
.lb_deep {
|
||
background-color: #000000;
|
||
}
|
||
|
||
.lb_mem_cache {
|
||
background-color: #3d9671;
|
||
}
|
||
|
||
.lb_plug {
|
||
background-color: #61772d;
|
||
}
|
||
|
||
.pre {
|
||
background: #2c2c31;
|
||
color: #4fe21b;
|
||
padding: 10px;
|
||
border-bottom-left-radius: 5px;
|
||
border-bottom-right-radius: 5px;
|
||
}
|
||
|
||
.modal-body {
|
||
position: relative;
|
||
padding: 0px;
|
||
margin-bottom: -14px;
|
||
}
|
||
|
||
.modal-content {
|
||
border-bottom-left-radius: 6px;
|
||
border-bottom-right-radius: 6px;
|
||
}
|
||
|
||
.modal-header {
|
||
padding: 10px;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
}
|
||
|
||
.modal-header .close {
|
||
margin-top: 0px;
|
||
}
|
||
|
||
.sos {
|
||
margin-bottom: 10px;
|
||
height: 100px;
|
||
}
|
||
|
||
.agent_name {
|
||
border: 1px solid #079dfd;
|
||
padding: 2px 5px;
|
||
border-radius: 5px;
|
||
color: #079dfd;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.ipinfo {
|
||
border: 1px solid #434e56;
|
||
padding: 2px 5px;
|
||
border-radius: 5px;
|
||
color: #434e56;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.cinfo {
|
||
border: 1px solid #1eaec1;
|
||
padding: 2px 5px;
|
||
border-radius: 5px;
|
||
color: #1eaec1;
|
||
font-size: 12px;
|
||
}
|
||
|
||
#myPage {
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.checkbox {
|
||
padding-left: 20px;
|
||
margin-bottom: -2px;
|
||
}
|
||
</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="#">导出 <span class="m-l-5"><i*/}}
|
||
{{/*class="zmdi zmdi-alarm-plus"></i></span>*/}}
|
||
{{/*</a>*/}}
|
||
{{/*</div>*/}}
|
||
<h4 class="page-title">上钩列表</h4>
|
||
</div>
|
||
|
||
<div class="sos">
|
||
<div class="col-sm-2">
|
||
<select class="form-control" id="selectType" style="height: 34px;" onchange="so()"></select>
|
||
</div>
|
||
<div class="col-sm-2">
|
||
<select class="form-control" id="selectColony" style="height: 34px;" onchange="so()"></select>
|
||
</div>
|
||
<div class="col-sm-2">
|
||
</div>
|
||
<div class="col-sm-2">
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<div class="input-group">
|
||
<span class="input-group-addon"><i class="fa fa-search"></i></span>
|
||
<input type="text" class="form-control" id="so_text"
|
||
placeholder="请输入搜索内容" oninput="so()">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="col-sm-12">
|
||
<div class="card-box table-responsive">
|
||
<table class="table table-hover">
|
||
<thead>
|
||
<tr>
|
||
<th width="1%">
|
||
<div class="checkbox checkbox-single checkbox-danger">
|
||
<input type="checkbox" value="all" id="check_all">
|
||
<label></label>
|
||
</div>
|
||
</th>
|
||
<th width="11%">项目</th>
|
||
<th width="8%">集群名称</th>
|
||
<th width="8%">来源 IP</th>
|
||
<th width="9%">地理信息</th>
|
||
<th width="5%">信息</th>
|
||
<th width="5%">长度</th>
|
||
<th width="8%">上钩时间</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="tableList">
|
||
<tr style="text-align: center;">
|
||
<td style="line-height: 200px;font-size: 20px;color: #a9a9a9;" colspan="8">暂无数据</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<button type="button" id="delbtn" class="btn btn-danger waves-effect waves-light btn-sm"
|
||
style="float: left;margin-top: 5px;" onclick="del()" disabled><i class="fa fa-trash-o"></i>删除
|
||
</button>
|
||
<div id="myPage"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
<h6 class="modal-title" id="myModalLabel">上钩信息</h6>
|
||
</div>
|
||
<div class="modal-body">
|
||
<pre class="pre"></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{template "footer" }}
|
||
<script src="/static/libs/page/jquery.sPage.js"></script>
|
||
<script>
|
||
function show(id) {
|
||
$.ajax({
|
||
type: "GET",
|
||
url: "/get/fish/info",
|
||
dataType: "json",
|
||
data: {
|
||
"id": id
|
||
},
|
||
success: function (e) {
|
||
if (e.code == 200) {
|
||
var data = e.data;
|
||
var str = data.info.replace(/&&/g, "<br>");
|
||
$(".pre").html(str);
|
||
} else {
|
||
}
|
||
},
|
||
error: function (e) {
|
||
}
|
||
});
|
||
|
||
$('#myModal').modal('show')
|
||
}
|
||
|
||
function del() {
|
||
var val = "";
|
||
$('input[name^="check_"]').each(function () {
|
||
if (this.checked) {
|
||
val += $(this).val() + ',';
|
||
}
|
||
});
|
||
val = val.substring(0, val.length - 1);
|
||
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "/post/fish/del",
|
||
dataType: "json",
|
||
data: {
|
||
"id": val
|
||
},
|
||
success: function (e) {
|
||
if (e.code == 200) {
|
||
window.location.href = "/fish";
|
||
} else {
|
||
swal("删除失败", e.msg, 'error');
|
||
}
|
||
},
|
||
error: function (e) {
|
||
swal("删除失败", "请 Github 提交 Issues", 'error');
|
||
}
|
||
});
|
||
}
|
||
|
||
function init_type() {
|
||
$.ajax({
|
||
type: "GET",
|
||
url: "/get/fish/typeList",
|
||
dataType: "json",
|
||
success: function (e) {
|
||
var data = e.data.resultInfoType;
|
||
var _h = '<option value="all">请选择类型</option>';
|
||
|
||
for (var i = 0; i < data.length; i++) {
|
||
_h += '<option value="' + data[i].type + '">' + data[i].type + '</option>';
|
||
}
|
||
|
||
$("#selectType").html(_h);
|
||
|
||
var data1 = e.data.resultColonyName;
|
||
var _h1 = '<option value="all">请选择集群</option>';
|
||
|
||
for (var i = 0; i < data1.length; i++) {
|
||
_h1 += '<option value="' + data1[i].agent + '">' + data1[i].agent + '</option>';
|
||
}
|
||
$("#selectColony").html(_h1);
|
||
},
|
||
error: function (e) {
|
||
}
|
||
});
|
||
}
|
||
|
||
$("#check_all").click(function () {
|
||
var status = 0;
|
||
|
||
$('input[name="check_x"]').each(function () {
|
||
if ($("#check_all").prop('checked') == true) {
|
||
status++;
|
||
this.checked = true;
|
||
} else {
|
||
this.checked = false;
|
||
}
|
||
});
|
||
|
||
if (status > 0) {
|
||
$("#delbtn").attr("disabled", false);
|
||
} else {
|
||
$("#delbtn").attr("disabled", true);
|
||
}
|
||
});
|
||
|
||
function changedel() {
|
||
var status = 0;
|
||
$('input[name="check_x"]').each(function () {
|
||
if (this.checked == true) {
|
||
status++;
|
||
} else {
|
||
}
|
||
});
|
||
|
||
if (status > 0) {
|
||
$("#delbtn").attr("disabled", false);
|
||
} else {
|
||
$("#delbtn").attr("disabled", true);
|
||
}
|
||
}
|
||
|
||
function init(page, type, colony, so_text) {
|
||
$.ajax({
|
||
type: "GET",
|
||
url: "/get/fish/list",
|
||
dataType: "json",
|
||
data: {
|
||
"page": page,
|
||
"pageSize": 10,
|
||
"type": type,
|
||
"colony": colony,
|
||
"so_text": so_text
|
||
},
|
||
success: function (e) {
|
||
var data = e.data;
|
||
var _h = '';
|
||
|
||
for (var i = 0; i < data.length; i++) {
|
||
_h += '<tr>';
|
||
_h += ' <td class="td"><div class="checkbox checkbox-single checkbox-danger"><input type="checkbox" value="' + data[i].id + '" name="check_x" onchange="changedel()"><label></label></div></td>'
|
||
_h += ' <td class="td">';
|
||
if (data[i].type == "WEB") {
|
||
_h += ' <span class="label label-primary">WEB</span> ';
|
||
} else if (data[i].type == "SSH") {
|
||
_h += ' <span class="label lb_ssh">SSH</span> ';
|
||
} else if (data[i].type == "REDIS") {
|
||
_h += ' <span class="label lb_redis">REDIS</span> ';
|
||
} else if (data[i].type == "MYSQL") {
|
||
_h += ' <span class="label lb_mysql">MYSQL</span> ';
|
||
} else if (data[i].type == "FTP") {
|
||
_h += ' <span class="label lb_ftp">FTP</span> ';
|
||
} else if (data[i].type == "TELNET") {
|
||
_h += ' <span class="label lb_telnet">TELNET</span> ';
|
||
} else if (data[i].type == "DEEP") {
|
||
_h += ' <span class="label lb_deep">DEEP</span> ';
|
||
} else if (data[i].type == "MEMCACHE") {
|
||
_h += ' <span class="label lb_mem_cache">MEMCACHE</span> ';
|
||
} else if (data[i].type == "PLUG") {
|
||
_h += ' <span class="label lb_plug">PLUG</span> ';
|
||
}
|
||
|
||
_h += ' <span class="project">' + data[i].project_name + '</span>';
|
||
_h += ' </td>';
|
||
_h += ' <td class="td"><span class="agent_name">' + data[i].agent + '</span></td>';
|
||
_h += ' <td class="td" style="font-weight: bold;">' + data[i].ip + '</td>';
|
||
|
||
// country,region,city
|
||
if (data[i].country == "本机地址") {
|
||
_h += ' <td class="td"><span class="ipinfo">本机地址</span></td>';
|
||
} else if (data[i].country == "局域网") {
|
||
_h += ' <td class="td"><span class="ipinfo">局域网</span></td>';
|
||
}
|
||
else {
|
||
_h += ' <td class="td"><span class="ipinfo">' + data[i].country + ' ' + data[i].region + ' ' + data[i].city + '</span></td>';
|
||
}
|
||
|
||
_h += ' <td><span class="info" onclick="show(' + data[i].id + ')">点击查看</span></td>';
|
||
_h += ' <td class="td"><span class="cinfo">' + data[i].info.length + '</span></td>';
|
||
_h += ' <td class="td">' + data[i].create_time + '</td>';
|
||
_h += '</tr>';
|
||
}
|
||
|
||
if (_h == "") {
|
||
_h = '<tr style="text-align: center;"><td style="line-height: 200px;font-size: 20px;color: #a9a9a9;" colspan="8">暂无数据</td></tr>'
|
||
}
|
||
|
||
$("#tableList").html(_h);
|
||
|
||
var pageCount = e.pageCount;
|
||
var totalCount = e.totalCount;
|
||
var page = e.page;
|
||
|
||
|
||
$("#myPage").sPage({
|
||
page: page,
|
||
pageSize: 10,
|
||
total: totalCount,
|
||
totalTxt: "共{total}条",//数据总条数文字描述，{total}为占位符，默认"共{total}条"
|
||
noData: true,//没有数据时是否显示分页，默认false不显示，true显示第一页
|
||
showTotal: true,//是否显示总条数，默认关闭：false
|
||
showSkip: true,
|
||
showPN: true,
|
||
prevPage: "上一页",
|
||
nextPage: "下一页",
|
||
backFun: function (p) {
|
||
var selectType = $("#selectType").val();
|
||
var selectColony = $("#selectColony").val();
|
||
var so_text = $("#so_text").val();
|
||
init(p, selectType, selectColony, so_text);
|
||
}
|
||
});
|
||
},
|
||
error: function (e) {
|
||
}
|
||
});
|
||
}
|
||
|
||
init(1, "all", "all", "");
|
||
init_type();
|
||
|
||
function so() {
|
||
var selectType = $("#selectType").val();
|
||
var selectColony = $("#selectColony").val();
|
||
var so_text = $("#so_text").val();
|
||
|
||
|
||
init(1, selectType, selectColony, so_text);
|
||
}
|
||
</script> |