版本更新:

1. 针对提出问题修改
2. 优化UI样式

src/App.vue

@@ -311,10 +311,13 @@ body {
     opacity: 0;
     transition: opacity 0.2s;
     transition-timing-function: ease-in;
+    transform: translate(-@menuWidth);
+
     &:hover {
       opacity: 1;
       transition: opacity 0.2s;
       transition-timing-function: ease-out;
+      transform: translate(0);
     }
   }
   .main-body {

src/assets/dataService/arcgis-nx-fc1.json

@@ -11,7 +11,7 @@
         "attributes": {
             "objectid": 1,
             "fc_code": "fc01",
-            "code": "syz",
+            "code": "升压站",
             "type": "升压站"
         },
         "popupTemplate": null

src/assets/icon/svg/health/h-day.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 222.7 200" style="enable-background:new 0 0 222.7 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M200,15.4h-30.8v15.4H200v23.1H15.4V30.8h30.8V15.4H15.4C6.9,15.4,0,22.3,0,30.8v153.9
+		c0,8.5,6.9,15.4,15.4,15.4H200c8.5,0,15.4-6.9,15.4-15.4V30.8C215.4,22.3,208.5,15.4,200,15.4z M200,184.6H15.4V69.2H200V184.6z"/>
+	<rect x="76.9" y="15.4" class="st0" width="61.5" height="15.4"/>
+	<path class="st0" d="M153.8,46.1c4.2,0,7.7-3.4,7.7-7.7V7.7c0-4.2-3.4-7.7-7.7-7.7s-7.7,3.4-7.7,7.7v30.8
+		C146.2,42.7,149.6,46.1,153.8,46.1z"/>
+	<path class="st0" d="M61.5,46.1c4.2,0,7.7-3.4,7.7-7.7V7.7c0-4.2-3.4-7.7-7.7-7.7s-7.7,3.4-7.7,7.7v30.8
+		C53.8,42.7,57.3,46.1,61.5,46.1z"/>
+	<path class="st0" d="M130.5,149.5h-13.6V88.6h-10.7c-4.6,2.8-9.6,4.7-16.9,6.1v8.9h13.1v45.9H86.9v11.7h43.6V149.5z"/>
+</g>
+</svg>

src/assets/icon/svg/health/帮助说明.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M75,0C33.6,0,0,33.6,0,75s33.6,75,75,75c41.4,0,75-33.6,75-75S116.4,0,75,0z M80.9,113.9
+	c-3.3,3.3-8.5,3.3-11.8,0c-3.3-3.3-3.3-8.5,0-11.8c3.3-3.3,8.5-3.3,11.8,0C84.1,105.4,84.1,110.7,80.9,113.9z M81.2,82.5v7.1
+	c0,3.5-2.8,6.2-6.2,6.2s-6.2-2.8-6.2-6.2V77.1c0-3.5,2.8-6.2,6.2-6.2c6.4,0,11.5-5.1,11.5-11.5c0-6.4-5.1-11.5-11.5-11.5
+	S63.5,53,63.5,59.3c0,3.5-2.8,6.2-6.2,6.2S51,62.8,51,59.3c0-13.3,10.7-24,24-24c13.3,0,24,10.7,24,24C99,70.2,91.7,79.7,81.2,82.5z
+	"/>
+</svg>

src/assets/icon/svg/health/方向箭头-向上 2.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<polygon class="st0" points="191.3,103.2 147.7,70.5 147.7,97.7 19.7,97.7 19.7,64.1 8.7,64.1 8.7,97.7 8.7,97.7 8.7,108.7 
+	147.7,108.7 147.7,135.9 "/>
+</svg>

src/assets/icon/svg/health/链路.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M154.5,56.5c15.6,0,28.2-13.2,27.2-29C180.9,13.9,169.9,2.9,156.3,2c-15.9-1-29,11.6-29,27.2
+	c0,2.9,0.4,5.6,1.3,8.2L52.8,79.5c-1.9-2.4-4.1-4.4-6.5-6.2l15.4-36.1c4.3-0.6,8.4-2.7,11.5-6.3c5.9-6.8,6-17.1,0.3-24
+	C69.7,2.3,64.3,0,58.9,0c-4.8,0-9.6,1.8-13.3,5.5c-7.3,7.3-7.3,19.2,0,26.5c1.9,1.9,4.2,3.4,6.7,4.3L37.8,69.4
+	c-2.7-0.8-5.5-1.2-8.3-1.2C12.6,68.2-1,82.4,0.1,99.6C1,114.8,13.8,127,29,127.3c11.3,0.2,21.1-5.9,26.3-15l45.3,24.7
+	c-0.9,3.2-1.3,6.4-1.3,9.7c0,21.1,17.9,38.1,39.3,36.6c18.1-1.2,32.8-15.9,34-34c1.5-21.5-15.5-39.3-36.6-39.3
+	c-13.7,0-25.6,7.5-31.9,18.6l-45.6-24.8c0.4-2,0.6-3.9,0.6-5.9c0-3.6-0.7-7.1-1.8-10.3l75.4-41.9C137.7,52.2,145.6,56.5,154.5,56.5z
+	 M60.3,37.4L60.3,37.4l-0.2,0C60.2,37.5,60.3,37.4,60.3,37.4z"/>
+</svg>

src/assets/icon/svg/health/风向.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M100,0C44.6,0,0,44.6,0,100s44.6,100,100,100s100-44.6,100-100S155.4,0,100,0z M100,187.7
+		c-48.5,0-88.5-39.2-88.5-88.5c0-48.5,39.2-88.5,88.5-88.5c49.2,0,88.5,40,88.5,88.5S149.2,187.7,100,187.7z"/>
+	<path class="st0" d="M106,47.4c-1-2.5-3.4-4.1-6.1-4.1c-2.7,0.1-5.1,1.7-6.2,4.1L56.4,135c-0.9,2.1-0.7,4.5,0.5,6.4
+		c1.7,2.9,5.5,4,8.6,2.3l34.6-18.3l34.2,17.8c0.9,0.5,1.9,0.7,3,0.7c1.2,0,2.4-0.4,3.4-1c2.9-1.8,4.1-5.5,2.7-8.7L106,47.4z"/>
+</g>
+</svg>

src/assets/icon/svg/menu/gf-matrix.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+	<path class="st0" d="M112.2,58.3c17.1,0,41.4,0,41.4,0L163,65l6.3,14.3c0,0-4.6,5.9-6.9,8.8c-19.5,0-29.1,0-48.6,0c-3-3-9-8.8-9-8.8
+	l-0.2-13.9C104.6,65.4,109.7,60.6,112.2,58.3L112.2,58.3z M35.6,58.3c0,0,23.9,0,40.9,0c2.6,2.3,7.7,7.1,7.7,7.1L84,79.2
+	c0,0-6,5.9-9,8.8c-19.4,0-28.7,0-48.1,0c-2.4-3-7-8.8-7-8.8L26.4,65C26.4,65,32.5,60.6,35.6,58.3L35.6,58.3z M110.9,19.4
+	c15.1,0,35.3,0,35.3,0l8,5.5c0,0,3.2,9.2,4.9,17.3c-2.1,2.2-4.1,4.3-6.3,6.6c-16.8,0-23.9,0-40.7,0c-2.6-2.2-7.7-6.6-7.7-6.6
+	l-0.2-17.3C104.2,24.9,108.7,21.2,110.9,19.4L110.9,19.4z M43.1,19.4c0,0,19.8,0,34.8,0c2.2,1.8,6.8,5.5,6.8,5.5l-0.2,17.3
+	c0,0-5.1,4.3-7.7,6.6c-16.8,0-23.4,0-40.3,0c-2.1-2.2-4.2-4.5-6.2-6.6c1.7-8.1,4.9-14.6,4.9-14.6S40.4,21.2,43.1,19.4L43.1,19.4z
+	 M45,0.3c33,0,68,0,101.1,0c12,0,23.7,17,26.3,27c5.4,21.1,10.7,29.5,16,50.6c4,15.9-6.1,28.9-22.8,28.9c-46,0-95.9,0-142.1,0
+	c-16.7,0-26.7-13.1-22.7-28.9c5.4-21.1,10.7-29.5,16-50.6C19.5,17.2,31.2,0,43.2,0L45,0.3z M145.1,9.8c-33.6,0-67.2,0-100.8,0
+	C35.3,9.8,26.7,21.6,25,29c-4.9,21.1-9.9,27.7-14.8,48.8C7.6,89.2,15.1,97.2,27,97.2c45.2,0,90.2,0,135.3,0c11.9,0,19.3-8,16.7-19.3
+	c-4.9-21.1-9.9-27.7-14.7-48.8C162.5,21.6,153.9,9.8,145.1,9.8L145.1,9.8z M84.6,116.2h19.9v7.1l30.1,5.6v7.5c-24.9,0-55.6,0-80.6,0
+	v-7.5l30.6-5.6V116.2z" />
+</svg>

src/assets/icon/svg/menu/mx-matrix.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+	<g>
+		<rect class="st0" width="50" height="50" />
+		<rect x="67.3" class="st0" width="50" height="50" />
+		<rect x="134.6" class="st0" width="50" height="50" />
+		<rect y="66.8" class="st0" width="50" height="50" />
+		<rect y="133.6" class="st0" width="50" height="50" />
+		<circle class="st0" cx="119.4" cy="118.3" r="28.9" />
+		<path class="st0" d="M66.7,182.7H184V65.9H66.7V182.7z M170.9,160.9c2.5,2.5,2.5,6.5,0,9s-6.5,2.5-9,0L153,161
+		c-2.5-2.5-2.5-6.5,0-9s6.5-2.5,9,0L170.9,160.9z M90.1,89c16.2-16.2,42.5-16.2,58.7,0s16.2,42.5,0,58.7s-42.5,16.2-58.7,0
+		S73.9,105.2,90.1,89z" />
+	</g>
+</svg>

src/assets/icon/svg/menu/qf-matrix.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+	<g>
+		<rect class="st0" width="50" height="50" />
+		<rect x="67.3" class="st0" width="50" height="50" />
+		<rect y="66.8" class="st0" width="50" height="50" />
+		<rect x="67.3" y="66.8" class="st0" width="50" height="50" />
+		<rect x="134.6" y="133.6" class="st0" width="50" height="50" />
+		<path class="st0" d="M134.6,0v116.8h50V0H134.6z M178.6,110.8h-38V6h38V110.8z" />
+		<path class="st0" d="M0,183.6h116.8v-50H0V183.6z M6,139.6h104.8v38H6V139.6z" />
+	</g>
+</svg>

src/assets/icon/svg/menu/state-watch.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+	<path class="st0" d="M123.3,5.1C74.7-11.6,21.8,14.2,5.1,62.8C1.7,72.7-0.1,83.1,0,93.6c0,11.3,1.2,22.5,3.9,33.5
+	c0.1,2,1.7,3.6,3.7,3.7h170.5c2.1-0.4,3.9-1.8,4.7-3.7c2.2-11.1,3.5-22.3,3.9-33.5C187,53.5,161.4,17.7,123.3,5.1L123.3,5.1z
+	 M93.3,19.1c4.9-0.3,9,3.4,9.3,8.3c0,0.3,0,0.7,0,1c0.3,4.9-3.4,9-8.3,9.3c-0.4,0-0.7,0-1.1,0c-4.9,0.3-9-3.4-9.3-8.2
+	c0-0.4,0-0.7,0-1.1c-0.3-4.9,3.4-9,8.3-9.3C92.6,19,93,19,93.3,19.1z M28.1,102.9c-5.1,0.3-9.6-3.6-9.9-8.8
+	c-0.3-5.1,3.6-9.6,8.8-9.9c0.4,0,0.7,0,1.1,0c5.1-0.3,9.6,3.6,9.9,8.8c0.3,5.1-3.6,9.6-8.8,9.9C28.8,102.9,28.5,102.9,28.1,102.9z
+	 M54.2,54.5c-3.5,3.6-9.2,3.7-12.8,0.2c-0.1-0.1-0.2-0.2-0.2-0.2c-3.5-3.9-3.9-9.7-0.9-14c3.4-3.6,9.2-3.7,12.8-0.3
+	c0.1,0.1,0.2,0.2,0.3,0.3C56.8,44.4,57.2,50.2,54.2,54.5z M93.3,112.3c-10.3,0-18.6-9.3-15.7-18.6c2.9-9.3,15.7-43.1,15.7-43.1
+	s13,33.9,15.7,43.3C111.7,103.1,103.6,112.3,93.3,112.3L93.3,112.3z M146.5,54.5c-3.7,3.7-9.7,3.6-13.2-0.2c-3.3-3.5-3.3-9.2,0-12.7
+	c3.6-3.8,9.6-3.9,13.2-0.2C149.3,45.3,149.3,50.6,146.5,54.5z M158.6,102.9c-5.2,0-9.5-4.3-9.3-9.6c0.1-4.9,4.2-8.9,9.1-9.1
+	c5.3-0.1,9.6,4.1,9.6,9.3l0,0.3c0,2.7-1.1,5.4-3.3,7.1C162.9,102.4,160.7,103.1,158.6,102.9z M156.4,158.6l-125.8,0
+	c-3.4,0-6.5-2.4-6.9-5.8c-0.5-4.1,2.7-7.5,6.6-7.5l0,0h125.8c3.4,0,6.5,2.4,6.9,5.8C163.5,155.1,160.3,158.6,156.4,158.6
+	L156.4,158.6z" />
+</svg>

src/assets/icon/svg/menu/矩阵-01.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<rect class="st0" width="50" height="50"/>
+	<rect x="67.3" class="st0" width="50" height="50"/>
+	<rect x="134.6" class="st0" width="50" height="50"/>
+	<rect y="66.8" class="st0" width="50" height="50"/>
+	<rect x="134.6" y="66.8" class="st0" width="50" height="50"/>
+	<rect x="67.3" y="66.8" class="st0" width="50" height="50"/>
+	<rect y="133.6" class="st0" width="50" height="50"/>
+	<rect x="67.3" y="133.6" class="st0" width="50" height="50"/>
+	<rect x="134.6" y="133.6" class="st0" width="50" height="50"/>
+</g>
+</svg>

src/assets/styles/dialog.less

@@ -0,0 +1,23 @@
+.modal {
+  &.el-dialog {
+    background: fade(#121d1c, 95);
+    border: 1px solid fade(@green, 50);
+    box-shadow: 0px 8px 17px 1px rgba(5, 187, 76, 0.3);
+
+    .el-dialog__header {
+      padding: 10px 0;
+      border-bottom: 1px solid #323b3c;
+      margin: 0 24px;
+      .el-dialog__title {
+        font-size: 16px;
+        color: fade(@white, 75);
+      }
+    }
+
+    &.el-dialog--center .el-dialog__body,
+    .el-dialog__body {
+      padding: 16px 24px;
+    }
+  }
+
+}

src/assets/styles/form.less

@@ -25,12 +25,13 @@
           box-sizing: border-box;
           flex: 0 0 200px;
           border: 0px solid @darkgray;
-          padding: 0.741vh;
-          color: @gray;
+          color: @white;
           outline: unset;
           border-radius: 0%;
           padding-right: 40px;
           background: fade(#536268, 20);
+          height: 33px;
+          line-height: 33px;
 
           &::placeholder {
             font-size: 12px;
@@ -93,3 +94,188 @@ input[type="checkbox"] {
     transition: opacity 0.3s ease-out;
   }
 }
+.search-input {
+  .el-input {
+    line-height: 33px;
+    height: 33px;
+
+    &.el-input--prefix .el-input__inner {
+      padding-left: 16px;
+    }
+
+    .el-input__icon {
+      height: 33px;
+      line-height: 33px;
+    }
+  }
+  .el-select {
+    line-height: 33px;
+
+    .el-input {
+      .el-input__suffix {
+        padding: 0 8px;
+        background: transparent;
+        right: 0;
+      }
+      .el-input__icon {
+        line-height: 33px;
+        height: 33px;
+      }
+      .el-input__inner {
+        background: fade(#536268, 20);
+        border-color: fade(#536268, 20);
+        height: 33px;
+        line-height: 33px;
+        padding-left: 16px;
+
+        &::placeholder {
+          text-align: right;
+          padding-right: 8px;
+          color: @gray;
+        }
+      }
+    }
+
+    .el-select__tags .el-tag {
+      background-color: fade(@green, 50);
+      color: @white;
+
+      .el-icon-close {
+        background-color: fade(@green, 50);
+      }
+    }
+  }
+
+  .el-input__prefix {
+    left: unset;
+    right: 5px;
+  }
+
+  .el-input__suffix {
+    right: 30px;
+  }
+}
+
+.select {
+  &.el-select__popper.el-popper[role="tooltip"] {
+    background: fade(#121d1c, 95);
+    border: 1px solid fade(#121d1c, 95);
+  }
+
+  .el-select-dropdown {
+    &.is-multiple .el-select-dropdown__item.selected {
+      background-color: fade(@green, 100);
+      color: #fff;
+      font-weight: 400;
+    }
+
+    .el-select-dropdown__item {
+      color: @font-color;
+
+      &:hover {
+        background-color: fade(@green, 100);
+        color: #fff;
+      }
+
+      &.selected {
+        background-color: fade(@green, 100);
+        color: #fff;
+      }
+    }
+  }
+
+  &.el-popper.is-light .el-popper__arrow::before {
+    background: fade(#121d1c, 95);
+    border: 1px solid fade(#121d1c, 95) !important;
+  }
+}
+
+.date-select {
+  &.el-picker__popper.el-popper[role="tooltip"] {
+    background: fade(#121d1c, 95);
+    border: 1px solid fade(#121d1c, 95);
+
+    .el-picker-panel {
+      background: transparent;
+      color: @white;
+      .el-date-table {
+        th {
+          color: @white;
+        }
+
+        td {
+          &.next-month,
+          &.prev-month {
+            color: @gray;
+          }
+
+          &.available:hover {
+            color: @green;
+          }
+
+          &.today span {
+            color: @green;
+          }
+
+          &.current:not(.disabled) span {
+            color: @white;
+            background: @green;
+          }
+        }
+      }
+
+      .el-year-table td.today .cell {
+        color: @white;
+      }
+    }
+  }
+
+  .el-select-dropdown {
+    &.is-multiple .el-select-dropdown__item.selected {
+      background-color: fade(@green, 100);
+      color: #fff;
+      font-weight: 400;
+    }
+
+    .el-select-dropdown__item {
+      color: @font-color;
+
+      &:hover {
+        background-color: fade(@green, 100);
+        color: #fff;
+      }
+
+      &.selected {
+        background-color: fade(@green, 100);
+        color: #fff;
+      }
+    }
+  }
+
+  &.el-popper.is-light .el-popper__arrow::before {
+    background: fade(#121d1c, 95);
+    border: 1px solid fade(#121d1c, 95) !important;
+  }
+
+  .el-picker-panel__icon-btn:hover {
+    color: @green;
+  }
+
+  .el-date-picker__header-label.active,
+  .el-date-picker__header-label:hover {
+    color: @green;
+  }
+
+  .el-year-table td .cell:hover,
+  .el-year-table td.current:not(.disabled) .cell {
+    color: @green;
+  }
+
+  .el-month-table td .cell:hover {
+    color: @green;
+  }
+
+  .el-month-table td.current:not(.disabled) .cell {
+    color: @green;
+  }
+}

src/assets/styles/main.less

@@ -11,3 +11,5 @@
 @import "./form.less";
 
 @import "./button.less";
+
+@import "./dialog.less";

src/components/chart/bar/horizontal-bar-chart.vue

@@ -66,6 +66,8 @@ export default {
   },
   methods: {
     initChart() {
+      const chart = echarts.init(this.$el);
+
       let option = {
         color: this.color,
         grid: {
@@ -125,6 +127,7 @@ export default {
         },
         series: [],
       };
+
       for (var i = 0; i < this.data.legend.length; i++) {
         option.series.push({
           name: this.data.legend[i],
@@ -139,7 +142,7 @@ export default {
         });
       }
 
-      this.chart.setOption(option);
+      chart.setOption(option);
     },
   },
   created() {
@@ -149,12 +152,13 @@ export default {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
-      this.chart = echarts.init(this.$el);
       this.initChart();
     });
   },
   updated() {
-    this.initChart();
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
 };
 </script>

src/components/chart/bar/thermometer.vue

@@ -0,0 +1,320 @@
+<template>
+    <div class="thermometer"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    // 名称
+    name: "thermometer",
+    // 使用组件
+    components: {},
+    // 传入参数
+    props: {
+        width: {
+            type: String,
+            default: "9.259vh",
+        },
+        height: {
+            type: String,
+            default: "11.111vh",
+        },
+        min: {
+            type: Number,
+            default: -20,
+        },
+        max: {
+            type: Number,
+            default: 100,
+        },
+        value: {
+            type: Number,
+            default: 36.6,
+        },
+        title: {
+            type: String,
+            default: "温度",
+        },
+    },
+    // 自定义事件
+    emits: {},
+    // 数据
+    data() {
+        return {
+            option: {}
+        };
+    },
+    // 函数
+    methods: {
+        initChart: function () {
+            const chart = echarts.init(this.$el);
+            let kd = []; // 刻度
+            for (var i = 0, len = 135; i <= len; i++) {
+                if (i < 30 || i > 130) {
+                    kd.push("");
+                } else {
+                    if ((i - 30) % 20 === 0) {
+                        kd.push("-3");
+                    } else if ((i - 30) % 4 === 0) {
+                        kd.push("-1");
+                    } else {
+                        kd.push("");
+                    }
+                }
+            }
+            let width = this.$el.offsetWidth;
+            this.option = {
+                backgroundColor: "transparent",
+                grid: {
+                    top: "0",
+                    left: "0",
+                    right: "0",
+                    bottom: "45%",
+                },
+                yAxis: [
+                    {
+                        axisLine: {
+                            show: false,
+                        },
+                        axisLabel: {
+                            show: false,
+                        },
+                        axisTick: {
+                            show: false,
+                        },
+                        splitLine: {
+                            show: false,
+                        },
+                    },
+                    {
+                        show: false,
+                        data: [],
+                        min: 0,
+                        max: 135,
+                        axisLine: {
+                            show: false,
+                        },
+                    },
+                ],
+                xAxis: [
+                    {
+                        axisTick: "none",
+                        axisLine: "none",
+                        offset: 0,
+                        data: [this.title],
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                color: "#606769",
+                                fontSize: "14",
+                            },
+                            lineHeight: 40,
+                        },
+                        splitLine: {
+                            show: false,
+                        },
+                    },
+                    {
+                        axisTick: "none",
+                        axisLabel: {
+                            show: false,
+                        },
+                        data: [0],
+                        splitLine: {
+                            show: false,
+                        },
+                        axisLine: {
+                            show: false,
+                        },
+                    },
+                    {
+                        name: "单位：件",
+                        nameGap: "50",
+                        data: [],
+                        splitLine: {
+                            show: false,
+                        },
+                        axisLine: {
+                            show: false,
+                            color: "#ffffff",
+                        },
+                    },
+                    {
+                        show: false,
+                        min: 0 - width * 0.35,
+                        max: width * 0.5,
+                    },
+                ],
+                series: [
+                    {
+                        name: "℃",
+                        type: "bar",
+                        yAxisIndex: 0,
+                        xAxisIndex: 0,
+                        label: {
+                            show: true,
+                            position: "top",
+                            formatter: "{back|" + "{c}" + "}",
+                            rich: {
+                                back: {
+                                    align: "right",
+                                    lineHeight: 14,
+                                    fontSize: 14,
+                                    fontFamily: "微软雅黑",
+                                    color: "#05bb4c",
+                                },
+                            },
+                            offset: [25, 15],
+                        },
+                        data: [this.value],
+                        barWidth: 5,
+                        itemStyle: {
+                            normal: {
+                                color: "#05bb4c",
+                            },
+                        },
+                        z: 2,
+                    },
+                    {
+                        name: "温度背景框",
+                        type: "bar",
+                        yAxisIndex: 0,
+                        xAxisIndex: 1,
+                        barGap: "-100%",
+                        data: [99],
+                        barWidth: 8,
+                        itemStyle: {
+                            normal: {
+                                color: "#040c0b",
+                                barBorderRadius: 5,
+                            },
+                        },
+                        z: 1,
+                    },
+                    {
+                        name: "外框",
+                        type: "bar",
+                        yAxisIndex: 0,
+                        xAxisIndex: 2,
+                        barGap: "-100%",
+                        data: [100],
+                        barWidth: width * 0.1,
+                        itemStyle: {
+                            normal: {
+                                color: "#606769",
+                                barBorderRadius: width * 0.5,
+                            },
+                        },
+                        z: 0,
+                    },
+                    {
+                        name: "外圆",
+                        type: "scatter",
+                        hoverAnimation: false,
+                        data: [0],
+                        yAxisIndex: 0,
+                        xAxisIndex: 2,
+                        symbolSize: width * 0.15,
+                        itemStyle: {
+                            normal: {
+                                color: "#05bb4c",
+                                opacity: 1,
+                            },
+                        },
+                        z: 2,
+                    },
+                    {
+                        name: "白圆",
+                        type: "scatter",
+                        hoverAnimation: false,
+                        data: [0],
+                        yAxisIndex: 0,
+                        xAxisIndex: 1,
+                        symbolSize: width * 0.2,
+                        itemStyle: {
+                            normal: {
+                                color: "#040c0b",
+                                opacity: 1,
+                            },
+                        },
+                        z: 1,
+                    },
+                    {
+                        name: "外圆",
+                        type: "scatter",
+                        hoverAnimation: false,
+                        data: [0],
+                        yAxisIndex: 0,
+                        xAxisIndex: 2,
+                        symbolSize: width * 0.23,
+                        itemStyle: {
+                            normal: {
+                                color: "#606769",
+                                opacity: 1,
+                            },
+                        },
+                        z: 0,
+                    },
+                    {
+                        name: "刻度",
+                        type: "bar",
+                        yAxisIndex: 1,
+                        xAxisIndex: 3,
+                        label: {
+                            normal: {
+                                show: false,
+                            },
+                        },
+                        barGap: "100%",
+                        data: kd,
+                        barWidth: 1,
+                        itemStyle: {
+                            normal: {
+                                color: "#606769",
+                                barBorderRadius: width * 1.2,
+                            },
+                        },
+                        z: 0,
+                    },
+                ],
+            };
+            chart.setOption(this.option);
+        },
+        setValue: function () {
+            this.option.series[0].data[0] = this.value;
+            const chart = echarts.getInstanceByDom(this.$el);
+            chart.setOption(this.option);
+        }
+    },
+    // 生命周期钩子
+    beforeCreate() {
+        // 创建前
+    },
+    created() {
+        // 创建后
+    },
+    beforeMount() {
+        // 渲染前
+    },
+    mounted() {
+        // 渲染后
+        this.$nextTick(() => {
+            this.$el.style.width = this.width;
+            this.$el.style.height = this.height;
+            this.initChart();
+        });
+    },
+    beforeUpdate() {
+        // 数据更新前
+    },
+    updated() {
+        // 数据更新后
+        this.setValue();
+    },
+};
+</script>
+
+<style lang="less">
+.thermometer {
+}
+</style>

src/components/chart/combination/bar-line-chart.vue

@@ -151,19 +151,21 @@ export default {
           data: this.bardata.data[i],
         });
       }
-      option.series.push({
-        name: "损失电量",
-        type: "line",
-        data: this.lineData,
-        smooth: false, //平滑展示
-        xAxisIndex: 1,
-        lineStyle: {
-          color: partten.getColor("green"),
-        },
-        itemStyle: {
-          color: partten.getColor("green"),
-        },
-      });
+
+      if (this.lineData.length > 0)
+        option.series.push({
+          name: "损失电量",
+          type: "line",
+          data: this.lineData,
+          smooth: false, //平滑展示
+          xAxisIndex: 1,
+          lineStyle: {
+            color: partten.getColor("green"),
+          },
+          itemStyle: {
+            color: partten.getColor("green"),
+          },
+        });
 
       this.chart.setOption(option);
     },

src/components/chart/combination/vertival-bar-line-chart.vue

@@ -141,19 +141,20 @@ export default {
         series: [],
       };
 
-      option.series.push({
-        name: this.units[0],
-        type: "line",
-        data: this.lineData,
-        smooth: false, //平滑展示
-        yAxisIndex: 0,
-        lineStyle: {
-          color: partten.getColor("green"),
-        },
-        itemStyle: {
-          color: partten.getColor("green"),
-        },
-      });
+      if (this.lineData.length > 0)
+        option.series.push({
+          name: this.units[0],
+          type: "line",
+          data: this.lineData,
+          smooth: false, //平滑展示
+          yAxisIndex: 0,
+          lineStyle: {
+            color: partten.getColor("green"),
+          },
+          itemStyle: {
+            color: partten.getColor("green"),
+          },
+        });
 
       for (var i = 0; i < this.bardata.legend.length; i++) {
         option.series.push({

src/components/chart/line/double-line-chart.vue

@@ -112,8 +112,12 @@ export default {
       type: String,
       default: "",
     },
+    showLegend: {
+      type: Boolean,
+      default: false,
+    },
   },
-  data () {
+  data() {
     return {
       id: "",
       chart: null,
@@ -121,20 +125,25 @@ export default {
     };
   },
   computed: {
-    colorValue () {
+    colorValue() {
       return partten.getColor(this.color);
     },
-    datas () {
+    datas() {
       return this.list.map((t) => {
         return t.value;
       });
     },
-    xdata () {
+    legend() {
+      return this.list.map((t) => {
+        return t.title;
+      });
+    },
+    xdata() {
       return this.list[0].value.map((t) => {
         return t.text;
       });
     },
-    series () {
+    series() {
       let result = [];
 
       this.list.forEach((value, index) => {
@@ -158,7 +167,7 @@ export default {
 
       return result;
     },
-    yAxis () {
+    yAxis() {
       let result = [];
       result.push({
         type: "value",
@@ -177,26 +186,30 @@ export default {
     },
   },
   methods: {
-    hexToRgba (hex, opacity) {
-      let rgbaColor = "";
-      let reg = /^#[\da-f]{6}$/i;
-      if (reg.test(hex)) {
-        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt("0x" + hex.slice(3, 5))},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
-      }
-      return rgbaColor;
-    },
-    initChart () {
+    resize() {},
+    initChart() {
+      const chart = echarts.init(this.$el);
+
       let option = {
         color: this.color,
         tooltip: {
-          trigger: "item",
-          backgroundColor: "rgba(255,255,255,0.3)",
+          trigger: "axis",
+          backgroundColor: partten.getColor("gray") + "55",
           textStyle: {
             color: "#fff",
             fontSize: util.vh(16),
           },
-          formatter: function (param) {
-            return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.legend,
+          right: 56,
+          icon: "circle",
+          itemWidth: 6,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
           },
         },
         grid: {
@@ -223,27 +236,36 @@ export default {
         series: this.series,
       };
 
-      this.chart.setOption(option);
+      chart.clear();
+      chart.setOption(option);
+
+      this.resize = function() {
+        chart.resize();
+      };
+
+      window.addEventListener("resize", this.resize);
     },
   },
-  created () {
+  created() {
     this.$nextTick(() => {
       this.id = "pie-chart-" + util.newGUID();
     });
   },
-  mounted () {
+  mounted() {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
-      this.chart = echarts.init(this.$el);
       this.initChart();
     });
   },
-  updated () {
+  updated() {
     this.$nextTick(() => {
       this.initChart();
     });
   },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
 };
 </script>
 

src/components/chart/line/multiple-line-chart.vue

@@ -214,6 +214,10 @@ export default {
       type: Array,
       default: () => ["(MW)", "(风速)"],
     },
+    showLegend: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -223,11 +227,23 @@ export default {
     };
   },
   computed: {
-    xdata() {
-      return this.list[0].value.map((t) => {
-        return t.text;
+    datas() {
+      return this.list.map((t) => {
+        return t.value;
+      });
+    },
+    legend() {
+      return this.list.map((t) => {
+        return t.title;
       });
     },
+    xdata() {
+      if (this.list.length > 0)
+        return this.list[0].value.map((t) => {
+          return t.text;
+        });
+      return [];
+    },
     series() {
       let result = [];
 
@@ -311,26 +327,37 @@ export default {
       }
       return rgbaColor;
     },
+    resize() {},
     initChart() {
+      const chart = echarts.init(this.$el);
+
       let option = {
         color: this.color,
         tooltip: {
-          trigger: "item",
-          backgroundColor: "rgba(255,255,255,0.3)",
+          trigger: "axis",
+          backgroundColor: partten.getColor("gray") + "55",
           textStyle: {
             color: "#fff",
             fontSize: util.vh(16),
           },
-          formatter: function(param) {
-            console.log(param);
-            return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.legend,
+          right: 56,
+          icon: "circle",
+          itemWidth: 6,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
           },
         },
         grid: {
-          top: util.vh(32),
-          left: util.vh(40),
-          right: util.vh(40),
-          bottom: util.vh(24),
+          top: 32,
+          left: 40,
+          right: 40,
+          bottom: 24,
         },
         xAxis: [
           {
@@ -352,8 +379,13 @@ export default {
         yAxis: this.yAxis,
         series: this.series,
       };
-
-      this.chart && option && this.chart.setOption(option);
+      chart.clear();
+      chart && option && chart.setOption(option);
+      this.resize = function() {
+        chart.resize();
+      };
+      window.addEventListener("resize", this.resize);
+      chart.resize();
     },
   },
   created() {
@@ -363,13 +395,15 @@ export default {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
-      this.chart = echarts.init(this.$el);
       this.initChart();
     });
   },
   updated() {
     this.initChart();
   },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
 };
 </script>
 

src/components/chart/line/normal-line-chart.vue

@@ -122,8 +122,12 @@ export default {
       type: Array,
       default: () => ["(MW)"],
     },
+    showLegend: {
+      type: Boolean,
+      default: false,
+    },
   },
-  data () {
+  data() {
     return {
       id: "",
       chart: null,
@@ -131,12 +135,17 @@ export default {
     };
   },
   computed: {
-    xdata () {
+    legend() {
+      return this.list.map((t) => {
+        return t.title;
+      });
+    },
+    xdata() {
       return this.list[0].value.map((t) => {
         return t.text;
       });
     },
-    yAxis () {
+    yAxis() {
       let result = [];
       this.units.forEach((value, index) => {
         result.push({
@@ -158,7 +167,7 @@ export default {
 
       return result;
     },
-    series () {
+    series() {
       let result = [];
 
       this.list.forEach((value, index) => {
@@ -183,27 +192,29 @@ export default {
     },
   },
   methods: {
-    hexToRgba (hex, opacity) {
-      let rgbaColor = "";
-      let reg = /^#[\da-f]{6}$/i;
-      if (reg.test(hex)) {
-        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt("0x" + hex.slice(3, 5))},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
-      }
-      return rgbaColor;
-    },
-    initChart () {
+    initChart() {
+      const chart = echarts.init(this.$el);
+
       let option = {
         color: this.color,
         tooltip: {
-          trigger: "item",
-          backgroundColor: "rgba(255,255,255,0.3)",
+          trigger: "axis",
+          backgroundColor: partten.getColor("gray") + "55",
           textStyle: {
             color: "#fff",
             fontSize: util.vh(16),
           },
-          formatter: function (param) {
-            console.log(param);
-            return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.legend,
+          right: 56,
+          icon: "circle",
+          itemWidth: 6,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
           },
         },
         grid: {
@@ -230,15 +241,22 @@ export default {
         series: this.series,
       };
 
-      this.chart.setOption(option);
+      chart.clear();
+      chart.setOption(option);
+
+      this.resize = function() {
+        chart.resize();
+      };
+
+      window.addEventListener("resize", this.resize);
     },
   },
-  created () {
+  created() {
     this.$nextTick(() => {
       this.id = "pie-chart-" + util.newGUID();
     });
   },
-  mounted () {
+  mounted() {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
@@ -246,11 +264,14 @@ export default {
       this.initChart();
     });
   },
-  updated () {
+  updated() {
     this.$nextTick(() => {
       this.initChart();
     });
   },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
 };
 </script>
 

src/components/chart/line/simple-line-chart.vue

@@ -244,7 +244,10 @@ export default {
     },
   },
   methods: {
+    resize() {},
     initChart() {
+      const chart = echarts.init(this.$el);
+
       let option = {
         title: {
           text: this.title,
@@ -255,6 +258,14 @@ export default {
           left: 16,
           top: 0,
         },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: partten.getColor("gray") + "55",
+          textStyle: {
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
+        },
         grid: {
           top: 40,
           left: 16,
@@ -333,7 +344,13 @@ export default {
         ],
       };
 
-      this.chart.setOption(option);
+      chart.clear();
+      chart.setOption(option);
+
+      this.resize = function() {
+        chart.resize();
+      };
+      window.addEventListener("resize", this.resize);
     },
   },
   created() {
@@ -342,12 +359,14 @@ export default {
   mounted() {
     this.$el.style.width = this.width;
     this.$el.style.height = this.height;
-    this.chart = echarts.init(this.$el);
     this.initChart();
   },
   updated() {
     this.initChart();
   },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
 };
 </script>
 

src/components/chart/radar/normal-radar-chart.vue

@@ -0,0 +1,337 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "radar-chart",
+  componentName: "radar-chart",
+  props: {
+    // 宽度 默认9.722vh
+    width: {
+      type: String,
+      default: "100%",
+    },
+    // 高度 默认9.722vh
+    height: {
+      type: String,
+      default: "7.4074vh",
+    },
+    // 标题
+    title: {
+      type: String,
+      default: "标题",
+    },
+    // 值
+    value: {
+      type: Array,
+      default: () => {
+        return [
+          {
+            indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
+            data: [
+              {
+                value: [44200, 14200, 20000, 35000, 50000, 38000],
+                name: "NAME",
+              },
+            ],
+          },
+        ];
+      },
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      lineStyles: [
+        {
+          areaStyle: {
+            color: "rgba(75,85,174, 0.9)",
+          },
+          lineStyle: {
+            color: "rgba(255,255,255, 0.85)",
+          },
+          itemStyle: {
+            color: "rgba(75,85,174, 0.5)",
+            borderColor: "rgba(255,255,255, 0.5)",
+            borderWidth: 0.5,
+          },
+        },
+      ],
+    };
+  },
+  computed: {},
+  methods: {
+    initChart() {
+      let maxValue = -1;
+      this.value[0].data.forEach((item, index) => {
+        item.value.forEach((value) => {
+          if (value > maxValue) {
+            maxValue = value;
+          }
+        });
+        item.areaStyle = this.lineStyles[index % this.lineStyles.length].areaStyle;
+        item.lineStyle = this.lineStyles[index % this.lineStyles.length].lineStyle;
+        item.itemStyle = this.lineStyles[index % this.lineStyles.length].itemStyle;
+      });
+      maxValue *= 1.5;
+      let indicator = [];
+      this.value[0].indicator.forEach((item) => {
+        indicator.push({ name: item, max: maxValue });
+      });
+      let option = {
+        grid: {
+          left: 150,
+          right: 150,
+          bottom: 150,
+          top: 150,
+        },
+        radar: [
+          // 最低层 80
+          {
+            radius: "70%",
+            center: ["50%", "50%"],
+            splitNumber: 1,
+            nameGap: "16",
+            name: {
+              textStyle: {
+                color: partten.getColor("gray") + 99,
+                fontSize: 12,
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: partten.getColor("gray") + 40,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                width: 1,
+                color: partten.getColor("gray") + 40,
+              },
+            },
+            splitArea: {
+              areaStyle: {
+                color: "transparent",
+              },
+            },
+            indicator: indicator,
+          },
+          // 次外层 70 - 80
+          {
+            radius: ["60%", "70%"],
+            center: ["50%", "50%"],
+            startAngle: 90,
+            splitNumber: 2,
+            name: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: partten.getColor("gray") + 40,
+                shadowBlur: 1,
+                shadowColor: "#fff",
+                shadowOffsetX: 0.5,
+                shadowOffsetY: 1,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                width: 1,
+                color: partten.getColor("gray") + 40,
+                shadowColor: "#fff",
+                shadowBlur: 0,
+                shadowOffsetX: 0.5,
+                shadowOffsetY: 0.5,
+              },
+            },
+            splitArea: {
+              areaStyle: {
+                color: "transparent",
+              },
+            },
+            indicator: indicator,
+          },
+          // 渐变层 40 - 70
+          {
+            radius: ["35%", "60%"],
+            center: ["50%", "50%"],
+            splitNumber: 1,
+            name: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: partten.getColor("gray") + 40,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                width: 1,
+                color: partten.getColor("gray"),
+              },
+            },
+            splitArea: {
+              areaStyle: {
+                shadowBlur: 4,
+                color: {
+                  type: "radial",
+                  x: 0.5,
+                  y: 0.5,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0.5,
+                      color: "transparent", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: partten.getColor("green") + 60, // 100% 处的颜色
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+            },
+            indicator: indicator,
+          },
+          // 渐变层 0 - 40
+          {
+            radius: ["0%", "35%"],
+            center: ["50%", "50%"],
+            splitNumber: 1,
+            name: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: partten.getColor("gray") + 40,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                width: 1,
+                color: partten.getColor("gray"),
+              },
+            },
+            splitArea: {
+              areaStyle: {
+                shadowBlur: 4,
+                color: {
+                  type: "radial",
+                  x: 0.5,
+                  y: 0.5,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0.5,
+                      color: "transparent", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: partten.getColor("green") + 60, // 100% 处的颜色
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+            },
+            indicator: indicator,
+          },
+          // 内层 0 - 50
+          {
+            radius: "35%",
+            center: ["50%", "50%"],
+            splitNumber: 1,
+            name: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: partten.getColor("gray") + 40,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                width: 1,
+                color: partten.getColor("gray"),
+              },
+            },
+            splitArea: {
+              areaStyle: {
+                shadowBlur: 4,
+                color: "transparent",
+              },
+            },
+            indicator: indicator,
+          },
+          // 内层 0 - 45
+          {
+            radius: "35%",
+            center: ["50%", "50%"],
+            splitNumber: 1,
+            name: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: partten.getColor("gray") + 40,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                width: 1,
+                color: partten.getColor("gray"),
+              },
+            },
+            splitArea: {
+              areaStyle: {
+                shadowBlur: 4,
+                color: "transparent",
+              },
+            },
+            indicator: indicator,
+          },
+        ],
+        series: [
+          {
+            name: this.title,
+            type: "radar",
+            data: this.value.data,
+          },
+        ],
+      };
+
+      this.chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.chart = echarts.init(this.$el);
+      this.initChart();
+    });
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+  display: block;
+  margin: auto;
+}
+</style>

src/components/chart/radar/radar-chart.vue

@@ -30,15 +30,15 @@ export default {
     value: {
       type: Object,
       default: () => {
-          return {
-              indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
-              data: [
-                  {
-                      value: [44200, 14200, 20000, 35000, 50000, 38000],
-                      name: "NAME"
-                  }
-              ],
-          }
+        return {
+          indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
+          data: [
+            {
+              value: [44200, 14200, 20000, 35000, 50000, 38000],
+              name: "NAME",
+            },
+          ],
+        };
       },
     },
   },
@@ -46,11 +46,21 @@ export default {
     return {
       id: "",
       chart: null,
-      lineStyles: [{
+      lineStyles: [
+        {
           areaStyle: {
-            color: 'rgba(75,85,174, 0.9)'
-          }
-      }]
+            color: "rgba(75,85,174, 0.9)",
+          },
+          lineStyle: {
+            color: "rgba(255,255,255, 0.85)",
+          },
+          itemStyle: {
+            color: "rgba(75,85,174, 0.5)",
+            borderColor: "rgba(255,255,255, 0.5)",
+            borderWidth: 0.5,
+          },
+        },
+      ],
     };
   },
   computed: {},
@@ -58,35 +68,36 @@ export default {
     initChart() {
       let maxValue = -1;
       this.value.data.forEach((item, index) => {
-          item.value.forEach(value => {
-              if (value > maxValue) {
-                  maxValue = value;
-              }
-          })
-          item.areaStyle = this.lineStyles[index % this.lineStyles.length].areaStyle
-      })
+        item.value.forEach((value) => {
+          if (value > maxValue) {
+            maxValue = value;
+          }
+        });
+        item.areaStyle = this.lineStyles[index % this.lineStyles.length].areaStyle;
+        item.lineStyle = this.lineStyles[index % this.lineStyles.length].lineStyle;
+        item.itemStyle = this.lineStyles[index % this.lineStyles.length].itemStyle;
+      });
       maxValue *= 1.5;
       let indicator = [];
-      this.value.indicator.forEach(item => {
-          indicator.push({ name: item, max: maxValue })
-      })
+      this.value.indicator.forEach((item) => {
+        indicator.push({ name: item, max: maxValue });
+      });
       let option = {
         grid: {
-          left: 40,
-          right: 40,
-          bottom: 80,
-          top: 80,
-          containLabel: true,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          top: 0,
         },
         radar: [
-          // 最低层 80
+          // 最低层 90
           {
-            radius: "80%",
+            radius: "90%",
             center: ["50%", "50%"],
             splitNumber: 1,
             nameGap: "10",
             name: {
-                show: false,
+              show: false,
               textStyle: {
                 color: partten.getColor("gray") + 99,
                 fontSize: 12,
@@ -110,9 +121,9 @@ export default {
             },
             indicator: indicator,
           },
-          // 次外层 70 - 80
+          // 次外层 80 - 90
           {
-            radius: ["70%", "80%"],
+            radius: ["80%", "90%"],
             center: ["50%", "50%"],
             startAngle: 90,
             splitNumber: 2,
@@ -145,9 +156,9 @@ export default {
             },
             indicator: indicator,
           },
-          // 渐变层 40 - 70
+          // 渐变层 40 - 80
           {
-            radius: ["40%", "70%"],
+            radius: ["40%", "80%"],
             center: ["50%", "50%"],
             splitNumber: 1,
             name: {
@@ -188,9 +199,79 @@ export default {
             },
             indicator: indicator,
           },
-          // 内层 0 - 40
+          // 渐变层 0 - 40
           {
-            radius: "40%",
+            radius: ["0%", "40%"],
+            center: ["50%", "50%"],
+            splitNumber: 1,
+            name: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: partten.getColor("gray") + 40,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                width: 1,
+                color: partten.getColor("gray"),
+              },
+            },
+            splitArea: {
+              areaStyle: {
+                shadowBlur: 4,
+                color: {
+                  type: "radial",
+                  x: 0.5,
+                  y: 0.5,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0.5,
+                      color: "transparent", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: partten.getColor("green") + 60, // 100% 处的颜色
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+            },
+            indicator: indicator,
+          },
+          // 内层 0 - 50
+          {
+            radius: "50%",
+            center: ["50%", "50%"],
+            splitNumber: 1,
+            name: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: partten.getColor("gray") + 40,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                width: 1,
+                color: partten.getColor("gray"),
+              },
+            },
+            splitArea: {
+              areaStyle: {
+                shadowBlur: 4,
+                color: "transparent",
+              },
+            },
+            indicator: indicator,
+          },
+          // 内层 0 - 45
+          {
+            radius: "45%",
             center: ["50%", "50%"],
             splitNumber: 1,
             name: {
@@ -217,11 +298,11 @@ export default {
           },
         ],
         series: [
-            {
-                name: this.title,
-                 type: 'radar',
-                 data: this.value.data
-            }
+          {
+            name: this.title,
+            type: "radar",
+            data: this.value.data,
+          },
         ],
       };
 

src/components/coms/collapse/collapse-list.vue

@@ -5,7 +5,7 @@
         {{ menu.text }}
       </div>
       <div class="collapse-items">
-        <div class="item" v-for="(item, j) in menu.children" :key="item" @click.stop="itemClick(item ,j)" :class="{ active: itemIndex == j }">
+        <div class="item" v-for="(item, j) in menu.children" :key="item" @click.stop="itemClick(item, j)" :class="{ active: itemIndex == j }">
           <span class="dot" :class="'bg-' + item.color"></span>
           <span class="value"> {{ item.text }}</span>
         </div>
@@ -94,11 +94,11 @@ export default {
   // 自定义事件
   emits: {
     // 选中事件
-    select: null,
+    click: null,
   },
   computed: {},
   // 数据
-  data () {
+  data() {
     return {
       menuIndex: 0,
       itemIndex: 0,
@@ -106,29 +106,34 @@ export default {
   },
   // 函数
   methods: {
-    menuClick: function (index) {
-      this.menuIndex = index;
+    menuClick(index) {
+      if (this.menuIndex == index) {
+        this.menuIndex = -1;
+      } else {
+        this.menuIndex = index;
+      }
+      this.itemIndex = -1;
     },
-    itemClick (clickItem, index) {
+    itemClick(item, index) {
       this.itemIndex = index;
-      this.$emit("click", clickItem);
+      this.$emit("click", item);
     },
   },
   // 生命周期钩子
-  beforeCreate () {
+  beforeCreate() {
     // 创建前
   },
-  created () {
+  created() {
     // 创建后
   },
-  beforeMount () {
+  beforeMount() {
     // 渲染前
   },
-  mounted () { },
-  beforeUpdate () {
+  mounted() {},
+  beforeUpdate() {
     // 数据更新前
   },
-  updated () {
+  updated() {
     // 数据更新后
   },
 };

src/components/coms/table/table.vue

@@ -5,7 +5,7 @@
         <th v-for="(col, index) of data.column" :key="index">{{ col.name }}</th>
       </tr>
     </thead>
-    <tbody class="scroll">
+    <tbody :class="{ scroll: canScroll }">
       <tr v-for="(row, index) of data.data" :key="index">
         <td v-for="(col, i) of data.column" :key="i" :class="{ light: hoverRow == row || hoverCol == col, num: col.is_num }" v-html="template(col, row[col.field])" @mouseenter="hover(row, col)" @mouseleave="leave()"></td>
       </tr>
@@ -48,6 +48,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    canScroll: {
+      type: Boolean,
+      default: true,
+    },
   },
   // 自定义事件
   emits: {},

src/components/three/wave.vue

@@ -131,10 +131,11 @@
         },
         beforeUnmount() {
             // 销毁前
+            renderer.setAnimationLoop(null);
             camera = null;
             scene = null;
             renderer = null;
-        }
+        },
     }
 </script>
 

src/helper/partten.js

@@ -3,6 +3,7 @@ const color = [
     { key: "green", value: "#05BB4C" },
     { key: "yellow", value: "#F8DE5B" },
     { key: "gray", value: "#606769" },
+    { key: "grayl", value: "#B3BDC0" },
     { key: "purple", value: "#4B55AE" },
     { key: "orange", value: "#e17e23" },
     { key: "blue", value: "#1a93cf" },

src/router/index.js

@@ -116,6 +116,21 @@ const routes = [
     name: 'health4',
     component: () => import('../views/HealthControl/Health4.vue'),
   },
+  {
+    path: '/health5',
+    name: 'health5',
+    component: () => import('../views/HealthControl/Health5.vue'),
+  },
+  {
+    path: '/health6',
+    name: 'health6',
+    component: () => import('../views/HealthControl/Health6.vue'),
+  },
+  {
+    path: '/health7',
+    name: 'health7',
+    component: () => import('../views/HealthControl/Health7.vue'),
+  },
 ]
 
 const router = createRouter({

src/views/Decision/Decision1.vue

@@ -6,45 +6,51 @@
         <div class="query-item">
           <div class="lable">场站：</div>
           <div class="search-input">
-            <input name="" placeholder="请输入场站信息" />
-            <div class="unit svg-icon svg-icon-gray">
+            <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+            </el-select>
+            <!-- <div class="unit svg-icon svg-icon-gray">
               <svg-icon :svgid="'svg-arrow-down'" />
-            </div>
+            </div> -->
           </div>
         </div>
         <div class="query-item">
-          <div class="lable">场站：</div>
+          <div class="lable">项目：</div>
           <div class="search-input">
-            <input name="" />
-            <div class="unit svg-icon svg-icon-gray">
+            <el-select v-model="value2" multiple placeholder="请选择" popper-class="select">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+            </el-select>
+            <!-- <div class="unit svg-icon svg-icon-gray">
               <svg-icon :svgid="'svg-arrow-down'" />
-            </div>
+            </div> -->
           </div>
         </div>
         <div class="query-item">
-          <div class="lable">场站：</div>
+          <div class="lable">线路：</div>
           <div class="search-input">
-            <input name="" />
-            <div class="unit svg-icon svg-icon-gray">
+            <el-select v-model="value3" multiple placeholder="请选择" popper-class="select">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+            </el-select>
+            <!-- <div class="unit svg-icon svg-icon-gray">
               <svg-icon :svgid="'svg-arrow-down'" />
-            </div>
+            </div> -->
           </div>
         </div>
         <div class="query-item">
-          <div class="lable">场站：</div>
+          <div class="lable">开始日期：</div>
           <div class="search-input">
-            <input name="" />
-            <div class="unit svg-icon svg-icon-gray">
+            <el-date-picker v-model="value4" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
+            <!-- <div class="unit svg-icon svg-icon-gray">
               <svg-icon :svgid="'svg-arrow-down'" />
-            </div>
+            </div> -->
           </div>
         </div>
         <div class="query-item">
-          <div class="lable">场站：</div>
+          <div class="lable">结束日期：</div>
           <div class="search-input">
-            <input name="" />
+            <el-date-picker v-model="value5" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
             <div class="unit svg-icon svg-icon-gray">
-              <svg-icon :svgid="'svg-arrow-down'" />
+              <svg-icon :svgid="''" />
             </div>
           </div>
         </div>
@@ -210,6 +216,33 @@ export default {
           },
         ],
       },
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+      value1: [],
+      value2: [],
+      value3: [],
+      value4: "",
+      value5: "",
     };
   },
   created() {

src/views/Decision/Decision2.vue

@@ -6,45 +6,51 @@
         <div class="query-item">
           <div class="lable">场站：</div>
           <div class="search-input">
-            <input name="" placeholder="请输入场站信息" />
-            <div class="unit svg-icon svg-icon-gray">
+            <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+            </el-select>
+            <!-- <div class="unit svg-icon svg-icon-gray">
               <svg-icon :svgid="'svg-arrow-down'" />
-            </div>
+            </div> -->
           </div>
         </div>
         <div class="query-item">
-          <div class="lable">场站：</div>
+          <div class="lable">项目：</div>
           <div class="search-input">
-            <input name="" />
-            <div class="unit svg-icon svg-icon-gray">
+            <el-select v-model="value2" multiple placeholder="请选择" popper-class="select">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+            </el-select>
+            <!-- <div class="unit svg-icon svg-icon-gray">
               <svg-icon :svgid="'svg-arrow-down'" />
-            </div>
+            </div> -->
           </div>
         </div>
         <div class="query-item">
-          <div class="lable">场站：</div>
+          <div class="lable">线路：</div>
           <div class="search-input">
-            <input name="" />
-            <div class="unit svg-icon svg-icon-gray">
+            <el-select v-model="value3" multiple placeholder="请选择" popper-class="select">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+            </el-select>
+            <!-- <div class="unit svg-icon svg-icon-gray">
               <svg-icon :svgid="'svg-arrow-down'" />
-            </div>
+            </div> -->
           </div>
         </div>
         <div class="query-item">
-          <div class="lable">场站：</div>
+          <div class="lable">开始日期：</div>
           <div class="search-input">
-            <input name="" />
-            <div class="unit svg-icon svg-icon-gray">
+            <el-date-picker v-model="value4" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
+            <!-- <div class="unit svg-icon svg-icon-gray">
               <svg-icon :svgid="'svg-arrow-down'" />
-            </div>
+            </div> -->
           </div>
         </div>
         <div class="query-item">
-          <div class="lable">场站：</div>
+          <div class="lable">结束日期：</div>
           <div class="search-input">
-            <input name="" />
+            <el-date-picker v-model="value5" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
             <div class="unit svg-icon svg-icon-gray">
-              <svg-icon :svgid="'svg-arrow-down'" />
+              <svg-icon :svgid="''" />
             </div>
           </div>
         </div>
@@ -204,6 +210,33 @@ export default {
           },
         ],
       },
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+      value1: [],
+      value2: [],
+      value3: [],
+      value4: "",
+      value5: "",
     };
   },
   created() {

src/views/Decision/Decision3.vue

@@ -6,45 +6,51 @@
         <div class="query-item">
           <div class="lable">场站：</div>
           <div class="search-input">
-            <input name="" placeholder="请输入场站信息" />
-            <div class="unit svg-icon svg-icon-gray">
+            <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+            </el-select>
+            <!-- <div class="unit svg-icon svg-icon-gray">
               <svg-icon :svgid="'svg-arrow-down'" />
-            </div>
+            </div> -->
           </div>
         </div>
         <div class="query-item">
-          <div class="lable">场站：</div>
+          <div class="lable">项目：</div>
           <div class="search-input">
-            <input name="" />
-            <div class="unit svg-icon svg-icon-gray">
+            <el-select v-model="value2" multiple placeholder="请选择" popper-class="select">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+            </el-select>
+            <!-- <div class="unit svg-icon svg-icon-gray">
               <svg-icon :svgid="'svg-arrow-down'" />
-            </div>
+            </div> -->
           </div>
         </div>
         <div class="query-item">
-          <div class="lable">场站：</div>
+          <div class="lable">线路：</div>
           <div class="search-input">
-            <input name="" />
-            <div class="unit svg-icon svg-icon-gray">
+            <el-select v-model="value3" multiple placeholder="请选择" popper-class="select">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+            </el-select>
+            <!-- <div class="unit svg-icon svg-icon-gray">
               <svg-icon :svgid="'svg-arrow-down'" />
-            </div>
+            </div> -->
           </div>
         </div>
         <div class="query-item">
-          <div class="lable">场站：</div>
+          <div class="lable">开始日期：</div>
           <div class="search-input">
-            <input name="" />
-            <div class="unit svg-icon svg-icon-gray">
+            <el-date-picker v-model="value4" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
+            <!-- <div class="unit svg-icon svg-icon-gray">
               <svg-icon :svgid="'svg-arrow-down'" />
-            </div>
+            </div> -->
           </div>
         </div>
         <div class="query-item">
-          <div class="lable">场站：</div>
+          <div class="lable">结束日期：</div>
           <div class="search-input">
-            <input name="" />
+            <el-date-picker v-model="value5" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
             <div class="unit svg-icon svg-icon-gray">
-              <svg-icon :svgid="'svg-arrow-down'" />
+              <svg-icon :svgid="''" />
             </div>
           </div>
         </div>
@@ -189,6 +195,33 @@ export default {
           },
         ],
       },
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+      value1: [],
+      value2: [],
+      value3: [],
+      value4: "",
+      value5: "",
     };
   },
   created() {

src/views/Decision/Decision4.vue

@@ -6,45 +6,51 @@
         <div class="query-item">
           <div class="lable">场站：</div>
           <div class="search-input">
-            <input name="" placeholder="请输入场站信息" />
-            <div class="unit svg-icon svg-icon-gray">
+            <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+            </el-select>
+            <!-- <div class="unit svg-icon svg-icon-gray">
               <svg-icon :svgid="'svg-arrow-down'" />
-            </div>
+            </div> -->
           </div>
         </div>
         <div class="query-item">
-          <div class="lable">场站：</div>
+          <div class="lable">项目：</div>
           <div class="search-input">
-            <input name="" />
-            <div class="unit svg-icon svg-icon-gray">
+            <el-select v-model="value2" multiple placeholder="请选择" popper-class="select">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+            </el-select>
+            <!-- <div class="unit svg-icon svg-icon-gray">
               <svg-icon :svgid="'svg-arrow-down'" />
-            </div>
+            </div> -->
           </div>
         </div>
         <div class="query-item">
-          <div class="lable">场站：</div>
+          <div class="lable">线路：</div>
           <div class="search-input">
-            <input name="" />
-            <div class="unit svg-icon svg-icon-gray">
+            <el-select v-model="value3" multiple placeholder="请选择" popper-class="select">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+            </el-select>
+            <!-- <div class="unit svg-icon svg-icon-gray">
               <svg-icon :svgid="'svg-arrow-down'" />
-            </div>
+            </div> -->
           </div>
         </div>
         <div class="query-item">
-          <div class="lable">场站：</div>
+          <div class="lable">开始日期：</div>
           <div class="search-input">
-            <input name="" />
-            <div class="unit svg-icon svg-icon-gray">
+            <el-date-picker v-model="value4" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
+            <!-- <div class="unit svg-icon svg-icon-gray">
               <svg-icon :svgid="'svg-arrow-down'" />
-            </div>
+            </div> -->
           </div>
         </div>
         <div class="query-item">
-          <div class="lable">场站：</div>
+          <div class="lable">结束日期：</div>
           <div class="search-input">
-            <input name="" />
+            <el-date-picker v-model="value5" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
             <div class="unit svg-icon svg-icon-gray">
-              <svg-icon :svgid="'svg-arrow-down'" />
+              <svg-icon :svgid="''" />
             </div>
           </div>
         </div>
@@ -201,6 +207,33 @@ export default {
           },
         ],
       },
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+      value1: [],
+      value2: [],
+      value3: [],
+      value4: "",
+      value5: "",
     };
   },
   created() {

src/views/HealthControl/Health1.vue

@@ -1,185 +1,199 @@
 <template>
   <div class="health-1">
     <div class="selections mg-b-16">
-      <div class="item">未确认缺陷</div>
-      <div class="item">未确认缺陷</div>
-      <div class="item active">未确认缺陷</div>
-      <div class="item">未确认缺陷</div>
+      <div class="item" @click="tabSelect(0)" :class="{ active: tabIndex == 0 }">未确认缺陷</div>
+      <div class="item" @click="tabSelect(1)" :class="{ active: tabIndex == 1 }">未确认缺陷</div>
+      <div class="item" @click="tabSelect(2)" :class="{ active: tabIndex == 2 }">未确认缺陷</div>
+      <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 3 }">未确认缺陷</div>
     </div>
-    <div class="power-info mg-b-16">
-      <div class="info-tab">
-        <div class="tab active">
-          <i class="svg-icon svg-icon svg-icon-sm">
-            <svg-icon :svgid="'svg-wind-site'" />
-          </i>
-          <span> 24小时健康趋势 </span>
-        </div>
-        <div class="tab">
-          <i class="svg-icon svg-icon svg-icon-sm">
-            <svg-icon :svgid="'svg-wind-site'" />
-          </i>
-          <span> 7日健康趋势 </span>
-        </div>
-        <div class="tab">
-          <i class="svg-icon svg-icon svg-icon-sm">
-            <svg-icon :svgid="'svg-wind-site'" />
-          </i>
-          <span>30日健康趋势</span>
+    <div v-if="tabIndex == 0">
+      <div class="power-info mg-b-16">
+        <div class="info-tab">
+          <div class="tab active">
+            <i class="svg-icon svg-icon svg-icon-sm">
+              <svg-icon :svgid="'svg-24-houre'" />
+            </i>
+            <span> 24小时健康趋势 </span>
+          </div>
+          <div class="tab">
+            <i class="svg-icon svg-icon svg-icon-sm">
+              <svg-icon :svgid="'svg-h-day'" />
+            </i>
+            <span> 7日健康趋势 </span>
+          </div>
+          <div class="tab">
+            <i class="svg-icon svg-icon svg-icon-sm">
+              <svg-icon :svgid="'svg-h-month'" />
+            </i>
+            <span>30日健康趋势</span>
+          </div>
+          <div class="empty"></div>
+          <div class="tab">
+            <span>全部风场健康趋势</span>
+          </div>
         </div>
-        <div class="empty"></div>
-        <div class="tab">
-          <span>全部风场健康趋势</span>
+        <div class="info-chart">
+          <panel class="info-chart-panel" :title="'损失电量分析'">
+            <vertival-bar-line-chart :height="'310px'" />
+          </panel>
         </div>
       </div>
-      <div class="info-chart">
-        <panel class="info-chart-panel" :title="'损失电量分析'">
-          <vertival-bar-line-chart :height="'310px'" />
-        </panel>
-      </div>
-    </div>
-    <div class="health-report">
-      <panel class="health-report-panel" :title="'健康报告'" :showLine="false">
-        <div class="actions mg-b-16">
-          <div class="item green">当日内推荐</div>
-          <div class="item purple">三日内推荐</div>
-          <div class="item gray">超三日推荐</div>
-        </div>
-        <div class="report-items">
-          <div class="item">
-            <div class="title">风机编号：QG01_04</div>
-            <div class="info">
-              <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
-              <p>推荐检修时间：2021-06-04 16:00:00</p>
-              <p>推荐时间对应风速：2.4</p>
-              <p>判断时间：2021-05-27 08:20:00</p>
-              <div class="actions mg-t-16">
-                <button class="btn success">
-                  <i class="fa fa-check"></i>
-                  提交
-                </button>
-                <button class="btn">
-                  <i class="fa fa-close"></i>
-                  取消
-                </button>
+      <div class="health-report">
+        <panel class="health-report-panel" :title="'健康报告'" :showLine="false">
+          <div class="actions mg-b-16">
+            <div class="item green">当日内推荐</div>
+            <div class="item purple">三日内推荐</div>
+            <div class="item gray">超三日推荐</div>
+          </div>
+          <div class="report-items scroll">
+            <div class="item">
+              <div class="title">风机编号：QG01_04</div>
+              <div class="info">
+                <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
+                <p>推荐检修时间：2021-06-04 16:00:00</p>
+                <p>推荐时间对应风速：2.4</p>
+                <p>判断时间：2021-05-27 08:20:00</p>
+                <div class="actions mg-t-16">
+                  <button class="btn success">
+                    <i class="fa fa-check"></i>
+                    提交
+                  </button>
+                  <button class="btn">
+                    <i class="fa fa-close"></i>
+                    取消
+                  </button>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="item">
-            <div class="title">风机编号：QG01_04</div>
-            <div class="info">
-              <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
-              <p>推荐检修时间：2021-06-04 16:00:00</p>
-              <p>推荐时间对应风速：2.4</p>
-              <p>判断时间：2021-05-27 08:20:00</p>
-              <div class="actions mg-t-16">
-                <button class="btn success">
-                  <i class="fa fa-check"></i>
-                  提交
-                </button>
-                <button class="btn">
-                  <i class="fa fa-close"></i>
-                  取消
-                </button>
+            <div class="item">
+              <div class="title">风机编号：QG01_04</div>
+              <div class="info">
+                <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
+                <p>推荐检修时间：2021-06-04 16:00:00</p>
+                <p>推荐时间对应风速：2.4</p>
+                <p>判断时间：2021-05-27 08:20:00</p>
+                <div class="actions mg-t-16">
+                  <button class="btn success">
+                    <i class="fa fa-check"></i>
+                    提交
+                  </button>
+                  <button class="btn">
+                    <i class="fa fa-close"></i>
+                    取消
+                  </button>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="item">
-            <div class="title">风机编号：QG01_04</div>
-            <div class="info">
-              <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
-              <p>推荐检修时间：2021-06-04 16:00:00</p>
-              <p>推荐时间对应风速：2.4</p>
-              <p>判断时间：2021-05-27 08:20:00</p>
-              <div class="actions mg-t-16">
-                <button class="btn success">
-                  <i class="fa fa-check"></i>
-                  提交
-                </button>
-                <button class="btn">
-                  <i class="fa fa-close"></i>
-                  取消
-                </button>
+            <div class="item">
+              <div class="title">风机编号：QG01_04</div>
+              <div class="info">
+                <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
+                <p>推荐检修时间：2021-06-04 16:00:00</p>
+                <p>推荐时间对应风速：2.4</p>
+                <p>判断时间：2021-05-27 08:20:00</p>
+                <div class="actions mg-t-16">
+                  <button class="btn success">
+                    <i class="fa fa-check"></i>
+                    提交
+                  </button>
+                  <button class="btn">
+                    <i class="fa fa-close"></i>
+                    取消
+                  </button>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="item">
-            <div class="title">风机编号：QG01_04</div>
-            <div class="info">
-              <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
-              <p>推荐检修时间：2021-06-04 16:00:00</p>
-              <p>推荐时间对应风速：2.4</p>
-              <p>判断时间：2021-05-27 08:20:00</p>
-              <div class="actions mg-t-16">
-                <button class="btn success">
-                  <i class="fa fa-check"></i>
-                  提交
-                </button>
-                <button class="btn">
-                  <i class="fa fa-close"></i>
-                  取消
-                </button>
+            <div class="item">
+              <div class="title">风机编号：QG01_04</div>
+              <div class="info">
+                <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
+                <p>推荐检修时间：2021-06-04 16:00:00</p>
+                <p>推荐时间对应风速：2.4</p>
+                <p>判断时间：2021-05-27 08:20:00</p>
+                <div class="actions mg-t-16">
+                  <button class="btn success">
+                    <i class="fa fa-check"></i>
+                    提交
+                  </button>
+                  <button class="btn">
+                    <i class="fa fa-close"></i>
+                    取消
+                  </button>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="item">
-            <div class="title">风机编号：QG01_04</div>
-            <div class="info">
-              <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
-              <p>推荐检修时间：2021-06-04 16:00:00</p>
-              <p>推荐时间对应风速：2.4</p>
-              <p>判断时间：2021-05-27 08:20:00</p>
-              <div class="actions mg-t-16">
-                <button class="btn success">
-                  <i class="fa fa-check"></i>
-                  提交
-                </button>
-                <button class="btn">
-                  <i class="fa fa-close"></i>
-                  取消
-                </button>
+            <div class="item">
+              <div class="title">风机编号：QG01_04</div>
+              <div class="info">
+                <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
+                <p>推荐检修时间：2021-06-04 16:00:00</p>
+                <p>推荐时间对应风速：2.4</p>
+                <p>判断时间：2021-05-27 08:20:00</p>
+                <div class="actions mg-t-16">
+                  <button class="btn success">
+                    <i class="fa fa-check"></i>
+                    提交
+                  </button>
+                  <button class="btn">
+                    <i class="fa fa-close"></i>
+                    取消
+                  </button>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="item">
-            <div class="title">风机编号：QG01_04</div>
-            <div class="info">
-              <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
-              <p>推荐检修时间：2021-06-04 16:00:00</p>
-              <p>推荐时间对应风速：2.4</p>
-              <p>判断时间：2021-05-27 08:20:00</p>
-              <div class="actions mg-t-16">
-                <button class="btn success">
-                  <i class="fa fa-check"></i>
-                  提交
-                </button>
-                <button class="btn">
-                  <i class="fa fa-close"></i>
-                  取消
-                </button>
+            <div class="item">
+              <div class="title">风机编号：QG01_04</div>
+              <div class="info">
+                <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
+                <p>推荐检修时间：2021-06-04 16:00:00</p>
+                <p>推荐时间对应风速：2.4</p>
+                <p>判断时间：2021-05-27 08:20:00</p>
+                <div class="actions mg-t-16">
+                  <button class="btn success">
+                    <i class="fa fa-check"></i>
+                    提交
+                  </button>
+                  <button class="btn">
+                    <i class="fa fa-close"></i>
+                    取消
+                  </button>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="item">
-            <div class="title">风机编号：QG01_04</div>
-            <div class="info">
-              <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
-              <p>推荐检修时间：2021-06-04 16:00:00</p>
-              <p>推荐时间对应风速：2.4</p>
-              <p>判断时间：2021-05-27 08:20:00</p>
-              <div class="actions mg-t-16">
-                <button class="btn success">
-                  <i class="fa fa-check"></i>
-                  提交
-                </button>
-                <button class="btn">
-                  <i class="fa fa-close"></i>
-                  取消
-                </button>
+            <div class="item">
+              <div class="title">风机编号：QG01_04</div>
+              <div class="info">
+                <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
+                <p>推荐检修时间：2021-06-04 16:00:00</p>
+                <p>推荐时间对应风速：2.4</p>
+                <p>判断时间：2021-05-27 08:20:00</p>
+                <div class="actions mg-t-16">
+                  <button class="btn success">
+                    <i class="fa fa-check"></i>
+                    提交
+                  </button>
+                  <button class="btn">
+                    <i class="fa fa-close"></i>
+                    取消
+                  </button>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </panel>
+        </panel>
+      </div>
+    </div>
+    <div v-if="tabIndex == 1">
+      <health-2 />
+    </div>
+    <div v-if="tabIndex == 2">
+      <button class="btn" @click="dialogVisible = true">点击弹窗</button>
+      <el-dialog title="日信息对比" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="false">
+        <dayinfo />
+      </el-dialog>
+    </div>
+    <div v-if="tabIndex == 3">
+      tab4
     </div>
   </div>
 </template>
@@ -188,9 +202,22 @@
 import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
 import SvgIcon from "../../components/coms/icon/svg-icon.vue";
 import Panel from "../../components/coms/panel/panel.vue";
+import Dayinfo from "./dayinfo.vue";
+import Health2 from "./Health2.vue";
 export default {
   setup() {},
-  components: { SvgIcon, Panel, VertivalBarLineChart },
+  components: { SvgIcon, Panel, VertivalBarLineChart, Health2, Dayinfo },
+  data() {
+    return {
+      tabIndex: 0,
+      dialogVisible: false,
+    };
+  },
+  methods: {
+    tabSelect(state) {
+      this.tabIndex = state;
+    },
+  },
 };
 </script>
 
@@ -255,7 +282,7 @@ export default {
           border: 1px solid @green;
           color: @green;
           cursor: pointer;
-          
+
           i svg use {
             fill: @green;
           }
@@ -345,6 +372,7 @@ export default {
     .report-items {
       display: flex;
       flex-wrap: wrap;
+      height: calc(100vh - 592px);
 
       .item {
         flex: 0 0 calc(100% / 6 - 16px);

src/views/HealthControl/Health2.vue

@@ -4,19 +4,19 @@
       <div class="info-tab">
         <div class="tab active">
           <i class="svg-icon svg-icon svg-icon-sm">
-            <svg-icon :svgid="'svg-wind-site'" />
+            <svg-icon :svgid="'svg-24-houre'" />
           </i>
           <span> 24小时健康趋势 </span>
         </div>
         <div class="tab">
           <i class="svg-icon svg-icon svg-icon-sm">
-            <svg-icon :svgid="'svg-wind-site'" />
+            <svg-icon :svgid="'svg-h-day'" />
           </i>
           <span> 7日健康趋势 </span>
         </div>
         <div class="tab">
           <i class="svg-icon svg-icon svg-icon-sm">
-            <svg-icon :svgid="'svg-wind-site'" />
+            <svg-icon :svgid="'svg-h-month'" />
           </i>
           <span>30日健康趋势</span>
         </div>

src/views/HealthControl/Health3.vue

@@ -4,19 +4,19 @@
       <div class="info-tab">
         <div class="tab active">
           <i class="svg-icon svg-icon svg-icon-sm">
-            <svg-icon :svgid="'svg-wind-site'" />
+            <svg-icon :svgid="'svg-24-houre'" />
           </i>
           <span> 24小时健康趋势 </span>
         </div>
         <div class="tab">
           <i class="svg-icon svg-icon svg-icon-sm">
-            <svg-icon :svgid="'svg-wind-site'" />
+            <svg-icon :svgid="'svg-h-day'" />
           </i>
           <span> 7日健康趋势 </span>
         </div>
         <div class="tab">
           <i class="svg-icon svg-icon svg-icon-sm">
-            <svg-icon :svgid="'svg-wind-site'" />
+            <svg-icon :svgid="'svg-h-month'" />
           </i>
           <span>30日健康趋势</span>
         </div>

src/views/HealthControl/Health5.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="health-5">
+    <!-- 当内容超出页面时 添加 scroll 即可自动添加滚动条 -->
+    <div class="health-matrix scroll">
+      <div class="health-matrix-panel" v-for="index of 6" :key="index">
+        <div class="header">
+          <i class="svg-icon svg-icon-sm svg-icon-white">
+            <svg-icon :svgid="'svg-wind-site'" />
+          </i>
+          <span class="title">某某某风机厂</span>
+          <div class="tools">
+            <div class="tool-block">
+              <div class="legend bg-green"></div>
+              <div class="legend-text green">良好数量</div>
+              <div class="legend-value">123</div>
+            </div>
+            <div class="tool-block">
+              <div class="legend bg-purple"></div>
+              <div class="legend-text purple">正常数量</div>
+              <div class="legend-value">123</div>
+            </div>
+            <div class="tool-block">
+              <div class="legend bg-yellow"></div>
+              <div class="legend-text yellow">注意数量</div>
+              <div class="legend-value">123</div>
+            </div>
+            <div class="tool-block">
+              <div class="legend bg-orange"></div>
+              <div class="legend-text orange">严重数量</div>
+              <div class="legend-value">123</div>
+            </div>
+          </div>
+        </div>
+        <div class="body">
+          <div class="matrix">
+            <div class="item green">1号</div>
+            <div class="item purple">2号</div>
+            <div class="item orange">3号</div>
+            <div class="item" v-for="index of 100" :key="index">{{ index + 3 }}号</div>
+            <div class="blank" v-for="index of 25" :key="index"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+export default {
+  setup() {},
+  components: { SvgIcon },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="less">
+.health-5 {
+  .health-matrix {
+    height: calc(100vh - 7vh);
+
+    .health-matrix-panel {
+      margin-bottom: 8px;
+      .header {
+        background: fade(@gray, 20);
+        line-height: 37px;
+        margin-bottom: 8px;
+        padding: 0 16px;
+
+        display: flex;
+        align-items: center;
+
+        i {
+          margin-right: 8px;
+        }
+
+        .title {
+          font-size: @fontsize-s;
+        }
+
+        .tools {
+          display: flex;
+
+          .tool-block {
+            display: flex;
+            align-items: center;
+            margin-left: 36px;
+
+            .legend {
+              flex: auto;
+              width: 0.741vh;
+              height: 0.741vh;
+              margin-right: 0.741vh;
+
+              &.long {
+                width: 2.963vh;
+                height: 0.37vh;
+              }
+            }
+
+            .legend-value {
+              color: @white;
+              margin-left: 16px;
+            }
+          }
+        }
+      }
+    }
+
+    .matrix {
+      display: flex;
+      flex-wrap: wrap;
+
+      .item {
+        flex: 1 0 calc(100% / 25 - 4px);
+        line-height: 26px;
+        background: fade(@gray, 20);
+        color: @gray-l;
+        font-size: 12px;
+        margin-bottom: 4px;
+        text-align: center;
+        border: 1px solid transparent;
+
+        & + .item {
+          margin-left: 4px;
+        }
+
+        &:nth-child(25n + 1) {
+          margin-left: 0px;
+        }
+
+        &.green {
+          color: @green;
+          background: fade(@green, 20);
+          border-color: @green;
+        }
+
+        &.purple {
+          color: @purple;
+          background: fade(@purple, 20);
+          border-color: @purple;
+        }
+
+        &.orange {
+          color: @orange;
+          background: fade(@orange, 20);
+          border-color: @orange;
+        }
+      }
+
+      .blank {
+        flex: 1 0 calc(100% / 25 - 4px);
+        margin-left: 4px;
+      }
+    }
+  }
+}
+</style>

src/views/HealthControl/Health6.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="health-6">
+    <div class="header-info mg-b-16">
+      <div class="selections">
+        <div class="item" @click="tabSelect(0)" :class="{ active: tabIndex == 0 }">
+          <i class="svg-icon svg-icon-sm">
+            <svg-icon :svgid="'svg-wind-site'" />
+          </i>
+          <span>风场</span>
+        </div>
+        <div class="item" @click="tabSelect(1)" :class="{ active: tabIndex == 1 }">
+          <i class="svg-icon svg-icon-sm">
+            <svg-icon :svgid="'svg-h-project'" />
+          </i>
+          <span>项目</span>
+        </div>
+      </div>
+      <div class="state">
+        <div class="state-item green">
+          <div class="dot "></div>
+          <div class="text">良好数量：</div>
+          <div class="value">999</div>
+        </div>
+        <div class="state-item purple">
+          <div class="dot "></div>
+          <div class="text">正常数量：</div>
+          <div class="value">999</div>
+        </div>
+        <div class="state-item yellow">
+          <div class="dot "></div>
+          <div class="text">注意数量：</div>
+          <div class="value">999</div>
+        </div>
+        <div class="state-item orange">
+          <div class="dot "></div>
+          <div class="text">严重数量：</div>
+          <div class="value">999</div>
+        </div>
+      </div>
+    </div>
+    <row :type="'flex'" class="mg-b-16">
+      <Col :span="8">
+        <panel :title="'健康走势图'" :showLine="false">
+          <dual-pie-chart :height="'250px'" />
+        </panel>
+      </Col>
+      <Col :span="16">
+        <panel :title="'矩阵'" :showLine="false">
+          <div class="matrix">
+            <div class="item green">1号</div>
+            <div class="item purple">2号</div>
+            <div class="item orange">3号</div>
+            <div class="item" v-for="index of 150" :key="index">{{ index + 3 }}号</div>
+            <div class="blank" v-for="index of 30" :key="index"></div>
+          </div>
+        </panel>
+      </Col>
+    </row>
+    <div class="mg-b-16">
+      <panel :title="'健康走势图'" :showLine="false">
+        <bar-line-chart :lineData="[]" :height="'250px'" />
+      </panel>
+    </div>
+    <div class="mg-b-16">
+      <panel :title="'健康走势图'" :showLine="false">
+        <normal-line-chart :height="'250px'" />
+      </panel>
+    </div>
+  </div>
+</template>
+
+<script>
+import BarLineChart from "../../components/chart/combination/bar-line-chart.vue";
+import NormalLineChart from "../../components/chart/line/normal-line-chart.vue";
+import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
+import Col from "../../components/coms/grid/col.vue";
+import Row from "../../components/coms/grid/row.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+export default {
+  setup() {},
+  components: { SvgIcon, Panel, NormalLineChart, BarLineChart, Row, Col, DualPieChart },
+  data() {
+    return {
+      tabIndex: 0,
+    };
+  },
+  methods: {
+    tabSelect(state) {
+      this.tabIndex = state;
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.health-6 {
+  .header-info {
+    display: flex;
+
+    .selections {
+      display: flex;
+      flex: 0 0 200px;
+
+      .item {
+        flex: 0 0 80px;
+        text-align: center;
+        line-height: 33px;
+        margin-right: 8px;
+        color: @font-color;
+        font-size: @fontsize-s;
+        background: fade(@gray, 20);
+        border: 1px solid fade(@gray, 20);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        i {
+          margin-right: 8px;
+
+          svg use {
+            fill: @gray;
+          }
+        }
+
+        &:hover,
+        &.active {
+          background: fade(@green, 20);
+          border: 1px solid @green;
+          color: @green;
+          cursor: pointer;
+
+          i svg use {
+            fill: @green;
+          }
+        }
+      }
+    }
+
+    .state {
+      display: flex;
+
+      .state-item {
+        display: flex;
+        height: 32px;
+        align-items: center;
+
+        .dot {
+          width: 8px;
+          height: 8px;
+          margin-right: 8px;
+        }
+
+        .text {
+          margin-left: 8px;
+        }
+
+        .value {
+          height: 32px;
+          line-height: 32px;
+          background: fade(@gray, 20);
+          padding: 0 16px;
+        }
+
+        &.green {
+          .dot {
+            background: @green;
+          }
+        }
+
+        &.purple {
+          .dot {
+            background: @purple;
+          }
+        }
+
+        &.yellow {
+          .dot {
+            background: @yellow;
+          }
+        }
+
+        &.orange {
+          .dot {
+            background: @orange;
+          }
+        }
+
+        & + .state-item {
+          margin-left: 16px;
+        }
+      }
+    }
+  }
+
+  .matrix {
+    display: flex;
+    flex-wrap: wrap;
+
+    .item {
+      flex: 1 0 calc(100% / 20 - 4px);
+      line-height: 26px;
+      background: fade(@gray, 20);
+      color: @gray-l;
+      font-size: 12px;
+      margin-bottom: 4px;
+      text-align: center;
+      border: 1px solid transparent;
+
+      & + .item {
+        margin-left: 4px;
+      }
+
+      &:nth-child(20n + 1) {
+        margin-left: 0px;
+      }
+
+      &.green {
+        color: @green;
+        background: fade(@green, 20);
+        border-color: @green;
+      }
+
+      &.purple {
+        color: @purple;
+        background: fade(@purple, 20);
+        border-color: @purple;
+      }
+
+      &.orange {
+        color: @orange;
+        background: fade(@orange, 20);
+        border-color: @orange;
+      }
+    }
+
+    .blank {
+      flex: 1 0 calc(100% / 20 - 4px);
+      margin-left: 4px;
+    }
+  }
+}
+</style>

src/views/HealthControl/Health7.vue

@@ -0,0 +1,293 @@
+<template>
+  <div class="health-7">
+    <div class="power-info mg-b-16">
+      <div class="info-tab">
+        <div class="tab active">
+          <i class="svg-icon svg-icon svg-icon-sm">
+            <svg-icon :svgid="'svg-24-houre'" />
+          </i>
+          <span> 24小时健康趋势 </span>
+        </div>
+        <div class="tab">
+          <i class="svg-icon svg-icon svg-icon-sm">
+            <svg-icon :svgid="'svg-h-day'" />
+          </i>
+          <span> 7日健康趋势 </span>
+        </div>
+        <div class="tab">
+          <i class="svg-icon svg-icon svg-icon-sm">
+            <svg-icon :svgid="'svg-h-month'" />
+          </i>
+          <span>30日健康趋势</span>
+        </div>
+        <div class="empty"></div>
+        <div class="tab">
+          <span>全部风场健康趋势</span>
+        </div>
+      </div>
+      <div class="info-chart">
+        <panel class="info-chart-panel" :title="'损失电量分析'">
+          <vertival-bar-line-chart :height="'310px'" />
+        </panel>
+      </div>
+    </div>
+    <div class="fc-info mg-b-16">
+      <panel :title="'健康走势图'" :showLine="false">
+        <normal-line-chart :height="'150px'" />
+      </panel>
+    </div>
+    <div class="data-list">
+      <Table :data="tableData" :canScroll="false" />
+    </div>
+  </div>
+</template>
+
+<script>
+import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+import NormalLineChart from "../../components/chart/line/normal-line-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+import Table from "../../components/coms/table/table.vue";
+export default {
+  setup() {},
+  components: { SvgIcon, Panel, VertivalBarLineChart, NormalLineChart, Table },
+  data() {
+    return {
+      tableData: {
+        column: [
+          {
+            name: "部件名称",
+            field: "name",
+          },
+          {
+            name: "备件数量",
+            field: "v1",
+            is_num: true,
+          },
+          {
+            name: "平均间隔时间(h)",
+            field: "v2",
+            is_num: true,
+          },
+          {
+            name: "平均消耗时间(h)",
+            field: "v3",
+            is_num: true,
+          },
+          {
+            name: "预计作业时间(小时)",
+            field: "v4",
+            is_num: true,
+          },
+          {
+            name: "损失电量统计",
+            field: "v5",
+            is_num: true,
+          },
+          {
+            name: "当前状态",
+            field: "v6",
+            template: function(data) {
+              if (data == 1) return "<div class='dot green'></div>";
+              else return "<div class='dot yellow'></div>";
+            },
+          },
+        ],
+        data: [
+          {
+            name: "齿轮箱",
+            v1: 15.78,
+            v2: 12,
+            v3: 2.3,
+            v4: 231.23,
+            v5: 123.23,
+            v6: 1,
+          },
+          {
+            name: "齿轮箱",
+            v1: 15.78,
+            v2: 12,
+            v3: 2.3,
+            v4: 231.23,
+            v5: 123.23,
+            v6: 1,
+          },
+          {
+            name: "齿轮箱",
+            v1: 15.78,
+            v2: 12,
+            v3: 2.3,
+            v4: 231.23,
+            v5: 123.23,
+            v6: 1,
+          },
+          {
+            name: "齿轮箱",
+            v1: 15.78,
+            v2: 12,
+            v3: 2.3,
+            v4: 231.23,
+            v5: 123.23,
+            v6: 1,
+          },
+          {
+            name: "齿轮箱",
+            v1: 15.78,
+            v2: 12,
+            v3: 2.3,
+            v4: 231.23,
+            v5: 123.23,
+            v6: 1,
+          },
+          {
+            name: "齿轮箱",
+            v1: 15.78,
+            v2: 12,
+            v3: 2.3,
+            v4: 231.23,
+            v5: 123.23,
+            v6: 2,
+          },
+          {
+            name: "齿轮箱",
+            v1: 15.78,
+            v2: 12,
+            v3: 2.3,
+            v4: 231.23,
+            v5: 123.23,
+            v6: 2,
+          },
+          {
+            name: "齿轮箱",
+            v1: 15.78,
+            v2: 12,
+            v3: 2.3,
+            v4: 231.23,
+            v5: 123.23,
+            v6: 2,
+          },
+        ],
+      },
+    };
+  },
+  created() {},
+};
+</script>
+
+<style lang="less">
+.health-7 {
+  // 电量健康情况
+  .power-info {
+    display: flex;
+    .info-tab {
+      flex: 0 0 156px;
+      display: flex;
+      flex-direction: column;
+      height: 350px;
+      margin-right: 1.4815vh;
+
+      .tab {
+        position: relative;
+        flex: 0 0 auto;
+        text-align: center;
+        line-height: 33px;
+        margin-right: 8px;
+        color: @gray-l;
+        font-size: 12px;
+        background: fade(@gray, 20);
+        border: 1px solid fade(@gray, 20);
+
+        display: flex;
+        align-items: center;
+
+        i {
+          margin: 0 1.4815vh;
+          svg use {
+            fill: @gray-l;
+          }
+        }
+
+        &:hover,
+        &.active {
+          background: fade(@green, 20);
+          border: 1px solid @green;
+          color: @green;
+          cursor: pointer;
+          i {
+            svg use {
+              fill: @green;
+            }
+          }
+        }
+
+        &.active::after {
+          box-sizing: content-box;
+          width: 0px;
+          height: 0px;
+          position: absolute;
+          right: -19px;
+          padding: 0;
+          border-bottom: 9px solid @green;
+          border-top: 9px solid transparent;
+          border-left: 9px solid transparent;
+          border-right: 9px solid transparent;
+          display: block;
+          content: "";
+          z-index: 10;
+          transform: rotate(90deg);
+        }
+
+        &.active::before {
+          box-sizing: content-box;
+          width: 0px;
+          height: 0px;
+          position: absolute;
+          right: -17px;
+          padding: 0;
+          border-bottom: 9px solid #063319;
+          border-top: 9px solid transparent;
+          border-left: 9px solid transparent;
+          border-right: 9px solid transparent;
+          display: block;
+          content: "";
+          z-index: 12;
+          transform: rotate(90deg);
+        }
+
+        & + .tab {
+          margin-top: 0.7407vh;
+        }
+
+        &:last-child {
+          text-align: center;
+          justify-content: center;
+        }
+      }
+
+      .empty {
+        flex: 1 0 auto;
+      }
+    }
+
+    .info-chart {
+      flex: 1 0 auto;
+    }
+  }
+
+  .data-list {
+    .dot {
+      width: 12px;
+      height: 12px;
+      margin: auto;
+
+      &.green {
+        background: @green;
+      }
+
+      &.yellow {
+        background: @yellow;
+      }
+    }
+  }
+}
+</style>

src/views/HealthControl/dayinfo.vue

@@ -0,0 +1,310 @@
+<template>
+  <div class="health-day-info">
+    <div class="header">
+      <span class="herder-info">
+        风机编号：麻黄山24号风机
+      </span>
+      <span class="herder-info">
+        风机编号：麻黄山24号风机
+      </span>
+      <span class="herder-info">
+        基础指标
+      </span>
+    </div>
+    <div class="body">
+      <div class="left">
+        <table class="table-form">
+          <tr>
+            <td class="white">量化评级：AA</td>
+            <td class="white">量化评级：AA</td>
+          </tr>
+          <tr>
+            <td class="white">综合排名：1</td>
+            <td class="white">综合排名：1</td>
+          </tr>
+        </table>
+
+        <div class="chart-body">
+          <normal-radar-chart :height="'500px'" :value="radarValue" />
+        </div>
+      </div>
+      <div class="left">
+        <table class="table-form">
+          <tr>
+            <td class="white">类型</td>
+            <td class="white">指标</td>
+            <td class="white">麻黄山24号风机</td>
+            <td class="white">麻黄山26号风机</td>
+            <td class="white" colspan="2">排名</td>
+            <td class="white" colspan="2">评分</td>
+          </tr>
+          <tr>
+            <td class="white"></td>
+            <td class="white">发电量</td>
+            <td class="white">187.99</td>
+            <td class="white">187.99</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+          </tr>
+          <tr>
+            <td class="white"></td>
+            <td class="white">理论发电量</td>
+            <td class="white">187.99</td>
+            <td class="white">187.99</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+          </tr>
+          <tr>
+            <td class="white"></td>
+            <td class="white">平均功率</td>
+            <td class="white">187.99</td>
+            <td class="white">187.99</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+          </tr>
+          <tr>
+            <td class="white"></td>
+            <td class="white">故障损失电量</td>
+            <td class="white">187.99</td>
+            <td class="white">187.99</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+          </tr>
+          <tr>
+            <td class="white"></td>
+            <td class="white">限电损失电量</td>
+            <td class="white">187.99</td>
+            <td class="white">187.99</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+          </tr>
+          <tr>
+            <td class="white"></td>
+            <td class="white">维护损失电量</td>
+            <td class="white">187.99</td>
+            <td class="white">187.99</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+          </tr>
+          <tr>
+            <td class="white"></td>
+            <td class="white">故障时间</td>
+            <td class="white">187.99</td>
+            <td class="white">187.99</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+          </tr>
+          <tr>
+            <td class="white"></td>
+            <td class="white">维护时间</td>
+            <td class="white">187.99</td>
+            <td class="white">187.99</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+          </tr>
+          <tr>
+            <td class="white"></td>
+            <td class="white">运行时间</td>
+            <td class="white">187.99</td>
+            <td class="white">187.99</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+          </tr>
+          <tr>
+            <td class="white"></td>
+            <td class="white">停机时间</td>
+            <td class="white">187.99</td>
+            <td class="white">187.99</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+          </tr>
+          <tr>
+            <td class="white">性能</td>
+            <td class="white">平均切入风速</td>
+            <td class="white">187.99</td>
+            <td class="white">187.99</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+          </tr>
+          <tr>
+            <td class="white">性能</td>
+            <td class="white">性能损失电量</td>
+            <td class="white">187.99</td>
+            <td class="white">187.99</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+          </tr>
+          <tr>
+            <td class="white">性能</td>
+            <td class="white">拟合优度</td>
+            <td class="white">187.99</td>
+            <td class="white">187.99</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+          </tr>
+          <tr>
+            <td class="white">性能</td>
+            <td class="white">功率一致性系数</td>
+            <td class="white">187.99</td>
+            <td class="white">187.99</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+          </tr>
+          <tr>
+            <td class="white">可靠性管理</td>
+            <td class="white">利用小时</td>
+            <td class="white">187.99</td>
+            <td class="white">187.99</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+          </tr>
+          <tr>
+            <td class="white">可靠性管理</td>
+            <td class="white">设备可利用率</td>
+            <td class="white">187.99</td>
+            <td class="white">187.99</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+          </tr>
+          <tr>
+            <td class="white">可靠性管理</td>
+            <td class="white">等效可利用率</td>
+            <td class="white">187.99</td>
+            <td class="white">187.99</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+          </tr>
+          <tr>
+            <td class="white">可靠性管理</td>
+            <td class="white">有效风时数</td>
+            <td class="white">187.99</td>
+            <td class="white">187.99</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+          </tr>
+          <tr>
+            <td class="white">可靠性管理</td>
+            <td class="white">平均风速</td>
+            <td class="white">187.99</td>
+            <td class="white">187.99</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+          </tr>
+          <tr>
+            <td class="white">可靠性管理</td>
+            <td class="white">静风频率</td>
+            <td class="white">187.99</td>
+            <td class="white">187.99</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+            <td class="white">0</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import NormalRadarChart from "../../components/chart/radar/normal-radar-chart.vue";
+export default {
+  components: { NormalRadarChart },
+  data() {
+    return {
+      value: "",
+      radarValue: [
+        {
+          indicator: ["平均切入风速", "性能损失电量", "拟合优度", "功率一致性系数", "利用小时", "设备可利用率", "等效可利用系数", "有效风时数", "平均风速", "静风频率"],
+          data: [
+            {
+              value: [44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000, 35000, 50000, 38000],
+              name: "NAME",
+            },
+          ],
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style lang="less">
+.health-day-info {
+  .header {
+    display: flex;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    background: fade(@gray, 60);
+    color: @white;
+
+    .herder-info {
+      flex: 1 0 25%;
+      text-align: center;
+      font-size: @fontsize-s;
+
+      &:last-child {
+        flex: 1 0 50%;
+      }
+    }
+  }
+
+  .body {
+    display: flex;
+    .left {
+      flex: 0 0 50%;
+
+      display: flex;
+      flex-direction: column;
+
+      .chart-body {
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+      }
+    }
+    .right {
+      flex: 0 0 50%;
+    }
+  }
+}
+</style>

src/views/Home/components/map.vue

@@ -16,7 +16,7 @@
         <span>{{ tab.text }}</span>
       </div>
     </div>
-    <div class="return">
+    <div class="return" @click="backMap" v-show="!nxmap">
       <span class="svg-icon svg-icon-sm">
         <svg-icon :svgid="'svg-arrow-dpwn-1'" />
       </span>
@@ -82,13 +82,15 @@
       </svg>
     </div>
     <div class="map-img">
-      <SvgMap></SvgMap>
+      <SvgMap v-if="!nxmap"></SvgMap>
+      <SvgMapNX v-if="nxmap" @clickLabel="clickLabel"></SvgMapNX>
     </div>
   </div>
 </template>
 
 <script>
 import SvgMap from "./map/svg-map.vue";
+import SvgMapNX from "./map/svg-map-nx.vue";
 import SvgIcon from "../../../components/coms/icon/svg-icon.vue";
 import compassIcon from "@/assets/icon/svg_fill/compass.svg";
 export default {
@@ -97,6 +99,7 @@ export default {
   // 使用组件
   components: {
     SvgMap,
+    SvgMapNX,
     SvgIcon,
   },
   // 数据
@@ -120,6 +123,7 @@ export default {
       activeTab: 0,
       img: require("@assets/map/map-nx.png"),
       nxSvgFile: require("@assets/map/map-nx.svg"),
+      nxmap: false,
     };
   },
   // 函数
@@ -127,6 +131,12 @@ export default {
     selectTab: function(index) {
       this.activeTab = index;
     },
+    backMap: function() {
+      this.nxmap = true;
+    },
+    clickLabel: function() {
+      this.nxmap = false;
+    },
   },
   // 生命周期钩子
   beforeCreate() {
@@ -232,6 +242,7 @@ export default {
     right: 16px;
     font-size: @fontsize-l;
     color: fade(@white, 80);
+    cursor: pointer;
     .svg-icon {
       margin-right: 0.7407vh;
       svg {

src/views/Home/components/power-review.vue

@@ -20,7 +20,6 @@ export default {
     Col,
     DashPieChart,
   },
-
   data() {
     return {
       // 功率复核数据
@@ -28,22 +27,22 @@ export default {
     };
   },
 
-  props:{
-    data:{
-      type:Array,
-      default:() => []
-    }
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
   },
 
-  mounted(){
-    this.PowerLoad=this.data;
+  mounted() {
+    this.PowerLoad = this.data;
   },
 
-  watch:{
-    data(res){
-      this.PowerLoad=res;
-    }
-  }
+  watch: {
+    data(res) {
+      this.PowerLoad = res;
+    },
+  },
 };
 </script>
 

src/views/LightMatrix/LightMatrix.vue

@@ -7,37 +7,37 @@
       <div class="dot right bottom"></div>
       <Row>
         <Col :span="3">
-        <div class="panel-item-gf-new">
-          <div class="panel-left">
-            <i class="svg-icon svg-icon-write">
-              <SvgIcon :svgid="'svg-photovoltaic'"></SvgIcon>
-            </i>
-          </div>
-          <div class="panel-right">
-            <span class="text">接入光伏</span>
-            <span class="value">
-              {{ sourceMap[panelData.first.key] || "---" }}
-              <span class="unit">台</span>
-            </span>
+          <div class="panel-item-gf-new">
+            <div class="panel-left">
+              <i class="svg-icon svg-icon-write">
+                <SvgIcon :svgid="'svg-photovoltaic'"></SvgIcon>
+              </i>
+            </div>
+            <div class="panel-right">
+              <span class="text">接入光伏</span>
+              <span class="value">
+                {{ sourceMap[panelData.first.key] || "---" }}
+                <span class="unit">台</span>
+              </span>
+            </div>
           </div>
-        </div>
         </Col>
         <Col :span="3" v-for="(data, index) of panelData.datas" :key="index">
-        <div class="panel-item-new" :class="data.color">
-          <div class="panel-left">
-            <i class="svg-icon" :class="'svg-icon-' + data.color">
-              <SvgIcon :svgid="data.nameIcon"></SvgIcon>
-            </i>
-            <span class="text">{{ data.text1 }}</span>
-          </div>
-          <div class="panel-right">
-            <span class="text">台数</span>
-            <span class="value">
-              {{ sourceMap[data.key1] || "---" }}
-              <span class="unit">台</span>
-            </span>
+          <div class="panel-item-new" :class="data.color">
+            <div class="panel-left">
+              <i class="svg-icon" :class="'svg-icon-' + data.color">
+                <SvgIcon :svgid="data.nameIcon"></SvgIcon>
+              </i>
+              <span class="text">{{ data.text1 }}</span>
+            </div>
+            <div class="panel-right">
+              <span class="text">台数</span>
+              <span class="value">
+                {{ sourceMap[data.key1] || "---" }}
+                <span class="unit">台</span>
+              </span>
+            </div>
           </div>
-        </div>
         </Col>
       </Row>
     </div>
@@ -116,7 +116,7 @@ export default {
   },
 
   // 数据
-  data () {
+  data() {
     return {
       timmer: null, // 计时器
       sourceMap: {}, // 核心数据
@@ -298,7 +298,7 @@ export default {
   // 函数
   methods: {
     // 根据风机状态码返回对应 class
-    getColor (fjzt) {
+    getColor(fjzt) {
       switch (fjzt) {
         case 0:
           return "green";
@@ -325,13 +325,13 @@ export default {
     },
 
     // 请求服务
-    requestData (showLoading) {
+    requestData(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
         method: "POST",
         subUrl: "matrix/matrixDetialGfPush",
-        success (res) {
+        success(res) {
           if (res.data) {
             let sourceMap = res.data;
             for (let key in sourceMap) {
@@ -355,7 +355,7 @@ export default {
     },
   },
 
-  created () {
+  created() {
     let that = this;
     that.$nextTick(() => {
       that.requestData(false);
@@ -365,9 +365,9 @@ export default {
     });
   },
 
-  mounted () { },
+  mounted() {},
 
-  unmounted () {
+  unmounted() {
     clearInterval(this.timmer);
     this.timmer = null;
   },
@@ -625,7 +625,7 @@ export default {
 
           .sub-count {
             font-size: 14px;
-            font-family: 'Bicubik';
+            font-family: "Bicubik";
             font-weight: 500;
             flex: 1 0 auto;
 

src/views/LightMatrix1/LightMatrix1.vue

@@ -2,95 +2,95 @@
   <div class="light-matrix">
     <Row class="panel-2" type="">
       <Col :span="12" class="left-50-16">
-      <div class="panel">
-        <div class="dot left top"></div>
-        <div class="dot left bottom"></div>
-        <div class="dot right top"></div>
-        <div class="dot right bottom"></div>
-        <div class="item">
-          <span class="svg-icon svg-icon-gray svg-icon-md">
-            <SvgIcon svgid="svg-wind-site"></SvgIcon>
-          </span>
-        </div>
-        <div class="item write" @click="changeShow('jrfj_FDC')">
-          <div>接入风机</div>
-          <div>{{ sourceMap.fcjrnum || "---" }}</div>
-        </div>
-        <div class="item blue" @click="changeShow('yx_FDC', 1)">
-          <div>· 运行</div>
-          <div>{{ sourceMap.fcyxnum || "---" }}</div>
-        </div>
-        <div class="item green" @click="changeShow('dj_FDC', 0)">
-          <div>· 待机</div>
-          <div>{{ sourceMap.fcdjnum || "---" }}</div>
-        </div>
-        <div class="item pink" @click="changeShow('xd_FDC', 5)">
-          <div>· 限电</div>
-          <div>{{ sourceMap.fcxdnum || "---" }}</div>
-        </div>
-        <div class="item red" @click="changeShow('gz_FDC', 2)">
-          <div>· 故障</div>
-          <div>{{ sourceMap.fcgznum || "---" }}</div>
-        </div>
-        <div class="item orange" @click="changeShow('jx_FDC', 4)">
-          <div>· 检修</div>
-          <div>{{ sourceMap.fcwhnum || "---" }}</div>
-        </div>
-        <div class="item write" @click="changeShow('sl_FDC', 6)">
-          <div>· 受累</div>
-          <div>{{ sourceMap.fcslnum || "---" }}</div>
-        </div>
-        <div class="item gray" @click="changeShow('lx_FDC', 3)">
-          <div>· 离线</div>
-          <div>{{ sourceMap.fclxnum || "---" }}</div>
+        <div class="panel">
+          <div class="dot left top"></div>
+          <div class="dot left bottom"></div>
+          <div class="dot right top"></div>
+          <div class="dot right bottom"></div>
+          <div class="item">
+            <span class="svg-icon svg-icon-gray svg-icon-md">
+              <SvgIcon svgid="svg-wind-site"></SvgIcon>
+            </span>
+          </div>
+          <div class="item write" @click="changeShow('jrfj_FDC')">
+            <div>接入风机</div>
+            <div>{{ sourceMap.fcjrnum || "---" }}</div>
+          </div>
+          <div class="item blue" @click="changeShow('yx_FDC', 1)">
+            <div>· 运行</div>
+            <div>{{ sourceMap.fcyxnum || "---" }}</div>
+          </div>
+          <div class="item green" @click="changeShow('dj_FDC', 0)">
+            <div>· 待机</div>
+            <div>{{ sourceMap.fcdjnum || "---" }}</div>
+          </div>
+          <div class="item pink" @click="changeShow('xd_FDC', 5)">
+            <div>· 限电</div>
+            <div>{{ sourceMap.fcxdnum || "---" }}</div>
+          </div>
+          <div class="item red" @click="changeShow('gz_FDC', 2)">
+            <div>· 故障</div>
+            <div>{{ sourceMap.fcgznum || "---" }}</div>
+          </div>
+          <div class="item orange" @click="changeShow('jx_FDC', 4)">
+            <div>· 检修</div>
+            <div>{{ sourceMap.fcwhnum || "---" }}</div>
+          </div>
+          <div class="item write" @click="changeShow('sl_FDC', 6)">
+            <div>· 受累</div>
+            <div>{{ sourceMap.fcslnum || "---" }}</div>
+          </div>
+          <div class="item gray" @click="changeShow('lx_FDC', 3)">
+            <div>· 离线</div>
+            <div>{{ sourceMap.fclxnum || "---" }}</div>
+          </div>
         </div>
-      </div>
       </Col>
       <Col :span="12" class="left-50-16">
-      <div class="panel">
-        <div class="dot left top"></div>
-        <div class="dot left bottom"></div>
-        <div class="dot right top"></div>
-        <div class="dot right bottom"></div>
-        <div class="item">
-          <div class="loop"></div>
-          <span class="svg-icon svg-icon-gray svg-icon-md">
-            <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
-          </span>
-        </div>
-        <div class="item write" @click="changeShow('jrfj1_GDC')">
-          <div>接入风机</div>
-          <div>{{ sourceMap.gfjrnum || "---" }}</div>
-        </div>
-        <div class="item blue" @click="changeShow('yx1_GDC', 1)">
-          <div>· 运行</div>
-          <div>{{ sourceMap.gfyxnum || "---" }}</div>
-        </div>
-        <div class="item green" @click="changeShow('dj1_GDC', 0)">
-          <div>· 待机</div>
-          <div>{{ sourceMap.gfdjnum || "---" }}</div>
-        </div>
-        <div class="item pink" @click="changeShow('xd1_GDC', 5)">
-          <div>· 限电</div>
-          <div>{{ sourceMap.gfxdnum || "---" }}</div>
-        </div>
-        <div class="item red" @click="changeShow('gz1_GDC', 2)">
-          <div>· 故障</div>
-          <div>{{ sourceMap.gfgznum || "---" }}</div>
-        </div>
-        <div class="item orange" @click="changeShow('jx1_GDC', 4)">
-          <div>· 检修</div>
-          <div>{{ sourceMap.gfwhnum || "---" }}</div>
-        </div>
-        <div class="item write" @click="changeShow('sl1_GDC', 6)">
-          <div>· 受累</div>
-          <div>{{ sourceMap.gfslnum || "---" }}</div>
-        </div>
-        <div class="item gray" @click="changeShow('lx1_GDC', 3)">
-          <div>· 离线</div>
-          <div>{{ sourceMap.gflxnum || "---" }}</div>
+        <div class="panel">
+          <div class="dot left top"></div>
+          <div class="dot left bottom"></div>
+          <div class="dot right top"></div>
+          <div class="dot right bottom"></div>
+          <div class="item">
+            <div class="loop"></div>
+            <span class="svg-icon svg-icon-gray svg-icon-md">
+              <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
+            </span>
+          </div>
+          <div class="item write" @click="changeShow('jrfj1_GDC')">
+            <div>接入风机</div>
+            <div>{{ sourceMap.gfjrnum || "---" }}</div>
+          </div>
+          <div class="item blue" @click="changeShow('yx1_GDC', 1)">
+            <div>· 运行</div>
+            <div>{{ sourceMap.gfyxnum || "---" }}</div>
+          </div>
+          <div class="item green" @click="changeShow('dj1_GDC', 0)">
+            <div>· 待机</div>
+            <div>{{ sourceMap.gfdjnum || "---" }}</div>
+          </div>
+          <div class="item pink" @click="changeShow('xd1_GDC', 5)">
+            <div>· 限电</div>
+            <div>{{ sourceMap.gfxdnum || "---" }}</div>
+          </div>
+          <div class="item red" @click="changeShow('gz1_GDC', 2)">
+            <div>· 故障</div>
+            <div>{{ sourceMap.gfgznum || "---" }}</div>
+          </div>
+          <div class="item orange" @click="changeShow('jx1_GDC', 4)">
+            <div>· 检修</div>
+            <div>{{ sourceMap.gfwhnum || "---" }}</div>
+          </div>
+          <div class="item write" @click="changeShow('sl1_GDC', 6)">
+            <div>· 受累</div>
+            <div>{{ sourceMap.gfslnum || "---" }}</div>
+          </div>
+          <div class="item gray" @click="changeShow('lx1_GDC', 3)">
+            <div>· 离线</div>
+            <div>{{ sourceMap.gflxnum || "---" }}</div>
+          </div>
         </div>
-      </div>
       </Col>
     </Row>
     <div class="panel-box">
@@ -103,8 +103,7 @@
             <span>{{ sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId].name || "------" }}</span>
             <div class="sub-title-item" v-for="(fcItem, fcIndex) in fcStateArray" :key="fcIndex">
               <span class="sub-title">{{ fcItem.text }}</span>
-              <span class="sub-count" :class="fcItem.color">{{
-                sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][fcItem.key] }}</span>
+              <span class="sub-count" :class="fcItem.color">{{ sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][fcItem.key] }}</span>
             </div>
           </div>
         </div>
@@ -141,7 +140,7 @@ export default {
   },
 
   // 数据
-  data () {
+  data() {
     return {
       timmer: null, // 计时器
       sourceMap: {}, // 核心数据
@@ -230,7 +229,7 @@ export default {
   // 函数
   methods: {
     // 根据风机状态码返回对应 class
-    getColor (fjzt) {
+    getColor(fjzt) {
       switch (fjzt) {
         case 0:
           return "green";
@@ -257,7 +256,7 @@ export default {
     },
 
     // 切换显示种类
-    changeShow (category, fjzt, skipFill) {
+    changeShow(category, fjzt, skipFill) {
       if (!skipFill) {
         if (this.fillCategory === category) {
           this.fillCategory = null;
@@ -290,13 +289,13 @@ export default {
     },
 
     // 请求服务
-    requestData (showLoading) {
+    requestData(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
         method: "POST",
         subUrl: "matrix/matrixPush",
-        success (res) {
+        success(res) {
           if (res) {
             let sourceMap = res.data;
             let fjmap = [];
@@ -324,7 +323,7 @@ export default {
     },
   },
 
-  created () {
+  created() {
     let that = this;
     that.$nextTick(() => {
       that.requestData(false);
@@ -334,7 +333,7 @@ export default {
     });
   },
 
-  unmounted () {
+  unmounted() {
     clearInterval(this.timmer);
     this.timmer = null;
   },
@@ -445,7 +444,7 @@ export default {
         }
         &:last-child {
           font-size: @fontsize;
-          font-family: 'Bicubik';
+          font-family: "Bicubik";
         }
       }
     }
@@ -475,7 +474,7 @@ export default {
         position: relative;
 
         &::after {
-          content: '';
+          content: "";
           position: absolute;
           width: 1.481vh;
           height: 0.556vh;
@@ -528,7 +527,7 @@ export default {
           .sub-count {
             flex: 1 0 auto;
             font-size: 14px;
-            font-family: 'Bicubik';
+            font-family: "Bicubik";
             font-weight: 500;
 
             &.write {

src/views/Status/Status.vue

@@ -25,7 +25,7 @@ export default {
     ComTable,
   },
   // 数据
-  data () {
+  data() {
     return {
       timmer: null, // 遮罩开关
       sourceMap: {}, // 核心数据
@@ -180,13 +180,13 @@ export default {
 
   methods: {
     // 请求服务
-    requestData (showLoading) {
+    requestData(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
         method: "POST",
         subUrl: "monitor/monitor",
-        success (res) {
+        success(res) {
           if (res.data) {
             let sourceMap = res.data;
             let datas = [];
@@ -194,7 +194,7 @@ export default {
             sourceMap.maps.forEach((ele) => {
               datas.push({
                 title: ele.name,
-                wpId: sourceMap.vos.find(findEle => {
+                wpId: sourceMap.vos.find((findEle) => {
                   return findEle.wpName === ele.name;
                 }).wpId,
                 weather: {
@@ -280,7 +280,7 @@ export default {
     },
   },
 
-  created () {
+  created() {
     let that = this;
     that.$nextTick(() => {
       that.requestData(false);
@@ -290,9 +290,9 @@ export default {
     });
   },
 
-  mounted () { },
+  mounted() {},
 
-  unmounted () {
+  unmounted() {
     clearInterval(this.timmer);
     this.timmer = null;
   },
@@ -332,7 +332,7 @@ export default {
 
     &::after,
     &::before {
-      content: '';
+      content: "";
       position: absolute;
       width: 0.185vh;
       height: 0.185vh;

src/views/Status/components/status-panel.vue

@@ -70,35 +70,35 @@ export default {
     data: Object,
   },
   // 数据
-  data () {
+  data() {
     return {};
   },
   // 函数
   methods: {
-    jumpPage (id) {
+    jumpPage(id) {
       this.$router.push({
         path: "/windsite/home",
-        query: { wpId: id }
+        query: { wpId: id },
       });
     },
   },
   // 生命周期钩子
-  beforeCreate () {
+  beforeCreate() {
     // 创建前
   },
-  created () {
+  created() {
     // 创建后
   },
-  beforeMount () {
+  beforeMount() {
     // 渲染前
   },
-  mounted () {
+  mounted() {
     // 渲染后
   },
-  beforeUpdate () {
+  beforeUpdate() {
     // 数据更新前
   },
-  updated () {
+  updated() {
     // 数据更新后
   },
 };
@@ -216,7 +216,7 @@ export default {
 
           .f3,
           .f5 {
-            font-family: 'Bicubik';
+            font-family: "Bicubik";
             text-align: left;
             color: @green;
             justify-content: flex-start;
@@ -250,7 +250,7 @@ export default {
             position: relative;
 
             &::after {
-              content: '';
+              content: "";
               position: absolute;
               height: 100%;
               width: 0.278vh;

src/views/WindSite/WindSite.vue

@@ -44,7 +44,7 @@ export default {
         {
           icon: "svg-matrix",
           path: "/windsite/draughtfanlist",
-        },/*
+        } /*
         {
           icon: "svg-agc",
           path: "/windsite/matrix",
@@ -56,7 +56,7 @@ export default {
         {
           icon: "svg-intranet-involvement",
           path: "/windsite/box",
-        },*/
+        },*/,
         {
           icon: "svg-matrix",
           path: "/windsite/info",
@@ -64,7 +64,7 @@ export default {
         {
           icon: "svg-easy-compass",
           path: "/windsite/tower",
-        },/*
+        } /*
         {
           icon: "svg-easy-compass",
           path: "/windsite/Inverter-Info",
@@ -76,7 +76,7 @@ export default {
         {
           icon: "svg-easy-compass",
           path: "/windsite/map1",
-        },*/
+        },*/,
       ],
     };
   },

src/views/WindSite/pages/Home/Home.vue

@@ -173,53 +173,53 @@
         </row>
       </panel-3>
     </row>
-    <row>
-      <Col :span="6">
-      <panel title="日度损失电量分析"></panel>
-      </Col>
-      <Col :span="12">
-      <panel title="4小时功率曲线图">
-        <multiple-line-chart height="18.519vh" v-if="Powertrend" :list="Powertrend.value" :units="Powertrend.units" />
-      </panel>
-      </Col>
-      <Col :span="6">
-      <panel>
-        <light-matrix :list="fjmap" />
-      </panel>
-      </Col>
-    </row>
+    <div class="first-info mg-t-16 mg-b-16" style="height:215px;">
+      <div style="flex:0 1 450px;">
+        <panel title="日度损失电量分析"></panel>
+      </div>
+      <div class="mg-l-16" style="flex:1 1 auto;" ref="lineChart">
+        <panel title="4小时功率曲线图">
+          <multiple-line-chart height="18.519vh" v-if="Powertrend" :list="Powertrend.value" :units="Powertrend.units" :showLegend="true" />
+        </panel>
+      </div>
+      <div class="mg-l-16" style="flex:0 0 400px;">
+        <panel class="light-matrix-panel">
+          <light-matrix :list="fjmap" />
+        </panel>
+      </div>
+    </div>
     <row>
       <Col :span="8">
-      <panel title="日度损失电量分析">
-        <dual-pie-chart :innerData="pieChartData.dayData" :outerData="pieChartData.dayData" height="21.296vh" />
-      </panel>
+        <panel title="日度损失电量分析">
+          <dual-pie-chart :innerData="pieChartData.dayData" :outerData="pieChartData.dayData" height="21.296vh" />
+        </panel>
       </Col>
       <Col :span="8">
-      <panel title="月度损失电量分析">
-        <dual-pie-chart :innerData="pieChartData.monthData" :outerData="pieChartData.monthData" height="21.296vh" />
-      </panel>
+        <panel title="月度损失电量分析">
+          <dual-pie-chart :innerData="pieChartData.monthData" :outerData="pieChartData.monthData" height="21.296vh" />
+        </panel>
       </Col>
       <Col :span="8">
-      <panel title="年度损失电量分析">
-        <dual-pie-chart :innerData="pieChartData.yearData" :outerData="pieChartData.yearData" height="21.296vh" />
-      </panel>
+        <panel title="年度损失电量分析">
+          <dual-pie-chart :innerData="pieChartData.yearData" :outerData="pieChartData.yearData" height="21.296vh" />
+        </panel>
       </Col>
     </row>
     <row>
       <Col :span="8">
-      <panel title="日度损失电量分析">
-        <hover-bar-chart :list="dayLost" height="21.296vh" />
-      </panel>
+        <panel title="日度损失电量分析">
+          <hover-bar-chart :list="dayLost" height="21.296vh" />
+        </panel>
       </Col>
       <Col :span="8">
-      <panel title="完成电量">
-        <multiple-bar-chart height="21.296vh" :list="CompleteElectricity.data" :units="CompleteElectricity.units" />
-      </panel>
+        <panel title="完成电量">
+          <multiple-bar-chart height="21.296vh" :list="CompleteElectricity.data" :units="CompleteElectricity.units" />
+        </panel>
       </Col>
       <Col :span="8">
-      <panel title="月发电量对比">
-        <normal-line-chart height="21.296vh" :list="MonthCompare.value" :units="MonthCompare.units" />
-      </panel>
+        <panel title="月发电量对比">
+          <normal-line-chart height="21.296vh" :list="MonthCompare.value" :units="MonthCompare.units" />
+        </panel>
       </Col>
     </row>
   </div>
@@ -245,7 +245,7 @@ export default {
   // 使用组件
   components: { WindSiteWeather, Row, Col, Panel, DualPieChart, MultipleLineChart, Panel3, SvgIcon, HoverBarChart, MultipleBarChart, NormalLineChart, LightMatrix, BtnGroupDouble },
   // 数据
-  data () {
+  data() {
     return {
       timmer: null, // 计时器
       fjmap: [], // 分机矩阵
@@ -257,20 +257,26 @@ export default {
       // 饼图数据
       pieChartData: {
         // 日度
-        dayData: [{
-          title: "",
-          value: []
-        }],
+        dayData: [
+          {
+            title: "",
+            value: [],
+          },
+        ],
         // 月度
-        monthData: [{
-          title: "",
-          value: []
-        }],
+        monthData: [
+          {
+            title: "",
+            value: [],
+          },
+        ],
         // 年度
-        yearData: [{
-          title: "",
-          value: []
-        }],
+        yearData: [
+          {
+            title: "",
+            value: [],
+          },
+        ],
       },
       // 完成电量
       CompleteElectricity: {
@@ -291,10 +297,12 @@ export default {
 
       // 4小时功率曲线图
       Powertrend: {
-        value: [{
-          title: "",
-          value: []
-        }]
+        value: [
+          {
+            title: "",
+            value: [],
+          },
+        ],
       },
 
       // 月发电量对比
@@ -318,7 +326,7 @@ export default {
   // 函数
   methods: {
     // 根据风机状态码返回对应 class
-    getColor (fjzt) {
+    getColor(fjzt) {
       switch (fjzt) {
         case 0:
           return "green";
@@ -344,7 +352,7 @@ export default {
       }
     },
     // 请求服务
-    requestData (showLoading) {
+    requestData(showLoading) {
       this.requestWpInfo(showLoading);
       this.requestLoss(showLoading);
       this.requestPower(showLoading);
@@ -352,7 +360,7 @@ export default {
     },
 
     // 获取场站监视数据
-    requestWpInfo (showLoading) {
+    requestWpInfo(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
@@ -361,7 +369,7 @@ export default {
         data: {
           wpId: that.wpId,
         },
-        success (res) {
+        success(res) {
           if (res.data) {
             let fjmap = [];
             let keys = ["value1", "value2", "value3", "value4", "value5", "value6", "value7", "value9"];
@@ -503,7 +511,7 @@ export default {
     },
 
     // 获取日度损失电量分析
-    requestLoss (showLoading) {
+    requestLoss(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
@@ -512,7 +520,7 @@ export default {
         data: {
           wpId: that.wpId,
         },
-        success (res) {
+        success(res) {
           let dayLost = [];
           res.data.forEach((ele) => {
             dayLost.push({
@@ -526,7 +534,7 @@ export default {
     },
 
     // 获取完成电量
-    requestPower (showLoading) {
+    requestPower(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
@@ -535,17 +543,17 @@ export default {
         data: {
           wpId: that.wpId,
         },
-        success (res) {
+        success(res) {
           let data = [
             {
               title: "发电量",
               yAxisIndex: 0,
-              value: []
+              value: [],
             },
             {
               title: "预测电量",
               yAxisIndex: 0,
-              value: []
+              value: [],
             },
           ];
 
@@ -566,7 +574,7 @@ export default {
     },
 
     // 获取月发电量对比
-    requestMonthPower (showLoading) {
+    requestMonthPower(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
@@ -575,7 +583,7 @@ export default {
         data: {
           wpId: that.wpId,
         },
-        success (res) {
+        success(res) {
           let data = [
             {
               title: "月发电量",
@@ -606,7 +614,7 @@ export default {
     },
   },
 
-  created () {
+  created() {
     let that = this;
     that.wpId = that.$route.query.wpId;
     that.$nextTick(() => {
@@ -618,9 +626,9 @@ export default {
     });
   },
 
-  mounted () { },
+  mounted() {},
 
-  unmounted () {
+  unmounted() {
     clearInterval(this.timmer);
     this.timmer = null;
   },
@@ -629,6 +637,10 @@ export default {
 
 <style lang="less">
 .wind-site-home {
+  .first-info {
+    display: flex;
+  }
+
   .wind-site-info {
     margin-left: 0.7407vh;
     flex: 1 0 auto;

src/views/WindSite/pages/Home/light-matrix.vue

@@ -15,23 +15,65 @@ export default {
   name: "LightMatrix1",
   // 使用组件
   components: {},
-
+  // 数据
   props: {
     list: {
       type: Array,
-      default: [
+      default: () => [
         // {
         //   tag: "A01",
         //   color: "gray",
-        // }
+        // },
       ],
     },
   },
-  // 数据
-  data() {
-    return {};
+  // 函数
+  methods: {
+    calculateWidth() {
+      if (this.list.length > 60 && this.list.length <= 72) {
+        this.$el.style.width = "440px";
+      } else if (this.list.length > 72 && this.list.length <= 88) {
+        this.$el.style.width = "540px";
+      } else if (this.list.length > 88 && this.list.length <= 96) {
+        this.$el.style.width = "600px";
+      } else if (this.list.length > 97 && this.list.length <= 112) {
+        this.$el.style.width = "680px";
+      } else if (this.list.length > 113 && this.list.length <= 128) {
+        this.$el.style.width = "780px";
+      } else if (this.list.length > 129 && this.list.length <= 144) {
+        this.$el.style.width = "880px";
+      } else if (this.list.length > 144 && this.list.length <= 168) {
+        this.$el.style.width = "1000px";
+      } else if (this.list.length > 168) {
+        this.$el.style.width = "1168px";
+      }
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+    this.$nextTick(() => {
+      this.calculateWidth();
+    });
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+    this.$nextTick(() => {
+      this.calculateWidth();
+    });
   },
-  methods: {},
 };
 </script>
 
@@ -47,8 +89,7 @@ export default {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  justify-content: space-between;
-  align-content: space-around;
+  align-content: flex-start;
 
   .blank {
     margin-right: 4px;

src/views/WindSite/pages/Info/Base-Info.vue

@@ -6,23 +6,23 @@
         <span class="svg-icon svg-icon-green mg-r-8">
           <svg-icon class="" :svgid="'svg-normal-power'" />
         </span>
-        {{sourceMap.code}}
+        {{ sourceMap.code }}
       </div>
       <div class="wind-site-tag">
         <div class="tag-text">所属线路</div>
-        <div class="tag-value">{{sourceMap.lnname}}</div>
+        <div class="tag-value">{{ sourceMap.lnname }}</div>
       </div>
       <div class="wind-site-tag">
         <div class="tag-text">机型</div>
-        <div class="tag-value">{{sourceMap.lnname}}</div>
+        <div class="tag-value">{{ sourceMap.lnname }}</div>
       </div>
       <div class="wind-site-tag">
         <div class="tag-text">告警时间</div>
-        <div class="tag-value">{{sourceMap.gxkmap && sourceMap.gxkmap.bjsj}}</div>
+        <div class="tag-value">{{ sourceMap.gxkmap && sourceMap.gxkmap.bjsj }}</div>
       </div>
       <div class="wind-site-tag">
         <div class="tag-text">告警内容</div>
-        <div class="tag-value">{{sourceMap.gxkmap && sourceMap.gxkmap.bjmc}}</div>
+        <div class="tag-value">{{ sourceMap.gxkmap && sourceMap.gxkmap.bjmc }}</div>
       </div>
     </el-row>
     <!-- 发电信息 -->
@@ -31,23 +31,23 @@
         <el-row class="generation background pd-8 mg-r-8">
           <div class="mg-r-8">
             <div class="generation-text">日发电量</div>
-            <div class="generation-value green">{{sourceMap.jczbmap && sourceMap.jczbmap.RFDL}}<span class="unit">kwh</span></div>
+            <div class="generation-value green">{{ sourceMap.jczbmap && sourceMap.jczbmap.RFDL }}<span class="unit">kwh</span></div>
           </div>
           <el-row class="wind-site-state">
             <el-col :span="6">
-              <div class="value">{{sourceMap.jczbmap && sourceMap.jczbmap.FJKYL}}</div>
+              <div class="value">{{ sourceMap.jczbmap && sourceMap.jczbmap.FJKYL }}</div>
               <div class="text">月可利用率</div>
             </el-col>
             <el-col :span="6">
-              <div class="value">{{sourceMap.gxkmap && sourceMap.gxkmap.ygzxs}}</div>
+              <div class="value">{{ sourceMap.gxkmap && sourceMap.gxkmap.ygzxs }}</div>
               <div class="text">月故障小时数</div>
             </el-col>
             <el-col :span="6">
-              <div class="value">{{sourceMap.gxkmap && sourceMap.gxkmap.ytjxs}}</div>
+              <div class="value">{{ sourceMap.gxkmap && sourceMap.gxkmap.ytjxs }}</div>
               <div class="text">月待机小时数</div>
             </el-col>
             <el-col :span="6">
-              <div class="value">{{sourceMap.gxkmap && sourceMap.gxkmap.yyxxs}}</div>
+              <div class="value">{{ sourceMap.gxkmap && sourceMap.gxkmap.yyxxs }}</div>
               <div class="text">月发电小时数</div>
             </el-col>
           </el-row>
@@ -77,31 +77,31 @@
             <table class="table-form">
               <tr>
                 <td class="text gray">U1绕组温度</td>
-                <td class="value green">{{sourceMap.fdjmap && sourceMap.fdjmap.U1YZWD}}</td>
+                <td class="value green">{{ sourceMap.fdjmap && sourceMap.fdjmap.U1YZWD }}</td>
                 <td class="unit gray">℃</td>
                 <td class="text gray">V1绕组温度</td>
-                <td class="value green">{{sourceMap.fdjmap && sourceMap.fdjmap.V1YZWD}}</td>
+                <td class="value green">{{ sourceMap.fdjmap && sourceMap.fdjmap.V1YZWD }}</td>
                 <td class="unit gray">℃</td>
               </tr>
               <tr>
                 <td class="text gray">W1绕组温度</td>
-                <td class="value green">{{sourceMap.fdjmap && sourceMap.fdjmap.W1YZWD}}</td>
+                <td class="value green">{{ sourceMap.fdjmap && sourceMap.fdjmap.W1YZWD }}</td>
                 <td class="unit gray">℃</td>
                 <td class="text gray">发电机轴承A温度</td>
-                <td class="value green">{{sourceMap.fdjmap && sourceMap.fdjmap.FDJZCAWD}}</td>
+                <td class="value green">{{ sourceMap.fdjmap && sourceMap.fdjmap.FDJZCAWD }}</td>
                 <td class="unit gray">℃</td>
               </tr>
               <tr>
                 <td class="text gray">发电机轴承B温度</td>
-                <td class="value green">{{sourceMap.fdjmap && sourceMap.fdjmap.FDJZCBWD}}</td>
+                <td class="value green">{{ sourceMap.fdjmap && sourceMap.fdjmap.FDJZCBWD }}</td>
                 <td class="unit gray">℃</td>
                 <td class="text gray">发电机冷却风温度</td>
-                <td class="value green">{{sourceMap.fdjmap && sourceMap.fdjmap.FDJLQFWD}}</td>
+                <td class="value green">{{ sourceMap.fdjmap && sourceMap.fdjmap.FDJLQFWD }}</td>
                 <td class="unit gray">℃</td>
               </tr>
               <tr>
                 <td class="text gray">发电机滑环温度</td>
-                <td class="value green">{{sourceMap.fdjmap && sourceMap.fdjmap.FDJHHWD}}</td>
+                <td class="value green">{{ sourceMap.fdjmap && sourceMap.fdjmap.FDJHHWD }}</td>
                 <td class="unit gray">℃</td>
                 <td class="text gray"></td>
                 <td class="value green"></td>
@@ -122,26 +122,26 @@
             <table class="table-form">
               <tr>
                 <td class="text gray">润滑油滤网入口压力</td>
-                <td class="value green">{{sourceMap.clxmap && sourceMap.clxmap.RHYLWRKYL}}</td>
+                <td class="value green">{{ sourceMap.clxmap && sourceMap.clxmap.RHYLWRKYL }}</td>
                 <td class="unit gray">Kw</td>
                 <td class="text gray">润滑油滤网出口压力</td>
-                <td class="value green">{{sourceMap.clxmap && sourceMap.clxmap.RHYLWCKYL}}</td>
+                <td class="value green">{{ sourceMap.clxmap && sourceMap.clxmap.RHYLWCKYL }}</td>
                 <td class="unit gray">Kw</td>
               </tr>
               <tr>
                 <td class="text gray">齿轮箱输入轴1温度</td>
-                <td class="value green">{{sourceMap.clxmap && sourceMap.clxmap.CLXSRZ1WD}}</td>
+                <td class="value green">{{ sourceMap.clxmap && sourceMap.clxmap.CLXSRZ1WD }}</td>
                 <td class="unit gray">℃</td>
                 <td class="text gray">齿轮箱输入轴2温度</td>
-                <td class="value green">{{sourceMap.clxmap && sourceMap.clxmap.CLXSRZ2WD}}</td>
+                <td class="value green">{{ sourceMap.clxmap && sourceMap.clxmap.CLXSRZ2WD }}</td>
                 <td class="unit gray">℃</td>
               </tr>
               <tr>
                 <td class="text gray">齿轮箱油温</td>
-                <td class="value green">{{sourceMap.clxmap && sourceMap.clxmap.CLXYW}}</td>
+                <td class="value green">{{ sourceMap.clxmap && sourceMap.clxmap.CLXYW }}</td>
                 <td class="unit gray">℃</td>
                 <td class="text gray">齿轮箱入口油温</td>
-                <td class="value green">{{sourceMap.clxmap && sourceMap.clxmap.CLXRKYW}}</td>
+                <td class="value green">{{ sourceMap.clxmap && sourceMap.clxmap.CLXRKYW }}</td>
                 <td class="unit gray">℃</td>
               </tr>
             </table>
@@ -159,26 +159,26 @@
             <table class="table-form">
               <tr>
                 <td class="text gray">U1项绕组电流</td>
-                <td class="value green">{{sourceMap.bjmap && sourceMap.bjmap.U1YZDL}}</td>
+                <td class="value green">{{ sourceMap.bjmap && sourceMap.bjmap.U1YZDL }}</td>
                 <td class="unit gray">A</td>
                 <td class="text gray">U2项绕组电流</td>
-                <td class="value green">{{sourceMap.bjmap && sourceMap.bjmap.U2YZDL}}</td>
+                <td class="value green">{{ sourceMap.bjmap && sourceMap.bjmap.U2YZDL }}</td>
                 <td class="unit gray">A</td>
               </tr>
               <tr>
                 <td class="text gray">U3项绕组电流</td>
-                <td class="value green">{{sourceMap.bjmap && sourceMap.bjmap.U3YZDL}}</td>
+                <td class="value green">{{ sourceMap.bjmap && sourceMap.bjmap.U3YZDL }}</td>
                 <td class="unit gray">A</td>
                 <td class="text gray">U1项绕组电压</td>
-                <td class="value green">{{sourceMap.bjmap && sourceMap.bjmap.U1YZDY}}</td>
+                <td class="value green">{{ sourceMap.bjmap && sourceMap.bjmap.U1YZDY }}</td>
                 <td class="unit gray">V</td>
               </tr>
               <tr>
                 <td class="text gray">U2项绕组电压</td>
-                <td class="value green">{{sourceMap.bjmap && sourceMap.bjmap.U2YZDY}}</td>
+                <td class="value green">{{ sourceMap.bjmap && sourceMap.bjmap.U2YZDY }}</td>
                 <td class="unit gray">V</td>
                 <td class="text gray">U2项绕组电压</td>
-                <td class="value green">{{sourceMap.bjmap && sourceMap.bjmap.U3YZDY}}</td>
+                <td class="value green">{{ sourceMap.bjmap && sourceMap.bjmap.U3YZDY }}</td>
                 <td class="unit gray">V</td>
               </tr>
             </table>
@@ -198,10 +198,10 @@
             <table class="table-form">
               <tr>
                 <td class="text gray">对风角度</td>
-                <td class="value green">{{sourceMap.phmap && sourceMap.phmap.DFJD}}</td>
+                <td class="value green">{{ sourceMap.phmap && sourceMap.phmap.DFJD }}</td>
                 <td class="unit gray">度</td>
                 <td class="text gray">偏航位置</td>
-                <td class="value green">{{sourceMap.phmap && sourceMap.phmap.PHWZ}}</td>
+                <td class="value green">{{ sourceMap.phmap && sourceMap.phmap.PHWZ }}</td>
                 <td class="unit gray">度</td>
               </tr>
             </table>
@@ -219,18 +219,18 @@
             <table class="table-form">
               <tr>
                 <td class="text gray">液压系统油压</td>
-                <td class="value green">{{sourceMap.yymap && sourceMap.yymap.YYXTYY}}</td>
+                <td class="value green">{{ sourceMap.yymap && sourceMap.yymap.YYXTYY }}</td>
                 <td class="unit gray">Pa</td>
                 <td class="text gray">转子刹车系统液压</td>
-                <td class="value green">{{sourceMap.yymap && sourceMap.yymap.ZZSCXTYY}}</td>
+                <td class="value green">{{ sourceMap.yymap && sourceMap.yymap.ZZSCXTYY }}</td>
                 <td class="unit gray">Pa</td>
               </tr>
               <tr>
                 <td class="text gray">液压油温</td>
-                <td class="value green">{{sourceMap.yymap && sourceMap.yymap.YYYW}}</td>
+                <td class="value green">{{ sourceMap.yymap && sourceMap.yymap.YYYW }}</td>
                 <td class="unit gray">℃</td>
                 <td class="text gray">液压系统油压</td>
-                <td class="value green">{{sourceMap.yymap && sourceMap.yymap.FDJLQSWD}}</td>
+                <td class="value green">{{ sourceMap.yymap && sourceMap.yymap.FDJLQSWD }}</td>
                 <td class="unit gray">Pa</td>
               </tr>
             </table>
@@ -254,10 +254,10 @@ export default {
     },
     data: {
       type: Object,
-      default: () => { },
+      default: () => {},
     },
   },
-  data () {
+  data() {
     return {
       sourceMap: {},
       // 功率复核数据
@@ -283,15 +283,15 @@ export default {
   },
   methods: {},
 
-  mounted () {
+  mounted() {
     this.sourceMap = this.data;
   },
 
   watch: {
-    data (value) {
+    data(value) {
       this.sourceMap = value;
-    }
-  }
+    },
+  },
 };
 </script>
 

src/views/WindSite/pages/Info/Info.vue

@@ -8,8 +8,7 @@
     </div>
     <div class="wind-site-info-body">
       <div class="info-menu mg-b-16">
-        <div class="info-menu-item" v-for="(item, index) in InfoBtns.data" :key="item" :class="{ active: InfoBtns.activeIndex == index }"
-          @click="onInfoMenuItemClick(item, index)">{{ item.text }}</div>
+        <div class="info-menu-item" v-for="(item, index) in InfoBtns.data" :key="item" :class="{ active: InfoBtns.activeIndex == index }" @click="onInfoMenuItemClick(item, index)">{{ item.text }}</div>
       </div>
       <el-row>
         <el-col :span="16" class="pd-r-16" style="text-align: center;">
@@ -44,7 +43,7 @@ export default {
       default: "",
     },
   },
-  data () {
+  data() {
     return {
       timmer: null, // 计时器
       wtId: "", // 风机ID
@@ -92,16 +91,16 @@ export default {
   },
 
   methods: {
-    onInfoMenuItemClick (item, index) {
+    onInfoMenuItemClick(item, index) {
       this.InfoBtns.activeIndex = index;
     },
 
-    selectSvg (index) {
+    selectSvg(index) {
       this.InfoBtns.activeIndex = index;
     },
 
     // 根据风机状态码返回对应 class
-    getColor (fjzt) {
+    getColor(fjzt) {
       switch (fjzt) {
         case 0:
           return "green";
@@ -128,37 +127,37 @@ export default {
     },
 
     // 请求服务
-    requestData (showLoading) {
+    requestData(showLoading) {
       this.getSimpleMatrixAll(showLoading);
     },
 
     // 获取场列表
-    getSimpleMatrixAll (showLoading) {
+    getSimpleMatrixAll(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
         method: "POST",
         subUrl: "matrix/findSimpleMatrixAll",
         data: {
-          wpId: "MHS_FDC"
+          wpId: "MHS_FDC",
         },
-        success (res) {
+        success(res) {
           let WindSites = [];
 
           res.data.forEach((ele, index) => {
             WindSites.push({
               id: String(index),
               text: ele.wpName,
-              children: []
+              children: [],
             });
           });
 
           res.data.forEach((pEle, pIndex) => {
-            pEle.fjls[0].forEach(cEle => {
+            pEle.fjls[0].forEach((cEle) => {
               WindSites[pIndex].children.push({
                 id: cEle.wtId,
                 text: cEle.wtnum,
-                color: that.getColor(cEle.fjzt)
+                color: that.getColor(cEle.fjzt),
               });
             });
           });
@@ -169,49 +168,49 @@ export default {
             that.wtId = that.wtId || res.data[0].fjls[0][0].wtId;
             that.getWtInfo();
           }
-        }
+        },
       });
     },
 
     // 获取风机信息
-    getWtInfo () {
+    getWtInfo() {
       let that = this;
       that.API.requestData({
         method: "POST",
         subUrl: "monitorwt/findWtInfo",
         data: {
-          wtId: that.wtId
+          wtId: that.wtId,
         },
-        success (res) {
+        success(res) {
           that.sourceMap = res.data;
           that.getWarnInfo();
-        }
+        },
       });
     },
 
     // 获取报警信息
-    getWarnInfo () {
+    getWarnInfo() {
       let that = this;
       that.API.requestData({
         method: "POST",
         subUrl: "monitorwt/findWtWarnInfo",
         data: {
-          wtId: that.wtId
+          wtId: that.wtId,
         },
-        success (res) {
+        success(res) {
           that.WarnData = res.data;
-        }
+        },
       });
     },
 
     // 点击左侧菜单
-    clickMenu (res) {
+    clickMenu(res) {
       this.wtId = res.id;
       this.getWtInfo();
-    }
+    },
   },
 
-  created () {
+  created() {
     let that = this;
     that.$nextTick(() => {
       that.requestData(false);
@@ -221,7 +220,7 @@ export default {
     });
   },
 
-  unmounted () {
+  unmounted() {
     clearInterval(this.timmer);
     this.timmer = null;
   },

src/views/WindSite/pages/Info/Warning.vue

@@ -10,8 +10,7 @@
         <button class="btn empty-btn" @click="reset">重置</button>
       </el-row>
       <el-row class="options">
-        <el-col class="option-item" :span="8" v-for="(option, index) in options" :key="option" @click="onOptionClick(option, index)"
-          :class="{ active: option.isActive, 'has-value': option.count != '' }">
+        <el-col class="option-item" :span="8" v-for="(option, index) in options" :key="option" @click="onOptionClick(option, index)" :class="{ active: option.isActive, 'has-value': option.count != '' }">
           <div class="count">{{ option.count }}</div>
           <div class="text">{{ option.text }}</div>
         </el-col>
@@ -29,7 +28,7 @@ export default {
   components: {
     Table,
   },
-  data () {
+  data() {
     return {
       query: "",
       options: [],
@@ -52,7 +51,7 @@ export default {
           {
             name: "报警状态",
             field: "data1",
-            template: function (data) {
+            template: function(data) {
               if (data === 1) return "<div class='error-state'></div>";
               else return "正常";
             },
@@ -68,17 +67,17 @@ export default {
   props: {
     data: {
       type: Object,
-      default: () => { }
-    }
+      default: () => {},
+    },
   },
 
-  mounted () {
+  mounted() {
     this.backupData = this.BASE.deepCopy(this.data);
     this.riseData(this.data);
   },
 
   methods: {
-    onOptionClick (option, index) {
+    onOptionClick(option, index) {
       option.isActive = !option.isActive;
       this.activeArray[index] = !this.activeArray[index];
 
@@ -86,7 +85,7 @@ export default {
 
       this.activeArray.forEach((bool, index) => {
         if (bool) {
-          this.options[index].vos.forEach(ele => {
+          this.options[index].vos.forEach((ele) => {
             warningData.push(ele);
           });
         }
@@ -98,7 +97,7 @@ export default {
     },
 
     // 格式化数据
-    riseData (data) {
+    riseData(data) {
       let options = [];
       let warningData = [];
       let index = 0;
@@ -106,7 +105,7 @@ export default {
       for (let key in data) {
         data.index = index;
 
-        if (this.activeArray.length < (index + 1)) {
+        if (this.activeArray.length < index + 1) {
           this.activeArray.push(false);
         }
 
@@ -115,11 +114,11 @@ export default {
           text: data[key].name,
           vos: data[key].vos,
           count: data[key].vos.length,
-          isActive: this.activeArray[index]
+          isActive: this.activeArray[index],
         });
 
         if (this.activeArray[index]) {
-          data[key].vos.forEach(ele => {
+          data[key].vos.forEach((ele) => {
             warningData.push(ele);
           });
         }
@@ -135,24 +134,23 @@ export default {
       }
     },
 
-    search () {
+    search() {
       // 压器类总
       this.isSearch = true;
       if (this.query) {
         let warningData = [];
-        this.BASE.deepCopy(this.warning.data).forEach(ele => {
+        this.BASE.deepCopy(this.warning.data).forEach((ele) => {
           if (ele.name.indexOf(this.query) !== -1) {
             warningData.push(ele);
           }
         });
         this.warning.data = warningData;
       } else {
-        this.riseData(this.data)
+        this.riseData(this.data);
       }
     },
 
-    reset () {
-
+    reset() {
       for (let i = 0; i < this.activeArray.length; i++) {
         this.activeArray[i] = false;
       }
@@ -161,15 +159,15 @@ export default {
       this.query = "";
       let sourceMap = this.BASE.deepCopy(this.backupData);
       this.riseData(sourceMap, true);
-    }
+    },
   },
 
   watch: {
-    data (res) {
+    data(res) {
       this.backupData = this.BASE.deepCopy(res);
       this.riseData(res);
-    }
-  }
+    },
+  },
 };
 </script>
 

src/views/WindSite/pages/Tower.vue

@@ -14,7 +14,7 @@
         <DirectionRadarChart width="70%" height="152px" :value="rmgtmap" />
         <div class="legend">
           <span class="dot bg-purple"></span>
-          <span>{{rmgtTitle || ""}}</span>
+          <span>{{ rmgtTitle || "" }}</span>
         </div>
       </div>
     </Panel>
@@ -23,7 +23,7 @@
         <DirectionRadarChart width="70%" height="152px" :value="ymgtmap" />
         <div class="legend">
           <span class="dot bg-purple"></span>
-          <span>{{ymgtTitle || ""}}</span>
+          <span>{{ ymgtTitle || "" }}</span>
         </div>
       </div>
     </Panel>
@@ -92,7 +92,7 @@ export default {
   // 自定义事件
   emits: {},
   // 数据
-  data () {
+  data() {
     return {
       timmer: null, // 计时器
       cftmap: {},
@@ -102,9 +102,9 @@ export default {
         data: [
           {
             value: [44200, 14200, 20000, 35000, 50000, 38000],
-            name: ""
-          }
-        ]
+            name: "",
+          },
+        ],
       },
       rmgtTitle: "",
       ymgtmap: {
@@ -112,36 +112,38 @@ export default {
         data: [
           {
             value: [44200, 14200, 20000, 35000, 50000, 38000],
-            name: ""
-          }
-        ]
+            name: "",
+          },
+        ],
       },
       ymgtTitle: "",
       // 日发电量
       Powertrend: {
         // 图表所用单位
         units: [""],
-        value: [{
-          title: "",
-          yAxisIndex: 0, // 使用单位
-          value: []
-        }],
-      }
+        value: [
+          {
+            title: "",
+            yAxisIndex: 0, // 使用单位
+            value: [],
+          },
+        ],
+      },
     };
   },
   // 函数
   methods: {
     // 请求服务
-    requestData (showLoading) {
+    requestData(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
         method: "POST",
         subUrl: "monitor/findCftInfo",
         data: {
-          wpId: "MHS_FDC"
+          wpId: "MHS_FDC",
         },
-        success (res) {
+        success(res) {
           let rmgtmap = {
             indicator: [],
             data: [
@@ -162,12 +164,12 @@ export default {
             ],
           };
 
-          res.data.rmgtmap.data.forEach(ele => {
+          res.data.rmgtmap.data.forEach((ele) => {
             rmgtmap.indicator.push(ele.name);
             rmgtmap.data[0].value.push(ele.data1);
           });
 
-          res.data.ymgtmap.data.forEach(ele => {
+          res.data.ymgtmap.data.forEach((ele) => {
             ymgtmap.indicator.push(ele.name);
             ymgtmap.data[0].value.push(ele.data1);
           });
@@ -183,54 +185,62 @@ export default {
 
           let Powertrend = {
             units,
-            value: [{
-              title: "应发功率",
-              yAxisIndex: 0, // 使用单位
-              value: []
-            }, {
-              title: "实发功率",
-              yAxisIndex: 0, // 使用单位
-              value: []
-            }, {
-              title: "理论功率",
-              yAxisIndex: 0, // 使用单位
-              value: []
-            }, {
-              title: "预测功率",
-              yAxisIndex: 0, // 使用单位
-              value: []
-            }, {
-              title: "保证功率",
-              yAxisIndex: 0, // 使用单位
-              value: []
-            }, {
-              title: "保证功率",
-              yAxisIndex: 0, // 使用单位
-              value: []
-            }, {
-              title: "平均风速",
-              yAxisIndex: 1, // 使用单位
-              value: []
-            }]
+            value: [
+              {
+                title: "应发功率",
+                yAxisIndex: 0, // 使用单位
+                value: [],
+              },
+              {
+                title: "实发功率",
+                yAxisIndex: 0, // 使用单位
+                value: [],
+              },
+              {
+                title: "理论功率",
+                yAxisIndex: 0, // 使用单位
+                value: [],
+              },
+              {
+                title: "预测功率",
+                yAxisIndex: 0, // 使用单位
+                value: [],
+              },
+              {
+                title: "保证功率",
+                yAxisIndex: 0, // 使用单位
+                value: [],
+              },
+              {
+                title: "保证功率",
+                yAxisIndex: 0, // 使用单位
+                value: [],
+              },
+              {
+                title: "平均风速",
+                yAxisIndex: 1, // 使用单位
+                value: [],
+              },
+            ],
           };
 
           keyArray.forEach((key, keyIndex) => {
-            res.data.glvos.forEach(ele => {
+            res.data.glvos.forEach((ele) => {
               Powertrend.value[keyIndex].value.push({
                 text: new Date(ele.time).formatDate("hh:mm"),
                 value: ele[key],
-              })
+              });
             });
           });
 
           that.cftmap = res.data.cftmap;
           that.Powertrend = Powertrend;
-        }
+        },
       });
     },
   },
 
-  created () {
+  created() {
     let that = this;
     that.$nextTick(() => {
       that.requestData(false);
@@ -240,7 +250,7 @@ export default {
     });
   },
 
-  unmounted () {
+  unmounted() {
     clearInterval(this.timmer);
     this.timmer = null;
   },

src/views/layout/Header.vue

@@ -68,7 +68,7 @@ export default {
         },
       ],
       activeIndex: 0,
-     /* menusDropdown: [
+      /* menusDropdown: [
         {
           text: "子菜单1",
           code: "submenu1",

src/views/layout/Menu.vue

@@ -3,9 +3,11 @@
     <ul class="menu-list">
       <li class="menu-item" v-for="(menu, index) of currentMenu" :key="menu" @click="click(index)" :class="{ active: activeIndex == index }" @mouseenter="subMenuShow(menu.children, index)">
         <router-link v-if="!menu.children" :to="{ path: menu.path, query: { root: currRoot } }">
-          <div class="menu-icon svg-icon" :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'">
-            <SvgIcon :svgid="menu.icon"></SvgIcon>
-          </div>
+          <el-tooltip class="item" effect="dark" :content="menu.text" placement="right" :show-after="500">
+            <div class="menu-icon svg-icon" :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'">
+              <SvgIcon :svgid="menu.icon"></SvgIcon>
+            </div>
+          </el-tooltip>
         </router-link>
         <div v-if="menu.children" class="sub-menu-item">
           <div class="menu-icon svg-icon" :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'">
@@ -57,22 +59,22 @@ export default {
             },
             {
               text: "风场明细矩阵",
-              icon: "svg-matrix",
+              icon: "svg-mx-matrix",
               path: "/lightmatrix2",
             },
             {
               text: "欠发矩阵",
-              icon: "svg-matrix",
+              icon: "svg-qf-matrix",
               path: "/lightmatrix3",
             },
             {
               text: "光伏明细矩阵",
-              icon: "svg-matrix",
+              icon: "svg-gf-matrix",
               path: "/lightmatrix",
             },
-           {
+            {
               text: "状态监视",
-              icon: "svg-periodic-line",
+              icon: "svg-state-watch",
               path: "/status",
             },
             {
@@ -80,32 +82,10 @@ export default {
               icon: "svg-agc",
               path: "/agc",
             },
-          /*   {
+            /*   {
               text: "网络",
               icon: "svg-agc",
-              path: "/",
-              children: [
-                {
-                  text: "矩阵2",
-                  icon: "svg-matrix",
-                  path: "/lightmatrix2",
-                },
-                {
-                  text: "矩阵3",
-                  icon: "svg-matrix",
-                  path: "/lightmatrix3",
-                },
-              ],
-            },
-            {
-              text: "温度点",
-              icon: "svg-temperature",
-              path: "/",
-            },
-            {
-              text: "天气",
-              icon: "svg-weather",
-              path: "/",
+              path: "/agc",
             },
             {
               text: "风场",
@@ -163,6 +143,21 @@ export default {
               text: "健康管理4",
               icon: "svg-wind-site",
               path: "/health4",
+            },
+            {
+              text: "健康管理5",
+              icon: "svg-wind-site",
+              path: "/health5",
+            },
+            {
+              text: "健康管理6",
+              icon: "svg-wind-site",
+              path: "/health6",
+            },
+            {
+              text: "健康管理7",
+              icon: "svg-wind-site",
+              path: "/health7",
             },*/
           ],
         },