健康管理

src/views/HealthControl/Health5.vue

@@ -89,8 +89,9 @@ export default {
     },
     // 跳转按钮
     onClickJump(item){
+      console.warn(item);
        this.$router.push({
-        path: `/health/health0/${item.wtId}`
+        path: `/health/health0/${item.wpId}/${item.wtId}`
       });
     }
   }

src/views/HealthControl/Health8.vue

@@ -5,88 +5,100 @@
         <div class="query-item">
           <div class="lable">场站：</div>
           <div class="search-input">
-            <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
-              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+            <el-select
+              v-model="value1"
+              clearable
+              placeholder="请选择"
+              popper-class="select"
+              @change="searchWindTurbineHealthList"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+              </el-option>
             </el-select>
           </div>
         </div>
       </div>
     </div>
     <div class="table">
-      <table style="width:100%;" border="0" cellspacing="0">
+      <table style="width: 100%" border="0" cellspacing="0">
         <thead>
           <tr>
-            <th rowspan="2" class="type1" style="width:50px;"></th>
-            <th rowspan="2" class="type1" style="width:105px;">风机编号</th>
-            <th rowspan="2" class="type1" style="width:105px;">风机型号</th>
-            <th rowspan="2" class="type1" style="width:350px;">置信度</th>
-            <th rowspan="2" class="type1" style="width:100px;">健康分数</th>
-            <th rowspan="2" class="type1" style="border: 2px solid #07140f;border-left: 0;">未来风机健康程度</th>
+            <th rowspan="2" class="type1" style="width: 50px"></th>
+            <th rowspan="2" class="type1" style="width: 105px">风机编号</th>
+            <th rowspan="2" class="type1" style="width: 105px">风机型号</th>
+            <th rowspan="2" class="type1" style="width: 350px">置信度</th>
+            <th rowspan="2" class="type1" style="width: 100px">健康分数</th>
+            <th
+              rowspan="2"
+              class="type1"
+              style="border: 2px solid #07140f; border-left: 0"
+            >
+              未来风机健康程度
+            </th>
             <th colspan="8">组件健康度</th>
           </tr>
           <tr>
-            <th style="width:100px;">齿轮箱</th>
-            <th style="width:100px;">发电机</th>
-            <th style="width:100px;">主轴</th>
-            <th style="width:100px;">变桨</th>
-            <th style="width:100px;">偏航</th>
-            <th style="width:100px;">机舱</th>
-            <th style="width:100px;">变频器</th>
-            <th style="width:100px;">主控</th>
+            <th style="width: 100px">齿轮箱</th>
+            <th style="width: 100px">发电机</th>
+            <th style="width: 100px">主轴</th>
+            <th style="width: 100px">变桨</th>
+            <th style="width: 100px">偏航</th>
+            <th style="width: 100px">机舱</th>
+            <th style="width: 100px">变频器</th>
+            <th style="width: 100px">主控</th>
           </tr>
         </thead>
       </table>
       <el-scrollbar>
-        <div style="height:calc(100vh - 174px);">
-          <table style="width:100%;" border="0" cellspacing="0">
+        <div style="height: calc(100vh - 174px)">
+          <table style="width: 100%" border="0" cellspacing="0">
             <tbody>
-              <tr v-for="index of 50" :key="index">
-                <td style="width:50px;">
-                  01
-                </td>
-                <td style="width:105px;">
-                  MG01_01
-                </td>
-                <td style="width:105px;">
-                  UP77
-                </td>
-                <td style="width:350px;">
+              <tr v-for="(item,index) in tableData" :key="index">
+                <td style="width: 50px">{{item.id}}</td>
+                <td style="width: 105px">{{item.wtname}}</td>
+                <td style="width: 105px">{{item.model}}</td>
+                <td style="width: 350px">
                   <div class="percent-item">
-                    80%
+                    {{item.zxd}}%
                     <div class="percent-bar" style="">
-                      <div class="percent-value" style="width:80%"></div>
+                      <div class="percent-value" :style="{'width':`${item.zxd}%`}"></div>
                     </div>
                   </div>
                 </td>
-                <td class="score" style="width:100px;">
-                  <div>100</div>
+                <td class="score" style="width: 100px">
+                  <div>{{item.score}}</div>
                 </td>
                 <td>
-                  <table-line-chart />
+                  <table-line-chart :list='item.futureHealth'/>
                 </td>
                 <td class="item">
-                  <div class="green">优</div>
+                  <div :class="[color(item.clx)]">{{item.clx}}</div>
                 </td>
                 <td class="item">
-                  <div class="purple">优</div>
+                  <div :class="[color(item.fdj)]">{{item.fdj}}</div>
                 </td>
                 <td class="item">
-                  <div class="orange">优</div>
+                  <div :class="[color(item.zz)]">{{item.zz}}</div>
                 </td>
                 <td class="item">
-                  <div class="red">优</div>
+                  <div :class="[color(item.bj)]">{{item.bj}}</div>
                 </td>
                 <td class="item">
-                  <div class="">优</div>
+                  <div :class="[color(item.ph)]">{{item.ph}}</div>
                 </td>
                 <td class="item">
-                  <div class="">优</div>
+                  <div :class="[color(item.jc)]">{{item.jc}}</div>
                 </td>
                 <td class="item">
-                  <div class="">优</div>
+                  <div :class="[color(item.bpq)]">{{item.bpq}}</div>
                 </td>
                 <td class="item">
-                  <div class="">优</div>
+                  <div :class="[color(item.zk)]">{{item.zk}}</div>
                 </td>
               </tr>
             </tbody>
@@ -127,9 +139,40 @@ export default {
         },
       ],
       value1: "",
+      tableData:'',
+      colorval:{
+        '优':'purple',
+        '良':'orange',
+        '差':'red',
+      }
     };
   },
-  created() {},
+  created() {
+    this.search();
+  },
+  methods: {
+    color(val){
+     return this.colorval[val]
+    },
+    async search() {
+      const {data} = await this.API.requestData({
+        subUrl: "powercompare/windfarmAjax",
+      });
+      this.options = data.data
+      this.value1 = data.data[0].id
+      this.searchWindTurbineHealthList()
+    },
+    async searchWindTurbineHealthList(){
+      const {data} = await this.API.requestData({
+        subUrl: "wtHealthList/windTurbineHealthList",
+        method: "POST", 
+        data:{
+          wpId : this.value1
+        }
+      });
+        this.tableData = data.data
+    }
+  },
 };
 </script>
 

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

@@ -1,4 +1,12 @@
 <template>
+ <div class="btn-group-tabs">
+            <BtnGroup2
+                :btnGroups="btnGroupsss"
+                :rowIndex="rowIndex"
+                :index="selectIndex"
+                @select="select"
+            ></BtnGroup2>
+        </div>
   <div class="wind-site-home">
     <div class="mg-b-16">
       <btn-group-double :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select" />
@@ -242,11 +250,14 @@ import Panel3 from "../../../../components/coms/panel/panel3.vue";
 import LightMatrix from "./light-matrix.vue";
 import Station from "./Station.vue";
 import WindSiteWeather from "./wind-site-weather.vue";
+
+import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
+
 export default {
   // 名称
   name: "WindSiteHome",
   // 使用组件
-  components: { WindSiteWeather, Row, Col, Panel, DualPieChart, MultipleLineChart, Panel3, SvgIcon, HoverBarChart, MultipleBarChart, NormalLineChart, LightMatrix, BtnGroupDouble, Station },
+  components: { BtnGroup2, WindSiteWeather, Row, Col, Panel, DualPieChart, MultipleLineChart, Panel3, SvgIcon, HoverBarChart, MultipleBarChart, NormalLineChart, LightMatrix, BtnGroupDouble, Station },
   // 数据
   data() {
     return {
@@ -327,10 +338,76 @@ export default {
           },
         ],
       },
+       selectIndex:0,
+      rowIndex:0,
+      btnGroupsss: [
+                {
+                    icon: "svg-wind-site",
+                    btns: [],
+                },
+                {
+                    icon: "svg-photovoltaic",
+                    btns: [],
+                },
+            ],
     };
   },
   // 函数
   methods: {
+
+
+     getWp(){
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/windfarmAllAjax",
+        success(res) {
+          console.warn(res);
+          let btnGroups = [{
+            icon: "svg-wind-site",
+            btns: []
+          },{
+            icon: "svg-photovoltaic",
+            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.btnGroupsss=btnGroups;
+          that.renderBtnActiveIndex();
+
+        },
+      });
+    },
+
+    renderBtnActiveIndex(){
+      this.btnGroupsss.forEach((pEle,pIndex)=>{
+        pEle.btns.forEach((cEle,cIndex)=>{
+          if(cEle.code === this.wpId) {
+            this.rowIndex=pIndex;
+            this.selectIndex=cIndex;
+          }
+        });
+      });
+    },
+
+    select(res) {
+      this.$router.replace({
+        path: `/monitor/windsite/home/${res.code}`
+      });
+    },
     // 根据风机状态码返回对应 class
     getColor(fjzt) {
       switch (fjzt) {
@@ -620,6 +697,7 @@ export default {
     let that = this;
     that.wpId = that.$route.params.wpId;
     that.$nextTick(() => {
+    that.getWp();
       that.requestData(false);
       that.timmer = setInterval(() => {
         that.requestData(false);
@@ -638,7 +716,16 @@ export default {
     this.timmer = null;
     this.timmer2 = null;
   },
+  watch:{
+    "$route"(res){
+      console.warn('router变化');
+      this.wpId = res.params.wpId;
+      this.requestData(false);
+      this.renderBtnActiveIndex();
+    }
+  }
 };
+
 </script>
 
 <style lang="less">
@@ -738,7 +825,7 @@ export default {
 
         .value {
           font-size: 12px;
-          padding-right: 16px;
+          padding-right: 0.741vh;
         }
       }
 
@@ -759,4 +846,9 @@ export default {
     }
   }
 }
+
+.btn-group-tabs {
+        display: flex;
+        flex-direction: row;
+    }
 </style>

src/views/layout/Menu.vue

@@ -80,11 +80,11 @@ export default {
               icon: "svg-agc",
               path: "/monitor/agc",
             },
-            // {
-            //   text: "风场",
-            //   icon: "svg-wind-site",
-            //   path: "/monitor/windsite/home",
-            // },
+           {
+              text: "风场",
+              icon: "svg-wind-site",
+              path: "/monitor/windsite/home/MHS_FDC",
+            },
           ],
         },
         {