欠发矩阵模块完成

src/views/LightMatrix/LightMatrix.vue

@@ -57,10 +57,10 @@
             <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">
+              <div class="sub-title-item" v-for="(data, index) in tables[0].subTitleDatas" :key="index">
                 <span class="sub-title">{{ data.text }}</span>
-                <span class="sub-count" :class="data.color">{{ data.num }}</span>
-              </div> -->
+                <span class="sub-count" :class="data.color">{{ sourceMap.fczbmap[pItem[pIndex].wpId][data.key] }}</span>
+              </div>
             </div>
           </div>
           <div class="panel-body">
@@ -221,78 +221,78 @@ export default {
           subTitleDatas: [
             {
               text: "接入台数",
-              num: 256,
               color: "write",
+              key: "jrts"
             },
             {
               text: "待机台数",
-              num: 256,
               color: "green",
+              key: "djts"
             },
             {
               text: "并网台数",
-              num: 256,
               color: "blue",
+              key: "yxts",
             },
             {
               text: "限电台数",
-              num: 256,
               color: "purple",
+              key: "xdts"
             },
             {
               text: "故障台数",
-              num: 256,
               color: "red",
+              key: "gzts"
             },
             {
               text: "检修台数",
-              num: 256,
               color: "orange",
+              key: "whts"
             },
             {
               text: "受累台数",
-              num: 256,
               color: "write",
+              key: "slts"
             },
             {
               text: "离线台数",
-              num: 256,
               color: "gray",
+              key: "lxts"
             },
             {
               text: "风速",
-              num: 256,
               color: "gray",
+              key: "ssfs"
             },
             {
               text: "预测功率",
-              num: 256,
               color: "gray",
+              key: "ycgl"
             },
             {
               text: "保证功率",
-              num: 256,
               color: "gray",
+              key: "bzgl"
             },
             {
               text: "应发功率",
-              num: 256,
               color: "gray",
+              key: "yfgl"
             },
             {
               text: "实际功率",
-              num: 256,
               color: "gray",
+              key: "sjgl"
             },
             {
               text: "AGC指令",
-              num: 256,
               color: "gray",
+              key: "agcygsd"
             },
             {
               text: "出线功率",
-              num: 256,
               color: "gray",
+              key: "agccxyg"
             },
           ],
           datas: [
@@ -342,59 +342,10 @@ export default {
 
     calcGfStr (calcStr) {
       return (parseInt(this.sourceMap[calcStr[0]]) + parseInt(this.sourceMap[calcStr[1]])) + "";
-    },
-
-    createGroupDatas: function (table) {
-      table.groupDatas = [];
-      let tempDatas = [];
-      table.datas.forEach((data, index) => {
-        if (index % table.col == 0) {
-          if (tempDatas.length > 0) {
-            table.groupDatas.push(util.copy(tempDatas));
-            tempDatas = [];
-          }
-        }
-        tempDatas.push(util.copy(data));
-      });
-      if (tempDatas.length > 0) {
-        table.groupDatas.push(util.copy(tempDatas));
-        tempDatas = [];
-      }
-    },
-  },
-
-  created () {
-    // 创建后
-    let tempData = [];
-    for (let i = 0; i < 45; i++) {
-      tempData.push(util.copy(this.tables[0].datas[0]));
-      if (i == 39) {
-        tempData[i].color = "green";
-      }
-      if (i == 40) {
-        tempData[i].color = "purple";
-      }
-      if (i == 41) {
-        tempData[i].color = "orange";
-      }
-      if (i == 42) {
-        tempData[i].color = "red";
-      }
-      if (i == 43) {
-        tempData[i].color = "write";
-      }
-      if (i == 44) {
-        tempData[i].color = "gray";
-      }
-    }
-    this.tables[0].datas = util.copy(tempData);
-    this.createGroupDatas(this.tables[0]);
-    for (let i = 0; i < 5; i++) {
-      this.tables.push(util.copy(this.tables[0]));
     }
   },
 
-  mounted () {
+  created () {
     let that = this;
     that.loadingFlg = true;
     that.BASE.showLoading();
@@ -410,6 +361,10 @@ export default {
     });
   },
 
+  mounted () {
+
+  },
+
   beforeDestroy () {
     // 离开页面，销毁 websocket 实例
     this.websocketServe && this.websocketServe.disconnect();
@@ -438,7 +393,6 @@ export default {
       } else {
         this.sourceMap = {};
       }
-      console.log(111, this.sourceMap);
     }
   }
 };

src/views/LightMatrix1/LightMatrix1.vue

@@ -289,7 +289,7 @@ export default {
         method: "POST",
         subUrl: "admin/websocketdisconnect",
         success () {
-          that.websocketServe = datainit("/topic/matrixdetialpushtask");
+          that.websocketServe = datainit("/topic/matrixpushtask");
         }
       });
     });
@@ -328,7 +328,6 @@ export default {
       } else {
         this.sourceMap = {};
       }
-      console.log(333, JSON.parse(res));
     }
   }
 }

src/views/LightMatrix2/LightMatrix2.vue

@@ -2,75 +2,77 @@
   <div class="light-matrix">
     <Row class="panel-2" type="">
       <Col :span="12" class="left-50-16">
-        <div class="panel">
-          <div class="dot left top"></div>
-          <div class="dot left bottom"></div>
-          <div class="dot right top"></div>
-          <div class="dot right bottom"></div>
-          <div class="item">
-            <i :class="panel1Data.first.icon"></i>
-          </div>
-          <div class="item" :class="data.color" v-for="(data, index) of panel1Data.datas" :key="index">
-            <div>{{ data.test }}</div>
-            <div>{{ data.num }}</div>
-          </div>
+      <div class="panel">
+        <div class="dot left top"></div>
+        <div class="dot left bottom"></div>
+        <div class="dot right top"></div>
+        <div class="dot right bottom"></div>
+        <div class="item">
+          <i :class="panel1Data.first.icon"></i>
         </div>
+        <div class="item" :class="data.color" v-for="(data, index) of panel1Data.datas" :key="index">
+          <div>{{ data.test }}</div>
+          <div>{{ sourceMap[data.key] }}</div>
+        </div>
+      </div>
       </Col>
       <Col :span="12" class="left-50-16">
-        <div class="panel">
-          <div class="dot left top"></div>
-          <div class="dot left bottom"></div>
-          <div class="dot right top"></div>
-          <div class="dot right bottom"></div>
-          <div class="item2" v-for="(data, index) of panel2Data.datas" :key="index">
-            <div class="name">{{ data.test }}</div>
-            <div class="num2">{{ data.num2 }}</div>
-            <div class="num1">×{{ data.num1 }}</div>
-            <div class="num3">{{ data.num3 }}</div>
-          </div>
+      <div class="panel">
+        <div class="dot left top"></div>
+        <div class="dot left bottom"></div>
+        <div class="dot right top"></div>
+        <div class="dot right bottom"></div>
+        <div class="item2" v-for="(data, index) of panel2Data.datas" :key="index">
+          <div class="name">{{ data.test }}</div>
+          <div class="num2">{{ sourceMap[data.key] }}</div>
+          <!-- <div class="num1">×{{ data.num1 }}</div> -->
+          <div class="num3">{{ data.num3 }}</div>
         </div>
+      </div>
       </Col>
     </Row>
     <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) of 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) in tables[0].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>
+              </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="panel-body">
+            <table>
+              <tbody>
+                <tr>
+                  <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>
+                        <div class="card-right">
+                          <div class="num">{{ cItem.gl }}</div>
+                          <div class="num">{{ cItem.fs }}</div>
+                        </div>
                       </div>
-                      <div class="card-right">
-                        <div class="num">{{ col.num1 }}</div>
-                        <div class="num">{{ col.num2 }}</div>
+                      <div class="card-percent">
+                        <div class="split-item"></div>
+                        <div class="split-item"></div>
+                        <div class="split-item"></div>
+                        <div class="split-item"></div>
+                        <div class="split-item"></div>
+                        <div class="percent" :style="'width: ' + cItem.lyl + '%'"></div>
                       </div>
                     </div>
-                    <div class="card-percent">
-                      <div class="split-item"></div>
-                      <div class="split-item"></div>
-                      <div class="split-item"></div>
-                      <div class="split-item"></div>
-                      <div class="split-item"></div>
-                      <div class="percent" :style="'width: ' + col.percent + '%'"></div>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
@@ -81,6 +83,10 @@
 import Row from "@/components/coms/grid/row.vue";
 import Col from "@/components/coms/grid/col.vue";
 import util from "@/helper/util.js";
+
+import { datainit, webtest } from "@tools/websocket.js";
+import store from "@store/index.js";
+
 export default {
   // 名称
   name: "LightMatrix2",
@@ -90,8 +96,11 @@ export default {
     Col,
   },
   // 数据
-  data() {
+  data () {
     return {
+      loadingFlg: false, // 遮罩开关
+      websocketServe: null, // websocket 服务实例
+      sourceMap: {}, // 核心数据
       panel1Data: {
         first: {
           icon: "fa fa-user",
@@ -100,42 +109,42 @@ export default {
           {
             color: "write",
             test: "接入风机",
-            num: 256,
+            key: "fcjrnum"
           },
           {
             color: "blue",
             test: "· 运行",
-            num: 256,
+            key: "fcyxnum"
           },
           {
             color: "green",
             test: "· 待机",
-            num: 256,
+            key: "fcdjnum"
           },
           {
             color: "purple",
             test: "· 限电",
-            num: 256,
+            key: "fcxdnum"
           },
           {
             color: "red",
             test: "· 故障",
-            num: 256,
+            key: "fcgznum"
           },
           {
             color: "orange",
             test: "· 检修",
-            num: 256,
+            key: "fcwhnum"
           },
           {
             color: "write",
             test: "· 受累",
-            num: 256,
+            key: "fcslnum"
           },
           {
             color: "gray",
             test: "· 离线",
-            num: 256,
+            key: "fclxnum"
           },
         ],
       },
@@ -144,31 +153,31 @@ export default {
           {
             test: "欠发电量",
             num1: 5,
-            num2: 7.34,
+            key: "r0qf",
             num3: "0%~5%",
           },
           {
             test: "欠发电量",
             num1: 4,
-            num2: 7.34,
+            key: "r1qf",
             num3: "5%~10%",
           },
           {
             test: "欠发电量",
             num1: 3,
-            num2: 7.34,
+            key: "r2qf",
             num3: "10%~20%",
           },
           {
             test: "欠发电量",
             num1: 2,
-            num2: 7.34,
+            key: "r3qf",
             num3: "20%~40%",
           },
           {
             test: "欠发电量",
             num1: 1,
-            num2: 7.34,
+            key: "r4qf",
             num3: ">40%",
           },
         ],
@@ -179,78 +188,78 @@ export default {
           subTitleDatas: [
             {
               text: "接入台数",
-              num: 256,
               color: "write",
+              key: "jrts"
             },
             {
               text: "待机台数",
-              num: 256,
               color: "green",
+              key: "djts"
             },
             {
               text: "并网台数",
-              num: 256,
               color: "blue",
+              key: "yxts",
             },
             {
               text: "限电台数",
-              num: 256,
               color: "purple",
+              key: "xdts"
             },
             {
               text: "故障台数",
-              num: 256,
               color: "red",
+              key: "gzts"
             },
             {
               text: "检修台数",
-              num: 256,
               color: "orange",
+              key: "whts"
             },
             {
               text: "受累台数",
-              num: 256,
               color: "write",
+              key: "slts"
             },
             {
               text: "离线台数",
-              num: 256,
               color: "gray",
+              key: "lxts"
             },
             {
               text: "风速",
-              num: 256,
               color: "gray",
+              key: "ssfs"
             },
             {
               text: "预测功率",
-              num: 256,
               color: "gray",
+              key: "ycgl"
             },
             {
               text: "保证功率",
-              num: 256,
               color: "gray",
+              key: "bzgl"
             },
             {
               text: "应发功率",
-              num: 256,
               color: "gray",
+              key: "yfgl"
             },
             {
               text: "实际功率",
-              num: 256,
               color: "gray",
+              key: "sjgl"
             },
             {
               text: "AGC指令",
-              num: 256,
               color: "gray",
+              key: "agcygsd"
             },
             {
               text: "出线功率",
-              num: 256,
               color: "gray",
+              key: "agccxyg"
             },
           ],
           datas: [
@@ -269,7 +278,37 @@ export default {
   },
   // 函数
   methods: {
-    createGroupDatas: function(table) {
+    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 = [];
       table.datas.forEach((data, index) => {
@@ -287,11 +326,8 @@ export default {
       }
     },
   },
-  // 生命周期钩子
-  beforeCreate() {
-    // 创建前
-  },
-  created() {
+
+  created () {
     // 创建后
     let tempData = [];
     for (let i = 0; i < 45; i++) {
@@ -321,18 +357,48 @@ export default {
       this.tables.push(util.copy(this.tables[0]));
     }
   },
-  beforeMount() {
-    // 渲染前
-  },
-  mounted() {
-    // 渲染后
-  },
-  beforeUpdate() {
-    // 数据更新前
-  },
-  updated() {
-    // 数据更新后
+
+  mounted () {
+    let that = this;
+    that.loadingFlg = true;
+    that.BASE.showLoading();
+    that.$nextTick(() => {
+      that.websocketServe && that.websocketServe.disconnect();
+      that.API.requestData({
+        method: "POST",
+        subUrl: "admin/websocketdisconnect",
+        success () {
+          that.websocketServe = datainit("/topic/matrixqfpushtask");
+        }
+      });
+    });
   },
+
+  watch: {
+    // 监听 websocket 回调并包装数据用于展示
+    '$store.state.windturbineMap': function (res) {
+      this.loadingFlg && this.BASE.closeLoading();
+      this.loadingFlg = false;
+      if (res) {
+        let sourceMap = JSON.parse(res);
+        for (let key in sourceMap) {
+          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 = {};
+      }
+    }
+  }
 };
 </script>
 
@@ -435,7 +501,7 @@ export default {
 
         &:last-child {
           font-size: @fontsize-l;
-          font-family: "Bicubik";
+          font-family: 'Bicubik';
         }
       }
     }
@@ -465,7 +531,7 @@ export default {
         position: relative;
 
         &::after {
-          content: "";
+          content: '';
           position: absolute;
           width: 1.481vh;
           height: 0.556vh;
@@ -513,7 +579,7 @@ export default {
 
           .sub-count {
             font-size: 1.296vh;
-            font-family: "Bicubik";
+            font-family: 'Bicubik';
             font-weight: 500;
 
             &.write {

src/views/LightMatrix3/LightMatrix3.vue

@@ -7,85 +7,86 @@
       <div class="dot right bottom"></div>
       <Row>
         <Col :span="3">
-          <div class="panel-item-gf">
-            <div class="panel-item-gf-left">
-              <span class="svg-icon svg-icon-write svg-icon-md">
-                <SvgIcon :svgid="panelData.first.icon"></SvgIcon>
+        <div class="panel-item-gf">
+          <div class="panel-item-gf-left">
+            <span class="svg-icon svg-icon-write svg-icon-md">
+              <SvgIcon :svgid="panelData.first.icon"></SvgIcon>
+            </span>
+          </div>
+          <div class="panel-item-gf-right">
+            <div class="panel-item-gf-up">{{ panelData.first.text }}</div>
+            <div class="panel-item-gf-down">{{ sourceMap[panelData.first.key] || '---' }}</div>
+          </div>
+        </div>
+        </Col>
+        <Col :span="3" v-for="(data, index) of panelData.datas" :key="index">
+        <div class="panel-item" :class="data.color">
+          <div class="panel-item-left">
+            <div class="panel-item-li">
+              <span>{{ data.name }}</span>
+              <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
+                <SvgIcon :svgid="data.nameIcon"></SvgIcon>
               </span>
             </div>
-            <div class="panel-item-gf-right">
-              <div class="panel-item-gf-up">{{ panelData.first.text }}</div>
-              <div class="panel-item-gf-down">{{ panelData.first.num }}</div>
+            <div class="panel-item-li">
+              <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>
             </div>
           </div>
-        </Col>
-        <Col :span="3" v-for="(data, index) of panelData.datas" :key="index">
-          <div class="panel-item" :class="data.color">
-            <div class="panel-item-left">
-              <div class="panel-item-li">
-                <span>{{ data.name }}</span>
-                <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
-                  <SvgIcon :svgid="data.nameIcon"></SvgIcon>
-                </span>
-              </div>
-              <div class="panel-item-li">
-                <span>{{ data.num }}</span>
-                <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
-                  <SvgIcon :svgid="data.numIcon"></SvgIcon>
-                </span>
-              </div>
+          <div class="panel-item-right">
+            <div class="panel-item-ri">
+              <span>{{ data.text1 }}</span>
+              <span>{{ sourceMap[data.key1] || '---' }}</span>
             </div>
-            <div class="panel-item-right">
-              <div class="panel-item-ri">
-                <span>{{ data.text1 }}</span>
-                <span>{{ data.num1 }}</span>
-              </div>
-              <div class="panel-item-ri">
-                <span>{{ data.text2 }}</span>
-                <span>{{ data.num2 }}</span>
-              </div>
+            <div class="panel-item-ri">
+              <span>{{ data.text2 }}</span>
+              <span>{{ sourceMap[data.key2] || '---' }}</span>
             </div>
           </div>
+        </div>
         </Col>
       </Row>
     </div>
     <div class="panel-box">
-      <div v-for="(table, k) of tables" :key="k">
+      <div v-for="(pItem, pIndex) in sourceMap.fjmap" :key="pIndex">
         <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>{{sourceMap.fczbmap[pItem[pIndex].wpId].name}}</span>
+            <div class="sub-title-item" v-for="(data, index) of tables[0].subTitleDatas" :key="index">
               <span class="sub-title">{{ data.text }}</span>
-              <span class="sub-count" :class="data.color">{{ data.num }}</span>
+              <span class="sub-count" :class="data.color">{{ sourceMap.fczbmap[pItem[pIndex].wpId][data.key] }}</span>
             </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">
-                    <span class="center-icon svg-icon svg-icon-md" :class="col.color == 'write' ? 'svg-icon-black' : 'svg-icon-write'">
-                      <SvgIcon :svgid="mapping[col.color]"></SvgIcon>
+              <tr>
+                <td v-for="(cItem, cIndex) in pItem" :key="cIndex">
+                  <div class="card" :class="cItem.color">
+                    <span class="center-icon svg-icon svg-icon-md" :class="cItem.color == 'write' ? 'svg-icon-black' : 'svg-icon-write'">
+                      <SvgIcon :svgid="mapping[cItem.color]"></SvgIcon>
                     </span>
                     <div class="card-panel">
                       <div class="card-left">
-                        <div class="tag">{{ col.tag }}</div>
+                        <div class="tag">{{ cItem.wtnum }}</div>
                         <div class="num">
                           <i class="fa fa-user"></i>
-                          <span>{{ col.num1 }}</span>
+                          <span>{{ cItem.fdl }}</span>
                         </div>
                       </div>
                       <div class="card-right">
                         <div class="num">
                           <i class="fa fa-user"></i>
-                          <span>{{ col.num2 }}</span>
+                          <span>{{ cItem.gl }}</span>
                         </div>
                         <div class="num">
                           <i class="fa fa-user"></i>
-                          <span>{{ col.num3 }}</span>
+                          <span>{{ cItem.fs }}</span>
                         </div>
                       </div>
                     </div>
@@ -105,6 +106,10 @@ import Row from "@/components/coms/grid/row.vue";
 import Col from "@/components/coms/grid/col.vue";
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
 import util from "@/helper/util.js";
+
+import { datainit, webtest } from "@tools/websocket.js";
+import store from "@store/index.js";
+
 export default {
   // 名称
   name: "LightMatrix3",
@@ -115,8 +120,11 @@ export default {
     SvgIcon,
   },
   // 数据
-  data() {
+  data () {
     return {
+      loadingFlg: false, // 遮罩开关
+      websocketServe: null, // websocket 服务实例
+      sourceMap: {}, // 核心数据
       mapping: {
         green: "svg-standby",
         blue: "svg-normal-power",
@@ -129,87 +137,87 @@ export default {
       panelData: {
         first: {
           icon: "svg-photovoltaic",
-          text: "接入光伏",
-          num: 256,
+          text: "接入风场",
+          key: "fcjrnum",
         },
         datas: [
           {
             color: "green",
             name: "待机",
             nameIcon: "svg-standby",
-            num: 50,
+            calcStr: ["fcdjnum", "fcsdtjnum"],
             numIcon: "svg-manual",
             text1: "待风",
-            num1: 30,
+            key1: "fcdjnum",
             text2: "手动停机",
-            num2: 30,
+            key2: "fcsdtjnum",
           },
           {
             color: "blue",
             name: "运行",
             nameIcon: "svg-normal-power",
-            num: 50,
+            calcStr: ["fczcfdnum", "fcqxjclnum"],
             numIcon: "svg-drop-output",
             text1: "正常发电",
-            num1: 30,
-            text2: "降出力",
-            num2: 30,
+            key1: "fczcfdnum",
+            text2: "降出力运行",
+            key2: "fcqxjclnum",
           },
           {
             color: "purple",
             name: "限电",
             nameIcon: "svg-limit-power",
-            num: 50,
+            calcStr: ["fcxdjclnum", "fcxdtjnum"],
             numIcon: "svg-downtime",
-            text1: "降出力",
-            num1: 30,
+            text1: "限电降出力",
+            key1: "fcxdjclnum",
             text2: "停机",
-            num2: 30,
+            key2: "fcxdtjnum",
           },
           {
             color: "red",
             name: "故障",
             nameIcon: "svg-gz-downtime",
-            num: 50,
+            calcStr: ["fcgztjnum", "fccnsltjnum"],
             numIcon: "svg-field-involved",
             text1: "故障停机",
-            num1: 30,
+            key1: "fcgztjnum",
             text2: "场内受累",
-            num2: 30,
+            key2: "fccnsltjnum",
           },
           {
             color: "orange",
-            name: "检测",
+            name: "检休",
             nameIcon: "svg-jx-downtime",
-            num: 50,
+            calcStr: ["fcjcnum", "fccnsljxnum"],
             numIcon: "svg-field-involved",
             text1: "检修停机",
-            num1: 30,
+            key1: "fcjxtjnum",
             text2: "产内受累",
-            num2: 30,
-          },
-          {
-            color: "gray",
-            name: "离线",
-            nameIcon: "svg-offline",
-            num: 50,
-            numIcon: "svg-unknown",
-            text1: "离线",
-            num1: 30,
-            text2: "未知",
-            num2: 30,
+            key2: "fccnsljxnum",
           },
           {
             color: "write",
             name: "受累",
+            calcStr: ["fcdwslnum", "fchjslnum"],
             nameIcon: "svg-intranet-involvement",
-            num: 50,
             numIcon: "svg-environment",
             text1: "电网",
-            num1: 30,
+            key1: "fcdwslnum",
             text2: "环境",
-            num2: 30,
+            key2: "fchjslnum",
           },
+          {
+            color: "gray",
+            name: "离线",
+            nameIcon: "svg-offline",
+            key: "fclxnum",
+            numIcon: "svg-unknown",
+            text1: "离线",
+            key1: "fclxnum",
+            text2: "未知",
+            key2: "fcwznum",
+          }
         ],
       },
       tables: [
@@ -218,78 +226,78 @@ export default {
           subTitleDatas: [
             {
               text: "接入台数",
-              num: 256,
               color: "write",
+              key: "jrts"
             },
             {
               text: "待机台数",
-              num: 256,
               color: "green",
+              key: "djts"
             },
             {
               text: "并网台数",
-              num: 256,
               color: "blue",
+              key: "yxts",
             },
             {
               text: "限电台数",
-              num: 256,
               color: "purple",
+              key: "xdts"
             },
             {
               text: "故障台数",
-              num: 256,
               color: "red",
+              key: "gzts"
             },
             {
               text: "检修台数",
-              num: 256,
               color: "orange",
+              key: "whts"
             },
             {
               text: "受累台数",
-              num: 256,
               color: "write",
+              key: "slts"
             },
             {
               text: "离线台数",
-              num: 256,
               color: "gray",
+              key: "lxts"
             },
             {
               text: "风速",
-              num: 256,
               color: "gray",
+              key: "ssfs"
             },
             {
               text: "预测功率",
-              num: 256,
               color: "gray",
+              key: "ycgl"
             },
             {
               text: "保证功率",
-              num: 256,
               color: "gray",
+              key: "bzgl"
             },
             {
               text: "应发功率",
-              num: 256,
               color: "gray",
+              key: "yfgl"
             },
             {
               text: "实际功率",
-              num: 256,
               color: "gray",
+              key: "sjgl"
             },
             {
               text: "AGC指令",
-              num: 256,
               color: "gray",
+              key: "agcygsd"
             },
             {
               text: "出线功率",
-              num: 256,
               color: "gray",
+              key: "agccxyg"
             },
           ],
           datas: [
@@ -308,7 +316,38 @@ export default {
   },
   // 函数
   methods: {
-    createGroupDatas: function(table) {
+    // 根据风机状态码返回对应 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 (table) {
       table.groupDatas = [];
       let tempDatas = [];
       table.datas.forEach((data, index) => {
@@ -326,11 +365,8 @@ export default {
       }
     },
   },
-  // 生命周期钩子
-  beforeCreate() {
-    // 创建前
-  },
-  created() {
+
+  created () {
     // 创建后
     let tempData = [];
     for (let i = 0; i < 45; i++) {
@@ -360,18 +396,50 @@ export default {
       this.tables.push(util.copy(this.tables[0]));
     }
   },
-  beforeMount() {
-    // 渲染前
-  },
-  mounted() {
+
+  mounted () {
     // 渲染后
+    let that = this;
+    that.loadingFlg = true;
+    that.BASE.showLoading();
+    that.$nextTick(() => {
+      that.websocketServe && that.websocketServe.disconnect();
+      that.API.requestData({
+        method: "POST",
+        subUrl: "admin/websocketdisconnect",
+        success () {
+          that.websocketServe = datainit("/topic/matrixdetialpushtask");
+        }
+      });
+    });
   },
-  beforeUpdate() {
-    // 数据更新前
-  },
-  updated() {
-    // 数据更新后
-  },
+
+  watch: {
+    // 监听 websocket 回调并包装数据用于展示
+    '$store.state.windturbineMap': function (res) {
+      this.loadingFlg && this.BASE.closeLoading();
+      this.loadingFlg = false;
+      if (res) {
+        let sourceMap = JSON.parse(res);
+        for (let key in sourceMap) {
+          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 = {};
+      }
+    }
+  }
+
 };
 </script>
 
@@ -660,7 +728,7 @@ export default {
 
           .sub-count {
             font-size: 1.296vh;
-            font-family: "Bicubik";
+            font-family: 'Bicubik';
             font-weight: 500;
 
             &.write {