<!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" src="js/jquery.js"></script>
</head>
<script type="text/javascript" src="../visualization/js/echarts.min.js" th:src="@{/visualization/js/echarts.min.js}"></script>
<script language="JavaScript" src="../visualization/js/js.js" th:src="@{/visualization/js/js.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;
            t = setTimeout(time, 1000);

            function time() {
                clearTimeout(t);
                dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours();
                var m = dt.getMinutes();
                var s = dt.getSeconds();
                document.getElementById("showTime").innerHTML = y + "-" + mt + "-" + day + "   " + h + ":" + m + ":" + s + "";
                t = setTimeout(time, 1000);
            }
        </script>
        <div class="th-top-btn-row">
            <div class="th-top-btn">
                <a href="#">管理端</a>
            </div>
            <div class="th-top-btn">
                <a href="#">可视化</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">top部门接口调用排名</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>93</span></h6>
                </div>
                <div class="th-mid-shjk">
                    <h2>市接口中台</h2>
                    <h6>归集接口: <span>93</span></h6>
                    <h6>共享接口: <span>7</span></h6>
                </div>
                <div class="th-mid-dw-con">
                    <div class="th-mid-dw th-dw-1">
                        <h2>住建局</h2>
                        <h6>归集接口: <span>93</span></h6>
                        <h6>共享接口: <span>7</span></h6>
                    </div>
                    <div class="th-mid-dw th-dw-2">
                        <h2>住建局</h2>
                        <h6>归集接口: <span>93</span></h6>
                        <h6>共享接口: <span>7</span></h6>
                    </div>
                    <div class="th-mid-dw th-dw-3">
                        <h2>住建局</h2>
                        <h6>归集接口: <span>93</span></h6>
                        <h6>共享接口: <span>7</span></h6>
                    </div>
                    <div class="th-mid-dw th-dw-4">
                        <h2>住建局</h2>
                        <h6>归集接口: <span>93</span></h6>
                        <h6>共享接口: <span>7</span></h6>
                    </div>
                    <div class="th-mid-dw th-dw-5">
                        <h2>住建局</h2>
                        <h6>归集接口: <span>93</span></h6>
                        <h6>共享接口: <span>7</span></h6>
                    </div>
                    <div class="th-mid-dw th-dw-6">
                        <h2>住建局</h2>
                        <h6>归集接口: <span>93</span></h6>
                        <h6>共享接口: <span>7</span></h6>
                    </div>
                    <div class="th-mid-dw th-dw-7">
                        <h2>住建局</h2>
                        <h6>归集接口: <span>93</span></h6>
                        <h6>共享接口: <span>7</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>200</span><h1>接口总数</h1>
                        </div>
                    </li>
                    <li>
                        <img th:src="@{/visualization/images/th-right2.png}">
                        <div class="row-left">
                            <span>200</span><h1>调用频次</h1>
                        </div>
                    </li>
                    <li>
                        <img th:src="@{/visualization/images/th-right3.png}">
                        <div class="row-left">
                            <span>200</span><h1>归集频次</h1>
                        </div>
                    </li>
                    <li>
                        <img th:src="@{/visualization/images/th-right4.png}">
                        <div class="row-left">
                            <span>200</span><h1>共享频次</h1>
                        </div>
                    </li>
                    <li>
                        <img th:src="@{/visualization/images/th-right5.png}">
                        <div class="row-left">
                            <span>200</span><h1>接入部门</h1>
                        </div>
                    </li>
                    <li>
                        <img th:src="@{/visualization/images/th-right6.png}">
                        <div class="row-left">
                            <span>200</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>
                        <li class="off">月接口使用频次</li>
                        <li class="off">日接口使用频次</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>
    window.onload = function() {
        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";
            }
        }
    }
</script>
<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>
</body>
</html>
