代码更新

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

@@ -1,108 +1,105 @@
-const test14 = (function() {
-    function test14(id, domTitle) {
-        if (domTitle) {
-            $('.test14 .title h2').text(domTitle)
-        }
-        $('.test14 .box').css('z-index', ++zIndex)
-        $('.test14 .box').attr('data-id', id)
-        move3('.test14 .test-box')
-        move2('.test14 .containerTool')
-
-
-        let timer = null;
-
-
-        $('.test14 .close').click(function() {
-            $('.test14 .box').remove();
-            $('.test14 .containerTool').css('display', 'none');
-            $('.test14 .setWidth').val('')
-            $('.test14 .setHeight').val('')
-            moduleIdRemove.push(id)
-        })
-
-        eventClick('.test14');
-
-        const dists = document.querySelectorAll('.test14 .floor-dist');
-        const testDoms = document.querySelectorAll('.test14 .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(() => {
-                // myChart.resize();
-            }, 500);
-        })
-    }
-
-    function setCharts(echartDom, testDom) {
-        // 1实例化对象
-        myChart = echarts.init(echartDom);
-        let option = {
-            color: [
-                "#006cff",
-                "#47BAFD",
-                "#DA8F51"
-            ],
-            tooltip: {
-                trigger: 'item'
-            },
-            legend: {
-                orient: 'vertical',
-                top: "center",
-                right: "50",
-                textStyle: {
-                    color: "#fff",
-                    fontSize: "100",
-                },
-            },
-            series: [{
-                name: 'Access From',
-                type: 'pie',
-                radius: ['20%', '40%'],
-                center: ["30%", "55%"],
-                avoidLabelOverlap: false,
-                label: {
-                    show: false,
-                    position: 'center'
-                },
-                emphasis: {
-                    label: {
-                        show: true,
-                        fontSize: '140',
-                        fontWeight: 'bold'
-                    }
-                },
-                itemStyle: {
-                    shadowColor: 'rgba(71, 186, 253, .5)',
-                    shadowBlur: 100,
-                },
-                labelLine: {
-                    show: false
-                },
-                data: [
-                    { value: 1048, name: 'Search' },
-                    { value: 735, name: 'Direct' },
-                    { value: 580, name: 'Email' },
-                    { value: 484, name: 'U Ads' },
-                    { value: 300, name: 'V Ads' }
-                ]
-            }]
-        };
-        myChart.setOption(option);
-        // obsDom(`.test14 .box`, myChart)
-
-        if (!testDom) {
-            testDom = document.querySelectorAll('.test14 .box');
-        }
-        obsDom(testDom, myChart)
-    }
-    return test14
-})();
+const test14 = (function () {
+  function test14(id, domTitle) {
+    if (domTitle) {
+      $(".test14 .title h2").text(domTitle);
+    }
+    $(".test14 .box").css("z-index", ++zIndex);
+    $(".test14 .box").attr("data-id", id);
+    move3(".test14 .test-box");
+    move2(".test14 .containerTool");
+
+    let timer = null;
+
+    $(".test14 .close").click(function () {
+      $(".test14 .box").remove();
+      $(".test14 .containerTool").css("display", "none");
+      $(".test14 .setWidth").val("");
+      $(".test14 .setHeight").val("");
+      moduleIdRemove.push(id);
+    });
+
+    eventClick(".test14");
+
+    const dists = document.querySelectorAll(".test14 .floor-dist");
+    const testDoms = document.querySelectorAll(".test14 .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(() => {
+        // myChart.resize();
+      }, 500);
+    });
+  }
+
+  function setCharts(echartDom, testDom) {
+    // 1实例化对象
+    myChart = echarts.init(echartDom);
+    let option = {
+      color: ["#006cff", "#47BAFD", "#DA8F51"],
+      tooltip: {
+        trigger: "item",
+      },
+      legend: {
+        itemWidth: 100,
+        orient: "vertical",
+        top: "center",
+        right: "50",
+        textStyle: {
+          color: "#fff",
+          fontSize: "100",
+        },
+      },
+      series: [
+        {
+          name: "Access From",
+          type: "pie",
+          radius: ["20%", "40%"],
+          center: ["30%", "55%"],
+          avoidLabelOverlap: false,
+          label: {
+            show: false,
+            position: "center",
+          },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: "140",
+              fontWeight: "bold",
+            },
+          },
+          itemStyle: {
+            shadowColor: "rgba(71, 186, 253, .5)",
+            shadowBlur: 100,
+          },
+          labelLine: {
+            show: false,
+          },
+          data: [
+            { value: 1048, name: "Search" },
+            { value: 735, name: "Direct" },
+            { value: 580, name: "Email" },
+            { value: 484, name: "U Ads" },
+            { value: 300, name: "V Ads" },
+          ],
+        },
+      ],
+    };
+    myChart.setOption(option);
+    // obsDom(`.test14 .box`, myChart)
+
+    if (!testDom) {
+      testDom = document.querySelectorAll(".test14 .box");
+    }
+    obsDom(testDom, myChart);
+  }
+  return test14;
+})();

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

@@ -35,7 +35,7 @@
 .box19 .right .txt {
   font-size: 0.25rem !important;
   background: none;
-  color: #f74038;
+  color: #fff;
   font-family: leslie;
   position: absolute;
   left: 80%;

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

@@ -1,301 +1,254 @@
-const test20 = (function() {
-    function test20(id, domTitle) {
-        if (domTitle) {
-            $('.test20 .title h2').text(domTitle)
-        }
-        $('.test20 .box').css('z-index', ++zIndex)
-        $('.test20 .box').attr('data-id', id)
-        move3('.test20 .test-box')
-        move2('.test20 .containerTool')
-
-
-        let timer = null;
-
-
-
-        $('.test20 .close').click(function() {
-            $('.test20 .box').remove();
-            $('.test20 .containerTool').css('display', 'none');
-            $('.test20 .setWidth').val('')
-            $('.test20 .setHeight').val('')
-            moduleIdRemove.push(id)
-        })
-
-        eventClick('.test20');
-        // setCharts(`.test20 .floor-dist`);
-
-        const dists = document.querySelectorAll('.test20 .floor-dist');
-        const testDoms = document.querySelectorAll('.test20 .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(() => {
-                // move('.test20 .box')
-                // myChart.resize();
-            }, 500);
-        })
-    }
-
-    function setCharts(echartDom, testDom) {
-        // 1实例化对象
-        myChart = echarts.init(echartDom);
-        let option = {
-            tooltip: {
-                trigger: "axis"
-            },
-            legend: {
-                top: "0%",
-                data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
-                textStyle: {
-                    color: "rgba(255,255,255,.5)",
-                    fontSize: "100"
-                }
-            },
-
-            grid: {
-                left: "10",
-                top: "30",
-                right: "10",
-                bottom: "10",
-                containLabel: true
-            },
-            xAxis: [{
-                type: "category",
-                boundaryGap: false,
-                // x轴更换数据
-                data: [
-                    "01",
-                    "02",
-                    "03",
-                    "04",
-                    "05",
-                    "06",
-                    "07",
-                    "08",
-                    "09",
-                    "10",
-                    "11",
-                    "12",
-                    "13",
-                    "14",
-                    "15",
-                    "16",
-                    "17",
-                    "18",
-                    "19",
-                    "20",
-                    "21",
-                    "22",
-                    "23",
-                    "24",
-                    "25",
-                    "26",
-                    "26",
-                    "28",
-                    "29",
-                    "30"
-                ],
-                // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
-                axisLabel: {
-                    textStyle: {
-                        color: "rgba(255,255,255,.6)",
-                        fontSize: 100
-                    }
-                },
-                // x轴线的颜色为   rgba(255,255,255,.2)
-                axisLine: {
-                    lineStyle: {
-                        color: "rgba(255,255,255,.2)"
-                    }
-                }
-            }],
-            yAxis: [{
-                type: "value",
-                axisTick: { show: false },
-                axisLine: {
-                    lineStyle: {
-                        color: "rgba(255,255,255,.1)"
-                    }
-                },
-                axisLabel: {
-                    textStyle: {
-                        color: "rgba(255,255,255,.6)",
-                        fontSize: 100
-                    }
-                },
-                // 修改分割线的颜色
-                splitLine: {
-                    lineStyle: {
-                        color: "rgba(255,255,255,.1)"
-                    }
-                }
-            }],
-            series: [{
-                    name: "邮件营销",
-                    type: "line",
-                    smooth: true,
-                    // 单独修改当前线条的样式
-                    lineStyle: {
-                        color: "#0184d5",
-                        width: "15"
-                    },
-                    // 填充颜色设置
-                    areaStyle: {
-                        color: new echarts.graphic.LinearGradient(
-                            0,
-                            0,
-                            0,
-                            1, [{
-                                    offset: 0,
-                                    color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
-                                },
-                                {
-                                    offset: 0.8,
-                                    color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
-                                }
-                            ],
-                            false
-                        ),
-                        shadowColor: "rgba(0, 0, 0, 0.1)"
-                    },
-                    // 设置拐点
-                    symbol: "circle",
-                    // 拐点大小
-                    symbolSize: 16,
-                    // 开始不显示拐点， 鼠标经过显示
-                    showSymbol: false,
-                    // 设置拐点颜色以及边框
-                    itemStyle: {
-                        color: "#0184d5",
-                        borderColor: "rgba(221, 220, 107, .1)",
-                        borderWidth: 15
-                    },
-                    data: [
-                        30,
-                        40,
-                        30,
-                        40,
-                        30,
-                        40,
-                        30,
-                        60,
-                        20,
-                        40,
-                        30,
-                        40,
-                        30,
-                        40,
-                        30,
-                        40,
-                        30,
-                        60,
-                        20,
-                        40,
-                        30,
-                        40,
-                        30,
-                        40,
-                        30,
-                        40,
-                        20,
-                        60,
-                        50,
-                        40
-                    ]
-                },
-                {
-                    name: "联盟广告",
-                    type: "line",
-                    smooth: true,
-                    lineStyle: {
-                        normal: {
-                            color: "#00d887",
-                            width: 2
-                        }
-                    },
-                    areaStyle: {
-                        normal: {
-                            color: new echarts.graphic.LinearGradient(
-                                0,
-                                0,
-                                0,
-                                1, [{
-                                        offset: 0,
-                                        color: "rgba(0, 216, 135, 0.4)"
-                                    },
-                                    {
-                                        offset: 0.8,
-                                        color: "rgba(0, 216, 135, 0.1)"
-                                    }
-                                ],
-                                false
-                            ),
-                            shadowColor: "rgba(0, 0, 0, 0.1)"
-                        }
-                    },
-                    // 设置拐点 小圆点
-                    symbol: "circle",
-                    // 拐点大小
-                    symbolSize: 5,
-                    // 设置拐点颜色以及边框
-                    itemStyle: {
-                        color: "#00d887",
-                        borderColor: "rgba(221, 220, 107, .1)",
-                        borderWidth: 15
-                    },
-                    // 开始不显示拐点， 鼠标经过显示
-                    showSymbol: false,
-                    data: [
-                        130,
-                        10,
-                        20,
-                        40,
-                        30,
-                        40,
-                        80,
-                        60,
-                        20,
-                        40,
-                        90,
-                        40,
-                        20,
-                        140,
-                        30,
-                        40,
-                        130,
-                        20,
-                        20,
-                        40,
-                        80,
-                        70,
-                        30,
-                        40,
-                        30,
-                        120,
-                        20,
-                        99,
-                        50,
-                        20
-                    ]
-                }
-            ]
-        };
-        myChart.setOption(option);
-        // obsDom(`.test20 .box`, myChart)
-
-        if (!testDom) {
-            testDom = document.querySelectorAll('.test20 .box');
-        }
-        obsDom(testDom, myChart)
-    }
-    return test20
-})();
+const test20 = (function () {
+  function test20(id, domTitle) {
+    if (domTitle) {
+      $(".test20 .title h2").text(domTitle);
+    }
+    $(".test20 .box").css("z-index", ++zIndex);
+    $(".test20 .box").attr("data-id", id);
+    move3(".test20 .test-box");
+    move2(".test20 .containerTool");
+
+    let timer = null;
+
+    $(".test20 .close").click(function () {
+      $(".test20 .box").remove();
+      $(".test20 .containerTool").css("display", "none");
+      $(".test20 .setWidth").val("");
+      $(".test20 .setHeight").val("");
+      moduleIdRemove.push(id);
+    });
+
+    eventClick(".test20");
+    // setCharts(`.test20 .floor-dist`);
+
+    const dists = document.querySelectorAll(".test20 .floor-dist");
+    const testDoms = document.querySelectorAll(".test20 .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(() => {
+        // move('.test20 .box')
+        // myChart.resize();
+      }, 500);
+    });
+  }
+
+  function setCharts(echartDom, testDom) {
+    // 1实例化对象
+    myChart = echarts.init(echartDom);
+    let option = {
+      tooltip: {
+        trigger: "axis",
+      },
+      legend: {
+        itemWidth: 100,
+        top: "0%",
+        data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
+        textStyle: {
+          color: "rgba(255,255,255,.5)",
+          fontSize: "100",
+        },
+      },
+
+      grid: {
+        left: "10",
+        top: "40",
+        right: "10",
+        bottom: "10",
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: "category",
+          boundaryGap: false,
+          // x轴更换数据
+          data: [
+            "01",
+            "02",
+            "03",
+            "04",
+            "05",
+            "06",
+            "07",
+            "08",
+            "09",
+            "10",
+            "11",
+            "12",
+            "13",
+            "14",
+            "15",
+            "16",
+            "17",
+            "18",
+            "19",
+            "20",
+            "21",
+            "22",
+            "23",
+            "24",
+            "25",
+            "26",
+            "26",
+            "28",
+            "29",
+            "30",
+          ],
+          // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
+          axisLabel: {
+            margin: 70,
+            textStyle: {
+              color: "rgba(255,255,255,.6)",
+              fontSize: 100,
+            },
+          },
+          // x轴线的颜色为   rgba(255,255,255,.2)
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255,255,255,.2)",
+            },
+          },
+        },
+      ],
+      yAxis: [
+        {
+          type: "value",
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255,255,255,.1)",
+            },
+          },
+          axisLabel: {
+            margin: 70,
+            textStyle: {
+              color: "rgba(255,255,255,.6)",
+              fontSize: 100,
+            },
+          },
+          // 修改分割线的颜色
+          splitLine: {
+            lineStyle: {
+              color: "rgba(255,255,255,.1)",
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: "邮件营销",
+          type: "line",
+          smooth: true,
+          // 单独修改当前线条的样式
+          lineStyle: {
+            color: "#0184d5",
+            width: "15",
+          },
+          // 填充颜色设置
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: "rgba(1, 132, 213, 0.4)", // 渐变色的起始颜色
+                },
+                {
+                  offset: 0.8,
+                  color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
+                },
+              ],
+              false
+            ),
+            shadowColor: "rgba(0, 0, 0, 0.1)",
+          },
+          // 设置拐点
+          symbol: "circle",
+          // 拐点大小
+          symbolSize: 16,
+          // 开始不显示拐点， 鼠标经过显示
+          showSymbol: false,
+          // 设置拐点颜色以及边框
+          itemStyle: {
+            color: "#0184d5",
+            borderColor: "rgba(221, 220, 107, .1)",
+            borderWidth: 15,
+          },
+          data: [
+            30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30,
+            60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 60, 50, 40,
+          ],
+        },
+        {
+          name: "联盟广告",
+          type: "line",
+          smooth: true,
+          lineStyle: {
+            normal: {
+              color: "#00d887",
+              width: 2,
+            },
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: "rgba(0, 216, 135, 0.4)",
+                  },
+                  {
+                    offset: 0.8,
+                    color: "rgba(0, 216, 135, 0.1)",
+                  },
+                ],
+                false
+              ),
+              shadowColor: "rgba(0, 0, 0, 0.1)",
+            },
+          },
+          // 设置拐点 小圆点
+          symbol: "circle",
+          // 拐点大小
+          symbolSize: 5,
+          // 设置拐点颜色以及边框
+          itemStyle: {
+            color: "#00d887",
+            borderColor: "rgba(221, 220, 107, .1)",
+            borderWidth: 15,
+          },
+          // 开始不显示拐点， 鼠标经过显示
+          showSymbol: false,
+          data: [
+            130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40,
+            130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20,
+          ],
+        },
+      ],
+    };
+    myChart.setOption(option);
+    // obsDom(`.test20 .box`, myChart)
+
+    if (!testDom) {
+      testDom = document.querySelectorAll(".test20 .box");
+    }
+    obsDom(testDom, myChart);
+  }
+  return test20;
+})();

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

@@ -51,6 +51,11 @@
   color: #fff;
   text-shadow: 0 0 10px #3f84c3, 0 0 20px #3f84c3, 0 0 30px #3f84c3,
     0 0 40px #3f84c3;
+    font-size: 0.13rem !important;
+}
+.desc-number-two{
+  font-size: 0.3rem !important;
+  margin-top: 14%;
 }
 .box31 ul li {
   color: #fff;

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

@@ -20,21 +20,21 @@
           <img src="../images/networkSecurity/dwzs.png" alt="" />
           <div class="desc">
             <div class="desc-number">单位总数</div>
-            <div class="office_number desc-number">35</div>
+            <div class="office_number desc-number desc-number-two">35</div>
           </div>
         </li>
         <li>
           <img src="../images/networkSecurity/yjsb.png" alt="" />
           <div class="desc">
             <div class="desc-number">硬件设备</div>
-            <div class="equipment_number desc-number">35</div>
+            <div class="equipment_number desc-number desc-number-two">35</div>
           </div>
         </li>
         <li>
           <img src="../images/networkSecurity/xtzs.png" alt="" />
           <div class="desc">
             <div class="desc-number">系统总数</div>
-            <div class="sys_number desc-number">35</div>
+            <div class="sys_number desc-number desc-number-two">35</div>
           </div>
         </li>
       </ul>

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

@@ -65,7 +65,7 @@ const test35 = (function () {
         },
       },
       legend: {
-        top: "0%",
+        top: "-2%",
         itemWidth: 200,
         itemHeight: 50,
         data: ["高风险", "中风险", "低风险", "直接访问", "搜索引擎"],

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

@@ -70,12 +70,12 @@
 
 .box37 .content .rightInfo li .n2 {
   color: #35a1fc;
-  text-shadow: 0 0 50px #29b6ff;
+  text-shadow: 0 0 50px #29b6ff !important;
   font-size: 0.12rem !important;
 }
 .box37 .content .rightInfo li .n3 {
   color: #22cee6;
-  text-shadow: 0 0 50px #36d7cb;
+  text-shadow: 0 0 50px #36d7cb !important;
 }
 
 .box37 .content .rightInfo li .num {

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

@@ -16,7 +16,7 @@
   width: 100%;
 }
 .secu-top ul li {
-  width: 2.7rem;
+  width: 2rem;
   height: 0.7rem;
   line-height: 0.75rem;
   font-size: 0.2rem;

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

@@ -1,7 +1,7 @@
 .box44 .content {
   flex-direction: row;
   margin: 0;
-  padding: 0 0.3rem;
+  padding: 0 0.1rem;
 }
 .box44 .main {
   flex: 2;

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

@@ -16,7 +16,7 @@
     width: 1.7rem;
     height: 0.7rem;
     box-sizing: border-box;
-    color: #beb1eb;
+    /* color: #beb1eb; */
     background: url('../../images/stationGroup/组 529.png');
     background-size: 100% 100%;
     transform: scale(0.9);

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

@@ -1,88 +1,97 @@
 <div class="box50 box" data-name="test50">
-    <div class="toolBox">
-      <span class="fit"></span>
-      <span class="close"></span>
-    </div>
-    <div class="tool">
-      <div class="title bgTitle">
-        <h2>受攻击最严重业务系统</h2>
-      </div>
+  <div class="toolBox">
+    <span class="fit"></span>
+    <span class="close"></span>
+  </div>
+  <div class="tool">
+    <div class="title bgTitle">
+      <h2>受攻击最严重业务系统</h2>
     </div>
-    <div class="test-box">
-      <!-- <marquee behavior="scroll" direction="up" height="100%"> -->
-        <div class="content">
-          <div class="item" data-id="1">
-            <img src="../images/networkSecurity/pic_kuang.png" alt="" />
-            <div class="item-box">
-              <div>网络核心机房</div>
-              <div class="temp">
-                <p>温度：<span>25℃</span></p>
-                <p>湿度：<span>25℃</span></p>
-              </div>
+  </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="item" data-id="1">
+          <img src="../images/networkSecurity/pic_kuang.png" alt="" />
+          <div class="item-box">
+            <div>网络核心机房</div>
+            <div class="temp">
+              <p>温度：<span>25℃</span></p>
+              <p>湿度：<span>25℃</span></p>
             </div>
           </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">
-                <p>温度：<span>25℃</span></p>
-                <p>湿度：<span>25℃</span></p>
-              </div>
+        </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">
+              <p>温度：<span>25℃</span></p>
+              <p>湿度：<span>25℃</span></p>
             </div>
           </div>
-          <div class="item" data-id="3">
-            <img src="../images/networkSecurity/pic_kuang.png" alt="" />
-            <div class="item-box">
-              <div>配线间机房</div>
-              <div class="temp">
-                <p>温度：<span>25℃</span></p>
-                <p>湿度：<span>25℃</span></p>
-              </div>
+        </div>
+        <div class="item" data-id="3">
+          <img src="../images/networkSecurity/pic_kuang.png" alt="" />
+          <div class="item-box">
+            <div>配线间机房</div>
+            <div class="temp">
+              <p>温度：<span>25℃</span></p>
+              <p>湿度：<span>25℃</span></p>
             </div>
           </div>
-          <div class="item" data-id="4">
-            <img src="../images/networkSecurity/pic_kuang.png" alt="" />
-            <div class="item-box">
-              <div>档案库房</div>
-              <div class="temp">
-                <p>温度：<span>25℃</span></p>
-                <p>湿度：<span>25℃</span></p>
-              </div>
+        </div>
+        <div class="item" data-id="4">
+          <img src="../images/networkSecurity/pic_kuang.png" alt="" />
+          <div class="item-box">
+            <div>档案库房</div>
+            <div class="temp">
+              <p>温度：<span>25℃</span></p>
+              <p>湿度：<span>25℃</span></p>
             </div>
           </div>
-          <div class="item" data-id="5">
-            <img src="../images/networkSecurity/pic_kuang.png" alt="" />
-            <div class="item-box">
-              <div>UPS供电机房</div>
-              <div class="temp">
-                <p>温度：<span>25℃</span></p>
-                <p>湿度：<span>25℃</span></p>
-              </div>
+        </div>
+        <div class="item" data-id="5">
+          <img src="../images/networkSecurity/pic_kuang.png" alt="" />
+          <div class="item-box">
+            <div>UPS供电机房</div>
+            <div class="temp">
+              <p>温度：<span>25℃</span></p>
+              <p>湿度：<span>25℃</span></p>
             </div>
           </div>
         </div>
-      <!-- </marquee> -->
-    </div>
-    <div class="panel-footer"></div>
+      </div>
+    </marquee>
+
+    <!-- </marquee> -->
   </div>
-  
-  <!-- 工具弹框 -->
-  <div class="tools" style="display: none">
-    <div class="containerTool test50Toll">
-      <ul>
-        <li>
-          <span>宽度：</span>
-          <input class="setWidth" type="text" />
-          <span id="validateAge" class="regValidate"></span>
-        </li>
-        <li>
-          <span>高度：</span>
-          <input class="setHeight" type="text" />
-        </li>
-      </ul>
-      <!-- 确定 -->
-      <button class="fixBtn toolBtn">确定</button>
-      <button class="offBtn toolBtn">取消</button>
-    </div>
-  </div>
+  <div class="panel-footer"></div>
+</div>
+
+<!-- 工具弹框 -->
+<div class="tools" style="display: none">
+  <div class="containerTool test50Toll">
+    <ul>
+      <li>
+        <span>宽度：</span>
+        <input class="setWidth" type="text" />
+        <span id="validateAge" class="regValidate"></span>
+      </li>
+      <li>
+        <span>高度：</span>
+        <input class="setHeight" type="text" />
+      </li>
+    </ul>
+    <!-- 确定 -->
+    <button class="fixBtn toolBtn">确定</button>
+    <button class="offBtn toolBtn">取消</button>
+  </div>
+</div>

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

@@ -1,37 +1,35 @@
-.test61 .box61{
+.test61 .box61 {
   box-shadow: none;
   background: none;
 }
 
 @keyframes row {
-  0%{
+  0% {
     transform: translateX(0);
   }
 
-  50%{
+  50% {
     /* transform: translateX(-50%); */
   }
-  100%{
+  100% {
     /* transform: translateX(0); */
     transform: translateX(-50%);
   }
 }
 
-.box61 .left-box,.box61 .right-box{
+.box61 .left-box,
+.box61 .right-box {
   animation: row linear 20s infinite;
 }
 
-
-
-.left-box-three:hover{
+.left-box-three:hover {
   transform: scale(1.2);
 }
 
-.left-box-three{
+.left-box-three {
   transition: all 0.5s;
 }
 
-
 .box61 .test-box {
   width: 100%;
   height: 100%;
@@ -46,8 +44,8 @@
 .bg-center {
   width: 100%;
   height: 50%;
-  background: url("../../css/modules/layer/default/组69拷贝.png") no-repeat;
-  background-size: 100%;
+  /* background: url("../../css/modules/layer/default/组69拷贝.png") no-repeat;
+  background-size: 100%; */
   position: absolute;
 }
 
@@ -64,7 +62,10 @@
   font-weight: 700;
   color: #75e2fa;
 }
-
+.bgCenter{
+  position: relative;
+  left: 5%;
+}
 .bg-center-img-one img {
   width: 100%;
   height: 100%;
@@ -127,7 +128,8 @@
   height: 100%;
 }
 
-.bg-botton,.meng-bg {
+.bg-botton,
+.meng-bg {
   margin: auto;
   width: 25%;
   height: 50%;
@@ -137,7 +139,7 @@
   z-index: 9;
 }
 
-.meng-bg{
+.meng-bg {
   background: #2140641f;
   z-index: 8;
 }
@@ -159,20 +161,21 @@
   color: #9fdbf0;
   text-align: center;
 }
-.bg-left-box,.bg-right-box{
+.bg-left-box,
+.bg-right-box {
   margin-top: -17%;
   overflow: hidden;
   position: relative;
   transform: scale(0.8);
-
 }
-.bg-left-box{
+.bg-left-box {
   left: -4%;
 }
-.bg-right-box{
+.bg-right-box {
   right: -4%;
 }
-.left-box,.right-box {
+.left-box,
+.right-box {
   width: 400%;
   height: 100%;
   display: flex;
@@ -180,8 +183,8 @@
   margin-top: 10%;
 }
 
-
-.left-box-one,.left-box-two  {
+.left-box-one,
+.left-box-two {
   flex: 1;
   height: 100%;
   background: url("../../css/modules/layer/default/组58.png") no-repeat;
@@ -211,9 +214,8 @@
   height: 100%;
 }
 
-
 /* 弹窗样式 */
-.box61 .tablebox{
+.box61 .tablebox {
   margin-top: 13%;
   height: 60%;
   overflow: auto;
@@ -225,7 +227,8 @@
   top: 41%;
   left: 34%;
   transform: scale(1.5);
-  background: url("../../css/modules/layer/default/色相饱和度1854.png") no-repeat;
+  background: url("../../css/modules/layer/default/色相饱和度1854.png")
+    no-repeat;
   background-size: 100% 103%;
   z-index: 99;
 }
@@ -252,26 +255,26 @@
   text-align: center;
 }
 
-.number-box::after{
+.number-box::after {
+  content: "";
+  width: 0;
+  height: 0;
+  display: inline-block;
+  border-top: 50px solid transparent;
+  border-right: 50px solid #00dcffc4;
+  border-bottom: 50px solid transparent;
+  margin-left: 100px;
+}
+
+.number-box::before {
+  display: inline-block;
   content: "";
-    width: 0;
-    height: 0;
-    display: inline-block;
-    border-top: 50px solid transparent;
-    border-right: 50px solid #00dcffc4;
-    border-bottom: 50px solid transparent;
-    margin-left: 100px;
-}
-
-.number-box::before{
-    display: inline-block;
-    content: "";
-    width: 0;
-    height: 0;
-    border-top: 50px solid transparent;
-    border-left: 50px solid #00dcffc4;
-    border-bottom: 50px solid transparent;
-    margin-right: 100px;
+  width: 0;
+  height: 0;
+  border-top: 50px solid transparent;
+  border-left: 50px solid #00dcffc4;
+  border-bottom: 50px solid transparent;
+  margin-right: 100px;
 }
 
 .Popup-name {
@@ -301,7 +304,7 @@
   background-color: #205dcf46;
 }
 
-.box61 #stuTable thead tr{
+.box61 #stuTable thead tr {
   position: absolute;
   top: 20%;
   background: #205dcf;
@@ -311,37 +314,36 @@
   line-height: 0.3rem;
 }
 
-.box61 #stuTable thead tr th:nth-child(1){
+.box61 #stuTable thead tr th:nth-child(1) {
   padding-left: 3%;
 }
 
-.box61 #stuTable thead tr th:nth-child(2){
+.box61 #stuTable thead tr th:nth-child(2) {
   position: relative;
   left: 4%;
 }
 
-.box61 #stuTable thead tr th:nth-child(3){
+.box61 #stuTable thead tr th:nth-child(3) {
   position: relative;
   left: 2%;
 }
 
-
 /* 偶 */
-.box61 tbody tr:nth-child(2n){  
+.box61 tbody tr:nth-child(2n) {
   background-color: #1c538ce6;
 }
 /* 奇 */
-.box61 tbody tr:nth-child(2n+1){
+.box61 tbody tr:nth-child(2n + 1) {
   background-color: #1c538c63;
 }
 
-
 .box61 .stuTableTr {
   min-width: 20%;
   height: 50%;
 }
 
-.box61 #stuTable th,.box61 #stuTable td{
+.box61 #stuTable th,
+.box61 #stuTable td {
   width: 13%;
   font-size: 0.12rem !important;
-}
+}

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

@@ -6,6 +6,10 @@
   <div class="test-box">
     <div class="content">
       <div class="bg-center">
+        <div
+          id="bgCenter"
+          style="width: 100%; height: 100%; transform: scaleX(1.4)"
+        ></div>
         <div class="bg-center-img-one">
           <img src="../css/modules/layer/default/电脑桌面155拷贝.png" alt="" />
           <div class="bg-center-img-one-text">局本级</div>
@@ -38,38 +42,39 @@
       </div>
       <div class="bg-botton-two">
         <div class="bg-left-box">
-        <div class="left-box">
-          <div class="left-box-one left-box-three" data-id='0'>
-            <div class="left-box-one-title">市环卫中心</div>
-          </div>
-          <div class="left-box-one left-box-three" data-id='1'>
-            <div class="left-box-one-title">后勤中心</div>
-          </div>
-          <div class="left-box-one left-box-three" data-id='2'>
-            <div class="left-box-one-title">市市政环卫检测中心</div>
+          <div class="left-box">
+            <div class="left-box-one left-box-three" data-id="0">
+              <div class="left-box-one-title">市环卫中心</div>
+            </div>
+            <div class="left-box-one left-box-three" data-id="1">
+              <div class="left-box-one-title">后勤中心</div>
+            </div>
+            <div class="left-box-one left-box-three" data-id="2">
+              <div class="left-box-one-title">市市政环卫检测中心</div>
+            </div>
           </div>
         </div>
-      </div>
 
-<div class="bg-right-box">
-        <div class="right-box">
-          <div class="left-box-two left-box-three" data-id='3'>
-            <div class="left-box-one-title">市城市管理执法总队</div>
-          </div>
-          <div class="left-box-two left-box-three" data-id='4'>
-            <div class="left-box-one-title">市设施运行中心</div>
-          </div>
-          <div class="left-box-two left-box-three" data-id='5'>
-            <div class="left-box-one-title">市动物园管理中心</div>
+        <div class="bg-right-box">
+          <div class="right-box">
+            <div class="left-box-two left-box-three" data-id="3">
+              <div class="left-box-one-title">市城市管理执法总队</div>
+            </div>
+            <div class="left-box-two left-box-three" data-id="4">
+              <div class="left-box-one-title">市设施运行中心</div>
+            </div>
+            <div class="left-box-two left-box-three" data-id="5">
+              <div class="left-box-one-title">市动物园管理中心</div>
+            </div>
           </div>
         </div>
-</div>
-
       </div>
     </div>
     <!-- 感染病毒详情弹窗 -->
     <div class="Popup hiddenScroll" style="display: none">
-      <div class="Popup-name"><span>市环卫中心</span><span class="close-Popup">X</span></div>
+      <div class="Popup-name">
+        <span>市环卫中心</span><span class="close-Popup">X</span>
+      </div>
       <div class="tablebox hiddenScroll">
         <table id="stuTable" class="table">
           <thead>
@@ -124,3 +129,4 @@
     <button class="offBtn toolBtn">取消</button>
   </div>
 </div>
+<!-- <script src="./svga.min.js"></script> -->

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

@@ -1,450 +1,462 @@
-const test61 = (function() {
-    function test61(id, domTitle) {
-        if (domTitle) {
-            $(".test61 .title h2").text(domTitle);
-        }
-        $(".test61 .box").css("z-index", ++zIndex);
-        $(".test61 .box").attr("data-id", id);
-        move3(".test61 .test-box");
-        move2(".test61 .containerTool");
-
-        $(".test61 .close").click(function() {
-            $(".test61 .box").remove();
-            $(".test61 .containerTool").css("display", "none");
-            $(".test61 .setWidth").val("");
-            $(".test61 .setHeight").val("");
-            moduleIdRemove.push(id);
-        });
-
-        eventClick(".test61");
-
-        const dists = document.querySelectorAll(".test61 .floor-dist");
-        const testDoms = document.querySelectorAll(".test61 .box");
-        for (let i = 0; i < dists.length; i++) {
-            const dom = dists[i];
-            setCharts(dom, testDoms[i]);
-        }
-
-        // 局本级
-        $(".bg-center-img-one").click(function() {
-            $(".sf1").slideDown();
-            $(".sf3").slideUp();
-            $(".sf4").slideUp();
-            sp1Ajax11()
-            sp1Ajax12()
-            sp1Ajax14()
-            sp1Ajax15()
-            sp1Ajax17()
-        });
-
-        // 浪潮
-        $(".bg-center-img-three").click(function() {
-            $(".sf4").slideDown();
-            $(".sf1").slideUp();
-            $(".sf3").slideUp();
-            sp4Ajax25()
-            sp4Ajax26()
-            sp4Ajax27();
-            sp4Ajax28();
-            sp4Ajax29();
-            sp4Ajax30();
-        });
-
-        // 华为
-        $(".bg-center-img-four").click(function() {
-            $(".sf3").slideDown();
-            $(".sf1").slideUp();
-            $(".sf4").slideUp();
-            sp3Ajax18()
-            sp3Ajax19()
-            sp3Ajax21()
-            sp3Ajax22()
-            myAjax1()
-            myAjax2()
-            myAjax3()
-        });
-
-        $(".test61 .close-Popup").click(function() {
-            $(".test61 .Popup").css("display", "none");
-        });
+const test61 = (function () {
+  function test61(id, domTitle) {
+    if (domTitle) {
+      $(".test61 .title h2").text(domTitle);
+    }
+    $(".test61 .box").css("z-index", ++zIndex);
+    $(".test61 .box").attr("data-id", id);
+    move3(".test61 .test-box");
+    move2(".test61 .containerTool");
+
+    $(".test61 .close").click(function () {
+      $(".test61 .box").remove();
+      $(".test61 .containerTool").css("display", "none");
+      $(".test61 .setWidth").val("");
+      $(".test61 .setHeight").val("");
+      moduleIdRemove.push(id);
+    });
+
+    eventClick(".test61");
+
+    const dists = document.querySelectorAll(".test61 .floor-dist");
+    const testDoms = document.querySelectorAll(".test61 .box");
+    for (let i = 0; i < dists.length; i++) {
+      const dom = dists[i];
+      setCharts(dom, testDoms[i]);
+    }
 
-        const domPop = $('.Popup .tablebox');
-        let popFlag = false;
-        $(".test61 .left-box-three").click(function() {
-          const tit = $(this).find('.left-box-one-title').html();
-          $('.Popup-name span').eq(0).text(tit);
-          const id = +$(this).attr('data-id');
-          $.ajax({
-            url: basicUrl +
-                "/SystemRisk/GetSystemRiskList",
-            data: {
-              officeId:id
-            },
-            success: function(res) {
-                console.log('安全等级弹框', res);
-                const {result} = res;
-               const html = result.map((item,index) => {
-                 const high = item.high_risk_number;
-                 const middle = item.middle_risk_number;
-                 let sum = high + middle;
-                 if(isNaN(sum)){
-                   sum = 0;
-                 }
-                 let status = '中';
-                 switch (item.safety_status) {
-                   case 1:
-                    status = '低'
-                     break;
-                     case 2:
-                      status = '中'
-                      break;
-                   default:
-                    status = '高'
-                     break;
-                 }
+    // 局本级
+    $(".bg-center-img-one").click(function () {
+      $(".sf1").slideDown();
+      $(".sf3").slideUp();
+      $(".sf4").slideUp();
+      sp1Ajax11();
+      sp1Ajax12();
+      sp1Ajax14();
+      sp1Ajax15();
+      sp1Ajax17();
+    });
+
+    // 浪潮
+    $(".bg-center-img-three").click(function () {
+      $(".sf4").slideDown();
+      $(".sf1").slideUp();
+      $(".sf3").slideUp();
+      sp4Ajax25();
+      sp4Ajax26();
+      sp4Ajax27();
+      sp4Ajax28();
+      sp4Ajax29();
+      sp4Ajax30();
+    });
+
+    // 华为
+    $(".bg-center-img-four").click(function () {
+      $(".sf3").slideDown();
+      $(".sf1").slideUp();
+      $(".sf4").slideUp();
+      sp3Ajax18();
+      sp3Ajax19();
+      sp3Ajax21();
+      sp3Ajax22();
+      myAjax1();
+      myAjax2();
+      myAjax3();
+    });
+
+    $(".test61 .close-Popup").click(function () {
+      $(".test61 .Popup").css("display", "none");
+    });
+
+    const domPop = $(".Popup .tablebox");
+    let popFlag = false;
+    $(".test61 .left-box-three").click(function () {
+      const tit = $(this).find(".left-box-one-title").html();
+      $(".Popup-name span").eq(0).text(tit);
+      const id = +$(this).attr("data-id");
+      $.ajax({
+        url: basicUrl + "/SystemRisk/GetSystemRiskList",
+        data: {
+          officeId: id,
+        },
+        success: function (res) {
+          console.log("安全等级弹框", res);
+          const { result } = res;
+          const html = result
+            .map((item, index) => {
+              const high = item.high_risk_number;
+              const middle = item.middle_risk_number;
+              let sum = high + middle;
+              if (isNaN(sum)) {
+                sum = 0;
+              }
+              let status = "中";
+              switch (item.safety_status) {
+                case 1:
+                  status = "低";
+                  break;
+                case 2:
+                  status = "中";
+                  break;
+                default:
+                  status = "高";
+                  break;
+              }
 
-                return `
+              return `
                     <tr class="Tr-td">
                       <td>${item.system_name}</td>
                       <td>${high}</td>
                       <td>${middle}</td>
                       <td>${status}</td>
-                      <td>${item.update_time ? item.update_time.substring(0,10):false ||item.create_time ? item.create_time.substring(0,10) : false }</td>
+                      <td>${
+                        item.update_time
+                          ? item.update_time.substring(0, 10)
+                          : false || item.create_time
+                          ? item.create_time.substring(0, 10)
+                          : false
+                      }</td>
                     </tr>
-                `
-                }).join('');
-                $('.box61 .Popup tbody').html(html);
-                setTimeout(() => {
-                  scroll(domPop, 0,popFlag)
-                  popFlag = true;
-                }, 1500);
-            },
-            error: function(err) {
-                console.log("----安全等级弹框--------超时");
-            },
-        });
-
-
-            $(".test61 .Popup").css("display", "block");
-        });
-
-
-
-        const dom = $('.test61 .box61 .left-box');
-        const dom1Children = $('.test61 .box61 .left-box').children();
-
-        const dom2 = $('.test61 .box61 .right-box');
-        const dom2Children = $('.test61 .box61 .right-box').children();
-
-        dom.append(dom2Children.clone(true))
-        dom.append(dom1Children.clone(true))
-        dom.append(dom2Children.clone(true))
-
-
-        dom2.append(dom1Children.clone(true))
-        dom2.append(dom2Children.clone(true))
-        dom2.append(dom1Children.clone(true))
-
-
-
-
-        
-
-        hoverAnimation(dom,dom2)
-        hoverAnimation(dom2,dom)
-        function hoverAnimation(dom,dom2) {
-          dom.hover(()=>{
-            dom.css({
-              'animation-play-state': 'paused'
-            })
-            dom2.css({
-              'animation-play-state': 'paused'
+                `;
             })
-          },
-          () => {
-            dom.css({
-              'animation-play-state': 'running'
-            })
-            dom2.css({
-              'animation-play-state': 'running'
-            })
-          })
+            .join("");
+          $(".box61 .Popup tbody").html(html);
+          setTimeout(() => {
+            scroll(domPop, 0, popFlag);
+            popFlag = true;
+          }, 1500);
+        },
+        error: function (err) {
+          console.log("----安全等级弹框--------超时");
+        },
+      });
+
+      $(".test61 .Popup").css("display", "block");
+    });
+
+    const dom = $(".test61 .box61 .left-box");
+    const dom1Children = $(".test61 .box61 .left-box").children();
+
+    const dom2 = $(".test61 .box61 .right-box");
+    const dom2Children = $(".test61 .box61 .right-box").children();
+
+    dom.append(dom2Children.clone(true));
+    dom.append(dom1Children.clone(true));
+    dom.append(dom2Children.clone(true));
+
+    dom2.append(dom1Children.clone(true));
+    dom2.append(dom2Children.clone(true));
+    dom2.append(dom1Children.clone(true));
+
+    hoverAnimation(dom, dom2);
+    hoverAnimation(dom2, dom);
+    function hoverAnimation(dom, dom2) {
+      dom.hover(
+        () => {
+          dom.css({
+            "animation-play-state": "paused",
+          });
+          dom2.css({
+            "animation-play-state": "paused",
+          });
+        },
+        () => {
+          dom.css({
+            "animation-play-state": "running",
+          });
+          dom2.css({
+            "animation-play-state": "running",
+          });
         }
+      );
+    }
 
+    setTimeout(() => {
+      const scroll = (dom, curLeft) => {
+        const option = {
+          duration: 16,
+          total: 5000,
+          begin: {
+            left: curLeft,
+          },
+          end: {
+            left: -dom.width() / 2,
+          },
+          startMove(curData) {
+            curLeft = curData.left;
+            dom.css("margin-left", curLeft);
+          },
+          stopMove() {
+            dom.css("margin-left", 0);
 
-        setTimeout(() => {
-          const scroll = (dom,curLeft) => {
-            const option = {
-              duration: 16,
-              total: 5000,
-              begin: {
-                left: curLeft
+            curLeft = 0;
+            scroll(dom, 0);
+          },
+        };
+        const animate = animateScrool(option);
+        animate.start();
+        dom.hover(
+          () => {
+            animate.stop();
+          },
+          () => {
+            animate.start();
+          }
+        );
+        return animate;
+      };
+      //  scroll(dom,0)
+    }, 1500);
+    var player = new SVGA.Player("#bgCenter");
+    var parser = new SVGA.Parser("#bgCenter");
+    parser.load("../svga/云1.svga", function (videoItem) {
+      player.loops = 0;
+      player.clearsAfterStop = false;
+      player.setVideoItem(videoItem);
+      player.startAnimation();
+      player.onFrame(function (i) {});
+    });
+  }
+
+  function setCharts(echartDom, testDom) {
+    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 = {
+      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]],
+                },
               },
-              end: {
-                left: -dom.width()/2
+              axisTick: {
+                show: true,
+                lineStyle: {
+                  color: highlight,
+                  width: 1,
+                },
+                length: -5,
+                splitNumber: 10,
               },
-              startMove (curData) {
-                curLeft = curData.left;
-                dom.css('margin-left',curLeft)
+              splitLine: {
+                show: true,
+                length: -10,
+                lineStyle: {
+                  color: highlight,
+                },
+              },
+              axisLabel: {
+                distance: -18,
+                textStyle: {
+                  color: highlight,
+                  fontSize: "10",
+                },
+              },
+              pointer: {
+                show: 0,
+              },
+              detail: {
+                show: 0,
               },
-              stopMove () {
-                dom.css('margin-left',0)
-
-                curLeft = 0;
-                scroll(dom,0)
-              }
-            }
-            const animate = animateScrool(option);
-             animate.start();
-             dom.hover(() => {
-              animate.stop();
-            },() => {
-              animate.start();
-            })
-             return animate;
-           }
-          //  scroll(dom,0)
-          }, 1500);
-
-    }
-
-    function setCharts(echartDom, testDom) {
-        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"],
-                ],
+              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,
+              },
             },
-        ];
-
-        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: "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",
-                                    },
-                                },
-                            },
+            // 内侧指针、数值显示
+            {
+              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);
-        }
+              data: [
+                {
+                  value: item.value,
+                },
+              ],
+            }
+          );
+        });
+        return result;
+      })(),
+    };
+    if (option) {
+      myChart.setOption(option);
+    }
 
-        if (!testDom) {
-            testDom = document.querySelectorAll(".test61 .box");
-        }
-        obsDom(testDom, myChart);
+    if (!testDom) {
+      testDom = document.querySelectorAll(".test61 .box");
     }
-    return test61;
-})();
+    obsDom(testDom, myChart);
+  }
+  return test61;
+})();

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

@@ -96,12 +96,12 @@
   transform: scale(8.5);
 }
 
-svg {
+.svg {
   width: 1540px;
   height: 650px;
 }
 
-svg path {
+.svg path {
   stroke: #4ae3ff;
   fill: none;
   stroke-width: 1;

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

@@ -5,7 +5,7 @@
   </div>
   <div class="svg-contanier">
     <div class="svg-item">
-      <svg>
+      <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" />

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

@@ -19,6 +19,8 @@
 }
 #list-wrapper {
   position: relative;
+  width: 116%;
+  left: -8%;
 }
 .box9 .content li:nth-child(1)::after,
 .box9 .content li:nth-child(2)::after,
@@ -29,7 +31,7 @@
   color: #ccc;
   padding-left: 0.1rem;
   background: url(../../images/stationGroup/tc1.png) no-repeat;
-  top: 0.3rem;
+  top: 0.1rem;
   background-size: contain;
 }
 
@@ -63,7 +65,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 3;
   overflow: hidden;
   /* autoprefixer: ignore next */
   -webkit-box-orient: vertical;

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

@@ -1,4 +1,4 @@
-const basicUrl = 'http://23.37.100.87:8084/basic';
+const basicUrl = 'http://23.37.100.80:8084/basic';
 // const basicUrl = "http://192.168.0.100:8084/basic";
 
 // http://23.37.100.80:8084

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

@@ -342,6 +342,7 @@
     <script src="../js/carousel.js"></script>
     <script src="../js/layui.js"></script>
 
+    <script src="../js/svga.min.js"></script>
 
     <script src="js/three.js"></script>
     <script src="js/GLTFLoader.js"></script>

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

@@ -2,12 +2,12 @@
   .springFrame5 .box62 .test-box,
   .springFrame5 .box63 .test-box,
   .springFrame5 .box64 .test-box,
-  .springFrame5 .box65 .test-box,  
+  .springFrame5 .box65 .test-box,
   .springFrame5 .box66 .test-box {
     padding: 0.5rem;
   }
 
-  .springFrame5 .box57 .content{
+  .springFrame5 .box57 .content {
     padding-top: 0.7rem;
   }
 </style>
@@ -15,8 +15,11 @@
   <div class="springFrameTitle">
     <h2>城管局网络核心机房</h2>
   </div>
-  <div class="box52 box" data-name="test52" style="width: 4356px;height:1615px;left:0;top:967px;">
-
+  <div
+    class="box52 box"
+    data-name="test52"
+    style="width: 4356px; height: 1615px; left: 0; top: 967px"
+  >
     <div class="tool">
       <div class="title bgTitle">
         <h2>机房温湿度</h2>
@@ -30,8 +33,11 @@
     <div class="panel-footer"></div>
   </div>
 
-  <div class="box53 box" data-name="test53" style="width: 4356px;height:1615px;left:0;top:2708px;">
-
+  <div
+    class="box53 box"
+    data-name="test53"
+    style="width: 4356px; height: 1615px; left: 0; top: 2708px"
+  >
     <div class="tool">
       <div class="title bgTitle">
         <h2>监控分类统计</h2>
@@ -45,8 +51,11 @@
     <div class="panel-footer"></div>
   </div>
 
-  <div class="box54 box" data-name="test54" style="width: 4328px;height:1764px;left:0;top:4528px;">
-
+  <div
+    class="box54 box"
+    data-name="test54"
+    style="width: 4328px; height: 1764px; left: 0; top: 4528px"
+  >
     <div class="tool">
       <div class="title bgTitle">
         <h2>资产分类统计</h2>
@@ -60,52 +69,65 @@
     <div class="panel-footer"></div>
   </div>
 
-  <div class="box55 box" data-name="test55" style="width: 2608px;height:1332px;left:7472px;top:1300px;">
-
+  <div
+    class="box55 box"
+    data-name="test55"
+    style="width: 2608px; height: 1332px; left: 7472px; top: 1300px"
+  >
     <div class="test-box">
       <div class="content">
         <div class="floor-dist"></div>
-        <div class="temperature-box">
+        <div style="width: 70%" class="temperature-box">
           <div class="box-box">
             <div class="temperature-box-one">
-              <div>温度</div>
+              <div style="font-size: 0.13rem !important">温度</div>
               <div class="Horizontal-line"></div>
-              <div>35°</div>
+              <div style="font-size: 0.13rem !important">35°</div>
             </div>
             <div class="temperature-box-one">
-              <div>湿度</div>
+              <div style="font-size: 0.13rem !important">湿度</div>
               <div class="Horizontal-line"></div>
-              <div>62.5RH%</div>
+              <div style="font-size: 0.13rem !important">62.5RH%</div>
             </div>
             <div class="temperature-box-one">
-              <div>水寖</div>
+              <div style="font-size: 0.13rem !important">水寖</div>
               <div class="Horizontal-line"></div>
-              <div>正常</div>
+              <div style="font-size: 0.13rem !important">正常</div>
             </div>
           </div>
           <div class="box-box">
             <div class="temperature-box-one">
-              <div>烟雾</div>
+              <div style="font-size: 0.13rem !important">烟雾</div>
               <div class="Horizontal-line"></div>
-              <div>正常</div>
+              <div style="font-size: 0.13rem !important">正常</div>
             </div>
             <div class="temperature-box-one">
-              <div>UPS</div>
+              <div style="font-size: 0.13rem !important">UPS</div>
               <div class="Horizontal-line"></div>
-              <div>正常</div>
+              <div style="font-size: 0.13rem !important">正常</div>
             </div>
             <div class="temperature-box-one">
-              <div>开关</div>
+              <div style="font-size: 0.13rem !important">开关</div>
               <div class="Horizontal-line"></div>
-              <div>正常</div>
+              <div style="font-size: 0.13rem !important">正常</div>
             </div>
           </div>
           <div class="text-box">
-            <svg t="1650274281428" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-              p-id="2773" width="20" height="20">
+            <svg
+              t="1650274281428"
+              class="icon"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="2773"
+              width="300"
+              height="250"
+            >
               <path
                 d="M944.256 926.4c-31.04 0-820.8 0-865.792 0-44.288 0-65.856-52.16-46.4-91.968C58.688 780.096 441.216 136.064 465.088 90.176c21.376-41.216 72.384-41.92 93.76 0 32.576 63.808 413.248 704.96 432 742.272C1014.464 879.104 984.576 926.4 944.256 926.4L944.256 926.4zM466.496 332.736l30.464 319.616 45.632 0 30.528-319.616L466.496 332.736 466.496 332.736zM573.12 698.112 466.496 698.112l0 91.264 106.624 0L573.12 698.112 573.12 698.112z"
-                p-id="2774" fill="#d81e06"></path>
+                p-id="2774"
+                fill="#d81e06"
+              ></path>
             </svg>
             <div class="text-one">温度过高</div>
           </div>
@@ -115,8 +137,11 @@
     <div class="panel-footer"></div>
   </div>
 
-  <div class="box56 box" data-name="test56" style="width: 6784px;height:2112px;left:4436px;top:4164px;">
-
+  <div
+    class="box56 box"
+    data-name="test56"
+    style="width: 6784px; height: 2112px; left: 4436px; top: 4164px"
+  >
     <div class="test-box">
       <div class="content">
         <div class="test-box">
@@ -177,8 +202,11 @@
     <div class="panel-footer"></div>
   </div>
 
-  <div class="box57 box" data-name="test57" style="width: 3940px;height:1343px;left:11384px;top:936px;">
-
+  <div
+    class="box57 box"
+    data-name="test57"
+    style="width: 3940px; height: 1343px; left: 11384px; top: 936px"
+  >
     <div class="tool">
       <div class="title bgTitle">
         <h2>监控画面</h2>
@@ -186,37 +214,27 @@
     </div>
     <div class="test-box">
       <div class="content">
-
         <div class="img-box">
-
           <div class="img-box-one">
-
-            <img
-            src="../images/room.webp"
-            alt=""
-          />
+            <img src="../images/room.webp" alt="" />
           </div>
           <div class="img-box-one">
-            <img
-            src="../images/room.webp"
-            alt=""
-          />
+            <img src="../images/room.webp" alt="" />
           </div>
           <div class="img-box-one">
-            <img
-            src="../images/room.webp"
-            alt=""
-          />
+            <img src="../images/room.webp" alt="" />
           </div>
-
         </div>
       </div>
     </div>
     <div class="panel-footer"></div>
   </div>
 
-  <div class="box58 box" data-name="test58" style="width: 3960px;height:1232px;left:11384px;top:5014px;">
-
+  <div
+    class="box58 box"
+    data-name="test58"
+    style="width: 3960px; height: 1232px; left: 11384px; top: 5014px"
+  >
     <div class="tool">
       <div class="title bgTitle">
         <h2>机房水浸</h2>
@@ -228,19 +246,36 @@
           <div class="Water-immersion-box-one">
             <div class="Water-immersion-box-title">
               <div class="Water-immersion-box-svg">
-                <svg t="1650283656534" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                  xmlns="http://www.w3.org/2000/svg" p-id="1578" width="20" height="20">
-                  <path d="M478.462882 476.972344L304.069869 973.321689h496.349345L626.026201 475.481805z"
-                    fill="#1296db" p-id="1579"></path>
+                <svg
+                  t="1650283656534"
+                  class="icon"
+                  viewBox="0 0 1024 1024"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  p-id="1578"
+                  width="20"
+                  height="20"
+                >
+                  <path
+                    d="M478.462882 476.972344L304.069869 973.321689h496.349345L626.026201 475.481805z"
+                    fill="#1296db"
+                    p-id="1579"
+                  ></path>
                   <path
                     d="M682.666667 535.103348c55.149927-40.244541 90.922853-105.828239 90.922853-178.864629C773.58952 234.014556 673.723435 134.148472 551.499272 134.148472c-123.714702 0-223.580786 99.866084-223.580786 222.090247 0 74.526929 37.263464 140.110626 93.90393 181.845706l19.377002-55.149927c-35.772926-31.30131-58.131004-76.017467-58.131005-126.695779 0-92.413392 74.526929-166.94032 166.940321-166.94032 92.413392 0 166.94032 74.526929 166.94032 166.94032 0 49.187773-20.86754 92.413392-55.149927 123.714702l20.86754 55.149927z"
-                    fill="#1296db" p-id="1580"></path>
+                    fill="#1296db"
+                    p-id="1580"
+                  ></path>
                   <path
                     d="M551.499272 356.238719m-86.451237 0a86.451237 86.451237 0 1 0 172.902474 0 86.451237 86.451237 0 1 0-172.902474 0Z"
-                    fill="#1296db" p-id="1581"></path>
+                    fill="#1296db"
+                    p-id="1581"
+                  ></path>
                   <path
                     d="M386.049491 640.931587l19.377001-53.659389c-77.508006-49.187773-128.186317-134.148472-128.186317-231.033479 0-150.544396 122.224163-274.259098 274.259097-274.259097 150.544396 0 274.259098 122.224163 274.259098 274.259097 0 95.394469-49.187773 180.355167-125.20524 229.54294l17.886462 53.659389c96.885007-58.131004 160.978166-163.959243 160.978166-283.202329 0-181.845706-147.563319-329.409025-327.918486-329.409025-181.845706 0-329.409025 147.563319-329.409025 329.409025 0 120.733624 65.583697 226.561863 163.959244 284.692868z"
-                    fill="#1296db" p-id="1582"></path>
+                    fill="#1296db"
+                    p-id="1582"
+                  ></path>
                 </svg>
               </div>
               <div>通信状态</div>
@@ -263,8 +298,11 @@
     <div class="panel-footer"></div>
   </div>
 
-  <div class="box59 box" data-name="test59" style="width: 3956px;height:1252px;left:11384px;top:3704px;">
-
+  <div
+    class="box59 box"
+    data-name="test59"
+    style="width: 3956px; height: 1252px; left: 11384px; top: 3704px"
+  >
     <div class="tool">
       <div class="title bgTitle">
         <h2>机房温湿度</h2>
@@ -276,19 +314,36 @@
           <div class="Water-immersion-box-one">
             <div class="Water-immersion-box-title">
               <div class="Water-immersion-box-svg">
-                <svg t="1650283656534" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                  xmlns="http://www.w3.org/2000/svg" p-id="1578" width="20" height="20">
-                  <path d="M478.462882 476.972344L304.069869 973.321689h496.349345L626.026201 475.481805z"
-                    fill="#1296db" p-id="1579"></path>
+                <svg
+                  t="1650283656534"
+                  class="icon"
+                  viewBox="0 0 1024 1024"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  p-id="1578"
+                  width="20"
+                  height="20"
+                >
+                  <path
+                    d="M478.462882 476.972344L304.069869 973.321689h496.349345L626.026201 475.481805z"
+                    fill="#1296db"
+                    p-id="1579"
+                  ></path>
                   <path
                     d="M682.666667 535.103348c55.149927-40.244541 90.922853-105.828239 90.922853-178.864629C773.59952 234.014556 673.723435 134.148472 551.499272 134.148472c-123.714702 0-223.590786 99.866084-223.590786 222.090247 0 74.526929 37.263464 140.110626 93.90393 181.845706l19.377002-55.149927c-35.772926-31.30131-59.131004-76.017467-59.131005-126.695779 0-92.413392 74.526929-166.94032 166.940321-166.94032 92.413392 0 166.94032 74.526929 166.94032 166.94032 0 49.187773-20.86754 92.413392-55.149927 123.714702l20.86754 55.149927z"
-                    fill="#1296db" p-id="1590"></path>
+                    fill="#1296db"
+                    p-id="1590"
+                  ></path>
                   <path
                     d="M551.499272 356.238719m-86.451237 0a86.451237 86.451237 0 1 0 172.902474 0 86.451237 86.451237 0 1 0-172.902474 0Z"
-                    fill="#1296db" p-id="1591"></path>
+                    fill="#1296db"
+                    p-id="1591"
+                  ></path>
                   <path
                     d="M386.049491 640.931597l19.377001-53.659389c-77.508006-49.187773-128.186317-134.148472-128.186317-231.033479 0-150.544396 122.224163-274.259098 274.259097-274.259097 150.544396 0 274.259098 122.224163 274.259098 274.259097 0 95.394469-49.187773 180.355167-125.20524 229.54294l17.886462 53.659389c96.885007-59.131004 160.978166-163.959243 160.978166-283.202329 0-181.845706-147.563319-329.409025-327.918486-329.409025-181.845706 0-329.409025 147.563319-329.409025 329.409025 0 120.733624 65.593697 226.561863 163.959244 284.692868z"
-                    fill="#1296db" p-id="1592"></path>
+                    fill="#1296db"
+                    p-id="1592"
+                  ></path>
                 </svg>
               </div>
               <div>通信状态</div>
@@ -301,20 +356,40 @@
     </div>
     <div class="panel-footer"></div>
   </div>
-    <!-- 机房 -->
+  <!-- 机房 -->
   <div class="frameClose">X</div>
 
-
-
-  <div id="ThreeJS62" class="roomThree roomThree62" style="visibility:hidden"></div>
-  <div id="ThreeJS63" class="roomThree roomThree63" style="visibility:hidden"></div>
-  <div id="ThreeJS64" class="roomThree roomThree64" style="visibility:hidden"></div>
-  <div id="ThreeJS65" class="roomThree roomThree65" style="visibility:hidden"></div>
-  <div id="ThreeJS66" class="roomThree roomThree66" style="visibility:hidden"></div>
-
-
-  <div class="box60 box" data-name="test60" style="width: 3972px;height:1260px;left:11384px;top:2356px;">
-
+  <div
+    id="ThreeJS62"
+    class="roomThree roomThree62"
+    style="visibility: hidden"
+  ></div>
+  <div
+    id="ThreeJS63"
+    class="roomThree roomThree63"
+    style="visibility: hidden"
+  ></div>
+  <div
+    id="ThreeJS64"
+    class="roomThree roomThree64"
+    style="visibility: hidden"
+  ></div>
+  <div
+    id="ThreeJS65"
+    class="roomThree roomThree65"
+    style="visibility: hidden"
+  ></div>
+  <div
+    id="ThreeJS66"
+    class="roomThree roomThree66"
+    style="visibility: hidden"
+  ></div>
+
+  <div
+    class="box60 box"
+    data-name="test60"
+    style="width: 3972px; height: 1260px; left: 11384px; top: 2356px"
+  >
     <div class="tool">
       <div class="title bgTitle">
         <h2>消防状态模块</h2>
@@ -326,19 +401,36 @@
           <div class="Water-immersion-box-one">
             <div class="Water-immersion-box-title">
               <div class="Water-immersion-box-svg">
-                <svg t="1650283656534" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                  xmlns="http://www.w3.org/2000/svg" p-id="1578" width="20" height="20">
-                  <path d="M478.462882 476.972344L304.069869 973.321689h496.349345L626.026201 475.481805z"
-                    fill="#1296db" p-id="1579"></path>
+                <svg
+                  t="1650283656534"
+                  class="icon"
+                  viewBox="0 0 1024 1024"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  p-id="1578"
+                  width="20"
+                  height="20"
+                >
+                  <path
+                    d="M478.462882 476.972344L304.069869 973.321689h496.349345L626.026201 475.481805z"
+                    fill="#1296db"
+                    p-id="1579"
+                  ></path>
                   <path
                     d="M682.666667 535.103348c55.149927-40.244541 90.922853-105.828239 90.922853-178.864629C773.60952 234.014556 673.723435 134.148472 551.499272 134.148472c-123.714702 0-223.600786 99.866084-223.600786 222.090247 0 74.526929 37.263464 140.110626 93.90393 181.845706l19.377002-55.149927c-35.772926-31.30131-60.131004-76.017467-60.131005-126.695779 0-92.413392 74.526929-166.94032 166.940321-166.94032 92.413392 0 166.94032 74.526929 166.94032 166.94032 0 49.187773-20.86754 92.413392-55.149927 123.714702l20.86754 55.149927z"
-                    fill="#1296db" p-id="1600"></path>
+                    fill="#1296db"
+                    p-id="1600"
+                  ></path>
                   <path
                     d="M551.499272 356.238719m-86.451237 0a86.451237 86.451237 0 1 0 172.902474 0 86.451237 86.451237 0 1 0-172.902474 0Z"
-                    fill="#1296db" p-id="1601"></path>
+                    fill="#1296db"
+                    p-id="1601"
+                  ></path>
                   <path
                     d="M386.049491 640.931607l19.377001-53.660389c-77.508006-49.187773-128.186317-134.148472-128.186317-231.033479 0-150.544396 122.224163-274.260098 274.260097-274.260097 150.544396 0 274.260098 122.224163 274.260098 274.260097 0 95.394469-49.187773 180.355167-125.20524 229.54294l17.886462 53.660389c96.885007-60.131004 160.978166-163.960243 160.978166-283.202329 0-181.845706-147.563319-329.409025-327.918486-329.409025-181.845706 0-329.409025 147.563319-329.409025 329.409025 0 120.733624 65.603697 226.561863 163.960244 284.692868z"
-                    fill="#1296db" p-id="1602"></path>
+                    fill="#1296db"
+                    p-id="1602"
+                  ></path>
                 </svg>
               </div>
               <div>通信状态</div>
@@ -349,19 +441,36 @@
           <div class="Water-immersion-box-one">
             <div class="Water-immersion-box-title">
               <div class="Water-immersion-box-svg">
-                <svg t="1650283656534" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                  xmlns="http://www.w3.org/2000/svg" p-id="1578" width="20" height="20">
-                  <path d="M478.462882 476.972344L304.069869 973.321689h496.349345L626.026201 475.481805z"
-                    fill="#1296db" p-id="1579"></path>
+                <svg
+                  t="1650283656534"
+                  class="icon"
+                  viewBox="0 0 1024 1024"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  p-id="1578"
+                  width="20"
+                  height="20"
+                >
+                  <path
+                    d="M478.462882 476.972344L304.069869 973.321689h496.349345L626.026201 475.481805z"
+                    fill="#1296db"
+                    p-id="1579"
+                  ></path>
                   <path
                     d="M682.666667 535.103348c55.149927-40.244541 90.922853-105.828239 90.922853-178.864629C773.60952 234.014556 673.723435 134.148472 551.499272 134.148472c-123.714702 0-223.600786 99.866084-223.600786 222.090247 0 74.526929 37.263464 140.110626 93.90393 181.845706l19.377002-55.149927c-35.772926-31.30131-60.131004-76.017467-60.131005-126.695779 0-92.413392 74.526929-166.94032 166.940321-166.94032 92.413392 0 166.94032 74.526929 166.94032 166.94032 0 49.187773-20.86754 92.413392-55.149927 123.714702l20.86754 55.149927z"
-                    fill="#1296db" p-id="1600"></path>
+                    fill="#1296db"
+                    p-id="1600"
+                  ></path>
                   <path
                     d="M551.499272 356.238719m-86.451237 0a86.451237 86.451237 0 1 0 172.902474 0 86.451237 86.451237 0 1 0-172.902474 0Z"
-                    fill="#1296db" p-id="1601"></path>
+                    fill="#1296db"
+                    p-id="1601"
+                  ></path>
                   <path
                     d="M386.049491 640.931607l19.377001-53.660389c-77.508006-49.187773-128.186317-134.148472-128.186317-231.033479 0-150.544396 122.224163-274.260098 274.260097-274.260097 150.544396 0 274.260098 122.224163 274.260098 274.260097 0 95.394469-49.187773 180.355167-125.20524 229.54294l17.886462 53.660389c96.885007-60.131004 160.978166-163.960243 160.978166-283.202329 0-181.845706-147.563319-329.409025-327.918486-329.409025-181.845706 0-329.409025 147.563319-329.409025 329.409025 0 120.733624 65.603697 226.561863 163.960244 284.692868z"
-                    fill="#1296db" p-id="1602"></path>
+                    fill="#1296db"
+                    p-id="1602"
+                  ></path>
                 </svg>
               </div>
               <div>消防主机状态</div>
@@ -372,19 +481,36 @@
           <div class="Water-immersion-box-one">
             <div class="Water-immersion-box-title">
               <div class="Water-immersion-box-svg">
-                <svg t="1650283656534" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                  xmlns="http://www.w3.org/2000/svg" p-id="1578" width="20" height="20">
-                  <path d="M478.462882 476.972344L304.069869 973.321689h496.349345L626.026201 475.481805z"
-                    fill="#1296db" p-id="1579"></path>
+                <svg
+                  t="1650283656534"
+                  class="icon"
+                  viewBox="0 0 1024 1024"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  p-id="1578"
+                  width="20"
+                  height="20"
+                >
+                  <path
+                    d="M478.462882 476.972344L304.069869 973.321689h496.349345L626.026201 475.481805z"
+                    fill="#1296db"
+                    p-id="1579"
+                  ></path>
                   <path
                     d="M682.666667 535.103348c55.149927-40.244541 90.922853-105.828239 90.922853-178.864629C773.60952 234.014556 673.723435 134.148472 551.499272 134.148472c-123.714702 0-223.600786 99.866084-223.600786 222.090247 0 74.526929 37.263464 140.110626 93.90393 181.845706l19.377002-55.149927c-35.772926-31.30131-60.131004-76.017467-60.131005-126.695779 0-92.413392 74.526929-166.94032 166.940321-166.94032 92.413392 0 166.94032 74.526929 166.94032 166.94032 0 49.187773-20.86754 92.413392-55.149927 123.714702l20.86754 55.149927z"
-                    fill="#1296db" p-id="1600"></path>
+                    fill="#1296db"
+                    p-id="1600"
+                  ></path>
                   <path
                     d="M551.499272 356.238719m-86.451237 0a86.451237 86.451237 0 1 0 172.902474 0 86.451237 86.451237 0 1 0-172.902474 0Z"
-                    fill="#1296db" p-id="1601"></path>
+                    fill="#1296db"
+                    p-id="1601"
+                  ></path>
                   <path
                     d="M386.049491 640.931607l19.377001-53.660389c-77.508006-49.187773-128.186317-134.148472-128.186317-231.033479 0-150.544396 122.224163-274.260098 274.260097-274.260097 150.544396 0 274.260098 122.224163 274.260098 274.260097 0 95.394469-49.187773 180.355167-125.20524 229.54294l17.886462 53.660389c96.885007-60.131004 160.978166-163.960243 160.978166-283.202329 0-181.845706-147.563319-329.409025-327.918486-329.409025-181.845706 0-329.409025 147.563319-329.409025 329.409025 0 120.733624 65.603697 226.561863 163.960244 284.692868z"
-                    fill="#1296db" p-id="1602"></path>
+                    fill="#1296db"
+                    p-id="1602"
+                  ></path>
                 </svg>
               </div>
               <div>开关量</div>
@@ -396,10 +522,6 @@
     </div>
     <div class="panel-footer"></div>
   </div>
-
-  
-
-
 </div>
 
 <script>
@@ -409,4 +531,4 @@
   // const testDom53 = document.querySelector('.springFrame5 .box53');
   // const dom54 = document.querySelector('.springFrame5 .box54 .floor-dist');
   // const testDom54 = document.querySelector('.springFrame5 .box54');
-</script>
+</script>