健康报表弹窗模块完成

package.json

@@ -16,6 +16,8 @@
     "echarts-gl": "^2.0.4",
     "element-plus": "^1.0.2-beta.46",
     "font-awesome": "^4.7.0",
+    "html2canvas": "^1.0.0-rc.7",
+    "jspdf": "^2.3.1",
     "stompjs": "^2.3.3",
     "three": "^0.129.0",
     "vivus": "^0.4.6",

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,8 +195,7 @@ export default {
             color: "#fff",
             fontSize: util.vh(16),
           },
-          formatter: function(param) {
-            console.log(param);
+          formatter: function (param) {
             return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
           },
         },
@@ -227,10 +226,12 @@ export default {
       this.chart.setOption(option);
     },
   },
-  created() {
-    this.id = "pie-chart-" + util.newGUID();
+  created () {
+    this.$nextTick(() => {
+      this.id = "pie-chart-" + util.newGUID();
+    });
   },
-  mounted() {
+  mounted () {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
@@ -238,8 +239,10 @@ export default {
       this.initChart();
     });
   },
-  updated() {
-    this.initChart();
+  updated () {
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
 };
 </script>

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

@@ -123,7 +123,7 @@ export default {
       default: () => ["(MW)"],
     },
   },
-  data() {
+  data () {
     return {
       id: "",
       chart: null,
@@ -131,12 +131,12 @@ export default {
     };
   },
   computed: {
-    xdata() {
+    xdata () {
       return this.list[0].value.map((t) => {
         return t.text;
       });
     },
-    yAxis() {
+    yAxis () {
       let result = [];
       this.units.forEach((value, index) => {
         result.push({
@@ -158,7 +158,7 @@ export default {
 
       return result;
     },
-    series() {
+    series () {
       let result = [];
 
       this.list.forEach((value, index) => {
@@ -183,7 +183,7 @@ export default {
     },
   },
   methods: {
-    hexToRgba(hex, opacity) {
+    hexToRgba (hex, opacity) {
       let rgbaColor = "";
       let reg = /^#[\da-f]{6}$/i;
       if (reg.test(hex)) {
@@ -191,7 +191,7 @@ export default {
       }
       return rgbaColor;
     },
-    initChart() {
+    initChart () {
       let option = {
         color: this.color,
         tooltip: {
@@ -201,7 +201,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;
           },
@@ -233,17 +233,23 @@ export default {
       this.chart.setOption(option);
     },
   },
-  created() {
-    this.id = "pie-chart-" + util.newGUID();
+  created () {
+    this.$nextTick(() => {
+      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() {
-    this.initChart();
+  updated () {
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
 };
 </script>

src/components/other/healthReport/index.vue

@@ -1,182 +1,332 @@
 <template>
   <el-dialog custom-class="cDialog" top="50px" v-model="dialogVisible" width="80%" @closed="dialogClosed">
-    <div>
-      <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-button style="position: absolute;right: 24px;top: 60px;z-index: 5000;" type="primary" @click="exportPDF">导出为PDF</el-button>
+    <div class="pdfDom">
+      <div>
+        <div class="title">健康评价报告概述</div>
+        <el-form style="margin-top:10px;">
+          <el-form-item>健康状态：2016C505513</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 class="tableBox">
+          <div class="l">
+            <el-form>
+              <el-form-item class="imp fw">{{jczbmap.fjmc}}</el-form-item>
+              <el-form-item class="imp fw">评级等级：{{jczbmap.pjdj}} </el-form-item>
+              <el-form-item class="imp fw">评级结果：{{jczbmap.pjjg}}</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 empty-text="暂无数据" :data="bjzb" :header-cell-style="{ background: 'rgb(153,204,255)', color: '#000' }"
+              :cell-style="columnStyle" border stripe max-height="300" style="width: 100%; margin:10px 0;">
+              <el-table-column prop="partname" label="部件指标"></el-table-column>
+              <el-table-column prop="q1yjkqk" label="近一月健康情况"></el-table-column>
+              <el-table-column prop="q2yjkqk" label="近两月健康情况"></el-table-column>
+              <el-table-column prop="q3yjkqk" label="近三月健康情况"></el-table-column>
+            </el-table>
+            <el-form>
+              <!-- <el-form-item class="imp fw">运行分析员：</el-form-item> -->
+              <el-form-item class="imp fw">报告出具时间：{{jczbmap.bgrq}}</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>{{jczbmap.fjmc}}于{{jczbmap.bwsj}}并网运行，本年累计发电量为{{jczbmap.nfdl}}万Kwh，本月发电量为{{jczbmap.yfdl}}万Kwh。</p>
+                <p>发电量同期环比：{{jczbmap.yfdlhb}}万Kwh</p>
+                <p>发电量同期同比：{{jczbmap.yfdltb}}万Kwh</p>
+                <p>MTTR：{{jczbmap.mttr || 0}}</p>
+                <p>MTBF：{{jczbmap.mtbf || 0}}</p>
+                <p class="red">本月故障时长：{{jczbmap.ygzsc || 0}}小时</p>
+                <p class="red">发电机故障次数：{{jczbmap.fdlgzcs || 0}}次</p>
+                <p class="red">发电机报警次数：{{jczbmap.fdlbjcs || 0}}次</p>
+                <p class="purple">齿轮箱故障次数：{{jczbmap.clxgzcs || 0}}次</p>
+                <p class="purple">齿轮箱报警次数：{{jczbmap.clxbjcs || 0}}次</p>
+                <p class="red">变浆故障次数：{{jczbmap.bjgzcs || 0}}次</p>
+                <p class="red">变浆报警次数：{{jczbmap.bjbjcs || 0}}次</p>
+                <p class="purple">主控故障次数：{{jczbmap.zkgzcs || 0}}次</p>
+                <p class="purple">主控报警次数：{{jczbmap.zkbjcs || 0}}次</p>
+                <p>风机整体性能等级评估等级：{{jczbmap.pjdj}}</p>
+                <p>总体预估该台风机健康状态{{jczbmap.jkqksm}}</p>
+              </div>
+            </el-form>
           </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 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 empty-text="暂无数据" :data="fdjgjcs" :header-cell-style="{ background: 'rgb(224,224,224)', color: '#000' }"
+              border stripe max-height="300" style="width: 100%; margin:10px 0;">
+              <el-table-column prop="gjcs" label="关键参数"></el-table-column>
+              <el-table-column prop="edz" label="额定值"></el-table-column>
+              <el-table-column prop="yxfw" label="允许范围"></el-table-column>
+              <el-table-column prop="qz" label="权重"></el-table-column>
+              <el-table-column prop="scz" label="实测值"></el-table-column>
+              <el-table-column prop="df" 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" :list="chartmap.fdj" />
+            <!-- <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>齿轮箱采用“齿轮箱温度”为关键参数，该参数在统计周期内数据显示样本超出了劣化区，并且有明显的瞬时的上升趋势，引发了温度超限报警一次，恢复后运行平稳，该风机齿轮箱历史总体运行正常，近期存在报警信息，状态评价为良。</p>
+            </div>
+            <DoubleLineChart style="margin:10px 0;" width="100%" height="300px" :list="chartmap.clx" />
+            <el-form-item class="imp fw">主轴</el-form-item>
+            <div class="infoBox">
+              <p>1）关键参数：主轴采用“主轴承温度”、“主轴承油脂启动时间间隔” 、“主轴承油脂泵运行周期”为关键参数，该参数在统计周期内拟故障应进行检查</p>
+            </div>
+            <el-table empty-text="暂无数据" :data="zzgjcs" :header-cell-style="{ background: 'rgb(224,224,224)', color: '#000' }"
+              border stripe max-height="300" style="width: 100%; margin:10px 0;">
+              <el-table-column prop="gjcs" label="关键参数"></el-table-column>
+              <el-table-column prop="edz" label="额定值"></el-table-column>
+              <el-table-column prop="yxfw" label="允许范围"></el-table-column>
+              <el-table-column prop="qz" label="权重"></el-table-column>
+              <el-table-column prop="scz" label="实测值"></el-table-column>
+              <el-table-column prop="df" label="得分"></el-table-column>
+            </el-table>
+            <DoubleLineChart style="margin:10px 0;" width="100%" height="300px" :list="chartmap.zk" />
+            <el-form-item class="imp fw">变桨</el-form-item>
+            <div class="infoBox">
+              <p>1）关键参数：变桨采用“变桨电机温度1”、“变桨电机温度2” 、“变桨电机温度3”、“变频器温度1”、“变频器温度2”
+                、“变频器温度3”为关键参数，该参数在统计周期内数据显示样本在安全运行区内，没有超过进入劣化区</p>
+            </div>
+            <el-table empty-text="暂无数据" :data="bjgjcs" :header-cell-style="{ background: 'rgb(224,224,224)', color: '#000' }"
+              border stripe max-height="300" style="width: 100%; margin:10px 0;">
+              <el-table-column prop="gjcs" label="关键参数"></el-table-column>
+              <el-table-column prop="edz" label="额定值"></el-table-column>
+              <el-table-column prop="yxfw" label="允许范围"></el-table-column>
+              <el-table-column prop="qz" label="权重"></el-table-column>
+              <el-table-column prop="scz" label="实测值"></el-table-column>
+              <el-table-column prop="df" 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" :list="chartmap.bj" />
+            <el-form-item class="imp fw">指标：</el-form-item>
+            <el-form-item class="imp fw">1、风能利用率</el-form-item>
+            <div class="infoBox" style="margin:20px 0;">
+              <p>近三月，该风机风能利用率同比{{ fnlylItem.ytbqs + fnlylItem.ytbz }}%，环比{{ fnlylItem.yhbqs + fnlylItem.yhbz }}%</p>
+            </div>
+            <el-table empty-text="暂无数据" :data="fnlyl" :header-cell-style="{ background: 'rgb(153,204,255)', color: '#000' }"
+              :cell-style="columnStyle" border stripe max-height="300" style="width: 100%; margin:10px 0;">
+              <el-table-column prop="name" label="项目"></el-table-column>
+              <el-table-column prop="q1ysj" label="近一月"></el-table-column>
+              <el-table-column prop="q2ysj" label="近两月"></el-table-column>
+              <el-table-column prop="q3ysj" label="近三月"></el-table-column>
+            </el-table>
+            <el-form-item class="imp fw">2、设备可利用率</el-form-item>
+            <div class="infoBox" style="margin:20px 0;">
+              <p>近三月，该风机设备可利用率同比{{ sbklylItem.ytbqs + sbklylItem.ytbz }}%，环比{{ sbklylItem.yhbqs + sbklylItem.yhbz
+                }}%</p>
+            </div>
+            <el-table empty-text="暂无数据" :data="kkxfx" :header-cell-style="{ background: 'rgb(153,204,255)', color: '#000' }"
+              :cell-style="columnStyle" border stripe max-height="300" style="width: 100%; margin:10px 0;">
+              <el-table-column prop="name" label="项目"></el-table-column>
+              <el-table-column prop="q1ysj" label="近一月"></el-table-column>
+              <el-table-column prop="q2ysj" label="近两月"></el-table-column>
+              <el-table-column prop="q3ysj" label="近三月"></el-table-column>
+            </el-table>
+          </el-form>
         </div>
-        <el-form-item class="imp fw">变桨</el-form-item>
-        <div class="infoBox">
-          <p>1）关键参数：变桨采用“变桨电机温度1”、“变桨电机温度2” 、“变桨电机温度3”、“变频器温度1”、“变频器温度2” 、“变频器温度3”为关键参数，该参数在统计周期内数据显示样本在安全运行区内，没有超过进入劣化区</p>
+        <div class="textBox">
+          <el-form>
+            <el-form-item class="imp fw">3、性能评价</el-form-item>
+          </el-form>
         </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>
+        <!-- <div class="infoBox">
+          <p>麻黄山1#风机近三个月性能评价良好，整体排名考前，2016年9月性能评价指标横向对比良好。</p>
+        </div> -->
+        <el-table empty-text="暂无数据" :data="djpg" :header-cell-style="{ background: 'rgb(224,224,224)', color: '#000' }"
+          border stripe max-height="300" style="width: 100%; margin:10px 0;">
+          <el-table-column prop="recorddate" label="日期"></el-table-column>
+          <el-table-column prop="q1ysj" label="近一月"></el-table-column>
+          <el-table-column prop="q2ysj" label="近两月"></el-table-column>
+          <el-table-column prop="q3ysj" 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 class="textBox" v-if="jczbmap.jxly">
+          <el-form>
+            <el-form-item class="imp fw">推荐检修方案：</el-form-item>
+            <el-form-item style="font-size: 20px;">故障预测：</el-form-item>
+            <div class="infoBox" style="margin:20px 0;">
+              <p>高频：{{jczbmap.top1type}}</p>
+              <p>中频：{{jczbmap.top2type}}</p>
+              <p>低频：{{jczbmap.top3type}}</p>
+            </div>
+            <el-form-item>推荐检修理由：{{jczbmap.jxly}}</el-form-item>
+            <el-form-item>推荐检修日期：{{jczbmap.jxsj}}</el-form-item>
+            <el-form-item>推荐排查方法：{{jczbmap.jxff}}</el-form-item>
+            <el-form-item>推荐处理方法：{{jczbmap.jxbz}}</el-form-item>
+            <el-form-item>推荐工器具：{{jczbmap.jxgj}}</el-form-item>
+            <el-form-item>平均消缺时长：{{jczbmap.jxsc}}</el-form-item>
+            <el-form-item>推荐检修风速：{{jczbmap.jxfs}}</el-form-item>
+            <div class="infoBox" style="margin:20px 0;">
+              <p class="red">结论：{{jczbmap.jkqksm}}</p>
+            </div>
+          </el-form>
         </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 class="textBox">
+          <el-form>
+            <el-form-item class="fw" style="margin:10px 0;text-align: center;">数据来源：集控中心大数据分析系统</el-form-item>
+          </el-form>
         </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">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>
 
 <script>
+import NormalLineChart from "@com/chart/line/normal-line-chart.vue";
 import DoubleLineChart from "@com/chart/line/double-line-chart.vue";
+import Get_PDF from "@tools/htmlToPdf";
 
 export default {
-  data() {
+  data () {
     return {
       dialogVisible: false, // 弹窗是否显示
+      bjzb: [],
+      chartmap: {
+        fdj: [{
+          title: "发电机",
+          yAxisIndex: 0,
+          value: []
+        }],
+        clx: [{
+          title: "齿轮箱",
+          yAxisIndex: 0,
+          value: []
+        }],
+        zk: [{
+          title: "主轴",
+          yAxisIndex: 0,
+          value: []
+        }],
+        bj: [{
+          title: "变桨",
+          yAxisIndex: 0,
+          value: []
+        }]
+      },
+      djpg: [],
+      fnlyl: [],
+      jczbmap: {},
+      kkxfx: [],
+
+      fnlylItem: {},
+      sbklylItem: {},
+
+      // 发电机关键参数表格
+      fdjgjcs: [{
+        gjcs: "发电机转速",
+        edz: "1700",
+        yxfw: "<2000",
+        qz: "0.35",
+        scz: "1500",
+        df: "0.3",
+      }, {
+        gjcs: "发电机轴A温度",
+        edz: "70",
+        yxfw: "<100",
+        qz: "0.15",
+        scz: "56",
+        df: "0.12",
+      }, {
+        gjcs: "发电机轴B温度",
+        edz: "70",
+        yxfw: "<100",
+        qz: "0.15",
+        scz: "54",
+        df: "0.12",
+      }],
+
+      // 主轴关键参数表格
+      zzgjcs: [{
+        gjcs: "主轴承温度",
+        edz: "30",
+        yxfw: "<80",
+        qz: "0.35",
+        scz: "36.2",
+        df: "0.79",
+      }, {
+        gjcs: "主轴承油脂启动时间间隔",
+        edz: "",
+        yxfw: "<500",
+        qz: "0.15",
+        scz: "394",
+        df: "0.03",
+      }, {
+        gjcs: "主轴承油脂泵运行周期",
+        edz: "",
+        yxfw: "<14",
+        qz: "0.15",
+        scz: "6",
+        df: "0",
+      }],
+
+      // 变桨关键参数表格
+      bjgjcs: [{
+        gjcs: "变桨电机温度1",
+        edz: "55",
+        yxfw: "<100",
+        qz: "0.12",
+        scz: "68",
+        df: "0.24",
+      }, {
+        gjcs: "变桨电机温度2",
+        edz: "55",
+        yxfw: "<100",
+        qz: "0.12",
+        scz: "87",
+        df: "0.59",
+      }, {
+        gjcs: "变桨电机温度3",
+        edz: "55",
+        yxfw: "<100",
+        qz: "0.12",
+        scz: "100",
+        df: "0.12",
+      }, {
+        gjcs: "变频器温度1",
+        edz: "25",
+        yxfw: "<40",
+        qz: "0.20",
+        scz: "31",
+        df: "0.34",
+      }, {
+        gjcs: "变频器温度2",
+        edz: "25",
+        yxfw: "<40",
+        qz: "0.20",
+        scz: "31",
+        df: "0.90",
+      }, {
+        gjcs: "变频器温度3",
+        edz: "25",
+        yxfw: "<40",
+        qz: "0.20",
+        scz: "30",
+        df: "0.12",
+      }],
+
       tableData: [
         {
           // 表格1数据
@@ -211,23 +361,169 @@ export default {
   },
 
   components: {
-    DoubleLineChart,
+    NormalLineChart,
+    DoubleLineChart
   },
 
-  mounted() {
+  mounted () {
     this.dialogVisible = this.show;
   },
 
   methods: {
-    dialogClosed() {
+    // 导出PDF
+    exportPDF (name) {
+      this.BASE.showMsg({
+        type: "success",
+        msg: "正在导出...请稍后..."
+      });
+      Get_PDF.downloadPDF(document.querySelector('.pdfDom'), "健康评价报告概述");
+    },
+
+    // 关闭弹窗
+    dialogClosed () {
       this.dialogVisible = false;
       this.$emit("closed", false);
     },
+
+    // 改变列颜色
+    columnStyle ({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 0) {
+        return 'background:rgb(204,255,255);';
+      }
+    },
+
+    // 获取报告详情
+    getReport () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "reportnew/healthReport",
+        data: {
+          wtId: "QG01_11",
+          recorddate: "2021-06-19"
+        },
+        success (res) {
+
+          let fdj = [{
+            title: "发电机",
+            yAxisIndex: 0,
+            value: []
+          }];
+
+          let clx = [{
+            title: "齿轮箱",
+            yAxisIndex: 0,
+            value: []
+          }];
+
+          let zk = [{
+            title: "主轴",
+            yAxisIndex: 0,
+            value: []
+          }];
+
+          let bj = [{
+            title: "变桨",
+            yAxisIndex: 0,
+            value: []
+          }];
+
+          // 风能利用率
+          let fnlyl = {};
+
+          // 设备科利用率
+          let sbklyl = {};
+
+          res.data.bjzb.forEach(ele => {
+            ele.recorddate = new Date(ele.recorddate).formatDate("yyyy-MM-dd");
+          });
+
+          res.data.jczbmap.bwsj = new Date(res.data.jczbmap.bwsj).formatDate("yyyy-MM-dd");
+
+          // 发电机
+          res.data.chartmap.fdj.forEach(ele => {
+            fdj[0].value.push({
+              text: new Date(ele.recorddate).formatDate("yyyy-MM-dd"),
+              value: ele.value
+            });
+          });
+
+          // 齿轮箱
+          res.data.chartmap.clx.forEach(ele => {
+            clx[0].value.push({
+              text: new Date(ele.recorddate).formatDate("yyyy-MM-dd"),
+              value: ele.value
+            });
+          });
+
+          // 主轴
+          res.data.chartmap.zk.forEach(ele => {
+            zk[0].value.push({
+              text: new Date(ele.recorddate).formatDate("yyyy-MM-dd"),
+              value: ele.value
+            });
+          });
+
+          // 主轴
+          res.data.chartmap.bj.forEach(ele => {
+            bj[0].value.push({
+              text: new Date(ele.recorddate).formatDate("yyyy-MM-dd"),
+              value: ele.value
+            });
+          });
+
+          let fnlylItem = res.data.fnlyl.find(ele => {
+            return ele.name === "风能利用率"
+          });
+
+          let sbklylItem = res.data.kkxfx.find(ele => {
+            return ele.name === "设备可利用率"
+          });
+
+          if (fnlylItem) {
+            fnlyl.ytbqs = fnlylItem.ytbqs;
+            fnlyl.ytbz = fnlylItem.ytbz;
+            fnlyl.yhbqs = fnlylItem.yhbqs;
+            fnlyl.yhbz = fnlylItem.yhbz;
+          }
+
+          if (sbklylItem) {
+            sbklyl.ytbqs = sbklylItem.ytbqs;
+            sbklyl.ytbz = sbklylItem.ytbz;
+            sbklyl.yhbqs = sbklylItem.yhbqs;
+            sbklyl.yhbz = sbklylItem.yhbz;
+          }
+
+          res.data.djpg.forEach(ele => {
+            ele.recorddate = new Date(ele.recorddate).formatDate("yyyy-MM-dd");
+          });
+
+          res.data.jczbmap.jxsj = (res.data.jczbmap.jxly ? new Date(res.data.jczbmap.jxsj).formatDate("yyyy-MM-dd") : null);
+
+          res.data.chartmap.fdj = fdj;
+          res.data.chartmap.clx = clx;
+          res.data.chartmap.zk = zk;
+          res.data.chartmap.bj = bj;
+
+          that.bjzb = res.data.bjzb;
+          that.chartmap = res.data.chartmap;
+          that.djpg = res.data.djpg;
+          that.fnlyl = res.data.fnlyl;
+          that.jczbmap = res.data.jczbmap;
+          that.kkxfx = res.data.kkxfx;
+          that.fnlylItem = fnlyl;
+          that.sbklylItem = sbklyl;
+        }
+      });
+    }
   },
 
   watch: {
-    show(value) {
+    show (value) {
       this.dialogVisible = value;
+      if (value) {
+        this.getReport();
+      }
     },
   },
 };
@@ -235,6 +531,12 @@ export default {
 
 <style lang="less" scoped>
 .cDialog {
+  position: relative;
+
+  .pdfDom {
+    padding: 30px 20px;
+  }
+
   .title {
     text-align: center;
     font-size: 24px;
@@ -292,11 +594,12 @@ export default {
   .el-dialog__body {
     max-height: 700px;
     overflow-y: scroll;
+    padding: 0;
   }
 
   .el-form-item.imp {
     .el-form-item__content {
-      font-size: 20px;
+      font-size: 24px;
     }
   }
 

src/tools/htmlToPdf.js

@@ -0,0 +1,98 @@
+import html2canvas from 'html2canvas';
+import JsPDF from 'jspdf';
+
+/**
+ * @param  ele          要生成 pdf 的DOM元素（容器）
+ * @param  padfName     PDF文件生成后的文件名字
+ * */
+
+function downloadPDF (ele, pdfName) {
+
+  let eleW = ele.offsetWidth;// 获得该容器的宽
+  let eleH = ele.offsetHeight;// 获得该容器的高
+
+
+  let eleOffsetTop = ele.offsetTop;  // 获得该容器到文档顶部的距离
+  let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离
+
+  var canvas = document.createElement("canvas");
+  var abs = 0;
+
+  let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
+  let win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
+
+  if (win_out > win_in) {
+    // abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
+    abs = (win_out - win_in) / 2;    // 获得滚动条宽度的一半
+    // console.log(a, '新abs');
+  }
+
+  canvas.width = eleW * 2;    // 将画布宽&&高放大两倍
+  canvas.height = eleH * 2;
+
+
+
+
+  var context = canvas.getContext("2d");
+
+  context.scale(2, 2);
+
+  context.translate(-eleOffsetLeft - abs, -eleOffsetTop);
+  // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
+  // translate的时候，要把这个差值去掉
+
+  // html2canvas(element).then( (canvas)=>{ //报错
+  // html2canvas(element[0]).then( (canvas)=>{
+  html2canvas(ele, {
+    dpi: 300,
+    // allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
+    useCORS: true  //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
+  }).then((canvas) => {
+
+    var contentWidth = canvas.width;
+    var contentHeight = canvas.height;
+    //一页pdf显示html页面生成的canvas高度;
+    var pageHeight = contentWidth / 592.28 * 841.89;
+    //未生成pdf的html页面高度
+    var leftHeight = contentHeight;
+    //页面偏移
+    var position = 0;
+    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+    var imgWidth = 595.28;
+    var imgHeight = 595.28 / contentWidth * contentHeight;
+
+    var pageData = canvas.toDataURL('image/jpeg', 1.0);
+
+
+
+    var pdf = new JsPDF('', 'pt', 'a4');
+
+    //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
+    //当内容未超过pdf一页显示的范围，无需分页
+    if (leftHeight < pageHeight) {
+      //在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
+      pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
+      // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
+    } else {    // 分页
+      while (leftHeight > 0) {
+        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
+        leftHeight -= pageHeight;
+        position -= 841.89;
+        //避免添加空白页
+        if (leftHeight > 0) {
+          pdf.addPage();
+        }
+      }
+    }
+
+    //可动态生成
+    pdf.save(pdfName);
+  })
+
+
+}
+
+
+export default {
+  downloadPDF
+}

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

@@ -311,27 +311,43 @@ export default {
       donePower: [], // 完成电量柱状图
       // 饼图数据
       pieChartData: {
-        dayData: [], // 日度
-        monthData: [], // 日度
-        yearData: [], // 日度
+        // 日度
+        dayData: [{
+          title: "",
+          value: []
+        }],
+        // 月度
+        monthData: [{
+          title: "",
+          value: []
+        }],
+        // 年度
+        yearData: [{
+          title: "",
+          value: []
+        }],
       },
       // 完成电量
       CompleteElectricity: {
-        data: [
-          {
-            title: "发电量",
-            yAxisIndex: 0,
-            value: []
-          }, {
-            title: "预测电量",
-            yAxisIndex: 1,
-            value: []
-          }
-        ],
+        data: [{
+          title: "发电量",
+          yAxisIndex: 0,
+          value: []
+        }, {
+          title: "预测电量",
+          yAxisIndex: 1,
+          value: []
+        }],
         units: [""],
       },
 
-      Powertrend: {}, // 4小时功率曲线图
+      // 4小时功率曲线图
+      Powertrend: {
+        value: [{
+          title: "",
+          value: []
+        }]
+      },
 
       // 月发电量对比
       MonthCompare: {
@@ -474,7 +490,7 @@ export default {
             });
 
             that.fjmap = fjmap;
-            that.Powertrend = Powertrend;
+            // that.Powertrend = Powertrend;
             that.jczbmap = res.data.jczbmap;
             that.pieChartData = {
               dayData,