HFish/admin/dashboard.html

{{template "header"}}
<style>
    .title {
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 30px;
        color: #383838;
    }

    .openx {
        background: #3dd209;
        width: 10px;
        height: 10px;
        border-radius: 100%;
        display: -webkit-inline-box;
        margin-right: 10px;
    }

    .closex {
        background: #dc0e0e;
        width: 10px;
        height: 10px;
        border-radius: 100%;
        display: -webkit-inline-box;
        margin-right: 10px;
    }

    .lb_web {
        color: #039cfd;
    }

    .lb_ssh {
        color: #953fb9;
    }

    .lb_redis {
        color: #e44242;
    }

    .lb_mysql {
        color: #cabd23;
    }

    .lb_ftp {
        color: #32cc16;
    }

    .lb_telnet {
        color: #6b79c1;
    }

    .lb_deep {
        color: #000000;
    }

    .lb_mem_cache {
        color: #3d9671;
    }
</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="https://hfish.io/docs"
               target="_blank">查看帮助 <span class="m-l-5"><i
                    class="zmdi zmdi-help-outline"></i></span>
            </a>
        </div>
        <h4 class="page-title">仪表盘</h4>
    </div>
    <div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
        <div class="card-box tilebox-two">
            <i class="icon-ghost  pull-xs-right text-muted"></i>
            <h6 class="lb_ssh text-uppercase m-b-15 m-t-10">SSH 蜜罐</h6>
            <h2 class="m-b-10"><span data-plugin="counterup">{{.sshSum}}</span></h2>
        </div>
    </div>

    <div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
        <div class="card-box tilebox-two">
            <i class="icon-layers pull-xs-right text-muted"></i>
            <h6 class="lb_redis text-uppercase m-b-15 m-t-10">Redis 蜜罐</h6>
            <h2 class="m-b-10" data-plugin="counterup">{{.redisSum}}</h2>
        </div>
    </div>

    <div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
        <div class="card-box tilebox-two">
            <i class="icon-chart pull-xs-right text-muted"></i>
            <h6 class="lb_mysql text-uppercase m-b-15 m-t-10">Mysql 蜜罐</h6>
            <h2 class="m-b-10"><span data-plugin="counterup">{{.mysqlSum}}</span></h2>
        </div>
    </div>

    <div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
        <div class="card-box tilebox-two">
            <i class="icon-layers pull-xs-right text-muted"></i>
            <h6 class="lb_ftp text-uppercase m-b-15 m-t-10">FTP 蜜罐</h6>
            <h2 class="m-b-10"><span data-plugin="counterup">{{.ftpSum}}</span></h2>
        </div>
    </div>


    <div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
        <div class="card-box tilebox-two">
            <i class="icon-social-pintarest pull-xs-right text-muted"></i>
            <h6 class="lb_mem_cache text-uppercase m-b-15 m-t-10">MemCache 蜜罐</h6>
            <h2 class="m-b-10"><span data-plugin="counterup">{{.memCacheSum}}</span></h2>
        </div>
    </div>

    <div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
        <div class="card-box tilebox-two">
            <i class="icon-plane pull-xs-right text-muted"></i>
            <h6 class="lb_telnet text-uppercase m-b-15 m-t-10">TELNET 蜜罐</h6>
            <h2 class="m-b-10"><span data-plugin="counterup">{{.telnetSum}}</span></h2>
        </div>
    </div>

    <div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
        <div class="card-box tilebox-two">
            <i class="icon-fire pull-xs-right text-muted"></i>
            <h6 class="lb_web text-uppercase m-b-15 m-t-10">WEB 蜜罐</h6>
            <h2 class="m-b-10"><span data-plugin="counterup">{{.webSum}}</span></h2>
        </div>
    </div>

    <div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
        <div class="card-box tilebox-two">
            <i class="icon-globe pull-xs-right text-muted"></i>
            <h6 class="lb_deep text-uppercase m-b-15 m-t-10">DEEP 蜜罐</h6>
            <h2 class="m-b-10"><span data-plugin="counterup">{{.deepSum}}</span></h2>
        </div>
    </div>

    <div class="col-md-2">
        <div class="card-box" style="height: 550px;">
            <p class="title">服务状态</p>
            <p><span class="openx"></span>ADMIN</p>

        {{if eq .apiStatus "1"}}
            <p><span class="openx"></span>API</p>
        {{else}}
            <p><span class="closex"></span>API</p>
        {{end}}

        {{if eq .apiStatus "1"}}
            <p><span class="openx"></span>PLUG</p>
        {{else}}
            <p><span class="closex"></span>PLUG</p>
        {{end}}

        {{if eq .webStatus "1"}}
            <p><span class="openx"></span>WEB</p>
        {{else}}
            <p><span class="closex"></span>WEB</p>
        {{end}}

        {{if eq .deepStatus "1"}}
            <p><span class="openx"></span>DEEP</p>
        {{else}}
            <p><span class="closex"></span>DEEP</p>
        {{end}}

        {{if eq .sshStatus "1"}}
            <p><span class="openx"></span>SSH</p>
        {{ else if eq .sshStatus "2"}}
            <p><span class="openx"></span>SSH</p>
        {{else}}
            <p><span class="closex"></span>SSH</p>
        {{end}}

        {{if eq .redisStatus "1"}}
            <p><span class="openx"></span>REDIS</p>
        {{else}}
            <p><span class="closex"></span>REDIS</p>
        {{end}}

        {{if eq .mysqlStatus "1"}}
            <p><span class="openx"></span>MYSQL</p>
        {{else}}
            <p><span class="closex"></span>MYSQL</p>
        {{end}}

        {{if eq .telnetStatus "1"}}
            <p><span class="openx"></span>TELNET</p>
        {{else}}
            <p><span class="closex"></span>TELNET</p>
        {{end}}

        {{if eq .ftpStatus "1"}}
            <p><span class="openx"></span>FTP</p>
        {{else}}
            <p><span class="closex"></span>FTP</p>
        {{end}}

        {{if eq .memCacheStatus "1"}}
            <p><span class="openx"></span>MEMCACHE</p>
        {{else}}
            <p><span class="closex"></span>MEMCACHE</p>
        {{end}}

        </div>
    </div>

    <div class="col-md-10">
        <div class="card-box">
            <div id="myChart" style="width:100%;height:200px;"></div>
        </div>
    </div>
    <div class="col-md-5">
        <div class="card-box">
            <div id="myChart1" style="width:100%;height:250px;"></div>
        </div>
    </div>
    <div class="col-md-5">
        <div class="card-box">
            <div id="myChart2" style="width:100%;height:250px;"></div>
        </div>
    </div>
</div>
{{template "footer" }}
<script src="/static/libs/echarts/echarts.js"></script>
<script src="/static/libs/moment/moment.min.js"></script>
<script>
    var m = moment(new Date());

    var arr = new Array();

    for (var i = 0; i < 24; i++) {
        var h = m.subtract(1, 'h').hours();
        if (h >= 0 && h < 10) {
            arr.push("0" + h.toString())
        } else {
            arr.push(h.toString())
        }
    }

    var xdata = arr.reverse();

    var webData = [
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
    ];

    var sshData = [
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
    ];

    var redisData = [
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
    ];

    var mysqlData = [
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
    ];

    var deepData = [
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
    ];

    var ftpData = [
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
    ];

    var telnetData = [
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
    ];

    var memCacheData = [
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
    ];

    var myChart = echarts.init(document.getElementById('myChart'));

    $.ajax({
        type: "GET",
        url: "/get/dashboard/data",
        dataType: "json",
        success: function (e) {
            if (e.code == 200) {
                var d = e.data;

                for (var item in d.mysql) {
                    var index = xdata.indexOf(item);
                    mysqlData[index] = d.mysql[item];
                }

                for (var item in d.redis) {
                    var index = xdata.indexOf(item);
                    redisData[index] = d.redis[item];
                }

                for (var item in d.ssh) {
                    var index = xdata.indexOf(item);
                    sshData[index] = d.ssh[item];
                }

                for (var item in d.web) {
                    var index = xdata.indexOf(item);
                    webData[index] = d.web[item];
                }

                for (var item in d.deep) {
                    var index = xdata.indexOf(item);
                    deepData[index] = d.deep[item];
                }

                for (var item in d.ftp) {
                    var index = xdata.indexOf(item);
                    ftpData[index] = d.ftp[item];
                }

                for (var item in d.telnet) {
                    var index = xdata.indexOf(item);
                    telnetData[index] = d.telnet[item];
                }

                for (var item in d.memCache) {
                    var index = xdata.indexOf(item);
                    memCacheData[index] = d.memCache[item];
                }


                var option = {
                    title: {
                        text: '最近24小时'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['WEB', 'DEEP', 'SSH', 'REDIS', 'MYSQL', 'TELNET', 'FTP', 'MEMCACHE']
                    },
                    grid: {
                        left: '0%',
                        right: '2%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: xdata
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: 'WEB',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            data: webData
                        },
                        {
                            name: 'DEEP',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            data: deepData
                        },
                        {
                            name: 'SSH',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            data: sshData
                        },
                        {
                            name: 'REDIS',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            data: redisData
                        },
                        {
                            name: 'MYSQL',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            data: mysqlData
                        },
                        {
                            name: 'TELNET',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            data: telnetData
                        },
                        {
                            name: 'FTP',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            data: ftpData
                        },
                        {
                            name: 'MEMCACHE',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            data: memCacheData
                        }
                    ]
                };
                myChart.setOption(option);
            }
        }
    });


    var myChart1 = echarts.init(document.getElementById('myChart1'));
    var myChart2 = echarts.init(document.getElementById('myChart2'));


    $.ajax({
        type: "GET",
        url: "/get/dashboard/pie_data",
        dataType: "json",
        success: function (e) {
            var d = e;

            console.log(d);

            var option = {
                title: {
                    text: '[攻击地区] TOP10',
                    x: 'left'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                series: [
                    {
                        name: '来源地区',
                        type: 'pie',
                        radius: '60%',
                        center: ['50%', '60%'],
                        data: d.regionList,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            myChart1.setOption(option);


            var option = {
                title: {
                    text: '[攻击IP] TOP10',
                    x: 'left'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                series: [
                    {
                        name: '攻击者IP',
                        type: 'pie',
                        radius: '60%',
                        center: ['50%', '60%'],
                        data: d.ipList,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            myChart2.setOption(option);
        }
    });
</script>