HFish/admin/fish.html

{{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;
    }

    .lb_es {
        background-color: #0177a3;
    }

    .lb_tftp {
        background-color: #452b6d;
    }

    .lb_vnc {
        background-color: #3c6f40;
    }

    .lb_http {
        background-color: #56a996;
    }

    .lb_custom {
        background-color: #8c600e;
    }

    .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="myFishInfo" 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(filterXSS(str));
                } else {
                }
            },
            error: function (e) {
            }
        });

        $('#myFishInfo').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 + '">' + filterXSS(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 + '">' + filterXSS(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.result.length; i++) {
                    _h += '<tr>';
                    _h += '    <td class="td"><div class="checkbox checkbox-single checkbox-danger"><input type="checkbox"  value="' + data.result[i].id + '" name="check_x" onchange="changedel()"><label></label></div></td>'
                    _h += '    <td class="td">';
                    if (data.result[i].type == "WEB") {
                        _h += '       <span class="label label-primary">WEB</span> ';
                    } else if (data.result[i].type == "SSH") {
                        _h += '       <span class="label lb_ssh">SSH</span> ';
                    } else if (data.result[i].type == "REDIS") {
                        _h += '       <span class="label lb_redis">REDIS</span> ';
                    } else if (data.result[i].type == "MYSQL") {
                        _h += '       <span class="label lb_mysql">MYSQL</span> ';
                    } else if (data.result[i].type == "FTP") {
                        _h += '       <span class="label lb_ftp">FTP</span> ';
                    } else if (data.result[i].type == "TELNET") {
                        _h += '       <span class="label lb_telnet">TELNET</span> ';
                    } else if (data.result[i].type == "DEEP") {
                        _h += '       <span class="label lb_deep">DEEP</span> ';
                    } else if (data.result[i].type == "MEMCACHE") {
                        _h += '       <span class="label lb_mem_cache">MEMCACHE</span> ';
                    } else if (data.result[i].type == "PLUG") {
                        _h += '       <span class="label lb_plug">PLUG</span> ';
                    } else if (data.result[i].type == "ES") {
                        _h += '       <span class="label lb_es">ES</span> ';
                    } else if (data.result[i].type == "TFTP") {
                        _h += '       <span class="label lb_tftp">TFTP</span> ';
                    } else if (data.result[i].type == "VNC") {
                        _h += '       <span class="label lb_vnc">VNC</span> ';
                    } else if (data.result[i].type == "HTTP") {
                        _h += '       <span class="label lb_http">HTTP</span> ';
                    } else if (data.result[i].type == "CUSTOM") {
                        _h += '       <span class="label lb_custom">CUSTOM</span> ';
                    }

                    _h += '       <span class="project">' + filterXSS(data.result[i].project_name) + '</span>';
                    _h += '    </td>';
                    _h += '    <td class="td"><span class="agent_name">' + filterXSS(data.result[i].agent) + '</span></td>';
                    _h += '    <td class="td" style="font-weight: bold;">' + filterXSS(data.result[i].ip) + '</td>';

                    // country,region,city
                    if (data.result[i].country == "本机地址") {
                        _h += '    <td class="td"><span class="ipinfo">本机地址</span></td>';
                    } else if (data.result[i].country == "局域网") {
                        _h += '    <td class="td"><span class="ipinfo">局域网</span></td>';
                    } else {
                        if (data.result[i].country == "中国") {
                            _h += '    <td class="td"><span class="ipinfo">' + filterXSS(data.result[i].country) + ' ' + filterXSS(data.result[i].region) + ' ' + filterXSS(data.result[i].city) + '</span></td>';
                        } else {
                            // 国外IP只能拿到国家
                            _h += '    <td class="td"><span class="ipinfo">' + filterXSS(data.result[i].country) + '</span></td>';
                        }
                    }

                    _h += '    <td><span class="info" onclick="show(' + data.result[i].id + ')">点击查看</span></td>';
                    _h += '    <td class="td"><span class="cinfo">' + data.result[i].info.replace("&&", "").length + '</span></td>';
                    _h += '    <td class="td">' + data.result[i].create_time.replace("T", " ").replace("+08:00", " ").replace("Z", "") + '</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 = data.pageCount;
                var totalCount = data.totalCount;
                var page = data.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>