<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>通化市接口中台可视化中心</title>
    <link th:href="@{/visualization/css/th_yj.css}" rel="stylesheet"/>
    <script type="text/javascript" th:src="@{/visualization/js/jquery-3.3.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/visualization/js/echarts.min.js}"></script>
    <script type="text/javascript" th:src="@{/visualization/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/visualization/js/jquery.ba-resize.min.js}"></script>
    <script type="text/javascript" th:src="@{/visualization/js/th_jk.js}"></script>
</head>
<body>
<div id="particles-js">
    <canvas id="canvas" style="width: 100%; height: 100%;"></canvas>
</div>
<div class="header clearfix">
    <div class="time fl">
        <span class="nyr">2022-08-17</span>&nbsp;&nbsp;&nbsp;<span class="sfm">09:35:57</span>
    </div>
    <h1 class="logo"><img th:src="@{/visualization/images/thqzj_logo.png}"/></h1>
    <div class="header_nav fr">
        <a class="nav_a on">大数据</a>
        <div class="nav_a nav_la">
            <span>接入部门</span>
            <div class="nav_div">
                <a th:each="dept:${depts}" th:id="${dept.deptId}">[[${dept.deptName}]]</a>
            </div>
          </div>
        <a class="nav_a">接口故障<i>（<span id="faultInterfaceCount">0</span>）</i></a>
    </div>
</div>
<div class="content clearfix">
    <div class="fl con_left1">
        <div class="con_sk con_bg clearfix">
            <i class="con_x"><img th:src="@{/visualization/images/thqzj_con_x.png}"/></i>
            <div class="data1 data_left">
                <div class="qiu">
                    <p>0个</p>
                </div>
                <span>市归集接口数</span>
            </div>
            <div class="data1">
                <div class="qiu">
                    <p>0个</p>
                </div>
                <span>市共享接口数</span>
            </div>
            <div class="data1">
                <div class="qiu">
                    <p>0个</p>
                </div>
                <span>省归集接口数</span>
            </div>
            <div class="data1">
                <div class="qiu">
                    <p>0个</p>
                </div>
                <span>省共享接口数</span>
            </div>
        </div>
        <div class="jkzb con_bg">
            <i class="con_x"><img th:src="@{/visualization/images/thqzj_con_x.png}"/></i>

            <div class="con_tit clearfix">
                <div class="fl div_tit">接口占比</div>
                <div class="tit_date">

                    <i></i>
                    <select id="pie" th:onchange="selectYear()">
                        <option selected th:value="2022">2022年</option>
                        <option th:value="2021">2021年</option>
                        <option th:value="2020">2020年</option>
                    </select>
                </div>
            </div>
            <div id="jkzb"></div>
            <div class="jkzb_txt">
                <div class="sgj jkzb_list">
                    <h3><i></i>市归集</h3>
                    <p><span>0</span><span>0%</span></p>
                </div>
                <div class="sgx jkzb_list">
                    <h3><i></i>市共享</h3>
                    <p><span>0</span><span>0%</span></p>
                </div>
                <div class="sgj2 jkzb_list">
                    <h3><i></i>省归集</h3>
                    <p><span>0</span><span>0%</span></p>
                </div>
                <div class="sgx jkzb_list">
                    <h3><i></i>省共享</h3>
                    <p><span>0</span><span>0%</span></p>
                </div>
            </div>

        </div>
    </div>
    <div id="map_div" class="fl con_left2">
        <img th:src="@{/visualization/images/map.png}" class="map_img"/>
        <div class="map_index">
        <div class="map_id map_id1 " onclick="Alert(this)">
            <div class="map_sj">
                <i class="map_wz4"></i>
                <i class="map_wz3"></i>
                <i class="map_wz2"></i>
                <i class="map_wz1"></i>
            </div>
            <div class="map_dx">
                <div class="map_txt">
                    <h1>通化市血站</h1>
                    <p>联系人：柳爽</p>
                    <p>电话：15636365656</p>
                    <p>地址：通化市东昌区新站路东方假日酒店西侧约80米</p>
                </div>
                <i class="map_d"></i>
                <i class="map_x"></i>
            </div>
        </div>
        <div class="map_id map_id2">
            <div class="map_sj">
                <i class="map_wz4"></i>
                <i class="map_wz3"></i>
                <i class="map_wz2"></i>
                <i class="map_wz1"></i>
            </div>
            <div class="map_dx">
                <div class="map_txt">
                    <h1>通化健康体检中心</h1>
                    <p>联系人：柳爽</p>
                    <p>电话：15636365656</p>
                    <p>地址：吉林省通化市东昌区龙泉路118号</p>
                </div>
                <i class="map_d"></i>
                <i class="map_x"></i>
            </div>
        </div>
        <div class="map_id map_id3">
            <div class="map_sj">
                <i class="map_wz4"></i>
                <i class="map_wz3"></i>
                <i class="map_wz2"></i>
                <i class="map_wz1"></i>
            </div>
            <div class="map_dx">
                <div class="map_txt">
                    <h1>通化市图书馆(江南馆)</h1>
                    <p>联系人：柳爽</p>
                    <p>电话：(0435)3216559</p>
                    <p>地址：通化市东昌区江南西路590号</p>
                </div>
                <i class="map_d"></i>
                <i class="map_x"></i>
            </div>
        </div>
        <div class="map_id map_id4">
            <div class="map_sj">
                <i class="map_wz4"></i>
                <i class="map_wz3"></i>
                <i class="map_wz2"></i>
                <i class="map_wz1"></i>
            </div>
            <div class="map_dx">
                <div class="map_txt">
                    <h1>通化市自来水公司客户服务中心</h1>
                    <p>联系人：柳爽</p>
                    <p>电话：15636365656</p>
                    <p>地址：吉林省通化市东昌区秀泉路965号</p>
                </div>
                <i class="map_d"></i>
                <i class="map_x"></i>
            </div>
        </div>
        <div class="map_id map_id5">
            <div class="map_sj">
                <i class="map_wz4"></i>
                <i class="map_wz3"></i>
                <i class="map_wz2"></i>
                <i class="map_wz1"></i>
            </div>
            <div class="map_dx">
                <div class="map_txt">
                    <h1>通化市不动产登记中心</h1>
                    <p>联系人：柳爽</p>
                    <p>电话：(0435)3919031</p>
                    <p>地址：吉林省通化市东昌区光明路416号</p>
                </div>
                <i class="map_d"></i>
                <i class="map_x"></i>
            </div>
        </div>

        <div class="map_id map_id6">
            <div class="map_sj">
                <i class="map_wz4"></i>
                <i class="map_wz3"></i>
                <i class="map_wz2"></i>
                <i class="map_wz1"></i>
            </div>
            <div class="map_dx">
                <div class="map_txt">
                    <h1>通化市住房公积金管理中心</h1>
                    <p>联系人：柳爽</p>
                    <p>电话：(0435)3269066</p>
                    <p>地址：通化市东昌区东昌路707号</p>
                </div>
                <i class="map_d"></i>
                <i class="map_x"></i>
            </div>
        </div>
        <div class="map_id map_id7">
            <div class="map_sj">
                <i class="map_wz4"></i>
                <i class="map_wz3"></i>
                <i class="map_wz2"></i>
                <i class="map_wz1"></i>
            </div>
            <div class="map_dx">
                <div class="map_txt">
                    <h1>吉林省通化市燃气总公司</h1>
                    <p>联系人：柳爽</p>
                    <p>电话：(0435)3961181</p>
                    <p>地址：吉林省通化市东昌区新胜北路219号</p>
                </div>
                <i class="map_d"></i>
                <i class="map_x"></i>
            </div>
        </div>
        <div class="map_id map_id8">
            <div class="map_sj">
                <i class="map_wz4"></i>
                <i class="map_wz3"></i>
                <i class="map_wz2"></i>
                <i class="map_wz1"></i>
            </div>
            <div class="map_dx">
                <div class="map_txt">
                    <h1>通化市医药和食品产业服务中心</h1>
                    <p>联系人：柳爽</p>
                    <p>电话：(0435)3961181</p>
                    <p>地址：通化市东昌区秀泉路通化市政府西侧约50米</p>
                </div>
                <i class="map_d"></i>
                <i class="map_x"></i>
            </div>
        </div>
        <div class="map_id map_id9">
            <div class="map_sj">
                <i class="map_wz4"></i>
                <i class="map_wz3"></i>
                <i class="map_wz2"></i>
                <i class="map_wz1"></i>
            </div>
            <div class="map_dx">
                <div class="map_txt">
                    <h1>通化市殡仪馆</h1>
                    <p>联系人：柳爽</p>
                    <p>电话：(0435)3961181</p>
                    <p>地址：吉林省通化市东昌区新安路1111号</p>
                </div>
                <i class="map_d"></i>
                <i class="map_x"></i>
            </div>
        </div>

        <div class="map_id map_id10">
            <div class="map_sj">
                <i class="map_wz4"></i>
                <i class="map_wz3"></i>
                <i class="map_wz2"></i>
                <i class="map_wz1"></i>
            </div>
            <div class="map_dx">
                <div class="map_txt">
                    <h1>通化市房产管理中心</h1>
                    <p>联系人：柳爽</p>
                    <p>电话：(0435)3961181</p>
                    <p>地址：通化市东昌区新华大街30号</p>
                </div>
                <i class="map_d"></i>
                <i class="map_x"></i>
            </div>
        </div>
        <div class="map_id map_id11">
            <div class="map_sj">
                <i class="map_wz4"></i>
                <i class="map_wz3"></i>
                <i class="map_wz2"></i>
                <i class="map_wz1"></i>
            </div>
            <div class="map_dx">
                <div class="map_txt">
                    <h1>通化市公共资源交易中心</h1>
                    <p>联系人：柳爽</p>
                    <p>电话：(0435)3961181</p>
                    <p>地址：吉林省通化市东昌区新城路113号</p>
                </div>
                <i class="map_d"></i>
                <i class="map_x"></i>
            </div>
        </div>
        <div class="map_id map_id12">
            <div class="map_sj">
                <i class="map_wz4"></i>
                <i class="map_wz3"></i>
                <i class="map_wz2"></i>
                <i class="map_wz1"></i>
            </div>
            <div class="map_dx">
                <div class="map_txt">
                    <h1>通化市城市管理行政执法局</h1>
                    <p>联系人：柳爽</p>
                    <p>电话：(0435)3961181</p>
                    <p>地址：吉林省通化市东昌区新站路352号</p>
                </div>
                <i class="map_d"></i>
                <i class="map_x"></i>
            </div>
        </div>
        </div>
    </div>
    <div class="fr con_right">
        <div class="jkgj con_bg">
            <i class="con_x"><img th:src="@{/visualization/images/thqzj_con_x.png}"></i>
            <div class="con_tit clearfix">
                <div class="fl div_tit">归集数据/接口排名</div>
                <div class="tab_tit"><span class="on" id="shpm">数据排名</span><span id="jkpm">接口排名</span></div>
            </div>
            <div class="tab_div1">
                <div id="jkgj" class="jkgj_tab active" style="display: block;"></div>
                <div id="jkgj2" class="jkgj_tab" style="display: none;"></div>
            </div>
        </div>

    </div>
    <div class="clearfix"></div>
    <div class="con_bottom1 con_bg fl">
        <i class="con_x"><img th:src="@{/visualization/images/thqzj_con_x.png}"></i>
        <div class="con_tit clearfix">
            <div class="fl div_tit2">省、市接口调用频次（TOP20）</div>
            <div class="tab_tit2"><span class="on" id="shjk">省接口调用频次</span><span id="sjk">市接口调用频次</span></div>
        </div>
        <div class="tab_div2 clearfix" style="display: block;">
            <div id="shjk_div1" class=" fl"></div>
            <div id="shjk_div2" class=" fl"></div>
        </div>
        <div class="tab_div2 clearfix" style="display: none;">
            <div id="sjk_div1" class=" fl"></div>
            <div id="sjk_div2" class=" fl"></div>
        </div>
    </div>
    <div class="con_bottom2 con_bg fl">
        <i class="con_x"><img th:src="@{/visualization/images/thqzj_con_x.png}"></i>
        <div class="con_tit clearfix">
            <div class="fl div_tit2">归集数据分析</div>
            <div class="tit_date"><i></i>
                <select id="line" th:onchange="changeYear()">
                    <option selected th:value="2022">2022年</option>
                    <option th:value="2021">2021年</option>
                    <option th:value="2020">2020年</option>
                </select>
            </div>
        </div>
        <div id="gjsj"></div>
    </div>
</div>

<!-- 弹框 开始-->
<iframe id="tk_iframe" style="display:none"></iframe>
<!-- 弹框 结束-->
<script>
    //宇宙特效
    "use strict";
    var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d'),
        w = canvas.width = window.innerWidth,
        h = canvas.height = window.innerHeight,

        hue = 217,
        stars = [],
        count = 0,
        maxStars = 1300;//星星数量

    var canvas2 = document.createElement('canvas'),
        ctx2 = canvas2.getContext('2d');
    canvas2.width = 100;
    canvas2.height = 100;
    var half = canvas2.width / 2,
        gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
    gradient2.addColorStop(0.025, '#CCC');
    gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
    gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
    gradient2.addColorStop(1, 'transparent');

    ctx2.fillStyle = gradient2;
    ctx2.beginPath();
    ctx2.arc(half, half, half, 0, Math.PI * 2);
    ctx2.fill();

    // End cache

    function random(min, max) {
        if (arguments.length < 2) {
            max = min;
            min = 0;
        }

        if (min > max) {
            var hold = max;
            max = min;
            min = hold;
        }

        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function maxOrbit(x, y) {
        var max = Math.max(x, y),
            diameter = Math.round(Math.sqrt(max * max + max * max));
        return diameter / 2;
        //星星移动范围，值越大范围越小，
    }

    var Star = function () {

        this.orbitRadius = random(maxOrbit(w, h));
        this.radius = random(60, this.orbitRadius) / 8;
        //星星大小
        this.orbitX = w / 2;
        this.orbitY = h / 2;
        this.timePassed = random(0, maxStars);
        this.speed = random(this.orbitRadius) / 50000;
        //星星移动速度
        this.alpha = random(2, 10) / 10;

        count++;
        stars[count] = this;
    }

    Star.prototype.draw = function () {
        var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
            y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
            twinkle = random(10);

        if (twinkle === 1 && this.alpha > 0) {
            this.alpha -= 0.05;
        } else if (twinkle === 2 && this.alpha < 1) {
            this.alpha += 0.05;
        }

        ctx.globalAlpha = this.alpha;
        ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
        this.timePassed += this.speed;
    }

    for (var i = 0; i < maxStars; i++) {
        new Star();
    }

    function animation() {
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 0.5; //尾巴
        ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
        ctx.fillRect(0, 0, w, h)

        ctx.globalCompositeOperation = 'lighter';
        for (var i = 1, l = stars.length; i < l; i++) {
            stars[i].draw();
        }
        ;
        window.requestAnimationFrame(animation);
    }

    animation();

    //占比选择年份方法
    function selectYear(){
        countAndPercent($("#pie").val());
    }

    //归集数据分析选择年份方法
    function changeYear(){
        imputationDataList($("#line").val());
    }

    let iframe_prefix = "/visualization/tk_iframe/";
    $(".nav_div > a").on("click",function(_this){
        let id = _this.currentTarget.id;
        $("#tk_iframe").attr("src",iframe_prefix + id);
        openFrame();
    });

    //iframe 显示方法
    function openFrame(){
        $("#tk_iframe").show();
    }
    //iframe 关闭方法
    function closeFrame(){
        $("#tk_iframe").hide();
    }


</script>
<script type="text/javascript" th:src="@{/visualization/js/echarts_div.js}"></script>
<script type="text/javascript" th:src="@{/visualization/js/echarts-tooltip-carousel.js}"></script>
</body>
</html>
