<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计</title>
    <link rel="shortcut icon" href="sooka.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/toast.style.css" th:href="@{/css/toast.style.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <style type="text/css">
        /*新*/
        .ibox-left-th {
            font-size: 16px;
            text-align: center;
            color: #fff;
            float: left;
        }

        .ibox-left-th img {
            width: 50px;
            height: 50px;
        }

        .ibox-left-th h5 {
            font-size: 16px;
            color: #fff;
            margin: 15px 0 0 0
        }

        .ibox-right-th {
            float: right;
            font-size: 48px;
            color: #fff;
            text-align: center;
            line-height: 80px;
        }

        .th-wid-6 {
            width: 16.01%;
            padding: 30px 10px;
            border-radius: 5px;
            float: left;
        }

        .ibox-th-colorbar1 {
            background: #44aeff;

        }

        .ibox-th-colorbar2 {
            background: #53bb4c;
            margin-left: 13px;
        }

        .ibox-th-colorbar3 {
            background: #f68539;
            margin-left: 13px;
        }

        .ibox-th-colorbar4 {
            background: #23dca1;
            margin-left: 13px;
        }

        .ibox-th-colorbar5 {
            background: #f1cb1b;
            margin-left: 13px;
        }

        .ibox-th-colorbar6 {
            background: #7c82cb;
            margin-left: 13px;
        }
        .flot-chart{
            height: 500px!important;
        }
        .mg-top-15{
            margin-top: 15px;
        }

    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">

    <div class="row" style="padding:0 15px">
        <div class="th-wid-6 ibox-th-colorbar1">

            <div class="col-sm-6 ibox-left-th">
                <img th:src="@{/img/jkzs.png}">
                <h5>接口总数</h5>
            </div>
            <div class="col-sm-6 ibox-right-th">
                <span id="tj_interface_total">39</span>
            </div>
        </div>
        <div class="th-wid-6 ibox-th-colorbar2">

            <div class="col-sm-6 ibox-left-th">
                <img th:src="@{/img/dypc.png}">
                <h5>调用频次</h5>
            </div>
            <div class="col-sm-6 ibox-right-th">
                <span id="tj_dypc">39</span>
            </div>
        </div>
        <div class="th-wid-6 ibox-th-colorbar3">

            <div class="col-sm-6 ibox-left-th">
                <img th:src="@{/img/gjpc.png}">
                <h5>归集频次</h5>
            </div>
            <div class="col-sm-6 ibox-right-th">
                <span id="tj_gjpc">39</span>
            </div>
        </div>
        <div class="th-wid-6 ibox-th-colorbar4">

            <div class="col-sm-6 ibox-left-th">
                <img th:src="@{/img/gxpc.png}">
                <h5>共享频次</h5>
            </div>
            <div class="col-sm-6 ibox-right-th">
                <span id="tj_gxpc">39</span>
            </div>
        </div>
        <div class="th-wid-6 ibox-th-colorbar5">

            <div class="col-sm-6 ibox-left-th">
                <img th:src="@{/img/jrbm.png}">
                <h5 >接入部门</h5>
            </div>
            <div class="col-sm-6 ibox-right-th">
                <span id="tj_jrbm">39</span>
            </div>
        </div>
        <div class="th-wid-6 ibox-th-colorbar6">

            <div class="col-sm-6 ibox-left-th">
                <img th:src="@{/img/jkgz.png}">
                <h5>接口故障</h5>
            </div>
            <div class="col-sm-6 ibox-right-th">
                <span id="tj_jkgz">39</span>
            </div>
        </div>


    </div>

    <div class="row mg-top-15">
        <div class="col-sm-12">
            <div class="ibox float-e-margins ">
                <div class="ibox-title">
                    <h5>日调用频次</h5>
                    <div class="pull-right">
                        <!--<div class="btn-group">-->
                            <!--<button type="button" class="btn btn-xs btn-white active">天</button>-->
                            <!--<button type="button" class="btn btn-xs btn-white">月</button>-->
                            <!--<button type="button" class="btn btn-xs btn-white">年</button>-->
                        <!--</div>-->
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                            </div>
                        </div>

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


</div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/toast.script.js}"></script>
<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>

<th:block th:include="include :: sparkline-js"/>
<script type="text/javascript">


    function drawPlot(d2){
        // var data2 = [
        //     [gd(2012, 1, 1), 7], [gd(2012, 1, 2), 6], [gd(2012, 1, 3), 4], [gd(2012, 1, 4), 8],
        //     [gd(2012, 1, 5), 9], [gd(2012, 1, 6), 7], [gd(2012, 1, 7), 5], [gd(2012, 1, 8), 4],
        //     [gd(2012, 1, 9), 7], [gd(2012, 1, 10), 8], [gd(2012, 1, 11), 9], [gd(2012, 1, 12), 6],
        //     [gd(2012, 1, 13), 4], [gd(2012, 1, 14), 5], [gd(2012, 1, 15), 11], [gd(2012, 1, 16), 8],
        //     [gd(2012, 1, 17), 8], [gd(2012, 1, 18), 11], [gd(2012, 1, 19), 11], [gd(2012, 1, 20), 6],
        //     [gd(2012, 1, 21), 6], [gd(2012, 1, 22), 8], [gd(2012, 1, 23), 11], [gd(2012, 1, 24), 13],
        //     [gd(2012, 1, 25), 7], [gd(2012, 1, 26), 9], [gd(2012, 1, 27), 9], [gd(2012, 1, 28), 8],
        //     [gd(2012, 1, 29), 5], [gd(2012, 1, 30), 8], [gd(2012, 1, 31), 25]
        // ];
        var data2 = d2;

        var data3 = d2;


        var dataset = [
            {
                label: "调用频次",
                data: data2,
                color: "#1ab394",
                bars: {
                    show: true,
                    align: "center",
                    barWidth: 24 * 60 * 60 * 600,
                    lineWidth: 0
                }

            }, {
                label: "",
                data: data2,
                yaxis: 2,
                color: "#464f88",
                lines: {
                    lineWidth: 1,
                    show: true,
                    fill: true,
                    fillColor: {
                        colors: [{
                            opacity: 0.2
                        }, {
                            opacity: 0.2
                        }]
                    }
                },
                splines: {
                    show: false,
                    tension: 0.6,
                    lineWidth: 1,
                    fill: 0.1
                },
            }
        ];


        var options = {
            xaxis: {
                mode: "time",
                tickSize: [1000, "day"],
                tickLength: 0,
                axisLabel: "Date",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Arial',
                axisLabelPadding: 10,
                color: "#838383"
            },
            yaxes: [{
                position: "left",
                max: 1070,
                color: "#838383",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Arial',
                axisLabelPadding: 3
            }, {
                position: "right",
                clolor: "#838383",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: ' Arial',
                axisLabelPadding: 67
            }
            ],
            legend: {
                noColumns: 1,
                labelBoxBorderColor: "#000000",
                position: "nw"
            },
            grid: {
                hoverable: false,
                borderWidth: 0,
                color: '#838383'
            }
        };
        $.plot($("#flot-dashboard-chart"), dataset, options);
    }
    function gd(year, month, day) {
        return new Date(year, month - 1, day).getTime();
    }

    $(document).ready(function () {
        getVisualization();
        addToast();
    });
</script>
<script>
    function getVisualization() {
        $.ajax({
            url: '/MainPageController/getVisualization',
            method: 'POST',
            success: getVisualization_Success
        })
    }
    function getVisualization_Success(d) {

        $("#tj_interface_total").text(d.tj_interface_total);
        $("#tj_dypc").text(d.tj_dypc);
        $("#tj_gjpc").text(d.tj_gjpc);
        $("#tj_gxpc").text(d.tj_gxpc);
        $("#tj_jrbm").text(d.tj_jrbm);
        $("#tj_jkgz").text(d.tj_jkgz);

        var d2=[];
        $.each(d.interfacePinci_day_list,function (index,data) {
            var s = data.day.split("/");
            var k =[gd(s[0],s[1],s[2]), data.cou];
            d2.push(k);
        });
        drawPlot(d2);
    }

    /** 用户临期提醒 **/
    function addToast(){
        let url = '/system/tempPer/expirationList';
        $.ajax({
            url: url,
            type: "post",
            success: function(result) {
                let content = "";
                for(let i=0;i<result.length;i++){
                    let temp = "<p style='font-size: 15px;'><a style='color: #333;' onclick='openPerTab()'>【{deptName}】用户【{userName}】的权限已到期，请及时处理！</a></p>";
                    if(result[i].remainingDays >= 0){
                        temp = "<p style='font-size: 15px;'><a style='color: #333;' onclick='openPerTab()'>【{deptName}】用户【{userName}】的权限还有{remainingDays}天到期，请及时处理！</a></p>";
                        temp = temp.replace("{remainingDays}",result[i].remainingDays);
                    }
                    temp = temp.replace("{deptName}",result[i].deptName);
                    temp = temp.replace("{userName}",result[i].userName);
                    content += temp;
                }
                if(content != ""){
                    $.Toast("<p  style='font-size: 18px;color: #c70000;font-weight: 900;height: 35px;line-height: 35px;'>临期提醒</p>", content, "success",{
                        stack: true,
                        has_icon:true,
                        has_close_btn:true,
                        fullscreen:false,
                        width:250,
                        timeout:10000,
                        sticky:false,
                        has_progress:true,
                        rtl:false,
                    });
                }
            }
        })
    }

    function openPerTab(){
        $("a[href='/system/tempPer']",parent.document)[0].click();
    }

</script>
</body>
</html>
