场站矩阵模块BUG修复 tabs BUG修复

src/components/coms/btn/btn-group-double.vue

@@ -90,6 +90,8 @@ export default {
   },
   updated() {
     // 数据更新后
+    this.activeRow = this.rowIndex;
+    this.activeIndex = this.index;
   },
 };
 </script>
@@ -123,7 +125,7 @@ export default {
       margin-right: 0.278vh;
       border: 0.093vh solid @darkgray;
       border-radius: 0.185vh;
-      width: 9.815vh;
+      width: 12.5vh;
       // height: 2.13vh;
       // line-height: 2.13vh;
       padding: 0.3704vh 0;

src/views/WindSite/pages/Matrix.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="matrix">
     <div class="btn-group-tabs">
-      <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2>
+      <BtnGroup2 :btnGroups="btnGroups" :rowIndex="rowIndex" :index="selectIndex" @select="select"></BtnGroup2>
     </div>
     <div class="panel-title">
       <div class="panel-title-name" v-if="sourceMap">
@@ -16,11 +16,16 @@
         <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'">
+                <SvgIcon :svgid="mapping[cItem.color]"></SvgIcon>
+              </span>
+            </div>
           </div>
           <div class="card-right">
-            <div class="num">{{ cItem.gl }}</div>
-            <div class="num">{{ cItem.fs }}</div>
-            <div class="num">{{ cItem.fdjzs }}</div>
+            <div class="num">{{ cItem.gl }} kW</div>
+            <div class="num">{{ cItem.fs }} m/s</div>
+            <div class="num">{{ cItem.fdjzs }} rpm</div>
           </div>
         </div>
         <div class="card-percent">
@@ -36,17 +41,31 @@
 <script>
 import util from "@/helper/util.js";
 import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
 export default {
   // 名称
   name: "Matrix",
   // 使用组件
   components: {
     BtnGroup2,
+    SvgIcon
   },
 
   data() {
     return {
-      timmer: null, // 遮罩开关
+      timmer: null, // 计时器
+      wpId:"",
+      selectIndex:0,
+      rowIndex:0,
+      mapping: {
+        green: "svg-standby",
+        blue: "svg-normal-power",
+        pink: "svg-limit-power",
+        red: "svg-gz-downtime",
+        orange: "svg-jx-downtime",
+        gray: "svg-offline",
+        black: "svg-intranet-involvement",
+      },
       sourceMap: {
         // 核心数据
         fczbmap: {
@@ -68,49 +87,11 @@ export default {
       btnGroups: [
         {
           icon: "fa fa-fire",
-          btns: [
-            {
-              text: "某某风场",
-              code: "mmfdc1",
-            },
-            {
-              text: "某某风场",
-              code: "mhsfc",
-            },
-            {
-              text: "某某风场",
-              code: "mmfdc2",
-            },
-            {
-              text: "某某风场",
-              code: "mmfdc3",
-            },
-            {
-              text: "某某风场",
-              code: "mmfdc4",
-            },
-          ],
+          btns: [],
         },
         {
           icon: "fa fa-fire-extinguisher",
-          btns: [
-            {
-              text: "某某风场",
-              code: "mmgf1",
-            },
-            {
-              text: "某某风场",
-              code: "mmgf2",
-            },
-            {
-              text: "某某风场",
-              code: "mmgf3",
-            },
-            {
-              text: "某某风场",
-              code: "mmgf4",
-            },
-          ],
+          btns: [],
         },
       ],
     };
@@ -151,7 +132,7 @@ export default {
         method: "POST",
         subUrl: "matrix/matrixByWpIdPush",
         data: {
-          wpId: "MHS_FDC",
+          wpId: that.wpId,
         },
         success(res) {
           if (res.data) {
@@ -176,15 +157,66 @@ export default {
       });
     },
 
+    getWp(){
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/windfarmAllAjax",
+        success(res) {
+
+          let btnGroups = [{
+            icon: "fa fa-fire",
+            btns: []
+          },{
+            icon: "fa fa-fire-extinguisher",
+            btns: []
+          }];
+
+          res.data.forEach((ele,index)=>{
+            if(ele.id.indexOf("FDC") !== -1){
+              btnGroups[0].btns.push({
+                text:ele.name,
+                code:ele.id
+              });
+            }else{
+              btnGroups[1].btns.push({
+                text:ele.name,
+                code:ele.id
+              });
+            }
+          });
+
+          that.btnGroups=btnGroups;
+          that.renderBtnActiveIndex();
+
+        },
+      });
+    },
+
+    renderBtnActiveIndex(){
+      this.btnGroups.forEach((pEle,pIndex)=>{
+        pEle.btns.forEach((cEle,cIndex)=>{
+          if(cEle.code === this.wpId) {
+            this.rowIndex=pIndex;
+            this.selectIndex=cIndex;
+          }
+        });
+      });
+    },
+
     select(res) {
-      // console.log("res", res);
+      this.$router.replace({
+        path: `/monitor/windsite/matrix/${res.code}`
+      });
     },
   },
 
   created() {
     let that = this;
+    that.wpId = that.$route.params.wpId;
     that.$nextTick(() => {
       that.requestData(false);
+      that.getWp();
       that.timmer = setInterval(() => {
         that.requestData(false);
       }, that.$store.state.websocketTimeSec);
@@ -197,6 +229,14 @@ export default {
     clearInterval(this.timmer);
     this.timmer = null;
   },
+
+  watch:{
+    "$route"(res){
+      this.wpId = res.params.wpId;
+      this.requestData(false);
+      this.renderBtnActiveIndex();
+    }
+  }
 };
 </script>
 
@@ -284,6 +324,18 @@ export default {
             width: 100%;
             text-align: center;
           }
+
+          .icon {
+              flex-grow: 1;
+              height: calc(100% - 16px);
+              display: flex;
+              align-items: center;
+              justify-content: center;
+
+              i {
+                font-size: 14px;
+              }
+            }
         }
 
         .card-right {