场站健康管理模块完成

src/router/index.js

@@ -119,7 +119,7 @@ const routes = [
     component: () => import('../views/HealthControl/Health2.vue'),
   },
   {
-    path: '/health/health3/:wpId',
+    path: '/health/health3/:wpId', // 场站健康管理
     name: 'health3',
     component: () => import('../views/HealthControl/Health3.vue'),
   },

src/views/HealthControl/Health2.vue

@@ -112,8 +112,7 @@ export default {
       wpmap:[],
       lineData:[],
       tableData: {
-        column: [
-          {
+        column: [{
             name: "",
             field: "",
             is_num: false,

src/views/HealthControl/Health3.vue

@@ -21,7 +21,7 @@
       </div>
       <div class="info-chart">
         <panel class="info-chart-panel" :title="'损失电量分析'">
-          <vertival-bar-line-chart :height="'310px'" />
+          <vertival-bar-line-chart :bardata="bardata" :lineData="lineData" :height="'310px'" />
         </panel>
       </div>
     </div>
@@ -30,41 +30,41 @@
         <panel title="预测电量" class="mg-b-16">
           <list-bar-chart :list="listBarData1" :colors="listBarData1Color" :height="'9.5vh'" />
           <div class="dashboard">
-            <dashboard-2 :height="'7.5vh'" :width="'115px'" :value="25" />
+            <dashboard-2 :height="'7.5vh'" :width="'115px'" :value="sourceMap.rfdl" />
             <div class="lengends">
               <div class="item">
-                <span class="label">本日预测电量</span>
+                <span class="label">本日发电量</span>
                 <span class="lengend gary"></span>
-                <span class="value">123</span>
+                <span class="value">{{sourceMap.rfdl}}</span>
               </div>
               <div class="item">
-                <span class="label">本日已发电量</span>
+                <span class="label">本日预测电量</span>
                 <span class="lengend green"></span>
-                <span class="value">123</span>
+                <span class="value">{{sourceMap.ycdl1day}}</span>
               </div>
             </div>
           </div>
           <div class="dashboard">
-            <dashboard-2 :height="'7.5vh'" :width="'115px'" :value="34" />
+            <dashboard-2 :height="'7.5vh'" :width="'115px'" :value="sourceMap.yfdl" />
             <div class="lengends">
               <div class="item">
-                <span class="label">本日预测电量</span>
+                <span class="label">本月发电量</span>
                 <span class="lengend gary"></span>
-                <span class="value">123</span>
+                <span class="value">{{sourceMap.yfdl}}</span>
               </div>
               <div class="item">
-                <span class="label">本日已发电量</span>
+                <span class="label">本月预测电量</span>
                 <span class="lengend green"></span>
-                <span class="value">123</span>
+                <span class="value">{{sourceMap.yczqlmonth}}</span>
               </div>
             </div>
           </div>
         </panel>
         <panel title="设备健康度" class="mg-b-16">
-          <thermometer-v-chart :height="'5.5vh'" :value="100" />
+          <thermometer-v-chart :height="'5.5vh'" :value="sourceMap.jkd" />
         </panel>
         <panel title="隐患等级" class="mg-b-16">
-          <normal-pie-chart :height="'14vh'" />
+          <normal-pie-chart :list="dangerData" :height="'14vh'" />
         </panel>
       </div>
       <div class="right-info">
@@ -73,26 +73,23 @@
             <div class="tools">
               <span class="level">
                 <span class="text green">优</span>：
-                <span class="value white">98</span>
+                <span class="value white">{{sourceMap.ysl}}</span>
                 <span class="unit gray">台</span>
               </span>
               <span class="level">
                 <span class="text purple">良</span>：
-                <span class="value white">98</span>
+                <span class="value white">{{sourceMap.lsl}}</span>
                 <span class="unit gray">台</span>
               </span>
               <span class="level">
                 <span class="text orange">差</span>：
-                <span class="value white">98</span>
+                <span class="value white">{{sourceMap.csl}}</span>
                 <span class="unit gray">台</span>
               </span>
             </div>
           </template>
           <div class="matrix">
-            <div class="item green">1号</div>
-            <div class="item purple">2号</div>
-            <div class="item orange">3号</div>
-            <div class="item" v-for="index of 100" :key="index">{{ index + 3 }}号</div>
+            <div class="item" :class="item[1] === '1' ? 'green' : item[1] === '2' ? 'purple' : 'orange'" v-for="(item, index) in sourceMap.wtIdls" :key="index">{{item[2]}}</div>
             <div class="blank" v-for="index of 20" :key="index"></div>
           </div>
         </toolbar-panel>
@@ -119,89 +116,100 @@ export default {
   components: { SvgIcon, Panel, VertivalBarLineChart, Table, ListBarChart, ThermometerVChart, NormalPieChart, ToolbarPanel, Dashboard2 },
   data () {
     return {
-      sourceMap: {},
+      sourceMap: {
+        wtIdls:[]
+      },
       type: "2",
+      bardata:{
+        area:[],
+        legend:[],
+        data:[[]]
+      },
+      lineData:[],
       listBarData1: [],
+      dangerData:[],
       listBarData1Color: ["purple", "purple"],
       tableData: {
-        column: [
-          {
+        column: [{
             name: "",
-            field: "index",
+            field: "",
             is_num: false,
             is_light: false,
           },
           {
-            name: "项目",
-            field: "name",
+            name: "风机编号",
+            field: "windTurbineId",
             is_num: false,
             is_light: false,
           },
           {
-            name: "项目",
-            field: "lqf",
+            name: "故障时间",
+            field: "stopTime",
             is_num: false,
             is_light: false,
           },
           {
-            name: "项目",
-            field: "yggl",
+            name: "故障类型",
+            field: "stopTypeId",
             is_num: false,
             is_light: false,
           },
           {
-            name: "项目",
-            field: "yyy",
+            name: "报警描述",
+            field: "warningId",
             is_num: false,
             is_light: false,
           },
-          {
-            name: "项目",
-            field: "pcspp",
-            is_num: false,
-            is_light: false,
-          },
-        ],
-        data: [
-          {
-            index: 1,
-            name: "MG01-01",
-            lqf: "0.1000",
-            yggl: "0.1000",
-            yyy: "0.10",
-            pcspp: "0.1000",
-            u1: "0.1000",
-            u2: "0.1000",
-            v1: "0.1000",
-            v2: "0.1000",
-            w1: "0.1000",
-            w2: "0.1000",
-            zca: "0.1000",
-            zcb: "0.1000",
-            clx: "0.1000",
-            clx1: "0.1000",
-            clx2: "0.1000",
-            jc: "0.1000",
-            hh: "0.1000",
-            hj: "0.1000",
-            is_light: false,
-          },
         ],
+        data: [],
       },
     };
   },
   created () {
     this.wpId = this.$route.params.wpId;
-    for (let i = 1; i < 50; i++) {
-      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
-      this.tableData.data[i].index = i + 1;
-    }
     this.$nextTick(()=>{
+      this.requestData();
       this.getWpMap();
     });
   },
 
   methods: {
+
+    requestData(){
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "recommen/findAllChartjz",
+        data: {
+          wpId: that.wpId,
+          type: that.type
+        },
+        success (res) {
+          // 顶部图表绿线
+          let lineData = res.data.lvchart;
+
+          let area = res.data.datechart;
+          let legend = ["优数量", "良数量", "差数量"];
+          let data = [];
+
+          let dataLength = res.data.datechart.length;
+
+          for(let i=0;i<dataLength;i++){
+            data.push([res.data.yslchart[i], res.data.lslchart[i], res.data.cslchart[i]]);
+          }
+
+          let bardata = {
+            area,
+            legend,
+            data
+          };
+
+          that.bardata = bardata;
+          that.lineData = lineData;
+        }
+      });
+    },
+
     getWpMap () {
       let that = this;
       that.API.requestData({
@@ -211,11 +219,34 @@ export default {
           wpId: that.wpId
         },
         success (res) {
-          console.log(111, res);
           that.listBarData1= [
             { name: "未来 {c1|15分钟} 预测电量", value: res.data.ycdl15minute },
             { name: "未来 {c1|4小时} 预测电量", value: res.data.ycdl1hour },
           ];
+
+          let dangerData=[{
+            name:"一级隐患",
+            value:0
+          },{
+            name:"二级隐患",
+            value:0
+          },{
+            name:"三级隐患",
+            value:0
+          },{
+            name:"四级隐患",
+            value:0
+          },{
+            name:"五级隐患",
+            value:0
+          }];
+
+          dangerData.forEach((ele,index) => {
+            ele.value=res.data.yhls[index];
+          });
+
+          that.dangerData = dangerData;
+          that.tableData.data = res.data.gzls;
           that.sourceMap = res.data;
         }
       });

src/views/Status/Status.vue

@@ -2,6 +2,7 @@
   <div class="status">
     <div class="panel-box">
       <StatusPanel class="panel-item" v-for="(data, index) of datas" :key="index" :data="data"></StatusPanel>
+      <StatusPanelStatic class="panel-item" />
     </div>
     <div class="table-box">
       <ComTable :data="tableData"></ComTable>
@@ -11,6 +12,7 @@
 
 <script>
 import StatusPanel from "./components/status-panel.vue";
+import StatusPanelStatic from "./components/static.vue";
 import ComTable from "@com/coms/table/table.vue";
 import util from "@/helper/util.js";
 
@@ -23,6 +25,7 @@ export default {
   components: {
     StatusPanel,
     ComTable,
+    StatusPanelStatic
   },
   // 数据
   data() {

src/views/Status/components/static.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="status-panel">
+    <div class="pause" v-if="true">中断</div>
+    <ComPanel class="status-com-panel" :title="'abc场站'">
+      <div class="p-body">
+        <div class="category-box">
+          <div class="score">
+            <span>0</span>
+          </div>
+          <div class="box">
+            <div class="category-item">
+              <div>001</div>
+              <div class="green">0</div>
+            </div>
+          </div>
+        </div>
+        <div class="item-box">
+          <div class="data-item">
+            <div class="f1">0</div>
+            <div class="f2">0</div>
+            <div class="f3">0</div>
+            <div class="f4">0</div>
+            <div class="f5">0</div>
+          </div>
+        </div>
+      </div>
+    </ComPanel>
+  </div>
+</template>
+
+<script>
+import ComPanel from "@com/coms/panel/panel.vue";
+export default {
+  // 名称
+  name: "StatusPanel",
+  // 使用组件
+  components: {
+    ComPanel,
+  },
+  /**
+   * {
+          title: "某某某风电场",
+          weather: {
+              type: "cloudy",
+              temperature: 11
+          },
+          breakOff: false,
+          category: {
+              score: 66,
+              datas: [
+                  { text: "运行", num: 30, color: 'green' },
+                  { text: "待机", num: 27, color: 'purple' },
+                  { text: "限电", num: 30, color: 'yellow' },
+                  { text: "检修", num: 30, color: 'orange' },
+                  { text: "故障", num: 13, color: 'red' },
+                  { text: "受累", num: 30, color: 'blue' },
+                  { text: "离线", num: 30, color: 'gray' },
+              ]
+          },
+          items: [
+              { f1: 'AGC宋六:', f2: '设定', f3: '66', f4: '出线', f5: '11', is_light: true },
+              { f1: '升压站:', f2: '出线Uab/La', f3: '23/3 23/3', f4: '电压', f5: '103 103', is_light: false },
+              { f1: '风功:', f2: '未来15分钟', f3: '103', f4: '', f5: '', is_light: false },
+              { f1: '测风塔:', f2: '风速', f3: '103KM', f4: '风向', f5: '103 62', is_light: false },
+              { f1: '电能量表:', f2: '', f3: '103 62', f4: '', f5: '', is_light: false },
+          ]
+      }
+   */
+  props: {
+    data: Object,
+  },
+  // 数据
+  data() {
+    return {};
+  },
+  // 函数
+  methods: {
+    jumpPage(wpId) {
+      this.$router.push({
+        path: `/monitor/windsite/home/${wpId}`,
+        // query: { wpId: id },
+      });
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.status-panel {
+  position: relative;
+  height: 22.315vh;
+
+  .pause {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    background-color: fade(@darkgray, 50%);
+    color: fade(@write, 60%);
+    font-size: 5.556vh;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.9;
+    backdrop-filter: blur(0.37vh);
+  }
+
+  .status-com-panel {
+    width: 100%;
+    height: 100%;
+
+    .p-body {
+      width: 100%;
+      height: 19.074vh;
+      display: flex;
+      flex-direction: column;
+      margin-top: -0.926vh;
+
+      .category-box {
+        width: 100%;
+        background-color: fade(@darkgray, 30%);
+        display: flex;
+        margin-bottom: 0.37vh;
+
+        .score {
+          padding: 0.833vh 1.481vh;
+
+          span {
+            width: 3.889vh;
+            height: 3.889vh;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: @green;
+            border: 0.093vh solid @green;
+            background-color: fade(@green, 20%);
+            font-size: @fontsize;
+          }
+        }
+
+        .box {
+          flex-grow: 1;
+          display: flex;
+
+          .category-item {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+
+            div {
+              flex: 1;
+              font-size: @fontsize-s;
+
+              &:first-child {
+                display: flex;
+                align-items: flex-end;
+                color: @gray;
+              }
+            }
+          }
+        }
+      }
+
+      .item-box {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+
+        .data-item {
+          flex: 1;
+          display: flex;
+          flex-direction: row;
+          background-color: fade(@darkgray, 20%);
+          margin-top: 0.278vh;
+
+          div {
+            font-size: @fontsize-s;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+          }
+
+          .f1,
+          .f2,
+          .f4 {
+            text-align: right;
+            color: @gray;
+            justify-content: flex-end;
+          }
+
+          .f3,
+          .f5 {
+            font-family: "Bicubik";
+            text-align: left;
+            color: @green;
+            justify-content: flex-start;
+          }
+
+          .f1 {
+            flex: 2;
+          }
+
+          .f2 {
+            flex: 3;
+            margin-right: 0.556vh;
+          }
+
+          .f3 {
+            flex: 3;
+          }
+
+          .f4 {
+            flex: 1;
+            margin-right: 0.556vh;
+          }
+
+          .f5 {
+            flex: 2;
+            margin-right: 0;
+          }
+
+          &.light {
+            background-color: fade(@darkgray, 50%);
+            position: relative;
+
+            &::after {
+              content: "";
+              position: absolute;
+              height: 100%;
+              width: 0.278vh;
+              background-color: @green;
+              top: 0;
+              left: 0;
+            }
+
+            .f1,
+            .f2,
+            .f4 {
+              color: @write;
+            }
+
+            .f3,
+            .f5 {
+              color: fade(@write, 60%);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>