'导出pdf'

src/api/config.js

@@ -1,10 +1,18 @@
+/*
+ * @Author: 蒋珅 11455645+jiang-shena@user.noreply.gitee.com
+ * @Date: 2023-06-12 14:02:04
+ * @LastEditors: 蒋珅 11455645+jiang-shena@user.noreply.gitee.com
+ * @LastEditTime: 2023-06-13 16:27:08
+ * @FilePath: \PowerAnalysis\src\api\config.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 const config = {
     // baseURL: 'http://120.46.148.180:9002',
     // socketURL: 'ws://120.46.148.180:9002'
-    // baseURL: 'http://192.168.1.67:9002',
-    // socketURL: 'ws://192.168.1.67:9002'
-    baseURL: 'http://192.168.10.7:9002',
-    socketURL: 'ws://192.168.10.7:9002'
+    baseURL: 'http://192.168.1.67:9002',
+    socketURL: 'ws://192.168.1.67:9002'
+    // baseURL: 'http://192.168.10.7:9002',
+    // socketURL: 'ws://192.168.10.7:9002'
 }
 
 export default config;

src/pages/report/fixGetPDF.js

@@ -1,9 +1,17 @@
+/*
+ * @Author: 蒋珅 11455645+jiang-shena@user.noreply.gitee.com
+ * @Date: 2023-06-12 18:13:48
+ * @LastEditors: 蒋珅 11455645+jiang-shena@user.noreply.gitee.com
+ * @LastEditTime: 2023-06-13 16:26:14
+ * @FilePath: \PowerAnalysis\src\pages\report\fixGetPDF.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 // 页面导出为pdf格式
 import html2Canvas from 'html2canvas';
 import jsPDF from 'jspdf';
 
 const htmlToPdf = {
-  getPdf(title, loading) {
+  getPdf( loading,title,) {
     // loading = true;
     console.log(loading);
     html2Canvas(document.querySelector('#pdfDom'), {
@@ -55,7 +63,7 @@ const htmlToPdf = {
         // delete page;
       }
       //保存文件
-      pdf.save(title + '.pdf');
+      pdf.save('发电能力分析' + '.pdf');
       // loading = false;
       console.log(loading);
     });

src/pages/report/index.vue

@@ -42,43 +42,43 @@
     <el-table
       :data="tableData"
       stripe
-      size="small"
+      size="large"
       :border="true"
       :style="{ width: '100%' }"
     >
       <el-table-column
-        width="250"
+       
         resizable
         align="center"
         type="index"
         label="序号"
       />
       <el-table-column
-        width="350"
+       
         resizable
         align="center"
         prop="station"
         label="场站名称"
       />
       <el-table-column
-        width="350"
+        
         resizable
         align="center"
         prop="time"
         label="时间"
       />
       <el-table-column
-        width="350"
+        
         resizable
         align="center"
         prop="wtidcount"
         label="风机数量"
       />
-      <el-table-column width="350" resizable align="center" label="操作">
+      <el-table-column  resizable align="center" label="操作">
         <template #default="scope">
-          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
+          <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
             >下载</el-button
-          >
+          > -->
           <el-button
             size="small"
             type="danger"
@@ -89,24 +89,26 @@
       </el-table-column>
     </el-table>
   </div>
-  <div id="pdfDom">
+  <div >
   <el-dialog
     v-model="centerDialogVisible"
     title="风电场性能分析报告"
     width="50%"
     center
   >
+  <div id="pdfDom">
+    <!-- <h3 style="font-weight: bolder; font-size: 18px; color: black;text-aling:center">风电场性能分析报告</h3> -->
     <p>
-      <span>场站：{{ nbdata.name }}</span>
-      <span class="ml-79">风机型号：{{ nbdata.model }}</span>
+      <span class="ml-10">场站：  {{ nbdata.name }}</span>
+      <span class="ml-77">风机型号：  {{ nbdata.model }}</span>
     </p>
     <p>
-      <span>风机数量：{{ nbdata.quantity }}</span>
-      <span class="ml-87">装机容量(MW)：{{ nbdata.capacity }}</span>
+      <span class="ml-10">风机数量：  {{ nbdata.quantity }}</span>
+      <span class="ml-85">装机容量(MW)：  {{ nbdata.capacity }}</span>
     </p>
     <p>
-      <span>报告生成日期：{{ time }}</span>
-      <span class="ml-74">数据分析周期：{{ eltime }}</span>
+      <span class="ml-10">报告生成日期：  {{ time }}</span>
+      <span class="ml-72">数据分析周期：  {{ eltime }}</span>
     </p>
     <h3 style="font-weight: bolder; font-size: 18px; color: black">概述：</h3>
     <p class="ml-7">
@@ -225,7 +227,7 @@
     <p class="ml-7">
       综上统计周期内数据分析，{{ nbdata.name }}的{{hjwtid}}台风机出现频率最高为{{hjcount}}次。
     </p>
-
+</div>
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="centerDialogVisible = false">取消</el-button>
@@ -252,10 +254,14 @@ const staticwind = ref([]);
 const stoptime = ref([]);
 const nbdata = ref({});
 const loading=ref(false)
+
 const exportPDF = () => {   
 	 loading.value = true;
 	 // 调用htmlToPdf工具函数
-     htmlToPdf.getPdf('分析报告');
+     htmlToPdf.getPdf(
+          document.querySelector("#pdfDom"),
+          "风电场性能分析报告"
+        );
      // 定时器模拟按钮loading动画的时间
       setTimeout(() => {
         loading.value = false;
@@ -265,12 +271,6 @@ const exportPDF = () => {
 }
 
       
-
-
-
-
-
-
 const centerDialogVisible = ref(false);
 /**场站 */
 const stationList = ref([]);

src/router/index.js

@@ -182,6 +182,33 @@ const routes = [{
                             '../pages/dataAnalysis/agcAnalysis/index.vue'
                         ),
                 },
+                // {
+                //     icon: 'el-icon-s-home',
+                //     path: '/report/index',
+                //     name: 'reportIndex',
+                //     meta: {
+                //         title: '分析报告',
+                //     },
+                //     component: () =>
+                //         import(
+                //             '../pages/report/index.vue'
+                //         ),
+                // },
+            ]
+        },
+        {
+            icon: 'iconfont iconbaojingpeizhi',
+            path: '/lightAnalysis',
+            name: 'lightAnalysis',
+            redirect: '/lightAnalysis/glAnalysis',
+            meta: {
+                title: '场站分析',
+            },
+            component: () =>
+                import(
+                    '../pages/routerViewss.vue'
+                ),
+            children: [
                 {
                     icon: 'el-icon-s-home',
                     path: '/report/index',
@@ -194,47 +221,32 @@ const routes = [{
                             '../pages/report/index.vue'
                         ),
                 },
+                // {
+                //     icon: 'el-icon-s-home',
+                //     path: '/lightAnalysis/glAnalysis',
+                //     name: 'glAnalysis',
+                //     meta: {
+                //         title: '功率曲线分析',
+                //     },
+                //     component: () =>
+                //         import(
+                //             '../pages/lightAnalysis/glAnalysis/index.vue'
+                //         ),
+                // },
+                // {
+                //     icon: 'el-icon-s-home',
+                //     path: '/lightAnalysis/glHotAnalysis',
+                //     name: 'glHotAnalysis',
+                //     meta: {
+                //         title: '功率光照曲线分析',
+                //     },
+                //     component: () =>
+                //         import(
+                //             '../pages/lightAnalysis/glHotAnalysis/index.vue'
+                //         ),
+                // },
             ]
         },
-        // {
-        //     icon: 'iconfont iconbaojingpeizhi',
-        //     path: '/lightAnalysis',
-        //     name: 'lightAnalysis',
-        //     redirect: '/lightAnalysis/glAnalysis',
-        //     meta: {
-        //         title: '光伏分析',
-        //     },
-        //     component: () =>
-        //         import(
-        //             '../pages/routerViewss.vue'
-        //         ),
-        //     children: [
-        //         {
-        //             icon: 'el-icon-s-home',
-        //             path: '/lightAnalysis/glAnalysis',
-        //             name: 'glAnalysis',
-        //             meta: {
-        //                 title: '功率曲线分析',
-        //             },
-        //             component: () =>
-        //                 import(
-        //                     '../pages/lightAnalysis/glAnalysis/index.vue'
-        //                 ),
-        //         },
-        //         {
-        //             icon: 'el-icon-s-home',
-        //             path: '/lightAnalysis/glHotAnalysis',
-        //             name: 'glHotAnalysis',
-        //             meta: {
-        //                 title: '功率光照曲线分析',
-        //             },
-        //             component: () =>
-        //                 import(
-        //                     '../pages/lightAnalysis/glHotAnalysis/index.vue'
-        //                 ),
-        //         },
-        //     ]
-        // },
     ],
 },