新增健康报表弹窗，去除请求loading

src/components/chart/line/double-line-chart.vue

@@ -113,7 +113,7 @@ export default {
       default: "",
     },
   },
-  data() {
+  data () {
     return {
       id: "",
       chart: null,
@@ -121,20 +121,20 @@ export default {
     };
   },
   computed: {
-    colorValue() {
+    colorValue () {
       return partten.getColor(this.color);
     },
-    datas() {
+    datas () {
       return this.list.map((t) => {
         return t.value;
       });
     },
-    xdata() {
+    xdata () {
       return this.list[0].value.map((t) => {
         return t.text;
       });
     },
-    series() {
+    series () {
       let result = [];
 
       this.list.forEach((value, index) => {
@@ -158,7 +158,7 @@ export default {
 
       return result;
     },
-    yAxis() {
+    yAxis () {
       let result = [];
       result.push({
         type: "value",
@@ -177,7 +177,7 @@ export default {
     },
   },
   methods: {
-    hexToRgba(hex, opacity) {
+    hexToRgba (hex, opacity) {
       let rgbaColor = "";
       let reg = /^#[\da-f]{6}$/i;
       if (reg.test(hex)) {
@@ -185,7 +185,7 @@ export default {
       }
       return rgbaColor;
     },
-    initChart() {
+    initChart () {
       let option = {
         color: this.color,
         tooltip: {
@@ -195,7 +195,7 @@ export default {
             color: "#fff",
             fontSize: util.vh(16),
           },
-          formatter: function(param) {
+          formatter: function (param) {
             console.log(param);
             return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
           },
@@ -227,16 +227,18 @@ export default {
       this.chart.setOption(option);
     },
   },
-  created() {
+  created () {
     this.id = "pie-chart-" + util.newGUID();
   },
-  mounted() {
-    this.$el.style.width = this.width;
-    this.$el.style.height = this.height;
-    this.chart = echarts.init(this.$el);
-    this.initChart();
+  mounted () {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.chart = echarts.init(this.$el);
+      this.initChart();
+    });
   },
-  updated() {
+  updated () {
     this.initChart();
   },
 };

src/components/other/healthReport/index.vue

@@ -0,0 +1,262 @@
+<template>
+  <el-dialog custom-class="cDialog" top="50px" v-model="dialogVisible" width="80%" @closed="dialogClosed">
+    <div slot="title">
+      <div class="title">健康评价报告概述</div>
+    </div>
+    <el-form style="margin-top:10px;">
+      <el-form-item>健康状态：2016C505513</el-form-item>
+    </el-form>
+    <div class="tableBox">
+      <div class="l">
+        <el-form>
+          <el-form-item class="imp fw">麻黄山001号风机</el-form-item>
+          <el-form-item class="imp fw">评级结果：A+ </el-form-item>
+          <el-form-item class="imp fw">评级展望：稳定</el-form-item>
+          <el-form-item class="imp fw">评级有效期：一个月</el-form-item>
+          <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>
+        <el-form>
+          <el-form-item class="imp fw">运行分析员：</el-form-item>
+          <el-form-item class="imp fw">报告出具时间：2016-09-30</el-form-item>
+          <el-form-item>注：本报告表述了健康管理系统对该设备的健康评级观点，仅供参考，并非是最终的决策的结论、建议。</el-form-item>
+        </el-form>
+      </div>
+      <div class="r">
+        <el-form>
+          <el-form-item class="imp fw" style="border-bottom:8px solid #000;">评级观点：</el-form-item>
+          <div class="infoBox">
+            <p>麻黄山001号风机于2010年9月26日并网运行，本年累计发电量为5,100万Kwh，平均故障时间为72小时，平均故障发生周期为100小时。</p>
+            <p>去年同期故障发生率为0%</p>
+            <p class="red">本年1-8月份故障次数22次</p>
+            <p class="red">温度类故障10次集中在7-8月份</p>
+            <p class="red">安全链故障5次集中在3月份</p>
+            <p class="red">其他类故障7次</p>
+            <p class="purple">消缺主要手段采用</p>
+            <p class="purple">复位70%</p>
+            <p class="purple">检修30%</p>
+            <p class="purple">部件更换0%</p>
+            <p class="purple">本年9月份故障次数2次</p>
+            <p class="purple">传感器类故障 100%</p>
+            <p>预警9次全部是温度类预警，集中在7-8月份</p>
+            <p>风机整体性能稳定，性能损失电量占比为11%，性能评估等级B+</p>
+            <p class="red">总体预估10分月该台风机运行状态良好，不需要作为重点关注。</p>
+          </div>
+        </el-form>
+      </div>
+    </div>
+    <div class="textBox">
+      <el-form>
+        <el-form-item class="imp fw">部件：</el-form-item>
+        <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>
+        <el-form-item>2）震动监测：</el-form-item>
+        <el-form-item>时域分析分析法</el-form-item>
+        <div class="infoBox">
+          <p>有量纲参数：均值为100，方差为49，均方幅值67，峰值，260，平均幅值44，均方值120</p>
+          <p>无量纲参数：峭度指标20，峰值指标50，波形指标90，脉冲指标77</p>
+          <p>结合两种指标都位发现明显劣化值</p>
+        </div>
+        <el-form-item>时域分析分析法</el-form-item>
+        <DoubleLineChart style="margin:10px 0;" width="100%" height="300px" />
+        <el-form-item>3）统计分析：</el-form-item>
+        <div class="infoBox">
+          <p>发电机类故障，平均故障周期在12个月，上次故障距此次评价时间为5个月，发电机处于平稳运行周期，</p>
+        </div>
+        <el-form-item class="imp fw">变桨</el-form-item>
+        <div class="infoBox">
+          <p>1）关键参数：变桨采用“变桨电机温度1”、“变桨电机温度2” 、“变桨电机温度3”、“变频器温度1”、“变频器温度2”
+            、“变频器温度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>
+        <el-form-item>2）震动监测：</el-form-item>
+        <el-form-item>时域分析分析法</el-form-item>
+        <div class="infoBox">
+          <p>有量纲参数：均值为100，方差为49，均方幅值67，峰值，260，平均幅值44，均方值120</p>
+          <p>无量纲参数：峭度指标20，峰值指标50，波形指标90，脉冲指标77</p>
+          <p>结合两种指标都位发现明显劣化值</p>
+        </div>
+        <el-form-item>频域分析法：根据震动检测提供频域分析结果，现有设备运行正常</el-form-item>
+        <DoubleLineChart style="margin:10px 0;" width="100%" height="300px" />
+        <el-form-item>2）震动监测：</el-form-item>
+        <div class="infoBox">
+          <p>发电机类故障，平均故障周期在12个月，上次故障距此次评价时间为5个月，发电机处于平稳运行周期，</p>
+        </div>
+        <el-form-item class="imp fw">指标：</el-form-item>
+        <el-form-item class="imp fw">1、风能利用率</el-form-item>
+      </el-form>
+    </div>
+    <div class="tableBox" style="margin:20px 0;">
+      <div class="l">
+        <div class="infoBox">
+          <p>近三月，受宁夏电网限电，及自然天气情况等因素影响，麻黄山1#风机发电能力在这个三个月程下降趋势，但非计划损失电量和计划损失电量逐渐减少，风能利用率并未体现出递减趋势，而是逐步增长。</p>
+          <p>2016年9月，非计划检修率和计划检修率分别为6%和12%，计划检修率尚可，风机产生的非计划检修率还存在，但较前两月明显较低。</p>
+          <p>风机因自身原因造成5%的性能损失率，在可接受范围。</p>
+          <p>总体来看，该风机逐步进入平稳期，风能利用率增长趋势，可利率较高。</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>
+  </el-dialog>
+</template>
+
+<script>
+import DoubleLineChart from "@com/chart/line/double-line-chart.vue";
+
+export default {
+  data () {
+    return {
+      dialogVisible: false, // 弹窗是否显示
+      tableData: [{ // 表格1数据
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }]
+    };
+  },
+
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  components: {
+    DoubleLineChart
+  },
+
+  mounted () {
+    this.dialogVisible = this.show;
+  },
+
+  methods: {
+    dialogClosed () {
+      this.dialogVisible = false;
+      this.$emit("closed", false);
+    }
+  },
+
+  watch: {
+    show (value) {
+      this.dialogVisible = value;
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.cDialog {
+  .title {
+    text-align: center;
+    font-size: 24px;
+    font-weight: 700;
+  }
+
+  .tableBox {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .l,
+    .r {
+      width: 49%;
+      align-self: flex-start;
+    }
+
+    .fw {
+      font-weight: 700;
+    }
+  }
+
+  .infoBox {
+    margin-top: 10px;
+    font-size: 16px;
+
+    .red {
+      color: #f25656;
+    }
+
+    .purple {
+      color: rgb(112, 88, 209);
+    }
+
+    p {
+      text-indent: 2em;
+    }
+  }
+
+  .textBox {
+    width: 100%;
+    margin-top: 10px;
+    font-size: 16px;
+  }
+}
+</style>
+
+<style lang="less">
+.cDialog {
+  .cell {
+    text-align: center;
+  }
+
+  .el-dialog__body {
+    max-height: 700px;
+    overflow-y: scroll;
+  }
+
+  .el-form-item.imp {
+    .el-form-item__content {
+      font-size: 20px;
+    }
+  }
+
+  .el-form-item {
+    margin-bottom: 0;
+  }
+}
+</style>

src/router/index.js

@@ -13,12 +13,12 @@ const routes = [
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
   },
   {
-    path: '/status',
+    path: '/status', // 状态监视
     name: 'Status',
     component: () => import(/* webpackChunkName: "status" */ '../views/Status/Status.vue')
   },
   {
-    path: '/agc',
+    path: '/agc', // AGC 监视
     name: 'Agc',
     component: () => import(/* webpackChunkName: "agc" */ '../views/Agc/Agc.vue')
   },
@@ -44,27 +44,27 @@ const routes = [
     }, {
       path: 'Info',
       component: () => import(/* webpackChunkName: "windsitebox" */ '../views/WindSite/pages/Info/Info.vue')
-    },{
-        path: 'tower',
-        component: () => import(/* webpackChunkName: "windsitetower" */ '../views/WindSite/pages/Tower.vue')
+    }, {
+      path: 'tower',
+      component: () => import(/* webpackChunkName: "windsitetower" */ '../views/WindSite/pages/Tower.vue')
     }]
   },
   {
-    path: '/lightmatrix',
+    path: '/lightmatrix', // 光伏明细矩阵
     name: 'LightMatrix',
     component: () => import(/* webpackChunkName: "lightmatrix" */ '../views/LightMatrix/LightMatrix.vue')
   },
   {
-    path: '/lightmatrix1',
+    path: '/lightmatrix1', // 基础矩阵
     name: 'LightMatrix1',
     component: () => import(/* webpackChunkName: "lightmatrix1" */ '../views/LightMatrix1/LightMatrix1.vue')
   },
   {
-    path: '/lightmatrix2',
+    path: '/lightmatrix2', // 欠发矩阵
     name: 'LightMatrix2',
     component: () => import(/* webpackChunkName: "lightmatrix2" */ '../views/LightMatrix2/LightMatrix2.vue')
   }, {
-    path: '/lightmatrix3',
+    path: '/lightmatrix3', // 明细矩阵
     name: 'LightMatrix3',
     component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/LightMatrix3/LightMatrix3.vue')
   },

src/views/About.vue

@@ -1,16 +1,31 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <h1 @click="showDialog">This is an about page</h1>
+    <HealthReport :show="show" @closed="(res) => { this.show=false; }" />
     <!-- <list-bar-chart /> -->
   </div>
 </template>
 
 <script>
 // import ListBarChart from "../components/chart/bar/list-bar-chart.vue";
+import HealthReport from "@com/other/healthReport";
 // 导入header.vue文件
 export default {
+  data () {
+    return {
+      show: false
+    }
+  },
+
   components: {
     // ListBarChart,
+    HealthReport
   },
+
+  methods: {
+    showDialog () {
+      this.show = true;
+    }
+  }
 };
 </script>

src/views/Agc/Agc.vue

@@ -148,7 +148,7 @@ export default {
   created () {
     let that = this;
     that.$nextTick(() => {
-      that.requestData(true);
+      that.requestData(false);
       that.timmer = setInterval(() => {
         that.requestData(false);
       }, that.$store.state.websocketTimeSec);

src/views/LightMatrix/LightMatrix.vue

@@ -378,7 +378,7 @@ export default {
   created () {
     let that = this;
     that.$nextTick(() => {
-      that.requestData(true);
+      that.requestData(false);
       that.timmer = setInterval(() => {
         that.requestData(false);
       }, that.$store.state.websocketTimeSec);

src/views/LightMatrix1/LightMatrix1.vue

@@ -318,7 +318,7 @@ export default {
   created () {
     let that = this;
     that.$nextTick(() => {
-      that.requestData(true);
+      that.requestData(false);
       that.timmer = setInterval(() => {
         that.requestData(false);
       }, that.$store.state.websocketTimeSec);

src/views/LightMatrix2/LightMatrix2.vue

@@ -340,7 +340,7 @@ export default {
   created () {
     let that = this;
     that.$nextTick(() => {
-      that.requestData(true);
+      that.requestData(false);
       that.timmer = setInterval(() => {
         that.requestData(false);
       }, that.$store.state.websocketTimeSec);

src/views/LightMatrix3/LightMatrix3.vue

@@ -381,7 +381,7 @@ export default {
   created () {
     let that = this;
     that.$nextTick(() => {
-      that.requestData(true);
+      that.requestData(false);
       that.timmer = setInterval(() => {
         that.requestData(false);
       }, that.$store.state.websocketTimeSec);

src/views/Status/Status.vue

@@ -181,14 +181,11 @@ export default {
   },
   // 函数
   methods: {},
-  // 生命周期钩子
-  beforeCreate () {
-    // 创建前
-  },
+
   created () {
     let that = this;
     that.loadingFlg = true;
-    that.BASE.showLoading();
+    // that.BASE.showLoading();
     that.$nextTick(() => {
       that.websocketServe && that.websocketServe.disconnect();
       that.API.requestData({
@@ -205,10 +202,18 @@ export default {
 
   },
 
+  unmounted () {
+    this.websocketServe && this.websocketServe.disconnect();
+    this.API.requestData({
+      method: "POST",
+      subUrl: "admin/websocketdisconnect"
+    });
+  },
+
   watch: {
     // 监听 websocket 回调并包装数据用于展示
     '$store.state.windturbineMap': function (res) {
-      this.loadingFlg && this.BASE.closeLoading();
+      // this.loadingFlg && this.BASE.closeLoading();
       this.loadingFlg = false;
       if (res) {
         let sourceMap = JSON.parse(res);
@@ -236,7 +241,8 @@ export default {
             },
             items: [
               {
-                f1: ("AGC" + ele.name.replace(/风电场/g, "") + ":"),
+                // f1: ("AGC" + ele.name.replace(/风电场/g, "") + ":"),
+                f1: "AGC:",
                 f2: "设定",
                 f3: ele.agcygsd,
                 f4: "出线",
@@ -245,9 +251,9 @@ export default {
               },
               {
                 f1: "升压站:",
-                f2: "出线Uab",
+                f2: "Uab",
                 f3: ele.uab,
-                f4: "电流La",
+                f4: "Ia",
                 f5: ele.ia,
                 is_light: false,
               },