refactor(性能测试): 导出测试报告pdf修改

frontend/src/business/components/performance/report/PerformanceReportExport.vue

@@ -1,20 +1,26 @@
 <template>
   <ms-report-export-template :title="title" :type="$t('report.load_test_report')">
     <el-card id="testOverview">
-      <template v-slot:header >
+      <template v-slot:header>
-        <span class="title">{{$t('report.test_overview')}}</span>
+        <span class="title">{{ $t('report.test_overview') }}</span>
       </template>
       <ms-report-test-overview :report="report" :export="true" ref="testOverview"/>
     </el-card>
+    <el-card id="testDetails">
+      <template v-slot:header>
+        <span class="title">{{ $t('report.test_details') }}</span>
+      </template>
+      <ms-report-test-details :report="report" :export="true" ref="testDetails"/>
+    </el-card>
     <el-card id="requestStatistics" title="'requestStatistics'">
-      <template v-slot:header >
+      <template v-slot:header>
-        <span class="title">{{$t('report.test_request_statistics')}}</span>
+        <span class="title">{{ $t('report.test_request_statistics') }}</span>
       </template>
       <ms-report-request-statistics :report="report" ref="requestStatistics"/>
     </el-card>
     <el-card id="errorLog" title="'errorLog'">
-      <template v-slot:header >
+      <template v-slot:header>
-        <span class="title">{{$t('report.test_error_log')}}</span>
+        <span class="title">{{ $t('report.test_error_log') }}</span>
       </template>
       <ms-report-error-log :report="report" ref="errorLog"/>
     </el-card>
@@ -23,33 +29,35 @@
 
 <script>
 
-  import MsReportErrorLog from './components/ErrorLog';
+import MsReportErrorLog from './components/ErrorLog';
-  import MsReportRequestStatistics from './components/RequestStatistics';
+import MsReportRequestStatistics from './components/RequestStatistics';
-  import MsReportTestOverview from './components/TestOverview';
+import MsReportTestOverview from './components/TestOverview';
 
-  import MsReportTitle from "../../common/components/report/MsReportTitle";
+import MsReportTitle from "../../common/components/report/MsReportTitle";
-  import MsReportExportTemplate from "../../common/components/report/MsReportExportTemplate";
+import MsReportExportTemplate from "../../common/components/report/MsReportExportTemplate";
+import MsReportTestDetails from "@/business/components/performance/report/components/TestDetails";
 
 
-  export default {
+export default {
   name: "MsPerformanceReportExport",
   components: {
     MsReportExportTemplate,
     MsReportTitle,
     MsReportErrorLog,
+    MsReportTestDetails,
     MsReportRequestStatistics,
     MsReportTestOverview,
   },
-    props: ['report','title']
+  props: ['report', 'title']
-  }
+}
 </script>
 
 <style scoped>
 
-  .el-card {
+.el-card {
   margin-top: 20px;
   margin-bottom: 20px;
   border-style: none;
-  }
+}
 
 </style>

frontend/src/business/components/performance/report/PerformanceReportView.vue

@@ -328,10 +328,14 @@ export default {
 
       this.$nextTick(function () {
         setTimeout(() => {
-          html2canvas(document.getElementById('performanceReportExport'), {
+          let ids = ['testOverview', 'testDetails', 'requestStatistics', 'errorLog'];
-            scale: 2
+          let promises = [];
-          }).then(function (canvas) {
+          ids.forEach(id => {
-            exportPdf(name, [canvas]);
+            let promise = html2canvas(document.getElementById(id), {scale: 2});
+            promises.push(promise);
+          });
+          Promise.all(promises).then(function (canvas) {
+            exportPdf(name, canvas);
             reset();
           });
         }, 1000);

frontend/src/business/components/track/plan/view/comonents/load/LoadCaseReportView.vue

@@ -291,10 +291,14 @@ export default {
 
       this.$nextTick(function () {
         setTimeout(() => {
-          html2canvas(document.getElementById('performanceReportExport'), {
+          let ids = ['testOverview', 'testDetails', 'requestStatistics', 'errorLog'];
-            scale: 2
+          let promises = [];
-          }).then(function (canvas) {
+          ids.forEach(id => {
-            exportPdf(name, [canvas]);
+            let promise = html2canvas(document.getElementById(id), {scale: 2});
+            promises.push(promise);
+          });
+          Promise.all(promises).then(function (canvas) {
+            exportPdf(name, canvas);
             reset();
           });
         }, 1000);

frontend/src/common/js/utils.js

@@ -338,6 +338,10 @@ export function exportPdf(name, canvasList) {
       let blankHeight = a4Height - currentHeight;
 
       if (leftHeight > blankHeight) {
+        if (blankHeight < 200) {
+          pdf.addPage();
+          currentHeight = 0;
+        }
         //页面偏移
         let position = 0;
         while (leftHeight > 0) {
@@ -348,10 +352,10 @@ export function exportPdf(name, canvasList) {
           leftHeight -= occupation;
           position -= occupation;
           //避免添加空白页
-          if (leftHeight > 0) {
+          // if (leftHeight > 0) {
-            pdf.addPage();
+          // pdf.addPage();
-            currentHeight = 0;
+          // currentHeight = 0;
-          }
+          // }
         }
       } else {
         pdf.addImage(pageData, 'JPEG', 0, currentHeight, imgWidth, imgHeight);