可视化

leiSP-admin/src/main/resources/templates/index.html

@@ -183,9 +183,7 @@
 					通化市接口中台智能管理平台
 				</h6>
                 <ul class="nav navbar-top-links navbar-right welcome-message">
-					<li><a title="可视化" th:href="@{/VisualizationController/index}" target="_blank"><i class="fa fa-video-camera"></i> 可视化</a></li>
-					<li><a title="可视化" th:href="@{/VisualizationController/edition2/index2}" target="_blank"><i class="fa fa-video-camera"></i> 可视化2.0</a></li>
-					<li><a title="可视化" th:href="@{/VisualizationController/edition2/tk_iframe}" target="_blank"><i class="fa fa-video-camera"></i> 可视化2.1</a></li>
+					<li><a title="可视化" th:href="@{/visualization/index}" target="_blank"><i class="fa fa-video-camera"></i> 可视化</a></li>
 					<li><a title="示例" href="" target="_blank"><i class="fa fa-video-camera"></i> 示例</a></li>
                     <li><a title="文档" href="" target="_blank"><i class="fa fa-question-circle"></i> 文档</a></li>
 	                <li><a title="全屏显示" href="javascript:void(0)" id="fullScreen"><i class="fa fa-arrows-alt"></i> 全屏</a></li>

mybusiness/src/main/java/com/business/controller/VisualizationController.java

@@ -1,32 +1,47 @@
 package com.business.controller;
 
+import com.alibaba.fastjson.JSONObject;
 import com.sooka.common.core.controller.BaseController;
 import com.sooka.common.core.domain.AjaxResult;
+import com.sooka.system.domain.TUInterfaceinfo;
+import com.sooka.system.service.ITUInterfaceinfoService;
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.ResponseBody;
 
+import java.util.List;
+
+/**
+ * @author Administrator
+ */
 @Controller
-@RequestMapping("VisualizationController")
+@RequestMapping("visualization")
 public class VisualizationController extends BaseController {
 
+    @Autowired
+    private ITUInterfaceinfoService interfaceinfoService;
+
     @GetMapping("index")
     public String index(){
         return "/visualization/index";
     }
 
-    @GetMapping("edition2/index2")
-    public String index2(){
-        return "/visualization/edition2/index2";
-    }
-
-    @GetMapping("edition2/tk_iframe")
-    public String tk_iframe(){
-        return "/visualization/edition2/tk_iframe";
-    }
-
     public AjaxResult initVisualization(){
        return null;
     }
 
+    @PostMapping("countAndPercent")
+    @ResponseBody
+    public JSONObject getCountAndPercent(String year){
+        JSONObject jsonObject = new JSONObject();
+        List<TUInterfaceinfo> list_count = interfaceinfoService.getCount();
+        List<TUInterfaceinfo> list_percent = interfaceinfoService.getPercent(year);
+        jsonObject.put("count",list_count);
+        jsonObject.put("percent",list_percent);
+        return jsonObject;
+    }
+
 }

mybusiness/src/main/java/com/sooka/system/domain/TUInterfaceinfo.java

@@ -76,6 +76,28 @@ public class TUInterfaceinfo extends BaseEntity
     @Excel(name = "调用失败次数")
     private Long callfailnum;
 
+    /** 数量 */
+    private String count;
+
+    /** 占比 */
+    private String percent;
+
+    public String getCount() {
+        return count;
+    }
+
+    public void setCount(String count) {
+        this.count = count;
+    }
+
+    public String getPercent() {
+        return percent;
+    }
+
+    public void setPercent(String percent) {
+        this.percent = percent;
+    }
+
     public Long getCallsuccnum() {
         return callsuccnum;
     }

mybusiness/src/main/java/com/sooka/system/mapper/TUInterfaceinfoMapper.java

@@ -2,6 +2,7 @@ package com.sooka.system.mapper;
 
 import java.util.List;
 import com.sooka.system.domain.TUInterfaceinfo;
+import org.apache.ibatis.annotations.Param;
 
 /**
  * 【请填写功能名称】Mapper接口
@@ -60,4 +61,17 @@ public interface TUInterfaceinfoMapper
     public int deleteTUInterfaceinfoByIds(String[] ids);
 
     public Integer getMaxCode();
+
+    /**
+     * 查询接口数量
+     * @return 结果
+     */
+    public List<TUInterfaceinfo> getCount();
+
+    /**
+     * 查询接口占比
+     * @param year
+     * @return 结果
+     */
+    public List<TUInterfaceinfo> getPercent(@Param("year") String year);
 }

mybusiness/src/main/java/com/sooka/system/service/ITUInterfaceinfoService.java

@@ -5,15 +5,15 @@ import com.sooka.system.domain.TUInterfaceinfo;
 
 /**
  * 【请填写功能名称】Service接口
- * 
+ *
  * @author lei
  * @date 2021-07-01
  */
-public interface ITUInterfaceinfoService 
+public interface ITUInterfaceinfoService
 {
     /**
      * 查询【请填写功能名称】
-     * 
+     *
      * @param id 【请填写功能名称】ID
      * @return 【请填写功能名称】
      */
@@ -21,7 +21,7 @@ public interface ITUInterfaceinfoService
 
     /**
      * 查询【请填写功能名称】列表
-     * 
+     *
      * @param tUInterfaceinfo 【请填写功能名称】
      * @return 【请填写功能名称】集合
      */
@@ -29,7 +29,7 @@ public interface ITUInterfaceinfoService
 
     /**
      * 新增【请填写功能名称】
-     * 
+     *
      * @param tUInterfaceinfo 【请填写功能名称】
      * @return 结果
      */
@@ -37,7 +37,7 @@ public interface ITUInterfaceinfoService
 
     /**
      * 修改【请填写功能名称】
-     * 
+     *
      * @param tUInterfaceinfo 【请填写功能名称】
      * @return 结果
      */
@@ -45,7 +45,7 @@ public interface ITUInterfaceinfoService
 
     /**
      * 批量删除【请填写功能名称】
-     * 
+     *
      * @param ids 需要删除的数据ID
      * @return 结果
      */
@@ -53,9 +53,21 @@ public interface ITUInterfaceinfoService
 
     /**
      * 删除【请填写功能名称】信息
-     * 
+     *
      * @param id 【请填写功能名称】ID
      * @return 结果
      */
     public int deleteTUInterfaceinfoById(String id);
+
+    /**
+     * 查询接口数量
+     * @return 结果
+     */
+    public List<TUInterfaceinfo> getCount();
+
+    /**
+     * 查询接口占比
+     * @return 结果
+     */
+    public List<TUInterfaceinfo> getPercent(String year);
 }

mybusiness/src/main/java/com/sooka/system/service/impl/TUInterfaceinfoServiceImpl.java

@@ -130,4 +130,22 @@ public class TUInterfaceinfoServiceImpl implements ITUInterfaceinfoService
     {
         return tUInterfaceinfoMapper.deleteTUInterfaceinfoById(id);
     }
+
+    /**
+     * 查询接口数量
+     * @return 结果
+     */
+    @Override
+    public List<TUInterfaceinfo> getCount(){
+        return tUInterfaceinfoMapper.getCount();
+    }
+
+    /**
+     * 查询接口占比
+     * @return 结果
+     */
+    @Override
+    public List<TUInterfaceinfo> getPercent(String year){
+        return tUInterfaceinfoMapper.getPercent(year);
+    }
 }

mybusiness/src/main/resources/mapper/system/TUInterfaceinfoMapper.xml

@@ -26,6 +26,8 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         <result property="code"    column="code"    />
         <result property="callsuccnum"    column="callsuccnum"    />
         <result property="callfailnum"    column="callfailnum"    />
+        <result property="count"    column="count"    />
+        <result property="percent"    column="percent"    />
     </resultMap>
 
     <sql id="selectTUInterfaceinfoVo">
@@ -150,4 +152,41 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         SELECT max(CONVERT(code, UNSIGNED INTEGER)) from t_u_interfaceinfo
     </select>
 
+    <select id="getCount" resultMap="TUInterfaceinfoResult">
+        SELECT
+            COUNT(id) count,
+            b.dict_label share_type
+        FROM
+            t_u_interfaceinfo a
+        LEFT JOIN sys_dict_data b ON a.share_type = b.dict_value
+        GROUP BY
+            share_type
+        ORDER BY dict_value
+    </select>
+
+    <select id="getPercent" resultMap="TUInterfaceinfoResult" parameterType="String">
+        SELECT
+            CONVERT (
+                (
+                    COUNT(id) / (
+                        SELECT
+                            COUNT(id)
+                        FROM
+                            t_u_interfaceinfo
+                    ) * 100
+                ),
+                DECIMAL (10, 0)
+            ) percent,
+            COUNT(id) count,
+            b.dict_label share_type
+        FROM
+            t_u_interfaceinfo a
+        LEFT JOIN sys_dict_data b ON a.share_type = b.dict_value
+        WHERE DATE_FORMAT(a.create_time,'%Y') = #{year}
+        GROUP BY
+            share_type
+        ORDER BY dict_value
+    </select>
+
+
 </mapper>

mybusiness/src/main/resources/static/visualization/allcharts/eventPieTh.js

@@ -1,6 +1,4 @@
-
-
-function jkzb(zb_guiji,zb_gongxiang) {
+function jkzb(zb_guiji, zb_gongxiang) {
 
     var myChart_eventPie = echarts.init(document.getElementById('jkzb'));
     option_eventPie = {
@@ -44,7 +42,7 @@ function jkzb(zb_guiji,zb_gongxiang) {
                     show: false
                 },
                 data: [
-                    {value:zb_guiji, name: '归集接口'},
+                    {value: zb_guiji, name: '归集接口'},
                     {value: zb_gongxiang, name: '共享接口'},
 
                 ],
@@ -54,7 +52,6 @@ function jkzb(zb_guiji,zb_gongxiang) {
     };
 
 
-
     myChart_eventPie.setOption(option_eventPie);
 }
 

mybusiness/src/main/resources/static/visualization/js/th_jk.js

@@ -1,241 +1,203 @@
-$(function() {
-	//地图
-   setInterval("autochange()",10000);
-   
-   //背景
-   var wid = $(document).width();
-   var hei = $(document).height();
-   $("#particles-js").height(hei);
-   $("#particles-js").width(wid);
-   
-   
-   //时间    间隔一秒执行一次获取当前时间的方法
-   setInterval(function () { CurrentTime() }, 1000);
-   
-   
-   // 接口占比
-jkzb();   
-   // 归集数据/接口排名
-jkgj();
-jkgj2();
-
-// 切换
-var i=0;//初始记录用户鼠标经过是第几个li
-    var canmove=true;
-    $('.tab_tit span').mouseenter(function(i){
-        canmove=false;
-        clearInterval(li_timer);
-        i=$(this).index();
-        $(this).addClass('on').siblings().removeClass('on');
-		$(this).attr('v',i);
-		var e = $('.tab_div1 .jkgj_tab').index();
-		$('.tab_div1 .jkgj_tab').attr('v',i);
-        $('.tab_div1 .jkgj_tab').hide();
-        $('.tab_div1 .jkgj_tab').eq(i).show(); 
-		
-		if($('.tab_div1 .jkgj_tab').eq(1).is(':hidden')){
-	
-			// myChart22.resize();
-			// myChart33.removeAttribute("_echarts_instance_");
-			// myChart22.setOption(option,true);
-jkgj();
-		}else if($('.tab_div1 .jkgj_tab').eq(0).is(':hidden')){
-	
-			// myChart33.resize();
-			// myChart22.removeAttribute("_echarts_instance_");
-			// myChart33.setOption(option,true);
-	jkgj2();
-	
-		}
-		
-		
-    });
- 
-    $(".tab_div1").mouseenter(function(){//只要用户鼠标在这个tab1区域内，就不自动跳转
-        canmove=false;
-    }).mouseleave(function(){
-        clearInterval(li_timer);
-        setTimeout(function(){canmove=true;},2000);//两秒后自动切换
-    });
+    $(function () {
+        //地图
+        setInterval("autochange()", 10000);
+        //背景
+        var wid = $(document).width();
+        var hei = $(document).height();
+        $("#particles-js").height(hei);
+        $("#particles-js").width(wid);
+        //时间    间隔一秒执行一次获取当前时间的方法
+        setInterval(function () {
+            CurrentTime()
+        }, 1000);
+        // 接口数量
+        countAndPercent();
+        // 归集数据/接口排名
+        jkgj();
+        jkgj2();
+        // 切换
+        var i = 0;//初始记录用户鼠标经过是第几个li
+        var canmove = true;
+        $('.tab_tit span').mouseenter(function (i) {
+            canmove = false;
+            clearInterval(li_timer);
+            i = $(this).index();
+            $(this).addClass('on').siblings().removeClass('on');
+            $(this).attr('v', i);
+            var e = $('.tab_div1 .jkgj_tab').index();
+            $('.tab_div1 .jkgj_tab').attr('v', i);
+            $('.tab_div1 .jkgj_tab').hide();
+            $('.tab_div1 .jkgj_tab').eq(i).show();
 
-    function li_timer(){
-		// wid = 100;
-		
-        if(canmove){
-            i++;
-            if(i==$('.tab_tit span').length){
-                i=0;
+            if ($('.tab_div1 .jkgj_tab').eq(1).is(':hidden')) {
+                jkgj();
+            } else if ($('.tab_div1 .jkgj_tab').eq(0).is(':hidden')) {
+                jkgj2();
+            }
+        });
+
+        $(".tab_div1").mouseenter(function () {//只要用户鼠标在这个tab1区域内，就不自动跳转
+            canmove = false;
+        }).mouseleave(function () {
+            clearInterval(li_timer);
+            setTimeout(function () {
+                canmove = true;
+            }, 2000);//两秒后自动切换
+        });
+
+        function li_timer() {
+            // wid = 100;
+            if (canmove) {
+                i++;
+                if (i == $('.tab_tit span').length) {
+                    i = 0;
+                }
+                $('.tab_tit span').eq(i).addClass('on').siblings().removeClass('on');
+                $('.tab_div1 .jkgj_tab').hide();
+                $('.tab_div1 .jkgj_tab').eq(i).show();
             }
-            $('.tab_tit span').eq(i).addClass('on').siblings().removeClass('on');
-            $('.tab_div1 .jkgj_tab').hide();
-            $('.tab_div1 .jkgj_tab').eq(i).show(); 
-			
         }
- 
-    }
-    setInterval(li_timer,5000);//每两秒切换
-
-
-
-// 省、市接口调用切换
-sjk1();
-sjk2();
-shjk1();
-shjk2();
-
-
-// 切换
-var u=0;//初始记录用户鼠标经过是第几个li
-    var canmoveu=true;
-    $('.tab_tit2 span').mouseenter(function(i){
-        canmoveu=false;
-        clearInterval(li_timer2);
-        u=$(this).index();
-        $(this).addClass('on').siblings().removeClass('on');
-        $('.tab_div2').hide();
-        $('.tab_div2').eq(u).show(); 
-		if($('.tab_div2').eq(1).is(':hidden')){
-		
-		shjk1();
-		shjk2();	
-		}else if($('.tab_div2').eq(1).is(':hidden')){
-		sjk1();
-		sjk2();
-			
-		}
-		
-		
-    });
- 
-    $(".tab_div2").mouseenter(function(){//只要用户鼠标在这个tab1区域内，就不自动跳转
-        canmove=false;
-    }).mouseleave(function(){
-        clearInterval(li_timer2);
-        setTimeout(function(){canmoveu=true;},2000);//两秒后自动切换
-    });
 
-    function li_timer2(){
-		// wid = 100;
-        if(canmoveu){
-            u++;
-            if(u==$('.tab_tit2 span').length){
-                u=0;
-            }
-            $('.tab_tit2 span').eq(u).addClass('on').siblings().removeClass('on');
+        setInterval(li_timer, 5000);//每两秒切换
+        // 省、市接口调用切换
+        sjk1();
+        sjk2();
+        shjk1();
+        shjk2();
+        // 切换
+        var u = 0;//初始记录用户鼠标经过是第几个li
+        var canmoveu = true;
+        $('.tab_tit2 span').mouseenter(function (i) {
+            canmoveu = false;
+            clearInterval(li_timer2);
+            u = $(this).index();
+            $(this).addClass('on').siblings().removeClass('on');
             $('.tab_div2').hide();
-            $('.tab_div2').eq(u).show(); 
-			
+            $('.tab_div2').eq(u).show();
+            if ($('.tab_div2').eq(1).is(':hidden')) {
+                shjk1();
+                shjk2();
+            } else if ($('.tab_div2').eq(1).is(':hidden')) {
+                sjk1();
+                sjk2();
+            }
+        });
+
+        $(".tab_div2").mouseenter(function () {//只要用户鼠标在这个tab1区域内，就不自动跳转
+            canmove = false;
+        }).mouseleave(function () {
+            clearInterval(li_timer2);
+            setTimeout(function () {
+                canmoveu = true;
+            }, 2000);//两秒后自动切换
+        });
+
+        function li_timer2() {
+            // wid = 100;
+            if (canmoveu) {
+                u++;
+                if (u == $('.tab_tit2 span').length) {
+                    u = 0;
+                }
+                $('.tab_tit2 span').eq(u).addClass('on').siblings().removeClass('on');
+                $('.tab_div2').hide();
+                $('.tab_div2').eq(u).show();
+            }
         }
- 
+
+        setInterval(li_timer2, 5000);//每两秒切换
+        // 归集数据分析
+        gjsj();
+        // 弹框数据归集
+        // tk_gjsj();
+    });
+
+    //时间
+    function getNow(Mytime) {
+        return Mytime < 10 ? '0' + Mytime : Mytime;
+    }
+
+    function CurrentTime() {
+        var myDate = new Date();
+        //获取当前年份
+        var year = myDate.getFullYear();
+        //获取当前月份
+        var month = myDate.getMonth() + 1;
+        //获取当前日期
+        var date = myDate.getDate();
+        //获取当前小时数(0-23)
+        var h = myDate.getHours();
+        //获取当前分钟数(0-59)
+        var m = myDate.getMinutes();
+        var s = myDate.getSeconds();
+        var now = year + '-' + getNow(month) + '-' + getNow(date);
+        var now2 = getNow(h) + ':' + getNow(m) + ':' + getNow(s);
+        $(".nyr").text(now);
+        $(".sfm").text(now2);
     }
-    setInterval(li_timer2,5000);//每两秒切换
-	
-	
-	// 归集数据分析
-	gjsj();
-	// 弹框数据归集
-	// tk_gjsj();
-	
-	
-	
-
-	
-	
-
-});
-
-
-
-// 时间
-//时间
-function getNow(Mytime) { return Mytime < 10 ? '0' + Mytime : Mytime; }
-        function CurrentTime() {
-            var myDate = new Date();
-            //获取当前年份
-            var year = myDate.getFullYear();
-            //获取当前月份
-            var month = myDate.getMonth() + 1;
-            //获取当前日期
-            var date = myDate.getDate();
-            //获取当前小时数(0-23)
-            var h = myDate.getHours();
-            //获取当前分钟数(0-59)
-            var m = myDate.getMinutes();
-            var s = myDate.getSeconds();
-            var now = year + '-' + getNow(month)+ '-' + getNow(date);
-            var now2 =  getNow(h)+ ':' + getNow(m) + ':' + getNow(s);
-            $(".nyr").text(now);
-            $(".sfm").text(now2);
+
+    //地图
+    var obj = [
+        function () {
+            $(".map_img").removeClass("movefd");
+            $(".map_img").addClass("movesx");
+        }, function () {
+            $(".map_img").removeClass("movesx");
+            $(".map_img").addClass("movess");
+        },
+        function () {
+            $(".map_img").removeClass("movess");
+            $(".map_img").addClass("movexj");
+        },
+        function () {
+            $(".map_img").removeClass("movexj");
+            $(".map_img").addClass("movefd");
         }
+    ]
+    $.each(obj, function (i) {
+        // Replace 500 with whatever you want
+        setInterval(this, 10000 * i);
+    });
+
 
+    function mp_id1() {
+        $('.map_id1').addClass("mp_hide").removeClass("mp_show");
+        $('.map_id2').addClass("mp_show").removeClass("mp_hide");
+    }
 
+    function mp_id2() {
+        $('.map_id2').addClass("mp_hide").removeClass("mp_show");
+        $('.map_id3').addClass("mp_show").removeClass("mp_hide");
+    }
 
+    function mp_id3() {
+        $('.map_id3').addClass("mp_hide").removeClass("mp_show");
+        $('.map_id4').addClass("mp_show").removeClass("mp_hide");
+    }
 
-//地图
-	var obj = [
-			function() {
-				$(".map_img").removeClass("movefd");
-				$(".map_img").addClass("movesx");
-			},function() {
-				$(".map_img").removeClass("movesx");
-				$(".map_img").addClass("movess");
-			},
-			function() {
-				$(".map_img").removeClass("movess");
-				$(".map_img").addClass("movexj");
-			},
-			function() {
-				$(".map_img").removeClass("movexj");
-				$(".map_img").addClass("movefd");
-			}
-		]
-		$.each(obj, function(i) {
-			// Replace 500 with whatever you want 
-			setInterval(this, 10000 * i);
-		});
-		
-		
-		
-			
-			function mp_id1() {
-				$('.map_id1').addClass("mp_hide").removeClass("mp_show");
-				$('.map_id2').addClass("mp_show").removeClass("mp_hide");
-			}
-			function mp_id2() {
-				$('.map_id2').addClass("mp_hide").removeClass("mp_show");
-				$('.map_id3').addClass("mp_show").removeClass("mp_hide");
-			}
-			function mp_id3() {
-				$('.map_id3').addClass("mp_hide").removeClass("mp_show");
-				$('.map_id4').addClass("mp_show").removeClass("mp_hide");
-			}
-			function mp_id4() {
-				$('.map_id4').addClass("mp_hide").removeClass("mp_show");
-				$('.map_id1').addClass("mp_show").removeClass("mp_hide");
-			}
-	
-		
-		// 设置一个判断计数器
-		var count=0;
-		// 根据计数器状态切换响应的皮肤
-		function autochange() {
-		 if (count==0) {
-		 mp_id1();
-		 }
-		 if (count==1) {
-		 mp_id2();
-		 }
-		 if (count==2) {
-		 mp_id3();
-		 }
-		 if (count==3) {
-		 mp_id4();
-		 }
-		 count=count+1;
-		 if (count>3) {
-		 count=0;
-		 }
-		}
-		
-		
-		
+    function mp_id4() {
+        $('.map_id4').addClass("mp_hide").removeClass("mp_show");
+        $('.map_id1').addClass("mp_show").removeClass("mp_hide");
+    }
+
+    // 设置一个判断计数器
+    var count = 0;
+    // 根据计数器状态切换响应的皮肤
+    function autochange() {
+        if (count == 0) {
+            mp_id1();
+        }
+        if (count == 1) {
+            mp_id2();
+        }
+        if (count == 2) {
+            mp_id3();
+        }
+        if (count == 3) {
+            mp_id4();
+        }
+        count = count + 1;
+        if (count > 3) {
+            count = 0;
+        }
+    }

mybusiness/src/main/resources/templates/visualization/edition2/index2.html

@@ -1,311 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
-	<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="on">大数据</a>
-				<a>接入部门</a>
-				<a>接口故障<i>（0）</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>43/43个</p>
-						</div>
-						<span>市归集接口数</span>
-					</div>
-					<div class="data1">
-						<div class="qiu">
-							<p>43/43个</p>
-						</div>
-						<span>市归集接口数</span>
-					</div>
-					<div class="data1">
-						<div class="qiu">
-							<p>43/43个</p>
-						</div>
-						<span>市归集接口数</span>
-					</div>
-					<div class="data1">
-						<div class="qiu">
-							<p>43/43个</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>2021-01-01&nbsp;至&nbsp;2022-08-08</div>
-					</div>
-					<div id="jkzb"></div>
-					<div class="jkzb_txt">
-						<div class="sgj jkzb_list">
-							<h3><i></i>市归集</h3>
-							<p><span>2,384</span><span>20%</span><b><i class="ss"></i>15</b></p>
-						</div>
-						<div class="sgx jkzb_list">
-							<h3><i></i>市共享</h3>
-							<p><span>4,162</span><span>20%</span><b><i class="ss"></i>15</b></p>
-						</div>
-						<div class="sgj2 jkzb_list">
-							<h3><i></i>省归集</h3>
-							<p><span>6,681</span><span>20%</span><b><i class="ss"></i>15</b></p>
-						</div>
-						<div class="sgx jkzb_list">
-							<h3><i></i>省共享</h3>
-							<p><span>10,324</span><span>20%</span><b><i class="ss"></i>15</b></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_id map_id1 mp_show">
-					<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>通化市1XXX部门</h1>
-							<p>联系人：柳爽</p>
-							<p>电话：15636365656</p>
-							<p>地址：通化市童话街璐璐大厦2256</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>通化市2XXX部门</h1>
-								<p>联系人：柳爽</p>
-								<p>电话：15636365656</p>
-								<p>地址：通化市童话街璐璐大厦2256</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>通化市3XXX部门</h1>
-								<p>联系人：柳爽</p>
-								<p>电话：15636365656</p>
-								<p>地址：通化市童话街璐璐大厦2256</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>通化市4XXX部门</h1>
-								<p>联系人：柳爽</p>
-								<p>电话：15636365656</p>
-								<p>地址：通化市童话街璐璐大厦2256</p>
-							</div>
-							<i class="map_d"></i>
-							<i class="map_x"></i>
-						</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>2021-01-01&nbsp;至&nbsp;2022-08-08</div>
-				</div>
-				<div id="gjsj"></div>
-			</div>
-		</div>
-
-		<!-- 弹框 开始-->
-		 <iframe id="tk_iframe" th:src="@{/VisualizationController/edition2/tk_iframe}"></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();
-		</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>

mybusiness/src/main/resources/templates/visualization/index.html

@@ -1,459 +1,313 @@
 <!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>
+    <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>
-<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 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>
-    <!-- 导航结束 -->
-    <!-- 内容开始 -->
-    <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>
+    <h1 class="logo"><img th:src="@{/visualization/images/thqzj_logo.png}"/></h1>
+    <div class="header_nav fr">
+        <a class="on">大数据</a>
+        <a>接入部门</a>
+        <a>接口故障<i>（0）</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>
-        <!-- 部门接口调用排名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 class="data1">
+                <div class="qiu">
+                    <p>0个</p>
                 </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>
+                <span>市共享接口数</span>
+            </div>
+            <div class="data1">
+                <div class="qiu">
+                    <p>0个</p>
                 </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>
+                <span>省归集接口数</span>
+            </div>
+            <div class="data1">
+                <div class="qiu">
+                    <p>0个</p>
                 </div>
-
-
+                <span>省共享接口数</span>
             </div>
         </div>
-        <!-- 接口地图展示E -->
+        <div class="jkzb con_bg">
+            <i class="con_x"><img th:src="@{/visualization/images/thqzj_con_x.png}"/></i>
 
-        <!-- 右侧内容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 class="con_tit clearfix">
+                <div class="fl div_tit">接口占比</div>
+                <div class="tit_date"><i></i>2022</div>
             </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 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="th-right-con-2 mg-r1">
-                    <h4>接口使用</h4>
-                    <div id="jksy" style="width: 280px; height: 200px;"></div>
+                <div class="sgj2 jkzb_list">
+                    <h3><i></i>省归集</h3>
+                    <p><span>0</span><span>0%</span></p>
                 </div>
-                <div class="th-right-con-2">
-                    <h4>接入部门</h4>
-                    <div id="jrbm" style="width: 280px; height: 200px;"></div>
+                <div class="sgx jkzb_list">
+                    <h3><i></i>省共享</h3>
+                    <p><span>0</span><span>0%</span></p>
                 </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>
+    <div id="map_div" class="fl con_left2">
+        <img th:src="@{/visualization/images/map.png}" class="map_img"/>
+        <div class="map_id map_id1 mp_show">
+            <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>通化市1XXX部门</h1>
+                    <p>联系人：柳爽</p>
+                    <p>电话：15636365656</p>
+                    <p>地址：通化市童话街璐璐大厦2256</p>
                 </div>
-                <div class="th-right-con-3">
-                    <h4>市主要共享接口</h4>
-                    <div id="szygx" style="width: 400px; height: 200px;"></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>通化市2XXX部门</h1>
+                    <p>联系人：柳爽</p>
+                    <p>电话：15636365656</p>
+                    <p>地址：通化市童话街璐璐大厦2256</p>
                 </div>
+                <i class="map_d"></i>
+                <i class="map_x"></i>
             </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 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>通化市3XXX部门</h1>
+                    <p>联系人：柳爽</p>
+                    <p>电话：15636365656</p>
+                    <p>地址：通化市童话街璐璐大厦2256</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>通化市4XXX部门</h1>
+                    <p>联系人：柳爽</p>
+                    <p>电话：15636365656</p>
+                    <p>地址：通化市童话街璐璐大厦2256</p>
                 </div>
+                <i class="map_d"></i>
+                <i class="map_x"></i>
+            </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>
-        <!-- 右侧内容E -->
+        <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>2021-01-01&nbsp;至&nbsp;2022-08-08</div>
+        </div>
+        <div id="gjsj"></div>
     </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>
-
 
+<!-- 弹框 开始-->
+<!--<iframe id="tk_iframe" th:src="@{/VisualizationController/edition2/tk_iframe}"></iframe>-->
+<!-- 弹框 结束-->
 <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";
-            }
+    //宇宙特效
+    "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;
         }
-    }
-    //市数据共享接口-市数据归集接口
-    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);
+        if (min > max) {
+            var hold = max;
+            max = min;
+            min = hold;
+        }
 
-        //右侧顶部统计
-        $("#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);
+        return Math.floor(Math.random() * (max - min + 1)) + min;
     }
 
-
-</script>
-
-<script>
-
-    var fuck = true;
-
-    function getVisualization() {
-        $.ajax({
-            url: '/MainPageController/getVisualization',
-            method: 'POST',
-            success: getVisualization_Success
-        })
+    function maxOrbit(x, y) {
+        var max = Math.max(x, y),
+            diameter = Math.round(Math.sqrt(max * max + max * max));
+        return diameter / 2;
+        //星星移动范围，值越大范围越小，
     }
 
-    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部门接口调用排名
+    var Star = function () {
 
-        init_bmjkdypm();
-        //中间 全市数据共享情况
-        qssjgxqk(d);
-
-        //最后启动定时
-        // t = setTimeout(time, 1000);
-        // change_se = window.setTimeout(change_twoSec,2000);
-        // change_thir = window.setTimeout(change_thirSec,3000);
+        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;
     }
-    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);
 
+    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);
 
-        var tj_gjpc =parseInt($("#tj_gjpc").text()) ;
-        if(tj_gjpc){
-            tj_gjpc+=2;
+        if (twinkle === 1 && this.alpha > 0) {
+            this.alpha -= 0.05;
+        } else if (twinkle === 2 && this.alpha < 1) {
+            this.alpha += 0.05;
         }
 
-        $("#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);
+        ctx.globalAlpha = this.alpha;
+        ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
+        this.timePassed += this.speed;
     }
-    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);
+    for (var i = 0; i < maxStars; i++) {
+        new Star();
+    }
 
-        data_szygjjk_value[0]++;
-        data_szygjjk_value[1]+=2;
-        data_szygjjk_value[3]++;
-        szy_gj(data_szygjjk_name, data_szygjjk_value);
+    function animation() {
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.globalAlpha = 0.5; //尾巴
+        ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
+        ctx.fillRect(0, 0, w, h)
 
-        data_szygxjk_value[1]++;
-        data_szygxjk_value[3]++;
-        szy_gx(data_szygxjk_name, data_szygxjk_value);
-        change_thir = window.setTimeout(change_thirSec,3000);
+        ctx.globalCompositeOperation = 'lighter';
+        for (var i = 1, l = stars.length; i < l; i++) {
+            stars[i].draw();
+        }
+        ;
+        window.requestAnimationFrame(animation);
     }
 
+    animation();
 </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>

mybusiness/src/main/resources/templates/visualization/old_visualization.html

@@ -0,0 +1,459 @@
+<!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>