添加驾驶舱光伏矩阵各个状态的tab切换

src/views/LightMatrix/LightMatrix.vue

@@ -14,9 +14,11 @@
                 <SvgIcon svgid="svg-photovoltaic"></SvgIcon>
               </span>
             </div>
-            <div class="panel-item-gf-right">
+            <div class="panel-item-gf-right curStyle" @click="changeShow(panelData.first.category)">
               <div class="panel-item-gf-up">接入光伏</div>
-              <div class="panel-item-gf-down">{{ sourceMap[panelData.first.key] || "---" }}</div>
+              <div class="panel-item-gf-down">
+                {{ sourceMap[panelData.first.key] || "---" }}
+              </div>
             </div>
           </div>
           <!-- <div class="panel-item-gf-new">
@@ -35,14 +37,14 @@
           </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">
+          <div class="panel-item-new curStyle" :class="data.color" @click="changeShow(data.category,data.fjZT)">
+            <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">
+            <div class="panel-right" >
               <span class="text">台数</span>
               <span class="value">
                 {{ sourceMap[data.key1] || "---" }}
@@ -62,38 +64,81 @@
                 <SvgIcon svgid="svg-photovoltaic"></SvgIcon>
               </i>
               <span>{{ sourceMap.fczbmap[pItem[pIndex].wpId].name }}</span>
-              <div class="sub-title-item" v-for="(data, index) of tables.subTitleDatas" :key="index">
+              <div
+                class="sub-title-item"
+                v-for="(data, index) of tables.subTitleDatas"
+                :key="index"
+              >
                 <span class="sub-title">{{ data.text }}</span>
-                <span class="sub-count" :class="data.color">{{ sourceMap.fczbmap[pItem[pIndex].wpId][data.key] }}</span>
+                <span class="sub-count" :class="data.color">{{
+                  sourceMap.fczbmap[pItem[pIndex].wpId][data.key]
+                }}</span>
               </div>
             </div>
           </div>
           <div class="panel-body">
-            <div class="card" v-for="(cItem, cIndex) in pItem" :key="cIndex" :class="cItem.color" @click="gotoInverter(cItem)">
+            <div
+              class="card"
+              v-for="(cItem, cIndex) in pItem"
+              :key="cIndex"
+              v-show="cItem.isShow"
+              :class="cItem.color"
+              @click="gotoInverter(cItem)"
+            >
               <div class="card-panel">
                 <div class="card-left">
                   <div class="tag">{{ cItem.wtnum }}</div>
                   <div class="icon">
-                    <span class="svg-icon svg-icon-sm" :class="cItem.color == 'black' ? 'svg-icon-black' : cItem.color == 'gray' ? 'svg-icon-gray' : 'svg-icon-write'">
+                    <span
+                      class="svg-icon svg-icon-sm"
+                      :class="
+                        cItem.color == 'black'
+                          ? 'svg-icon-black'
+                          : cItem.color == 'gray'
+                          ? 'svg-icon-gray'
+                          : 'svg-icon-write'
+                      "
+                    >
                       <SvgIcon :svgid="cItem.icon"></SvgIcon>
                     </span>
                   </div>
                 </div>
                 <div class="card-right">
                   <div class="num">
-                    <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
+                    <i
+                      class="svg-icon svg-icon-sm"
+                      :class="
+                        cItem.color != 'red'
+                          ? 'svg-icon-' + cItem.color
+                          : 'svg-icon-white'
+                      "
+                    >
                       <SvgIcon svgid="svg-A"></SvgIcon>
                     </i>
                     <span>{{ cItem.fdl }}</span>
                   </div>
                   <div class="num">
-                    <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
+                    <i
+                      class="svg-icon svg-icon-sm"
+                      :class="
+                        cItem.color != 'red'
+                          ? 'svg-icon-' + cItem.color
+                          : 'svg-icon-white'
+                      "
+                    >
                       <SvgIcon svgid="svg-W"></SvgIcon>
                     </i>
                     <span>{{ cItem.gl }}</span>
                   </div>
                   <div class="num">
-                    <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
+                    <i
+                      class="svg-icon svg-icon-sm"
+                      :class="
+                        cItem.color != 'red'
+                          ? 'svg-icon-' + cItem.color
+                          : 'svg-icon-white'
+                      "
+                    >
                       <SvgIcon svgid="svg-V"></SvgIcon>
                     </i>
                     <span>{{ cItem.fs }}</span>
@@ -117,7 +162,7 @@ import SvgIcon from "@com/coms/icon/svg-icon.vue";
 import util from "@/helper/util.js";
 
 import store from "@store/index.js";
-
+import { isNumber } from "util";
 export default {
   // 名称
   name: "LightMatrix",
@@ -134,16 +179,21 @@ export default {
     return {
       timmer: null, // 计时器
       sourceMap: {}, // 核心数据
+      fillCategory: null, // 过滤条件
+      fillFjzt: null, // 过滤条件
       panelData: {
         first: {
           icon: "svg-photovoltaic",
           text: "接入光伏",
           key: "gfjrnum",
+          category:'jrgf_GDC'
         },
         datas: [
           {
             color: "green",
             name: "待机",
+            category:'dj_GDC',
+            fjZT: 0,
             nameIcon: "svg-standby",
             numIcon: "svg-manual",
             text1: "待风",
@@ -154,6 +204,8 @@ export default {
           {
             color: "purple",
             name: "运行",
+            category:'yx_GDC',
+            fjZT: 1,
             nameIcon: "svg-normal-power",
             numIcon: "svg-drop-output",
             text1: "正常发电",
@@ -164,6 +216,8 @@ export default {
           {
             color: "pink",
             name: "限电",
+            category:'xd_GDC',
+            fjZT: 5,
             nameIcon: "svg-limit-power",
             numIcon: "svg-downtime",
             text1: "限电降出力",
@@ -174,6 +228,8 @@ export default {
           {
             color: "red",
             name: "故障",
+            category:'gz_GDC',
+            fjZT:2,
             nameIcon: "svg-gz-downtime",
             numIcon: "svg-field-involved",
             text1: "故障停机",
@@ -183,7 +239,9 @@ export default {
           },
           {
             color: "orange",
-            name: "检休",
+            name: "检修",
+            category:'jx_GDC',
+            fjZT: 4,
             nameIcon: "svg-jx-downtime",
             numIcon: "svg-field-involved",
             text1: "检修停机",
@@ -194,6 +252,8 @@ export default {
           {
             color: "write",
             name: "受累",
+            category:'sl_GDC',
+            fjZT: 12,
             nameIcon: "svg-intranet-involvement",
             numIcon: "svg-environment",
             text1: "电网",
@@ -204,6 +264,8 @@ export default {
           {
             color: "gray",
             name: "离线",
+            category:'lx_GDC',
+            fjZT:3,
             nameIcon: "svg-offline",
             key: "gflxnum",
             numIcon: "svg-unknown",
@@ -331,6 +393,48 @@ export default {
       }
     },
 
+    //切换显示种类
+    changeShow(category, fjzt, skipFill) {
+      if (!skipFill) {
+        console.log("!skipFill:", !skipFill);
+        if (this.fillCategory === category) {
+          console.log("fillCategory:", this.fillCategory);
+          console.log("fillFjzt:", this.fillFjzt);
+          this.fillCategory = null;
+          this.fillFjzt = null;
+        } else {
+          this.fillCategory = category;
+          this.fillFjzt = fjzt;
+          console.log("fillCategory:", this.fillCategory);
+          console.log("fillFjz:", this.fillFjzt);
+        }
+      }
+
+      let fjmap = this.BASE.deepCopy(this.sourceMap.fjmap);
+
+      fjmap.forEach((pEle) => {
+        // console.log('pele:',pEle)
+        pEle.forEach((cEle) => {
+          // console.log('cele:',cEle)
+          cEle.isShow = true;
+          if (!this.fillCategory) {
+            cEle.isShow = true;
+            // cEle.isShow=false;
+          } else if (cEle.wpId.indexOf(category.split("_")[1]) !== -1) {
+            if (isNumber(fjzt)) {
+              cEle.fjzt === fjzt ? (cEle.isShow = true) : (cEle.isShow = false);
+            } else {
+              cEle.isShow = true;
+              // cEle.isShow = false;
+            }
+          } else {
+            cEle.isShow = true;
+          }
+        });
+      });
+      this.sourceMap.fjmap = fjmap;
+    },
+
     // 请求服务
     requestData(showLoading) {
       let that = this;
@@ -340,6 +444,7 @@ export default {
         subUrl: "matrix/matrixDetialGfPush",
         success(res) {
           if (res.data) {
+            console.log('resMap:',res)
             let sourceMap = res.data;
             for (let key in sourceMap) {
               if (key !== "fczbmap" && key !== "fjmap") {
@@ -355,17 +460,22 @@ export default {
               }
             }
             that.sourceMap = sourceMap;
+            if (that.fillCategory) {
+              console.log("thatfillcategory:", that.fillCategory);
+              console.log("fillFjzt:", this.fillFjzt);
+              that.changeShow(that.fillCategory, that.fillFjzt, true);
+            }
           } else {
             that.sourceMap = {};
           }
         },
       });
     },
-    gotoInverter(item){
+    gotoInverter(item) {
       this.$router.push({
         path: `/monitor/windsite/inverter-info/${item.wpId}/${item.wtId}`,
       });
-    }
+    },
   },
 
   created() {
@@ -1046,5 +1156,8 @@ export default {
       }
     }
   }
+    .curStyle {
+    cursor: pointer;
+  }
 }
 </style>