yhd 3 سال پیش
والد
کامیت
06a129e7db
43فایلهای تغییر یافته به همراه1056 افزوده شده و 1355 حذف شده
  1. 3 0
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test19/test19.css
  2. 2 2
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test22/test22.css
  3. 14 1
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test26/test26.css
  4. 11 1
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test28/test28.css
  5. 20 0
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test30/test30.css
  6. 3 1
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test31/test31.css
  7. 8 4
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test37/test37.css
  8. 6 6
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test37/test37.html
  9. 8 4
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test38/test38.css
  10. 0 11
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test41/test41.css
  11. 0 30
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test43/test43.css
  12. 0 11
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test44/test44.css
  13. 0 3
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test44/test44.html
  14. 2 2
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test44/test44.js
  15. 1 1
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test47/test47.css
  16. 1 1
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test48/test48.css
  17. 1 1
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test49/test49.css
  18. 0 91
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test49/test49.html
  19. 5 27
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test50/test50.css
  20. 79 99
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test50/test50.html
  21. 302 440
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test50/test50.js
  22. 0 1
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test53/test53.css
  23. 6 6
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test53/test53.js
  24. 0 1
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test54/test54.css
  25. 1 2
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test55/test55.css
  26. 3 3
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test55/test55.html
  27. 0 3
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test58/test58.css
  28. 5 5
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test58/test58.html
  29. 0 7
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test59/test59.css
  30. 3 3
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test59/test59.html
  31. 0 3
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test60/test60.css
  32. 3 3
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test60/test60.html
  33. 22 30
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test62/test62.css
  34. 22 25
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test62/test62.html
  35. 286 288
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test62/test62.js
  36. 1 1
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test7/test7.js
  37. 223 232
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/css/coom.css
  38. BIN
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/images/networkSecurity/bjaq.png
  39. BIN
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/images/networkSecurity/zdwx.png
  40. BIN
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/images/networkSecurity/zu.png
  41. BIN
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/images/networkSecurity/zu15.png
  42. 1 1
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/main/springFrame3.html
  43. 14 5
      spring-cloud/server-page/src/main/resources/static/testEcharts/test/main/springFrame4.html

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

@@ -37,6 +37,9 @@
   color: #f74038;
   font-family: leslie;
 }
+.box19 .right .txt{
+  color: #3c9ffa;
+}
 .box19 .left img,
 .box19 .right img {
   width: 12%;

+ 2 - 2
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test22/test22.css

@@ -7,10 +7,10 @@
   align-items: center;
 }
 .box22 .content ul li:nth-child(2n){
-  background: rgba(41, 10, 10, 0.815);
+  background: rgba(53, 34, 34, 0.15);
 }
 .box22 .content ul li:nth-child(2n+1){
-  background: rgba(9, 14, 59, 0.815);
+  background: rgba(106, 110, 146, 0.33);
 }
 .box22 .content ul li span {
   transform: scale(0.9);

+ 14 - 1
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test26/test26.css

@@ -11,6 +11,7 @@
 }
 .box26 .left,
 .box26 .right {
+  justify-content: center;
   width: 50%;
   height: 100%;
   display: flex;
@@ -47,7 +48,7 @@
 }
 .box26 .left img,
 .box26 .right img {
-  width: 45%;
+  width: 17%;
 }
 .box26 .dataCount_box {
   display: flex;
@@ -57,6 +58,7 @@
   text-align: center;
   line-height: 30px;
   font-size: 14px;
+  margin-top: 0.1rem;
 }
 .box26 #stuTable thead {
   color: #eee;
@@ -72,3 +74,14 @@
 .box26 #stuTable .delBtn {
   background-color: #d9534f;
 }
+.box26 tbody tr:nth-child(2n){  
+  background-color: #1c538ce6;
+}
+/* 奇 */
+.box26 tbody tr:nth-child(2n+1){
+  background-color: #1c538c63;
+}
+.box26 thead tr{
+  background-color: #1c538c;
+}
+

+ 11 - 1
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test28/test28.css

@@ -1,6 +1,9 @@
 .box28 {
   color: #fff;
 }
+.box28 .left{
+  background: url(../images/networkSecurity/zu.png) no-repeat;
+}
 .box28 .left,
 .box28 .right {
   width: 50%;
@@ -37,7 +40,11 @@
   width: 13%;
 }
 .box28 span {
+  font-size: 0.15rem !important;
+}
+.box28 span.text1{
   font-size: 0.2rem !important;
+  color: #3c9ffa;
 }
 .box28 .left {
   justify-content: space-around;
@@ -71,9 +78,12 @@
   flex-direction: column;
 }
 .box28 .right ul li {
-  margin: 10px 0;
+  margin: 0.05rem 0;
 }
 .box28 .desc {
   display: flex;
   align-items: center;
+  padding: 0.1rem;
+  background: #4784a06e;
+  background: url(../images/networkSecurity/zu15.png) no-repeat;
 }

+ 20 - 0
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test30/test30.css

@@ -65,3 +65,23 @@
 .box30 #stuTable .delBtn {
   background-color: #d9534f;
 }
+
+
+/* 偶 */
+.box30 tbody tr:nth-child(2n){  
+  background-color: #1c538ce6;
+}
+/* 奇 */
+.box30 tbody tr:nth-child(2n+1){
+  background-color: #1c538c63;
+}
+.box30 thead tr{
+  background-color: #1c538c;
+}
+
+
+.box30 thead td:nth-child(1){
+  background: url(../imgages/networkSecurity/4.png) no-repeat;
+  background-size: 85% 100%;
+  background-position: 29px 0;
+}

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

@@ -27,7 +27,9 @@
     justify-content: center;
     background: url(../../images/fx.png) no-repeat;
     background-position: center;
-    background-size: 100%;
+    background-size: 140%;
+    position: relative;
+    top: -3%;
     color: #fff;
     text-align: center;
     flex-direction: column;

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

@@ -59,13 +59,17 @@
   font-size: 0.2rem;
   color: #f58b08;
 }
-.box37 .content .rightInfo li:nth-child(1){
-  color: #ed763e;
+.box37 .content .rightInfo li .s2{
+  color: #35a1fc;
+}
+.box37 .content .rightInfo li .s3{
+  color: #22cee6;
 }
-.box37 .content .rightInfo li:nth-child(2){
+
+.box37 .content .rightInfo li .n2{
   color: #35a1fc;
 }
-.box37 .content .rightInfo li:nth-child(3){
+.box37 .content .rightInfo li .n3{
   color: #22cee6;
 }
 

+ 6 - 6
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test37/test37.html

@@ -21,10 +21,10 @@
             <ul class="rightInfo">
                 <li>
                     <img src="../images/networkSecurity/gwld.png" alt="">
-                    <span>已失陷资产数</span>
+                    <span class="s2">已失陷资产数</span>
                     <div>
-                        <span class="num">0</span>
-                        <i>个</i>
+                        <span class="num n2">0</span>
+                        <i class="n2">个</i>
                     </div>
                 </li>
                 <li>
@@ -37,10 +37,10 @@
                 </li>
                 <li>
                     <img src="../images/networkSecurity/ty.png" alt="">
-                    <span>低风险资产数</span>
+                    <span class="s3">低风险资产数</span>
                     <div>
-                        <span class="num">0</span>
-                        <i>个</i>
+                        <span class="num n3">0</span>
+                        <i class="n3">个</i>
                     </div>
                 </li>
             </ul>

+ 8 - 4
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test38/test38.css

@@ -2,18 +2,21 @@
   display: flex;
   justify-content: space-around;
 }
+.box38 .content{
+  padding-bottom: 0.1rem;
+}
 .box38 .img-box-one-one {
+  position: relative;
   width: 30%;
   height: 100%;
-  /* padding: 10px; */
 }
 .box38 .img-box-one-one img {
   width: 100%;
   height: 100%;
 }
 .img-text-title {
-  position: relative;
-  top: 38%;
+  position: absolute;
+  top: 19%;
   left: 33%;
   color: #fff;
 }
@@ -25,10 +28,11 @@
   font-size: 0.15rem !important;
 }
 .img-numer {
-  font-size: 0.25rem !important;
+  font-size: 0.4rem !important;
   margin-right: 0.1rem;
   font-family: leslie;
 }
 .box38 .txt{
   font-size: 0.13rem !important;
+  background: none;
 }

+ 0 - 11
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test41/test41.css

@@ -68,17 +68,6 @@
 }
 
 
-.box41 tbody tr:nth-child(0){
-  color: #fc620a;
-}
-
-.box41 tbody tr:nth-child(1){
-  color: #db8f51;
-}
-
-.box41 tbody tr:nth-child(2){
-  color: #247fff;
-}
 .box41 .content{
   padding: 0 0.1rem;
 }

+ 0 - 30
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test43/test43.css

@@ -1,32 +1,3 @@
-<<<<<<< HEAD
-.box43 .content {
-  margin: 0;
-}
-.box43 ul {
-  display: flex;
-  margin-top: 0.3rem;
-  font-family: "LESLIE";
-}
-.box43 ul li {
-  color: #fff;
-  flex: 1;
-  text-align: center;
-  position: relative;
-}
-.box43 ul li img {
-  width: 127%;
-  transform: scale(1.1);
-  margin-left: -11%;
-}
-.box43 ul li .desc {
-  position: relative;
-  margin-top: -12%;
-}
-@font-face {
-  font-family: "LESLIE";
-  src: url("../../font/LESLIE.TTF");
-}
-=======
 .box43 .content {
   margin: 0;
 }
@@ -46,4 +17,3 @@
 .box43 ul li .desc {
   position: relative;
 }
->>>>>>> a04b695c18c613b06551a317ba5c584a587358c0

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

@@ -31,14 +31,3 @@
 .text {
   text-align: center;
 }
-.storing-num{
-  font-size: 0.2rem !important;
-  position: relative;
-  top: -20%;
-  left: 16%;
-  width: 70%;
-  text-align: center;
-  /* background-color: ; */
-  background: url("../../images/矩形-513.png");
-  background-size: 100% 100%;
-}

+ 0 - 3
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test44/test44.html

@@ -58,9 +58,6 @@
       </div>
       <div class="main">
         <div class="floor-dist"></div>
-        <div class="storing-num">
-          健康指数
-        </div>
       </div>
       <div class="right">
         <div class="item">

+ 2 - 2
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test44/test44.js

@@ -139,7 +139,7 @@ const test44 = (function () {
             textStyle: {
               fontWeight: "bold",
               color: "#0ab7ff",
-              fontSize: 120,
+              fontSize: 100,
             },
           },
           //仪表盘详情,用于显示数据。
@@ -148,7 +148,7 @@ const test44 = (function () {
             offsetCenter: [0, "-40%"],
             color: "#ffffff",
             textStyle: {
-              fontSize: 140,
+              fontSize: 120,
               color: "#4aca96",
             },
           },

+ 1 - 1
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test47/test47.css

@@ -18,7 +18,7 @@
 .box47 .progress .proDesc {
   position: absolute;
   top: -70% !important;
-  left: -35%;
+  left: -43%;
   color: #fff;
 }
 .box47 .progress > span {

+ 1 - 1
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test48/test48.css

@@ -18,7 +18,7 @@
 .box48 .progress .proDesc {
   position: absolute;
   top: -70% !important;
-  left: -35%;
+  left: -43%;
   color: #fff;
 }
 .box48 .progress > span {

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

@@ -53,7 +53,7 @@
 .box49 #stuTable tbody,
 .box49 #content-stuTable tbody {
     color: #fff;
-    /* background-color: #205dcf46; */
+    background-color: #205dcf46;
 }
 
 .box49 #stuTable .editBtn,

+ 0 - 91
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test49/test49.html

@@ -7,97 +7,6 @@
         <div class="title bgTitle">
             <h2>受攻击最严重业务系统</h2>
         </div>
-<<<<<<< HEAD
-        <table id="stuTable" class="table">
-          <thead>
-            <tr>
-              <th>系统名称</th>
-              <th>CPU</th>
-              <th>内存</th>
-              <th>磁盘空间</th>
-              <th>网络</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>应用服务器</td>
-              <td>8%</td>
-              <td>23%</td>
-              <td>200G/1T</td>
-              <td>1323/kbps</td>
-            </tr>
-            <tr>
-              <td>应用服务器</td>
-              <td>8%</td>
-              <td>23%</td>
-              <td>200G/1T</td>
-              <td>1323/kbps</td>
-            </tr>
-            <tr>
-              <td>应用服务器</td>
-              <td>8%</td>
-              <td>23%</td>
-              <td>200G/1T</td>
-              <td>1323/kbps</td>
-            </tr>
-            <tr>
-              <td>应用服务器</td>
-              <td>8%</td>
-              <td>23%</td>
-              <td>200G/1T</td>
-              <td>1323/kbps</td>
-            </tr>
-            <tr>
-              <td>应用服务器</td>
-              <td>8%</td>
-              <td>23%</td>
-              <td>200G/1T</td>
-              <td>1323/kbps</td>
-            </tr>
-            <tr>
-              <td>应用服务器</td>
-              <td>8%</td>
-              <td>23%</td>
-              <td>200G/1T</td>
-              <td>1323/kbps</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="content-right">
-        <div class="title">
-          <div style="width: 13%; height: 100%">
-            <img
-            style="width: 100%; height:100%"
-              src="../images/业务系统图标.png"
-              alt=""
-            />
-          </div>
-          <span>业务统计B</span>
-        </div>
-        <table id="content-stuTable" class="table">
-          <thead>
-            <tr>
-              <th>系统名称</th>
-              <th>CPU</th>
-              <th>内存</th>
-              <th>磁盘空间</th>
-              <th>网络</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>应用服务器</td>
-              <td>8%</td>
-              <td>23%</td>
-              <td>200G/1T</td>
-              <td>1323/kbps</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-=======
->>>>>>> a04b695c18c613b06551a317ba5c584a587358c0
     </div>
     <div class="test-box">
         <div class="content">

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

@@ -11,14 +11,12 @@
 .box50 .content .item {
   display: flex;
   align-items: center;
-  /* font-size: 0.3rem; */
+  font-size: 0.3rem;
   width: 43%;
-  height: 48%;
-  margin-top: 1%;
 }
 .box50 .content .item img {
-  width: 70%;
-  height: 92%;
+  width: 37%;
+  height: 68%;
   margin: 0 0.1rem;
 }
 .box50 .content .item .item-box {
@@ -44,31 +42,11 @@
 }
 .box50 .content .item .item-box .temp::after {
   content: "";
-  width: 10px;
+  width: 2px;
   height: 50%;
   background-color: #fff;
   position: absolute;
-  left: 43%;
+  left: 49%;
   top: 50%;
   transform: translate(-50%, -50%);
 }
-#slide {
-  position: absolute;
-  height: 300px;
-  width: 260px;
-  color: #fa8e93;
-  overflow: hidden;
-  border: 1px solid #ccc;
-}
-#slide p {
-  height: 34px;
-  line-height: 34px;
-  overflow: hidden;
-}
-#slide span {
-  float: right;
-}
-@font-face {
-  font-family: "LESLIE";
-  src: url("../../font/LESLIE.TTF");
-}

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

@@ -1,109 +1,89 @@
-<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 class="box50 box" data-name='test50'>
+    <div class="toolBox">
+        <span class="fit"></span>
+        <span class="close"></span>
     </div>
-  </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="tool">
+        <div class="title bgTitle">
+            <h2>受攻击最严重业务系统</h2>
         </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 class="test-box">
+        <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>
-          </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 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>
-          </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 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>
-          </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 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>
+            <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>
-          </div>
         </div>
-      </div>
-    </marquee>
-  </div>
-  <div class="panel-footer"></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>
-<script>
-  var speed = 40;
-  var slide = document.getElementById("slide");
-  var slide2 = document.getElementById("slide2");
-  var slide1 = document.getElementById("slide1");
-  slide2.innerHTML = slide1.innerHTML;
-  function Marquee() {
-    if (slide2.offsetTop - slide.scrollTop <= 0)
-      slide.scrollTop -= slide1.offsetHeight;
-    else {
-      slide.scrollTop++;
-    }
-  }
-  var MyMar = setInterval(Marquee, speed);
-  slide.onmouseover = function () {
-    clearInterval(MyMar);
-  };
-  slide.onmouseout = function () {
-    MyMar = setInterval(Marquee, speed);
-  };
-</script>
+<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>

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

@@ -1,139 +1,95 @@
 const test50 = (function () {
-  function test50(id, domTitle) {
+  function test50 (id, domTitle) {
     if (domTitle) {
-      $(".test50 .title h2").text(domTitle);
+      $('.test50 .title h2').text(domTitle)
     }
-    $(".test50 .box").css("z-index", ++zIndex);
-    $(".test50 .box").attr("data-id", id);
-    move3(".test50 .test-box");
-    move2(".test50 .containerTool");
-
-    $(".test50 .close").click(function () {
-      $(".test50 .box").remove();
-      $(".test50 .containerTool").css("display", "none");
-      $(".test50 .setWidth").val("");
-      $(".test50 .setHeight").val("");
-      moduleIdRemove.push(id);
-    });
-    eventClick(".test50");
-    // var speed = 40;
-    // var slide = document.getElementById("slide");
-    // var slide2 = document.getElementById("slide2");
-    // var slide1 = document.getElementById("slide1");
-    // slide2.innerHTML = slide1.innerHTML;
-    // function Marquee() {
-    //   if (slide2.offsetTop - slide.scrollTop <= 0)
-    //     slide.scrollTop -= slide1.offsetHeight;
-    //   else {
-    //     slide.scrollTop++;
-    //   }
-    // }
-    // var MyMar = setInterval(Marquee, speed);
-    // slide.onmouseover = function () {
-    //   clearInterval(MyMar);
-    // };
-    // slide.onmouseout = function () {
-    //   MyMar = setInterval(Marquee, speed);
-    // };
+    $('.test50 .box').css('z-index', ++zIndex)
+    $('.test50 .box').attr('data-id', id)
+    move3('.test50 .test-box')
+    move2('.test50 .containerTool')
+
+
+    $('.test50 .close').click(function () {
+      $('.test50 .box').remove();
+      $('.test50 .containerTool').css('display', 'none');
+      $('.test50 .setWidth').val('')
+      $('.test50 .setHeight').val('')
+      moduleIdRemove.push(id)
+    })
+
+    eventClick('.test50');
+
     // 二号楼中心机房
     $.ajax({
-      url: ROOM + "/api/devicesignaltable/listByName",
+      url: ROOM + '/api/devicesignaltable/listByName',
       data: {
-        deviceName: "八楼",
+        "deviceName": '八楼'
       },
       success: function ({ data }) {
         // 温度
-        let temperature = data.filter((item) => {
-          return item.signalname === "温度";
+        let temperature = data.filter(item => {
+          return item.signalname === '温度'
         })[0].signalvalue;
-        // 湿度
-        let humidity = data.filter((item) => {
-          return item.signalname === "湿度";
+        // 湿度 
+        let humidity = data.filter(item => {
+          return item.signalname === '湿度'
         })[0].signalvalue;
 
-        $(".test50 .box50 .item")
-          .eq(1)
-          .find(".temp")
-          .find("span")
-          .eq(0)
-          .html(temperature + "℃");
-        $(".test50 .box50 .item")
-          .eq(1)
-          .find(".temp")
-          .find("span")
-          .eq(1)
-          .html(humidity + "℃");
+        $('.test50 .box50 .item').eq(1).find('.temp').find('span').eq(0).html(temperature + '℃');
+        $('.test50 .box50 .item').eq(1).find('.temp').find('span').eq(1).html(humidity + '℃');
       },
       error: function (err) {
-        console.log("--机房接口八楼,二号楼-------------超时");
-      },
+        console.log('--机房接口八楼,二号楼-------------超时');
+      }
     });
 
+
     // 网络核心机房
     $.ajax({
-      url: ROOM + "/api/devicesignaltable/listByName",
+      url: ROOM + '/api/devicesignaltable/listByName',
       data: {
-        deviceName: "四楼",
+        "deviceName": '四楼'
       },
       success: function ({ data }) {
         // 温度
-        let temperature = data.filter((item) => {
-          return item.signalname === "温度";
+        let temperature = data.filter(item => {
+          return item.signalname === '温度'
         })[0].signalvalue;
-        // 湿度
-        let humidity = data.filter((item) => {
-          return item.signalname === "湿度";
+        // 湿度 
+        let humidity = data.filter(item => {
+          return item.signalname === '湿度'
         })[0].signalvalue;
 
-        $(".test50 .box50 .item")
-          .eq(0)
-          .find(".temp")
-          .find("span")
-          .eq(0)
-          .html(temperature + "℃");
-        $(".test50 .box50 .item")
-          .eq(0)
-          .find(".temp")
-          .find("span")
-          .eq(1)
-          .html(humidity + "℃");
+        $('.test50 .box50 .item').eq(0).find('.temp').find('span').eq(0).html(temperature + '℃');
+        $('.test50 .box50 .item').eq(0).find('.temp').find('span').eq(1).html(humidity + '℃');
       },
       error: function (err) {
-        console.log("--网络核心机房-------------超时");
-      },
+        console.log('--网络核心机房-------------超时');
+      }
     });
 
+
     // 配线间机房
     $.ajax({
-      url: ROOM + "/api/devicesignaltable/listByName",
+      url: ROOM + '/api/devicesignaltable/listByName',
       data: {
-        deviceName: "九楼",
+        "deviceName": '九楼'
       },
       success: function ({ data }) {
         // 温度
-        let temperature = data.filter((item) => {
-          return item.signalname === "温度";
+        let temperature = data.filter(item => {
+          return item.signalname === '温度'
         })[0].signalvalue;
-        // 湿度
-        let humidity = data.filter((item) => {
-          return item.signalname === "湿度";
+        // 湿度 
+        let humidity = data.filter(item => {
+          return item.signalname === '湿度'
         })[0].signalvalue;
-        $(".test50 .box50 .item")
-          .eq(2)
-          .find(".temp")
-          .find("span")
-          .eq(0)
-          .html(temperature + "℃");
-        $(".test50 .box50 .item")
-          .eq(2)
-          .find(".temp")
-          .find("span")
-          .eq(1)
-          .html(humidity + "℃");
+        $('.test50 .box50 .item').eq(2).find('.temp').find('span').eq(0).html(temperature + '℃');
+        $('.test50 .box50 .item').eq(2).find('.temp').find('span').eq(1).html(humidity + '℃');
       },
       error: function (err) {
-        console.log("--配线间机房-------------超时");
-      },
+        console.log('--配线间机房-------------超时');
+      }
     });
 
     // 档案室库房
@@ -141,108 +97,92 @@ const test50 = (function () {
       /** url,data参数,
        * type请求类型,响应体结果,超时时间
        * 成功的回调,失败回调 */
-      url: DH + "queryData/queryDeviceParam",
+      url: DH + 'queryData/queryDeviceParam',
       data: {
-        urlCode: "DH_002",
+        "urlCode": 'DH_002'
       },
-      type: "GET",
-      dataType: "JSON",
+      type: 'GET',
+      dataType: 'JSON',
       success: function ({ data }) {
-        console.log("档案室库房", data);
+        console.log('档案室库房', data);
         // 温度
-        let temperature = data
-          .filter((item) => {
-            if (item.sname === "环境温度") {
-              return true;
-            }
-          })
-          .reduce((cur, item) => {
-            return cur + parseFloat(item.value);
-          }, 0);
-        // 湿度
-        let humidity = data
-          .filter((item) => {
-            if (item.sname === "环境湿度") {
-              return true;
-            }
-          })
-          .reduce((cur, item) => {
-            return cur + parseFloat(item.value);
-          }, 0);
-        $(".test50 .box50 .item")
-          .eq(3)
-          .find(".temp")
-          .find("span")
-          .eq(0)
-          .html(temperature + "℃");
-        $(".test50 .box50 .item")
-          .eq(3)
-          .find(".temp")
-          .find("span")
-          .eq(1)
-          .html(humidity + "℃");
+        let temperature = data.filter(item => {
+          if (item.sname === '环境温度') {
+            return true
+          }
+        }).reduce((cur, item) => {
+          return cur + parseFloat(item.value);
+        }, 0);
+        // 湿度 
+        let humidity = data.filter(item => {
+          if (item.sname === '环境湿度') {
+            return true
+          }
+        }).reduce((cur, item) => {
+          return cur + parseFloat(item.value);
+        }, 0);
+        $('.test50 .box50 .item').eq(3).find('.temp').find('span').eq(0).html(temperature + '℃');
+        $('.test50 .box50 .item').eq(3).find('.temp').find('span').eq(1).html(humidity + '℃');
+
       },
       timeout: 6000,
       error: function () {
-        console.log("档案室库房超时了");
+        console.log('档案室库房超时了');
       },
     });
 
-    $(".test50 .box50 .item").click(function () {
-      const typeId = $(this).attr("data-id");
-
-      const dom52 = document.querySelector(".springFrame5 .box52 .floor-dist");
-      const testDom52 = document.querySelector(".springFrame5 .box52");
-      const dom53 = document.querySelector(".springFrame5 .box53 .floor-dist");
-      const testDom53 = document.querySelector(".springFrame5 .box53");
-      const dom54 = document.querySelector(".springFrame5 .box54 .floor-dist");
-      const testDom54 = document.querySelector(".springFrame5 .box54");
-      const dom58 = document.querySelector(".springFrame5 .box58 .floor-dist");
-      const testDom58 = document.querySelector(".springFrame5 .box58");
-      const dom59 = document.querySelector(".springFrame5 .box59 .floor-dist");
-      const testDom59 = document.querySelector(".springFrame5 .box59");
-
-      setCharts53(dom53, testDom53);
-      setCharts54(dom54, testDom54);
-
-      if (typeId === "1") {
-        // 网络核心机房
+
+    $('.test50 .box50 .item').click(function () {
+
+      const typeId = $(this).attr('data-id')
+
+      const dom52 = document.querySelector('.springFrame5 .box52 .floor-dist');
+      const testDom52 = document.querySelector('.springFrame5 .box52');
+      const dom53 = document.querySelector('.springFrame5 .box53 .floor-dist');
+      const testDom53 = document.querySelector('.springFrame5 .box53');
+      const dom54 = document.querySelector('.springFrame5 .box54 .floor-dist');
+      const testDom54 = document.querySelector('.springFrame5 .box54');
+      const dom58 = document.querySelector('.springFrame5 .box58 .floor-dist');
+      const testDom58 = document.querySelector('.springFrame5 .box58');
+      const dom59 = document.querySelector('.springFrame5 .box59 .floor-dist');
+      const testDom59 = document.querySelector('.springFrame5 .box59');
+
+      setCharts53(dom53, testDom53)
+      setCharts54(dom54, testDom54)
+
+      if (typeId === '1') { // 网络核心机房
         fourthFloor();
-      } else if (typeId === "2") {
-        // 2号楼中心机房
+      } else if (typeId === '2') { // 2号楼中心机房
         eighthFloor();
-      } else if (typeId === "3") {
-        // 配线间机房
-        ninthFloor();
-      } else if (typeId === "4") {
-        // 档案库房
+      } else if (typeId === '3') { // 配线间机房
+        ninthFloor()
+      } else if (typeId === '4') { // 档案库房
         dasRoom();
-      } else {
-        // UPS供电机房
+      } else { // UPS供电机房
         upsOf();
       }
 
       // 二号楼中心机房
-      function eighthFloor() {
+      function eighthFloor () {
         $.ajax({
-          url: ROOM + "/api/devicesignaltable/listByName",
+          url: ROOM + '/api/devicesignaltable/listByName',
           data: {
-            deviceName: "八楼",
+            "deviceName": '八楼'
           },
           success: function ({ data }) {
-            console.log("机房接口八楼,二号楼", data);
+            console.log('机房接口八楼,二号楼', data);
             // 温度
-            let temperature = data.filter((item) => {
-              return item.signalname === "温度";
+            let temperature = data.filter(item => {
+              return item.signalname === '温度'
             })[0].signalvalue;
-            // 湿度
-            let humidity = data.filter((item) => {
-              return item.signalname === "湿度";
+            // 湿度 
+            let humidity = data.filter(item => {
+              return item.signalname === '湿度'
             })[0].signalvalue;
 
             // 漏水位置/米
-            let leackgePosition = data.filter((item) => {
-              return item.signalname === "漏水1位置";
+            let leackgePosition = data.filter(item => {
+              return item.signalname === '漏水1位置'
             })[0].signalvalue;
             // 电阻率
             let eleRes = data[3].signalvalue;
@@ -250,63 +190,53 @@ const test50 = (function () {
               eleRes = 0;
             }
             // 机房水浸状态
-            let waterStauts = data.filter((item) => {
-              return item.signalname === "水浸1状态";
+            let waterStauts = data.filter(item => {
+              return item.signalname === '水浸1状态'
             })[0].signalvalue;
             // 机房通信状态
             let comStatus = data[0].signalvalue;
 
+
             // 开关量
-            let swit = data.filter((item) => {
-              return (
-                item.signalname.indexOf("开关量") !== -1 &&
-                item.signalvalue.indexOf("正常") !== -1
-              );
+            let swit = data.filter(item => {
+              return item.signalname.indexOf('开关量') !== -1 && item.signalvalue.indexOf('正常') !== -1;
             });
-            $(".springFrame5 .box58 .text1").html(comStatus);
-            $(".springFrame5 .box58 .text2").html(waterStauts);
-
-            setValue(
-              temperature,
-              humidity,
-              waterStauts,
-              "-",
-              "-",
-              "-",
-              swit ? "正常" : ""
-            );
-
-            setCharts52(dom52, testDom52, temperature, humidity);
-            setCharts59(dom59, testDom59, temperature, humidity);
-            setCharts58(dom58, testDom58, leackgePosition, eleRes);
+            $('.springFrame5 .box58 .text1').html(comStatus);
+            $('.springFrame5 .box58 .text2').html(waterStauts);
+
+            setValue(temperature, humidity, waterStauts, '-', '-', '-', swit ? '正常' : '')
+
+            setCharts52(dom52, testDom52, temperature, humidity)
+            setCharts59(dom59, testDom59, temperature, humidity)
+            setCharts58(dom58, testDom58, leackgePosition, eleRes)
           },
           error: function (err) {
-            console.log("--机房接口八楼,二号楼-------------超时");
-          },
+            console.log('--机房接口八楼,二号楼-------------超时');
+          }
         });
       }
 
       // 网络核心机房
-      function fourthFloor() {
+      function fourthFloor () {
         $.ajax({
-          url: ROOM + "/api/devicesignaltable/listByName",
+          url: ROOM + '/api/devicesignaltable/listByName',
           data: {
-            deviceName: "四楼",
+            "deviceName": '四楼'
           },
           success: function ({ data }) {
-            console.log("网络核心机房", data);
+            console.log('网络核心机房', data);
             // 温度
-            let temperature = data.filter((item) => {
-              return item.signalname === "温度";
+            let temperature = data.filter(item => {
+              return item.signalname === '温度'
             })[0].signalvalue;
-            // 湿度
-            let humidity = data.filter((item) => {
-              return item.signalname === "湿度";
+            // 湿度 
+            let humidity = data.filter(item => {
+              return item.signalname === '湿度'
             })[0].signalvalue;
 
             // 漏水位置/米
-            let leackgePosition = data.filter((item) => {
-              return item.signalname === "漏水1位置";
+            let leackgePosition = data.filter(item => {
+              return item.signalname === '漏水1位置'
             })[0].signalvalue;
             // 电阻率
             let eleRes = data[3].signalvalue;
@@ -314,91 +244,73 @@ const test50 = (function () {
               eleRes = 0;
             }
             // 机房温湿度状态
-            let waterStauts = data.filter((item) => {
-              return (
-                item.devicename === "四楼机房温湿度1" &&
-                item.signalname === "通信状态"
-              );
+            let waterStauts = data.filter(item => {
+              return item.devicename === "四楼机房温湿度1" && item.signalname === '通信状态'
             })[0].signalvalue;
 
             // 机房水浸通信状态
-            let comStatus = data.filter((item) => {
-              return (
-                item.devicename === "四楼机房水浸1" &&
-                item.signalname === "通信状态"
-              );
+            let comStatus = data.filter(item => {
+              return item.devicename === "四楼机房水浸1" && item.signalname === '通信状态'
             })[0].signalvalue;
 
             // 机房水浸1状态
-            let sStatus = data.filter((item) => {
-              return (
-                item.devicename === "四楼机房水浸1" &&
-                item.signalname === "水浸1状态"
-              );
+            let sStatus = data.filter(item => {
+              return item.devicename === "四楼机房水浸1" && item.signalname === "水浸1状态"
             })[0].signalvalue;
 
             // 消防状态模块-通信状态
-            let xfStatus = data.filter((item) => {
-              return (
-                item.devicename === "四楼机房消防状态模块1" &&
-                item.signalname === "通信状态"
-              );
+            let xfStatus = data.filter(item => {
+              return item.devicename === "四楼机房消防状态模块1" && item.signalname === '通信状态'
             })[0].signalvalue;
             // 消防状态模块-主机状态
-            let zjStatus = data.filter((item) => {
-              return (
-                item.devicename === "四楼机房消防状态模块1" &&
-                item.signalname === "四楼2#消防主机状态"
-              );
+            let zjStatus = data.filter(item => {
+              return item.devicename === "四楼机房消防状态模块1" && item.signalname === "四楼2#消防主机状态"
             })[0].signalvalue;
 
             // 消防状态模块-开关量2
-            let kgStatus = data.filter((item) => {
-              return (
-                item.devicename === "四楼机房空开状态模块3" &&
-                item.signalname === "开关量1"
-              );
+            let kgStatus = data.filter(item => {
+              return item.devicename === "四楼机房空开状态模块3" && item.signalname === "开关量1"
             })[0].signalvalue;
 
-            setValue(temperature, humidity, sStatus, "-", "-", kgStatus, "");
-
-            $(".springFrame5 .box58 .text1").html(comStatus);
-            $(".springFrame5 .box58 .text2").html(sStatus);
-            $(".springFrame5 .box59 .Water-immersion-text").html(waterStauts);
-            $(".springFrame5 .box60 .text1").html(xfStatus);
-            $(".springFrame5 .box60 .text2").html(zjStatus);
-            $(".springFrame5 .box60 .text3").html(kgStatus);
-            setCharts52(dom52, testDom52, temperature, humidity);
-            setCharts59(dom59, testDom59, temperature, humidity);
-            setCharts58(dom58, testDom58, leackgePosition, eleRes);
+            setValue(temperature, humidity, sStatus, '-', '-', kgStatus, '')
+
+            $('.springFrame5 .box58 .text1').html(comStatus);
+            $('.springFrame5 .box58 .text2').html(sStatus);
+            $('.springFrame5 .box59 .Water-immersion-text').html(waterStauts);
+            $('.springFrame5 .box60 .text1').html(xfStatus);
+            $('.springFrame5 .box60 .text2').html(zjStatus);
+            $('.springFrame5 .box60 .text3').html(kgStatus);
+            setCharts52(dom52, testDom52, temperature, humidity)
+            setCharts59(dom59, testDom59, temperature, humidity)
+            setCharts58(dom58, testDom58, leackgePosition, eleRes)
           },
           error: function (err) {
-            console.log("--网络核心机房-------------超时");
-          },
+            console.log('--网络核心机房-------------超时');
+          }
         });
       }
 
       // 配线间机房
-      function ninthFloor() {
+      function ninthFloor () {
         $.ajax({
-          url: ROOM + "/api/devicesignaltable/listByName",
+          url: ROOM + '/api/devicesignaltable/listByName',
           data: {
-            deviceName: "九楼",
+            "deviceName": '九楼'
           },
           success: function ({ data }) {
-            console.log("配线间机房", data);
+            console.log('配线间机房', data);
             // 温度
-            let temperature = data.filter((item) => {
-              return item.signalname === "温度";
+            let temperature = data.filter(item => {
+              return item.signalname === '温度'
             })[0].signalvalue;
-            // 湿度
-            let humidity = data.filter((item) => {
-              return item.signalname === "湿度";
+            // 湿度 
+            let humidity = data.filter(item => {
+              return item.signalname === '湿度'
             })[0].signalvalue;
 
             // 漏水位置/米
-            let leackgePosition = data.filter((item) => {
-              return item.signalname === "漏水1位置";
+            let leackgePosition = data.filter(item => {
+              return item.signalname === '漏水1位置'
             })[0].signalvalue;
             // 电阻率
             let eleRes = data[3].signalvalue; // d
@@ -406,219 +318,169 @@ const test50 = (function () {
               eleRes = 0;
             }
             // 机房温湿度状态
-            let waterStauts = data.filter((item) => {
-              return (
-                item.devicename === "九楼机房温湿度4" &&
-                item.signalname === "通信状态"
-              );
+            let waterStauts = data.filter(item => {
+              return item.devicename === "九楼机房温湿度4" && item.signalname === '通信状态'
             })[0].signalvalue;
 
             // 机房水浸通信状态
-            let comStatus = data.filter((item) => {
-              return (
-                item.devicename === "九楼机房水浸3" &&
-                item.signalname === "通信状态"
-              );
+            let comStatus = data.filter(item => {
+              return item.devicename === "九楼机房水浸3" && item.signalname === '通信状态'
             })[0].signalvalue;
 
             // 机房水浸1状态
-            let sStatus = data.filter((item) => {
-              return item.signalname === "水浸1状态";
+            let sStatus = data.filter(item => {
+              return item.signalname === "水浸1状态"
             })[0].signalvalue;
 
-            setValue(temperature, humidity, sStatus, "-", "-", "-", "");
+            setValue(temperature, humidity, sStatus, '-', '-', '-', '')
 
-            $(".springFrame5 .box58 .text1").html(comStatus);
-            $(".springFrame5 .box58 .text2").html(sStatus);
-            $(".springFrame5 .box59 .Water-immersion-text").html(waterStauts);
-            setCharts52(dom52, testDom52, temperature, humidity);
-            setCharts59(dom59, testDom59, temperature, humidity);
-            setCharts58(dom58, testDom58, leackgePosition, eleRes);
+
+            $('.springFrame5 .box58 .text1').html(comStatus);
+            $('.springFrame5 .box58 .text2').html(sStatus);
+            $('.springFrame5 .box59 .Water-immersion-text').html(waterStauts);
+            setCharts52(dom52, testDom52, temperature, humidity)
+            setCharts59(dom59, testDom59, temperature, humidity)
+            setCharts58(dom58, testDom58, leackgePosition, eleRes)
           },
           error: function (err) {
-            console.log("--配线间机房-------------超时");
-          },
+            console.log('--配线间机房-------------超时');
+          }
         });
       }
 
+
+
       // 档案室库房
-      function dasRoom() {
+      function dasRoom () {
         $.ajax({
           /** url,data参数,
            * type请求类型,响应体结果,超时时间
            * 成功的回调,失败回调 */
-          url: DH + "queryData/queryDeviceParam",
+          url: DH + 'queryData/queryDeviceParam',
           data: {
-            urlCode: "DH_002",
+            "urlCode": 'DH_002'
           },
-          type: "GET",
-          dataType: "JSON",
+          type: 'GET',
+          dataType: 'JSON',
           success: function ({ data }) {
-            console.log("档案室库房", data);
+            console.log('档案室库房', data);
             // 温度
             let temperature,
-              curtemp = data.filter((item) => {
-                if (item.sname === "环境温度") {
-                  return true;
+
+              curtemp = data.filter(item => {
+                if (item.sname === '环境温度') {
+                  return true
                 }
               });
-            temperature = (
-              curtemp.reduce((cur, item) => {
-                return cur + parseInt(item.value);
-              }, 0) / curtemp.length
-            ).toFixed(2);
+            temperature = (curtemp.reduce((cur, item) => {
+              return cur + parseInt(item.value);
+            }, 0) / curtemp.length).toFixed(2);
 
-            // 湿度
+            // 湿度 
             let humidity,
-              curhum = data.filter((item) => {
-                if (item.sname === "环境湿度") {
-                  return true;
+              curhum = data.filter(item => {
+                if (item.sname === '环境湿度') {
+                  return true
                 }
-              });
-            humidity = (
-              curhum.reduce((cur, item) => {
-                return cur + parseInt(item.value);
-              }, 0) / curhum.length
-            ).toFixed(2);
+              })
+            humidity = (curhum.reduce((cur, item) => {
+              return cur + parseInt(item.value);
+            }, 0) / curhum.length).toFixed(2);
 
-            setValue(temperature, humidity, "-", "-", "-", "-", "");
 
-            setCharts52(dom52, testDom52, temperature, humidity);
-            setCharts59(dom59, testDom59, temperature, humidity);
+            setValue(temperature, humidity, '-', '-', '-', '-', '')
+
+
+            setCharts52(dom52, testDom52, temperature, humidity)
+            setCharts59(dom59, testDom59, temperature, humidity)
 
             let index = 0;
-            const status = data.filter((item) => {
-              return item.sname.indexOf("状态") !== -1;
+            const status = data.filter(item => {
+              return item.sname.indexOf('状态') !== -1;
             });
-            console.log("各种状态", status);
-            $(".Water-immersion-box-one").each(function () {
-              $(this)
-                .find(".Water-immersion-box-title")
-                .find("div")
-                .eq(1)
-                .html(status[index].sname);
-              $(this)
-                .find(".Water-immersion-text")
-                .html(status[index].value === "true" ? "正常" : "异常");
+            console.log('各种状态', status);
+            $('.Water-immersion-box-one').each(function () {
+              $(this).find('.Water-immersion-box-title').find('div').eq(1).html(status[index].sname)
+              $(this).find('.Water-immersion-text').html(status[index].value === 'true' ? '正常' : '异常')
               index++;
-            });
+            })
+
+
 
             // setCharts58(dom58, testDom58,leackgePosition,eleRes)
           },
           timeout: 6000,
           error: function () {
-            console.log("档案室库房超时了");
+            console.log('档案室库房超时了');
           },
         });
       }
 
       // UPS供电机房
-      function upsOf() {
+      function upsOf () {
         $.ajax({
-          url: ROOM + "/api/devicesignaltable/listByName",
+          url: ROOM + '/api/devicesignaltable/listByName',
           data: {
-            deviceName: "UPS",
+            "deviceName": 'UPS'
           },
           success: function ({ data }) {
-            console.log("UPS供电机房", data);
+            console.log('UPS供电机房', data);
           },
           error: function (err) {
-            console.log("--UPS供电机房-------------超时");
-          },
+            console.log('--UPS供电机房-------------超时');
+          }
         });
       }
 
-      function setValue(
-        temperature,
-        humidity,
-        water,
-        smoke,
-        ups,
-        swit,
-        isToll
-      ) {
-        $(".springFrame5 .box55 .box-box")
-          .eq(0)
-          .find(".temperature-box-one")
-          .eq(0)
-          .find("div")
-          .eq(2)
-          .html(temperature + "°");
-        $(".springFrame5 .box55 .box-box")
-          .eq(0)
-          .find(".temperature-box-one")
-          .eq(1)
-          .find("div")
-          .eq(2)
-          .html(humidity + "RH%");
-        $(".springFrame5 .box55 .box-box")
-          .eq(0)
-          .find(".temperature-box-one")
-          .eq(2)
-          .find("div")
-          .eq(2)
-          .html(water);
-
-        $(".springFrame5 .box55 .box-box")
-          .eq(1)
-          .find(".temperature-box-one")
-          .eq(0)
-          .find("div")
-          .eq(2)
-          .html(smoke);
-        $(".springFrame5 .box55 .box-box")
-          .eq(1)
-          .find(".temperature-box-one")
-          .eq(1)
-          .find("div")
-          .eq(2)
-          .html(ups);
-        $(".springFrame5 .box55 .box-box")
-          .eq(1)
-          .find(".temperature-box-one")
-          .eq(2)
-          .find("div")
-          .eq(2)
-          .html(swit);
+
+      function setValue (temperature, humidity, water, smoke, ups, swit, isToll) {
+        $('.springFrame5 .box55 .box-box').eq(0).find('.temperature-box-one').eq(0).find('div').eq(2).html(temperature + '°')
+        $('.springFrame5 .box55 .box-box').eq(0).find('.temperature-box-one').eq(1).find('div').eq(2).html(humidity + 'RH%')
+        $('.springFrame5 .box55 .box-box').eq(0).find('.temperature-box-one').eq(2).find('div').eq(2).html(water)
+
+
+        $('.springFrame5 .box55 .box-box').eq(1).find('.temperature-box-one').eq(0).find('div').eq(2).html(smoke)
+        $('.springFrame5 .box55 .box-box').eq(1).find('.temperature-box-one').eq(1).find('div').eq(2).html(ups)
+        $('.springFrame5 .box55 .box-box').eq(1).find('.temperature-box-one').eq(2).find('div').eq(2).html(swit)
 
         // 温度是否过高
-        $(".springFrame5 .box55 .text-box").html(isToll);
+        $('.springFrame5 .box55 .text-box').html(isToll)
       }
 
+
       // 告警信息
       $.ajax({
         /** url,data参数,
          * type请求类型,响应体结果,超时时间
          * 成功的回调,失败回调 */
-        url: DH + "queryData/queryWarningInfo",
-        type: "GET",
-        dataType: "JSON",
+        url: DH + 'queryData/queryWarningInfo',
+        type: 'GET',
+        dataType: 'JSON',
         success: function ({ data }) {
-          console.log("告警信息", data);
-          const html = data
-            .map((item, index) => {
-              let level = "一级";
-              switch (item.level) {
-                case 1:
-                  level = "一级";
-                  break;
-                case 2:
-                  level = "二级";
-                  break;
-                case 3:
-                  level = "三级";
-                  break;
-                case 4:
-                  level = "四级";
-                  break;
-                case 5:
-                  level = "五级";
-                  break;
-                default:
-                  level = "六级";
-                  break;
-              }
-              return `
+          console.log('告警信息', data);
+          const html = data.map((item, index) => {
+            let level = '一级';
+            switch (item.level) {
+              case 1:
+                level = '一级';
+                break;
+              case 2:
+                level = '二级';
+                break;
+              case 3:
+                level = '三级';
+                break;
+              case 4:
+                level = '四级';
+                break;
+              case 5:
+                level = '五级';
+                break;
+              default:
+                level = '六级';
+                break;
+            }
+            return `
         <tr>
           <td>${index + 1}</td>
           <td>${item.aname}</td>
@@ -626,46 +488,46 @@ const test50 = (function () {
           <td>${level}</td>
           <td>${item.eventtime}</td>
         </tr>
-        `;
-            })
-            .join("");
-          $(".springFrame5 .box56 tbody").html(html);
+        `
+          }).join('')
+          $('.springFrame5 .box56 tbody').html(html)
         },
         timeout: 6000,
         error: function () {
-          console.log("告警信息超时了");
+          console.log('告警信息超时了');
         },
       });
 
+
       roomIndex = $(this).index();
-      roomIndex = 9;
+      roomIndex = 9
       if (roomIndex === 0) {
-        $(".roomThree62").css("visibility", "inherit");
-        $(".roomThree63").css("visibility", "hidden");
-        $(".roomThree64").css("visibility", "hidden");
-        $(".roomThree65").css("visibility", "hidden");
-        $(".roomThree66").css("visibility", "hidden");
+        $('.roomThree62').css('visibility', 'inherit');
+        $('.roomThree63').css('visibility', 'hidden');
+        $('.roomThree64').css('visibility', 'hidden');
+        $('.roomThree65').css('visibility', 'hidden');
+        $('.roomThree66').css('visibility', 'hidden');
         module62();
       } else if (roomIndex === 1) {
-        $(".roomThree62").css("visibility", "hidden");
-        $(".roomThree63").css("visibility", "inherit");
-        $(".roomThree64").css("visibility", "hidden");
-        $(".roomThree65").css("visibility", "hidden");
-        $(".roomThree66").css("visibility", "hidden");
+        $('.roomThree62').css('visibility', 'hidden');
+        $('.roomThree63').css('visibility', 'inherit');
+        $('.roomThree64').css('visibility', 'hidden');
+        $('.roomThree65').css('visibility', 'hidden');
+        $('.roomThree66').css('visibility', 'hidden');
         module63();
       } else if (roomIndex === 2) {
-        $(".roomThree62 ").css("visibility", "hidden");
-        $(".roomThree63").css("visibility", "hidden");
-        $(".roomThree64").css("visibility", "inherit");
-        $(".roomThree65").css("visibility", "hidden");
-        $(".roomThree66").css("visibility", "hidden");
+        $('.roomThree62 ').css('visibility', 'hidden');
+        $('.roomThree63').css('visibility', 'hidden');
+        $('.roomThree64').css('visibility', 'inherit');
+        $('.roomThree65').css('visibility', 'hidden');
+        $('.roomThree66').css('visibility', 'hidden');
         module64();
       } else if (roomIndex === 3) {
-        $(".roomThree62").css("visibility", "hidden");
-        $(".roomThree63").css("visibility", "hidden");
-        $(".roomThree64").css("visibility", "hidden");
-        $(".roomThree65").css("visibility", "inherit");
-        $(".roomThree66").css("visibility", "hidden");
+        $('.roomThree62').css('visibility', 'hidden');
+        $('.roomThree63').css('visibility', 'hidden');
+        $('.roomThree64').css('visibility', 'hidden');
+        $('.roomThree65').css('visibility', 'inherit');
+        $('.roomThree66').css('visibility', 'hidden');
         module65();
       } else {
         // $('.roomThree62').css('visibility', 'hidden');
@@ -676,8 +538,8 @@ const test50 = (function () {
         // module66();
       }
       $(".sf5").slideToggle();
-    });
+    })
   }
 
-  return test50;
+  return test50
 })();

+ 0 - 1
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test53/test53.css

@@ -4,5 +4,4 @@
 .box53 .content {
   margin: 0;
   padding: 0;
-  margin-top: 7%;
 }

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

@@ -112,9 +112,9 @@ const test53 = (function() {
                     axisLabel: {
                         interval: 0,
                         color: "#fff",
-                        align: "center",
-                        margin: 100,
-                        fontSize: 100,
+                        align: "left",
+                        margin: 80,
+                        fontSize: 13,
                         formatter: function(value, index) {
                             if (opt.index === 0 && index < 3) {
                                 return (
@@ -155,7 +155,7 @@ const test53 = (function() {
                                 padding: [5, 8],
                             },
                             title: {
-                                width: 300,
+                                width: 165,
                             },
                         },
                     },
@@ -178,8 +178,8 @@ const test53 = (function() {
                         interval: 0,
                         color: "#fff",
                         align: "left",
-                        margin: 40,
-                        fontSize: 100,
+                        margin: 20,
+                        fontSize: 13,
                         formatter: function(value, index) {
                             return data[index].value + "条";
                         },

+ 0 - 1
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test54/test54.css

@@ -4,5 +4,4 @@
 .box54 .content {
   margin: 0;
   padding: 0;
-  margin-top: 7%;
 }

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

@@ -12,9 +12,8 @@
   color: #fff;
 }
 .box55 .box-box {
-  margin-top: 7%;
+  margin-top: 20%;
   display: flex;
-  margin-bottom: 29%;
 }
 .box55 .temperature-box-one {
   width: 33%;

+ 3 - 3
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test55/test55.html

@@ -49,9 +49,9 @@
             version="1.1"
             xmlns="http://www.w3.org/2000/svg"
             p-id="2773"
-            width="300"
-            height="250"
-            style="margin-top: -2%;"            >
+            width="20"
+            height="20"
+          >
             <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"

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

@@ -42,6 +42,3 @@
 .Water-immersion-box-svg {
   padding: 5px;
 }
-.Water-immersion-box-title-text{
-  font-size: 0.11rem !important;
-}

+ 5 - 5
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test58/test58.html

@@ -21,8 +21,8 @@
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="1578"
-                width="300"
-                height="250"
+                width="20"
+                height="20"
               >
                 <path
                   d="M478.462882 476.972344L304.069869 973.321689h496.349345L626.026201 475.481805z"
@@ -46,16 +46,16 @@
                 ></path>
               </svg>
             </div>
-            <div class="Water-immersion-box-title-text">通信状态</div>
+            <div>通信状态</div>
           </div>
           <div class="Water-immersion-text">正常</div>
         </div>
         <div class="Water-immersion-box-one">
           <div class="Water-immersion-box-title">
             <div class="Water-immersion-box-svg">
-              <img class="Water-immersion-box-img" src="../../font/水滴.png" alt="" />
+              <img src="../../font/水滴.png" alt="" />
             </div>
-            <div class="Water-immersion-box-title-text">水滴1正常</div>
+            <div>水滴1正常</div>
           </div>
           <div class="Water-immersion-text">正常</div>
         </div>

+ 0 - 7
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test59/test59.css

@@ -42,10 +42,3 @@
 .Water-immersion-box-svg {
   padding: 5px;
 }
-.Water-immersion-box-title-text {
-  font-size: 0.11rem !important;
-}
-.Water-immersion-box-img{
-  width: 250px;
-  height: 250px ;
-}                                                                                                         

+ 3 - 3
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test59/test59.html

@@ -21,8 +21,8 @@
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="1578"
-                width="300"
-                height="250"
+                width="20"
+                height="20"
               >
                 <path
                   d="M478.462882 476.972344L304.069869 973.321689h496.349345L626.026201 475.481805z"
@@ -46,7 +46,7 @@
                 ></path>
               </svg>
             </div>
-            <div class="Water-immersion-box-title-text">通信状态</div>
+            <div>通信状态</div>
           </div>
           <div class="Water-immersion-text">正常</div>
         </div>

+ 0 - 3
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test60/test60.css

@@ -41,6 +41,3 @@
 .Water-immersion-box-svg {
   padding: 5px;
 }
-.Water-immersion-box-title-text {
-  font-size: 0.11rem !important;
-}

+ 3 - 3
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test60/test60.html

@@ -21,8 +21,8 @@
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="1578"
-                width="300"
-                height="250"
+                width="20"
+                height="20"
               >
                 <path
                   d="M478.462882 476.972344L304.069869 973.321689h496.349345L626.026201 475.481805z"
@@ -46,7 +46,7 @@
                 ></path>
               </svg>
             </div>
-            <div class="Water-immersion-box-title-text">通信状态</div>
+            <div>通信状态</div>
           </div>
           <div class="Water-immersion-text">正常</div>
         </div>

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

@@ -1,17 +1,10 @@
-@font-face {
-  font-family: "庞门正道标题体";
-  src: url("../../font/庞门正道标题体.TTF");
-}
 .box62 p {
-  font-size: 0.25rem !important;
+  font-size: 0.15rem !important;
   font-weight: 700;
   color: #75e2fa;
-  font-family: "LESLIE";
 }
 .box62 .concent > div {
   position: absolute;
-  background-position: center -6%;
-  background-size: 95% 86%;
 }
 .box62 {
   text-align: center;
@@ -36,47 +29,46 @@
   background-size: 100%;
 }
 .box62 .c-left-img-one {
-  left: 9%;
-  top: 12%;
+  left: 5%;
+  top: 26%;
 }
 .box62 .c-left-img-two {
-  left: 15%;
-  top: 7%;
+  left: 16%;
+  top: 6%;
 }
 .box62 .c-center1 {
-  left: 49%;
-  top: 35%;
+  left: 50%;
+  top: 50%;
   transform: translate(-50%, -50%);
 }
 .box62 .c-center2 {
-  left: 28%;
-  top: 32%;
+  left: 32%;
+  top: 56%;
 }
 .box62 .c-center3 {
-  left: 34%;
-  top: 9%;
+  left: 36%;
+  top: 20%;
 }
 .box62 .c-center4 {
-  left: 57%;
-  top: 16%;
+  left: 60%;
+  top: 25%;
 }
 .box62 .c-center5 {
-  left: 51%;
-  top: 39%;
+  left: 64%;
+  top: 54%;
 }
 .box62 .c-center6 {
-  left: 40%;
-  top: 43%;
+  left: 50%;
+  top: 67%;
 }
 .box62 .c-r-item1 {
-  right: 20%;
-  top: 15%;
+  right: 22%;
+  top: 25%;
 }
 .box62 .c-r-item2 {
-  right: 15%;
-  top: 5%;
+  right: 12%;
 }
 .box62 .c-r-item3 {
-  right: 11%;
-  top: 15%;
+  right: 4%;
+  top: 25%;
 }

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

@@ -5,56 +5,53 @@
   </div>
   <div class="test-box">
     <div class="concent">
+
       <div class="l-bg ex"></div>
       <!-- <div class="x-bg ex"></div> -->
 
-      <div style="width: 6%" class="c-left-img-one">
-        <img src="../images/zybz/jbq拷贝3.png" alt="" />
-        <p style="color: #ffd7aa">主城区县</p>
+      <div class="c-left-img-one">
+        <img src="../images/zybz/jbq拷贝3.png" alt="">
+        <p>主城区县</p>
       </div>
-      <div class="c-left-img-two" style="width: 5%">
-        <img src="../images/zybz/ybq拷贝2.png" alt="" />
-        <p>郊区县</p>
+      <div class="c-left-img-two">
+        <img src="../images/zybz/ybq拷贝2.png" alt="">
+        <p>郊区县</p>
       </div>
       <div class="c-center1">
-        <img src="../images/zybz/组240拷贝.png" alt="" style="width: 1666px" />
+        <img src="../images/zybz/组240拷贝.png" alt="" style="width:282px;">
         <p>指挥大厅</p>
       </div>
       <div class="c-center2">
-        <img src="../images/zybz/icon_jifang拷贝3.png" alt="" />
+        <img src="../images/zybz/icon_jifang拷贝3.png" alt="">
         <p>1号配线间机房</p>
       </div>
       <div class="c-center3">
-        <img src="../images/zybz/icon_jifang拷贝3.png" alt="" />
+        <img src="../images/zybz/icon_jifang拷贝3.png" alt="">
         <p>城管局UPS主供电房</p>
       </div>
       <div class="c-center4">
-        <img src="../images/zybz/icon_jifang拷贝3.png" alt="" />
+        <img src="../images/zybz/icon_jifang拷贝3.png" alt="">
         <p>2号楼中心机房</p>
       </div>
-      <div class="c-center5" style="width: 5%">
-        <img src="../images/zybz/icon_jifang拷贝3.png" alt="" />
+      <div class="c-center5">
+        <img src="../images/zybz/icon_jifang拷贝3.png" alt="">
         <p>档案室库房</p>
       </div>
       <div class="c-center6">
-        <img
-          style="width: 50%"
-          src="../images/zybz/icon_jifang拷贝3.png"
-          alt=""
-        />
+        <img src="../images/zybz/icon_jifang拷贝3.png" alt="">
         <p>城管局网络核心机房</p>
       </div>
 
-      <div style="width: 5%" class="c-r-item1">
-        <img src="../images/zybz/hwy拷贝.png" alt="" />
+      <div class="c-r-item1">
+        <img src="../images/zybz/hwy拷贝.png" alt="">
         <p>华为云</p>
       </div>
-      <div class="c-r-item2" style="width: 6%">
-        <img src="../images/zybz/xcy拷贝.png" alt="" />
-        <p style="color: #ffd7aa">信创云</p>
+      <div class="c-r-item2">
+        <img src="../images/zybz/xcy拷贝.png" alt="">
+        <p>信创云</p>
       </div>
-      <div class="c-r-item3" style="width: 5%">
-        <img src="../images/zybz/lcy拷贝.png" alt="" />
+      <div class="c-r-item3">
+        <img src="../images/zybz/lcy拷贝.png" alt="">
         <p>浪潮云</p>
       </div>
     </div>
@@ -80,4 +77,4 @@
     <button class="fixBtn toolBtn">确定</button>
     <button class="offBtn toolBtn">取消</button>
   </div>
-</div>
+</div>

+ 286 - 288
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test62/test62.js

@@ -1,307 +1,305 @@
-const test62 = (function () {
-  function test62(id, domTitle) {
-    if (domTitle) {
-      $(".test62 .title h2").text(domTitle);
-    }
-    $(".test62 .box").css("z-index", ++zIndex);
-    $(".test62 .box").attr("data-id", id);
-    move3(".test62 .test-box");
-    move2(".test62 .containerTool");
-
-    let timer = null;
+const test62 = (function() {
+    function test62(id, domTitle) {
+        if (domTitle) {
+            $(".test62 .title h2").text(domTitle);
+        }
+        $(".test62 .box").css("z-index", ++zIndex);
+        $(".test62 .box").attr("data-id", id);
+        move3(".test62 .test-box");
+        move2(".test62 .containerTool");
 
-    $(".test62 .close").click(function () {
-      $(".test62 .box").remove();
-      $(".test62 .containerTool").css("display", "none");
-      $(".test62 .setWidth").val("");
-      $(".test62 .setHeight").val("");
-      moduleIdRemove.push(id);
-    });
+        let timer = null;
 
-    eventClick(".test62");
+        $(".test62 .close").click(function() {
+            $(".test62 .box").remove();
+            $(".test62 .containerTool").css("display", "none");
+            $(".test62 .setWidth").val("");
+            $(".test62 .setHeight").val("");
+            moduleIdRemove.push(id);
+        });
 
-    const dists = document.querySelectorAll(".test62 .floor-dist");
-    const testDoms = document.querySelectorAll(".test62 .box");
-    for (let i = 0; i < dists.length; i++) {
-      const dom = dists[i];
-      setCharts(dom, testDoms[i]);
-    }
+        eventClick(".test62");
 
-    // 局本级
-    $(".bg-center-img-one").click(function () {
-      $(".sf1").slideDown();
-      $(".sf3").slideUp();
-      $(".sf4").slideUp();
-    });
+        const dists = document.querySelectorAll(".test62 .floor-dist");
+        const testDoms = document.querySelectorAll(".test62 .box");
+        for (let i = 0; i < dists.length; i++) {
+            const dom = dists[i];
+            setCharts(dom, testDoms[i]);
+        }
 
-    // 浪潮
-    $(".bg-center-img-three").click(function () {
-      $(".sf4").slideDown();
-      $(".sf1").slideUp();
-      $(".sf3").slideUp();
-    });
+        // 局本级
+        $('.bg-center-img-one').click(function() {
+            $('.sf1').slideDown();
+            $('.sf3').slideUp();
+            $('.sf4').slideUp();
+        })
 
-    // 华为
-    $(".bg-center-img-four").click(function () {
-      $(".sf3").slideDown();
-      $(".sf1").slideUp();
-      $(".sf4").slideUp();
-    });
+        // 浪潮
+        $('.bg-center-img-three').click(function() {
+            $('.sf4').slideDown();
+            $('.sf1').slideUp();
+            $('.sf3').slideUp();
+        })
 
-    let myChart = echarts.init(dists[0]);
+        // 华为
+        $('.bg-center-img-four').click(function() {
+            $('.sf3').slideDown();
+            $('.sf1').slideUp();
+            $('.sf4').slideUp();
+        })
 
-    window.addEventListener("resize", function () {
-      if (timer) {
-        clearTimeout(timer);
-        timer = null;
-      }
-      timer = setTimeout(() => {
-        move3(".test62 .test-box");
 
-        myChart.resize();
-      }, 500);
-    });
-  }
 
-  function setCharts(echartDom, testDom) {
-    var myChart = echarts.init(echartDom);
-    // 地图背景颜色
-    var highlight = "#03b7c9";
+        window.addEventListener("resize", function() {
+            if (timer) {
+                clearTimeout(timer);
+                timer = null;
+            }
+            timer = setTimeout(() => {
+                move3(".test62 .test-box");
 
-    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"],
-        ],
-      },
-    ];
+                myChart.resize();
+            }, 500);
+        });
+    }
 
-    option = {
-      series: (function () {
-        var result = [];
+    function setCharts(echartDom, testDom) {
+        var myChart = echarts.init(echartDom);
+        // 地图背景颜色
+        var highlight = "#03b7c9";
 
-        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,
-              },
+        var demoData = [{
+                name: "平均温度",
+                value: 22,
+                unit: "°",
+                pos: ["25%", "40%"],
+                range: [-40, 100],
+                YS: [
+                    [0.4, "#119eff"],
+                    [0.5, "#30da74"],
+                    [1, "#f3390d"],
+                ],
             },
             {
-              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: "平均温度",
+                value: 90,
+                unit: "°",
+                pos: ["75%", "40%"],
+                range: [0, 100],
+                splitNum: 10,
+                YS: [
+                    [0.3, "#f3390d"],
+                    [0.8, "#30da74"],
+                    [1, "#119eff"],
+                ],
             },
-            // 内侧指针、数值显示
-            {
-              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);
-    }
+        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",
+                                    },
+                                },
+                            },
+
+                            data: [{
+                                value: item.value,
+                            }, ],
+                        }
+                    );
+                });
+                return result;
+            })(),
+        };
+        if (option) {
+            myChart.setOption(option);
+        }
 
-    if (!testDom) {
-      testDom = document.querySelectorAll(".test62 .box");
+        if (!testDom) {
+            testDom = document.querySelectorAll(".test62 .box");
+        }
+        obsDom(testDom, myChart);
     }
-    obsDom(testDom, myChart);
-  }
-  return test62;
-})();
+    return test62;
+})();

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

@@ -27,7 +27,7 @@ const test7 = (function () {
       setCharts(dom, testDoms[i]);
     }
 
-    let myChart = echarts.init(dists[0]);
+    // let myChart = echarts.init(dists[0]);
 
     window.addEventListener("resize", function () {
       if (timer) {

+ 223 - 232
spring-cloud/server-page/src/main/resources/static/testEcharts/test/css/coom.css

@@ -1,435 +1,426 @@
 html {
-  user-select: none;
+    user-select: none;
 }
 
 .heaTit {
-  line-height: 1rem;
-}
-@font-face {
-  font-family: "SIMLI";
-  src: url("../font/SIMLI.TTF");
+    line-height: 1rem;
 }
+
 .heaTit h1 {
-  color: #8caaf5;
-  /* text-shadow: 1px 1px #ffffff, -1px -1px #2205f5; */
-  font-size: 0.75rem;
-  letter-spacing: 0.1rem;
-  background-image: -webkit-linear-gradient(
-    top,
-    rgb(246, 245, 247),
-    rgb(68, 169, 236)
-  );
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  font-family: "SIMLI";
+    color: #8caaf5;
+    text-shadow: 1px 1px #ffffff, -1px -1px #2205f5;
+    font-size: 0.45rem;
+    letter-spacing: 0.1rem;
 }
 
 .box {
-  position: absolute;
-  width: 12rem;
-  height: 3rem;
-  left: 0;
-  top: 0;
-  box-sizing: border-box;
-  resize: both;
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-  max-width: 100%;
-  max-height: 100%;
+    position: absolute;
+    width: 12rem;
+    height: 3rem;
+    left: 0;
+    top: 0;
+    box-sizing: border-box;
+    resize: both;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    max-height: 100%;
 }
 
 .test-box {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  padding-top: 0.6rem;
-  box-sizing: border-box;
-  overflow: auto;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding-top: 0.6rem;
+    box-sizing: border-box;
+    overflow: auto;
 }
 
 .test-box::-webkit-scrollbar {
-  /*滚动条整体样式*/
-  width: 5px;
-  /*高宽分别对应横竖滚动条的尺寸*/
-  height: 1px;
+    /*滚动条整体样式*/
+    width: 5px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 1px;
 }
 
 .test-box::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 0.02rem;
+    /*滚动条里面小方块*/
+    border-radius: 0.02rem;
 }
 
 .test-box::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  border-radius: 0.02rem;
-  background: #ededed00;
+    /*滚动条里面轨道*/
+    border-radius: 0.02rem;
+    background: #ededed00;
 }
 
 .theme .box .bgTitle {
-  height: 100%;
-  background: url(../images/stationGroup/cbiaoti.png) no-repeat;
-  padding-left: 12%;
-  background-position: -7px;
-  background-size: 99%;
-  margin-left: -0.06rem;
+    height: 100%;
+    background: url(../images/stationGroup/cbiaoti.png) no-repeat;
+    padding-left: 12%;
+    background-position: -7px;
+    background-size: 99%;
+    margin-left: -0.06rem;
 }
 
 .theme .box .bgTitle2 {
-  height: 100%;
-  background: url(../images/stationGroup/title.png) no-repeat;
-  padding-left: 12%;
-  background-position: -7px;
-  background-size: 58%;
-  margin-left: -0.06rem;
+    height: 100%;
+    background: url(../images/stationGroup/title.png) no-repeat;
+    padding-left: 12%;
+    background-position: -7px;
+    background-size: 58%;
+    margin-left: -0.06rem;
 }
 
 .content {
   color: #fff;
-  overflow: auto;
-  height: 100%;
-  box-sizing: border-box;
+    overflow: auto;
+    height: 100%;
+    box-sizing: border-box;
 }
 
 .content::-webkit-scrollbar {
-  /*滚动条整体样式*/
-  width: 0px;
-  /*高宽分别对应横竖滚动条的尺寸*/
-  height: 0px;
+    /*滚动条整体样式*/
+    width: 0px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 0px;
 }
 
 .content::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 0.2rem;
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  background: rgba(70, 116, 214, 0.452);
+    /*滚动条里面小方块*/
+    border-radius: 0.2rem;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: rgba(70, 116, 214, 0.452);
 }
 
 .content::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  border-radius: 10px;
-  background: #ededed;
+    /*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    background: #ededed;
 }
 
 .tool {
-  min-height: 0.6rem;
-  padding-right: 6px;
-  padding-left: 6px;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  height: 0.4rem;
+    min-height: 0.6rem;
+    padding-right: 6px;
+    padding-left: 6px;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    height: 0.4rem;
 }
 
 .toolBox {
-  display: flex;
-  font-size: 15px;
-  transition: all 0.2s;
-  position: absolute;
-  bottom: 0rem;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 99;
+    display: flex;
+    font-size: 15px;
+    transition: all 0.2s;
+    position: absolute;
+    bottom: 0rem;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 99;
 }
 
 .toolBox:hover {
-  opacity: 1;
+    opacity: 1;
 }
 
 .toolBox span {
-  margin: 5px;
-  color: aquamarine;
-  /* font-size: 60px;  */
-  font-size: 0.4rem;
-  border-radius: 50%;
+    margin: 5px;
+    color: aquamarine;
+    /* font-size: 60px;  */
+    font-size: 0.4rem;
+    border-radius: 50%;
 }
 
 .content {
-  flex: 5;
+    flex: 5;
 }
 
+
 /* 弹框 */
 
 .toolTitle {
-  height: 0.6rem;
-  text-align: center;
-  font-size: 0.4rem;
+    height: 0.6rem;
+    text-align: center;
+    font-size: 0.4rem;
 }
 
 .containerTool {
-  color: #fff;
-  position: absolute;
-  text-align: center;
-  padding: 0.2rem;
-  /* width: 300px; */
-  display: none;
-  z-index: 110;
-  left: 50%;
-  top: 50%;
-  background-color: rgba(22, 123, 210, 0.8);
+    color: #fff;
+    position: absolute;
+    text-align: center;
+    padding: 0.2rem;
+    /* width: 300px; */
+    display: none;
+    z-index: 110;
+    left: 50%;
+    top: 50%;
+    background-color: rgba(22, 123, 210, 0.8);
 }
 
 .containerTool ul {
-  margin: 15px 0;
+    margin: 15px 0;
 }
 
 .containerTool ul li {
-  margin: 7px 0;
+    margin: 7px 0;
 }
 
 .containerTool ul li input {
-  border-radius: 10px;
-  color: #fff;
-  background-color: transparent;
+    border-radius: 10px;
+    color: #fff;
+    background-color: transparent;
 }
 
 .toolBtn {
-  background: transparent;
-  opacity: 0.8;
-  padding: 4px;
-  border-radius: 10px;
-  cursor: pointer;
-  color: #fff;
-  /* text-shadow: 1px 1px rgb(108 247 27), -1px -1px #f0f;
+    background: transparent;
+    opacity: 0.8;
+    padding: 4px;
+    border-radius: 10px;
+    cursor: pointer;
+    color: #fff;
+    /* text-shadow: 1px 1px rgb(108 247 27), -1px -1px #f0f;
     box-shadow: 3px 0px 10px #fff, -3px 0px 10px rgb(255 106 106), 0px 3px 10px rgb(117 235 88), 0px -3px 10px rgb(87 84 221); */
 }
 
 .toolBtn i {
-  font-size: 0.56rem;
+    font-size: 0.56rem;
 }
 
 .toolBtn:hover {
-  opacity: 1;
+    opacity: 1;
 }
 
 .header .title {
-  font-size: 0.6rem;
-  text-align: center;
-  box-sizing: border-box;
+    font-size: 0.6rem;
+    text-align: center;
+    box-sizing: border-box;
 }
 
+
 /* 弹框 */
 
 .holdToos,
 .addThemeToos,
 .holdToosLose,
 .cancelToos {
-  font-size: 0.6rem;
-  color: #e3e3e3;
-  position: absolute;
-  top: 18%;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: rgba(105, 36, 250, 0.5);
-  padding: 0.1rem;
-  box-sizing: border-box;
-  border-radius: 5px;
-  font-weight: bold;
-  transition: all 0.5s;
-  display: none;
-  z-index: 99999;
+    font-size: 0.6rem;
+    color: #e3e3e3;
+    position: absolute;
+    top: 18%;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(105, 36, 250, 0.5);
+    padding: 0.1rem;
+    box-sizing: border-box;
+    border-radius: 5px;
+    font-weight: bold;
+    transition: all 0.5s;
+    display: none;
+    z-index: 99999;
 }
 
 .holdToos .succ {
-  color: #0f0;
+    color: #0f0;
 }
 
 .holdToos .lose {
-  color: #f00;
-  display: none;
+    color: #f00;
+    display: none;
 }
 
 .holdToos.loseActive .succ {
-  display: none;
+    display: none;
 }
 
 .cancelToos {
-  height: auto;
-  display: flex;
-  flex-direction: column;
-  display: none;
-  /* opacity: 0; */
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    display: none;
+    /* opacity: 0; */
 }
 
 .cancelToos p {
-  font-size: 20px;
-  margin: 0.16rem;
-  color: red;
-  letter-spacing: 0.16rem;
+    font-size: 20px;
+    margin: 0.16rem;
+    color: red;
+    letter-spacing: 0.16rem;
 }
 
 .cancelToos .btns {
-  display: flex;
+    display: flex;
 }
 
 .cancelToos .btns button {
-  margin-right: 0.68rem;
-  margin-left: 2px;
-  padding: 0 8px;
-  cursor: pointer;
+    margin-right: 0.68rem;
+    margin-left: 2px;
+    padding: 0 8px;
+    cursor: pointer;
 }
 
 .cancelToos .btns button.succBtn {
-  background-color: #0f0;
+    background-color: #0f0;
 }
 
 .cancelToos .btns button.loseBtn {
-  margin-right: 0;
-  background-color: rgba(238, 83, 83, 0.938);
+    margin-right: 0;
+    background-color: rgba(238, 83, 83, 0.938);
 }
 
 .box {
-  background: url(../images/line.png) rgba(255, 255, 255, 0.03);
+    background: url(../images/line.png) rgba(255, 255, 255, 0.03);
 }
 
 .box::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 0.5rem;
-  height: 0.5rem;
-  content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    content: "";
 }
 
 .box::before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0.5rem;
-  height: 0.5rem;
-  content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    content: "";
 }
 
 .panel-footer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
 }
 
 .panel-footer::before {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 0.5rem;
-  height: 0.5rem;
-  content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    content: "";
 }
 
 .panel-footer::after {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 0.5rem;
-  height: 0.5rem;
-  content: "";
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    content: "";
 }
 
 .title {
-  display: flex;
-  align-items: center;
+    display: flex;
+    align-items: center;
 }
 
 .title img {
-  width: 0.6rem;
-  height: 0.6rem;
-  margin-right: 0.2rem;
-  border-radius: 50%;
+    width: 0.6rem;
+    height: 0.6rem;
+    margin-right: 0.2rem;
+    border-radius: 50%;
 }
 
 .noData {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  color: #fff;
-  font-size: 20px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    font-size: 20px;
 }
 
 .setNav {
-  height: 80%;
-  overflow: auto;
+    height: 80%;
+    overflow: auto;
 }
 
 .setNav::-webkit-scrollbar {
-  /*滚动条整体样式*/
-  width: 0px;
-  /*高宽分别对应横竖滚动条的尺寸*/
-  height: 0px;
+    /*滚动条整体样式*/
+    width: 0px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 0px;
 }
 
 .setNav::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 0.2rem;
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  background: rgba(70, 116, 214, 0.452);
+    /*滚动条里面小方块*/
+    border-radius: 0.2rem;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: rgba(70, 116, 214, 0.452);
 }
 
 .setNav::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  border-radius: 10px;
-  background: #ededed;
+    /*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    background: #ededed;
 }
 
 #stuTable td,
 #stuTable th {
-  white-space: nowrap;
-  font-size: 0.14rem !important;
+  white-space:nowrap;
+    font-size: 0.14rem !important;
 }
 
 #stuTable tr {
-  height: 0.3rem;
+    height: 0.3rem;
 }
 
 h3 {
-  font-size: 0.18rem;
+    font-size: 0.18rem;
 }
 
 p {
-  font-size: 0.15rem;
+    font-size: 0.15rem;
 }
 
 .proDesc {
-  top: -0.25rem !important;
+    top: -0.25rem !important;
 }
 
 .toop {
-  width: 9rem;
+    width: 9rem;
 }
 
 .right img,
 .left img {
-  width: 45%;
+    width: 45%;
 }
 
 .right span,
 .left span {
-  font-size: 0.35rem;
-  margin: 0 0.1rem;
+    font-size: 0.35rem;
+    margin: 0 0.1rem;
 }
 
 .left span,
 .one span,
 .tow span {
-  font-size: 0.5rem;
+    font-size: 0.5rem;
 }
 
 .test31 li {
-  font-size: 0.2rem;
+    font-size: 0.2rem;
 }
 
 .test38 .content .desc {
-  margin-left: 35%;
+    margin-left: 35%;
 }
 
 span {
-  font-size: 0.25rem;
+    font-size: 0.25rem;
 }
 
 .title h2 {
-  top: -0.04rem !important;
+    top: -0.04rem !important;
 }
 
 p,
@@ -439,9 +430,9 @@ h2,
 h3,
 td,
 th {
-  font-size: 0.18rem !important;
+    font-size: 0.18rem !important;
 }
 
 .progress span span {
-  opacity: 0;
-}
+    opacity: 0;
+}

BIN
spring-cloud/server-page/src/main/resources/static/testEcharts/test/images/networkSecurity/bjaq.png


BIN
spring-cloud/server-page/src/main/resources/static/testEcharts/test/images/networkSecurity/zdwx.png


BIN
spring-cloud/server-page/src/main/resources/static/testEcharts/test/images/networkSecurity/zu.png


BIN
spring-cloud/server-page/src/main/resources/static/testEcharts/test/images/networkSecurity/zu15.png


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

@@ -475,7 +475,7 @@
             let data = res.result.map(item => {
                 return `
                <li>
-                        <img src="../images/networkSecurity/tu10.png" alt="">
+                        <img src="../images/networkSecurity/4.png" alt="">
                         <span>${item.system_name}</span>
                     </li>
                `

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

@@ -156,14 +156,14 @@
                             <ul>
                                 <li>
                                     <div class="desc">
-                                        <img src="../images/networkSecurity/tu10.png" alt="">
+                                        <img src="../images/networkSecurity/bjaq.png" alt="">
                                         <span>比较安全</span>
                                         <span class="text1">626</span>
                                     </div>
                                 </li>
                                 <li>
                                     <div class="desc">
-                                        <img src="../images/networkSecurity/tu10.png" alt="">
+                                        <img src="../images/networkSecurity/zdwx.png" alt="">
                                         <span>中度危险</span>
                                         <span class="text2">626</span>
                                     </div>
@@ -434,8 +434,9 @@
             if (!result) {
                 return
             }
-            let resArr = result.map((item, index) => {
-                return `
+           let html = ''
+            result.forEach((item, index) => {
+                html+= `
                     <tr>
                         <td>${index + 1}</td>
                         <td>未处理</td>
@@ -446,7 +447,15 @@
                     </tr>
                     `
             })
-            $('.springFrame4 .box30 tbody').append(resArr.join(''));
+            $('.springFrame .box30 tbody').html(html)
+            console.log($('.springFrame4 .box30 tbody tr').eq(0).find('td').eq(0));
+            $('.springFrame4 .box30 tbody tr').eq(0).find('td').eq(0).css({
+              'background':'url(../imgages/networkSecurity/1.png) no-repeat;'
+            })
+            //     "background": `url("${basicUrl}${result.background_path}") 0% 0% / cover`
+
+            $('.springFrame4 .box30 tbody td').eq(1).find('td').eq(0).css('background','url("../imgages/networkSecurity/2.png") no-repeat;')
+            $('.springFrame4 .box30 tbody td').eq(2).find('td').eq(0).css('background','url("../imgages/networkSecurity/3.png) no-repeat;"')
         },
         error: function(err) {
             console.log("受攻击最严重业务统计-超时111111");