风场矩阵模块完成

src/components/other/healthReport/index.vue

@@ -16,12 +16,9 @@
           <el-form-item class="imp fw">主要参数指标数据：</el-form-item>
         </el-form>
         <el-table :data="tableData" border stripe max-height="300" style="width: 100%; margin:10px 0;">
-          <el-table-column prop="date" label="日期">
-          </el-table-column>
-          <el-table-column prop="name" label="姓名">
-          </el-table-column>
-          <el-table-column prop="address" label="地址">
-          </el-table-column>
+          <el-table-column prop="date" label="日期"></el-table-column>
+          <el-table-column prop="name" label="姓名"></el-table-column>
+          <el-table-column prop="address" label="地址"></el-table-column>
         </el-table>
         <el-form>
           <el-form-item class="imp fw">运行分析员：</el-form-item>
@@ -58,12 +55,9 @@
         <el-form-item class="imp fw">发电机</el-form-item>
         <el-form-item>1）关键参数：发电机采用“发电机转速”、“发电机轴A温度” 、“发电机轴B温度”为关键参数，该参数在统计周期内数据显示样本在安全运行区内，没有超过进入劣化区</el-form-item>
         <el-table :data="tableData" border stripe max-height="300" style="width: 100%; margin:10px 0;">
-          <el-table-column prop="date" label="日期">
-          </el-table-column>
-          <el-table-column prop="name" label="姓名">
-          </el-table-column>
-          <el-table-column prop="address" label="地址">
-          </el-table-column>
+          <el-table-column prop="date" label="日期"></el-table-column>
+          <el-table-column prop="name" label="姓名"></el-table-column>
+          <el-table-column prop="address" label="地址"></el-table-column>
         </el-table>
         <el-form-item>2）震动监测：</el-form-item>
         <el-form-item>时域分析分析法</el-form-item>
@@ -84,12 +78,9 @@
             、“变频器温度3”为关键参数，该参数在统计周期内数据显示样本在安全运行区内，没有超过进入劣化区</p>
         </div>
         <el-table :data="tableData" border stripe max-height="300" style="width: 100%; margin:10px 0;">
-          <el-table-column prop="date" label="日期">
-          </el-table-column>
-          <el-table-column prop="name" label="姓名">
-          </el-table-column>
-          <el-table-column prop="address" label="地址">
-          </el-table-column>
+          <el-table-column prop="date" label="日期"></el-table-column>
+          <el-table-column prop="name" label="姓名"></el-table-column>
+          <el-table-column prop="address" label="地址"></el-table-column>
         </el-table>
         <el-form-item>2）震动监测：</el-form-item>
         <el-form-item>时域分析分析法</el-form-item>
@@ -119,15 +110,64 @@
       </div>
       <div class="r">
         <el-table :data="tableData" border stripe max-height="300" style="width: 100%; margin:10px 0;">
-          <el-table-column prop="date" label="日期">
-          </el-table-column>
-          <el-table-column prop="name" label="姓名">
-          </el-table-column>
-          <el-table-column prop="address" label="地址">
-          </el-table-column>
+          <el-table-column prop="date" label="日期"></el-table-column>
+          <el-table-column prop="name" label="姓名"></el-table-column>
+          <el-table-column prop="address" label="地址"></el-table-column>
         </el-table>
       </div>
     </div>
+    <div class="textBox">
+      <el-form>
+        <el-form-item class="imp fw">2、设备可利用率</el-form-item>
+      </el-form>
+    </div>
+    <div class="tableBox">
+      <div class="l">
+        <div class="infoBox">
+          <p>麻黄山近期温度较高，温度超限类故障较多，但近三个月，麻黄山1#风机可利用呈增长趋势，7~9月，非计划小时数分别为33小时、28小时和13小时。故障次数分别是8次、5次和2次</p>
+          <p>9月，麻黄山1#风机设备可利用率为89，可靠性尚可。</p>
+        </div>
+      </div>
+      <div class="r">
+        <el-table :data="tableData" border stripe max-height="300" style="width: 100%; margin:10px 0;">
+          <el-table-column prop="date" label="日期"></el-table-column>
+          <el-table-column prop="name" label="姓名"></el-table-column>
+          <el-table-column prop="address" label="地址"></el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <div class="textBox">
+      <el-form>
+        <el-form-item class="imp fw">3、拟合优度</el-form-item>
+      </el-form>
+    </div>
+    <div class="tableBox">
+      <div class="l">
+        <div class="infoBox">
+          <p>风机应发功率与实发功率比值接近，近三个月，拟合优度分别为0.2、0.3和0.2，性能损失分别是519.82kWh、2015.4kWh和478.3kWh整体性能情况尚可。</p>
+        </div>
+      </div>
+      <div class="r">
+        <el-table :data="tableData" border stripe max-height="300" style="width: 100%; margin:10px 0;">
+          <el-table-column prop="date" label="日期"></el-table-column>
+          <el-table-column prop="name" label="姓名"></el-table-column>
+          <el-table-column prop="address" label="地址"></el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <div class="textBox">
+      <el-form>
+        <el-form-item class="imp fw">4、性能评价</el-form-item>
+      </el-form>
+    </div>
+    <div class="infoBox">
+      <p>麻黄山1#风机近三个月性能评价良好，整体排名考前，2016年9月性能评价指标横向对比良好。</p>
+    </div>
+    <el-table :data="tableData" border stripe max-height="300" style="width: 100%; margin:10px 0;">
+      <el-table-column prop="date" label="日期"></el-table-column>
+      <el-table-column prop="name" label="姓名"></el-table-column>
+      <el-table-column prop="address" label="地址"></el-table-column>
+    </el-table>
   </el-dialog>
 </template>
 

src/router/index.js

@@ -33,7 +33,7 @@ const routes = [
       path: 'draughtfanlist',
       component: () => import(/* webpackChunkName: "windsitedraughtfanlist" */ '../views/WindSite/pages/DraughtFanList.vue'),
     }, {
-      path: 'matrix',
+      path: 'matrix', // 风场矩阵
       component: () => import(/* webpackChunkName: "windsitematrix" */ '../views/WindSite/pages/Matrix.vue'),
     }, {
       path: 'lightmatrix',

src/views/WindSite/pages/Matrix.vue

@@ -4,31 +4,31 @@
       <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2>
     </div>
     <div class="panel-title">
-      <div class="panel-title-name">
+      <div class="panel-title-name" v-if="sourceMap">
         <i class="fa fa-send"></i>
-        <span>某某某风电场</span>
+        <span>{{sourceMap.fczbmap.jczbmap.name}}</span>
         <span class="sub-title">接入台数</span>
-        <span class="sub-count">256</span>
+        <span class="sub-count">{{sourceMap.fczbmap.jczbmap.yxts}}</span>
       </div>
     </div>
-    <div class="panel-body">
-      <div class="card" v-for="(col, j) of datas" :key="j" :class="col.color">
+    <div class="panel-body" v-for="(pItem, pIndex) of sourceMap.fjmap" :key="pIndex">
+      <div class="card" v-for="(cItem, cIndex) of pItem" :key="cIndex" :class="cItem.color">
         <div class="card-panel">
           <div class="card-left">
-            <div class="tag">{{ col.tag }}</div>
+            <div class="tag">{{ cItem.wtnum }}</div>
           </div>
           <div class="card-right">
-            <div class="num">{{ col.num1 }}</div>
-            <div class="num">{{ col.num2 }}</div>
-            <div class="num">{{ col.num3 }}</div>
+            <div class="num">{{ cItem.gl }}</div>
+            <div class="num">{{ cItem.fs }}</div>
+            <div class="num">{{ cItem.fdjzs }}</div>
           </div>
         </div>
         <div class="card-percent">
-          <div class="percent" :style="'width: ' + col.percent + '%'"></div>
+          <div class="percent" :style="'width: ' + cItem.lyl + '%'"></div>
         </div>
       </div>
       <!-- 站位用 保证卡片布局最后一行不会有问题 -->
-      <i class="blank" v-for="i in datas.length" :key="i"></i>
+      <i class="blank" v-for="i in pItem.length" :key="i"></i>
     </div>
   </div>
 </template>
@@ -43,9 +43,16 @@ export default {
   components: {
     BtnGroup2,
   },
-  // 数据
-  data() {
+
+  data () {
     return {
+      timmer: null, // 遮罩开关
+      sourceMap: { // 核心数据
+        fczbmap: {
+          jczbmap: {}
+        },
+        fjmap: []
+      },
       col: 15,
       datas: [
         {
@@ -107,46 +114,91 @@ export default {
       ],
     };
   },
-  // 函数
-  methods: {},
-  // 生命周期钩子
-  beforeCreate() {
-    // 创建前
-  },
-  created() {
-    // 创建后
-    let tempData = [];
-    for (let i = 0; i < 195; i++) {
-      tempData.push(util.copy(this.datas[0]));
-      if (i == 115) {
-        tempData[i].color = "pink";
-      }
-      if (i == 116) {
-        tempData[i].color = "orange";
-      }
-      if (i == 117) {
-        tempData[i].color = "red";
-      }
-      if (i == 118) {
-        tempData[i].color = "write";
-      }
-      if (i == 119) {
-        tempData[i].color = "gray";
+
+  methods: {
+    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;
       }
+    },
+
+    // 请求服务
+    requestData (showLoading) {
+      let that = this;
+      that.API.requestData({
+        showLoading,
+        method: "POST",
+        subUrl: "matrix/matrixByWpIdPush",
+        data: {
+          wpId: "MHS_FDC"
+        },
+        success (res) {
+          console.log(123123, res.data);
+          if (res.data) {
+            let sourceMap = res.data;
+            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 = that.getColor(cItem.fjzt);
+                    cItem.isShow = true;
+                  });
+                });
+              }
+            }
+            that.sourceMap = sourceMap;
+          } else {
+            that.sourceMap = {};
+          }
+
+        },
+      });
+    },
+
+    select (res) {
+      // console.log("res", res);
     }
-    this.datas = util.copy(tempData);
-  },
-  beforeMount() {
-    // 渲染前
   },
-  mounted() {
-    // 渲染后
+
+  created () {
+    let that = this;
+    that.$nextTick(() => {
+      that.requestData(false);
+      that.timmer = setInterval(() => {
+        that.requestData(false);
+      }, that.$store.state.websocketTimeSec);
+    });
   },
-  beforeUpdate() {
-    // 数据更新前
+
+  mounted () {
+
   },
-  updated() {
-    // 数据更新后
+
+  unmounted () {
+    clearInterval(this.timmer);
+    this.timmer = null;
   },
 };
 </script>