<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('可视化')"/>
</head>
<head>
    <meta charset="utf-8">
    <title>通化市接口中台可视化中心</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/visualization/css/index.css" th:href="@{/visualization/css/index.css}">
    <link rel="stylesheet" href="/visualization/css/reset.css" th:href="@{/visualization/css/reset.css}">
    <script type="text/javascript" th:src="@{/visualization/js/jquery.js}"></script>
</head>
<script type="text/javascript" th:src="@{/visualization/js/echarts.min.js}"></script>
<script language="JavaScript" th:src="@{/visualization/js/js.js}"></script>
<script language="JavaScript" th:src="@{/visualization/js/visualization_websocket.js}"></script>
<body>
<div class="th-container">
    <!-- 导航开始 -->
    <div class="th-header">
        <div class="th-title">通化市接口中台可视化中心</div>
        <div class="th-weather"><img th:src="@{/visualization/images/th-clock-icon.png}"><span id="showTime"></span>
        </div>
        <script>
            var t = null;


            function time() {
                clearTimeout(t);
                dt = new Date();
                var y = dt.getFullYear();
                var mt = buqi(dt.getMonth() + 1);
                var day = buqi(dt.getDate());
                var h = buqi(dt.getHours());
                var m = buqi(dt.getMinutes());
                var s = buqi(dt.getSeconds());
                document.getElementById("showTime").innerHTML = y + "-" + mt + "-" + day + "   " + h + ":" + m + ":" + s + "";

                getmyd_sz[0]++;
                getmyd_sz[3]++;
                getmyd_sz[4]+=2;
                // init_bmjkdypm()
                // t = setTimeout(time, 1000);
            }
            function buqi(a) {
                if(a <10){
                    return "0"+a;
                }else{
                    return a;
                }
            }
        </script>
        <div class="th-top-btn-row" style="display: flex; justify-content: center">
            <div class="th-top-btn">
                <a href="../index">管理端</a>
            </div>
            <div class="th-top-btn">
                <a href="">可视化</a>
            </div>
        </div>
    </div>
    <!-- 导航结束 -->
    <!-- 内容开始 -->
    <div class="th-content">

        <!-- 部门接口调用排名B -->
        <div class="th-left">
            <div class="th-left-con">
                <div class="th-left-title">部门接口调用排名</div>
                <div class="th-left-ph" id="phb"></div>
            </div>
        </div>
        <!-- 部门接口调用排名E -->

        <!-- 接口地图展示B -->
        <div class="th-mid-map">
            <h1>全市数据共享情况</h1>
            <div class="th-mid-map-con">
                <div class="th-mid-sjk">
                    <h2>省共享平台</h2>
                    <h6>上报总数: <span id="jkzt_jkzs">0</span></h6>
                </div>
                <div class="th-mid-shjk">
                    <h2>市接口中台</h2>
                    <h6>归集接口: <span id="jkzt_gj">0</span></h6>
                    <h6>共享接口: <span id="jkzt_gx">0</span></h6>
                    <h6>数据总量: <span id="jkzt_sjgs">0</span></h6>
                </div>

                <div class="th-mid-dw-con" id="qssjgxqk_div">
                    <div class="th-mid-dw th-dw-1">
                        <h2>住建局</h2>
                        <h6>归集接口: <span>0</span></h6>
                        <h6>共享接口: <span>0</span></h6>
                    </div>
                    <div class="th-mid-dw th-dw-2">
                        <h2>住建局</h2>
                        <h6>归集接口: <span>0</span></h6>
                        <h6>共享接口: <span>0</span></h6>
                    </div>
                    <div class="th-mid-dw th-dw-3">
                        <h2>住建局</h2>
                        <h6>归集接口: <span>0</span></h6>
                        <h6>共享接口: <span>0</span></h6>
                    </div>
                    <div class="th-mid-dw th-dw-4">
                        <h2>住建局</h2>
                        <h6>归集接口: <span>0</span></h6>
                        <h6>共享接口: <span>0</span></h6>
                    </div>
                    <div class="th-mid-dw th-dw-5">
                        <h2>住建局</h2>
                        <h6>归集接口: <span>0</span></h6>
                        <h6>共享接口: <span>0</span></h6>
                    </div>
                    <div class="th-mid-dw th-dw-6">
                        <h2>住建局</h2>
                        <h6>归集接口: <span>0</span></h6>
                        <h6>共享接口: <span>0</span></h6>
                    </div>
                    <div class="th-mid-dw th-dw-7">
                        <h2>住建局</h2>
                        <h6>归集接口: <span>0</span></h6>
                        <h6>共享接口: <span>0</span></h6>
                    </div>
                </div>


            </div>
        </div>
        <!-- 接口地图展示E -->

        <!-- 右侧内容B -->
        <div class="th-right-con">
            <div class="th-right-con-1">
                <ul>
                    <li>
                        <img th:src="@{/visualization/images/th-right1.png}">
                        <div class="row-left">
                            <span id="tj_interface_total">0</span>
                            <h1>接口总数</h1>
                        </div>
                    </li>
                    <li>
                        <img th:src="@{/visualization/images/th-right2.png}">
                        <div class="row-left">
                            <span id="tj_dypc">0</span>
                            <h1>调用频次</h1>
                        </div>
                    </li>
                    <li>
                        <img th:src="@{/visualization/images/th-right3.png}">
                        <div class="row-left">
                            <span id="tj_gjpc">0</span>
                            <h1>归集频次</h1>
                        </div>
                    </li>
                    <li>
                        <img th:src="@{/visualization/images/th-right4.png}">
                        <div class="row-left">
                            <span id="tj_gxpc">0</span>
                            <h1>共享频次</h1>
                        </div>
                    </li>
                    <li>
                        <img th:src="@{/visualization/images/th-right5.png}">
                        <div class="row-left">
                            <span id="tj_jrbm">0</span>
                            <h1>接入部门</h1>
                        </div>
                    </li>
                    <li>
                        <img th:src="@{/visualization/images/th-right6.png}">
                        <div class="row-left">
                            <span id="tj_jkgz">0</span>
                            <h1>接口故障</h1>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="th-right-con-2row">
                <div class="th-right-con-2 mg-r1">
                    <h4>接口占比</h4>
                    <div id="jkzb" style="width: 280px; height: 200px;"></div>
                </div>
                <div class="th-right-con-2 mg-r1">
                    <h4>接口使用</h4>
                    <div id="jksy" style="width: 280px; height: 200px;"></div>
                </div>
                <div class="th-right-con-2">
                    <h4>接入部门</h4>
                    <div id="jrbm" style="width: 280px; height: 200px;"></div>
                </div>
            </div>
            <div class="th-right-con-3row">
                <div class="th-right-con-3 mg-r2">
                    <h4>市主要归集接口</h4>
                    <div id="szygj" style="width: 400px; height: 200px;"></div>
                </div>
                <div class="th-right-con-3">
                    <h4>市主要共享接口</h4>
                    <div id="szygx" style="width: 400px; height: 200px;"></div>
                </div>
            </div>
            <div class="th-right-con-4">
                <!-- <h4>接口使用频次</h4>
                <div  id="jksypc" style="width: 800px; height: 280px;"></div> -->
                <!-- HTML页面布局 -->
                <div id="tab">
                    <ul>
                        <li class="on">接口使用频次</li>
                    </ul>
                    <div id="firstPage" class="show">
                        <div id="jksypc" style="width: 800px; height: 220px;"></div>
                    </div>
                    <div id="secondPage" class="hide">
                        <a href="#">40平出租屋大改造 美少女的混搭小窝</a><br>
                        <a href="#">经典清新简欧爱家 90平老房焕发新生</a><br>

                    </div>
                    <div id="thirdPage" class="hide">
                        <a href="#">通州豪华3居260万 二环稀缺2居250w甩</a><br>
                        <a href="#">西3环通透2居290万 130万2居限量抢购</a><br>

                    </div>
                </div>

            </div>
        </div>
        <!-- 右侧内容E -->
    </div>
    <!-- 内容结束 -->
</div>
<script type="text/javascript" src="../visualization/allcharts/th-echart1.js"
        th:src="@{/visualization/allcharts/th-echart1.js}" rel="stylesheet"></script>
<script type="text/javascript" src="../visualization/allcharts/eventPieTh.js"
        th:src="@{/visualization/allcharts/eventPieTh.js}" rel="stylesheet"></script>
<script type="text/javascript" src="../visualization/allcharts/eventPieTh2.js"
        th:src="@{/visualization/allcharts/eventPieTh2.js}" rel="stylesheet"></script>
<script type="text/javascript" src="../visualization/allcharts/humanTh.js"
        th:src="@{/visualization/allcharts/humanTh.js}" rel="stylesheet"></script>
<script type="text/javascript" src="../visualization/allcharts/jkTh.js" th:src="@{/visualization/allcharts/jkTh.js}"
        rel="stylesheet"></script>
<script type="text/javascript" src="../visualization/allcharts/jkTh2.js" th:src="@{/visualization/allcharts/jkTh2.js}"
        rel="stylesheet"></script>
<script type="text/javascript" src="../visualization/allcharts/jkpcTh.js" th:src="@{/visualization/allcharts/jkpcTh.js}"
        rel="stylesheet"></script>


<script>
    window.onload = function () {
        getVisualization();
        var myTab = document.getElementById("tab"); //整个div
        var myUl = myTab.getElementsByTagName("ul")[0]; //一个节点
        var myLi = myUl.getElementsByTagName("li"); //数组
        var myDiv = myTab.getElementsByTagName("div"); //数组

        for (var i = 0; i < myLi.length; i++) {
            myLi[i].index = i;
            myLi[i].onclick = function () {
                for (var j = 0; j < myLi.length; j++) {
                    myLi[j].className = "off";
                    myDiv[j].className = "hide";
                }
                this.className = "on";
                myDiv[this.index].className = "show";
            }
        }
    }
    //市数据共享接口-市数据归集接口
    var data_szygjjk_name = [];
    var data_szygjjk_value = [];
    var data_szygxjk_name = [];
    var data_szygxjk_value = [];
    var data_total_name = [];
    var data_total_value = [];



    //全市数据共享情况
    function qssjgxqk(d) {
        var qssjgxqk_div = $("#qssjgxqk_div");
        qssjgxqk_div.html("");

        data_szygjjk_name =[];
        data_szygxjk_name=[];
        data_szygjjk_value=[];
        data_szygxjk_value=[];
        data_total_name=[];
        data_total_value=[];
        $.each(d.qssjgxqk_List, function (index, data) {
            var div = $("<div>");
            div.addClass("th-mid-dw th-dw-" + (index + 1));
            var h2 = $("<h2>" + data.dept_name + "</h2>");
            var h6_0 = $("<h6>归集接口: <span>" + data.gj_cou + "</span></h6>");
            var h6_1 = $("<h6>共享接口: <span>" + data.gx_cou + "</span></h6>");
            var h6_2 = $("<h6>数据量: <span>" + data.dept_record_count + "</span></h6>");
            div.append(h2);
            div.append(h6_0);
            div.append(h6_1);
            div.append(h6_2);
            qssjgxqk_div.append(div);
            //市主要归集接口 --- 市主要共享接口

            data_szygjjk_name.push(data.dept_name);
            data_szygxjk_name.push(data.dept_name);
            data_szygjjk_value.push(data.gj_cou);
            data_szygxjk_value.push(data.gx_cou);
            data_total_name.push(data.dept_name);
            data_total_value.push(data.total_cou);
        });
        szy_gj(data_szygjjk_name, data_szygjjk_value);
        szy_gx(data_szygxjk_name, data_szygxjk_value);
        jrbm(data_total_name, data_total_value);
        d_zb_guiji = d.zb_guiji;
        d_zb_gongxiang = d.zb_gongxiang
        jkzb(d_zb_guiji, d_zb_gongxiang);
        jksy(d.interface_status_0,d.interface_status_1);
        // $("#jkzt_jkzs").text(d.zb_gongxiang + d.zb_guiji);
        $("#jkzt_jkzs").text(d.GXPT_jkzs);
        $("#jkzt_gj").text(d.zb_guiji);
        $("#jkzt_gx").text(d.zb_gongxiang);
        $("#jkzt_sjgs").text(d.tj_sjkzt_sjgs);

        //右侧顶部统计
        $("#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)
//接口使用频次
        jksypc(d);
    }


</script>

<script>

    var fuck = true;

    function getVisualization() {
        $.ajax({
            url: '/MainPageController/getVisualization',
            method: 'POST',
            success: getVisualization_Success
        })
    }

    var phnum = [];//排行数
    var getmydmc = [];//数据点名称
    var getmyd_sz = [];//接口数值
    function getVisualization_Success(d) {
        console.log("##########");
        // console.log(d.interfaceCallCount_List)
        phnum = [];
        getmydmc =[];
        getmyd_sz =[];
        $.each(d.interfaceCallCount_List, function (index, data) {
            phnum.push((index + 1) + "   ")
            getmydmc.push(data.dept_name)
            getmyd_sz.push(data.cou)
        });
        // console.log("1:",phnum)
        // console.log("2:",getmydmc)
        // console.log("3:",getmyd_sz)

        //最左侧，top部门接口调用排名

        init_bmjkdypm();
        //中间 全市数据共享情况
        qssjgxqk(d);

        //最后启动定时
        // t = setTimeout(time, 1000);
        // change_se = window.setTimeout(change_twoSec,2000);
        // change_thir = window.setTimeout(change_thirSec,3000);

    }
    var d_zb_guiji = 100;
    var d_zb_gongxiang = 200;

    //愚蠢的动一动
    var change_se;
    function change_twoSec() {
        window.clearTimeout(change_se);

        change_se = window.setTimeout(change_twoSec,2000);

        var tj_interface_total =parseInt($("#tj_interface_total").text()) ;
        if(fuck){
            tj_interface_total+=5;
            fuck = false;
        }else{
            tj_interface_total-=5;
            fuck = true;
        }

        $("#tj_interface_total").text(tj_interface_total);
        var tj_dypc =parseInt($("#tj_dypc").text()) ;
        if(fuck == false && tj_dypc >3){
            tj_dypc-=3;
            fuck = true;
        }else{
            tj_dypc+=6;
            fuck = false;
        }
        $("#tj_dypc").text(tj_dypc);


        var tj_gjpc =parseInt($("#tj_gjpc").text()) ;
        if(tj_gjpc){
            tj_gjpc+=2;
        }

        $("#tj_gjpc").text(tj_gjpc);

        var tj_gxpc =parseInt($("#tj_gxpc").text()) ;
        tj_gxpc++;
        $("#tj_gxpc").text(tj_gxpc);


        var tj_jrbm =parseInt($("#tj_jrbm").text()) ;
        tj_jrbm++;
        $("#tj_jrbm").text(tj_jrbm);
    }
    var change_thir;
    function change_thirSec() {
        window.clearTimeout(change_thir);



        d_zb_guiji+=1;
        d_zb_gongxiang += 5;
        jkzb(d_zb_guiji, d_zb_gongxiang);

        data_total_value[0]++;
        data_total_value[1]+=2;
        jrbm(data_total_name, data_total_value);

        data_szygjjk_value[0]++;
        data_szygjjk_value[1]+=2;
        data_szygjjk_value[3]++;
        szy_gj(data_szygjjk_name, data_szygjjk_value);

        data_szygxjk_value[1]++;
        data_szygxjk_value[3]++;
        szy_gx(data_szygxjk_name, data_szygxjk_value);
        change_thir = window.setTimeout(change_thirSec,3000);
    }

</script>


</body>
</html>
