单机状态监视模块完成

src/components/coms/collapse/collapse-list.vue

@@ -5,7 +5,7 @@
         {{ menu.text }}
       </div>
       <div class="collapse-items">
-        <div class="item" v-for="(item, j) in menu.children" :key="item" @click="itemClick(j)" :class="{ active: itemIndex == j }">
+        <div class="item" v-for="(item, j) in menu.children" :key="item" @click.stop="itemClick(item ,j)" :class="{ active: itemIndex == j }">
           <span class="dot" :class="'bg-' + item.color"></span>
           <span class="value"> {{ item.text }}</span>
         </div>
@@ -98,7 +98,7 @@ export default {
   },
   computed: {},
   // 数据
-  data() {
+  data () {
     return {
       menuIndex: 0,
       itemIndex: 0,
@@ -106,29 +106,29 @@ export default {
   },
   // 函数
   methods: {
-    menuClick: function(index) {
+    menuClick: function (index) {
       this.menuIndex = index;
-      this.itemIndex = 0;
     },
-    itemClick(index) {
+    itemClick (clickItem, index) {
       this.itemIndex = index;
+      this.$emit("click", clickItem);
     },
   },
   // 生命周期钩子
-  beforeCreate() {
+  beforeCreate () {
     // 创建前
   },
-  created() {
+  created () {
     // 创建后
   },
-  beforeMount() {
+  beforeMount () {
     // 渲染前
   },
-  mounted() {},
-  beforeUpdate() {
+  mounted () { },
+  beforeUpdate () {
     // 数据更新前
   },
-  updated() {
+  updated () {
     // 数据更新后
   },
 };

src/router/index.js

@@ -42,7 +42,7 @@ const routes = [
       path: 'box',
       component: () => import(/* webpackChunkName: "windsitebox" */ '../views/WindSite/pages/Box.vue'),
     }, {
-      path: 'info',
+      path: 'info', // 单机状态监视
       component: () => import(/* webpackChunkName: "windsitebox" */ '../views/WindSite/pages/Info/Info.vue'),
     }, {
       path: 'tower',

src/views/WindSite/pages/Home/Home.vue

@@ -317,6 +317,32 @@ 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;
+      }
+    },
     // 请求服务
     requestData (showLoading) {
       this.requestWpInfo(showLoading);
@@ -421,7 +447,7 @@ export default {
             res.data.fjjzmap.fjmap[0].forEach((ele) => {
               fjmap.push({
                 tag: ele.wtnum,
-                color: "gray",
+                color: that.getColor(ele.fjzt),
               });
             });
 

src/views/WindSite/pages/Info/Base-Info.vue

@@ -6,23 +6,23 @@
         <span class="svg-icon svg-icon-green mg-r-8">
           <svg-icon class="" :svgid="'svg-normal-power'" />
         </span>
-        MA B401
+        {{sourceMap.code}}
       </div>
       <div class="wind-site-tag">
         <div class="tag-text">所属线路</div>
-        <div class="tag-value">某某某1线</div>
+        <div class="tag-value">{{sourceMap.lnname}}</div>
       </div>
       <div class="wind-site-tag">
         <div class="tag-text">机型</div>
-        <div class="tag-value">GW1000</div>
+        <div class="tag-value">{{sourceMap.lnname}}</div>
       </div>
       <div class="wind-site-tag">
         <div class="tag-text">告警时间</div>
-        <div class="tag-value">2021年5月10日 12:23:31</div>
+        <div class="tag-value">{{sourceMap.gxkmap && sourceMap.gxkmap.bjsj}}</div>
       </div>
       <div class="wind-site-tag">
         <div class="tag-text">告警内容</div>
-        <div class="tag-value">通讯中断</div>
+        <div class="tag-value">{{sourceMap.gxkmap && sourceMap.gxkmap.bjmc}}</div>
       </div>
     </el-row>
     <!-- 发电信息 -->
@@ -31,23 +31,23 @@
         <el-row class="generation background pd-8 mg-r-8">
           <div class="mg-r-8">
             <div class="generation-text">日发电量</div>
-            <div class="generation-value green">1,495<span class="unit">kwh</span></div>
+            <div class="generation-value green">{{sourceMap.jczbmap && sourceMap.jczbmap.RFDL}}<span class="unit">kwh</span></div>
           </div>
           <el-row class="wind-site-state">
             <el-col :span="6">
-              <div class="value">123</div>
+              <div class="value">{{sourceMap.jczbmap && sourceMap.jczbmap.FJKYL}}</div>
               <div class="text">月可利用率</div>
             </el-col>
             <el-col :span="6">
-              <div class="value">123</div>
+              <div class="value">{{sourceMap.gxkmap && sourceMap.gxkmap.ygzxs}}</div>
               <div class="text">月故障小时数</div>
             </el-col>
             <el-col :span="6">
-              <div class="value">123</div>
-              <div class="text">月等效小时数</div>
+              <div class="value">{{sourceMap.gxkmap && sourceMap.gxkmap.ytjxs}}</div>
+              <div class="text">月待机小时数</div>
             </el-col>
             <el-col :span="6">
-              <div class="value">123</div>
+              <div class="value">{{sourceMap.gxkmap && sourceMap.gxkmap.yyxxs}}</div>
               <div class="text">月发电小时数</div>
             </el-col>
           </el-row>
@@ -57,7 +57,7 @@
         <el-row type="flex" justify="center" :align="'middle'" class="power-load">
           <!-- 功率复核 PowerLoad -->
           <el-col v-for="item in PowerLoad" :key="item" :span="6">
-            <dash-pie-chart :title="item.title" :value="item.value" height="9.722vh" />
+            <dash-pie-chart :title="item.title" :value="sourceMap.jczbmap && sourceMap.jczbmap[item.key]" height="9.722vh" />
           </el-col>
         </el-row>
       </el-col>
@@ -71,30 +71,38 @@
             <div class="svg-icon svg-icon-gray-l mg-r-16">
               <svg-icon :svgid="'svg-normal-power'" />
             </div>
-            <div class="title">基本信息</div>
+            <div class="title">发电机</div>
           </div>
           <div class="panel-body">
             <table class="table-form">
               <tr>
-                <td class="text gray">有功功率</td>
-                <td class="value green">1557</td>
-                <td class="unit gray">KW</td>
-                <td class="text gray">风速</td>
-                <td class="value green">12.57</td>
-                <td class="unit gray">m/s</td>
+                <td class="text gray">U1绕组温度</td>
+                <td class="value green">{{sourceMap.fdjmap && sourceMap.fdjmap.U1YZWD}}</td>
+                <td class="unit gray">℃</td>
+                <td class="text gray">V1绕组温度</td>
+                <td class="value green">{{sourceMap.fdjmap && sourceMap.fdjmap.V1YZWD}}</td>
+                <td class="unit gray">℃</td>
               </tr>
               <tr>
-                <td class="text gray">有功功率</td>
-                <td class="value green">1557</td>
-                <td class="unit gray">KW</td>
-                <td class="text gray">风速</td>
-                <td class="value green">12.57</td>
-                <td class="unit gray">m/s</td>
+                <td class="text gray">W1绕组温度</td>
+                <td class="value green">{{sourceMap.fdjmap && sourceMap.fdjmap.W1YZWD}}</td>
+                <td class="unit gray">℃</td>
+                <td class="text gray">发电机轴承A温度</td>
+                <td class="value green">{{sourceMap.fdjmap && sourceMap.fdjmap.FDJZCAWD}}</td>
+                <td class="unit gray">℃</td>
               </tr>
               <tr>
-                <td class="text gray">有功功率</td>
-                <td class="value green">1557</td>
-                <td class="unit gray">KW</td>
+                <td class="text gray">发电机轴承B温度</td>
+                <td class="value green">{{sourceMap.fdjmap && sourceMap.fdjmap.FDJZCBWD}}</td>
+                <td class="unit gray">℃</td>
+                <td class="text gray">发电机冷却风温度</td>
+                <td class="value green">{{sourceMap.fdjmap && sourceMap.fdjmap.FDJLQFWD}}</td>
+                <td class="unit gray">℃</td>
+              </tr>
+              <tr>
+                <td class="text gray">发电机滑环温度</td>
+                <td class="value green">{{sourceMap.fdjmap && sourceMap.fdjmap.FDJHHWD}}</td>
+                <td class="unit gray">℃</td>
                 <td class="text gray"></td>
                 <td class="value green"></td>
                 <td class="unit gray"></td>
@@ -108,41 +116,33 @@
             <div class="svg-icon svg-icon-gray-l mg-r-16">
               <svg-icon :svgid="'svg-normal-power'" />
             </div>
-            <div class="title">基本信息</div>
+            <div class="title">齿轮箱</div>
           </div>
           <div class="panel-body">
             <table class="table-form">
               <tr>
-                <td class="text gray">风机型号</td>
-                <td class="value green">1557</td>
-                <td class="unit gray"></td>
-                <td class="text gray">控制版本系统</td>
-                <td class="value green">12.57</td>
-                <td class="unit gray"></td>
+                <td class="text gray">润滑油滤网入口压力</td>
+                <td class="value green">{{sourceMap.clxmap && sourceMap.clxmap.RHYLWRKYL}}</td>
+                <td class="unit gray">Kw</td>
+                <td class="text gray">润滑油滤网出口压力</td>
+                <td class="value green">{{sourceMap.clxmap && sourceMap.clxmap.RHYLWCKYL}}</td>
+                <td class="unit gray">Kw</td>
               </tr>
               <tr>
-                <td class="text gray">变桨类型</td>
-                <td class="value green">1557</td>
-                <td class="unit gray"></td>
-                <td class="text gray">变频器类型</td>
-                <td class="value green">12.57</td>
-                <td class="unit gray"></td>
-              </tr>
-              <tr>
-                <td class="text gray">齿香类型</td>
-                <td class="value green">1557</td>
-                <td class="unit gray"></td>
-                <td class="text gray">发电机类型</td>
-                <td class="value green"></td>
-                <td class="unit gray"></td>
+                <td class="text gray">齿轮箱输入轴1温度</td>
+                <td class="value green">{{sourceMap.clxmap && sourceMap.clxmap.CLXSRZ1WD}}</td>
+                <td class="unit gray">℃</td>
+                <td class="text gray">齿轮箱输入轴2温度</td>
+                <td class="value green">{{sourceMap.clxmap && sourceMap.clxmap.CLXSRZ2WD}}</td>
+                <td class="unit gray">℃</td>
               </tr>
               <tr>
-                <td class="text gray">总发电量</td>
-                <td class="value green">2455619</td>
-                <td class="unit gray">VKwh</td>
-                <td class="text gray"></td>
-                <td class="value green"></td>
-                <td class="unit gray"></td>
+                <td class="text gray">齿轮箱油温</td>
+                <td class="value green">{{sourceMap.clxmap && sourceMap.clxmap.CLXYW}}</td>
+                <td class="unit gray">℃</td>
+                <td class="text gray">齿轮箱入口油温</td>
+                <td class="value green">{{sourceMap.clxmap && sourceMap.clxmap.CLXRKYW}}</td>
+                <td class="unit gray">℃</td>
               </tr>
             </table>
           </div>
@@ -153,40 +153,32 @@
             <div class="svg-icon svg-icon-gray-l mg-r-16">
               <svg-icon :svgid="'svg-normal-power'" />
             </div>
-            <div class="title">基本信息</div>
+            <div class="title">变桨</div>
           </div>
           <div class="panel-body">
             <table class="table-form">
               <tr>
-                <td class="text gray">叶片1偏角</td>
-                <td class="value green">7.14</td>
-                <td class="unit gray">°</td>
-                <td class="text gray">叶片2偏角</td>
-                <td class="value green">7.14</td>
-                <td class="unit gray">°</td>
+                <td class="text gray">U1项绕组电流</td>
+                <td class="value green">{{sourceMap.bjmap && sourceMap.bjmap.U1YZDL}}</td>
+                <td class="unit gray">A</td>
+                <td class="text gray">U2项绕组电流</td>
+                <td class="value green">{{sourceMap.bjmap && sourceMap.bjmap.U2YZDL}}</td>
+                <td class="unit gray">A</td>
               </tr>
               <tr>
+                <td class="text gray">U3项绕组电流</td>
+                <td class="value green">{{sourceMap.bjmap && sourceMap.bjmap.U3YZDL}}</td>
+                <td class="unit gray">A</td>
                 <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
+                <td class="value green">{{sourceMap.bjmap && sourceMap.bjmap.U1YZDY}}</td>
                 <td class="unit gray">V</td>
               </tr>
               <tr>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
+                <td class="text gray">U2项绕组电压</td>
+                <td class="value green">{{sourceMap.bjmap && sourceMap.bjmap.U2YZDY}}</td>
                 <td class="unit gray">V</td>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-              </tr>
-              <tr>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
+                <td class="text gray">U2项绕组电压</td>
+                <td class="value green">{{sourceMap.bjmap && sourceMap.bjmap.U3YZDY}}</td>
                 <td class="unit gray">V</td>
               </tr>
             </table>
@@ -200,41 +192,17 @@
             <div class="svg-icon svg-icon-gray-l mg-r-16">
               <svg-icon :svgid="'svg-normal-power'" />
             </div>
-            <div class="title">基本信息</div>
+            <div class="title">偏航</div>
           </div>
           <div class="panel-body">
             <table class="table-form">
               <tr>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-              </tr>
-              <tr>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-              </tr>
-              <tr>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-              </tr>
-              <tr>
-                <td class="text gray">功率因数</td>
-                <td class="value green">0</td>
-                <td class="unit gray"></td>
-                <td class="text gray">频率</td>
-                <td class="value green">50.02</td>
-                <td class="unit gray">HZ</td>
+                <td class="text gray">对风角度</td>
+                <td class="value green">{{sourceMap.phmap && sourceMap.phmap.DFJD}}</td>
+                <td class="unit gray">度</td>
+                <td class="text gray">偏航位置</td>
+                <td class="value green">{{sourceMap.phmap && sourceMap.phmap.PHWZ}}</td>
+                <td class="unit gray">度</td>
               </tr>
             </table>
           </div>
@@ -245,49 +213,25 @@
             <div class="svg-icon svg-icon-gray-l mg-r-16">
               <svg-icon :svgid="'svg-normal-power'" />
             </div>
-            <div class="title">基本信息</div>
+            <div class="title">液压</div>
           </div>
           <div class="panel-body">
             <table class="table-form">
               <tr>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-              </tr>
-              <tr>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-              </tr>
-              <tr>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
+                <td class="text gray">液压系统油压</td>
+                <td class="value green">{{sourceMap.yymap && sourceMap.yymap.YYXTYY}}</td>
+                <td class="unit gray">Pa</td>
+                <td class="text gray">转子刹车系统液压</td>
+                <td class="value green">{{sourceMap.yymap && sourceMap.yymap.ZZSCXTYY}}</td>
+                <td class="unit gray">Pa</td>
               </tr>
               <tr>
-                <td class="text gray">功率因数</td>
-                <td class="value green">0</td>
-                <td class="unit gray"></td>
-                <td class="text gray">频率</td>
-                <td class="value green">50.02</td>
-                <td class="unit gray">HZ</td>
-              </tr>
-              <tr>
-                <td class="text gray">功率因数</td>
-                <td class="value green">0</td>
-                <td class="unit gray"></td>
-                <td class="text gray">频率</td>
-                <td class="value green">50.02</td>
-                <td class="unit gray">HZ</td>
+                <td class="text gray">液压油温</td>
+                <td class="value green">{{sourceMap.yymap && sourceMap.yymap.YYYW}}</td>
+                <td class="unit gray">℃</td>
+                <td class="text gray">液压系统油压</td>
+                <td class="value green">{{sourceMap.yymap && sourceMap.yymap.FDJLQSWD}}</td>
+                <td class="unit gray">Pa</td>
               </tr>
             </table>
           </div>
@@ -308,31 +252,46 @@ export default {
       type: String,
       default: "",
     },
+    data: {
+      type: Object,
+      default: () => { },
+    },
   },
-  data() {
+  data () {
     return {
+      sourceMap: {},
       // 功率复核数据
       PowerLoad: [
         {
           title: "风速",
-          value: 12.3,
+          key: "FS",
         },
         {
           title: "保证功率",
-          value: 22,
+          key: "LLGL",
         },
         {
           title: "应发功率",
-          value: 33,
+          key: "YFGL",
         },
         {
           title: "实发功率",
-          value: 44,
+          key: "GL",
         },
       ],
     };
   },
   methods: {},
+
+  mounted () {
+    this.sourceMap = this.data;
+  },
+
+  watch: {
+    data (value) {
+      this.sourceMap = value;
+    }
+  }
 };
 </script>
 

src/views/WindSite/pages/Info/Info.vue

@@ -3,25 +3,26 @@
     <div class="wind-site-menu">
       <div class="wind-site-title">选择风机</div>
       <div class="wind-site-body">
-        <collapse-list :list="WindSites" />
+        <collapse-list :list="WindSites" @click="clickMenu" />
       </div>
     </div>
     <div class="wind-site-info-body">
       <div class="info-menu mg-b-16">
-        <div class="info-menu-item" v-for="(item, index) in InfoBtns.data" :key="item" :class="{ active: InfoBtns.activeIndex == index }" @click="onInfoMenuItemClick(item, index)">{{ item.text }}</div>
+        <div class="info-menu-item" v-for="(item, index) in InfoBtns.data" :key="item" :class="{ active: InfoBtns.activeIndex == index }"
+          @click="onInfoMenuItemClick(item, index)">{{ item.text }}</div>
       </div>
       <el-row>
         <el-col :span="16" class="pd-r-16" style="text-align: center;">
           <!-- 基本信息 使用 v-if 每次点击重新加载  -->
           <!-- 使用 v-show 首次全部加载 之后隐藏 点击后显示 -->
-          <base-info v-show="InfoBtns.activeIndex == 0" />
+          <base-info v-show="InfoBtns.activeIndex == 0" :data="sourceMap" />
           <!-- <base-info v-if="InfoBtns.activeIndex == 2" /> -->
           <StandAloneImg class="sai" v-show="InfoBtns.activeIndex != 0" :activeIndex="InfoBtns.activeIndex" @selectSvg="selectSvg"></StandAloneImg>
           <generator class="saig" v-show="InfoBtns.activeIndex == 1"></generator>
           <gearbox class="saig" v-show="InfoBtns.activeIndex == 2"></gearbox>
         </el-col>
         <el-col :span="8">
-          <warning />
+          <warning :data="WarnData" />
         </el-col>
       </el-row>
     </div>
@@ -43,73 +44,13 @@ export default {
       default: "",
     },
   },
-  data() {
+  data () {
     return {
-      WindSites: [
-        {
-          id: "1",
-          text: "某某风电场",
-          children: [
-            {
-              id: "1",
-              text: "2E01",
-              color: "green",
-            },
-            {
-              id: "2",
-              text: "2E01",
-              color: "red",
-            },
-            {
-              id: "3",
-              text: "2E01",
-              color: "blue",
-            },
-          ],
-        },
-        {
-          id: "2",
-          text: "某某风电场",
-          children: [
-            {
-              id: "1",
-              text: "2E01",
-              color: "green",
-            },
-            {
-              id: "2",
-              text: "2E01",
-              color: "green",
-            },
-            {
-              id: "3",
-              text: "2E01",
-              color: "green",
-            },
-          ],
-        },
-        {
-          id: "2",
-          text: "某某风电场",
-          children: [
-            {
-              id: "1",
-              text: "2E01",
-              color: "green",
-            },
-            {
-              id: "2",
-              text: "2E01",
-              color: "green",
-            },
-            {
-              id: "3",
-              text: "2E01",
-              color: "green",
-            },
-          ],
-        },
-      ],
+      timmer: null, // 计时器
+      wtId: "", // 风机ID
+      sourceMap: {},
+      WarnData: {},
+      WindSites: [],
       InfoBtns: {
         activeIndex: 0,
         data: [
@@ -149,13 +90,140 @@ export default {
       },
     };
   },
+
   methods: {
-    onInfoMenuItemClick(item, index) {
+    onInfoMenuItemClick (item, index) {
       this.InfoBtns.activeIndex = index;
     },
-    selectSvg: function(index) {
+
+    selectSvg (index) {
       this.InfoBtns.activeIndex = index;
     },
+
+    // 根据风机状态码返回对应 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;
+      }
+    },
+
+    // 请求服务
+    requestData (showLoading) {
+      this.getSimpleMatrixAll(showLoading);
+    },
+
+    // 获取场列表
+    getSimpleMatrixAll (showLoading) {
+      let that = this;
+      that.API.requestData({
+        showLoading,
+        method: "POST",
+        subUrl: "matrix/findSimpleMatrixAll",
+        data: {
+          wpId: "MHS_FDC"
+        },
+        success (res) {
+          let WindSites = [];
+
+          res.data.forEach((ele, index) => {
+            WindSites.push({
+              id: String(index),
+              text: ele.wpName,
+              children: []
+            });
+          });
+
+          res.data.forEach((pEle, pIndex) => {
+            pEle.fjls[0].forEach(cEle => {
+              WindSites[pIndex].children.push({
+                id: cEle.wtId,
+                text: cEle.wtnum,
+                color: that.getColor(cEle.fjzt)
+              });
+            });
+          });
+
+          that.WindSites = WindSites;
+
+          if (res.data.length) {
+            that.wtId = that.wtId || res.data[0].fjls[0][0].wtId;
+            that.getWtInfo();
+          }
+        }
+      });
+    },
+
+    // 获取风机信息
+    getWtInfo () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "monitorwt/findWtInfo",
+        data: {
+          wtId: that.wtId
+        },
+        success (res) {
+          that.sourceMap = res.data;
+          that.getWarnInfo();
+        }
+      });
+    },
+
+    // 获取报警信息
+    getWarnInfo () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "monitorwt/findWtWarnInfo",
+        data: {
+          wtId: that.wtId
+        },
+        success (res) {
+          that.WarnData = res.data;
+        }
+      });
+    },
+
+    // 点击左侧菜单
+    clickMenu (res) {
+      this.wtId = res.id;
+      this.getWtInfo();
+    }
+  },
+
+  created () {
+    let that = this;
+    that.$nextTick(() => {
+      that.requestData(false);
+      that.timmer = setInterval(() => {
+        that.requestData(false);
+      }, that.$store.state.websocketTimeSec);
+    });
+  },
+
+  unmounted () {
+    clearInterval(this.timmer);
+    this.timmer = null;
   },
 };
 </script>

src/views/WindSite/pages/Info/Warning.vue

@@ -5,12 +5,13 @@
         <div class="query">
           <input class="search-input" name="query" v-model="query" />
         </div>
-        <button class="btn search">搜索</button>
+        <button class="btn search" @click="search">搜索</button>
         <div class="empty"></div>
-        <button class="btn empty-btn">重置</button>
+        <button class="btn empty-btn" @click="reset">重置</button>
       </el-row>
       <el-row class="options">
-        <el-col class="option-item" :span="8" v-for="option in options" :key="option" @click="onOptionClick(option)" :class="{ active: option.isActive, 'has-value': option.count != '' }">
+        <el-col class="option-item" :span="8" v-for="(option, index) in options" :key="option" @click="onOptionClick(option, index)"
+          :class="{ active: option.isActive, 'has-value': option.count != '' }">
           <div class="count">{{ option.count }}</div>
           <div class="text">{{ option.text }}</div>
         </el-col>
@@ -28,211 +29,147 @@ export default {
   components: {
     Table,
   },
-  data() {
+  data () {
     return {
       query: "",
-      options: [
-        {
-          id: "",
-          text: "总故障",
-          count: "1",
-          isActive: true,
-        },
-        {
-          id: "",
-          text: "总故障",
-          count: "",
-          isActive: false,
-        },
-        {
-          id: "",
-          text: "总故障",
-          count: "1",
-          isActive: false,
-        },
-        {
-          id: "",
-          text: "叶轮刹车类",
-          count: "1",
-          isActive: false,
-        },
-        {
-          id: "",
-          text: "发电机类",
-          count: "1",
-          isActive: false,
-        },
-        {
-          id: "",
-          text: "电网类",
-          count: "1",
-        },
-        {
-          id: "",
-          text: "电网类",
-          count: "1",
-        },
-      ],
+      options: [],
+      ackupData: {},
       warning: {
         column: [
-          {
-            name: "报警编号",
-            field: "Code",
-            is_num: true, // 是否为数字
-          },
+          // {
+          //   name: "报警编号",
+          //   field: "Code",
+          //   is_num: true, // 是否为数字
+          // },
           {
             name: "PLC变量名",
-            field: "Text",
+            field: "name",
           },
           {
             name: "报警信息",
-            field: "Warning",
+            field: "value",
           },
           {
             name: "报警状态",
-            field: "State",
-            template: function(data) {
-              if (data != "正常") return "<div class='error-state'></div>";
-              else return data;
+            field: "data1",
+            template: function (data) {
+              if (data === 1) return "<div class='error-state'></div>";
+              else return "正常";
             },
           },
         ],
-        data: [
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "不正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-        ],
+        data: [],
       },
+      activeArray: [],
+      isSearch: false,
     };
   },
+
+  props: {
+    data: {
+      type: Object,
+      default: () => { }
+    }
+  },
+
+  mounted () {
+    this.backupData = this.BASE.deepCopy(this.data);
+    this.riseData(this.data);
+  },
+
   methods: {
-    onOptionClick(option) {
+    onOptionClick (option, index) {
       option.isActive = !option.isActive;
+      this.activeArray[index] = !this.activeArray[index];
+
+      let warningData = [];
+
+      this.activeArray.forEach((bool, index) => {
+        if (bool) {
+          this.options[index].vos.forEach(ele => {
+            warningData.push(ele);
+          });
+        }
+      });
+
+      this.warning.data = warningData;
+      this.isSearch = false;
+      this.query = "";
+    },
+
+    // 格式化数据
+    riseData (data) {
+      let options = [];
+      let warningData = [];
+      let index = 0;
+
+      for (let key in data) {
+        data.index = index;
+
+        if (this.activeArray.length < (index + 1)) {
+          this.activeArray.push(false);
+        }
+
+        options.push({
+          id: data[key].id,
+          text: data[key].name,
+          vos: data[key].vos,
+          count: data[key].vos.length,
+          isActive: this.activeArray[index]
+        });
+
+        if (this.activeArray[index]) {
+          data[key].vos.forEach(ele => {
+            warningData.push(ele);
+          });
+        }
+
+        index++;
+      }
+
+      this.options = options;
+      this.warning.data = warningData;
+
+      if (this.isSearch) {
+        this.search();
+      }
+    },
+
+    search () {
+      // 压器类总
+      this.isSearch = true;
+      if (this.query) {
+        let warningData = [];
+        this.BASE.deepCopy(this.warning.data).forEach(ele => {
+          if (ele.name.indexOf(this.query) !== -1) {
+            warningData.push(ele);
+          }
+        });
+        this.warning.data = warningData;
+      } else {
+        this.riseData(this.data)
+      }
     },
+
+    reset () {
+
+      for (let i = 0; i < this.activeArray.length; i++) {
+        this.activeArray[i] = false;
+      }
+
+      this.isSearch = false;
+      this.query = "";
+      let sourceMap = this.BASE.deepCopy(this.backupData);
+      this.riseData(sourceMap, true);
+    }
   },
+
+  watch: {
+    data (res) {
+      this.backupData = this.BASE.deepCopy(res);
+      this.riseData(res);
+    }
+  }
 };
 </script>