矩阵页面接口联调

src/api/cockpit/matrix/index.js

@@ -61,6 +61,15 @@ const matrixDetailPush = (query) => {
     method: "get",
   });
 };
+// 明细矩阵
+const matrixDetailPush1 = (query) => {
+  return request({
+    baseURL: process.env.VUE_APP_API,
+    // http://10.220.1.5:6060/matrix/HAdetailed?company=0&type=-1&wpid=
+    url: `matrix/HAdetailed?company=${query.company}&type=${query.type}&wpid=`,
+    method: "get",
+  });
+};
 // 单场矩阵
 const matrixSinglePush = (query) => {
   return request({
@@ -334,6 +343,7 @@ export default {
   findSimpleMatrixAll,
   findWtInfo,
   matrixDetailPush,
+  matrixDetailPush1,
   matrixSinglePush,
   matrixSinglePushFL,
   findWtWarnInfo,

src/views/IntegratedAlarm/DetailMatrix/index.vue

@@ -51,11 +51,7 @@
               <!-- <div class="status-end" style="height: 50px">
                                 <span style="margin-left: 5px">{{item.value1}}</span>
                             </div> -->
-              <div
-                class="status-end"
-                :class="{ active: item.value2 == fillFjzt }"
-                @click="handleClick(item.value2)"
-              >
+              <div class="status-end" @click="handleClick(item.sCode)">
                 <div class="matrix-status-left">
                   <i
                     class="svg-icon svg-icon-sm"
@@ -71,7 +67,7 @@
                 </div>
                 <div class="matrix-status-right">
                   <!-- {{ sourceMap[item.code1] }} -->
-                  {{ item.value1 || 0 }}
+                  {{ item.value1 }}
                 </div>
               </div>
               <!-- <div class="status-end" :class="{ active: item.value3 == fillFjzt }"
@@ -91,7 +87,6 @@
                                 </div>
                             </div> -->
             </div>
-
             <div
               style="
                 margin-left: 40px;
@@ -101,7 +96,7 @@
                 border: 1px solid #a6b8dd;
                 padding: 0;
               "
-              class="title-status"
+              class="title-status static"
             >
               <div class="status-first">
                 <div
@@ -128,7 +123,7 @@
                     margin: 0;
                   "
                 >
-                  <span>11.45</span>
+                  <span>{{ titleListZb.spped }}</span>
                   &nbsp;
                   <span>m/s</span>
                 </div>
@@ -142,7 +137,7 @@
                 border: 1px solid #a6b8dd;
                 padding: 0;
               "
-              class="title-status"
+              class="title-status static"
             >
               <div class="status-first">
                 <div
@@ -169,7 +164,7 @@
                     margin: 0;
                   "
                 >
-                  <span>1145.14</span>
+                  <span>{{ titleListZb.sjgl }}</span>
                   &nbsp;
                   <span>kW</span>
                 </div>
@@ -182,7 +177,7 @@
                 border: 1px solid #a6b8dd;
                 padding: 0;
               "
-              class="title-status"
+              class="title-status static"
             >
               <div class="status-first">
                 <div
@@ -208,7 +203,7 @@
                     margin: 0;
                   "
                 >
-                  <span>1145.14</span>
+                  <span>{{ titleListZb.llgl }}</span>
                   &nbsp;
                   <span>kW</span>
                 </div>
@@ -305,16 +300,31 @@
                 class="jzItem"
                 v-for="(val, indexe) in value.wtlist"
                 :key="indexe"
-                @click="handleLeftClick(val, value.czlx, value.wpid)"
               >
-                <div class="l xgyx"></div>
-                <div class="c">
-                  <img src="@assets/images/ugly.gif" />
+                <el-popover
+                  placement="top-start"
+                  title="预警信息"
+                  :width="200"
+                  trigger="hover"
+                  content="点击查看详情"
+                  v-if="val.isShowWarn"
+                >
+                  <template #reference>
+                    <div class="jzWarn" @click.stop="showWarnList(val)"></div>
+                  </template>
+                </el-popover>
+                <div class="l" :class="stateMap[val.status]"></div>
+                <div
+                  class="c"
+                  @click="handleLeftClick(val, value.czlx, value.wpid)"
+                >
+                  <img src="@assets/images/ugly.gif" v-if="val.status === 0" />
+                  <img src="@assets/images/ugly.png" v-else />
                 </div>
-                <div class="r xgyx">
+                <div class="r" :class="stateMap[val.status]">
                   <div class="zb">
                     <div class="name">{{ val.wtname }}</div>
-                    <div class="value">限功发电</div>
+                    <div class="value">{{ getStName(val.status) }}</div>
                     <!-- <div class="value">{{ mapping[val.status] }}</div> -->
                   </div>
                   <div class="zb">
@@ -326,14 +336,14 @@
                       {{
                         value.czlx == "-1"
                           ? val.transfer
-                            ? Number(val.rate)?.toFixed(2)
+                            ? Number(val.transfer)?.toFixed(2)
                             : "0.00"
                           : val.voltage
                           ? Number(val.voltage)?.toFixed(2)
                           : "0.00"
                       }}
                     </div>
-                    <div class="unit">°</div>
+                    <div class="unit">RPM</div>
                   </div>
                   <div class="zb">
                     <div class="key">
@@ -795,112 +805,145 @@ export default {
           icon2: "svg-unknown",
         },
       ],
+      stateMap: {
+        0: "zcyx",
+        2: "djzt",
+        1: "xgyx",
+        "-1": "txzd",
+        5: "zctj",
+        3: "gztj",
+        4: "dwgz",
+        7: "tjwh",
+        6: "tqtj",
+        9: "jhtj",
+        10: "qd",
+        8: "xgtj",
+        11: "jlzt",
+      },
       titleListNew: [
         {
+          sCode: 0,
           color: "zcyx",
           name: "正常运行",
           value1: "",
-          code: "djts",
+          code: "zcyxts",
           icon1: "svg-standby",
           icon2: "svg-manual",
         },
         {
+          sCode: 2,
           color: "djzt",
           name: "待机状态",
           value1: "",
-          code: "bwts",
+          code: "djztts",
           icon1: "svg-normal-power",
           icon2: "svg-drop-output",
         },
         {
+          sCode: 1,
           color: "xgyx",
           name: "限功运行",
           value1: "",
-          code: "gzts",
+          code: "xgyxts",
           icon1: "svg-gz-downtime",
           icon2: "svg-field-involved",
         },
         {
+          sCode: -1,
           color: "txzd",
-          name: "通讯终端",
+          name: "通讯中断",
           value1: "",
-          code: "jxts",
+          code: "txzdts",
           icon1: "svg-jx-downtime",
           icon2: "svg-field-involved",
         },
         {
+          sCode: 5,
           color: "zctj",
           name: "正常停机",
           value1: "",
-          code: "xdts",
+          code: "zctjts",
           icon1: "svg-limit-power",
           icon2: "svg-downtime",
         },
         {
+          sCode: 3,
           color: "gztj",
           name: "故障停机",
           value1: "",
-          code: "slts",
+          code: "gztjts",
           icon1: "svg-intranet-involvement",
           icon2: "svg-environment",
         },
         {
+          sCode: 4,
           color: "dwgz",
           name: "电网故障",
           value1: "",
-          code: "lxts",
+          code: "dwgzts",
           icon1: "svg-offline",
           icon2: "svg-unknown",
         },
         {
+          sCode: 7,
           color: "tjwh",
           name: "停机维护",
           value1: "",
-          code: "jlts",
+          code: "tjwhts",
           icon1: "svg-environment",
           icon2: "svg-environment",
         },
         {
+          sCode: 6,
           color: "tqtj",
           name: "天气停机",
           value1: "",
-          code: "qdts",
+          code: "tqtjts",
           icon1: "svg-unknown",
           icon2: "svg-unknown",
         },
         {
+          sCode: 9,
           color: "jhtj",
           name: "计划停机",
           value1: "",
-          code: "qdts",
+          code: "jhtjts",
           icon1: "svg-downtime",
           icon2: "svg-downtime",
         },
         {
+          sCode: 10,
           color: "qd",
           name: "启动",
           value1: "",
-          code: "qdts",
+          code: "qdztts",
           icon1: "svg-manual",
           icon2: "svg-manual",
         },
         {
+          sCode: 8,
           color: "xgtj",
           name: "限功停机",
           value1: "",
-          code: "qdts",
+          code: "xgtjts",
           icon1: "svg-photovoltaic",
           icon2: "svg-photovoltaic",
         },
         {
+          sCode: 11,
           color: "jlzt",
           name: "解缆状态",
           value1: "",
-          code: "qdts",
+          code: "jlztts",
           icon1: "svg-gf",
           icon2: "svg-gf",
         },
       ],
+      titleListZb: {
+        spped: 0,
+        llgl: 0,
+        sjgl: 0,
+      },
       //   右侧欠发标签
       unpaidList: [
         {
@@ -1142,8 +1185,8 @@ export default {
   },
 
   mounted() {
-    this.changeData(true, dataJson.data);
-    // this.requestData(true);
+    // this.changeData(true, dataJson.data);
+    this.requestData(true);
     // this.timmer = setInterval(() => {
     //     this.requestData(true);
     // }, 5000);
@@ -1155,6 +1198,13 @@ export default {
 
   // 函数
   methods: {
+    getStName(code) {
+      return (
+        this.titleListNew.find((ele) => {
+          return ele.sCode === code;
+        })?.name || ""
+      );
+    },
     showWarnList(val) {
       this.changeWind = val;
       this.warnDialog = true;
@@ -1240,7 +1290,7 @@ export default {
         // this.changeData(first, dataJson)
       }
       api
-        .matrixDetailPush({
+        .matrixDetailPush1({
           company:
             this.enterpriseIndex == "all"
               ? "0"
@@ -1254,13 +1304,18 @@ export default {
     },
 
     changeData(first, res) {
+      console.log(1122, res);
       if (Object.values(res.data).length) {
         let sourceMap = res.data;
         let windNumData = res.data.powerVos[0];
+
         this.titleListNew.forEach((it) => {
           it.value1 = windNumData[it.code];
         });
         this.sourceMap = sourceMap;
+        this.titleListZb.spped = res.data.powerVos[0].spped;
+        this.titleListZb.llgl = res.data.powerVos[0].llgl;
+        this.titleListZb.sjgl = res.data.powerVos[0].sjgl;
         if (first) {
           const tempWtArray = this.chunkArray(this.sourceMap.powerVos, 3);
           this.showMatrixList = tempWtArray[0];
@@ -1339,206 +1394,13 @@ export default {
         this.showMatrixList.forEach((item) => {
           item.wtlist = [];
         });
-        switch (this.fillFjzt) {
-          case "dj":
-            matrixList.forEach((val, index) => {
-              val.wtlist.forEach((item) => {
-                if (item.status === 0 || item.status === 1) {
-                  this.showMatrixList[index].wtlist.push(item);
-                }
-              });
-            });
-            break;
-          case "0":
-            matrixList.forEach((val, index) => {
-              val.wtlist.forEach((item) => {
-                if (item.status === 0) {
-                  this.showMatrixList[index].wtlist.push(item);
-                }
-              });
-            });
-            break;
-          case "1":
-            matrixList.forEach((val, index) => {
-              val.wtlist.forEach((item) => {
-                if (item.status === 1) {
-                  this.showMatrixList[index].wtlist.push(item);
-                }
-              });
-            });
-            break;
-
-          case "yx":
-            matrixList.forEach((val, index) => {
-              val.wtlist.forEach((item) => {
-                if (item.status === 2 || item.status === 3) {
-                  this.showMatrixList[index].wtlist.push(item);
-                }
-              });
-            });
-            break;
-          case "2":
-            matrixList.forEach((val, index) => {
-              val.wtlist.forEach((item) => {
-                if (item.status === 2) {
-                  this.showMatrixList[index].wtlist.push(item);
-                }
-              });
-            });
-            break;
-          case "3":
-            matrixList.forEach((val, index) => {
-              val.wtlist.forEach((item) => {
-                if (item.status === 3) {
-                  this.showMatrixList[index].wtlist.push(item);
-                }
-              });
-            });
-            break;
-
-          case "gz":
-            matrixList.forEach((val, index) => {
-              val.wtlist.forEach((item) => {
-                if (item.status === 4 || item.status === 5) {
-                  this.showMatrixList[index].wtlist.push(item);
-                }
-              });
-            });
-            break;
-          case "4":
-            matrixList.forEach((val, index) => {
-              val.wtlist.forEach((item) => {
-                if (item.status === 4) {
-                  this.showMatrixList[index].wtlist.push(item);
-                }
-              });
-            });
-            break;
-          case "5":
-            matrixList.forEach((val, index) => {
-              val.wtlist.forEach((item) => {
-                if (item.status === 5) {
-                  this.showMatrixList[index].wtlist.push(item);
-                }
-              });
-            });
-            break;
-
-          case "jx":
-            matrixList.forEach((val, index) => {
-              val.wtlist.forEach((item) => {
-                if (item.status === 6 || item.status === 7) {
-                  this.showMatrixList[index].wtlist.push(item);
-                }
-              });
-            });
-            break;
-          case "6":
-            matrixList.forEach((val, index) => {
-              val.wtlist.forEach((item) => {
-                if (item.status === 6) {
-                  this.showMatrixList[index].wtlist.push(item);
-                }
-              });
-            });
-            break;
-          case "7":
-            matrixList.forEach((val, index) => {
-              val.wtlist.forEach((item) => {
-                if (item.status === 7) {
-                  this.showMatrixList[index].wtlist.push(item);
-                }
-              });
-            });
-            break;
-
-          case "xd":
-            matrixList.forEach((val, index) => {
-              val.wtlist.forEach((item) => {
-                if (item.status === 8 || item.status === 9) {
-                  this.showMatrixList[index].wtlist.push(item);
-                }
-              });
-            });
-            break;
-          case "8":
-            matrixList.forEach((val, index) => {
-              val.wtlist.forEach((item) => {
-                if (item.status === 8) {
-                  this.showMatrixList[index].wtlist.push(item);
-                }
-              });
-            });
-            break;
-          case "9":
-            matrixList.forEach((val, index) => {
-              val.wtlist.forEach((item) => {
-                if (item.status === 9) {
-                  this.showMatrixList[index].wtlist.push(item);
-                }
-              });
-            });
-            break;
-
-          case "sl":
-            matrixList.forEach((val, index) => {
-              val.wtlist.forEach((item) => {
-                if (item.status === 10 || item.status === 11) {
-                  this.showMatrixList[index].wtlist.push(item);
-                }
-              });
-            });
-            break;
-          case "10":
-            matrixList.forEach((val, index) => {
-              val.wtlist.forEach((item) => {
-                if (item.status === 10) {
-                  this.showMatrixList[index].wtlist.push(item);
-                }
-              });
-            });
-            break;
-          case "11":
-            matrixList.forEach((val, index) => {
-              val.wtlist.forEach((item) => {
-                if (item.status === 11) {
-                  this.showMatrixList[index].wtlist.push(item);
-                }
-              });
-            });
-            break;
-
-          case "lx":
-            matrixList.forEach((val, index) => {
-              val.wtlist.forEach((item) => {
-                if (item.status === 12 || item.status === 13) {
-                  this.showMatrixList[index].wtlist.push(item);
-                }
-              });
-            });
-            break;
-          case "12":
-            matrixList.forEach((val, index) => {
-              val.wtlist.forEach((item) => {
-                if (item.status === 12) {
-                  this.showMatrixList[index].wtlist.push(item);
-                }
-              });
-            });
-            break;
-          case "13":
-            matrixList.forEach((val, index) => {
-              val.wtlist.forEach((item) => {
-                if (item.status === 13) {
-                  this.showMatrixList[index].wtlist.push(item);
-                }
-              });
-            });
-            break;
-          case "all":
-            this.showMatrixList = this.sourceMap.powerVos;
-            break;
-        }
+        matrixList.forEach((val, index) => {
+          val.wtlist.forEach((item) => {
+            if (item.status === this.fillFjzt) {
+              this.showMatrixList[index].wtlist.push(item);
+            }
+          });
+        });
       } else {
         this.showMatrixList = this.sourceMap.powerVos;
       }
@@ -1546,6 +1408,9 @@ export default {
 
     // 点击左侧数据弹出曲线
     handleLeftClick(wt, type, wpid) {
+      console.log(111, wt);
+      console.log(222, type);
+      console.log(333, wpid);
       this.displayMatrix = true;
       this.wtType = type;
       this.$nextTick(() => {
@@ -1713,6 +1578,10 @@ export default {
           padding-right: 5px;
           cursor: pointer;
 
+          &.static {
+            cursor: auto;
+          }
+
           .status-first {
             width: 100%;
             height: 34%;
@@ -2712,6 +2581,18 @@ export default {
     font-size: 12px;
     margin-top: 10px;
     margin-left: 10px;
+    position: relative;
+
+    .jzWarn {
+      position: absolute;
+      left: 7px;
+      top: 4px;
+      width: 8px;
+      height: 8px;
+      background: #ffd700;
+      border-radius: 20px;
+      cursor: pointer;
+    }
 
     &:nth-child(1),
     &:nth-child(8n + 1) {
@@ -2726,6 +2607,7 @@ export default {
     .c {
       width: 80px;
       height: 100px;
+      cursor: pointer;
 
       img {
         width: 100%;