pdf插件调试

README.md

@@ -26,6 +26,11 @@ this.API.post("login", {
   ....
 });
 ```
+### Get_PDF
+公共的pdf导出工具  
+```  
+this.Get_PDF.downloadPDF(document.querySelector(id), 导出的pdf名称)
+```  
 ### BASE
 ###### numberB0(n)
 为各位数字自动补充一个0，用于日期补零。

package.json

@@ -18,6 +18,7 @@
     "uglifyjs-webpack-plugin": "^2.2.0",
     "vue": "^2.6.11",
     "vue-json-excel": "^0.3.0",
+    "vue-pdf": "^4.2.0",
     "vue-router": "^3.2.0",
     "vuescroll": "^4.17.3",
     "vuex": "^3.4.0"
@@ -28,7 +29,9 @@
     "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "babel-plugin-component": "^1.1.1",
+    "html2canvas": "^1.0.0-rc.7",
     "image-webpack-loader": "^7.0.1",
+    "jspdf": "^2.3.1",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
     "vue-template-compiler": "^2.6.11",

src/assets/css/base.scss

@@ -208,11 +208,11 @@ textarea {
   -webkit-appearance: none;
 }
 
-* {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
+// * {
+//   -webkit-box-sizing: border-box;
+//   -moz-box-sizing: border-box;
+//   box-sizing: border-box;
+// }
 
 input::-webkit-input-placeholder {
   /* WebKit, Blink, Edge */
@@ -352,3 +352,9 @@ body,
 }
 
 /***框架样式 - 结束***/
+
+
+
+/***ElUI - 公共调整 - 开始***/
+
+/***ElUI - 公共调整 - 结束***/

src/assets/css/healthManagement/healthAssessmentDetailed.scss

@@ -1,7 +1,6 @@
-.box{
-    width: 100%;
-    // display: flex;
-    justify-content: space-around;
-     align-items: center;
-     overflow: hidden;
+.page{
+  .form{
+    position: absolute;
+    right: 40px;
+  }
 }

src/assets/js/healthManagement/healthAssessmentDetailed.js

@@ -72,6 +72,10 @@ export default {
         this.KeyparameterData();
     },
     methods:{
+      // 导出pdf
+      getPdf(name){
+        this.Get_PDF.downloadPDF( document.querySelector('#pdfDom'),name)
+      },
         headStyle() {
           return "text-align:center"
         },

src/main.js

@@ -28,6 +28,9 @@ Vue.prototype.ECLZX = EClzx;
 // import formCheck from "@tools/formCheck"; // 表单的处理
 // Vue.prototype.FC = formCheck;
 
+import Get_PDF from '@tools/htmlToPdf'; // pdf导出
+Vue.prototype.Get_PDF = Get_PDF;
+
 // 滚动条
 import vuescroll from "vuescroll"; 
 Vue.use(vuescroll, {

src/tools/htmlToPdf.js

@@ -1,36 +1,98 @@
-import html2Canvas from 'html2canvas'
-import JsPDF from 'jspdf'
-
-export default{
-  install (Vue, options) {
-    Vue.prototype.getPdf = function (title) {
-      html2Canvas(document.querySelector('#pdfDom'), {
-        allowTaint: true
-      }).then(function (canvas) {
-        let contentWidth = canvas.width
-        let contentHeight = canvas.height
-        let pageHeight = contentWidth / 592.28 * 841.89
-        let leftHeight = contentHeight
-        let position = 0
-        let imgWidth = 595.28
-        let imgHeight = 592.28 / contentWidth * contentHeight
-        let pageData = canvas.toDataURL('image/jpeg', 1.0)
-        let PDF = new JsPDF('', 'pt', 'a4')
+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', 0, 0, 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.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(title + '.pdf')
-      }
-      )
-    }
-  }
+
+        //可动态生成
+        pdf.save(pdfName);
+    })
+
+
 }
+
+
+export default {
+    downloadPDF
+}

src/views/healthManagement/healthAssessmentDetailed.vue

@@ -1,187 +1,568 @@
 <template>
+  <div class="page">
+    <el-form class="form" :inline="true" :model="formInline">
+      <el-row :gutter="1">
+        <el-form-item>
+          <el-button style="margin-left: 20%" type="primary" @click="goReturn"
+            >返回</el-button
+          >
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            style="margin-left: 20%"
+            type="primary"
+            v-on:click="getPdf('健康报告管理')"
+            >导出pdf</el-button
+          >
+        </el-form-item>
+      </el-row>
+    </el-form>
     <div class="box" id="pdfDom">
-         <el-form :inline="true" :model="formInline" class="demo-form-inline">
-          <el-row :gutter="1">
-            <el-form-item>
-              <el-button style="margin-left:20%" type="primary" @click="goReturn">返回</el-button>
-            </el-form-item>
-            <el-form-item>
-              <el-button style="margin-left:20%" type="primary" v-on:click="getPdf('健康报告管理')">导出pdf</el-button>
-            </el-form-item>
-          </el-row>
-        </el-form>
-        <div style="font-size:45px;font-weight:600;margin-top:1%;width:100%;text-align:center;font-family:STSong">健康评价报告概述</div>
-        <div style="font-size:35px;margin-left:8%;margin-top:3%;width:100%;text-align:left;font-weight:600;font-family:STHeiti">{{wtName}}</div>
-        <div style="font-size:25px;margin-left:8%;margin-top:1%;width:100%;text-align:left;font-weight:600;font-family:STHeiti">评级操作：{{djpgjb}}</div>
-        <div v-if="tjdiv">
-        <div style="font-size:25px;margin-left:8%;margin-top:2%;width:100%;text-align:left;font-weight:600;font-family:STHeiti">推荐检修方案：</div>
-        <div style="font-size:25px;margin-left:10%;margin-top:1%;width:100%;text-align:left;font-family:STHeiti">故障预测：</div>
-        <div style="font-size:25px;margin-left:13%;margin-top:1%;width:100%;text-align:left;font-family:STHeiti">高频：{{highfrequency}}</div>
-        <div style="font-size:25px;margin-left:13%;margin-top:1%;width:100%;text-align:left;font-family:STHeiti">中频：{{intermediatefrequency}}</div>
-        <div style="font-size:25px;margin-left:13%;margin-top:1%;width:100%;text-align:left;font-family:STHeiti">低频：{{lowfrequency}}</div>
-        <div style="font-size:25px;margin-left:10%;margin-top:2%;width:100%;text-align:left;font-family:STHeiti">推荐检修理由：{{mainreason}}</div>
-        <div style="font-size:25px;margin-left:10%;margin-top:1%;width:100%;text-align:left;font-family:STHeiti">推荐检修日期：{{maindate}}</div>
-        <div style="font-size:25px;margin-left:10%;margin-top:1%;width:100%;text-align:left;font-family:STHeiti">推荐排查方法：{{mainmethod}}</div>
-        <div style="font-size:25px;margin-left:10%;margin-top:1%;width:85%;text-align:left;font-family:STHeiti;">推荐处理方法：{{approach}}</div>
-        <div style="font-size:25px;margin-left:10%;margin-top:1%;width:100%;text-align:left;font-family:STHeiti">推荐工器具：{{tools}}</div>
-        <div style="font-size:25px;margin-left:10%;margin-top:1%;width:100%;text-align:left;font-family:STHeiti">平均消缺时长：{{mainhour}}</div>
-        <div style="font-size:25px;margin-left:10%;margin-top:1%;width:100%;text-align:left;font-family:STHeiti">推荐检修风速：{{windspeed}}</div>
-        <div style="font-size:25px;margin-left:8%;margin-top:2%;width:100%;text-align:left;font-family:STSong;font-weight:600">结论：{{conclusion}}</div>
+      <div
+        style="
+          font-size: 45px;
+          font-weight: 600;
+          margin-top: 1%;
+          width: 100%;
+          text-align: center;
+          font-family: STSong;
+        "
+      >
+        健康评价报告概述
+      </div>
+      <div
+        style="
+          font-size: 35px;
+          margin-left: 8%;
+          margin-top: 3%;
+          width: 100%;
+          text-align: left;
+          font-weight: 600;
+          font-family: STHeiti;
+        "
+      >
+        {{ wtName }}
+      </div>
+      <div
+        style="
+          font-size: 25px;
+          margin-left: 8%;
+          margin-top: 1%;
+          width: 100%;
+          text-align: left;
+          font-weight: 600;
+          font-family: STHeiti;
+        "
+      >
+        评级操作：{{ djpgjb }}
+      </div>
+      <div v-if="tjdiv">
+        <div
+          style="
+            font-size: 25px;
+            margin-left: 8%;
+            margin-top: 2%;
+            width: 100%;
+            text-align: left;
+            font-weight: 600;
+            font-family: STHeiti;
+          "
+        >
+          推荐检修方案：
         </div>
-        <div style="font-size:25px;margin-left:8%;margin-top:2%;width:100%;text-align:left;font-weight:600">报告出具时间：{{bgcjdate}}</div>
-        <div style="font-size:25px;margin-left:8%;margin-top:2%;width:100%;text-align:left;font-family:STSong;font-weight:600">近一周曲线偏差率对比：</div>
-        <div id="chartHistogram" style="width: 100%; height: 400px;margin-top:2%"></div>
-        <div style="font-size:25px;margin-left:10%;margin-top:2%;width:100%;text-align:left;font-weight:600;font-family:STSong">部件：</div>
-        <div style="font-size:25px;margin-left:10%;margin-top:1%;width:100%;text-align:left;font-weight:600;font-family:STSong">发电机</div>
-        <div style="font-size:25px;margin-left:10%;margin-top:1%;width:80%;text-align:left;font-weight:600;font-family:STSong;">1）关键参数：发电机采用 发电机轴A温度、发电机轴B温度、发电机U相绕组温度、发电机V相绕组温度、发电机W相绕组温度、发电机冷却风为关键参数，该参数在统计周期内数据显示样本在安全运行区内，没有超过进入劣化区。</div>
-        <div style="font-size:25px;margin-top:1%;width:100%;text-align:center;font-weight:600;font-family:STSong;">表1 发电机关键参数值</div>
-        <el-table
-                id="callthepolicetable"
-                :row-style="{ height: '10px' }" 
-                :cell-style="{ textAlign: 'center' }" 
-                :header-cell-style="{ textAlign:'center',background:'#F5F7FA'}"
-                @sort-change="changeTableSort"
-                :data="fdjtable"
-                align="center"
-                border
-                style="width: 100%;margin-top:2%;">
-                <el-table-column
-                prop="name"
-                label="关键参数"
-                width="300">
-                </el-table-column>
-                <el-table-column
-                prop="edz"
-                label="额定值"
-                width="300">
-                </el-table-column>
-                <el-table-column
-                prop="yxfw"
-                label="允许范围"
-                width="300">
-                </el-table-column>
-                <el-table-column
-                prop="qz"
-                label="权重"
-                width="300">
-                </el-table-column>
-            </el-table>
-            <div style="font-size:25px;margin-left:10%;margin-top:1%;width:80%;text-align:left;font-weight:600;font-family:STSong;">2）发电机健康情况走势图（1 良好 2 正常 3 注意 4 严重）</div>
-            <div id="chartHistogram2" style="width: 100%; height: 400px;margin-top:3%"></div>
-            <div style="font-size:25px;margin-left:10%;margin-top:1%;width:100%;text-align:left;font-weight:600;font-family:STSong;">齿轮箱</div>
-        <div style="font-size:25px;margin-left:10%;margin-top:1%;width:80%;text-align:left;font-weight:600;font-family:STSong;">1）关键参数：齿轮箱采用齿轮箱输入轴1油温、齿轮箱输入轴2油温、齿轮箱入口油温、齿轮箱油温为关键参数，该参数在统计周期内数据显示样本在安全运行区内，没有超过进入劣化区。</div>
-        <div style="font-size:25px;margin-top:1%;width:100%;text-align:center;font-weight:600;font-family:STSong;">表2 齿轮箱关键参数值</div>
-        <el-table
-                id="callthepolicetable"
-                :row-style="{ height: '10px' }" 
-                :cell-style="{ textAlign: 'center' }" 
-                :header-cell-style="{ textAlign:'center',background:'#F5F7FA'}"
-                @sort-change="changeTableSort"
-                :data="clxtable"
-                align="center"
-                border
-                style="width: 100%;margin-top:2%;">
-                <el-table-column
-                prop="name"
-                label="关键参数"
-                width="300">
-                </el-table-column>
-                <el-table-column
-                prop="edz"
-                label="额定值"
-                width="300">
-                </el-table-column>
-                <el-table-column
-                prop="yxfw"
-                label="允许范围"
-                width="300">
-                </el-table-column>
-                <el-table-column
-                prop="qz"
-                label="权重"
-                width="300">
-                </el-table-column>
-            </el-table>
-            <div style="font-size:25px;margin-left:10%;margin-top:1%;width:80%;text-align:left;font-weight:600;font-family:STSong;">2）齿轮箱健康情况走势图（1 良好 2 正常 3 注意 4 严重）</div>
-            <div id="chartHistogram3" style="width: 100%; height: 400px;margin-top:3%"></div>
-            <div style="font-size:25px;margin-left:10%;margin-top:1%;width:100%;text-align:left;font-weight:600;font-family:STSong;">变浆</div>
-        <div style="font-size:25px;margin-left:10%;margin-top:1%;width:80%;text-align:left;font-weight:600;font-family:STSong;">1）关键参数：变浆采用变浆电容器温度1、变浆电容器温度2、变浆电容器温度3、变浆电容电压1、变浆电容电压2、变浆电容电压3、变浆电流器温度1、变浆电流器温度2、变浆电流器温度3、电机温度1、电机温度2、电机温度3、变浆控制柜温度1、变浆控制柜温度2、变浆控制柜温度3为关键参数，该参数在统计周期内数据显示样本在安全运行区内，没有超过进入劣化区。</div>
-        <div style="font-size:25px;margin-top:1%;width:100%;text-align:center;font-weight:600;font-family:STSong;">表3 变桨关键参数值</div>
-        <el-table
-                id="callthepolicetable"
-                :row-style="{ height: '10px' }" 
-                :cell-style="{ textAlign: 'center'}" 
-                :header-cell-style="{ textAlign:'center',background:'#F5F7FA'}"
-                @sort-change="changeTableSort"
-                :data="bjtable"
-                align="center"
-                border
-                style="width: 100%;margin-top:2%;">
-                <el-table-column
-                prop="name"
-                label="关键参数"
-                width="300">
-                </el-table-column>
-                <el-table-column
-                prop="edz"
-                label="额定值"
-                width="300">
-                </el-table-column>
-                <el-table-column
-                prop="yxfw"
-                label="允许范围"
-                width="300">
-                </el-table-column>
-                <el-table-column
-                prop="qz"
-                label="权重"
-                width="300">
-                </el-table-column>
-            </el-table>
-            <div style="font-size:25px;margin-left:10%;margin-top:1%;width:80%;text-align:left;font-weight:600;font-family:STSong;">2）变浆健康情况走势图（1 良好 2 正常 3 注意 4 严重）</div>
-            <div id="chartHistogram4" style="width: 100%; height: 400px;margin-top:3%"></div>
-            <div style="font-size:25px;margin-left:10%;margin-top:1%;width:100%;text-align:left;font-weight:600;font-family:STSong;">主控</div>
-        <div style="font-size:25px;margin-left:10%;margin-top:1%;width:80%;text-align:left;font-weight:600;font-family:STSong;">1）关键参数：主控采用 发电机轴A温度、发电机轴B温度、发电机U相绕组温度、发电机V相绕组温度、发电机W相绕组温度、发电机冷却风为关键参数，该参数在统计周期内数据显示样本在安全运行区内，没有超过进入劣化区。</div>
-        <div style="font-size:25px;margin-top:1%;width:100%;text-align:center;font-weight:600;font-family:STSong;">表4 主控关键参数值</div>
-        <el-table
-                id="callthepolicetable"
-                :row-style="{ height: '10px' }" 
-                :cell-style="{ textAlign: 'center'}" 
-                :header-cell-style="{ textAlign:'center',background:'#F5F7FA'}"
-                @sort-change="changeTableSort"
-                :data="zktable"
-                align="center"
-                border
-                style="width: 100%;margin-top:2%;">
-                <el-table-column
-                prop="name"
-                label="关键参数"
-                width="300">
-                </el-table-column>
-                <el-table-column
-                prop="edz"
-                label="额定值"
-                width="300">
-                </el-table-column>
-                <el-table-column
-                prop="yxfw"
-                label="允许范围"
-                width="300">
-                </el-table-column>
-                <el-table-column
-                prop="qz"
-                label="权重"
-                width="300">
-                </el-table-column>
-            </el-table>
-            <div style="font-size:25px;margin-left:10%;margin-top:1%;width:80%;text-align:left;font-weight:600;font-family:STSong;">2）主控健康情况走势图（1 良好 2 正常 3 注意 4 严重）</div>
-            <div id="chartHistogram5" style="width: 100%; height: 400px;margin-top:3%"></div>
+        <div
+          style="
+            font-size: 25px;
+            margin-left: 10%;
+            margin-top: 1%;
+            width: 100%;
+            text-align: left;
+            font-family: STHeiti;
+          "
+        >
+          故障预测：
+        </div>
+        <div
+          style="
+            font-size: 25px;
+            margin-left: 13%;
+            margin-top: 1%;
+            width: 100%;
+            text-align: left;
+            font-family: STHeiti;
+          "
+        >
+          高频：{{ highfrequency }}
+        </div>
+        <div
+          style="
+            font-size: 25px;
+            margin-left: 13%;
+            margin-top: 1%;
+            width: 100%;
+            text-align: left;
+            font-family: STHeiti;
+          "
+        >
+          中频：{{ intermediatefrequency }}
+        </div>
+        <div
+          style="
+            font-size: 25px;
+            margin-left: 13%;
+            margin-top: 1%;
+            width: 100%;
+            text-align: left;
+            font-family: STHeiti;
+          "
+        >
+          低频：{{ lowfrequency }}
+        </div>
+        <div
+          style="
+            font-size: 25px;
+            margin-left: 10%;
+            margin-top: 2%;
+            width: 100%;
+            text-align: left;
+            font-family: STHeiti;
+          "
+        >
+          推荐检修理由：{{ mainreason }}
+        </div>
+        <div
+          style="
+            font-size: 25px;
+            margin-left: 10%;
+            margin-top: 1%;
+            width: 100%;
+            text-align: left;
+            font-family: STHeiti;
+          "
+        >
+          推荐检修日期：{{ maindate }}
+        </div>
+        <div
+          style="
+            font-size: 25px;
+            margin-left: 10%;
+            margin-top: 1%;
+            width: 100%;
+            text-align: left;
+            font-family: STHeiti;
+          "
+        >
+          推荐排查方法：{{ mainmethod }}
+        </div>
+        <div
+          style="
+            font-size: 25px;
+            margin-left: 10%;
+            margin-top: 1%;
+            width: 85%;
+            text-align: left;
+            font-family: STHeiti;
+          "
+        >
+          推荐处理方法：{{ approach }}
+        </div>
+        <div
+          style="
+            font-size: 25px;
+            margin-left: 10%;
+            margin-top: 1%;
+            width: 100%;
+            text-align: left;
+            font-family: STHeiti;
+          "
+        >
+          推荐工器具：{{ tools }}
+        </div>
+        <div
+          style="
+            font-size: 25px;
+            margin-left: 10%;
+            margin-top: 1%;
+            width: 100%;
+            text-align: left;
+            font-family: STHeiti;
+          "
+        >
+          平均消缺时长：{{ mainhour }}
+        </div>
+        <div
+          style="
+            font-size: 25px;
+            margin-left: 10%;
+            margin-top: 1%;
+            width: 100%;
+            text-align: left;
+            font-family: STHeiti;
+          "
+        >
+          推荐检修风速：{{ windspeed }}
+        </div>
+        <div
+          style="
+            font-size: 25px;
+            margin-left: 8%;
+            margin-top: 2%;
+            width: 100%;
+            text-align: left;
+            font-family: STSong;
+            font-weight: 600;
+          "
+        >
+          结论：{{ conclusion }}
+        </div>
+      </div>
+      <div
+        style="
+          font-size: 25px;
+          margin-left: 8%;
+          margin-top: 2%;
+          width: 100%;
+          text-align: left;
+          font-weight: 600;
+        "
+      >
+        报告出具时间：{{ bgcjdate }}
+      </div>
+      <div
+        style="
+          font-size: 25px;
+          margin-left: 8%;
+          margin-top: 2%;
+          width: 100%;
+          text-align: left;
+          font-family: STSong;
+          font-weight: 600;
+        "
+      >
+        近一周曲线偏差率对比：
+      </div>
+      <div
+        id="chartHistogram"
+        style="width: 100%; height: 400px; margin-top: 2%"
+      ></div>
+      <div
+        style="
+          font-size: 25px;
+          margin-left: 10%;
+          margin-top: 2%;
+          width: 100%;
+          text-align: left;
+          font-weight: 600;
+          font-family: STSong;
+        "
+      >
+        部件：
+      </div>
+      <div
+        style="
+          font-size: 25px;
+          margin-left: 10%;
+          margin-top: 1%;
+          width: 100%;
+          text-align: left;
+          font-weight: 600;
+          font-family: STSong;
+        "
+      >
+        发电机
+      </div>
+      <div
+        style="
+          font-size: 25px;
+          margin-left: 10%;
+          margin-top: 1%;
+          width: 80%;
+          text-align: left;
+          font-weight: 600;
+          font-family: STSong;
+        "
+      >
+        1）关键参数：发电机采用
+        发电机轴A温度、发电机轴B温度、发电机U相绕组温度、发电机V相绕组温度、发电机W相绕组温度、发电机冷却风为关键参数，该参数在统计周期内数据显示样本在安全运行区内，没有超过进入劣化区。
+      </div>
+      <div
+        style="
+          font-size: 25px;
+          margin-top: 1%;
+          width: 100%;
+          text-align: center;
+          font-weight: 600;
+          font-family: STSong;
+        "
+      >
+        表1 发电机关键参数值
+      </div>
+      <el-table
+        id="callthepolicetable"
+        :row-style="{ height: '10px' }"
+        :cell-style="{ textAlign: 'center' }"
+        :header-cell-style="{ textAlign: 'center', background: '#F5F7FA' }"
+        @sort-change="changeTableSort"
+        :data="fdjtable"
+        align="center"
+        border
+        style="width: 100%; margin-top: 2%"
+      >
+        <el-table-column prop="name" label="关键参数" width="300">
+        </el-table-column>
+        <el-table-column prop="edz" label="额定值" width="300">
+        </el-table-column>
+        <el-table-column prop="yxfw" label="允许范围" width="300">
+        </el-table-column>
+        <el-table-column prop="qz" label="权重" width="300"> </el-table-column>
+      </el-table>
+      <div
+        style="
+          font-size: 25px;
+          margin-left: 10%;
+          margin-top: 1%;
+          width: 80%;
+          text-align: left;
+          font-weight: 600;
+          font-family: STSong;
+        "
+      >
+        2）发电机健康情况走势图（1 良好 2 正常 3 注意 4 严重）
+      </div>
+      <div
+        id="chartHistogram2"
+        style="width: 100%; height: 400px; margin-top: 3%"
+      ></div>
+      <div
+        style="
+          font-size: 25px;
+          margin-left: 10%;
+          margin-top: 1%;
+          width: 100%;
+          text-align: left;
+          font-weight: 600;
+          font-family: STSong;
+        "
+      >
+        齿轮箱
+      </div>
+      <div
+        style="
+          font-size: 25px;
+          margin-left: 10%;
+          margin-top: 1%;
+          width: 80%;
+          text-align: left;
+          font-weight: 600;
+          font-family: STSong;
+        "
+      >
+        1）关键参数：齿轮箱采用齿轮箱输入轴1油温、齿轮箱输入轴2油温、齿轮箱入口油温、齿轮箱油温为关键参数，该参数在统计周期内数据显示样本在安全运行区内，没有超过进入劣化区。
+      </div>
+      <div
+        style="
+          font-size: 25px;
+          margin-top: 1%;
+          width: 100%;
+          text-align: center;
+          font-weight: 600;
+          font-family: STSong;
+        "
+      >
+        表2 齿轮箱关键参数值
+      </div>
+      <el-table
+        id="callthepolicetable"
+        :row-style="{ height: '10px' }"
+        :cell-style="{ textAlign: 'center' }"
+        :header-cell-style="{ textAlign: 'center', background: '#F5F7FA' }"
+        @sort-change="changeTableSort"
+        :data="clxtable"
+        align="center"
+        border
+        style="width: 100%; margin-top: 2%"
+      >
+        <el-table-column prop="name" label="关键参数" width="300">
+        </el-table-column>
+        <el-table-column prop="edz" label="额定值" width="300">
+        </el-table-column>
+        <el-table-column prop="yxfw" label="允许范围" width="300">
+        </el-table-column>
+        <el-table-column prop="qz" label="权重" width="300"> </el-table-column>
+      </el-table>
+      <div
+        style="
+          font-size: 25px;
+          margin-left: 10%;
+          margin-top: 1%;
+          width: 80%;
+          text-align: left;
+          font-weight: 600;
+          font-family: STSong;
+        "
+      >
+        2）齿轮箱健康情况走势图（1 良好 2 正常 3 注意 4 严重）
+      </div>
+      <div
+        id="chartHistogram3"
+        style="width: 100%; height: 400px; margin-top: 3%"
+      ></div>
+      <div
+        style="
+          font-size: 25px;
+          margin-left: 10%;
+          margin-top: 1%;
+          width: 100%;
+          text-align: left;
+          font-weight: 600;
+          font-family: STSong;
+        "
+      >
+        变浆
+      </div>
+      <div
+        style="
+          font-size: 25px;
+          margin-left: 10%;
+          margin-top: 1%;
+          width: 80%;
+          text-align: left;
+          font-weight: 600;
+          font-family: STSong;
+        "
+      >
+        1）关键参数：变浆采用变浆电容器温度1、变浆电容器温度2、变浆电容器温度3、变浆电容电压1、变浆电容电压2、变浆电容电压3、变浆电流器温度1、变浆电流器温度2、变浆电流器温度3、电机温度1、电机温度2、电机温度3、变浆控制柜温度1、变浆控制柜温度2、变浆控制柜温度3为关键参数，该参数在统计周期内数据显示样本在安全运行区内，没有超过进入劣化区。
+      </div>
+      <div
+        style="
+          font-size: 25px;
+          margin-top: 1%;
+          width: 100%;
+          text-align: center;
+          font-weight: 600;
+          font-family: STSong;
+        "
+      >
+        表3 变桨关键参数值
+      </div>
+      <el-table
+        id="callthepolicetable"
+        :row-style="{ height: '10px' }"
+        :cell-style="{ textAlign: 'center' }"
+        :header-cell-style="{ textAlign: 'center', background: '#F5F7FA' }"
+        @sort-change="changeTableSort"
+        :data="bjtable"
+        align="center"
+        border
+        style="width: 100%; margin-top: 2%"
+      >
+        <el-table-column prop="name" label="关键参数" width="300">
+        </el-table-column>
+        <el-table-column prop="edz" label="额定值" width="300">
+        </el-table-column>
+        <el-table-column prop="yxfw" label="允许范围" width="300">
+        </el-table-column>
+        <el-table-column prop="qz" label="权重" width="300"> </el-table-column>
+      </el-table>
+      <div
+        style="
+          font-size: 25px;
+          margin-left: 10%;
+          margin-top: 1%;
+          width: 80%;
+          text-align: left;
+          font-weight: 600;
+          font-family: STSong;
+        "
+      >
+        2）变浆健康情况走势图（1 良好 2 正常 3 注意 4 严重）
+      </div>
+      <div
+        id="chartHistogram4"
+        style="width: 100%; height: 400px; margin-top: 3%"
+      ></div>
+      <div
+        style="
+          font-size: 25px;
+          margin-left: 10%;
+          margin-top: 1%;
+          width: 100%;
+          text-align: left;
+          font-weight: 600;
+          font-family: STSong;
+        "
+      >
+        主控
+      </div>
+      <div
+        style="
+          font-size: 25px;
+          margin-left: 10%;
+          margin-top: 1%;
+          width: 80%;
+          text-align: left;
+          font-weight: 600;
+          font-family: STSong;
+        "
+      >
+        1）关键参数：主控采用
+        发电机轴A温度、发电机轴B温度、发电机U相绕组温度、发电机V相绕组温度、发电机W相绕组温度、发电机冷却风为关键参数，该参数在统计周期内数据显示样本在安全运行区内，没有超过进入劣化区。
+      </div>
+      <div
+        style="
+          font-size: 25px;
+          margin-top: 1%;
+          width: 100%;
+          text-align: center;
+          font-weight: 600;
+          font-family: STSong;
+        "
+      >
+        表4 主控关键参数值
+      </div>
+      <el-table
+        id="callthepolicetable"
+        :row-style="{ height: '10px' }"
+        :cell-style="{ textAlign: 'center' }"
+        :header-cell-style="{ textAlign: 'center', background: '#F5F7FA' }"
+        @sort-change="changeTableSort"
+        :data="zktable"
+        align="center"
+        border
+        style="width: 100%; margin-top: 2%"
+      >
+        <el-table-column prop="name" label="关键参数" width="300">
+        </el-table-column>
+        <el-table-column prop="edz" label="额定值" width="300">
+        </el-table-column>
+        <el-table-column prop="yxfw" label="允许范围" width="300">
+        </el-table-column>
+        <el-table-column prop="qz" label="权重" width="300"> </el-table-column>
+      </el-table>
+      <div
+        style="
+          font-size: 25px;
+          margin-left: 10%;
+          margin-top: 1%;
+          width: 80%;
+          text-align: left;
+          font-weight: 600;
+          font-family: STSong;
+        "
+      >
+        2）主控健康情况走势图（1 良好 2 正常 3 注意 4 严重）
+      </div>
+      <div
+        id="chartHistogram5"
+        style="width: 100%; height: 400px; margin-top: 3%"
+      ></div>
     </div>
+  </div>
 </template>
 <script>
-    import healthAssessmentDetailed from "@assets/js/healthManagement/healthAssessmentDetailed";
-    export default healthAssessmentDetailed;
+import healthAssessmentDetailed from "@assets/js/healthManagement/healthAssessmentDetailed";
+export default healthAssessmentDetailed;
 </script>
 <style lang="scss" scoped>
-    @import "@assets/css/healthManagement/healthAssessmentDetailed.scss";
+@import "@assets/css/healthManagement/healthAssessmentDetailed.scss";
 </style>

src/views/main.vue

@@ -13,10 +13,10 @@
           <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
           当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
         -->
-        <keep-alive v-if="$route.meta.keepAlive || $route.meta.keepAlive === undefined">
+        <!-- <keep-alive v-if="$route.meta.keepAlive || $route.meta.keepAlive === undefined">
           <router-view></router-view>
-        </keep-alive>
-        <router-view v-else></router-view>
+        </keep-alive> -->
+        <router-view></router-view>
       </VueScroll>
     </div>
   </div>