<div class="layui-row ml20" >
    <style>
        .info-box {
            height: 60px;
            background-color: #f2f2f2;
            border: 1px solid #f2f2f2;

        }


        .info-box .info-box-icon {
            border-top-left-radius: 2px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 2px;
            display: block;
            float: left;
            height: 60px;
            width: 60px;
            text-align: center;
            font-size: 40px;
            line-height: 60px;
            /*background: rgba(0, 0, 0, 0.2);*/
            background-color:#efefef !important;
        }

        .info-box .info-box-content {
            padding: 1px 5px;
            margin-left: 60px;
        }

        .info-box-content .info-box-text{
            font-size: 16px;
            width: 80%;
            display: block;
            text-align: center;
            color: #888;
            margin: 3px auto;
        }

        .info-box-content .info-box-number{
            font-size: 20px;
            width: 100%;
            display: block;
            text-align: center;
        }

        .inner-icon{
            font-size:24px;
            color: #efefef !important;
        }
    </style>

    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md3">
                            <div class="info-box">
                                {{/*<span class="info-box-icon" style="background-color:#f39c12 !important;color:white;"><i class="fa fa-hourglass" aria-hidden="true"></i></span>*/}}
                                <span class="fa-stack fa-lg info-box-icon" >
                                    <i class="fa fa-circle fa-stack-1x" style="color:#fff !important;">
                                        <i class="fa fa-hourglass fa-inverse fa-stack-1x inner-icon" ></i>
                                    </i>
                                </span>
                                <div class="info-box-content">
                                        <span class="info-box-text">即将执行的任务</span>
                                    <span class="info-box-number">{{.startJob}}</span>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-md3">
                            <div class="info-box">
                                <span class="fa-stack fa-lg info-box-icon" >
                                    <i class="fa fa-circle fa-stack-1x" style="color:#fff !important;">
                                        <i class="fa fa-question fa-inverse fa-stack-1x inner-icon" ></i>
                                    </i>
                                </span>
                                <div class="info-box-content">
                                    <span class="info-box-text">待审核任务数量</span>
                                    <span class="info-box-number">{{.totalAuditTask}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="info-box">
                                <span class="fa-stack fa-lg info-box-icon" >
                                    <i class="fa fa-circle fa-stack-1x" style="color:#fff !important;">
                                        <i class="fa fa-check fa-inverse fa-stack-1x inner-icon" ></i>
                                    </i>
                                </span>

                                <div class="info-box-content">
                                    <span class="info-box-text">近期执行成功</span>
                                    <span class="info-box-number">{{.successNum}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="info-box">
                                <span class="fa-stack fa-lg info-box-icon" >
                                    <i class="fa fa-circle fa-stack-1x" style="color:#fff !important;">
                                        <i class="fa fa-exclamation fa-inverse fa-stack-1x inner-icon" ></i>
                                    </i>
                                </span>
                                <div class="info-box-content">
                                    <span class="info-box-text">近期执行失败</span>
                                    <span class="info-box-number">{{.errorNum}}</span>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-md3">
                            <div class="info-box">
                                <span class="fa-stack fa-lg info-box-icon" >
                                    <i class="fa fa-circle fa-stack-1x" style="color:#fff !important;">
                                        <i class="fa fa-user fa-inverse fa-stack-1x inner-icon" ></i>
                                    </i>
                                </span>
                                <div class="info-box-content">
                                    <span class="info-box-text">当前用户总数</span>
                                    <span class="info-box-number">{{.userNum}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="info-box">
                                <span class="fa-stack fa-lg info-box-icon" >
                                    <i class="fa fa-circle fa-stack-1x" style="color:#fff !important;">
                                        <i class="fa fa-tasks fa-inverse fa-stack-1x inner-icon" ></i>
                                    </i>
                                </span>

                                <div class="info-box-content">
                                    <span class="info-box-text">定时任务总数量</span>
                                    <span class="info-box-number">{{.totalJob}}</span>
                                </div>
                            </div>
                        </div>


                        <div class="layui-col-md3">
                            <div class="info-box">
                                <span class="fa-stack fa-lg info-box-icon" >
                                    <i class="fa fa-circle fa-stack-1x" style="color:#fff !important;">
                                        <i class="fa fa-calculator fa-inverse fa-stack-1x inner-icon" ></i>
                                    </i>
                                </span>


                                <div class="info-box-content">
                                    <span class="info-box-text">累计运行次数</span>
                                    <span class="info-box-number">{{.TaskTotalRunNum}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="info-box">
                                <span class="fa-stack fa-lg info-box-icon" >
                                    <i class="fa fa-circle fa-stack-1x" style="color:#fff !important;">
                                        <i class="fa fa-sticky-note fa-inverse fa-stack-1x inner-icon" ></i>
                                    </i>
                                </span>
                                <div class="info-box-content">
                                    <span class="info-box-text">当前日志总量</span>
                                    <span class="info-box-number">{{.totalLog}}</span>
                                </div>
                            </div>
                        </div>


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

    </div>
</div>
<div class="layui-row">
    <div class="layui-col-md12">
        <div class="layui-card-body">
            <div class="layui-tab">
                <ul class="layui-tab-title">
                    <li class="layui-this">系统概况</li>
                    <li>即将开始的任务</li>
                    <li>最近失败的任务</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-col-md8" id="charts-box">
                            {{/*图表*/}}
                            <div id="main" style=" height: 528px;"></div>
                        </div>

                        <div class="layui-col-md4" >
                            {{/*系统概况*/}}
                            <div class="layui-card" style="background: #fff" id="sys">
                                <div class="layui-card-header">系统概况</div>
                                <div class="layui-card-body" style="height: 465px; padding-bottom: 10px; overflow: auto">
                                    <table class="layui-table" lay-size="sm">
                                        <colgroup>
                                            <col>
                                            <col>
                                        </colgroup>
                                        <thead>
                                        <tr>
                                            <th>参数</th>
                                            <th>值</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {{range $k, $v := .sysInfo}}
                                            <tr>
                                                <td># {{$k}} </td>
                                                <td>{{$v}}</td>
                                            </tr>
                                        {{else}}
                                            <tr>
                                                <td colspan="2">暂无信息</td>
                                            </tr>
                                        {{end}}
                                        </tbody>
                                    </table>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-card" style="background: #fff">
                            <div class="layui-card-header">即将执行的任务</div>
                            <div class="layui-card-body" style="height: 465px; padding-bottom: 10px; overflow: auto">
                                <table class="layui-table" lay-size="sm">
                                    <colgroup>
                                        <col>
                                        <col>
                                    </colgroup>
                                    <thead>
                                    <tr>
                                        <th>任务名称</th>
                                        <th>执行时间</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {{range $k, $v := .jobs}}
                                        <tr>
                                            <td><a href="{{urlfor "TaskController.Logs" "id" $v.task_id}}" class="news-item-title">{{$v.task_name}}-{{$v.task_group}} # {{$v.task_id}}</a></td>
                                            <td>{{$v.next_time}}</td>
                                        </tr>
                                    {{else}}
                                        <tr>
                                            <td colspan="2">暂无信息</td>
                                        </tr>
                                    {{end}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        {{/*执行失败的任务*/}}
                        <div class="layui-card">
                            <div class="layui-card-header">最近执行的任务</div>
                            <div class="layui-card-body" style="height: 465px; padding-bottom: 10px; overflow: auto">
                                <table class="layui-table" lay-size="sm">
                                    <colgroup>
                                        <col width="50">
                                        <col >
                                        <col >
                                        <col>
                                    </colgroup>
                                    <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>任务名称</th>
                                        <th>开始时间</th>
                                        <th>执行结果</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {{range $k, $v := .errLogs}}
                                        <tr>
                                            <td>{{$k}}</td>
                                            <td><a href="javascript:;" onclick="logDetail({{$v.id}});" class="news-item-title">
                                                    {{$v.task_name}} # {{$v.id}}
                                                </a></td>
                                            <td>{{$v.start_time}}</td>
                                            <td>{{if eq $v.status 0}}
                                                    正常
                                                {{else if eq $v.status -1}}
                                                    <span style="color:red">异常</span>
                                                {{else}}
                                                    <span style="color:red">超时</span>
                                                {{end}}</td>
                                        </tr>
                                    {{else}}
                                        <tr>
                                            <td colspan="3">暂无信息</td>
                                        </tr>
                                    {{end}}
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/echarts/echarts.min.js"></script>
<script src="/static/layui/layui.js"></script>
<script>
    var $;
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        $ = layui.$;
        resizeChartbox();
        window.onresize = function(){
            resizeChartbox();
        }
        function resizeChartbox()
        {
            height = $("#sys").height();
            width = $("#charts-box").width();
            $("#main").width(width-200);
            $("#main").height(height);
        }
        element.render();
        //…
    });

    function  logDetail(id){
        window.parent.openTab("/tasklog/detail?id="+id,id+' 日志详情',"admin_log_detail-"+id,'');
    }


    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));


    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '运行概况'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['任务执行失败','任务执行超时','任务执行成功']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: {{.days}}
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'任务执行失败',
                type:'line',
                stack: '总量',
                data:{{.errNum}}
            },
            {
                name:'任务执行超时',
                type:'line',
                stack: '总量',
                data:{{.expiredNum}}
            },
            {
                name:'任务执行成功',
                type:'line',
                stack: '总量',
                data:{{.okNum}}
            }
        ]
    };




    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
