修改

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test10/test10.css

@@ -1,11 +1,22 @@
-.box10 .inner a {
-  display: inline-block;
-  margin: 0.12rem;
-  width: 28%;
+.box10 .inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
 }
-.box10 .inner a img {
+.box10 .inner .imgName {
+  margin: 0.05rem;
+  width: 30%;
+  height: 28%;
+}
+.box10 .inner .imgName img {
   /* width: 1.7rem; */
+  width: 100%;
+  height: 100%;
 }
-.activeImg :hover {
-  transform: scale(1.4) !important;
+.imgName :hover {
+  transform: scale(1.1) !important;
+  /* width: 120% !important; */
 }

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test10/test10.html

@@ -13,7 +13,7 @@
       <!-- 行业单位入口 -->
       <!-- <marquee behavior="" direction="up"> -->
       <div class="inner">
-        <a href="javascript:void(0)" class="active"
+        <!-- <a href="javascript:void(0)" class="active"
           ><img class="activeImg" src="../images/stationGroup/tc2.png" alt=""
         /></a>
         <a href="javascript:void(0)" class="active"
@@ -39,7 +39,34 @@
         /></a>
         <a href="javascript:void(0)" class="active"
           ><img src="../images/stationGroup/tc13.png" alt=""
-        /></a>
+        /></a> -->
+        <div class="imgName">
+          <img src="../images/stationGroup/tc2.png" alt="" />
+        </div>
+        <div class="imgName">
+          <img src="../images/stationGroup/tc3.png" alt="" />
+        </div>
+        <div class="imgName">
+          <img src="../images/stationGroup/tc7.png" alt="" />
+        </div>
+        <div class="imgName">
+          <img src="../images/stationGroup/tc8.png" alt="" />
+        </div>
+        <div class="imgName">
+          <img src="../images/stationGroup/tc9.png" alt="" />
+        </div>
+        <div class="imgName">
+          <img src="../images/stationGroup/tc10.png" alt="" />
+        </div>
+        <div class="imgName">
+          <img src="../images/stationGroup/tc11.png" alt="" />
+        </div>
+        <div class="imgName">
+          <img src="../images/stationGroup/tc12.png" alt="" />
+        </div>
+        <div class="imgName">
+          <img src="../images/stationGroup/tc13.png" alt="" />
+        </div>
       </div>
       <!-- </marquee> -->
     </div>

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test10/test10.js

@@ -1,56 +1,56 @@
-const test10 = (function() {
+const test10 = (function () {
   function test10(id, domTitle) {
-      if (domTitle) {
-          $('.test10 .title h2').text(domTitle)
-      }
-      $('.test10 .box').css('z-index', ++zIndex)
-      $('.test10 .box').attr('data-id', id)
-      move3('.test10 .test-box')
-      move2('.test10 .containerTool')
-
+    if (domTitle) {
+      $(".test10 .title h2").text(domTitle);
+    }
+    $(".test10 .box").css("z-index", ++zIndex);
+    $(".test10 .box").attr("data-id", id);
+    move3(".test10 .test-box");
+    move2(".test10 .containerTool");
+    $(".imgName").on("click", function () {
+      window.location.href = "#";
+    });
 
-      let timer = null;
+    let timer = null;
 
+    $(".test10 .close").click(function () {
+      $(".test10 .box").remove();
+      $(".test10 .containerTool").css("display", "none");
+      $(".test10 .setWidth").val("");
+      $(".test10 .setHeight").val("");
+      moduleIdRemove.push(id);
+    });
 
+    eventClick(".test10");
+    // setCharts(`.test10 .floor-dist`);
 
-      $('.test10 .close').click(function() {
-          $('.test10 .box').remove();
-          $('.test10 .containerTool').css('display', 'none');
-          $('.test10 .setWidth').val('')
-          $('.test10 .setHeight').val('')
-          moduleIdRemove.push(id)
-      })
+    const dists = document.querySelectorAll(".test10 .floor-dist");
+    const testDoms = document.querySelectorAll(".test10 .box");
+    for (let i = 0; i < dists.length; i++) {
+      const dom = dists[i];
+      // setCharts(dom, testDoms[i]);
+    }
 
-      eventClick('.test10');
-      // setCharts(`.test10 .floor-dist`);
+    // let myChart = echarts.init(dists[0]);
 
-      const dists = document.querySelectorAll('.test10 .floor-dist');
-      const testDoms = document.querySelectorAll('.test10 .box');
-      for (let i = 0; i < dists.length; i++) {
-          const dom = dists[i];
-          // setCharts(dom, testDoms[i]);
+    window.addEventListener("resize", function () {
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
       }
-
-      // let myChart = echarts.init(dists[0]);
-
-      window.addEventListener('resize', function() {
-          if (timer) {
-              clearTimeout(timer);
-              timer = null;
-          }
-          timer = setTimeout(() => {
-              // move('.test10 .box')
-              // myChart.resize();
-          }, 500);
-      })
+      timer = setTimeout(() => {
+        // move('.test10 .box')
+        // myChart.resize();
+      }, 500);
+    });
   }
 
   function setCharts(echartDom, testDom) {
-      // 1实例化对象
-      myChart = echarts.init(echartDom);
-      let option;
-      // prettier-ignore
-      const femaleData = [
+    // 1实例化对象
+    myChart = echarts.init(echartDom);
+    let option;
+    // prettier-ignore
+    const femaleData = [
           [161.2, 51.6],
           [1610.5, 510.0],
           [1510.5, 410.2],
@@ -312,8 +312,8 @@ const test10 = (function() {
           [1104.0, 66.4],
           [163.8, 610.3]
       ];
-      // prettier-ignore
-      const maleDeta = [
+    // prettier-ignore
+    const maleDeta = [
           [1104.0, 65.6],
           [1105.3, 101.8],
           [1103.5, 80.10],
@@ -563,85 +563,90 @@ const test10 = (function() {
           [180.3, 83.2]
       ];
 
-      function calculateAverage(data, dim) {
-          let total = 0;
-          for (var i = 0; i < data.length; i++) {
-              total += data[i][dim];
-          }
-          return (total /= data.length);
+    function calculateAverage(data, dim) {
+      let total = 0;
+      for (var i = 0; i < data.length; i++) {
+        total += data[i][dim];
       }
-      const scatterOption = (option = {
-          xAxis: {
-              scale: true
+      return (total /= data.length);
+    }
+    const scatterOption = (option = {
+      xAxis: {
+        scale: true,
+      },
+      yAxis: {
+        scale: true,
+      },
+      series: [
+        {
+          type: "scatter",
+          id: "female",
+          dataGroupId: "female",
+          universalTransition: {
+            enabled: true,
+            delay: function (idx, count) {
+              return Math.random() * 400;
+            },
           },
-          yAxis: {
-              scale: true
+          data: femaleData,
+        },
+        {
+          type: "scatter",
+          id: "male",
+          dataGroupId: "male",
+          universalTransition: {
+            enabled: true,
+            delay: function (idx, count) {
+              return Math.random() * 400;
+            },
           },
-          series: [{
-                  type: 'scatter',
-                  id: 'female',
-                  dataGroupId: 'female',
-                  universalTransition: {
-                      enabled: true,
-                      delay: function(idx, count) {
-                          return Math.random() * 400;
-                      }
-                  },
-                  data: femaleData
-              },
-              {
-                  type: 'scatter',
-                  id: 'male',
-                  dataGroupId: 'male',
-                  universalTransition: {
-                      enabled: true,
-                      delay: function(idx, count) {
-                          return Math.random() * 400;
-                      }
-                  },
-                  data: maleDeta
-              }
-          ]
-      });
-      const barOption = {
-          xAxis: {
-              type: 'category',
-              data: ['Female', 'Male']
+          data: maleDeta,
+        },
+      ],
+    });
+    const barOption = {
+      xAxis: {
+        type: "category",
+        data: ["Female", "Male"],
+      },
+      yAxis: {},
+      series: [
+        {
+          type: "bar",
+          id: "total",
+          data: [
+            {
+              value: calculateAverage(maleDeta, 0),
+              groupId: "male",
+            },
+            {
+              value: calculateAverage(femaleData, 0),
+              groupId: "female",
+            },
+          ],
+          universalTransition: {
+            enabled: true,
+            seriesKey: ["female", "male"],
+            delay: function (idx, count) {
+              return Math.random() * 400;
+            },
           },
-          yAxis: {},
-          series: [{
-              type: 'bar',
-              id: 'total',
-              data: [{
-                      value: calculateAverage(maleDeta, 0),
-                      groupId: 'male'
-                  },
-                  {
-                      value: calculateAverage(femaleData, 0),
-                      groupId: 'female'
-                  }
-              ],
-              universalTransition: {
-                  enabled: true,
-                  seriesKey: ['female', 'male'],
-                  delay: function(idx, count) {
-                      return Math.random() * 400;
-                  }
-              }
-          }]
-      };
-      let currentOption = scatterOption;
-      setInterval(function() {
-          currentOption = currentOption === scatterOption ? barOption : scatterOption;
-          myChart.setOption(currentOption, true);
-      }, 2000);
-      myChart.setOption(option);
-      // obsDom(`.test10 .box`, myChart)
+        },
+      ],
+    };
+    let currentOption = scatterOption;
+    setInterval(function () {
+      currentOption =
+        currentOption === scatterOption ? barOption : scatterOption;
+      myChart.setOption(currentOption, true);
+    }, 2000);
+    myChart.setOption(option);
+    // obsDom(`.test10 .box`, myChart)
 
-      if (!testDom) {
-          testDom = document.querySelectorAll('.test10 .box');
-      }
-      obsDom(testDom, myChart)
+    if (!testDom) {
+      testDom = document.querySelectorAll(".test10 .box");
+    }
+    obsDom(testDom, myChart);
   }
-  return test10
-})();
+  return test10;
+})();

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test27/test27.js

@@ -34,7 +34,7 @@ const test27 = (function() {
     }
 
     $.ajax({
-        url: "http://23.37.100.87:8084" + "/basic/RiskType/getSysRiskType",
+        url: "http://23.37.100.80:8084" + "/basic/RiskType/getSysRiskType",
         data: {
             orgType: 1,
             riskClassify: 1

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test29/test29.js

@@ -24,7 +24,7 @@ const test29 = (function() {
         eventClick('.test29');
         // setCharts(`.test29 .floor-dist`);
         $.ajax({
-            url: "http://23.37.100.87:8084" + "/basic/AttackType/getAttackTypeBymonth",
+            url: "http://23.37.100.80:8084" + "/basic/AttackType/getAttackTypeBymonth",
             data: {
                 orgType: 1
             },

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test3/test3.html

@@ -53,11 +53,11 @@
             </div>
           </li>
           <li>
-            <p>站群总数</p>
+            <p>网站总数</p>
             <div>
               <div class="info">
                 <span class="num">9</span>
-                <span class="unit">人</span>
+                <span class="unit">个</span>
               </div>
               <div class="details">
                 <p>

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test33/test33.js

@@ -1,217 +1,289 @@
-const test33 = (function() {
-    function test33(id, domTitle) {
-        if (domTitle) {
-            $(".test33 .title h2").text(domTitle);
-        }
-        $(".test33 .box").css("z-index", ++zIndex);
-        $(".test33 .box").attr("data-id", id);
-        move3(".test33 .test-box");
-        move2(".test33 .containerTool");
+const test33 = (function () {
+  function test33(id, domTitle) {
+    if (domTitle) {
+      $(".test33 .title h2").text(domTitle);
+    }
+    $(".test33 .box").css("z-index", ++zIndex);
+    $(".test33 .box").attr("data-id", id);
+    move3(".test33 .test-box");
+    move2(".test33 .containerTool");
+
+    $(".test33 .close").click(function () {
+      $(".test33 .box").remove();
+      $(".test33 .containerTool").css("display", "none");
+      $(".test33 .setWidth").val("");
+      $(".test33 .setHeight").val("");
+      moduleIdRemove.push(id);
+    });
 
-        $(".test33 .close").click(function() {
-            $(".test33 .box").remove();
-            $(".test33 .containerTool").css("display", "none");
-            $(".test33 .setWidth").val("");
-            $(".test33 .setHeight").val("");
-            moduleIdRemove.push(id);
-        });
+    eventClick(".test33");
+    const dists = document.querySelectorAll(".test33 .floor-dist");
+    const testDoms = document.querySelectorAll(".test33 .box");
+    for (let i = 0; i < dists.length; i++) {
+      const dom = dists[i];
+      setCharts(dom, testDoms[i], []);
+    }
 
-        eventClick(".test33");
-        const dists = document.querySelectorAll(".test33 .floor-dist");
-        const testDoms = document.querySelectorAll(".test33 .box");
-        for (let i = 0; i < dists.length; i++) {
+    function test33Ajax() {
+      $.ajax({
+        url: basicUrl + "/RiskType/getSysRiskType",
+        data: {
+          orgType: 2,
+          riskClassify: 1,
+        },
+        success: function (res) {
+          console.log("系统漏洞类型", res);
+          let result = res.result;
+          const dists = document.querySelectorAll(".test33 .floor-dist");
+          const testDoms = document.querySelectorAll(".test33 .box");
+          for (let i = 0; i < dists.length; i++) {
             const dom = dists[i];
-            setCharts(dom, testDoms[i], []);
-        }
+            setCharts(dom, testDoms[i], result);
+          }
+        },
+        error: function (err) {
+          console.log("-系统漏洞类型--------------超时");
+        },
+      });
+    }
+    test33Ajax();
+    setInterval(() => {
+      test33Ajax();
+    }, 60 * 1000);
+  }
+
+  function setCharts(echartDom, testDom, result) {
+    // 1实例化对象
 
-        function test33Ajax() {
-          $.ajax({
-            url: basicUrl + "/RiskType/getSysRiskType",
-            data: {
-                orgType: 2,
-                riskClassify: 1
+    let resultArr = [];
+    let resultObj = {};
+    for (let i = 0; i < result.length; i++) {
+      resultArr.push({
+        name: result[i].risk_type,
+        value: result[i].risk_number,
+      });
+    }
+    myChart = echarts.init(echartDom);
+    var data = resultArr;
+
+    var colorList = [
+      "#408ce0",
+      "#ec9605",
+      "#f96944",
+      "#afa3f5",
+      "#00d488",
+      "#3feed4",
+      "#3bafff",
+      "#f1bb4c",
+      "#aff",
+      "#00f4fe",
+      "#91cc75",
+      "rgba(250,250,250,0.5)",
+      "#007cff",
+      "#1bdb92",
+      "#ee3d43",
+      "#ee3d43",
+      "#188da1",
+      "#10cff9",
+      "#6269e1",
+      "#f27b1f",
+      "#9a60b4",
+      "#73f7fc",
+      "#36d5ba",
+      "#329de9",
+      "#fc8452",
+      "#ee6666",
+      "#1492ff",
+      "#fac858",
+      "#91cc75",
+      "#5470c6",
+      "#73c0de",
+      "#3ba272",
+      "#0ed2ff",
+      "#fc8452",
+      "#9a60b4",
+      "#ea7ccc",
+      "#ee6666",
+      "#ffd060",
+    ];
+    option = {
+      title: {
+        subtext: "系统漏洞类型",
+        x: "center",
+        y: "53%",
+        textStyle: {
+          fontSize: 120,
+          fontWeight: "normal",
+          color: ["#333"],
+        },
+        subtextStyle: {
+          color: "#f1bb4c",
+          fontSize: 120,
+        },
+      },
+      grid: {
+        left: 0,
+        right: "10%",
+      },
+      legend: {
+        show: false,
+        orient: "vertical",
+        top: "middle",
+        left: "5%",
+        textStyle: {
+          color: "#f2f2f2",
+          fontSize: 150,
+        },
+        icon: "roundRect",
+      },
+      series: [
+        // 主要展示层的
+        {
+          radius: ["49%", "89%"],
+          center: ["50%", "50%"],
+          type: "pie",
+          top: "9%",
+          animation: true,
+          animationType: "scale",
+          animationEasing: "elasticOut",
+          animationDuration: 1000, //初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果//初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
+          animationDelay: function () {
+            return Math.random() * 200;
+          },
+
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                return colorList[params.dataIndex];
+              },
             },
-            success: function(res) {
-                console.log('系统漏洞类型', res);
-                let result = res.result;
-                const dists = document.querySelectorAll(".test33 .floor-dist");
-                const testDoms = document.querySelectorAll(".test33 .box");
-                for (let i = 0; i < dists.length; i++) {
-                    const dom = dists[i];
-                    setCharts(dom, testDoms[i], result);
-                }
+          },
+          labelLine: {
+            normal: {
+              show: true,
+              length: 200,
+              length2: 200,
+              lineStyle: {
+                width: 10, // 线条的宽度
+                color: "#3f8ac9", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
+              },
+              align: "right",
             },
-            error: function(err) {
-                console.log("-系统漏洞类型--------------超时");
+            color: "#000",
+            emphasis: {
+              show: false,
             },
-        });
-        }
-        test33Ajax();
-        setInterval(() => {
-        test33Ajax();
-        }, 60*1000);
-    }
-
-    function setCharts(echartDom, testDom, result) {
-        // 1实例化对象
+          },
+          label: {
+            normal: {
+              formatter: function (params) {
+                console.log(params);
+                var str = "";
+                switch (params.name) {
+                  case params.name:
+                    str = params.name + params.value + "%";
+                    break;
+                }
+                return str;
+              },
+              padding: [0, 0],
+              height: 55,
+              fontSize: 100,
+              rich: {
+                a: {
+                  width: 100,
+                  height: 38,
+                  lineHeight: 50,
 
-        let resultArr = [];
-        let resultObj = {};
-        for (let i = 0; i < result.length; i++) {
-            resultArr.push({
-              name:result[i].risk_type,
-              value:result[i].risk_number
-            });
-        }
-        myChart = echarts.init(echartDom);
-        var data = resultArr;
-        var color = [
-            "#ee6666",
-            "#1492ff",
-            "#fac858",
-            "#91cc75",
-            "#5470c6",
-            "#73c0de",
-            "#3ba272",
-            "#fc8452",
-            "#9a60b4",
-            "#ea7ccc",
-            "#0ed2ff",
-        ];
-        var nametext = "劳务用工";
-        option = {
-            color: color,
-            title: {
-                show: false,
-                text: nametext,
-                subtext: "122",
-                textAlign: "right",
-                textVerticalAlign: "middle",
-                textStyle: {
-                    fontSize: 120,
-                    lineheight: 130,
-                    color: "#1492ff",
-                    fontStyle: "normal",
+                  align: "left",
                 },
-                subtextStyle: {
-                    color: "#1492ff",
-                    fontSize: 116,
-                    fontWeight: "bold",
-                    padding: [0, 200, 0, 10],
+                b: {
+                  width: 100,
+                  height: 45,
+                  lineHeight: 50,
+                  align: "left",
                 },
-                left: "30%",
-                top: "center",
-            },
-            legend: {
-                orient: "vertical",
-                right: "5%",
-                bottom: "center",
-                itemWidth: 114,
-                itemGap: 112,
-                selectedMode: false,
-                textStyle: {
-                    rich: {
-                        a: {
-                            color: "#1492ff",
-                            fontSize: 116,
-                            width: 100,
-                            padding: [0, 10, 0, 0],
-                        },
-                        b: {
-                            color: "#1492ff",
-                            fontSize: 116,
-                            fontWeight: "bold",
-                            padding: [0, 80, 0, 10],
-                        },
-                    },
+                c: {
+                  width: 100,
+                  height: 33,
+                  lineHeight: 50,
+
+                  align: "left",
                 },
-                formatter: function(name) {
-                    var target, unit;
-                    for (var i = 0, l = data.length; i < l; i++) {
-                        if (data[i].name == name) {
-                            target = data[i].value;
-                            unit = data[i].unit;
-                        }
-                    }
-                    return `{a| ${name}}\n{b|${target}}`;
+                d: {
+                  width: 100,
+                  height: 44,
+                  lineHeight: 50,
+                  align: "left",
                 },
-            },
-            series: [{
-                name: "漏洞总数",
-                type: "pie",
-                radius: ["40%", "80%"],
-                center: ["30%", "50%"],
-                minAngle: 30,
-                avoidLabelOverlap: false,
-                hoverAnimation: false,
-                label: {
-                    normal: {
-                        show: false,
-                        position: "center",
-                        formatter: "{b}\n{c}",
-                        textStyle: {
-
-                             fontSize: 120,
-                            fontWeight: "bold",
-                            color: "#fff",
-                        },
-                    },
-                    emphasis: {
-                        show: true,
-                        textStyle: {
-                            fontSize: 120,
-                            fontWeight: "bold",
-                        },
-                        formatter: function(params) {
-                            return `{a| ${params.name}}\n{b|${params.value}}`;
-                        },
-                        rich: {
-                            a: {
-                                color: "#1492ff",
-                                fontSize: 120,
-                                lineHeight: 125,
-                            },
-                            b: {
-                                color: "#1492ff",
-                                fontSize: 120,
-                                fontWeight: "bold",
-                                lineHeight: 125,
-                            },
-                        },
-                    },
+                e: {
+                  width: 100,
+                  height: 30,
+                  lineHeight: 50,
+                  align: "left",
                 },
-                labelLine: {
-                    normal: {
-                        show: false,
-                    },
+                nameStyle: {
+                  fontSize: 120,
+                  color: "#555",
+                  align: "left",
                 },
-                data: data,
-            }, ],
-        };
-
-        // var that=this
-        // this.ChartPie.on('mouseover', { seriesName:'lwyg'},function(params) {
-        //     that.ChartPie.setOption({
-        //         title:{
-        //             show:false
-        //         }
-        //     })
-        // });
-        // this.ChartPie.on('mouseout', { seriesName:'lwyg'},function(params) {
-        //     that.ChartPie.setOption({
-        //         title:{
-        //             show:true
-        //         }
-        //     })
-        // })
+                rate: {
+                  fontSize: 130,
+                  color: "#1ab4b8",
+                  align: "left",
+                },
+              },
+            },
+          },
+          data: data,
+        },
+        // 边框的设置
+        // {
+        //   radius: ["55%", "59%"],
+        //   center: ["50%", "50%"],
+        //   type: "pie",
+        //   top: "9%",
+        //   label: {
+        //     normal: {
+        //       show: true,
+        //     },
+        //     emphasis: {
+        //       show: true,
+        //     },
+        //   },
+        //   labelLine: {
+        //     normal: {
+        //       show: true,
+        //     },
+        //     emphasis: {
+        //       show: true,
+        //     },
+        //   },
+        //   animation: true,
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   itemStyle: {
+        //     normal: {
+        //       color: "rgba(250,250,250,0.5)",
+        //     },
+        //   },
+        //   data: [
+        //     {
+        //       value: 1,
+        //     },
+        //   ],
+        // },
+      ],
+    };
 
-        if (option) {
-            myChart.setOption(option);
-        }
-        if (!testDom) {
-            testDom = document.querySelectorAll(".test33 .box");
-        }
-        obsDom(testDom, myChart);
+    if (option) {
+      myChart.setOption(option);
+    }
+    if (!testDom) {
+      testDom = document.querySelectorAll(".test33 .box");
     }
-    return test33;
-})();
+    obsDom(testDom, myChart);
+  }
+  return test33;
+})();

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test34/test34 copy.js

@@ -21,7 +21,7 @@ const test34 = (function() {
 
 
         $.ajax({
-            url: "http://23.37.100.87:8084" + "/basic/RiskNews/getRiskNewsByInfo",
+            url: "http://23.37.100.80:8084" + "/basic/RiskNews/getRiskNewsByInfo",
             data: {},
             success: function(res) {
                 console.log('漏洞情报', res);

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test35/test35.js

@@ -26,9 +26,10 @@ const test35 = (function () {
         success: function (res) {
           console.log("漏洞趋势", res);
           let bac = res.result;
-          bac.sort((a, b) => { // 升序
+          bac.sort((a, b) => {
+            // 升序
             return +a.month - +b.month;
-        })
+          });
           const dists = document.querySelectorAll(".test35 .floor-dist");
           const testDoms = document.querySelectorAll(".test35 .box");
           for (let i = 0; i < dists.length; i++) {
@@ -43,8 +44,8 @@ const test35 = (function () {
     }
     test35Ajax();
     setInterval(() => {
-      test35Ajax()
-    }, 120*1000);
+      test35Ajax();
+    }, 120 * 1000);
   }
 
   function setCharts(echartDom, testDom, bac) {
@@ -53,20 +54,29 @@ const test35 = (function () {
     // 中危漏洞数
     let countMiddleRiskArr = [];
     let countHighRiskArr = [];
-    const dataMonth = []
+    const dataMonth = [];
     for (let i = 0; i < bac.length; i++) {
       countMiddleRiskArr.push(bac[i].countMiddleRisk);
       countHighRiskArr.push(bac[i].countHighRisk);
-      dataMonth.push(bac[i].month + '月')
+      dataMonth.push(bac[i].month + "月");
     }
     myChart = echarts.init(echartDom);
     let option = {
       tooltip: {
         trigger: "axis",
-        padding: [0, 80, 0, 10],
-        lineHeight: 125,
-        // padding:100,
-        // formatter:'{b}<br>{c}{a}'
+        renderMode: "html",
+        // // padding: [0, 0, 100, 10],
+        textStyle: {
+          color: "#FFF", // 文字的颜色
+          fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
+          fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
+          fontSize: "50", // 文字字体大小
+          lineHeight: 100, // 行高
+          // padding: 100,
+        },
+        // // extraCssText: "letter-spacing:20px;",
+        // padding: 100,
+        // distance: 128,
         formatter: function (arg) {
           let str = "";
           for (let i = 0; i < arg.length; i++) {
@@ -76,7 +86,7 @@ const test35 = (function () {
         },
       },
       legend: {
-        top: "-2%",
+        top: "5%",
         itemWidth: 200,
         itemHeight: 50,
         data: ["高风险", "中风险", "低风险", "直接访问", "搜索引擎"],
@@ -92,8 +102,10 @@ const test35 = (function () {
         top: "100",
         right: "100",
         bottom: "50",
-        containLabel: true
-    },
+        avoidLabelOverlap: true,
+
+        containLabel: true,
+      },
       xAxis: [
         {
           type: "category",

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test4/test4.css

@@ -27,6 +27,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin-left: -5%;
 }
 .num {
   font-family: "LESLIE";

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test43/test43.js

@@ -1,343 +1,343 @@
-const test43 = (function() {
-
-    function test43(id, domTitle) {
-        if (domTitle) {
-            $('.test43 .title h2').text(domTitle)
-        }
-        $('.test43 .box').css('z-index', ++zIndex)
-        $('.test43 .box').attr('data-id', id)
-        move3('.test43 .test-box')
-        move2('.test43 .containerTool')
-
-        $('.test43 .close').click(function() {
-            $('.test43 .box').remove();
-            $('.test43 .containerTool').css('display', 'none');
-            $('.test43 .setWidth').val('')
-            $('.test43 .setHeight').val('')
-            moduleIdRemove.push(id)
-        })
-
-        eventClick('.test43');
-
-
-
-        $('.box43 .content ul li').click(function() {
-            $('.detailsToos').slideToggle()
-            $('.meng').slideToggle('nomal');
-            const id = $(this).attr('data-id');
-            getListsData(id);
-            getDatileData(id);
-            setTimeout(() => {
-                setChartsDom(document.querySelector('.charts1'),0)
-            }, 500);  
-
-            setTimeout(() => {
-                setChartsDom(document.querySelector('.charts2'),0)
-            }, 1000);
-
-
-            setTimeout(() => {
-                setChartsDom(document.querySelector('.charts3'),0)
-            }, 1500);
-        })
-
-        basicCondition();
-        select();
-
-    }
-
-
-
-    // 基本状况
-    function basicCondition() {
-
-        const doms = {
-            // 网络设备
-            network: $('.box43 .network_count'),
-            // 服务器
-            server: $('.box43 .server_count'),
-            // 应用系统
-            app_system: $('.box43 .app_system_count'),
-            // 应用服务器
-            app_server: $('.box43 .app_server_count'),
-            // 数据库
-            database: $('.box43 .databae_count'),
-            // 安全设备
-            safety: $('.box43 .safety_count')
-        };
-
-        $.ajax({
-            url: baseURL + `/selectBasicStatus`,
-            type: 'GET',
-            dataType: 'JSON',
-            success: function(res) {
-                console.log('基本状况', res);
-                let basicData = res.data;
-                doms.network.html(basicData.networkEquipment) // 网络设备
-                doms.server.html(basicData.server) // 服务器
-                doms.app_system.html(basicData.utilitySystem) // 应用系统
-                doms.app_server.html(basicData.applicationServer) // 应用服务器
-                doms.database.html(basicData.database) // 数据库
-                doms.safety.html(basicData.safety) // 安全设备
-            },
-            error: function(err) {
-                console.log('基本状况请求超时');
-            }
-        });
-    }
-
-
-
-    function select() {
-        $(document).click(function() {
-            $(".select_module_con ul").slideUp();
-        })
-        var module = $(".select_result");
-        var ul = module.next();
-        ul.children().click(function(e) {
-            e.stopPropagation();
-            const id = $(this).attr('data-id');
-            getListsData(id);
-            getDatileData(id);
-            $(this).parent().prev().children("span").text($(this).text());
-            ul.stop().slideUp();
-        })
-        module.click(function(e) {
-            e.stopPropagation();
-            ul.stop().slideToggle();
-        })
-    }
-
-    /**
-     * 获取资源列表
-     */
-    function getListsData(id) {
-        $.ajax({
-            url: baseURL + `/selectNResMgtByresTypeIds`,
-            type: 'POST',
-            dataType: 'JSON',
-            data: {
-                unitName: '城市管理局',
-                resTypeIds: id
-            },
-            success: function(res) {
-                console.log('基本情况弹框列表', res);
-                createDom(res.data);
-            },
-            error: function(err) {
-                console.log('基本情况弹框列表请求超时');
-            }
-        });
-    }
-
-    function createDom(data) {
-        const title = `<div class="detail-title" style="text-align: center;background: #5f89bd66; padding-top: 0.1rem;">资源名称</div>
-        `
-        const doms = data.map(item => {
-            $('.info-name').html(item.resName)
-            $('.info-type').html(item.resTypeName)
-            $('.info-ip').html(item.management.ManagementIp)
-            $('.info-on-line').html(item.management.managementStatus === '2' ? '在线' : '离线 ')
-            return `
-              <div class="item">
-                <div>${item.resName}</div>
-              </div>`
-        }).join('')
-
-
-        $('.detail-container').html(title + doms);
-        $('.detailsToos .detail-container .item').click(function() {
-            $('.detailsToos .detail-container .item').removeClass('active')
-            $(this).addClass('active')
-        })
-    }
-
-
-    /**
-     * 获取单个资源的详细信息
-     * @param {*} id 
-     */
-    function getDatileData(id) {
-        $.ajax({
-            url: baseURL + `/getConMgtdetailById`,
-            type: 'GET',
-            dataType: 'JSON',
-            data: {
-                unitName: '城市管理局',
-                resTypeIds: id
-            },
-            success: function(res) {
-                if (res.code !== 0) {
-                    console.log('获取单个资源的详细信息失败', res.msg);
-                    return
-                }
-                const data = res.data.data;
-                $('.info-timer').html(data.info.runTime);
-                const arr = data.seriesData;
-                $('.item1 span').html(arr[0].name);
-                $('.item2 span').html(arr[1].name);
-                $('.item3 span').html(arr[2].name);
-                const data1 = arr[0].data[0];
-                const data2 = arr[0].data[1];
-                const data3 = arr[0].data[2];
-                console.log('获取单个资源的详细信息', data1, data2, data3, arr);
-
-              //   setTimeout(() => {
-              //     setChartsDom(document.querySelector('.charts1'),data1)
-              // }, 500);
-  
-              // setTimeout(() => {
-              //     setChartsDom(document.querySelector('.charts2'),data2)
-              // }, 1000);
-  
-  
-              // setTimeout(() => {
-              //     setChartsDom(document.querySelector('.charts3'),data3)
-              // }, 1500);
-            },
-            error: function(err) {
-                console.log('获取单个资源的详细信息超时');
-            }
-        });
-    }
-
-
-    function setChartsDom(echartDom, data) {
-        const myChart = echarts.init(echartDom);
-        const option = {
-            series: [{
-                type: 'gauge',
-                z: 100,
-                axisLine: {
-                    lineStyle: {
-                        width: 5,
-                        color: [
-                            [
-                                0.3, new echarts.graphic.LinearGradient(
-                                    0, 1, 1, 0, [{
-                                            offset: 0,
-                                            color: 'rgba(0, 237, 3,0.1)',
-                                        }, {
-                                            offset: 0.5,
-                                            color: 'rgba(0, 237, 3,0.6)',
-                                        },
-                                        {
-                                            offset: 1,
-                                            color: 'rgba(0, 237, 3,1)',
-                                        }
-                                    ]
-                                )
-                            ],
-                            [
-                                0.7, new echarts.graphic.LinearGradient(
-                                    0, 1, 1, 0, [{
-                                            offset: 0,
-                                            color: 'rgba(255, 184, 0,0.1)',
-                                        }, {
-                                            offset: 0.5,
-                                            color: 'rgba(255, 184, 0,0.6)',
-                                        },
-                                        {
-                                            offset: 1,
-                                            color: 'rgba(255, 184, 0,1)',
-                                        }
-                                    ]
-                                )
-                            ],
-                            [
-                                1, new echarts.graphic.LinearGradient(
-                                    0, 1, 1, 0, [{
-                                            offset: 0,
-                                            color: 'rgba(175, 36, 74,0.1)',
-                                        }, {
-                                            offset: 0.5,
-                                            color: 'rgba(255, 36, 74,0.6)',
-                                        },
-                                        {
-                                            offset: 1,
-                                            color: 'rgba(255, 36, 74,1)',
-                                        }
-                                    ]
-                                )
-                            ]
-                        ],
-                    }
-                },
-                // radius: '50%',
-                pointer: {
-                    itemStyle: {
-                        color: 'auto'
-                    }
-                },
-                axisTick: {
-                    distance: 0,
-                    length: 8,
-                    lineStyle: {
-                        color: 'auto',
-                        width: 2
-                    }
-                },
-                splitLine: {
-                    distance: 0,
-                    length: 20,
-                    lineStyle: {
-                        color: 'auto',
-                        width: 4
-                    }
-                },
-                axisLabel: {
-                    color: 'white',
-                    distance: 30,
-                    fontSize: 110
-                },
-                detail: {
-                    valueAnimation: true,
-                    formatter: '{value} %',
-                    color: 'white',
-                    fontSize:100
-                },
-                data: [{
-                    value: data
-                }]
-            }, ]
-        };
-
-
-        if (option) {
-            myChart.setOption(option);
-        }
-    }
-
-
-
-    function setCarousel() {
-        $('.detail-container').carousel({
-            // 宽
-            // width: '100%',
-            // 高
-            height: 300,
-            // 图片内容
-            content: $('.detail-container .item'),
-            // 是否自动播放
-            isPlay: false,
-            // 是否显示圆点
-            navShow: true,
-            // 圆点位置
-            navPosition: 'center',
-            // 圆点大小
-            navSize: '0.2rem',
-            // 圆点激活状态时的颜色
-            navActiveColor: 'rgb(62 206 225)',
-            // 圆点未激活状态时的颜色
-            navColor: 'rgb(31 209 197 / 50%)',
-            // 翻页显示方式
-            changeBtn: 'hover', //hover（移入显示） hide（不显示） always（一直显示）
-            // 播放时间
-            duration: 3000,
-            // 轮播方式
-            type: 'animate', //fade animate
-        });
-    }
-
-    return test43
+const test43 = (function() {
+
+    function test43(id, domTitle) {
+        if (domTitle) {
+            $('.test43 .title h2').text(domTitle)
+        }
+        $('.test43 .box').css('z-index', ++zIndex)
+        $('.test43 .box').attr('data-id', id)
+        move3('.test43 .test-box')
+        move2('.test43 .containerTool')
+
+        $('.test43 .close').click(function() {
+            $('.test43 .box').remove();
+            $('.test43 .containerTool').css('display', 'none');
+            $('.test43 .setWidth').val('')
+            $('.test43 .setHeight').val('')
+            moduleIdRemove.push(id)
+        })
+
+        eventClick('.test43');
+
+
+
+        $('.box43 .content ul li').click(function() {
+            $('.detailsToos').slideToggle()
+            $('.meng').slideToggle('nomal');
+            const id = $(this).attr('data-id');
+            getListsData(id);
+            getDatileData(id);
+            setTimeout(() => {
+                setChartsDom(document.querySelector('.charts1'),0)
+            }, 500);  
+
+            setTimeout(() => {
+                setChartsDom(document.querySelector('.charts2'),0)
+            }, 1000);
+
+
+            setTimeout(() => {
+                setChartsDom(document.querySelector('.charts3'),0)
+            }, 1500);
+        })
+
+        basicCondition();
+        select();
+
+    }
+
+
+
+    // 基本状况
+    function basicCondition() {
+
+        const doms = {
+            // 网络设备
+            network: $('.box43 .network_count'),
+            // 服务器
+            server: $('.box43 .server_count'),
+            // 应用系统
+            app_system: $('.box43 .app_system_count'),
+            // 应用服务器
+            app_server: $('.box43 .app_server_count'),
+            // 数据库
+            database: $('.box43 .databae_count'),
+            // 安全设备
+            safety: $('.box43 .safety_count')
+        };
+
+        $.ajax({
+            url: baseURL + `/selectBasicStatus`,
+            type: 'GET',
+            dataType: 'JSON',
+            success: function(res) {
+                console.log('基本状况', res);
+                let basicData = res.data;
+                doms.network.html(basicData.networkEquipment) // 网络设备
+                doms.server.html(basicData.server) // 服务器
+                doms.app_system.html(basicData.utilitySystem) // 应用系统
+                doms.app_server.html(basicData.applicationServer) // 应用服务器
+                doms.database.html(basicData.database) // 数据库
+                doms.safety.html(basicData.safety) // 安全设备
+            },
+            error: function(err) {
+                console.log('基本状况请求超时');
+            }
+        });
+    }
+
+
+
+    function select() {
+        $(document).click(function() {
+            $(".select_module_con ul").slideUp();
+        })
+        var module = $(".select_result");
+        var ul = module.next();
+        ul.children().click(function(e) {
+            e.stopPropagation();
+            const id = $(this).attr('data-id');
+            getListsData(id);
+            getDatileData(id);
+            $(this).parent().prev().children("span").text($(this).text());
+            ul.stop().slideUp();
+        })
+        module.click(function(e) {
+            e.stopPropagation();
+            ul.stop().slideToggle();
+        })
+    }
+
+    /**
+     * 获取资源列表
+     */
+    function getListsData(id) {
+        $.ajax({
+            url: baseURL + `/selectNResMgtByresTypeIds`,
+            type: 'POST',
+            dataType: 'JSON',
+            data: {
+                unitName: '城市管理局',
+                resTypeIds: id
+            },
+            success: function(res) {
+                console.log('基本情况弹框列表', res);
+                createDom(res.data);
+            },
+            error: function(err) {
+                console.log('基本情况弹框列表请求超时');
+            }
+        });
+    }
+
+    function createDom(data) {
+        const title = `<div class="detail-title" style="text-align: center;background: #5f89bd66; padding-top: 0.1rem;">资源名称</div>
+        `
+        const doms = data.map(item => {
+            $('.info-name').html(item.resName)
+            $('.info-type').html(item.resTypeName)
+            $('.info-ip').html(item.management.ManagementIp)
+            $('.info-on-line').html(item.management.managementStatus === '2' ? '在线' : '离线 ')
+            return `
+              <div class="item">
+                <div>${item.resName}</div>
+              </div>`
+        }).join('')
+
+
+        $('.detail-container').html(title + doms);
+        $('.detailsToos .detail-container .item').click(function() {
+            $('.detailsToos .detail-container .item').removeClass('active')
+            $(this).addClass('active')
+        })
+    }
+
+
+    /**
+     * 获取单个资源的详细信息
+     * @param {*} id 
+     */
+    function getDatileData(id) {
+        $.ajax({
+            url: baseURL + `/getConMgtdetailById`,
+            type: 'GET',
+            dataType: 'JSON',
+            data: {
+                unitName: '城市管理局',
+                resTypeIds: id
+            },
+            success: function(res) {
+                if (res.code !== 0) {
+                    console.log('获取单个资源的详细信息失败', res.msg);
+                    return
+                }
+                const data = res.data.data;
+                $('.info-timer').html(data.info.runTime);
+                const arr = data.seriesData;
+                $('.item1 span').html(arr[0].name);
+                $('.item2 span').html(arr[1].name);
+                $('.item3 span').html(arr[2].name);
+                const data1 = arr[0].data[0];
+                const data2 = arr[0].data[1];
+                const data3 = arr[0].data[2];
+                console.log('获取单个资源的详细信息', data1, data2, data3, arr);
+
+              //   setTimeout(() => {
+              //     setChartsDom(document.querySelector('.charts1'),data1)
+              // }, 500);
+  
+              // setTimeout(() => {
+              //     setChartsDom(document.querySelector('.charts2'),data2)
+              // }, 1000);
+  
+  
+              // setTimeout(() => {
+              //     setChartsDom(document.querySelector('.charts3'),data3)
+              // }, 1500);
+            },
+            error: function(err) {
+                console.log('获取单个资源的详细信息超时');
+            }
+        });
+    }
+
+
+    function setChartsDom(echartDom, data) {
+        const myChart = echarts.init(echartDom);
+        const option = {
+            series: [{
+                type: 'gauge',
+                z: 100,
+                axisLine: {
+                    lineStyle: {
+                        width: 15,
+                        color: [
+                            [
+                                0.3, new echarts.graphic.LinearGradient(
+                                    0, 1, 1, 0, [{
+                                            offset: 0,
+                                            color: 'rgba(0, 237, 3,0.1)',
+                                        }, {
+                                            offset: 0.5,
+                                            color: 'rgba(0, 237, 3,0.6)',
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: 'rgba(0, 237, 3,1)',
+                                        }
+                                    ]
+                                )
+                            ],
+                            [
+                                0.7, new echarts.graphic.LinearGradient(
+                                    0, 1, 1, 0, [{
+                                            offset: 0,
+                                            color: 'rgba(255, 184, 0,0.1)',
+                                        }, {
+                                            offset: 0.5,
+                                            color: 'rgba(255, 184, 0,0.6)',
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: 'rgba(255, 184, 0,1)',
+                                        }
+                                    ]
+                                )
+                            ],
+                            [
+                                1, new echarts.graphic.LinearGradient(
+                                    0, 1, 1, 0, [{
+                                            offset: 0,
+                                            color: 'rgba(175, 36, 74,0.1)',
+                                        }, {
+                                            offset: 0.5,
+                                            color: 'rgba(255, 36, 74,0.6)',
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: 'rgba(255, 36, 74,1)',
+                                        }
+                                    ]
+                                )
+                            ]
+                        ],
+                    }
+                },
+                // radius: '50%',
+                pointer: {
+                    itemStyle: {
+                        color: 'auto'
+                    }
+                },
+                axisTick: {
+                    distance: 0,
+                    length: 8,
+                    lineStyle: {
+                        color: 'auto',
+                        width: 2
+                    }
+                },
+                splitLine: {
+                    distance: 0,
+                    length: 20,
+                    lineStyle: {
+                        color: 'auto',
+                        width: 4
+                    }
+                },
+                axisLabel: {
+                    color: 'white',
+                    distance: 30,
+                    fontSize: 110
+                },
+                detail: {
+                    valueAnimation: true,
+                    formatter: '{value} %',
+                    color: 'white',
+                    fontSize:100
+                },
+                data: [{
+                    value: data
+                }]
+            }, ]
+        };
+
+
+        if (option) {
+            myChart.setOption(option);
+        }
+    }
+
+
+
+    function setCarousel() {
+        $('.detail-container').carousel({
+            // 宽
+            // width: '100%',
+            // 高
+            height: 300,
+            // 图片内容
+            content: $('.detail-container .item'),
+            // 是否自动播放
+            isPlay: false,
+            // 是否显示圆点
+            navShow: true,
+            // 圆点位置
+            navPosition: 'center',
+            // 圆点大小
+            navSize: '0.2rem',
+            // 圆点激活状态时的颜色
+            navActiveColor: 'rgb(62 206 225)',
+            // 圆点未激活状态时的颜色
+            navColor: 'rgb(31 209 197 / 50%)',
+            // 翻页显示方式
+            changeBtn: 'hover', //hover（移入显示） hide（不显示） always（一直显示）
+            // 播放时间
+            duration: 3000,
+            // 轮播方式
+            type: 'animate', //fade animate
+        });
+    }
+
+    return test43
 })();

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test49/test49.css

@@ -23,7 +23,7 @@
 }
 
 .box49 .content-left {
-    margin-right: 0.5rem;
+    margin-right: 0.1rem;
 }
 
 .box49 table {

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test50/test50.css

@@ -4,21 +4,25 @@
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
-  margin: 0;
-  padding: 0 0.1rem;
-  padding-right: 1rem;
+  display: flex;
 }
-.box50 .content .item {
+.itemBox {
+  width: 100%;
+  height: 100%;
   display: flex;
+  margin-left: 3%;
+}
+.box50 .content .item {
+  /* display: flex; */
   align-items: center;
   /* font-size: 0.3rem; */
-  width: 43%;
-  height: 48%;
+  width: 50%;
+  height: 100%;
   margin-top: 1%;
 }
 .box50 .content .item img {
-  width: 70%;
-  height: 92%;
+  width: 90%;
+  height: 80%;
   margin: 0 0.1rem;
 }
 .box50 .content .item .item-box {
@@ -27,16 +31,30 @@
   justify-content: center;
   padding-right: 0.2rem;
 }
-.box50 .content .item .item-box div:nth-child(1) {
-  background-image: linear-gradient(45deg, #2dced9a1, transparent);
+.box50 .content .item .item-box .item-name {
+  /* background-image: linear-gradient(45deg, #2dced9a1, transparent); */
+  background-color: #2dced9a1;
   font-size: 0.15rem !important;
-  width: 145%;
+  width: 50%;
+  margin: auto;
+  margin-top: 2%;
+  margin-bottom: 2%;
+  text-align: center;
 }
 .box50 .content .item .item-box .temp {
   display: flex;
-  width: 145%;
+  width: 20%;
   justify-content: space-between;
-  position: relative;
+}
+.tempText {
+  position: absolute;
+  top: 75%;
+  left: 17%;
+}
+.tempTextTwo {
+  position: absolute;
+  top: 75%;
+  left: 67%;
 }
 .box50 .content .item .item-box .temp p {
   font-size: 0.25rem;
@@ -71,4 +89,17 @@
 @font-face {
   font-family: "LESLIE";
   src: url("../../font/LESLIE.TTF");
-}
+}
+.prev {
+  position: absolute;
+  top: 50%;
+  font-size: 0.5rem !important;
+  display: none;
+}
+.next {
+  position: absolute;
+  top: 50%;
+  right: -1%;
+  font-size: 0.5rem !important;
+  display: none;
+}

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test50/test50.html

@@ -10,66 +10,67 @@
   </div>
   <div class="test-box">
     <!-- <marquee behavior="scroll" direction="up" height="100%"> -->
-    <marquee
-      behavior=""
-      direction="up"
-      scrollamount="4"
-      ONMOUSEOUT="this.start()"
-      ONMOUSEOVER="this.stop()"
-    >
-      <div class="content">
+
+    <div class="content contentBox_five">
+      <div class="prev"><</div>
+      <div class="next">></div>
+      <div class="itemBox">
         <div class="item" data-id="1">
-          <img src="../images/networkSecurity/pic_kuang.png" alt="" />
           <div class="item-box">
-            <div>网络核心机房</div>
-            <div class="temp">
+            <div class="item-name">网络核心机房</div>
+            <div class="temp tempText">
               <p>温度：<span>25℃</span></p>
               <p>湿度：<span>25℃</span></p>
             </div>
           </div>
+          <img src="../images/networkSecurity/网络核心机房.png" alt="" />
         </div>
         <div class="item" data-id="2">
-          <img src="../images/networkSecurity/pic_kuang.png" alt="" />
           <div class="item-box">
-            <div>2号楼中心机房</div>
-            <div class="temp">
+            <div class="item-name">2号楼中心机房</div>
+            <div class="temp tempTextTwo">
               <p>温度：<span>25℃</span></p>
               <p>湿度：<span>25℃</span></p>
             </div>
           </div>
+          <img src="../images/networkSecurity/二号楼中心机房.png" alt="" />
         </div>
+      </div>
+      <div class="itemBox">
         <div class="item" data-id="3">
-          <img src="../images/networkSecurity/pic_kuang.png" alt="" />
           <div class="item-box">
-            <div>配线间机房</div>
-            <div class="temp">
+            <div class="item-name">配线间机房</div>
+            <div class="temp tempText">
               <p>温度：<span>25℃</span></p>
               <p>湿度：<span>25℃</span></p>
             </div>
           </div>
+          <img src="../images/networkSecurity/配电间机房.png" alt="" />
         </div>
         <div class="item" data-id="4">
-          <img src="../images/networkSecurity/pic_kuang.png" alt="" />
           <div class="item-box">
-            <div>档案库房</div>
-            <div class="temp">
+            <div class="item-name">档案库房</div>
+            <div class="temp tempTextTwo">
               <p>温度：<span>25℃</span></p>
               <p>湿度：<span>25℃</span></p>
             </div>
           </div>
+          <img src="../images/networkSecurity/档案库房.png" alt="" />
         </div>
+      </div>
+      <div class="itemBox">
         <div class="item" data-id="5">
-          <img src="../images/networkSecurity/pic_kuang.png" alt="" />
           <div class="item-box">
-            <div>UPS供电机房</div>
-            <div class="temp">
+            <div class="item-name">UPS供电机房</div>
+            <div class="temp tempText">
               <p>温度：<span>25℃</span></p>
               <p>湿度：<span>25℃</span></p>
             </div>
           </div>
+          <img src="../images/networkSecurity/UPS供电机房.png" alt="" />
         </div>
       </div>
-    </marquee>
+    </div>
 
     <!-- </marquee> -->
   </div>
@@ -95,3 +96,48 @@
     <button class="offBtn toolBtn">取消</button>
   </div>
 </div>
+<script>
+  var index = 0;
+  //3秒轮播一次
+  var timer = setInterval(function () {
+    index = index == 2 ? 0 : index + 1;
+    //某个div显示，其他的隐藏
+    $(".itemBox").hide().eq(index).show();
+    $(".prev").on("click", function () {
+      $(".itemBox")
+        .hide()
+        .eq(index - 1)
+        .show();
+    });
+    $(".next").on("click", function () {
+      $(".itemBox")
+        .hide()
+        .eq(index + 1)
+        .show();
+    });
+  }, 3000);
+  $(function () {
+    //显示隐藏
+    $(".contentBox_five")
+      .mouseover(function () {
+        //鼠标移入
+        $(".next").show(); //显示
+      })
+      .mouseout(function () {
+        //鼠标移出
+        $(".next").hide(); //隐藏
+      });
+  });
+  $(function () {
+    //显示隐藏
+    $(".contentBox_five")
+      .mouseover(function () {
+        //鼠标移入
+        $(".prev").show(); //显示
+      })
+      .mouseout(function () {
+        //鼠标移出
+        $(".prev").hide(); //隐藏
+      });
+  });
+</script>

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test50/test50.js

@@ -1,5 +1,5 @@
 const test50 = (function () {
-  function test50 (id, domTitle) {
+  function test50(id, domTitle) {
     if (domTitle) {
       $(".test50 .title h2").text(domTitle);
     }
@@ -16,28 +16,9 @@ const test50 = (function () {
       moduleIdRemove.push(id);
     });
     eventClick(".test50");
-    // var speed = 40;
-    // var slide = document.getElementById("slide");
-    // var slide2 = document.getElementById("slide2");
-    // var slide1 = document.getElementById("slide1");
-    // slide2.innerHTML = slide1.innerHTML;
-    // function Marquee() {
-    //   if (slide2.offsetTop - slide.scrollTop <= 0)
-    //     slide.scrollTop -= slide1.offsetHeight;
-    //   else {
-    //     slide.scrollTop++;
-    //   }
-    // }
-    // var MyMar = setInterval(Marquee, speed);
-    // slide.onmouseover = function () {
-    //   clearInterval(MyMar);
-    // };
-    // slide.onmouseout = function () {
-    //   MyMar = setInterval(Marquee, speed);
-    // };
 
     // 二号楼中心机房
-    function roomAjax1 () {
+    function roomAjax1() {
       $.ajax({
         url: ROOM + "/api/devicesignaltable/listByName",
         data: {
@@ -73,14 +54,14 @@ const test50 = (function () {
     }
 
     // 网络核心机房
-    function roomAjax2 () {
+    function roomAjax2() {
       $.ajax({
         url: ROOM + "/api/devicesignaltable/listByName",
         data: {
           deviceName: "四楼",
         },
         success: function ({ data }) {
-          console.log('网络核心机房', data);
+          console.log("网络核心机房", data);
           // 温度
           let temperature = data.filter((item) => {
             return item.signalname === "温度";
@@ -110,7 +91,7 @@ const test50 = (function () {
     }
 
     // 配线间机房
-    function roomAjax3 () {
+    function roomAjax3() {
       $.ajax({
         url: ROOM + "/api/devicesignaltable/listByName",
         data: {
@@ -145,7 +126,7 @@ const test50 = (function () {
     }
 
     // 档案室库房
-    function roomAjax4 () {
+    function roomAjax4() {
       $.ajax({
         /** url，data参数，
          * type请求类型，响应体结果，超时时间
@@ -198,11 +179,11 @@ const test50 = (function () {
       });
     }
 
-    function roomAjaxInit () {
-      roomAjax1()
-      roomAjax2()
-      roomAjax3()
-      roomAjax4()
+    function roomAjaxInit() {
+      roomAjax1();
+      roomAjax2();
+      roomAjax3();
+      roomAjax4();
     }
 
     roomAjaxInit();
@@ -243,7 +224,7 @@ const test50 = (function () {
       }
 
       // 二号楼中心机房
-      function eighthFloor () {
+      function eighthFloor() {
         $.ajax({
           url: ROOM + "/api/devicesignaltable/listByName",
           data: {
@@ -307,7 +288,7 @@ const test50 = (function () {
       }
 
       // 网络核心机房
-      function fourthFloor () {
+      function fourthFloor() {
         $.ajax({
           url: ROOM + "/api/devicesignaltable/listByName",
           data: {
@@ -399,7 +380,7 @@ const test50 = (function () {
       }
 
       // 配线间机房
-      function ninthFloor () {
+      function ninthFloor() {
         $.ajax({
           url: ROOM + "/api/devicesignaltable/listByName",
           data: {
@@ -462,7 +443,7 @@ const test50 = (function () {
       }
 
       // 档案室库房
-      function dasRoom () {
+      function dasRoom() {
         $.ajax({
           /** url，data参数，
            * type请求类型，响应体结果，超时时间
@@ -533,7 +514,7 @@ const test50 = (function () {
       }
 
       // UPS供电机房
-      function upsOf () {
+      function upsOf() {
         $.ajax({
           url: ROOM + "/api/devicesignaltable/listByName",
           data: {
@@ -548,7 +529,7 @@ const test50 = (function () {
         });
       }
 
-      function setValue (
+      function setValue(
         temperature,
         humidity,
         water,
@@ -658,7 +639,7 @@ const test50 = (function () {
       });
 
       roomIndex = $(this).index();
-      roomIndex = 9;
+      // roomIndex = 9;
       if (roomIndex === 0) {
         $(".roomThree62").css("visibility", "inherit");
         $(".roomThree63").css("visibility", "hidden");
@@ -688,12 +669,12 @@ const test50 = (function () {
         $(".roomThree66").css("visibility", "hidden");
         module65();
       } else {
-        // $('.roomThree62').css('visibility', 'hidden');
-        // $('.roomThree63').css('visibility', 'hidden');
-        // $('.roomThree64').css('visibility', 'hidden');
-        // $('.roomThree65').css('visibility', 'hidden');
-        // $('.roomThree66').css('visibility', 'inherit');
-        // module66();
+        $(".roomThree62").css("visibility", "hidden");
+        $(".roomThree63").css("visibility", "hidden");
+        $(".roomThree64").css("visibility", "hidden");
+        $(".roomThree65").css("visibility", "hidden");
+        $(".roomThree66").css("visibility", "inherit");
+        module66();
       }
       $(".sf5").slideToggle();
     });

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test53/test53.js

@@ -1,230 +1,231 @@
-const test53 = (function() {
-    function test53(id, domTitle) {
-        if (domTitle) {
-            $(".test53 .title h2").text(domTitle);
-        }
-        $(".test53 .box").css("z-index", ++zIndex);
-        $(".test53 .box").attr("data-id", id);
-        move3(".test53 .test-box");
-        move2(".test53 .containerTool");
-
-
-        $(".test53 .close").click(function() {
-            $(".test53 .box").remove();
-            $(".test53 .containerTool").css("display", "none");
-            $(".test53 .setWidth").val("");
-            $(".test53 .setHeight").val("");
-            moduleIdRemove.push(id);
-        });
-
-        eventClick(".test53");
-
-        const dists = document.querySelectorAll(".test53 .floor-dist");
-        const testDoms = document.querySelectorAll(".test53 .box");
-        for (let i = 0; i < dists.length; i++) {
-            const dom = dists[i];
-            setCharts(dom, testDoms[i]);
-        }
+const test53 = (function () {
+  function test53(id, domTitle) {
+    if (domTitle) {
+      $(".test53 .title h2").text(domTitle);
+    }
+    $(".test53 .box").css("z-index", ++zIndex);
+    $(".test53 .box").attr("data-id", id);
+    move3(".test53 .test-box");
+    move2(".test53 .containerTool");
 
-        // let myChart = echarts.init(dists[0]);
+    $(".test53 .close").click(function () {
+      $(".test53 .box").remove();
+      $(".test53 .containerTool").css("display", "none");
+      $(".test53 .setWidth").val("");
+      $(".test53 .setHeight").val("");
+      moduleIdRemove.push(id);
+    });
 
+    eventClick(".test53");
 
+    const dists = document.querySelectorAll(".test53 .floor-dist");
+    const testDoms = document.querySelectorAll(".test53 .box");
+    for (let i = 0; i < dists.length; i++) {
+      const dom = dists[i];
+      setCharts(dom, testDoms[i]);
     }
 
-    function setCharts(echartDom, testDom) {
-        let timer = null;
+    // let myChart = echarts.init(dists[0]);
+  }
 
-        var myChart = echarts.init(echartDom);
-        // 地图背景颜色
-        data = [{
-                name: "空调",
-                value: (Math.random() * 10).toFixed(0),
-                sum: 10,
-            },
-            {
-                name: "配电",
-                value: (Math.random() * 10).toFixed(0),
-                sum: 10,
-            },
-            {
-                name: "UPS",
-                value: (Math.random() * 10).toFixed(0),
-                sum: 10,
-            },
-            {
-                name: "温湿度",
-                value: (Math.random() * 10).toFixed(0),
-                sum: 10,
-            },
-            {
-                name: "烟感",
-                value: (Math.random() * 10).toFixed(0),
-                sum: 10,
+  function setCharts(echartDom, testDom) {
+    let timer = null;
+
+    var myChart = echarts.init(echartDom);
+    // 地图背景颜色
+    data = [
+      {
+        name: "空调",
+        value: (Math.random() * 10).toFixed(0),
+        sum: 10,
+      },
+      {
+        name: "配电",
+        value: (Math.random() * 10).toFixed(0),
+        sum: 10,
+      },
+      {
+        name: "UPS",
+        value: (Math.random() * 10).toFixed(0),
+        sum: 10,
+      },
+      {
+        name: "温湿度",
+        value: (Math.random() * 10).toFixed(0),
+        sum: 10,
+      },
+      {
+        name: "烟感",
+        value: (Math.random() * 10).toFixed(0),
+        sum: 10,
+      },
+      {
+        name: "漏水",
+        value: (Math.random() * 10).toFixed(0),
+        sum: 10,
+      },
+    ];
+    getArrByKey = (data, k) => {
+      let key = k || "value";
+      let res = [];
+      if (data) {
+        data.forEach(function (t) {
+          res.push(t[key]);
+        });
+      }
+      return res;
+    };
+    opt = {
+      index: 0,
+    };
+    color = ["#f85e35", "#d68f52", "#3fa4a9"];
+    data = data.sort((a, b) => {
+      return b.value - a.value;
+    });
+    option = {
+      grid: {
+        top: "2%",
+        bottom: -15,
+        right: 30,
+        left: -30,
+        containLabel: true,
+      },
+      xAxis: {
+        show: false,
+      },
+      yAxis: [
+        {
+          triggerEvent: true,
+          show: true,
+          inverse: true,
+          data: getArrByKey(data, "name"),
+          axisLine: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            color: "#fff",
+            align: "left",
+            margin: 50,
+            fontSize: 100,
+            formatter: function (value, index) {
+              if (opt.index === 0 && index < 3) {
+                return (
+                  "{idx" + index + "|" + (1 + index) + "} {title|" + value + "}"
+                );
+              } else if (opt.index !== 0 && index + opt.index < 9) {
+                return (
+                  "{idx|0" + (1 + index + opt.index) + "} {title|" + value + "}"
+                );
+              } else {
+                return (
+                  "{idx|" + (1 + index + opt.index) + "} {title|" + value + "}"
+                );
+              }
             },
-            {
-                name: "漏水",
-                value: (Math.random() * 10).toFixed(0),
-                sum: 10,
+            rich: {
+              idx0: {
+                color: "#FB375E",
+                backgroundColor: "#FFE8EC",
+                borderRadius: 100,
+                padding: [5, 8],
+              },
+              idx1: {
+                color: "#FF9023",
+                backgroundColor: "#FFEACF",
+                borderRadius: 100,
+                padding: [5, 8],
+              },
+              idx2: {
+                color: "#01B599",
+                backgroundColor: "#E1F7F3",
+                borderRadius: 100,
+                padding: [5, 8],
+              },
+              idx: {
+                color: "#fff",
+                borderRadius: 100,
+                padding: [5, 8],
+              },
+              title: {
+                width: 165,
+              },
             },
-        ];
-        getArrByKey = (data, k) => {
-            let key = k || "value";
-            let res = [];
-            if (data) {
-                data.forEach(function(t) {
-                    res.push(t[key]);
-                });
-            }
-            return res;
-        };
-        opt = {
-            index: 0,
-        };
-        color = ["#f85e35", "#d68f52", "#3fa4a9"];
-        data = data.sort((a, b) => {
-            return b.value - a.value;
-        });
-        option = {
-            grid: {
-                top: "2%",
-                bottom: -15,
-                right: 30,
-                left: -30,
-                containLabel: true,
+          },
+        },
+        {
+          triggerEvent: true,
+          show: true,
+          inverse: true,
+          data: getArrByKey(data, "name"),
+          axisLine: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            color: "#fff",
+            align: "left",
+            margin: 20,
+            fontSize: 100,
+            formatter: function (value, index) {
+              return data[index].value + "条";
             },
-            xAxis: {
-                show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: "条",
+          type: "bar",
+          yAxisIndex: 0,
+          data: data,
+          barWidth: 30,
+          itemStyle: {
+            color: (val) => {
+              if (val.dataIndex < 3 && opt.index === 0) {
+                return color[val.dataIndex];
+              } else {
+                return "#1990FF";
+              }
             },
-            yAxis: [{
-                    triggerEvent: true,
-                    show: true,
-                    inverse: true,
-                    data: getArrByKey(data, "name"),
-                    axisLine: {
-                        show: false,
-                    },
-                    splitLine: {
-                        show: false,
-                    },
-                    axisTick: {
-                        show: false,
-                    },
-                    axisLabel: {
-                        interval: 0,
-                        color: "#fff",
-                        align: "left",
-                        margin: 80,
-                        fontSize: 13,
-                        formatter: function(value, index) {
-                            if (opt.index === 0 && index < 3) {
-                                return (
-                                    "{idx" + index + "|" + (1 + index) + "} {title|" + value + "}"
-                                );
-                            } else if (opt.index !== 0 && index + opt.index < 9) {
-                                return (
-                                    "{idx|0" + (1 + index + opt.index) + "} {title|" + value + "}"
-                                );
-                            } else {
-                                return (
-                                    "{idx|" + (1 + index + opt.index) + "} {title|" + value + "}"
-                                );
-                            }
-                        },
-                        rich: {
-                            idx0: {
-                                color: "#FB375E",
-                                backgroundColor: "#FFE8EC",
-                                borderRadius: 100,
-                                padding: [5, 8],
-                            },
-                            idx1: {
-                                color: "#FF9023",
-                                backgroundColor: "#FFEACF",
-                                borderRadius: 100,
-                                padding: [5, 8],
-                            },
-                            idx2: {
-                                color: "#01B599",
-                                backgroundColor: "#E1F7F3",
-                                borderRadius: 100,
-                                padding: [5, 8],
-                            },
-                            idx: {
-                                color: "#fff",
-                                borderRadius: 100,
-                                padding: [5, 8],
-                            },
-                            title: {
-                                width: 165,
-                            },
-                        },
-                    },
-                },
-                {
-                    triggerEvent: true,
-                    show: true,
-                    inverse: true,
-                    data: getArrByKey(data, "name"),
-                    axisLine: {
-                        show: false,
-                    },
-                    splitLine: {
-                        show: false,
-                    },
-                    axisTick: {
-                        show: false,
-                    },
-                    axisLabel: {
-                        interval: 0,
-                        color: "#fff",
-                        align: "left",
-                        margin: 20,
-                        fontSize: 13,
-                        formatter: function(value, index) {
-                            return data[index].value + "条";
-                        },
-                    },
-                },
-            ],
-            series: [{
-                name: "条",
-                type: "bar",
-                yAxisIndex: 0,
-                data: data,
-                barWidth: 10,
-                itemStyle: {
-                    color: (val) => {
-                        if (val.dataIndex < 3 && opt.index === 0) {
-                            return color[val.dataIndex];
-                        } else {
-                            return "#1990FF";
-                        }
-                    },
-                    barBorderRadius: 30,
-                },
-            }, ],
-        };
+            barBorderRadius: 30,
+          },
+        },
+      ],
+    };
 
-        if (option) {
-            myChart.setOption(option);
-        }
+    if (option) {
+      myChart.setOption(option);
+    }
 
-        window.addEventListener("resize", function() {
-            if (timer) {
-                clearTimeout(timer);
-                timer = null;
-            }
-            timer = setTimeout(() => {
-                move3(".test53 .test-box");
+    window.addEventListener("resize", function () {
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+      timer = setTimeout(() => {
+        move3(".test53 .test-box");
 
-                myChart.resize();
-            }, 500);
-        });
+        myChart.resize();
+      }, 500);
+    });
 
-        if (!testDom) {
-            testDom = document.querySelectorAll(".test53 .box");
-        }
-        obsDom(testDom, myChart);
+    if (!testDom) {
+      testDom = document.querySelectorAll(".test53 .box");
     }
-    return test53;
-})();
+    obsDom(testDom, myChart);
+  }
+  return test53;
+})();

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test54/test54.js

@@ -1,228 +1,151 @@
-const test54 = (function () {
-  function test54(id, domTitle) {
-    if (domTitle) {
-      $(".test54 .title h2").text(domTitle);
-    }
-    $(".test54 .box").css("z-index", ++zIndex);
-    $(".test54 .box").attr("data-id", id);
-    move3(".test54 .test-box");
-    move2(".test54 .containerTool");
-
-    let timer = null;
-
-    $(".test54 .close").click(function () {
-      $(".test54 .box").remove();
-      $(".test54 .containerTool").css("display", "none");
-      $(".test54 .setWidth").val("");
-      $(".test54 .setHeight").val("");
-      moduleIdRemove.push(id);
-    });
-
-    eventClick(".test54");
-
-    const dists = document.querySelectorAll(".test54 .floor-dist");
-    const testDoms = document.querySelectorAll(".test54 .box");
-    for (let i = 0; i < dists.length; i++) {
-      const dom = dists[i];
-      setCharts(dom, testDoms[i]);
-    }
-
-    // let myChart = echarts.init(dists[0]);
-
-    window.addEventListener("resize", function () {
-      if (timer) {
-        clearTimeout(timer);
-        timer = null;
-      }
-      timer = setTimeout(() => {
-        move3(".test54 .test-box");
-
-        myChart.resize();
-      }, 500);
-    });
-  }
-
-  function setCharts(echartDom, testDom) {
-    var myChart = echarts.init(echartDom);
-    // 地图背景颜色
-    var seriesData = [
-      {
-        name: "机柜",
-        value: "480",
-      },
-      {
-        name: "服务器",
-        value: "300",
-      },
-      {
-        name: "交换机",
-        value: "240",
-      },
-      {
-        name: "路由器",
-        value: "120",
-      },
-      {
-        name: "PDU",
-        value: "60",
-      },
-    ];
-    var legendData = [
-      "机柜",
-      "服务器",
-      "交换机",
-      "路由器",
-      "PDU",
-    ];
-    var colorList = ["#73DDFF", "#73ACFF", "#FDD56A", "#FDB36A", "#FD866A"];
-    option = {
-   
-      title: {
-        text: "",
-        x: "center",
-        y: "center",
-        textStyle: {
-          color: "#fff",
-        },
-      },
-      tooltip: {
-        trigger: "item",
-        borderColor: "rgba(255,255,255,.3)",
-        backgroundColor: "rgba(13,5,30,.6)",
-        borderWidth: 1,
-        padding: 5,
-        formatter: function (parms) {
-          var str =
-            parms.marker +
-            "" +
-            parms.data.name +
-            "</br>" +
-            "数量：" +
-            parms.data.value +
-            "头</br>" +
-            "占比：" +
-            parms.percent +
-            "%";
-          return str;
-        },
-      },
-      legend: {
-        type: "scroll",
-        orient: "vertical",
-        left: "left",
-        align: "auto",
-        top: "middle",
-        textStyle: {
-          color: "#fff",
-        },
-        data: legendData,
-      },
-      series: [
-        {
-          type: "pie",
-          z: 3,
-          center: ["50%", "50%"],
-          radius: ["25%", "45%"],
-          clockwise: true,
-          avoidLabelOverlap: true,
-          hoverOffset: 15,
-          itemStyle: {
-            normal: {
-              color: function (params) {
-                return colorList[params.dataIndex];
-              },
-            },
-          },
-          label: {
-            show: true,
-            position: "outside",
-            formatter: "{a|{b}：{d}%}\n{hr|}",
-            rich: {
-              hr: {
-                backgroundColor: "t",
-                borderRadius: 3,
-                width: 3,
-                height: 3,
-                padding: [3, 3, 0, -12],
-              },
-              a: {
-                padding: [-30, 15, -20, 15],
-              },
-            },
-          },
-          labelLine: {
-            normal: {
-              length: 20,
-              length2: 30,
-              lineStyle: {
-                width: 1,
-              },
-            },
-          },
-          data: seriesData,
-        },
-        {
-          name: "第一层环",
-          type: "pie",
-          z: 2,
-          tooltip: {
-            show: false,
-          },
-          center: ["50%", "50%"],
-          radius: ["45%", "58%"],
-          hoverAnimation: false,
-          clockWise: false,
-          itemStyle: {
-            normal: {
-              // shadowBlur: 40,
-              // shadowColor: 'rgba(0, 255, 255,.3)',
-              color: "rgba(1,15,80,.4)",
-            },
-            emphasis: {
-              color: "rgba(1,15,80,.4)",
-            },
-          },
-          label: {
-            show: false,
-          },
-          data: [100],
-        },
-        {
-          name: "第二层环",
-          type: "pie",
-          z: 1,
-          tooltip: {
-            show: false,
-          },
-          center: ["50%", "50%"],
-          radius: ["58%", "76%"],
-          hoverAnimation: false,
-          clockWise: false,
-          itemStyle: {
-            normal: {
-              // shadowBlur: 40,
-              // shadowColor: 'rgba(0, 255, 255,.3)',
-              color: "rgba(0,15,69,.2)",
-            },
-            emphasis: {
-              color: "rgba(0,15,69,.2)",
-            },
-          },
-          label: {
-            show: false,
-          },
-          data: [100],
-        },
-      ],
-    };
-    if (option) {
-      myChart.setOption(option);
-    }
-
-    if (!testDom) {
-      testDom = document.querySelectorAll(".test54 .box");
-    }
-    obsDom(testDom, myChart);
-  }
-  return test54;
-})();
+const test54 = (function () {
+  function test54(id, domTitle) {
+    if (domTitle) {
+      $(".test54 .title h2").text(domTitle);
+    }
+    $(".test54 .box").css("z-index", ++zIndex);
+    $(".test54 .box").attr("data-id", id);
+    move3(".test54 .test-box");
+    move2(".test54 .containerTool");
+
+    let timer = null;
+
+    $(".test54 .close").click(function () {
+      $(".test54 .box").remove();
+      $(".test54 .containerTool").css("display", "none");
+      $(".test54 .setWidth").val("");
+      $(".test54 .setHeight").val("");
+      moduleIdRemove.push(id);
+    });
+
+    eventClick(".test54");
+
+    const dists = document.querySelectorAll(".test54 .floor-dist");
+    const testDoms = document.querySelectorAll(".test54 .box");
+    for (let i = 0; i < dists.length; i++) {
+      const dom = dists[i];
+      setCharts(dom, testDoms[i]);
+    }
+
+    // let myChart = echarts.init(dists[0]);
+
+    window.addEventListener("resize", function () {
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+      timer = setTimeout(() => {
+        move3(".test54 .test-box");
+
+        myChart.resize();
+      }, 500);
+    });
+  }
+
+  function setCharts(echartDom, testDom) {
+    var myChart = echarts.init(echartDom);
+    // 地图背景颜色
+    option = {
+      color: [
+        "#F86464",
+        "#19DC7C",
+        "#34A6FE",
+        "#FA9022",
+        "#DCDB01",
+        "#8C70F8",
+        "#2A4AD1",
+        "#E76FE3",
+        "#5032C0",
+        "#168FB2",
+      ],
+      grid: {
+        left: "2%",
+        top: "1%",
+        bottom: 10,
+        right: "1%",
+        containLabel: true,
+      },
+      tooltip: {
+        trigger: "item",
+        textStyle: {
+          fontSize: 130,
+        },
+        formatter: "{b} : {c} ({d}%)",
+      },
+      calculable: true,
+      series: [
+        {
+          stack: "a",
+          type: "pie",
+          radius: ["60%", "90%"],
+          center: ["50%", "55%"],
+          roseType: "area",
+          zlevel: 10,
+          label: {
+            normal: {
+              formatter: "{b}  {d}%",
+              borderWidth: 0,
+              borderRadius: 4,
+              height: 40,
+              fontSize: 130,
+              align: "center",
+              rich: {
+                b: {
+                  fontSize: 130,
+                  lineHeight: 5,
+                  color: "#41B3DC",
+                },
+              },
+            },
+          },
+          labelLine: {
+            normal: {
+              show: true,
+              lineStyle: {
+                width: 10, // 线条的宽度
+                color: "#3f8ac9", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
+              },
+              length: 100,
+              length2: 155,
+            },
+            emphasis: {
+              show: false,
+            },
+          },
+          data: [
+            {
+              value: 5,
+              name: "机柜",
+            },
+            {
+              value: 15,
+              name: "服务器",
+            },
+            {
+              value: 25,
+              name: "交换机",
+            },
+            {
+              value: 20,
+              name: "路由器",
+            },
+            {
+              value: 35,
+              name: "PDU",
+            },
+          ],
+        },
+      ],
+    };
+
+    if (option) {
+      myChart.setOption(option);
+    }
+
+    if (!testDom) {
+      testDom = document.querySelectorAll(".test54 .box");
+    }
+    obsDom(testDom, myChart);
+  }
+  return test54;
+})();

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test55/test55.css

@@ -16,6 +16,9 @@
   display: flex;
   margin-bottom: 29%;
 }
+.box55 .box-box img{
+  width: 14%;
+}
 .box55 .temperature-box-one {
   width: 33%;
   height: 50px;

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test57/test57.css

@@ -1,21 +1,21 @@
-.box57 .test-box {
-  padding: 0;
-}
-.box57 .content {
-  margin: 0;
-  padding: 0;
-}
-
-.img-box {
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
-.img-box-one {
-  margin-right: 2%;
-  width: 35%;
-  height: 50%;
-}
-.img-box-one img {
-  width: 100%;
-}
+.box57 .test-box {
+  padding: 0;
+}
+.box57 .content {
+  margin: 0;
+  padding: 0;
+}
+
+.img-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+.img-box-one {
+  margin-right: 2%;
+  width: 35%;
+  height: 50%;
+}
+.img-box-one img {
+  width: 100%;
+}

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test58/test58.css

@@ -22,7 +22,7 @@
   margin-top: 15%;
   font-style: italic;
 }
-.Water-immersion-box-one {
+.box58 .Water-immersion-box-one {
   width: 30%;
   height: 40%;
   background: #1e3e5d;

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test61/test61.css

@@ -129,7 +129,7 @@
 .bg-center {
   width: 100%;
   height: 50%;
-  background: url("../../css/modules/layer/default/组69拷贝.png") no-repeat;
+  /* background: url("../../css/modules/layer/default/组69拷贝.png") no-repeat; */
   background-size: 100%;
   position: absolute;
 }
@@ -351,7 +351,7 @@
 
 /* 弹窗样式 */
 .box61 .tablebox{
-  margin-top: 13%;
+  margin-top: 16%;
   height: 60%;
   overflow: auto;
 }

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test62/test62.css

@@ -7,27 +7,27 @@
   src: url("../../font/LESLIE.TTF");
 }
 .CenterText {
-  font-size: 0.25rem !important;
+  font-size: 0.16rem !important;
   color: #fff;
 }
 .CenterTextBg {
   position: absolute;
   /* top: 10; */
   left: 30%;
-  width: 50%;
+  width: 76%;
   height: 20%;
   text-align: center;
-  line-height: 45px;
+  line-height: 163px;
   border: 1px solid #4ae3ff;
 }
 .CenterTextBg2 {
   position: absolute;
   left: 94%;
   top: 30%;
-  width: 90%;
+  width: 100%;
   height: 20%;
   text-align: center;
-  line-height: 45px;
+  line-height: 230px;
   border: 1px solid #4ae3ff;
 }
 .CenterTextBg3 {
@@ -35,19 +35,19 @@
   left: 37%;
   top: 103%;
   width: 90%;
-  height: 20%;
+  height: 30%;
   text-align: center;
-  line-height: 45px;
+  line-height: 137px;
   border: 1px solid #4ae3ff;
 }
 .CenterTextBg4 {
   position: absolute;
   left: 37%;
   /* top: 103%; */
-  width: 49%;
-  /* height: 20%; */
+  width: 55%;
+  height: 20%;
   text-align: center;
-  line-height: 29px;
+  line-height: 172px;
   border: 1px solid #4ae3ff;
 }
 .hallHou {
@@ -57,7 +57,7 @@
   width: 100%;
   font-size: 0.45rem !important;
 }
-.box62{
+.box62 {
   z-index: 0 !important;
 }
 .box62 .concent > div {
@@ -98,17 +98,19 @@
   top: 9%;
 }
 .OuterSuburbs {
-  text-shadow: 0 0 0.2rem rgb(85, 167, 214),0 0 0.2rem rgb(85, 167, 214),0 0 0.3rem rgb(85, 167, 214);
+  text-shadow: 0 0 0.2rem rgb(85, 167, 214), 0 0 0.2rem rgb(85, 167, 214),
+    0 0 0.3rem rgb(85, 167, 214);
   color: #fff;
-  /* font-size: 0.3rem !important; */
+  font-size: 0.2rem !important;
 }
 .hall {
-  text-shadow: 0 0 0.2rem rgb(85, 167, 214),0 0 0.2rem rgb(85, 167, 214),0 0 0.3rem rgb(85, 167, 214);
-  font-size: 0.7rem !important;
+  text-shadow: 0 0 0.2rem rgb(85, 167, 214), 0 0 0.2rem rgb(85, 167, 214),
+    0 0 0.3rem rgb(85, 167, 214);
+  font-size: 0.35rem !important;
   color: #fff;
   position: absolute;
   top: 50%;
-  left: -10%;
+  left: -12%;
 }
 .box62 .c-center1 {
   left: 46%;
@@ -120,8 +122,8 @@
   top: 35%;
 }
 .box62 .c-center3 {
-  left: 31%;
-  top: 20%;
+  left: 34%;
+  top: 17%;
 }
 .box62 .c-center4 {
   left: 62%;
@@ -158,8 +160,8 @@
 }
 
 svg {
-  width: 1075px;
-  height: 150px;
+  width: 1450px;
+  height: 650px;
 }
 
 svg path {
@@ -191,50 +193,53 @@ svg path {
 }
 
 .qxRect {
-  offset-path: path("M875 320, L 940 350");
+  offset-path: path("M1085 300, L 760 250");
   offset-distance: 0%;
   animation: svg-path-animation 5s ease-in-out 0s infinite normal;
 }
 
 .qxRect2 {
-  offset-path: path("M780 320, L 850 370, L 763 410");
+  offset-path: path("M520 380, L 720 270");
   offset-distance: 0%;
   animation: svg-path-animation 5s ease-in-out 0s infinite normal;
 }
 
 .qxRect3 {
-  offset-path: path("M720 320, L 680 340, L 610 305, L 483 360");
+  offset-path: path("M300 320, L 720 265");
   offset-distance: 0%;
   animation: svg-path-animation 5s ease-in-out 0s infinite normal;
 }
 
 .qxRect4 {
-  offset-path: path("M715 220, L 695 210, L 654 230");
+  offset-path: path("M555 220,L 720 250");
   offset-distance: 0%;
   animation: svg-path-animation 5s ease-in-out 0s infinite normal;
 }
 
 .qxRect5 {
-  offset-path: path("M880 290, L 1020 245");
+  offset-path: path("M770 240, L 1085 290");
   offset-distance: 0%;
   animation: svg-path-animation 5s ease-in-out 0s infinite normal;
 }
 
 .qxRect6 {
-  offset-path: path("M240 300, L 150 230, L 220 210, L 140 150");
+  offset-path: path("M140 150, L 220 150, L 220 240, L 720 260");
   offset-distance: 0%;
   animation: svg-path-animation 5s ease-in-out 0s infinite normal;
 }
 
 .qxRect7 {
-  offset-path: path(
-    "M155 40, L 600 40, L 630 10, L 900 10, L 930 40, L 1440 40"
-  );
+  offset-path: path("M900 400,  L 1125 330");
   offset-distance: 0%;
   animation: svg-path-animation 5s ease-in-out 0s infinite normal;
 }
 .qxRect8 {
-  offset-path: path("M1370 180, L 1300 210, L 1350 230,L 1180 295");
+  offset-path: path("M1370 180, L 1300 210, L 1100 150,L 780 230");
+  offset-distance: 0%;
+  animation: svg-path-animation 5s ease-in-out 0s infinite normal;
+}
+.qxRect9 {
+  offset-path: path("M1110 323, L 900 388");
   offset-distance: 0%;
   animation: svg-path-animation 5s ease-in-out 0s infinite normal;
 }

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test62/test62.html

@@ -6,14 +6,15 @@
   <div class="svg-contanier">
     <div class="svg-item">
       <svg class="svg">
-        <path d="M875 320, L 940 350" />
-        <path d="M780 320, L 850 370, L 763 410" />
-        <path d="M720 320, L 680 340, L 610 305, L 483 360" />
-        <path d="M715 220, L 695 210, L 654 230" />
-        <path d="M880 290, L 1020 245" />
-        <path d="M240 300, L 150 230, L 220 210, L 140 150" />
-        <path d="M155 40, L 600 40, L 630 10, L 900 10, L 930 40, L 1440 40" />
-        <path d="M1370 180, L 1300 210, L 1350 230,L 1180 295" />
+        <path d="M1085 300, L 760 250" />
+        <path d="M520 380, L 720 270" />
+        <path d="M300 320, L 720 265" />
+        <path d="M555 220,L 720 250" />
+        <path d="M770 240, L 1085 290" />
+        <path d="M140 150, L 220 150, L 220 240, L 720 260" />
+        <path d="M900 400,  L 1125 330" />
+        <path d="M1370 180, L 1300 210, L 1100 150,L 780 230" />
+        <path d="M1110 323, L 900 388" />
       </svg>
       <div class="rect qxRect"></div>
       <div class="rect qxRect2"></div>
@@ -23,6 +24,7 @@
       <div class="rect qxRect6"></div>
       <div class="rect qxRect7"></div>
       <div class="rect qxRect8"></div>
+      <div class="rect qxRect9"></div>
     </div>
   </div>
   <div class="test-box">
@@ -32,36 +34,28 @@
         <img src="../images/zybz/ybq拷贝2.png" alt="" />
         <div class="OuterSuburbs CenterText">远郊区县</div>
       </div>
-      <div class="c-center1">
+      <div class="c-center1" style="width: 7%">
         <img src="../images/zybz/核心机房.png" alt="" style="width: w00px" />
         <div class="OuterSuburbs hallHou">1号楼4F核心机房</div>
       </div>
-      <div class="c-center2">
+      <div class="c-center2" style="width: 6%">
         <img src="../images/zybz/曲线 2 拷贝 2-1.png" alt="" />
         <div class="CenterText CenterTextBg">UPS机房</div>
       </div>
-      <div class="c-center3">
+      <div class="c-center3" style="width: 5%">
         <img src="../images/zybz/曲线 2 拷贝 2.png" alt="" />
         <div class="CenterText CenterTextBg2">1号楼9F配电间</div>
       </div>
-      <div class="c-center4">
+      <div class="c-center4" style="width: 6%">
         <img src="../images/zybz/曲线 2 拷贝 2-1.png" alt="" />
         <div class="CenterText CenterTextBg3">2号楼8F中心机房</div>
       </div>
-      <div class="c-center5">
-        <img
-          src="../images/zybz/色相_饱和度 792 拷贝 7.png"
-          alt=""
-          style="width: 75%"
-        />
+      <div class="c-center5" style="width: 13%">
+        <img src="../images/zybz/色相_饱和度 792 拷贝 7.png" alt="" />
         <div class="hall">大厅</div>
       </div>
-      <div class="c-center6">
-        <img
-          style="width: 49%"
-          src="../images/zybz/曲线 2 拷贝 2-1.png"
-          alt=""
-        />
+      <div class="c-center6" style="width: 6%">
+        <img src="../images/zybz/曲线 2 拷贝 2-1.png" alt="" />
         <div class="CenterText CenterTextBg4">档案室</div>
       </div>
 

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test7/test7.js

@@ -75,10 +75,9 @@ const test7 = (function () {
       },
       tooltip: {
         trigger: "axis",
-        axisPointer: {
-          lineStyle: {
-            color: "#57617B",
-          },
+        textStyle: {
+          lineHeight: 100, // 行高
+          fontSize: 80,
         },
       },
       legend: {

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test8/test8.js

@@ -1,907 +1,203 @@
-const test8 = (function() {
-    function test8(id, domTitle) {
-        if (domTitle) {
-            $('.test8 .title h2').text(domTitle)
-        }
-        $('.test8 .box').css('z-index', ++zIndex)
-        $('.test8 .box').attr('data-id', id)
-        move3('.test8 .test-box')
-        move2('.test8 .containerTool')
-
-
-
-        $('.test8 .close').click(function() {
-            $('.test8 .box').remove();
-            $('.test8 .containerTool').css('display', 'none');
-            $('.test8 .setWidth').val('')
-            $('.test8 .setHeight').val('')
-            moduleIdRemove.push(id)
-        })
-
-        eventClick('.test8');
-
-        const dom = document.querySelector('.test8 .floor-dist');
-        const testDom = document.querySelector('.test8 .box');
-
-        function test8Ajax() {
-          $.ajax({
-            /** url，data参数，
-             * type请求类型，响应体结果，超时时间
-             * 成功的回调，失败回调 */
-            url: basicUrl + '/hotSearch/getAllHotSearch',
-            data: {
-                dateType: 0
-            },
-            type: 'GET',
-            dataType: 'JSON',
-            success: function(data) {
-                console.log('热搜榜', data);
-                const arr = []
-                var colorList = [
-                  [
-                      "#ff7f50",
-                      "#87cefa",
-                      "#da70d6",
-                      "#32cd32",
-                      "#6495ed",
-                      "#ff69b4",
-                      "#ba55d3",
-                      "#cd5c5c",
-                      "#ffa500",
-                      "#40e0d0",
-                      "#1e90ff",
-                      "#ff6347",
-                      "#7b68ee",
-                      "#d0648a",
-                      "#ffd700",
-                      "#6b8e23",
-                      "#4ea397",
-                      "#3cb371",
-                      "#b8860b",
-                      "#7bd9a5",
-                  ],
-                  [
-                      "#ff7f50",
-                      "#87cefa",
-                      "#da70d6",
-                      "#32cd32",
-                      "#6495ed",
-                      "#ff69b4",
-                      "#ba55d3",
-                      "#cd5c5c",
-                      "#ffa500",
-                      "#40e0d0",
-                      "#1e90ff",
-                      "#ff6347",
-                      "#7b68ee",
-                      "#00fa9a",
-                      "#ffd700",
-                      "#6b8e23",
-                      "#ff00ff",
-                      "#3cb371",
-                      "#b8860b",
-                      "#30e0e0",
-                  ],
-                  [
-                      "#929fff",
-                      "#9de0ff",
-                      "#ffa897",
-                      "#af87fe",
-                      "#7dc3fe",
-                      "#bb60b2",
-                      "#433e7c",
-                      "#f47a75",
-                      "#009db2",
-                      "#024b51",
-                      "#0780cf",
-                      "#765005",
-                      "#e75840",
-                      "#26ccd8",
-                      "#3685fe",
-                      "#9977ef",
-                      "#f5616f",
-                      "#f7b13f",
-                      "#f9e264",
-                      "#50c48f",
-                  ],
-              ][2];
-                data.result.forEach((item,index) => {
-                  arr.push({
-                    name: item.hot_search_name,
-                    value: item.hot_search_num,
-                    symbolSize: 243,
-                    draggable: true,
-                    itemStyle: {
-                        normal: {
-                            shadowBlur: 80,
-                            shadowColor: colorList[index+1],
-                            color: colorList[index+1],
-                        },
-                    },
-                })
-                })
-        setCharts(dom, testDom,arr);
-
-              },
-              error: function() {
-                console.log('热搜榜接口超时了');
-            },
-        })
-        }
-        test8Ajax()
-        setInterval(() => {
-        test8Ajax()
-        }, 180*1000);
-    }
-
-    function setCharts(echartDom, testDom,data) {
-        // 1实例化对象
-        //添加类目数据
-
-        var myChart = echarts.init(echartDom);
-
-        option = {
-            // 图表标题
-            title: {
-                show: false, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
-                text: "微博热搜榜话题图谱", //主标题文本，'\n'指定换行
-                x: "center", // 水平安放位置，默认为左对齐，可选为：
-                // 'center' ¦ 'left' ¦ 'right'
-                // ¦ {number}（x坐标，单位px）
-                y: "bottom", // 垂直安放位置，默认为全图顶端，可选为：
-                // 'top' ¦ 'bottom' ¦ 'center'
-                // ¦ {number}（y坐标，单位px）
-                //textAlign: null          // 水平对齐方式，默认根据x设置自动调整
-                backgroundColor: "rgba(0,0,0,0)",
-                borderColor: "#ccc", // 标题边框颜色
-                borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
-                padding: 205, // 标题内边距，单位px，默认各方向内边距为5，
-                // 接受数组分别设定上右下左边距，同css
-                itemGap: 100, // 主副标题纵向间隔，单位px，默认为10，
-                textStyle: {
-                    fontSize: 118,
-                    fontWeight: "bolder",
-                    color: "#eee", // 主标题文字颜色
-                },
-                subtextStyle: {
-                    color: "#aaa", // 副标题文字颜色
-                },
-            },
-            tooltip: {},
-            animationDurationUpdate: function(idx) {
-                // 越往后的数据延迟越大
-                return idx * 100;
-            },
-            animationEasingUpdate: "bounceIn",
-            color: ["#fff", "#fff", "#fff"],
-            series: [{
-                type: "graph",
-                layout: "force",
-                force: {
-                    repulsion: 250,
-                    edgeLength: 100,
-                },
-                roam: true,
-                label: {
-                    normal: {
-                        show: true,
-                        fontSize: 305,
-                    },
-                },
-                data
-                // data: [{
-                //         name: "刘雨昕长发",
-                //         value: 2058124,
-                //         symbolSize: 143,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[1],
-                //                 color: colorList[1],
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "澳大利亚暂停申办2032奥运",
-                //         value: 1751491,
-                //         symbolSize: 132,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[2],
-                //                 color: colorList[2],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "说白了你敢吗",
-                //         value: 1642587,
-                //         symbolSize: 128,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[3],
-                //                 color: colorList[3],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "吴昕跳舞",
-                //         value: 1524287,
-                //         symbolSize: 123,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[4],
-                //                 color: colorList[4],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "乃万甩话筒",
-                //         value: 1435649,
-                //         symbolSize: 119,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[5],
-                //                 color: colorList[5],
-                //             },
-                //         },
-
-                //     },
-                //     {
-                //         name: "青春有你导师合作舞台",
-                //         value: 1301903,
-                //         symbolSize: 114,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[6],
-                //                 color: colorList[6],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "有没有一种小龙虾是蓬松的",
-                //         value: 1150224,
-                //         symbolSize: 107,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[7],
-                //                 color: colorList[7],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "吉林封闭小区居民用蔬菜摆感谢语",
-                //         value: 1008954,
-                //         symbolSize: 100,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[8],
-                //                 color: colorList[8],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "建议未成年人不能从事超龄商业活动",
-                //         value: 966638,
-                //         symbolSize: 98,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[9],
-                //                 color: colorList[9],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "孟鹤堂曾毅跳女团舞",
-                //         value: 942399,
-                //         symbolSize: 97,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[10],
-                //                 color: colorList[10],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "韩国梨泰院感染事件病毒类型与欧美吻合",
-                //         value: 777198,
-                //         symbolSize: 88,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[11],
-                //                 color: colorList[11],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "赫兹中国回应申请破产",
-                //         value: 726378,
-                //         symbolSize: 85,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[12],
-                //                 color: colorList[12],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "建议增加0-3岁婴幼儿免费体检频次",
-                //         value: 624773,
-                //         symbolSize: 79,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[13],
-                //                 color: colorList[13],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "父亲收到女儿送的色盲眼镜",
-                //         value: 620858,
-                //         symbolSize: 78,
-                //         draggable: true,
-                //         itemStyle: {
-                //             fontSize: 200,
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[14],
-                //                 color: colorList[14],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "舞者",
-                //         value: 565363,
-                //         symbolSize: 75,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[15],
-                //                 color: colorList[15],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "国漫要走出中国道路",
-                //         value: 534676,
-                //         symbolSize: 73,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[16],
-                //                 color: colorList[16],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "韫色过浓",
-                //         value: 504716,
-                //         symbolSize: 71,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[17],
-                //                 color: colorList[17],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "幸福触手可及",
-                //         value: 494101,
-                //         symbolSize: 70,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[18],
-                //                 color: colorList[18],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "马踏飞燕不拍正面的原因",
-                //         value: 500,
-                //         symbolSize: 66,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[19],
-                //                 color: colorList[19],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "创造营",
-                //         value: 403092,
-                //         symbolSize: 63,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[0],
-                //                 color: colorList[0],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "情人舞台像拍MV",
-                //         value: 399236,
-                //         symbolSize: 63,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[1],
-                //                 color: colorList[1],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "闰四月",
-                //         value: 390904,
-                //         symbolSize: 62,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[2],
-                //                 color: colorList[2],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "黄子韬",
-                //         value: 368912,
-                //         symbolSize: 60,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[3],
-                //                 color: colorList[3],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "中国第一个国家公园",
-                //         value: 368366,
-                //         symbolSize: 60,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[4],
-                //                 color: colorList[4],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "不服听到起鸡皮疙瘩",
-                //         value: 368296,
-                //         symbolSize: 60,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[5],
-                //                 color: colorList[5],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "故意绊倒儿童广场舞老人托人道歉",
-                //         value: 359468,
-                //         symbolSize: 59,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[6],
-                //                 color: colorList[6],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "山东冰雹",
-                //         value: 295436,
-                //         symbolSize: 54,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[7],
-                //                 color: colorList[7],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "手机备忘录里都写了什么",
-
-                //         value: 284210,
-                //         symbolSize: 53,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[8],
-                //                 color: colorList[8],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "李现冲浪",
-                //         value: 283813,
-                //         symbolSize: 53,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[9],
-                //                 color: colorList[9],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "蝴蝶落到了狗狗鼻子上",
-                //         value: 283766,
-                //         symbolSize: 53,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[10],
-                //                 color: colorList[10],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "巴坠机事故找到97具遗体",
-                //         value: 256506,
-                //         symbolSize: 50,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[11],
-                //                 color: colorList[11],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "当万亩樱花园遇上中国天眼",
-                //         value: 250184,
-                //         symbolSize: 50,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[12],
-                //                 color: colorList[12],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "张文宏称全球疫情可能要连续一到两年",
-                //         value: 247223,
-                //         symbolSize: 49,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[13],
-                //                 color: colorList[13],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "莫斯科市中心发生劫持人质事件",
-                //         value: 237377,
-                //         symbolSize: 48,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[14],
-                //                 color: colorList[14],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "假如婴儿有了牙齿",
-                //         value: 220219,
-                //         symbolSize: 46,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[15],
-                //                 color: colorList[15],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "乌鸦督促慢性子刺猬过马路",
-                //         value: 209512,
-                //         symbolSize: 45,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[16],
-                //                 color: colorList[16],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "澳门特区政府坚决支持中央决定",
-                //         value: 192396,
-                //         symbolSize: 43,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[17],
-                //                 color: colorList[17],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "吉林市启用无人机消杀防疫",
-                //         value: 184315,
-                //         symbolSize: 42,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[18],
-                //                 color: colorList[18],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "西甲6月8日复赛",
-                //         value: 174247,
-                //         symbolSize: 41,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[19],
-                //                 color: colorList[19],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "你和同学在教室的样子",
-                //         value: 171994,
-                //         symbolSize: 41,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[0],
-                //                 color: colorList[0],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "恶魔之眼艾肯泉",
-                //         value: 164751,
-                //         symbolSize: 40,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[1],
-                //                 color: colorList[1],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "建议将收买妇女儿童纳入地方政府考核",
-                //         value: 155213,
-                //         symbolSize: 39,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[2],
-                //                 color: colorList[2],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "小时候关于夏天的记忆",
-                //         value: 153323,
-                //         symbolSize: 39,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[3],
-                //                 color: colorList[3],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "澳大利亚夜空不明火球",
-                //         value: 152564,
-                //         symbolSize: 39,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[4],
-                //                 color: colorList[4],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "张文宏谈如何正确使用空调",
-                //         value: 147858,
-                //         symbolSize: 38,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[5],
-                //                 color: colorList[5],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "高伟光情商",
-                //         value: 138773,
-                //         symbolSize: 37,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[6],
-                //                 color: colorList[6],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "建议涉罪未成年人佩戴电子定位装置",
-                //         value: 134038,
-                //         symbolSize: 36,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[7],
-                //                 color: colorList[7],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "货车侧翻后车司机第一时间去救人",
-                //         value: 131590,
-                //         symbolSize: 36,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[8],
-                //                 color: colorList[8],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "出租车司机兼职赏金猎人",
-                //         value: 115787,
-                //         symbolSize: 34,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[9],
-                //                 color: colorList[9],
-
-                //             },
-                //         },
-                //     },
-                //     {
-                //         name: "俄罗斯新冠病例超33.5万例",
-                //         value: 100309,
-                //         symbolSize: 31,
-                //         draggable: true,
-                //         itemStyle: {
-                //             normal: {
-                //                 shadowBlur: 10,
-                //                 shadowColor: colorList[10],
-                //                 color: colorList[10],
-
-                //             },
-                //         },
-                //     },
-                // ],
-            }, ],
-        };
-
-
-
-        myChart.setOption(option);
-
-        if (!testDom) {
-            testDom = document.querySelectorAll('.test8 .box');
-        }
-        obsDom(testDom, myChart)
-    }
-    return test8
-})();
+const test8 = (function () {
+  function test8(id, domTitle) {
+    if (domTitle) {
+      $(".test8 .title h2").text(domTitle);
+    }
+    $(".test8 .box").css("z-index", ++zIndex);
+    $(".test8 .box").attr("data-id", id);
+    move3(".test8 .test-box");
+    move2(".test8 .containerTool");
+
+    $(".test8 .close").click(function () {
+      $(".test8 .box").remove();
+      $(".test8 .containerTool").css("display", "none");
+      $(".test8 .setWidth").val("");
+      $(".test8 .setHeight").val("");
+      moduleIdRemove.push(id);
+    });
+
+    eventClick(".test8");
+
+    const dom = document.querySelector(".test8 .floor-dist");
+    const testDom = document.querySelector(".test8 .box");
+
+    function test8Ajax() {
+      $.ajax({
+        /** url，data参数，
+         * type请求类型，响应体结果，超时时间
+         * 成功的回调，失败回调 */
+        url: basicUrl + "/hotSearch/getAllHotSearch",
+        data: {
+          dateType: 0,
+        },
+        type: "GET",
+        dataType: "JSON",
+        success: function (data) {
+          console.log("热搜榜", data);
+          const arr = [];
+          var colorList = [
+            [
+              "#ff7f50",
+              "#87cefa",
+              "#da70d6",
+              "#32cd32",
+              "#6495ed",
+              "#ff69b4",
+              "#ba55d3",
+              "#cd5c5c",
+              "#ffa500",
+              "#40e0d0",
+              "#1e90ff",
+              "#ff6347",
+              "#7b68ee",
+              "#d0648a",
+              "#ffd700",
+              "#6b8e23",
+              "#4ea397",
+              "#3cb371",
+              "#b8860b",
+              "#7bd9a5",
+            ],
+            [
+              "#ff7f50",
+              "#87cefa",
+              "#da70d6",
+              "#32cd32",
+              "#6495ed",
+              "#ff69b4",
+              "#ba55d3",
+              "#cd5c5c",
+              "#ffa500",
+              "#40e0d0",
+              "#1e90ff",
+              "#ff6347",
+              "#7b68ee",
+              "#00fa9a",
+              "#ffd700",
+              "#6b8e23",
+              "#ff00ff",
+              "#3cb371",
+              "#b8860b",
+              "#30e0e0",
+            ],
+            [
+              "#929fff",
+              "#9de0ff",
+              "#ffa897",
+              "#af87fe",
+              "#7dc3fe",
+              "#bb60b2",
+              "#433e7c",
+              "#f47a75",
+              "#009db2",
+              "#024b51",
+              "#0780cf",
+              "#765005",
+              "#e75840",
+              "#26ccd8",
+              "#3685fe",
+              "#9977ef",
+              "#f5616f",
+              "#f7b13f",
+              "#f9e264",
+              "#50c48f",
+            ],
+          ][2];
+          data.result.forEach((item, index) => {
+            arr.push({
+              name: item.hot_search_name,
+              value: item.hot_search_num,
+              symbolSize: 100,
+              draggable: true,
+              itemStyle: {
+                normal: {
+                  shadowBlur: 180,
+                  shadowColor: colorList[index + 1],
+                  color: colorList[index + 1],
+                },
+              },
+            });
+          });
+          setCharts(dom, testDom, arr);
+        },
+        error: function () {
+          console.log("热搜榜接口超时了");
+        },
+      });
+    }
+    test8Ajax();
+    setInterval(() => {
+      test8Ajax();
+    }, 180 * 1000);
+  }
+
+  function setCharts(echartDom, testDom, data) {
+    // 1实例化对象
+    //添加类目数据
+
+    var myChart = echarts.init(echartDom);
+
+    option = {
+      // 图表标题
+      title: {
+        show: false, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
+        text: "微博热搜榜话题图谱", //主标题文本，'\n'指定换行
+        x: "center", // 水平安放位置，默认为左对齐，可选为：
+        // 'center' ¦ 'left' ¦ 'right'
+        // ¦ {number}（x坐标，单位px）
+        y: "bottom", // 垂直安放位置，默认为全图顶端，可选为：
+        // 'top' ¦ 'bottom' ¦ 'center'
+        // ¦ {number}（y坐标，单位px）
+        //textAlign: null          // 水平对齐方式，默认根据x设置自动调整
+        backgroundColor: "rgba(0,0,0,0)",
+        borderColor: "#ccc", // 标题边框颜色
+        borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
+        padding: 205, // 标题内边距，单位px，默认各方向内边距为5，
+        // 接受数组分别设定上右下左边距，同css
+        itemGap: 100, // 主副标题纵向间隔，单位px，默认为10，
+        textStyle: {
+          fontSize: 118,
+          fontWeight: "bolder",
+          color: "#eee", // 主标题文字颜色
+        },
+        subtextStyle: {
+          color: "#aaa", // 副标题文字颜色
+        },
+      },
+      tooltip: {},
+      animationDurationUpdate: function (idx) {
+        // 越往后的数据延迟越大
+        return idx * 100;
+      },
+      animationEasingUpdate: "bounceIn",
+      color: ["#fff", "#fff", "#fff"],
+      series: [
+        {
+          type: "graph",
+          layout: "force",
+          force: {
+            repulsion: 150,
+            edgeLength: 100,
+          },
+          roam: true,
+          zoom: 6,
+          label: {
+            normal: {
+              show: true,
+              fontSize: 105,
+            },
+          },
+          data,
+        },
+      ],
+    };
+
+    myChart.setOption(option);
+
+    if (!testDom) {
+      testDom = document.querySelectorAll(".test8 .box");
+    }
+    obsDom(testDom, myChart);
+  }
+  return test8;
+})();

spring-cloud/server-page/src/main/resources/static/testEcharts/test/js/common.js

@@ -1,17 +1,17 @@
-let baseURL = 'http://23.37.100.87:8088/itsm/openInterface'; // 资源保障管理专题（运维）
+let baseURL = 'http://23.37.100.80:8088/itsm/openInterface'; // 资源保障管理专题（运维）
 
 
-const FLAT_PATH_THREE = "http://23.37.100.87:8084/threeapi";
+const FLAT_PATH_THREE = "http://23.37.100.80:8084/threeapi";
 
-const ZQURL = 'http://23.37.100.87:8181/InterfaceController.asmx'; // 站群
-const imgURL = 'http://23.37.100.87:8182'; // 站群
+const ZQURL = 'http://23.37.100.80:8181/InterfaceController.asmx'; // 站群
+const imgURL = 'http://23.37.100.80:8182'; // 站群
 
-// const FLAT_PATH_THREE = "http://23.37.100.87:8084/threeapi"
-// 23.37.100.87
+// const FLAT_PATH_THREE = "http://23.37.100.80:8084/threeapi"
+// 23.37.100.80
 // 机房 - DH
-const ROOM = 'http://23.37.100.87:7002';
-// const DH = 'http://23.37.100.87:8084/threeapi/';
-const DH = 'http://23.37.100.87:8084/imcp-api/';
+const ROOM = 'http://23.37.100.80:7002';
+// const DH = 'http://23.37.100.80:8084/threeapi/';
+const DH = 'http://23.37.100.80:8084/imcp-api/';
 
 function getDateString(date,type) {
     const dt = new Date(date)

spring-cloud/server-page/src/main/resources/static/testEcharts/test/main/js/common.js

@@ -1,7 +1,7 @@
 const basicUrl = 'http://23.37.100.87:8084/basic';
 // const basicUrl = "http://192.168.0.100:8084/basic";
 
-// http://23.37.100.87:8084
+// http://23.37.100.80:8084
 
 let pages = [];
 let themeId; // 主题id

spring-cloud/server-page/src/main/resources/static/testEcharts/test/main/js/setCharts.js

@@ -1,1230 +1,1175 @@
-/**
- * 健康状态charts
- */
-
-// setTimeout(() => {
-//     setChartsDom(document.querySelector('.charts1'))
-// }, 500);
-
-// setTimeout(() => {
-//     setChartsDom(document.querySelector('.charts2'))
-// }, 1000);
-
-
-// setTimeout(() => {
-//     setChartsDom(document.querySelector('.charts3'))
-// }, 1500);
-
-
-function setChartsDom(echartDom) {
-    const myChart = echarts.init(echartDom);
-    const option = {
-        series: [{
-            type: 'gauge',
-            z: 100,
-            axisLine: {
-                lineStyle: {
-                    width: 5,
-                    color: [
-                        [
-                            0.3, new echarts.graphic.LinearGradient(
-                                0, 1, 1, 0, [{
-                                        offset: 0,
-                                        color: 'rgba(0, 237, 3,0.1)',
-                                    }, {
-                                        offset: 0.5,
-                                        color: 'rgba(0, 237, 3,0.6)',
-                                    },
-                                    {
-                                        offset: 1,
-                                        color: 'rgba(0, 237, 3,1)',
-                                    }
-                                ]
-                            )
-                        ],
-                        [
-                            0.7, new echarts.graphic.LinearGradient(
-                                0, 1, 1, 0, [{
-                                        offset: 0,
-                                        color: 'rgba(255, 184, 0,0.1)',
-                                    }, {
-                                        offset: 0.5,
-                                        color: 'rgba(255, 184, 0,0.6)',
-                                    },
-                                    {
-                                        offset: 1,
-                                        color: 'rgba(255, 184, 0,1)',
-                                    }
-                                ]
-                            )
-                        ],
-                        [
-                            1, new echarts.graphic.LinearGradient(
-                                0, 1, 1, 0, [{
-                                        offset: 0,
-                                        color: 'rgba(175, 36, 74,0.1)',
-                                    }, {
-                                        offset: 0.5,
-                                        color: 'rgba(255, 36, 74,0.6)',
-                                    },
-                                    {
-                                        offset: 1,
-                                        color: 'rgba(255, 36, 74,1)',
-                                    }
-                                ]
-                            )
-                        ]
-                    ],
-                }
-            },
-            // radius: '50%',
-            pointer: {
-                itemStyle: {
-                    color: 'auto'
-                }
-            },
-            axisTick: {
-                distance: 0,
-                length: 8,
-                lineStyle: {
-                    color: 'auto',
-                    width: 2
-                }
-            },
-            splitLine: {
-                distance: 0,
-                length: 20,
-                lineStyle: {
-                    color: 'auto',
-                    width: 4
-                }
-            },
-            axisLabel: {
-                color: 'white',
-                distance: 30,
-                fontSize: 110
-            },
-            detail: {
-                valueAnimation: true,
-                formatter: '{value} %',
-                color: 'white'
-            },
-            data: [{
-                value: 70
-            }]
-        }, ]
-    };
-
-
-    if (option) {
-        myChart.setOption(option);
-    }
-}
-
-
-
-
-
-
-function setCharts52(echartDom, testDom,temperature,humidity) {
-  var myChart = echarts.init(echartDom);
-  // 地图背景颜色
-  var highlight = "#03b7c9";
-
-  var demoData = [
-    {
-      name: "平均温度",
-      value: temperature,
-      unit: "℃",
-      pos: ["25%", "40%"],
-      range: [-40, 100],
-      YS: [
-        [0.4, "#119eff"],
-        [0.5, "#30da74"],
-        [1, "#f3390d"],
-      ],
-    },
-    {
-      name: "平均湿度",
-      value: humidity,
-      unit: "%",
-      pos: ["75%", "40%"],
-      range: [0, 100],
-      splitNum: 10,
-      YS: [
-        [0.3, "#f3390d"],
-        [0.8, "#30da74"],
-        [1, "#119eff"],
-      ],
-    },
-  ];
-
-  option = {
-  
-    series: (function () {
-      var result = [];
-
-      demoData.forEach(function (item) {
-        result.push(
-          // 外围刻度
-          {
-            type: "gauge",
-            center: item.pos,
-            radius: "50%", // 1行2个
-            splitNumber: item.splitNum || 10,
-            min: item.range[0],
-            max: item.range[1],
-            startAngle: 225,
-            endAngle: -45,
-            axisLine: {
-              show: true,
-              lineStyle: {
-                width: 20,
-                shadowBlur: 0,
-                color: [[1, highlight]],
-              },
-            },
-            axisTick: {
-              show: true,
-              lineStyle: {
-                color: highlight,
-                width: 20,
-              },
-              length: -5,
-              splitNumber: 10,
-            },
-            splitLine: {
-              show: true,
-              length: -10,
-              lineStyle: {
-                color: highlight,
-              },
-            },
-            axisLabel: {
-              distance: -18,
-              textStyle: {
-                color: highlight,
-                fontSize: "100",
-              },
-            },
-            pointer: {
-              show: 0,
-            },
-            detail: {
-              show: 0,
-            },
-          },
-          {
-            name: "速度",
-            type: "gauge",
-            center: item.pos,
-            splitNumber: item.splitNum || 10,
-            min: item.range[0],
-            max: item.range[1],
-            radius: "45%",
-            axisLine: {
-              // 坐标轴线
-              show: false,
-              lineStyle: {
-                // 属性lineStyle控制线条样式
-                color: item.YS,
-                shadowColor: "#ccc",
-                shadowBlur: 25,
-                width: 0,
-              },
-            },
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              // 坐标轴小标记
-              // show: false,
-              length: 20, // 属性length控制线长
-              lineStyle: {
-                // 属性lineStyle控制线条样式
-                color: "auto",
-                width: 20,
-              },
-            },
-            splitLine: {
-              // 分隔线
-              show: false,
-              length: 20, // 属性length控制线长
-              lineStyle: {
-                // 属性lineStyle（详见lineStyle）控制线条样式
-                color: "auto",
-              },
-            },
-            title: {
-              textStyle: {
-                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-                fontWeight: "bolder",
-                fontSize: 100,
-                fontStyle: "italic",
-              },
-            },
-            detail: {
-              show: true,
-              offsetCenter: [0, "100%"],
-              textStyle: {
-                fontSize: 100,
-              },
-              formatter: [
-                "{value} " + (item.unit || ""),
-                "{name|" + item.name + "}",
-              ].join("\n"),
-              rich: {
-                name: {
-                  fontSize: 100,
-                  lineHeight: 30,
-                  color: "#4be4de",
-                },
-              },
-            },
-            data: [
-              {
-                value: item.value,
-              },
-            ],
-            pointer: {
-              width: 50,
-            },
-          },
-          // 内侧指针、数值显示
-          {
-            name: item.name,
-            type: "gauge",
-            center: item.pos,
-            radius: "40%",
-            startAngle: 225,
-            endAngle: -45,
-            min: item.range[0],
-            max: item.range[1],
-            axisLine: {
-              show: true,
-              lineStyle: {
-                width: 16,
-                color: [[1, "rgba(75,228,255,.1)"]],
-              },
-            },
-            axisTick: {
-              show: 0,
-            },
-            splitLine: {
-              show: 0,
-            },
-            axisLabel: {
-              show: 0,
-            },
-            pointer: {
-              show: true,
-              length: "90%",
-              width: 3,
-            },
-            itemStyle: {
-              //表盘指针的颜色
-              color: "rgba(255, 153, 0, 0.31)",
-              borderColor: "#ff9900",
-              borderWidth: 1,
-              fontSize:110
-            },
-            detail: {
-              show: false,
-              offsetCenter: [0, "100%"],
-              textStyle: {
-                fontSize: 20,
-                color: "#00eff2",
-              },
-              formatter: [
-                "{value} " + (item.unit || ""),
-                "{name|" + item.name + "}",
-              ].join("\n"),
-              rich: {
-                name: {
-                  fontSize: 100,
-                  lineHeight: 30,
-                  color: "#00eff2",
-                },
-              },
-            },
-
-            data: [
-              {
-                value: item.value,
-              },
-            ],
-          }
-        );
-      });
-      return result;
-    })(),
-  };
-
-  if (option) {
-    myChart.setOption(option);
-  }
-
-  obsDom(testDom, myChart);
-}
-
-function setCharts53(echartDom, testDom) {
-  let timer = null;
-
-  var myChart = echarts.init(echartDom);
-  // 地图背景颜色
-  data = [{
-          name: "空调",
-          value: (Math.random() * 10).toFixed(0),
-          sum: 10,
-      },
-      {
-          name: "配电",
-          value: (Math.random() * 10).toFixed(0),
-          sum: 10,
-      },
-      {
-          name: "UPS",
-          value: (Math.random() * 10).toFixed(0),
-          sum: 10,
-      },
-      {
-          name: "温湿度",
-          value: (Math.random() * 10).toFixed(0),
-          sum: 10,
-      },
-      {
-          name: "烟感",
-          value: (Math.random() * 10).toFixed(0),
-          sum: 10,
-      },
-      {
-          name: "漏水",
-          value: (Math.random() * 10).toFixed(0),
-          sum: 10,
-      },
-  ];
-  getArrByKey = (data, k) => {
-      let key = k || "value";
-      let res = [];
-      if (data) {
-          data.forEach(function(t) {
-              res.push(t[key]);
-          });
-      }
-      return res;
-  };
-  opt = {
-      index: 0,
-  };
-  color = ["#f85e35", "#d68f52", "#3fa4a9"];
-  data = data.sort((a, b) => {
-      return b.value - a.value;
-  });
-  option = {
-      grid: {
-          top: "2%",
-          bottom: -15,
-          right: 30,
-          left: -30,
-          containLabel: true,
-      },
-      xAxis: {
-          show: false,
-      },
-      yAxis: [{
-              triggerEvent: true,
-              show: true,
-              inverse: true,
-              data: getArrByKey(data, "name"),
-              axisLine: {
-                  show: false,
-              },
-              splitLine: {
-                  show: false,
-              },
-              axisTick: {
-                  show: false,
-              },
-              axisLabel: {
-                  interval: 0,
-                  color: "#fff",
-                  align: "left",
-                  margin: 80,
-                  fontSize: 100,
-                  formatter: function(value, index) {
-                      if (opt.index === 0 && index < 3) {
-                          return (
-                              "{idx" + index + "|" + (1 + index) + "} {title|" + value + "}"
-                          );
-                      } else if (opt.index !== 0 && index + opt.index < 9) {
-                          return (
-                              "{idx|0" + (1 + index + opt.index) + "} {title|" + value + "}"
-                          );
-                      } else {
-                          return (
-                              "{idx|" + (1 + index + opt.index) + "} {title|" + value + "}"
-                          );
-                      }
-                  },
-                  rich: {
-                      idx0: {
-                          color: "#FB375E",
-                          backgroundColor: "#FFE8EC",
-                          borderRadius: 100,
-                          padding: [5, 8],
-                      },
-                      idx1: {
-                          color: "#FF9023",
-                          backgroundColor: "#FFEACF",
-                          borderRadius: 100,
-                          padding: [5, 8],
-                      },
-                      idx2: {
-                          color: "#01B599",
-                          backgroundColor: "#E1F7F3",
-                          borderRadius: 100,
-                          padding: [5, 8],
-                      },
-                      idx: {
-                          color: "#fff",
-                          borderRadius: 100,
-                          padding: [5, 8],
-                      },
-                      title: {
-                          width: 165,
-                      },
-                  },
-              },
-          },
-          {
-              triggerEvent: true,
-              show: true,
-              inverse: true,
-              data: getArrByKey(data, "name"),
-              axisLine: {
-                  show: false,
-              },
-              splitLine: {
-                  show: false,
-              },
-              axisTick: {
-                  show: false,
-              },
-              axisLabel: {
-                  interval: 0,
-                  color: "#fff",
-                  align: "left",
-                  margin: 20,
-                  fontSize: 100,
-                  formatter: function(value, index) {
-                      return data[index].value + "条";
-                  },
-              },
-          },
-      ],
-      series: [{
-          name: "条",
-          type: "bar",
-          yAxisIndex: 0,
-          data: data,
-          barWidth: 10,
-          itemStyle: {
-              color: (val) => {
-                  if (val.dataIndex < 3 && opt.index === 0) {
-                      return color[val.dataIndex];
-                  } else {
-                      return "#1990FF";
-                  }
-              },
-              barBorderRadius: 30,
-          },
-      }, ],
-  };
-
-  if (option) {
-      myChart.setOption(option);
-  }
-
-  window.addEventListener("resize", function() {
-      if (timer) {
-          clearTimeout(timer);
-          timer = null;
-      }
-      timer = setTimeout(() => {
-          move3(".test53 .test-box");
-
-          myChart.resize();
-      }, 500);
-  });
-
-  if (!testDom) {
-      testDom = document.querySelectorAll(".test53 .box");
-  }
-  obsDom(testDom, myChart);
-}
-
-function setCharts54(echartDom, testDom) {
-  var myChart = echarts.init(echartDom);
-  // 地图背景颜色
-  var seriesData = [
-    {
-      name: "机柜",
-      value: "480",
-    },
-    {
-      name: "服务器",
-      value: "300",
-    },
-    {
-      name: "交换机",
-      value: "240",
-    },
-    {
-      name: "路由器",
-      value: "120",
-    },
-    {
-      name: "PDU",
-      value: "60",
-    },
-  ];
-  var legendData = [
-    "机柜",
-    "服务器",
-    "交换机",
-    "路由器",
-    "PDU",
-  ];
-  var colorList = ["#73DDFF", "#73ACFF", "#FDD56A", "#FDB36A", "#FD866A"];
-  option = {
- 
-    title: {
-      text: "",
-      x: "center",
-      y: "center",
-      textStyle: {
-        color: "#fff",
-      },
-    },
-    tooltip: {
-      trigger: "item",
-      borderColor: "rgba(255,255,255,.3)",
-      backgroundColor: "rgba(13,5,30,.6)",
-      borderWidth: 1,
-      padding: 5,
-      formatter: function (parms) {
-        var str =
-          parms.marker +
-          "" +
-          parms.data.name +
-          "</br>" +
-          "数量：" +
-          parms.data.value +
-          "头</br>" +
-          "占比：" +
-          parms.percent +
-          "%";
-        return str;
-      },
-    },
-    legend: {
-      type: "scroll",
-      orient: "vertical",
-      left: "left",
-      align: "auto",
-      top: "middle",
-      textStyle: {
-        color: "#fff",
-      },
-      data: legendData,
-    },
-    series: [
-      {
-        type: "pie",
-        z: 3,
-        center: ["50%", "50%"],
-        radius: ["25%", "45%"],
-        clockwise: true,
-        avoidLabelOverlap: true,
-        hoverOffset: 15,
-        itemStyle: {
-          normal: {
-            color: function (params) {
-              return colorList[params.dataIndex];
-            },
-          },
-        },
-        label: {
-          show: true,
-          position: "outside",
-          formatter: "{a|{b}：{d}%}\n{hr|}",
-          rich: {
-            hr: {
-              backgroundColor: "t",
-              borderRadius: 3,
-              width: 3,
-              height: 3,
-              padding: [3, 3, 0, -12],
-            },
-            a: {
-              padding: [-30, 15, -20, 15],
-            },
-          },
-        },
-        labelLine: {
-          normal: {
-            length: 20,
-            length2: 30,
-            lineStyle: {
-              width: 1,
-            },
-          },
-        },
-        data: seriesData,
-      },
-      {
-        name: "第一层环",
-        type: "pie",
-        z: 2,
-        tooltip: {
-          show: false,
-        },
-        center: ["50%", "50%"],
-        radius: ["45%", "58%"],
-        hoverAnimation: false,
-        clockWise: false,
-        itemStyle: {
-          normal: {
-            // shadowBlur: 40,
-            // shadowColor: 'rgba(0, 255, 255,.3)',
-            color: "rgba(1,15,80,.4)",
-          },
-          emphasis: {
-            color: "rgba(1,15,80,.4)",
-          },
-        },
-        label: {
-          show: false,
-        },
-        data: [100],
-      },
-      {
-        name: "第二层环",
-        type: "pie",
-        z: 1,
-        tooltip: {
-          show: false,
-        },
-        center: ["50%", "50%"],
-        radius: ["58%", "76%"],
-        hoverAnimation: false,
-        clockWise: false,
-        itemStyle: {
-          normal: {
-            // shadowBlur: 40,
-            // shadowColor: 'rgba(0, 255, 255,.3)',
-            color: "rgba(0,15,69,.2)",
-          },
-          emphasis: {
-            color: "rgba(0,15,69,.2)",
-          },
-        },
-        label: {
-          show: false,
-        },
-        data: [100],
-      },
-    ],
-  };
-  if (option) {
-    myChart.setOption(option);
-  }
-
-  if (!testDom) {
-    testDom = document.querySelectorAll(".test54 .box");
-  }
-  obsDom(testDom, myChart);
-}
-
-
-function setCharts58(echartDom, testDom,leackgePosition,eleRes) {
-  var myChart = echarts.init(echartDom);
-  // 地图背景颜色
-  var highlight = "#03b7c9";
-
-  var demoData = [
-    {
-      name: "漏水位置",
-      value: leackgePosition,
-      unit: "/米",
-      pos: ["25%", "40%"],
-      range: [-40, 100],
-      YS: [
-        [0.4, "#119eff"],
-        [0.5, "#30da74"],
-        [1, "#f3390d"],
-      ],
-    },
-    {
-      name: "电阻率",
-      value: eleRes,
-      unit: "",
-      pos: ["75%", "40%"],
-      range: [0, 100],
-      splitNum: 10,
-      YS: [
-        [0.3, "#f3390d"],
-        [0.8, "#30da74"],
-        [1, "#119eff"],
-      ],
-    },
-  ];
-
-  option = {
-    series: (function () {
-      var result = [];
-
-      demoData.forEach(function (item) {
-        result.push(
-          // 外围刻度
-          {
-            type: "gauge",
-            center: item.pos,
-            radius: "50%", // 1行2个
-            splitNumber: item.splitNum || 10,
-            min: item.range[0],
-            max: item.range[1],
-            startAngle: 225,
-            endAngle: -45,
-            axisLine: {
-              show: true,
-              lineStyle: {
-                width: 2,
-                shadowBlur: 0,
-                color: [[1, highlight]],
-              },
-            },
-            axisTick: {
-              show: true,
-              lineStyle: {
-                color: highlight,
-                width: 1,
-              },
-              length: -5,
-              splitNumber: 10,
-            },
-            splitLine: {
-              show: true,
-              length: -10,
-              lineStyle: {
-                color: highlight,
-              },
-            },
-            axisLabel: {
-              distance: -18,
-              textStyle: {
-                color: highlight,
-                fontSize: "100",
-              },
-            },
-            pointer: {
-              show: 0,
-            },
-            detail: {
-              show: 0,
-            },
-          },
-          {
-            name: "速度",
-            type: "gauge",
-            center: item.pos,
-            splitNumber: item.splitNum || 10,
-            min: item.range[0],
-            max: item.range[1],
-            radius: "45%",
-            axisLine: {
-              // 坐标轴线
-              show: false,
-              lineStyle: {
-                // 属性lineStyle控制线条样式
-                color: item.YS,
-                shadowColor: "#ccc",
-                shadowBlur: 25,
-                width: 0,
-              },
-            },
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              // 坐标轴小标记
-              // show: false,
-              length: 20, // 属性length控制线长
-              lineStyle: {
-                // 属性lineStyle控制线条样式
-                color: "auto",
-                width: 2,
-              },
-            },
-            splitLine: {
-              // 分隔线
-              show: false,
-              length: 20, // 属性length控制线长
-              lineStyle: {
-                // 属性lineStyle（详见lineStyle）控制线条样式
-                color: "auto",
-              },
-            },
-            title: {
-              textStyle: {
-                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-                fontWeight: "bolder",
-                fontSize: 100,
-                fontStyle: "italic",
-              },
-            },
-            detail: {
-              show: true,
-              offsetCenter: [0, "100%"],
-              textStyle: {
-                fontSize: 100,
-              },
-              formatter: [
-                "{value} " + (item.unit || ""),
-                "{name|" + item.name + "}",
-              ].join("\n"),
-              rich: {
-                name: {
-                  fontSize: 100,
-                  lineHeight: 30,
-                  color: "#4be4de",
-                },
-              },
-            },
-            data: [
-              {
-                value: item.value,
-              },
-            ],
-            pointer: {
-              width: 5,
-            },
-          },
-          // 内侧指针、数值显示
-          {
-            name: item.name,
-            type: "gauge",
-            center: item.pos,
-            radius: "40%",
-            startAngle: 225,
-            endAngle: -45,
-            min: item.range[0],
-            max: item.range[1],
-            axisLine: {
-              show: true,
-              lineStyle: {
-                width: 16,
-                color: [[1, "rgba(75,228,255,.1)"]],
-              },
-            },
-            axisTick: {
-              show: 0,
-            },
-            splitLine: {
-              show: 0,
-            },
-            axisLabel: {
-              show: 0,
-            },
-            pointer: {
-              show: true,
-              length: "90%",
-              width: 3,
-            },
-            itemStyle: {
-              //表盘指针的颜色
-              color: "rgba(255, 153, 0, 0.31)",
-              borderColor: "#ff9900",
-              borderWidth: 1,
-            },
-            detail: {
-              show: false,
-              offsetCenter: [0, "100%"],
-              textStyle: {
-                fontSize: 100,
-                color: "#00eff2",
-              },
-              formatter: [
-                "{value} " + (item.unit || ""),
-                "{name|" + item.name + "}",
-              ].join("\n"),
-              rich: {
-                name: {
-                  fontSize: 100,
-                  lineHeight: 30,
-                  color: "#00eff2",
-                },
-              },
-            },
-
-            data: [
-              {
-                value: item.value,
-              },
-            ],
-          }
-        );
-      });
-      return result;
-    })(),
-  };
-  if (option) {
-    myChart.setOption(option);
-  }
-
-  if (!testDom) {
-    testDom = document.querySelectorAll(".test58 .box");
-  }
-  obsDom(testDom, myChart);
-}
-
-function setCharts59(echartDom, testDom,temperature,humidity) {
-  var myChart = echarts.init(echartDom);
-  // 地图背景颜色
-  var highlight = "#03b7c9";
-
-  var demoData = [
-    {
-      name: "平均温度",
-      value: temperature,
-      unit: "°",
-      pos: ["25%", "40%"],
-      range: [-40, 100],
-      YS: [
-        [0.4, "#119eff"],
-        [0.5, "#30da74"],
-        [1, "#f3390d"],
-      ],
-    },
-    {
-      name: "平均温度",
-      value: humidity,
-      unit: "°",
-      pos: ["75%", "40%"],
-      range: [0, 100],
-      splitNum: 10,
-      YS: [
-        [0.3, "#f3390d"],
-        [0.8, "#30da74"],
-        [1, "#119eff"],
-      ],
-    },
-  ];
-
-  option = {
-    series: (function () {
-      var result = [];
-
-      demoData.forEach(function (item) {
-        result.push(
-          // 外围刻度
-          {
-            type: "gauge",
-            center: item.pos,
-            radius: "50%", // 1行2个
-            splitNumber: item.splitNum || 10,
-            min: item.range[0],
-            max: item.range[1],
-            startAngle: 225,
-            endAngle: -45,
-            axisLine: {
-              show: true,
-              lineStyle: {
-                width: 2,
-                shadowBlur: 0,
-                color: [[1, highlight]],
-              },
-            },
-            axisTick: {
-              show: true,
-              lineStyle: {
-                color: highlight,
-                width: 1,
-              },
-              length: -5,
-              splitNumber: 10,
-            },
-            splitLine: {
-              show: true,
-              length: -10,
-              lineStyle: {
-                color: highlight,
-              },
-            },
-            axisLabel: {
-              distance: -18,
-              textStyle: {
-                color: highlight,
-                fontSize: "100",
-              },
-            },
-            pointer: {
-              show: 0,
-            },
-            detail: {
-              show: 0,
-            },
-          },
-          {
-            name: "速度",
-            type: "gauge",
-            center: item.pos,
-            splitNumber: item.splitNum || 10,
-            min: item.range[0],
-            max: item.range[1],
-            radius: "45%",
-            axisLine: {
-              // 坐标轴线
-              show: false,
-              lineStyle: {
-                // 属性lineStyle控制线条样式
-                color: item.YS,
-                shadowColor: "#ccc",
-                shadowBlur: 25,
-                width: 0,
-              },
-            },
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              // 坐标轴小标记
-              // show: false,
-              length: 20, // 属性length控制线长
-              lineStyle: {
-                // 属性lineStyle控制线条样式
-                color: "auto",
-                width: 2,
-              },
-            },
-            splitLine: {
-              // 分隔线
-              show: false,
-              length: 20, // 属性length控制线长
-              lineStyle: {
-                // 属性lineStyle（详见lineStyle）控制线条样式
-                color: "auto",
-              },
-            },
-            title: {
-              textStyle: {
-                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-                fontWeight: "bolder",
-                fontSize: 100,
-                fontStyle: "italic",
-              },
-            },
-            detail: {
-              show: true,
-              offsetCenter: [0, "100%"],
-              textStyle: {
-                fontSize: 25,
-              },
-              formatter: [
-                "{value} " + (item.unit || ""),
-                "{name|" + item.name + "}",
-              ].join("\n"),
-              rich: {
-                name: {
-                  fontSize: 16,
-                  lineHeight: 30,
-                  color: "#4be4de",
-                },
-              },
-            },
-            data: [
-              {
-                value: item.value,
-              },
-            ],
-            pointer: {
-              width: 5,
-            },
-          },
-          // 内侧指针、数值显示
-          {
-            name: item.name,
-            type: "gauge",
-            center: item.pos,
-            radius: "40%",
-            startAngle: 225,
-            endAngle: -45,
-            min: item.range[0],
-            max: item.range[1],
-            axisLine: {
-              show: true,
-              lineStyle: {
-                width: 16,
-                color: [[1, "rgba(75,228,255,.1)"]],
-              },
-            },
-            axisTick: {
-              show: 0,
-            },
-            splitLine: {
-              show: 0,
-            },
-            axisLabel: {
-              show: 0,
-            },
-            pointer: {
-              show: true,
-              length: "90%",
-              width: 3,
-            },
-            itemStyle: {
-              //表盘指针的颜色
-              color: "rgba(255, 153, 0, 0.31)",
-              borderColor: "#ff9900",
-              borderWidth: 1,
-            },
-            detail: {
-              show: false,
-              offsetCenter: [0, "100%"],
-              textStyle: {
-                fontSize: 20,
-                color: "#00eff2",
-              },
-              formatter: [
-                "{value} " + (item.unit || ""),
-                "{name|" + item.name + "}",
-              ].join("\n"),
-              rich: {
-                name: {
-                  fontSize: 14,
-                  lineHeight: 30,
-                  color: "#00eff2",
-                },
-              },
-            },
-
-            data: [
-              {
-                value: item.value,
-              },
-            ],
-          }
-        );
-      });
-      return result;
-    })(),
-  };
-  if (option) {
-    myChart.setOption(option);
-  }
-
-  if (!testDom) {
-    testDom = document.querySelectorAll(".test59 .box");
-  }
-  obsDom(testDom, myChart);
-}
+/**
+ * 健康状态charts
+ */
+
+// setTimeout(() => {
+//     setChartsDom(document.querySelector('.charts1'))
+// }, 500);
+
+// setTimeout(() => {
+//     setChartsDom(document.querySelector('.charts2'))
+// }, 1000);
+
+// setTimeout(() => {
+//     setChartsDom(document.querySelector('.charts3'))
+// }, 1500);
+
+function setChartsDom(echartDom) {
+  const myChart = echarts.init(echartDom);
+  const option = {
+    series: [
+      {
+        type: "gauge",
+        z: 100,
+        axisLine: {
+          lineStyle: {
+            width: 5,
+            color: [
+              [
+                0.3,
+                new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                  {
+                    offset: 0,
+                    color: "rgba(0, 237, 3,0.1)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(0, 237, 3,0.6)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(0, 237, 3,1)",
+                  },
+                ]),
+              ],
+              [
+                0.7,
+                new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                  {
+                    offset: 0,
+                    color: "rgba(255, 184, 0,0.1)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(255, 184, 0,0.6)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(255, 184, 0,1)",
+                  },
+                ]),
+              ],
+              [
+                1,
+                new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                  {
+                    offset: 0,
+                    color: "rgba(175, 36, 74,0.1)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(255, 36, 74,0.6)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(255, 36, 74,1)",
+                  },
+                ]),
+              ],
+            ],
+          },
+        },
+        // radius: '50%',
+        pointer: {
+          itemStyle: {
+            color: "auto",
+          },
+        },
+        axisTick: {
+          distance: 0,
+          length: 8,
+          lineStyle: {
+            color: "auto",
+            width: 2,
+          },
+        },
+        splitLine: {
+          distance: 0,
+          length: 20,
+          lineStyle: {
+            color: "auto",
+            width: 4,
+          },
+        },
+        axisLabel: {
+          color: "white",
+          distance: 30,
+          fontSize: 130,
+        },
+        detail: {
+          valueAnimation: true,
+          formatter: "{value} %",
+          color: "white",
+        },
+        data: [
+          {
+            value: 70,
+          },
+        ],
+      },
+    ],
+  };
+
+  if (option) {
+    myChart.setOption(option);
+  }
+}
+
+function setCharts52(echartDom, testDom, temperature, humidity) {
+  let timer = null;
+
+  var myChart = echarts.init(echartDom);
+  // 地图背景颜色
+
+  var highlight = "#03b7c9";
+
+  var demoData = [
+    {
+      name: "温度",
+      value: 22,
+      unit: "℃",
+      pos: ["25%", "40%"],
+      range: [-40, 100],
+      YS: [
+        [0.4, "#119eff"],
+        [0.5, "#30da74"],
+        [1, "#f3390d"],
+      ],
+    },
+    {
+      name: "湿度",
+      value: 90,
+      unit: "%",
+      pos: ["75%", "40%"],
+      range: [0, 100],
+      splitNum: 10,
+      YS: [
+        [0.3, "#f3390d"],
+        [0.8, "#30da74"],
+        [1, "#119eff"],
+      ],
+    },
+  ];
+
+  option = {
+    backgroundColor: "#00162d",
+    series: (function () {
+      var result = [];
+
+      demoData.forEach(function (item) {
+        result.push(
+          // 外围刻度
+          {
+            type: "gauge",
+            center: item.pos,
+            radius: "50%", // 1行2个
+            splitNumber: item.splitNum || 10,
+            min: item.range[0],
+            max: item.range[1],
+            startAngle: 225,
+            endAngle: -45,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                width: 2,
+                shadowBlur: 0,
+                color: [[1, highlight]],
+              },
+            },
+            axisTick: {
+              show: true,
+              lineStyle: {
+                color: highlight,
+                width: 1,
+              },
+              length: -5,
+              splitNumber: 10,
+            },
+            splitLine: {
+              show: true,
+              length: -10,
+              lineStyle: {
+                color: highlight,
+              },
+            },
+            axisLabel: {
+              distance: -18,
+              textStyle: {
+                color: highlight,
+                fontSize: "10",
+              },
+            },
+            pointer: {
+              show: 0,
+            },
+            detail: {
+              show: 0,
+            },
+          },
+          {
+            name: "速度",
+            type: "gauge",
+            center: item.pos,
+            splitNumber: item.splitNum || 10,
+            min: item.range[0],
+            max: item.range[1],
+            radius: "45%",
+            axisLine: {
+              // 坐标轴线
+              show: false,
+              lineStyle: {
+                // 属性lineStyle控制线条样式
+                color: item.YS,
+                shadowColor: "#ccc",
+                shadowBlur: 25,
+                width: 0,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              // 坐标轴小标记
+              // show: false,
+              length: 20, // 属性length控制线长
+              lineStyle: {
+                // 属性lineStyle控制线条样式
+                color: "auto",
+                width: 2,
+              },
+            },
+            splitLine: {
+              // 分隔线
+              show: false,
+              length: 20, // 属性length控制线长
+              lineStyle: {
+                // 属性lineStyle（详见lineStyle）控制线条样式
+                color: "auto",
+              },
+            },
+            title: {
+              textStyle: {
+                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                fontWeight: "bolder",
+                fontSize: 20,
+                fontStyle: "italic",
+              },
+            },
+            detail: {
+              show: true,
+              offsetCenter: [0, "100%"],
+              textStyle: {
+                fontSize: 25,
+              },
+              formatter: [
+                "{value} " + (item.unit || ""),
+                "{name|" + item.name + "}",
+              ].join("\n"),
+              rich: {
+                name: {
+                  fontSize: 16,
+                  lineHeight: 30,
+                  color: "#4be4de",
+                },
+              },
+            },
+            data: [
+              {
+                value: item.value,
+              },
+            ],
+            pointer: {
+              width: 5,
+            },
+          },
+          // 内侧指针、数值显示
+          {
+            name: item.name,
+            type: "gauge",
+            center: item.pos,
+            radius: "40%",
+            startAngle: 225,
+            endAngle: -45,
+            min: item.range[0],
+            max: item.range[1],
+            axisLine: {
+              show: true,
+              lineStyle: {
+                width: 16,
+                color: [[1, "rgba(75,228,255,.1)"]],
+              },
+            },
+            axisTick: {
+              show: 0,
+            },
+            splitLine: {
+              show: 0,
+            },
+            axisLabel: {
+              show: 0,
+            },
+            pointer: {
+              show: true,
+              length: "90%",
+              width: 3,
+            },
+            itemStyle: {
+              //表盘指针的颜色
+              color: "rgba(255, 153, 0, 0.31)",
+              borderColor: "#ff9900",
+              borderWidth: 1,
+            },
+            detail: {
+              show: false,
+              offsetCenter: [0, "100%"],
+              textStyle: {
+                fontSize: 20,
+                color: "#00eff2",
+              },
+              formatter: [
+                "{value} " + (item.unit || ""),
+                "{name|" + item.name + "}",
+              ].join("\n"),
+              rich: {
+                name: {
+                  fontSize: 14,
+                  lineHeight: 30,
+                  color: "#00eff2",
+                },
+              },
+            },
+
+            data: [
+              {
+                value: item.value,
+              },
+            ],
+          }
+        );
+      });
+      return result;
+    })(),
+  };
+
+  if (option) {
+    myChart.setOption(option);
+  }
+
+  window.addEventListener("resize", function () {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    timer = setTimeout(() => {
+      move2(".test52 .test-box");
+      myChart.resize();
+    }, 500);
+  });
+  if (!testDom) {
+    testDom = document.querySelectorAll(".test52 .box");
+  }
+  obsDom(testDom, myChart);
+}
+
+function setCharts53(echartDom, testDom) {
+  let timer = null;
+
+  var myChart = echarts.init(echartDom);
+  // 地图背景颜色
+  data = [
+    {
+      name: "空调",
+      value: (Math.random() * 10).toFixed(0),
+      sum: 10,
+    },
+    {
+      name: "配电",
+      value: (Math.random() * 10).toFixed(0),
+      sum: 10,
+    },
+    {
+      name: "UPS",
+      value: (Math.random() * 10).toFixed(0),
+      sum: 10,
+    },
+    {
+      name: "温湿度",
+      value: (Math.random() * 10).toFixed(0),
+      sum: 10,
+    },
+    {
+      name: "烟感",
+      value: (Math.random() * 10).toFixed(0),
+      sum: 10,
+    },
+    {
+      name: "漏水",
+      value: (Math.random() * 10).toFixed(0),
+      sum: 10,
+    },
+  ];
+  getArrByKey = (data, k) => {
+    let key = k || "value";
+    let res = [];
+    if (data) {
+      data.forEach(function (t) {
+        res.push(t[key]);
+      });
+    }
+    return res;
+  };
+  opt = {
+    index: 0,
+  };
+  color = ["#f85e35", "#d68f52", "#3fa4a9"];
+  data = data.sort((a, b) => {
+    return b.value - a.value;
+  });
+  option = {
+    grid: {
+      top: "2%",
+      bottom: -15,
+      right: 30,
+      left: -30,
+      containLabel: true,
+    },
+    xAxis: {
+      show: false,
+    },
+    yAxis: [
+      {
+        triggerEvent: true,
+        show: true,
+        inverse: true,
+        data: getArrByKey(data, "name"),
+        axisLine: {
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          interval: 0,
+          color: "#fff",
+          align: "left",
+          margin: 450,
+          fontSize: 130,
+          // formatter: function (value, index) {
+          //   if (opt.index === 0 && index < 3) {
+          //     return (
+          //       "{idx" + index + "|" + (1 + index) + "} {title|" + value + "}"
+          //     );
+          //   } else if (opt.index !== 0 && index + opt.index < 9) {
+          //     return (
+          //       "{idx|0" + (1 + index + opt.index) + "} {title|" + value + "}"
+          //     );
+          //   } else {
+          //     return (
+          //       "{idx|" + (1 + index + opt.index) + "} {title|" + value + "}"
+          //     );
+          //   }
+          // },
+          rich: {
+            idx0: {
+              color: "#FB375E",
+              backgroundColor: "#FFE8EC",
+              borderRadius: 100,
+              padding: [5, 8],
+              fontSize: 100,
+            },
+            idx1: {
+              color: "#FF9023",
+              backgroundColor: "#FFEACF",
+              borderRadius: 100,
+              padding: [5, 8],
+              fontSize: 100,
+            },
+            idx2: {
+              color: "#01B599",
+              backgroundColor: "#E1F7F3",
+              borderRadius: 100,
+              padding: [5, 8],
+              fontSize: 100,
+            },
+            idx: {
+              color: "#fff",
+              borderRadius: 100,
+              padding: [5, 8],
+              fontSize: 100,
+            },
+            title: {
+              width: 165,
+            },
+          },
+        },
+      },
+      {
+        triggerEvent: true,
+        show: true,
+        inverse: true,
+        data: getArrByKey(data, "name"),
+        axisLine: {
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          interval: 0,
+          color: "#fff",
+          align: "left",
+          margin: 20,
+          fontSize: 130,
+          formatter: function (value, index) {
+            return data[index].value + "条";
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: "条",
+        type: "bar",
+        yAxisIndex: 0,
+        data: data,
+        fontSize: 100,
+        barWidth: 50,
+        itemStyle: {
+          color: (val) => {
+            if (val.dataIndex < 3 && opt.index === 0) {
+              return color[val.dataIndex];
+            } else {
+              return "#1990FF";
+            }
+          },
+          barBorderRadius: 30,
+        },
+      },
+    ],
+  };
+
+  if (option) {
+    myChart.setOption(option);
+  }
+
+  window.addEventListener("resize", function () {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    timer = setTimeout(() => {
+      move3(".test53 .test-box");
+
+      myChart.resize();
+    }, 500);
+  });
+
+  if (!testDom) {
+    testDom = document.querySelectorAll(".test53 .box");
+  }
+  obsDom(testDom, myChart);
+}
+
+function setCharts54(echartDom, testDom) {
+  var myChart = echarts.init(echartDom);
+  // 地图背景颜色
+  option = {
+    color: [
+      "#F86464",
+      "#19DC7C",
+      "#34A6FE",
+      "#FA9022",
+      "#DCDB01",
+      "#8C70F8",
+      "#2A4AD1",
+      "#E76FE3",
+      "#5032C0",
+      "#168FB2",
+    ],
+    grid: {
+      left: "2%",
+      top: "1%",
+      bottom: 10,
+      right: "1%",
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: "item",
+      textStyle: {
+        fontSize: 130,
+      },
+      formatter: "{b} : {c} ({d}%)",
+    },
+    calculable: true,
+    series: [
+      {
+        stack: "a",
+        type: "pie",
+        radius: ["60%", "90%"],
+        center: ["50%", "55%"],
+        roseType: "area",
+        zlevel: 10,
+        label: {
+          normal: {
+            formatter: "{b}  {d}%",
+            borderWidth: 0,
+            borderRadius: 4,
+            height: 40,
+            fontSize: 130,
+            align: "center",
+            rich: {
+              b: {
+                fontSize: 130,
+                lineHeight: 5,
+                color: "#41B3DC",
+              },
+            },
+          },
+        },
+        labelLine: {
+          normal: {
+            show: true,
+            lineStyle: {
+              width: 10, // 线条的宽度
+              color: "#3f8ac9", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
+            },
+            length: 100,
+            length2: 155,
+          },
+          emphasis: {
+            show: false,
+          },
+        },
+        data: [
+          {
+            value: 5,
+            name: "机柜",
+          },
+          {
+            value: 15,
+            name: "服务器",
+          },
+          {
+            value: 25,
+            name: "交换机",
+          },
+          {
+            value: 20,
+            name: "路由器",
+          },
+          {
+            value: 35,
+            name: "PDU",
+          },
+        ],
+      },
+    ],
+  };
+
+  if (option) {
+    myChart.setOption(option);
+  }
+
+  if (!testDom) {
+    testDom = document.querySelectorAll(".test54 .box");
+  }
+  obsDom(testDom, myChart);
+}
+
+function setCharts58(echartDom, testDom, leackgePosition, eleRes) {
+  var myChart = echarts.init(echartDom);
+  // 地图背景颜色
+  var highlight = "#03b7c9";
+
+  var demoData = [
+    {
+      name: "漏水位置",
+      value: leackgePosition,
+      unit: "/米",
+      pos: ["25%", "40%"],
+      range: [-40, 100],
+      YS: [
+        [0.4, "#119eff"],
+        [0.5, "#30da74"],
+        [1, "#f3390d"],
+      ],
+    },
+    {
+      name: "电阻率",
+      value: eleRes,
+      unit: "",
+      pos: ["75%", "40%"],
+      range: [0, 100],
+      splitNum: 10,
+      YS: [
+        [0.3, "#f3390d"],
+        [0.8, "#30da74"],
+        [1, "#119eff"],
+      ],
+    },
+  ];
+
+  option = {
+    series: (function () {
+      var result = [];
+
+      demoData.forEach(function (item) {
+        result.push(
+          // 外围刻度
+          {
+            type: "gauge",
+            center: item.pos,
+            radius: "50%", // 1行2个
+            splitNumber: item.splitNum || 10,
+            min: item.range[0],
+            max: item.range[1],
+            startAngle: 225,
+            endAngle: -45,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                width: 2,
+                shadowBlur: 0,
+                color: [[1, highlight]],
+              },
+            },
+            axisTick: {
+              show: true,
+              lineStyle: {
+                color: highlight,
+                width: 1,
+              },
+              length: -5,
+              splitNumber: 10,
+            },
+            splitLine: {
+              show: true,
+              length: -10,
+              lineStyle: {
+                color: highlight,
+              },
+            },
+            axisLabel: {
+              distance: -18,
+              textStyle: {
+                color: highlight,
+                fontSize: "130",
+              },
+            },
+            pointer: {
+              show: 0,
+            },
+            detail: {
+              show: 0,
+            },
+          },
+          {
+            name: "速度",
+            type: "gauge",
+            center: item.pos,
+            splitNumber: item.splitNum || 10,
+            min: item.range[0],
+            max: item.range[1],
+            radius: "45%",
+            axisLine: {
+              // 坐标轴线
+              show: false,
+              lineStyle: {
+                // 属性lineStyle控制线条样式
+                color: item.YS,
+                shadowColor: "#ccc",
+                shadowBlur: 25,
+                width: 0,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              // 坐标轴小标记
+              // show: false,
+              length: 20, // 属性length控制线长
+              lineStyle: {
+                // 属性lineStyle控制线条样式
+                color: "auto",
+                width: 2,
+              },
+            },
+            splitLine: {
+              // 分隔线
+              show: false,
+              length: 20, // 属性length控制线长
+              lineStyle: {
+                // 属性lineStyle（详见lineStyle）控制线条样式
+                color: "auto",
+              },
+            },
+            title: {
+              textStyle: {
+                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                fontWeight: "bolder",
+                fontSize: 130,
+                fontStyle: "italic",
+              },
+            },
+            detail: {
+              show: true,
+              offsetCenter: [0, "100%"],
+              textStyle: {
+                fontSize: 130,
+              },
+              formatter: [
+                "{value} " + (item.unit || ""),
+                "{name|" + item.name + "}",
+              ].join("\n"),
+              rich: {
+                name: {
+                  fontSize: 130,
+                  lineHeight: 30,
+                  color: "#4be4de",
+                },
+              },
+            },
+            data: [
+              {
+                value: item.value,
+              },
+            ],
+            pointer: {
+              width: 5,
+            },
+          },
+          // 内侧指针、数值显示
+          {
+            name: item.name,
+            type: "gauge",
+            center: item.pos,
+            radius: "40%",
+            startAngle: 225,
+            endAngle: -45,
+            min: item.range[0],
+            max: item.range[1],
+            axisLine: {
+              show: true,
+              lineStyle: {
+                width: 16,
+                color: [[1, "rgba(75,228,255,.1)"]],
+              },
+            },
+            axisTick: {
+              show: 0,
+            },
+            splitLine: {
+              show: 0,
+            },
+            axisLabel: {
+              show: 0,
+            },
+            pointer: {
+              show: true,
+              length: "90%",
+              width: 3,
+            },
+            itemStyle: {
+              //表盘指针的颜色
+              color: "rgba(255, 153, 0, 0.31)",
+              borderColor: "#ff9900",
+              borderWidth: 1,
+            },
+            detail: {
+              show: false,
+              offsetCenter: [0, "100%"],
+              textStyle: {
+                fontSize: 130,
+                color: "#00eff2",
+              },
+              formatter: [
+                "{value} " + (item.unit || ""),
+                "{name|" + item.name + "}",
+              ].join("\n"),
+              rich: {
+                name: {
+                  fontSize: 130,
+                  lineHeight: 30,
+                  color: "#00eff2",
+                },
+              },
+            },
+
+            data: [
+              {
+                value: item.value,
+              },
+            ],
+          }
+        );
+      });
+      return result;
+    })(),
+  };
+  if (option) {
+    myChart.setOption(option);
+  }
+
+  if (!testDom) {
+    testDom = document.querySelectorAll(".test58 .box");
+  }
+  obsDom(testDom, myChart);
+}
+
+function setCharts59(echartDom, testDom, temperature, humidity) {
+  var myChart = echarts.init(echartDom);
+  // 地图背景颜色
+  var highlight = "#03b7c9";
+
+  var demoData = [
+    {
+      name: "平均温度",
+      value: temperature,
+      unit: "°",
+      pos: ["25%", "40%"],
+      range: [-40, 100],
+      YS: [
+        [0.4, "#119eff"],
+        [0.5, "#30da74"],
+        [1, "#f3390d"],
+      ],
+    },
+    {
+      name: "平均温度",
+      value: humidity,
+      unit: "°",
+      pos: ["75%", "40%"],
+      range: [0, 100],
+      splitNum: 10,
+      YS: [
+        [0.3, "#f3390d"],
+        [0.8, "#30da74"],
+        [1, "#119eff"],
+      ],
+    },
+  ];
+
+  option = {
+    series: (function () {
+      var result = [];
+
+      demoData.forEach(function (item) {
+        result.push(
+          // 外围刻度
+          {
+            type: "gauge",
+            center: item.pos,
+            radius: "50%", // 1行2个
+            splitNumber: item.splitNum || 10,
+            min: item.range[0],
+            max: item.range[1],
+            startAngle: 225,
+            endAngle: -45,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                width: 2,
+                shadowBlur: 0,
+                color: [[1, highlight]],
+              },
+            },
+            axisTick: {
+              show: true,
+              lineStyle: {
+                color: highlight,
+                width: 1,
+              },
+              length: -5,
+              splitNumber: 10,
+            },
+            splitLine: {
+              show: true,
+              length: -10,
+              lineStyle: {
+                color: highlight,
+              },
+            },
+            axisLabel: {
+              distance: -18,
+              textStyle: {
+                color: highlight,
+                fontSize: "130",
+              },
+            },
+            pointer: {
+              show: 0,
+            },
+            detail: {
+              show: 0,
+            },
+          },
+          {
+            name: "速度",
+            type: "gauge",
+            center: item.pos,
+            splitNumber: item.splitNum || 10,
+            min: item.range[0],
+            max: item.range[1],
+            radius: "45%",
+            axisLine: {
+              // 坐标轴线
+              show: false,
+              lineStyle: {
+                // 属性lineStyle控制线条样式
+                color: item.YS,
+                shadowColor: "#ccc",
+                shadowBlur: 25,
+                width: 0,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              // 坐标轴小标记
+              // show: false,
+              length: 20, // 属性length控制线长
+              lineStyle: {
+                // 属性lineStyle控制线条样式
+                color: "auto",
+                width: 2,
+              },
+            },
+            splitLine: {
+              // 分隔线
+              show: false,
+              length: 20, // 属性length控制线长
+              lineStyle: {
+                // 属性lineStyle（详见lineStyle）控制线条样式
+                color: "auto",
+              },
+            },
+            title: {
+              textStyle: {
+                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                fontWeight: "bolder",
+                fontSize: 130,
+                fontStyle: "italic",
+              },
+            },
+            detail: {
+              show: true,
+              offsetCenter: [0, "100%"],
+              textStyle: {
+                fontSize: 100,
+              },
+              formatter: [
+                "{value} " + (item.unit || ""),
+                "{name|" + item.name + "}",
+              ].join("\n"),
+              rich: {
+                name: {
+                  fontSize: 130,
+                  lineHeight: 30,
+                  color: "#4be4de",
+                },
+              },
+            },
+            data: [
+              {
+                value: item.value,
+              },
+            ],
+            pointer: {
+              width: 5,
+            },
+          },
+          // 内侧指针、数值显示
+          {
+            name: item.name,
+            type: "gauge",
+            center: item.pos,
+            radius: "40%",
+            startAngle: 225,
+            endAngle: -45,
+            min: item.range[0],
+            max: item.range[1],
+            axisLine: {
+              show: true,
+              lineStyle: {
+                width: 16,
+                color: [[1, "rgba(75,228,255,.1)"]],
+              },
+            },
+            axisTick: {
+              show: 0,
+            },
+            splitLine: {
+              show: 0,
+            },
+            axisLabel: {
+              show: 0,
+            },
+            pointer: {
+              show: true,
+              length: "90%",
+              width: 3,
+            },
+            itemStyle: {
+              //表盘指针的颜色
+              color: "rgba(255, 153, 0, 0.31)",
+              borderColor: "#ff9900",
+              borderWidth: 1,
+            },
+            detail: {
+              show: false,
+              offsetCenter: [0, "100%"],
+              textStyle: {
+                fontSize: 100,
+                color: "#00eff2",
+              },
+              formatter: [
+                "{value} " + (item.unit || ""),
+                "{name|" + item.name + "}",
+              ].join("\n"),
+              rich: {
+                name: {
+                  fontSize: 100,
+                  lineHeight: 30,
+                  color: "#00eff2",
+                },
+              },
+            },
+
+            data: [
+              {
+                value: item.value,
+              },
+            ],
+          }
+        );
+      });
+      return result;
+    })(),
+  };
+  if (option) {
+    myChart.setOption(option);
+  }
+
+  if (!testDom) {
+    testDom = document.querySelectorAll(".test59 .box");
+  }
+  obsDom(testDom, myChart);
+}

spring-cloud/server-page/src/main/resources/static/testEcharts/test/main/springFrame1.html

@@ -339,7 +339,7 @@
   // 数据统计
   function sp1Ajax11() {
     $.ajax({
-    url: "http://23.37.100.87:8084" + "/basic/safetyInfor/getSafetyInfoByMonth",
+    url: "http://23.37.100.80:8084" + "/basic/safetyInfor/getSafetyInfoByMonth",
     data: {
       orgType: 3
     },
@@ -363,7 +363,7 @@
   // 局本级门户网站
   function sp1Ajax12() {
     $.ajax({
-      url: "http://23.37.100.87:8084" + "/basic/safetyInfor/getWebSafetyStatusByOrg",
+      url: "http://23.37.100.80:8084" + "/basic/safetyInfor/getWebSafetyStatusByOrg",
       data: {
         orgType: 3
       },
@@ -418,7 +418,7 @@
   // 终端安全态势
   function sp1Ajax14() {
     $.ajax({
-      url: "http://23.37.100.87:8084" + "/basic/OfficeVirus/getOfficeSafetyInfo",
+      url: "http://23.37.100.80:8084" + "/basic/OfficeVirus/getOfficeSafetyInfo",
       data: {
         orgType: 3
       },
@@ -455,7 +455,7 @@
   let sp1flag = false;
   function sp1Ajax15() {
     $.ajax({
-      url: "http://23.37.100.87:8084" + "/basic/AttackType/getTopAttackType",
+      url: "http://23.37.100.80:8084" + "/basic/AttackType/getTopAttackType",
       data: {
         orgType: 3
       },
@@ -491,7 +491,7 @@
   // 应急保障组成员信息
   function sp1Ajax17() {
     $.ajax({
-      url: "http://23.37.100.87:8084" + "/basic/GuaranteeGroup/getAllGuaranteeGroup",
+      url: "http://23.37.100.80:8084" + "/basic/GuaranteeGroup/getAllGuaranteeGroup",
       success: function (res) {
         const result = res.result;
         console.log('应急保障组成员信息', result);

spring-cloud/server-page/src/main/resources/static/testEcharts/test/main/springFrame3.html

@@ -371,7 +371,7 @@
     // 数据统计
     function sp3Ajax18() {
       $.ajax({
-        url: "http://23.37.100.87:8084" + "/basic/safetyInfor/getSafetyInfoByMonth",
+        url: "http://23.37.100.80:8084" + "/basic/safetyInfor/getSafetyInfoByMonth",
         data: {
             orgType: 1
         },
@@ -390,7 +390,7 @@
 
 function sp3Ajax19() {
   $.ajax({
-        url: "http://23.37.100.87:8084" + "/basic/safetyInfor/getRiskInfoByOrg",
+        url: "http://23.37.100.80:8084" + "/basic/safetyInfor/getRiskInfoByOrg",
         data: {
             orgType: 1
         },
@@ -441,7 +441,7 @@ function sp3Ajax19() {
     //  漏洞趋势
     function myAjax1() {
         $.ajax({
-            url: "http://23.37.100.87:8084" +
+            url: "http://23.37.100.80:8084" +
                 "/basic/SystemRisk/analyzeSystemRiskByMonth",
             data: {},
             success: function(res) {
@@ -463,7 +463,7 @@ function sp3Ajax19() {
     //   业务系统
 function sp3Ajax21() {
   $.ajax({
-        url: "http://23.37.100.87:8084" + "/basic/safetyInfor/getSysStatusByOrg",
+        url: "http://23.37.100.80:8084" + "/basic/safetyInfor/getSysStatusByOrg",
         data: {
             orgType: 1
         },
@@ -486,7 +486,7 @@ function sp3Ajax21() {
     let flag22 = false;
     function sp3Ajax22() {
       $.ajax({
-        url: "http://23.37.100.87:8084" + "/basic/SystemRisk/getHighStatus",
+        url: "http://23.37.100.80:8084" + "/basic/SystemRisk/getHighStatus",
         data: {
             orgType: 1,
             Status: 1
@@ -526,7 +526,7 @@ function sp3Ajax21() {
     //   高危业务系统趋势
     function myAjax2() {
         $.ajax({
-            url: "http://23.37.100.87:8084" + "/basic/SystemRisk/getHighStatusByMonth",
+            url: "http://23.37.100.80:8084" + "/basic/SystemRisk/getHighStatusByMonth",
             data: {
                 orgType: 1
             },
@@ -546,7 +546,7 @@ function sp3Ajax21() {
     //   攻击事件类型
     function myAjax3() {
         $.ajax({
-            url: "http://23.37.100.87:8084" + "/basic/AttackEvent/getAttackEventByInfo",
+            url: "http://23.37.100.80:8084" + "/basic/AttackEvent/getAttackEventByInfo",
             data: {
                 orgType: 1
             },

spring-cloud/server-page/src/main/resources/static/testEcharts/test/main/springFrame4.html

@@ -264,7 +264,7 @@
     // 数据统计
     function sp4Ajax25() {
       $.ajax({
-        url: "http://23.37.100.87:8084" + "/basic/safetyInfor/getSafetyInfoByMonth",
+        url: "http://23.37.100.80:8084" + "/basic/safetyInfor/getSafetyInfoByMonth",
         data: {
             orgType: 2
         },
@@ -295,7 +295,7 @@
     let flag26 = false;
     function sp4Ajax26() {
       $.ajax({
-        url: "http://23.37.100.87:8084" + "/basic/safetyInfor/getRiskInfoByOrg",
+        url: "http://23.37.100.80:8084" + "/basic/safetyInfor/getRiskInfoByOrg",
         data: {
             orgType: 2
         },
@@ -344,7 +344,7 @@
     }, 60*1000);
     function sp4Ajax27() {
       $.ajax({
-        url: "http://23.37.100.87:8084" + "/basic/RiskType/getSysRiskType",
+        url: "http://23.37.100.80:8084" + "/basic/RiskType/getSysRiskType",
         data: {
             orgType: 2,
             riskClassify: 1
@@ -377,7 +377,7 @@
     // 业务系统
     function sp4Ajax28() {
     $.ajax({
-        url: "http://23.37.100.87:8084" + "/basic/safetyInfor/getSysStatusByOrg",
+        url: "http://23.37.100.80:8084" + "/basic/safetyInfor/getSysStatusByOrg",
         data: {
             orgType: 2
         },
@@ -412,7 +412,7 @@
     // 攻击拦截类型
     function sp4Ajax29() {
       $.ajax({
-        url: "http://23.37.100.87:8084" + "/basic/AttackType/getAttackTypeByMonth",
+        url: "http://23.37.100.80:8084" + "/basic/AttackType/getAttackTypeByMonth",
         data: {
             orgType: 2
         },
@@ -450,7 +450,7 @@
     let flag30 = false;
     function sp4Ajax30() {
       $.ajax({
-        url: "http://23.37.100.87:8084" + "/basic/SystemAttacked/getSystemAttackedByInfo",
+        url: "http://23.37.100.80:8084" + "/basic/SystemAttacked/getSystemAttackedByInfo",
         data: {
             orgType: 2
         },

spring-cloud/server-page/src/main/resources/static/testEcharts/test/main/springFrame5.html

@@ -72,13 +72,13 @@
   <div
     class="box55 box"
     data-name="test55"
-    style="width: 2608px; height: 1332px; left: 7472px; top: 1300px"
+    style="width: 2980px; height: 1332px; left: 7472px; top: 1300px"
   >
     <div class="test-box">
       <div class="content">
         <div class="floor-dist"></div>
-        <div style="width: 70%" class="temperature-box">
-          <div class="box-box">
+        <div style="width: 60%" class="temperature-box">
+          <div style="margin-top: 7%; margin-bottom: 22%" class="box-box">
             <div class="temperature-box-one">
               <div style="font-size: 0.13rem !important">温度</div>
               <div class="Horizontal-line"></div>
@@ -95,7 +95,7 @@
               <div style="font-size: 0.13rem !important">正常</div>
             </div>
           </div>
-          <div class="box-box">
+          <div style="margin-top: 7%; margin-bottom: 22%" class="box-box">
             <div class="temperature-box-one">
               <div style="font-size: 0.13rem !important">烟雾</div>
               <div class="Horizontal-line"></div>
@@ -113,8 +113,14 @@
             </div>
           </div>
           <div class="text-box">
-            <img src="../images/t5.png" alt="">
-            <div class="text-one">温度过高</div>
+            <img
+              style="width: 14%; height: 200px"
+              src="../images/t5.png"
+              alt=""
+            />
+            <div style="margin-left: 10%; margin-top: 2%" class="text-one">
+              温度过高
+            </div>
           </div>
         </div>
       </div>
@@ -228,12 +234,18 @@
     <div class="test-box">
       <div class="content">
         <div class="Water-immersion">
-          <div class="Water-immersion-box-one">
+          <div style="height: 65%" class="Water-immersion-box-one">
             <div class="Water-immersion-box-title">
               <div class="Water-immersion-box-svg">
-                <img src="../images/t4.png" alt="">
+                <img
+                  style="margin-top: 3%; width: 19%"
+                  src="../images/t4.png"
+                  alt=""
+                />
+              </div>
+              <div style="font-size: 0.12rem !important; margin-top: 3%">
+                通信状态
               </div>
-              <div>通信状态</div>
             </div>
             <div class="Water-immersion-text text1">正常</div>
           </div>
@@ -241,9 +253,15 @@
             <div class="Water-immersion-box-title">
               <div class="Water-immersion-box-svg">
                 <!-- <img src="../font/水滴.png" alt="" /> -->
-                <img src="../images/t1.png" alt="">
+                <img
+                  style="margin-top: 3%; width: 19%"
+                  src="../images/t1.png"
+                  alt=""
+                />
+              </div>
+              <div style="font-size: 0.12rem !important; margin-top: 3%">
+                水滴1状态
               </div>
-              <div>水滴1状态</div>
             </div>
             <div class="Water-immersion-text text2">正常</div>
           </div>
@@ -270,9 +288,15 @@
           <div class="Water-immersion-box-one">
             <div class="Water-immersion-box-title">
               <div class="Water-immersion-box-svg">
-                  <img src="../images/t1.png" alt="">
+                <img
+                  style="margin-top: 3%; width: 19%"
+                  src="../images/t1.png"
+                  alt=""
+                />
+              </div>
+              <div style="font-size: 0.12rem !important; margin-top: 3%">
+                通信状态
               </div>
-              <div>通信状态</div>
             </div>
             <div class="Water-immersion-text">正常</div>
           </div>
@@ -327,9 +351,15 @@
           <div class="Water-immersion-box-one">
             <div class="Water-immersion-box-title">
               <div class="Water-immersion-box-svg">
-                <img src="../images/t4.png" alt="">
+                <img
+                  style="margin-top: 3%; width: 19%"
+                  src="../images/t4.png"
+                  alt=""
+                />
+              </div>
+              <div style="font-size: 0.12rem !important; margin-top: 3%">
+                通信状态
               </div>
-              <div>通信状态</div>
             </div>
             <div class="Water-immersion-text text1">正常</div>
           </div>
@@ -337,9 +367,15 @@
           <div class="Water-immersion-box-one">
             <div class="Water-immersion-box-title">
               <div class="Water-immersion-box-svg">
-                <img src="../images/t2.png" alt="">
+                <img
+                  style="margin-top: 3%; width: 19%"
+                  src="../images/t2.png"
+                  alt=""
+                />
+              </div>
+              <div style="font-size: 0.12rem !important; margin-top: 3%">
+                消防主机状态
               </div>
-              <div>消防主机状态</div>
             </div>
             <div class="Water-immersion-text text2">正常</div>
           </div>
@@ -347,9 +383,15 @@
           <div class="Water-immersion-box-one">
             <div class="Water-immersion-box-title">
               <div class="Water-immersion-box-svg">
-                <img src="../images/t3.png" alt="">
+                <img
+                  style="margin-top: 3%; width: 19%"
+                  src="../images/t3.png"
+                  alt=""
+                />
+              </div>
+              <div style="font-size: 0.12rem !important; margin-top: 3%">
+                开关量
               </div>
-              <div>开关量</div>
             </div>
             <div class="Water-immersion-text text3">正常</div>
           </div>
@@ -361,10 +403,10 @@
 </div>
 
 <script>
-  // const dom52 = document.querySelector('.springFrame5 .box52 .floor-dist');
-  // const testDom52 = document.querySelector('.springFrame5 .box52');
-  // const dom53 = document.querySelector('.springFrame5 .box53 .floor-dist');
-  // const testDom53 = document.querySelector('.springFrame5 .box53');
-  // const dom54 = document.querySelector('.springFrame5 .box54 .floor-dist');
-  // const testDom54 = document.querySelector('.springFrame5 .box54');
+  // const dom52 = document.querySelector(".springFrame5 .box52 .floor-dist");
+  // const testDom52 = document.querySelector(".springFrame5 .box52");
+  // const dom53 = document.querySelector(".springFrame5 .box53 .floor-dist");
+  // const testDom53 = document.querySelector(".springFrame5 .box53");
+  // const dom54 = document.querySelector(".springFrame5 .box54 .floor-dist");
+  // const testDom54 = document.querySelector(".springFrame5 .box54");
 </script>