光伏明细矩阵模块完成

public/static/config/modeConfig.js

@@ -1,6 +1,6 @@
 
 // 本地联调开关
-const localTest = 1;
+const localTest = 0;
 
 // 服务器地址
 let baseURL = null;

src/views/LightMatrix/LightMatrix.vue

@@ -29,7 +29,8 @@
               </span>
             </div>
             <div class="panel-item-li">
-              <span>{{ sourceMap[data.key] || '---'}}</span>
+              <span v-if="data.calcStr && sourceMap">{{calcGfStr(data.calcStr) || '---'}}</span>
+              <span v-else>{{sourceMap[data.key] || '---'}}</span>
               <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
                 <SvgIcon :svgid="data.numIcon"></SvgIcon>
               </span>
@@ -38,11 +39,11 @@
           <div class="panel-item-right">
             <div class="panel-item-ri">
               <span>{{ data.text1 }}</span>
-              <span>{{ data.num1 }}</span>
+              <span>{{ sourceMap[data.key1] || '---' }}</span>
             </div>
             <div class="panel-item-ri">
               <span>{{ data.text2 }}</span>
-              <span>{{ data.num2 }}</span>
+              <span>{{ sourceMap[data.key2] || '---' }}</span>
             </div>
           </div>
         </div>
@@ -50,52 +51,54 @@
       </Row>
     </div>
     <div class="panel-box">
-      <div v-for="(table, k) of tables" :key="k">
-        <div class="panel-title">
-          <div class="panel-title-name">
-            <i class="fa fa-send"></i>
-            <span>某某某风电场</span>
-            <div class="sub-title-item" v-for="(data, index) of table.subTitleDatas" :key="index">
-              <span class="sub-title">{{ data.text }}</span>
-              <span class="sub-count" :class="data.color">{{ data.num }}</span>
+      <div v-for="(pItem, pIndex) in sourceMap.fjmap" :key="pIndex">
+        <div>
+          <div class="panel-title">
+            <div class="panel-title-name">
+              <i class="fa fa-send"></i>
+              <span>{{sourceMap.fczbmap[pItem[pIndex].wpId].name}}</span>
+              <!-- <div class="sub-title-item" v-for="(data, index) of table.subTitleDatas" :key="index">
+                <span class="sub-title">{{ data.text }}</span>
+                <span class="sub-count" :class="data.color">{{ data.num }}</span>
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="panel-body">
-          <table>
-            <tbody>
-              <tr v-for="(row, i) of table.groupDatas" :key="i">
-                <td v-for="(col, j) of row" :key="j">
-                  <div class="card" :class="col.color">
-                    <div class="card-panel">
-                      <div class="card-left">
-                        <div class="tag">{{ col.tag }}</div>
-                        <div class="icon">
-                          <span class="svg-icon svg-icon-sm" :class="col.color == 'write' ? 'svg-icon-black' : col.color == 'gray' ? 'svg-icon-gray' : 'svg-icon-write'">
-                            <SvgIcon :svgid="col.icon"></SvgIcon>
-                          </span>
-                        </div>
-                      </div>
-                      <div class="card-right">
-                        <div class="num">
-                          <i class="fa fa-user"></i>
-                          <span>{{ col.num1 }}</span>
-                        </div>
-                        <div class="num">
-                          <i class="fa fa-user"></i>
-                          <span>{{ col.num2 }}</span>
+          <div class="panel-body">
+            <table>
+              <tbody>
+                <tr style="width:100%;display:flex;flex-wrap:wrap;">
+                  <td v-for="(cItem, cIndex) in pItem" :key="cIndex">
+                    <div class="card" :class="cItem.color">
+                      <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 == 'write' ? 'svg-icon-black' : cItem.color == 'gray' ? 'svg-icon-gray' : 'svg-icon-write'">
+                              <SvgIcon :svgid="cItem.icon"></SvgIcon>
+                            </span>
+                          </div>
                         </div>
-                        <div class="num">
-                          <i class="fa fa-user"></i>
-                          <span>{{ col.num3 }}</span>
+                        <div class="card-right">
+                          <div class="num">
+                            <i class="fa fa-user"></i>
+                            <span>{{ cItem.fdl }}</span>
+                          </div>
+                          <div class="num">
+                            <i class="fa fa-user"></i>
+                            <span>{{ cItem.gl }}</span>
+                          </div>
+                          <div class="num">
+                            <i class="fa fa-user"></i>
+                            <span>{{ cItem.fs }}</span>
+                          </div>
                         </div>
                       </div>
                     </div>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
@@ -130,86 +133,86 @@ export default {
         first: {
           icon: "svg-photovoltaic",
           text: "接入光伏",
-          key: "fcjrnum",
+          key: "gfjrnum",
         },
         datas: [
           {
             color: "green",
             name: "待机",
             nameIcon: "svg-standby",
-            key: "fcdjnum",
+            calcStr: ["gfdjnum", "gfsdtjnum"],
             numIcon: "svg-manual",
             text1: "待风",
-            key1: "fcddfum",
+            key1: "gfdjnum",
             text2: "手动停机",
-            key2: "fcsdtjnum",
+            key2: "gfsdtjnum",
           },
           {
             color: "blue",
             name: "运行",
             nameIcon: "svg-normal-power",
-            key: "fcyxnum",
+            calcStr: ["gfzcfdnum", "gfqxjclnum"],
             numIcon: "svg-drop-output",
             text1: "正常发电",
-            key1: "fczcfdnum",
-            text2: "降出力",
-            key2: "fcjclnum",
+            key1: "gfzcfdnum",
+            text2: "降出力运行",
+            key2: "gfqxjclnum",
           },
           {
             color: "purple",
             name: "限电",
             nameIcon: "svg-limit-power",
-            key: "fcxdnum",
+            calcStr: ["gfxdjclnum", "gfxdtjnum"],
             numIcon: "svg-downtime",
-            text1: "降出力",
-            key1: "fcjclum",
+            text1: "限电降出力",
+            key1: "gfxdjclnum",
             text2: "停机",
-            key2: "fctjnum",
+            key2: "gfxdtjnum",
           },
           {
             color: "red",
             name: "故障",
             nameIcon: "svg-gz-downtime",
-            key: "fcgznum",
+            calcStr: ["gfgztjnum", "gfcnsltjnum"],
             numIcon: "svg-field-involved",
             text1: "故障停机",
-            key1: "fcgztjnum",
+            key1: "gfgztjnum",
             text2: "场内受累",
-            key2: "fccnslnum",
+            key2: "gfcnsltjnum",
           },
           {
             color: "orange",
-            name: "检测",
+            name: "检休",
             nameIcon: "svg-jx-downtime",
-            key: "fcjcnum",
+            calcStr: ["gfjcnum", "gfcnsljxnum"],
             numIcon: "svg-field-involved",
             text1: "检修停机",
-            key1: "fcjxtjnum",
+            key1: "gfjxtjnum",
             text2: "产内受累",
-            key2: "fccnslnum",
-          },
-          {
-            color: "gray",
-            name: "离线",
-            nameIcon: "svg-offline",
-            key: "fclxnum",
-            numIcon: "svg-unknown",
-            text1: "离线",
-            key1: "asd",
-            text2: "未知",
-            key2: "fcwznum",
+            key2: "gfcnsljxnum",
           },
           {
             color: "write",
             name: "受累",
+            calcStr: ["gfdwslnum", "gfhjslnum"],
             nameIcon: "svg-intranet-involvement",
-            num: 50,
             numIcon: "svg-environment",
             text1: "电网",
-            num1: 30,
+            key1: "gfdwslnum",
             text2: "环境",
-            num2: 30,
+            key2: "gfhjslnum",
           },
+          {
+            color: "gray",
+            name: "离线",
+            nameIcon: "svg-offline",
+            key: "gflxnum",
+            numIcon: "svg-unknown",
+            text1: "离线",
+            key1: "gflxnum",
+            text2: "未知",
+            key2: "gfwznum",
+          }
         ],
       },
       tables: [
@@ -310,6 +313,37 @@ export default {
 
   // 函数
   methods: {
+    // 根据风机状态码返回对应 class
+    getColor (fjzt) {
+      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;
+      }
+    },
+
+    calcGfStr (calcStr) {
+      return (parseInt(this.sourceMap[calcStr[0]]) + parseInt(this.sourceMap[calcStr[1]])) + "";
+    },
+
     createGroupDatas: function (table) {
       table.groupDatas = [];
       let tempDatas = [];
@@ -370,7 +404,7 @@ export default {
         method: "POST",
         subUrl: "admin/websocketdisconnect",
         success () {
-          that.websocketServe = datainit("/topic/matrixdetialpushtask");
+          that.websocketServe = datainit("/topic/matrixdetialgfpushtask");
         }
       });
     });
@@ -389,15 +423,22 @@ export default {
       if (res) {
         let sourceMap = JSON.parse(res);
         for (let key in sourceMap) {
-          if (key !== 'fczbmap' && key !== 'jmap') {
+          if (key !== 'fczbmap' && key !== 'fjmap') {
             sourceMap[key] += '';
+          } else if (key === 'fjmap') {
+            sourceMap[key].forEach(pItem => {
+              pItem.forEach(cItem => {
+                cItem.color = this.getColor(cItem.fjzt);
+                cItem.isShow = true;
+              });
+            });
           }
         }
         this.sourceMap = sourceMap;
       } else {
         this.sourceMap = {};
       }
-      console.log(222, JSON.parse(res));
+      console.log(111, this.sourceMap);
     }
   }
 };
@@ -767,7 +808,7 @@ export default {
               width: 60%;
 
               .num {
-                width: 100%;
+                width: 70px;
                 font-size: 1.019vh;
                 text-align: left;
                 padding-right: 0.278vh;