HFish/admin/fish.html

{{template "header"}}
<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 {
        color: #f00;
        cursor: pointer;
    }

    .info {
        color: #039cfd;
        cursor: pointer;
        font-weight: bold;
    }

    .label {
        line-height: 11px;
    }

    .lb_ssh {
        background-color: #434556;
    }

    .lb_redis {
        background-color: #e44242;
    }

    .lb_mysql {
        background-color: #cabd23;
    }

    .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 #167bcc;
        padding: 2px 5px;
        border-radius: 5px;
        color: #167bcc;
        font-size: 12px;
    }
</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">
        </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="10%">项目</th>
                    <th width="10%">集群名称</th>
                    <th width="10%">来源 IP</th>
                    <th width="10%">地理信息</th>
                    <th width="10%">信息</th>
                    <th width="8%">上钩时间</th>
                    <th width="2%">操作</th>
                </tr>
                </thead>
                <tbody id="tableList"></tbody>
            </table>
        </div>
        <div style="text-align: center;" class="dataTables_paginate paging_simple_numbers">
            <ul class="pagination" id="pages">
            </ul>
        </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>
    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[0].info.replace(/&&/g, "<br>");
                    console.log(str);
                    $(".pre").html(str);
                } else {
                }
            },
            error: function (e) {
            }
        });

        $('#myModal').modal('show')
    }

    function del(id) {
        $.ajax({
            type: "POST",
            url: "/post/fish/del",
            dataType: "json",
            data: {
                "id": id
            },
            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) {
                if (e.code == 200) {
                    var data = e.data;
                    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);

                } else {

                }
            },
            error: function (e) {
            }
        });
    }

    function init(page, type, so_text) {
        $.ajax({
            type: "GET",
            url: "/get/fish/list",
            dataType: "json",
            data: {
                "page": page,
                "pageSize": 10,
                "type": type,
                "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">';
                    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> ';
                    }

                    _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">' + data[i].ip + '</td>';
                    _h += '    <td class="td">' + data[i].ip_info + '</td>';
                    _h += '    <td><span class="info" onclick="show(' + data[i].id + ')">点击查看</span></td>';
                    _h += '    <td class="td">' + data[i].create_time + '</td>';
                    _h += '    <td class="td" style="text-align: center;">';
                    _h += '        <i class="fa fa-trash-o" onclick="del(' + data[i].id + ')"></i>';
                    _h += '    </td>';
                    _h += '</tr>';
                }

                if (_h == "") {
                    _h = '<tr style="text-align: center;"><td style="line-height: 200px;font-size: 20px;color: #a9a9a9;" colspan="5">暂无数据</td></tr>'
                }

                $("#tableList").html(_h);

                var pageCount = e.pageCount;
                var page = e.page;
                var _hx = '';

                for (var i = 0; i < parseInt(pageCount); i++) {
                    if (page == (i + 1)) {
                        _hx += '<li class="paginate_button page-item active">';
                        _hx += '    <a onclick="page(' + (i + 1) + ')" style="cursor: pointer;" aria-controls="datatable" data-dt-idx="' + (i + 1) + '" tabindex="0" class="page-link">' + (i + 1) + '</a>';
                        _hx += '</li>';
                    } else {
                        _hx += '<li class="paginate_button page-item">';
                        _hx += '    <a onclick="page(' + (i + 1) + ')" style="cursor: pointer;" aria-controls="datatable" data-dt-idx="' + (i + 1) + '" tabindex="0" class="page-link">' + (i + 1) + '</a>';
                        _hx += '</li>';
                    }
                }


                $("#pages").html(_hx);
            },
            error: function (e) {
            }
        });
    }


    init(1, "all", "");
    init_type();

    function so() {
        var selectType = $("#selectType").val();
        var so_text = $("#so_text").val();

        init(1, selectType, so_text);
    }

    function page(p) {
        var selectType = $("#selectType").val();
        var so_text = $("#so_text").val();

        init(p, selectType, so_text);
    }
</script>