健康矩阵列表

src/views/HealthControl/Health5.vue

@@ -2,43 +2,45 @@
   <div class="health-5">
     <!-- 当内容超出页面时 添加 scroll 即可自动添加滚动条 -->
     <div class="health-matrix scroll">
-      <div class="health-matrix-panel" v-for="index of 6" :key="index">
+      <div class="health-matrix-panel" v-for="(item, index) in stationsList" :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>
+          <span class="title">{{item.name}}健康矩阵列表</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 class="legend-value">{{item.lhsl}}</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 class="legend-value">{{item.zcsl}}</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 class="legend-value">{{item.zysl}}</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 class="legend-value">{{item.yzsl}}</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 class="item" v-for="(ele, num) in windturbineList[index]" :key="num"> 
+              <div v-if="parseInt(ele.fjzt) == 1" class="green">{{ele.wtnum}}号</div>
+              <div v-if="parseInt(ele.fjzt) == 2" class="purple">{{ele.wtnum}}号</div>
+              <div v-if="parseInt(ele.fjzt) == 3" class="yellow">{{ele.wtnum}}号</div>
+              <div v-if="parseInt(ele.fjzt) == 4" class="orange">{{ele.wtnum}}号</div>
+            </div>
+            <div class="blank" v-for="index of 25" :key="index"></div> 
+          </div> 
         </div>
       </div>
     </div>
@@ -51,8 +53,39 @@ export default {
   setup() {},
   components: { SvgIcon },
   data() {
-    return {};
+    return {
+      stationsList:[], 
+      windturbineList:[]
+    };
   },
+  created(){
+    this.getHealthMatrix()
+  },
+  methods:{
+    // 健康矩阵数据
+    getHealthMatrix() {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "healthmain/findHealthMatrixMap",
+        success(res) {
+          if (res.code == 200) {
+            //以下解析顺序不可变
+            that.stationsList.push(res.data.fczbmap.NSS_FDC)
+            that.stationsList.push(res.data.fczbmap.XS_FDC)
+            that.stationsList.push(res.data.fczbmap.SBQ_FDC)
+            that.stationsList.push(res.data.fczbmap.QS_FDC)
+            that.stationsList.push(res.data.fczbmap.MHS_FDC)
+            that.windturbineList.push(res.data.fjmap[1]) //牛首山
+            that.windturbineList.push(res.data.fjmap[4]) //香山
+            that.windturbineList.push(res.data.fjmap[3]) //石板泉
+            that.windturbineList.push(res.data.fjmap[2]) //青山
+            that.windturbineList.push(res.data.fjmap[0]) //麻黄山
+          }
+        },
+      });
+    },
+  }
 };
 </script>
 
@@ -143,6 +176,12 @@ export default {
           border-color: @purple;
         }
 
+        &.yellow {
+          color: @yellow;
+          background: fade(@yellow, 20);
+          border-color: @yellow;
+        }
+
         &.orange {
           color: @orange;
           background: fade(@orange, 20);

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

@@ -106,25 +106,18 @@ export default {
       switch (fjzt) {
         case 0:
           return "green";
-          break;
         case 1:
           return "blue";
-          break;
         case 2:
           return "red";
-          break;
         case 3:
           return "gray";
-          break;
         case 4:
           return "orange";
-          break;
         case 5:
           return "purple";
-          break;
         case 6:
           return "write";
-          break;
       }
     },
 
@@ -206,6 +199,21 @@ export default {
       });
     },
 
+    // 获取部件对应的测点信息
+    getWidgetInfo() {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "monitorwt/findWtInfo",
+        data: {
+          wtId: that.wtId,
+        },
+        success(res) {
+          console.log('====' + res.data)
+        },
+      });
+    },
+
     // 点击左侧菜单
     clickMenu(res) {
       this.wtId = res.id;
@@ -222,6 +230,7 @@ export default {
         that.requestData(false);
       }, that.$store.state.websocketTimeSec);
     });
+    that.getWidgetInfo()
   },
 
   unmounted() {

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

@@ -671,7 +671,8 @@ export default {
             this.line = true;
             this.circle = true;
             this.text = true;
-            this.hover = hIndex;
+            // this.hover = hIndex;
+            this.hover = this.activeIndex;
         },
         mouseout: function () {
             this.StandAloneCircle1 = false;