<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<link th:href="@{/static/admin/assets/css/style.css}" rel="stylesheet"/>
<link th:href="@{/static/admin/assets/css/bootstrap.css}" rel="stylesheet"/>
<link th:href="@{/static/admin/assets/css/font-awesome.css}" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" th:href="@{/static/admin/assets/js/bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css}">
<body id="listbody" th:fragment="main">

<!-- 右边内容 -->
<div class="wrap-fluid">
    <div class="container-fluid bevel tlbr" style="min-height: 600px;position:relative;overflow: hidden;background-position-x: left">
        <div class="content-wrap">
            <div class="body-nest" id="search_div"  style="display: block">
                <div class="form_left" style="margin-left: 3%; margin-top: 3%">
                    <form role="form" class="form-inline">
                       <div class="form-group">
                         <label class="control-label" style="float: left;padding-top: 15px">日期：</label>
                         <span class='input-group date datetimepicker' style="width: 18%;float: left" id='datetimepicker1' data-date-format="yyyy-mm-dd hh:ii:ss">
                            <input type='text' class="form-control" name="startTime" id="lineSt"/>
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                         </span>
                         <label class="control-label" style="float: left;padding-top: 10px">~</label>
                         <span class='input-group date datetimepicker'  style="width: 18%;float: left"  id='datetimepicker2' data-date-format="yyyy-mm-dd hh:ii:ss">
                            <input type='text' class="form-control"  name="endTime" id="lineEt"/>
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                         </span>
                           <label class="control-label timeBut2" style="margin-left: 2%;margin-top: 7px">所属APP：</label>
                           <select name="app" id="apps" class="form-control" style="width: 10%;margin-top: 6px">
                           </select>
                            <div class="form-group" style="margin-left: 3%; padding-top: 5px;width: 36%">
                                <label class="control-label" style="float: left;padding-top: 10px">固定时间查询：</label>
                                <select name="type"  class="form-control" style="width: 100px" id="type">
                                    <option value="4"></option>
                                    <option value="5" selected="selected">近30分</option>
                                    <option value="6">近1天</option>
                                    <option value="7">近7天</option>
                                </select>
                                <button onclick="ruleSearch()" class="btn btn-success" type="button" style="margin-left: 15%"><i class="fa fa-search"></i>&nbsp;查询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="nest" id="Blank_PageClose" style="height: 1000px;" >
                <div id="ruleLineChart" style="width: 90%;height:65%;margin-left: 3%;background-color: ghostwhite">
                </div>

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

<script th:src="@{/static/admin/assets/js/echarts.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/jquery.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/base_list.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.zh-CN.js}" type="text/javascript"></script>


<script type="text/javascript">

    $.ajax({
        cache : true,
        type : "POST",
        url : "/user/info",
        headers: {
            "Authorization":getCookie("token")
        },
        async : false,
        error : function(response){
            var token = getCookie("token");
            if(response.status == 1000 && ( token == "undefined" || token =="")){
                top.location.href = '/user/login';
            }
            console.info("加载数据失败");
        },
        success : function(data) {
            var role = data.role;
            if(role === "ADMIN"){
                $("#apps").append("<option></option>");
            }
            var apps = data.appNames;
            var appName = data.appName;
            for (var i = 0; i < apps.length; i++) {
                var app = apps[i];
                if(app == appName){
                    $("#apps").append("<option selected = selected>" + apps[i] + "</option>");
                }else{
                    $("#apps").append("<option>" + apps[i] + "</option>");
                }
            }
        }
    });

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('ruleLineChart'));
        // 指定图表的配置项和数据
    var option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
      //  color:['#4472C5'],
        legend: {
            data:['key21','key22'],
            itemWidth:50,
            itemHeight:25,
            itemGap:18,
            y:"bottom",
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} 次'  //刻度标签的内容格式器，支持字符串模板和回调函数两种形式，按照自己需求设置
            },
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '25%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        tooltip: {
            trigger: 'axis'   // axis   item   none三个值
        },
        series: [
            {
                name: 'key21',
                data: [300, 265, 330, 374, 299, 500, 700],
                type: 'line'
            },
            {
                name: 'key22',
                data: [350, 255, 310, 494, 189, 333, 620],
                type: 'line'
            }
        ]
    };
    //加载数据
    loadData(option, "", {"type":5,"app":$("#apps").val()});
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    function loadData(option,color,param){
        $.ajax({
            type : "post",
            async : false, //同步执行
            url : "/key/ruleLineChart",
            data : param,
            headers: {
                "Authorization":getCookie("token")
            },
            dataType : "json", //返回数据形式为json
            success : function(result) {
                if (result) {
                    //初始化option.xAxis[0]中的data
                    option.xAxis.data = result.xAxis2;
                    option.legend.data = result.legend;
                    //初始化option.series[0]中的data
                    option.series = [];
                    let i = 0;
                    if(result.legend.length === 0){
                        myChart.clear();
                    }else{
                        for(let key in result.series2){
                            i++;
                            let seriesData = {"name":key, "data": result.series2[key],"type":"line"};
                            option.series.push(seriesData);
                        }
                    }
                }
            },
            error: function(result){  //加载失败时执行
                let token = getCookie("token");
                if(result.status == 1000 && ( token == "undefined" || token =="")){
                    top.location.href = '/user/login';
                }
                console.info("加载数据失败");
            }
        });
    }


    $('.datetimepicker').datetimepicker({
        language: 'zh-CN',
        CustomFormat: 'yyyy-mm-dd HH:ii:ss',
        weekStart: 1,
        todayBtn: 1,            //显示当天按钮，点击则选择当天当天时间
        autoclose: 1,           //选完时间自动关闭
        todayHighlight: 1,      //当天时间高亮
        startView: 2,           //从月视图开始，选天
        minView: 0,             //提供选择分钟的视图
        forceParse: 0,
        minuteStep: 1           //用于构建小时视图。就是最小的视图是每1分钟可选一次。是以分钟为单位的
    });




    function ruleSearch(){
        let st = $("#lineSt").val();
        let et = $("#lineEt").val();
        let type = $("#type").val();
        let app = $("#apps").val();
        let param = {"startTime":st,"endTime":et,"type":type,"app":app};
        loadData(option,"",param);
        myChart.setOption(option);
    }

</script>

</body>

</html>
