{% extends "../main.html" %}
{% block title %}首页{% end %}
{% block content %}
<style>
    .guide-card .card-header {
        border: none;
        padding-bottom: 0;
    }

    .guide-card .card-header p {
        font-weight: 400;
        font-size: 16px;
    }

    .guide-card .card-body p {
        font-weight: 400;
        font-size: 16px;
    }

    .guide-card .card-body button {
        height: 2.5rem;
        width: 9rem;
    }

    .font-size-13 {
        font-size: 13px;
    }

    .guide-icon {
        margin-bottom: .8rem;
    }

    .guide-icon svg {
        margin-bottom: 2px;
        margin-right: 12px;
    }

    .level-img img {
        margin-bottom: 4px;
    }
</style>
<div id="content" class="flex">
    <div>
        <div class="page-hero page-container " id="page-hero">
            <div class="padding d-flex" style="padding-bottom: 0;">
                <div class="page-title">
                    <h2 class="text-md text-highlight">首页</h2>
                    <small class="text-muted">欢迎上船,
                        <strong>{{ data['user']['nickname'] }}</strong>
                    </small>
                </div>
                <div class="flex"></div>
            </div>
        </div>

        <div class="page-content page-container" id="page-content">
            <div class="padding">
                {% module xsrf_form_html() %}
                <div class="row">
                    <div class="col-12">
                        <div class="card guide-card">
                            <div class="card-header">
                                <h4 class="mt-3">欢迎使用鸿鹄智能建站系统</h4>
                                <p class="h5 text-muted font-weight-400">我们准备了几个链接供您开始：</p>
                            </div>
                            <div class="card-body">
                                <div class="row row-sm">
                                    <div class="col-4">
                                        <p class="text-highlight text-dark font-weight-500 h5 mb-3">开始使用</p>
                                        <a href="batch">
                                            <button class="btn btn-raised btn-wave mb-2 w-sm blue text-white">创建您的站点
                                            </button>
                                        </a>
                                    </div>
                                    <div class="col-4">
                                        <p class="text-highlight text-dark font-weight-500 h5 mb-3">接下来</p>
                                        <div class="guide-icon"><i data-feather="edit"></i><a href="sitelist"
                                                                                              class="text-highlight mt-2 font-size-13">配置网站SEO信息</a>
                                        </div>
                                        <div class="guide-icon"><i data-feather="columns"></i><a href="column_list"
                                                                                                 class="text-highlight mt-2 font-size-13">优化栏目主词/描述等信息</a>
                                        </div>
                                        <div class="guide-icon"><i data-feather="command"></i><a href="pageupdate_info"
                                                                                                 class="text-highlight mt-2 font-size-13">采集调度管理</a>
                                        </div>
                                        <div class="guide-icon"><i data-feather="star"></i><a href="#"
                                                                                              class="text-highlight mt-2 font-size-13">挑选网站模板</a>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <p class="text-highlight text-dark font-weight-500 h5 mb-3">更多操作</p>
                                        <div class="guide-icon"><i data-feather="box"></i><a href="#"
                                                                                             class="text-highlight mt-2 font-size-13">安装功能插件</a>
                                        </div>
                                        <div class="guide-icon"><i data-feather="book-open"></i><a
                                                href="http://docs.swanyun.com/" target="__blank"
                                                class="text-highlight mt-2 font-size-13">了解更多新手上路知识</a></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="row row-sm">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row row-sm">
                                            <div class="col-4">
                                                <small class="text-muted">用户等级</small>
                                                <div class="mt-2 font-weight-500">
                                                    {% if data['user']['group_name']=="ee" %}
                                                    <span class="level-img">
                                                            <img src="{{ static_url('img/ee.png') }}" width="20"
                                                                 height="20"/>
                                                        </span>
                                                    <span class="text-highlight">企业版用户</span>
                                                    {% elif data['user']['group_name']=="pro" %}
                                                    <span class="level-img">
                                                            <img src="{{ static_url('img/pro.png') }}" width="20"
                                                                 height="20"/>
                                                        </span>
                                                    <span class="text-highlight">专业版用户</span>
                                                    {% elif data['user']['group_name']=="vip" %}
                                                    <span class="level-img">
                                                            <img src="{{ static_url('img/vip.png') }}" width="20"
                                                                 height="20"/>
                                                        </span>
                                                    <span class="text-highlight">VIP版用户</span>
                                                    {% else %}
                                                    <span class="level-img">
                                                            <img src="{{ static_url('img/free.png') }}" width="20"
                                                                 height="20"/>
                                                        </span>
                                                    <span class="text-highlight">免费版用户</span>
                                                    {% end %}
                                                </div>
                                            </div>
                                            <div class="col-4">
                                                <small class="text-muted">网站数量</small>
                                                <div class="text-highlight mt-2 font-weight-500">{{ data['sitecount'] }}</div>
                                            </div>
                                            <div class="col-4">
                                                <small class="text-muted">访问数量</small>
                                                <div class="mt-2 font-weight-500">{{ data['count'] }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-md-flex mb-2">
                                            <div class="flex">
                                                <div class="text-highlight text-md">{{ data['yesterday_article_count'] }}
                                                    <small>篇</small>
                                                </div>
                                                <small class="h-1x text-muted">昨日更新文章</small>
                                            </div>
                                            <div>
                                                <a href="/articlelist" class="text-muted"><i class="mx-2"
                                                                                             data-feather="external-link"></i></a>
                                            </div>
                                        </div>
                                        <div class="w-50" style="max-height: 25px;">
                                            <canvas data-plugin="chartjs" id="chart-line-1">
                                            </canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-md-flex mb-2">
                                            <div class="flex">
                                                <div class="text-highlight text-md">{{ data['today_article_count'] }}
                                                    <small>篇</small>
                                                </div>
                                                <small class="h-1x text-muted">今日待更新文章</small>
                                            </div>
                                            <div>
                                                <small class="text-muted" data-toggle="popover" data-trigger="hover"
                                                       data-html="true" data-placement="top"
                                                       data-content="<b>提示</b>: 待更新文章将根据您配置的采集更新规则按指定时间发布"><i
                                                        class="mx-2" data-feather="alert-circle"></i></small>
                                            </div>
                                        </div>
                                        <div class="w-50" style="max-height: 25px;">
                                            <canvas data-plugin="chartjs" id="chart-line-2">
                                            </canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="row">
                            <div class="col-6">
                                <div class="card flex">
                                    <div class="card-body text-center">
                                        <div class="pt-3">
                                            <div style="height: 172px" class="pos-rlt">
                                                <div class="pos-abt w-100 h-100 d-flex align-items-center justify-content-center">
                                                    <div>
                                                        <div class="text-highlight text-md">
                                                                <span class="cpuNum">
                                                                    {{ data['cpu']['percent_avg'] }}%
                                                                </span>
                                                        </div>
                                                        <small class="text-muted">CPU使用率</small>
                                                    </div>
                                                </div>
                                                <canvas data-plugin="chartjs" id="chart-cpu"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card flex">
                                    <div class="card-body text-center">
                                        <div class="pt-3">
                                            <div style="height: 172px" class="pos-rlt">
                                                <div class="pos-abt w-100 h-100 d-flex align-items-center justify-content-center">
                                                    <div>
                                                        <div class="text-highlight text-md">
                                                                <span class="memNum">
                                                                    {{ data['mem']['percent'] }}%
                                                                </span>
                                                        </div>
                                                        <small class="text-muted">内存使用率</small>
                                                    </div>
                                                </div>
                                                <canvas data-plugin="chartjs" id="chart-mem"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="mb-2">
                                    <small class="text-muted">数据汇总</small>
                                </div>
                                <div class="row">
                                    <div class="col-4">
                                        <div class="text-highlight text-md">{{ data['articlecount'] }}
                                            <small>篇</small>
                                        </div>
                                        <small>文章总量</small>
                                    </div>
                                    <div class="col-4">
                                        <div class="text-danger text-md">{{ data['mainkeycount'] }}
                                            <small>个</small>
                                        </div>
                                        <small>主词总量</small>
                                    </div>
                                    <div class="col-4">
                                        <div class="text-md">{{ data['columncount'] }}
                                            <small>个</small>
                                        </div>
                                        <small>栏目总量</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="card flex">
                            <div class="card-body" style="padding:1.8rem">
                                <small>系统负载:
                                    <strong id="average-val"
                                            class="text-primary">{{ data['average'][0]['avg_load'] }}%</strong>
                                </small>
                                <div class="progress my-3 circle" style="height:6px;">
                                    <div id="average" class="progress-bar circle gd-primary" data-toggle="tooltip"
                                         title="{{ data['average'][0]['avg_load'] }}%"
                                         style="width: {{ data['average'][0]['avg_load'] }}%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="card flex">
                            <div class="card-body" style="padding:1.8rem">
                                <small>磁盘占用:
                                    <strong id="diskpercent-val"
                                            class="text-primary">{{ data['disk']['percent'] }}%</strong>
                                </small>
                                <div class="progress my-3 circle" style="height:6px;">
                                    <div id="diskpercent" class="progress-bar circle gd-warning" data-toggle="tooltip"
                                         title="{{ data['disk']['percent'] }}%"
                                         style="width: {{ data['disk']['percent'] }}%"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-6">
                        <div class="card">
                            <div class="p-3-4">
                                <div class="d-flex mb-3">
                                    <div>
                                        <div>流量</div>
                                        <small class="text-muted">单位: Kb/s</small>
                                    </div>
                                    <span class="flex"></span>
                                    <div>
                                        <div class="btn-group btn-group-toggle" id="btn_l_4" data-toggle="buttons">
                                            <label class="btn active">
                                                <input type="radio" name="options"> 上行
                                            </label>
                                            <label class="btn">
                                                <input type="radio" name="options"> 下行
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="p-2" style="height: 12.84rem;">
                                    <canvas data-plugin="chartjs" id="network"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card flex" style="min-height: 18.72rem;">
                            <div class="p-3-4">
                                <div class="d-flex">
                                    <div>
                                        <div>最新公告</div>
                                        <small id="notice-last-time" class="text-muted">2019-05-18</small>
                                    </div>
                                    <span class="flex"></span>
                                    <div>
                                        <a href="#" class="p-1 text-muted">
                                            <i data-feather="more-horizontal"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div id="notice-list" class="list list-row">

                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
</div>
{% end %}
{% block js %}
<script src="static/libs/chart.js/dist/Chart.min.js"></script>
<script src="static/libs/chart.js/dist/chart.ext.js"></script>
<script src="static/libs/jquery-countto/jquery.countTo.js"></script>
<script src="static/js/index.js"></script>
<!--<script src="https://cdn.bootcss.com/sockjs-client/1.4.0/sockjs.min.js"></script>-->
<script>
    Chart.defaults.global.defaultColor = 'rgba(130,140,155,0.1)';
    Chart.defaults.global.defaultFontColor = 'rgba(130,140,155,0.65)';
    Chart.defaults.scale.gridLines.color =
        Chart.defaults.scale.gridLines.zeroLineColor = 'rgba(130,140,155,0.05)';
    Chart.defaults.global.tooltips.cornerRadius = 3;
    Chart.defaults.global.maintainAspectRatio = false;

    var charted = function (target) {
        return new RegExp('(\\s|^)' + 'chartjs-render-monitor' + '(\\s|$)').test(target.className);
    }

    var cpus = document.getElementById('chart-cpu');
    if (cpus && !charted(cpus)) {
        var myCpuChart = new Chart(cpus.getContext('2d'),
            {
                type: 'easypie',
                data: {
                    datasets: [
                        {
                            data: [{{data['cpu']['percent_avg']}}],
                            backgroundColor: 'rgba(100,100,100,0.1)',
                            borderColor: [theme.color.success, theme.color.success],
                            borderWidth: 6,
                        }
                    ]
                }
            }
        );
    }

    var mems = document.getElementById('chart-mem');
    if (mems && !charted(mems)) {
        var myMemChart = new Chart(mems.getContext('2d'),
            {
                type: 'easypie',
                data: {
                    datasets: [
                        {
                            data: [{{data['mem']['percent']}}],
                            backgroundColor: 'rgba(100,100,100,0.1)',
                            borderColor: [theme.color.success, theme.color.warning],
                            borderWidth: 6,
                        }
                    ]
                }
            }
        );
    }

    var d_l_4 = {
        labels: [1, 2, 3, 4, 5, 6, 7, 8],
        datasets: [
            {
                label: 'sent',
                data: [11, 12, 13, 14, 15, 16, 17, {{data['net']['bytes_sent_rate']}}],
                pointRadius: 5,
                pointBorderWidth: 0,
                pointBackgroundColor: 'rgba(0,0,0,0)',
                pointBorderColor: 'rgba(0,0,0,0)',
                tension: 0.35,
                fill: false,
                borderColor: [Utils.color(theme.color.primary, 0), theme.color.primary, theme.color.success, theme.color.warning],
                pointHoverRadius: 5,
                pointHoverBorderColor: Utils.color(theme.color.primary, 0.2),
                pointHoverBackgroundColor: theme.color.primary,
                pointHoverBorderWidth: 15,
                borderWidth: 3
            },
            {
                label: 'recv',
                data: [11, 12, 13, 14, 15, 16, 17, {{data['net']['bytes_recv_rate']}}],
                pointRadius: 0,
                pointBorderWidth: 5,
                tension: 0.35,
                fill: false,
                borderColor: theme.color.danger,
                pointHoverRadius: 3,
                pointHoverBorderColor: Utils.color(theme.color.danger, 0.2),
                pointHoverBackgroundColor: theme.color.danger,
                pointHoverBorderWidth: 10,
                borderWidth: 2
            }
        ]
    };
    var ctx = document.getElementById('network');
    if (ctx && !charted(ctx)) {
        var c_l_4 = new Chart(ctx.getContext('2d'),
            {
                type: 'line',
                data: d_l_4,
                options: {
                    gradient: true,
                    legend: {
                        display: false
                    },
                    scales: {
                        yAxes: [
                            {
                                ticks: {
                                    min: 0,
                                    max: 1000,
                                    stepSize: 200
                                }
                            }
                        ]
                    }
                }
            }
        );
        document.getElementById('btn_l_4').addEventListener('click', function () {
            //
        });
    }

    disconnect();//把之前没有关闭的连接关闭掉，在定义新的连接
    // 1.定义长连接函数
    var ws = null;

    //专门实时更新信息
    function update_ui(e) {
        var data = e.data;
        data = JSON.parse(data);//把json字符串转化为对象
        var cpu_value = data.cpu.percent_avg
        var mem_value = data.mem.percent

        myCpuChart.data.datasets[0].data[0] = cpu_value;
        myCpuChart.update({
            duration: 10
        });
        $('.cpuNum').text(cpu_value + "%")

        myMemChart.data.datasets[0].data[0] = mem_value;
        myMemChart.update({
            duration: 10
        });
        $('.memNum').text(mem_value + "%")

        // 磁盘占用
        var diskpercent = data['disk']['percent'];
        $("#diskpercent").css("width", diskpercent + "%");
        $("#diskpercent").attr('data-original-title', diskpercent + "%");
        $("#diskpercent-val").text(diskpercent + "%");

        //系统负载
        var average_load = data['average_load']['avg_load']
        $("#average").css("width", average_load + "%");
        $("#average").attr('data-original-title', average_load + "%");
        $("#average-val").text(average_load + "%");

        // 带宽状况
        d_l_4.datasets.forEach(function (dataset) {
            if (dataset.label == 'sent') {
                if (dataset.data.length == 8) {
                    dataset.data.shift();
                    dataset.data.push(data['net']['bytes_sent_rate'])
                } else {
                    dataset.data.push(data['net']['bytes_sent_rate'])
                }
            } else {
                if (dataset.data.length == 8) {
                    dataset.data.shift();
                    dataset.data.push(data['net']['bytes_sent_rate'])
                } else {
                    dataset.data.push(data['net']['bytes_sent_rate'])
                }
            }
            //dataset.data = Utils.numbers({ count: 12, decimals: 2, min: 50, max: 75 });
        });
        d_l_4.labels = Utils.labels({count: 8, min: 0, max: 12});
        c_l_4.update();
    }

    // 2.定义连接函数
    function connect() {
        //创建连接对象
        var ws = new WebSocket("ws://{{ domain }}/real/time/monitor");
        //建立连接
        ws.onopen = function () {
            console.log("连接成功！");
        };
        //建立接收消息
        ws.onmessage = function (e) {
            update_ui(e);
            // var dataArray = {
            //     _xsrf: $("[name='_xsrf']").val(),
            // };
            // ws.send(JSON.stringify(dataArray));
            // console.log(e.data);
        };
        //建立关闭连接
        ws.onclose = function () {
            console.log("连接断开！");
        };
        //每隔几秒触发一个事件
        setInterval(function () {
            ws.send("system");
        }, 2000);
    }

    // 3.定义断开连接函数
    function disconnect() {
        if (ws != null) {
            ws.close();//关闭连接
            ws = null;
        }
    }

    //4.刷新页面时候，断开连接，重新连接、断线重连判断
    if (ws == null) {
        connect();
    } else {
        disconnect();
    }


    function req_notice() {
        $.ajax({
            url: "/notice",
            type: "get",
            dataType: "json",
            timeout: 1000000,
            success: function (res) {
                if (res.statu == 1) {
                    $("#notice-last-time").text(res.last_update_time)
                    var notice_html = "";
                    $.each(res.notice, function (index, value) {
                        if (value['level'] == 1) {
                            var text_color = "text-info";
                        } else if (value['level'] == 2) {
                            var text_color = "text-warning";
                        } else {
                            var text_color = "text-danger";
                        }
                        notice_html += '<div class="list-item "><div><span class="badge badge-circle ' + text_color + '"></span></div><div class="flex"><a target="__blank" href="' + value['url'] + '" class="item-title text-color h-1x">' + value['title'] + '</a></div><div><span class="item-amount d-none d-sm-block text-sm text-muted">' + value['create_time'] + '</span></div></div>';
                    });
                    $("#notice-list").append(notice_html)
                } else {
                    notie.alert({type: 3, text: '<b>' + res.msg + '</b>', position: 'top'});
                }
            },
            error: function (res) {
                notie.alert({type: 3, text: '<b>网络错误</b>', position: 'top'});
            }

        });
    }

    req_notice()
</script>
{% end %}