<!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 {
            left: -10px;
            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 {
            left: -35px;
            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 style="font-size: 14px;position: absolute;top: -50px;left: 55px;display: block;height: 25px;right: -35px;">单位：个</span>
                <span id="tj_interface_total">[[${count}]]</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 style="font-size: 14px;position: absolute;top: -50px;display: block;height: 25px;right: -35px;">单位：次</span>
                <span id="tj_dypc">[[${callFrequency}]]</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 style="font-size: 14px;position: absolute;top: -50px;display: block;height: 25px;right: -35px;">单位：次</span>
                <span id="tj_gjpc">[[${pushFrequency}]]</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 style="font-size: 14px;position: absolute;top: -50px;display: block;height: 25px;right: -35px;">单位：次</span>
                <span id="tj_gxpc">[[${pullFrequency}]]</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 style="font-size: 14px;position: absolute;top: -50px;display: block;height: 25px;right: -35px;">单位：个</span>
                <span id="tj_jrbm">[[${depts}]]</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 style="font-size: 14px;position: absolute;top: -50px;display: block;height: 25px;right: -35px;">单位：个</span>
                <span id="tj_jkgz">[[${faultCount}]]</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>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="container"></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>
<script type="text/javascript" th:src="@{/visualization/js/echarts.min.js}"></script>

<th:block th:include="include :: sparkline-js"/>
<script type="text/javascript">
    let dom = document.getElementById('container');
    let myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    let app = {};

    let option;

    const categories = (function () {
        let res = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];
        return res;
    })();
    const categories2 = (function () {
        let res = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];
        return res;
    })();
    //省数据
    const data = (function () {
        let data = "";
        let res = [[${province}]];
        return res;
    })();
    //市数据
    const data2 = (function () {
        let data = "[[${city}]]";
        let res = [[${city}]];
        return res;
    })();
    option = {
        title: {},
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#283b56'
                }
            }
        },
        legend: {},
        toolbox: {
            show: true,
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: {
            show: false,
            start: 0,
            end: 100
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                data: categories
            },
            {
                type: 'category',
                boundaryGap: true,
                data: categories2
            }
        ],
        yAxis: [
            {
                type: 'value',
                scale: true,
                name: '市接口',
                min: 0,
                boundaryGap: [0.2, 0.2]
            },
            {
                type: 'value',
                scale: true,
                name: '省接口',
                min: 0,
                boundaryGap: [0.2, 0.2]
            }
        ],
        series: [
            {
                name: '省接口申请频次',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: data
            },
            {
                name: '市接口申请频次',
                type: 'line',
                data: data2
            }
        ]
    };
    app.count = 11;


    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);


    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>
