feat(性能测试): 导出性能测试报告

backend/src/main/java/io/metersphere/xpack

@@ -1 +1 @@
-Subproject commit 321c869938357e8c2253e5bd86c963828664ae23
+Subproject commit d5b4969642fd8d10cc2f949d7377e0a0e5217a3a

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

@@ -22,13 +22,13 @@
                          @click="rerun(testId)">
                 {{ $t('report.test_execute_again') }}
               </el-button>
-              <!-- <el-button :disabled="isReadOnly" type="info" plain size="mini" @click="exports(reportName)">
+              <el-button :disabled="isReadOnly" type="info" plain size="mini" @click="exportReport(reportName)">
                  {{$t('report.export')}}
-               </el-button>-->
+              </el-button>
-              <!--
+
-              <el-button :disabled="isReadOnly" type="warning" plain size="mini">
+              <!--<el-button :disabled="isReadOnly" type="warning" plain size="mini">-->
-                {{$t('report.compare')}}
+                <!--{{$t('report.compare')}}-->
-              </el-button>-->
+              <!--</el-button>-->
             </el-row>
           </el-col>
           <el-col :span="8">
@@ -54,10 +54,10 @@
               <ms-report-test-overview :report="report" ref="testOverview"/>
             </el-tab-pane>
             <el-tab-pane :label="$t('report.test_request_statistics')">
-              <ms-report-request-statistics :report="report"/>
+              <ms-report-request-statistics :report="report" ref="requestStatistics"/>
             </el-tab-pane>
             <el-tab-pane :label="$t('report.test_error_log')">
-              <ms-report-error-log :report="report"/>
+              <ms-report-error-log :report="report" ref="errorLog"/>
             </el-tab-pane>
             <el-tab-pane :label="$t('report.test_log_details')">
               <ms-report-log-details :report="report"/>
@@ -65,6 +65,33 @@
           </el-tabs>
         </div>
 
+        <div class="report-export" v-show="reportExportVisible">
+        <!--<div class="report-export">-->
+          <el-card id="testOverview">
+            <template v-slot:header >
+              <slot name="header">
+                <span class="title">{{$t('report.test_overview')}}</span>
+              </slot>
+            </template>
+            <ms-report-test-overview :report="report" ref="testOverview"/>
+          </el-card>
+          <el-card id="requestStatistics" title="'requestStatistics'">
+            <template v-slot:header >
+              <slot name="header">
+                <span class="title">{{$t('report.test_request_statistics')}}</span>
+              </slot>
+            </template>
+            <ms-report-request-statistics :report="report" ref="requestStatistics"/>
+          </el-card>
+          <el-card id="errorLog" title="'errorLog'">
+            <template v-slot:header >
+              <slot name="header">
+                <span class="title">{{$t('report.test_error_log')}}</span>
+              </slot>
+            </template>
+            <ms-report-error-log :report="report" ref="errorLog"/>
+          </el-card>
+        </div>
 
       </el-card>
       <el-dialog :title="$t('report.test_stop_now_confirm')" :visible.sync="dialogFormVisible" width="30%">
@@ -91,6 +118,9 @@ import MsContainer from "../../common/components/MsContainer";
 import MsMainContainer from "../../common/components/MsMainContainer";
 
 import {checkoutTestManagerOrTestUser} from "@/common/js/utils";
+import {exportPdf} from "../../../../common/js/utils";
+import html2canvas from 'html2canvas';
+
 
 export default {
   name: "PerformanceReportView",
@@ -123,6 +153,8 @@ export default {
       isReadOnly: false,
       websocket: null,
       dialogFormVisible: false,
+      reportExportVisible: false,
+      isShow: true,
       testPlan: {testResourcePoolId: null}
     }
   },
@@ -247,7 +279,43 @@ export default {
       this.$set(this.report, "status", 'Completed');
       this.initReportTimeInfo();
       window.console.log("socket closed.");
-    }
+    },
+    exportReport(name) {
+      this.result = {loading: true};
+      let result = this.result;
+      result.loading = true;
+      this.reportExportVisible = true;
+      let promises = [];
+      let canvasList = new Array(3);
+      let reset = this.exportReportReset;
+      this.$nextTick(function () {
+        setTimeout(() => {
+          promises.push(this.getCanvasPromise('testOverview', 0, canvasList));
+          promises.push(this.getCanvasPromise('requestStatistics', 1, canvasList));
+          promises.push(this.getCanvasPromise('errorLog', 2, canvasList));
+
+          Promise.all(promises).then(function (info) {
+            exportPdf(name, canvasList);
+            result.loading = false;
+            reset();
+          });
+        }, 1000);
+      })
+    },
+    exportReportReset() {
+      this.reportExportVisible = false;
+      this.isShow = true;
+    },
+    getCanvasPromise(id, index, canvasList) {
+      return new Promise(function(resolve, reject) {
+        html2canvas(document.getElementById(id), {
+          scale: 2
+        }).then(function(canvas) {
+          canvasList[index] = canvas;
+          resolve('success');
+        });
+      });
+    },
   },
   created() {
     this.isReadOnly = false;
@@ -305,14 +373,18 @@ export default {
 
 <style scoped>
 
-.ms-report-view-btns {
+  .ms-report-view-btns {
     margin-top: 15px;
-}
+  }
 
-.ms-report-time-desc {
+  .ms-report-time-desc {
     text-align: left;
     display: block;
     color: #5C7878;
-}
+  }
+
+  .report-export .el-card {
+    margin-bottom: 15px;
+  }
 
 </style>

frontend/src/business/components/track/plan/view/comonents/report/TemplateComponent/TemplateComponent.vue

@@ -67,7 +67,7 @@
               scale: 2
             }).then(function(canvas) {
               //排序
-              canvasList.splice(index, 0, canvas);
+              canvasList[index] = canvas;
               resolve('success');
             });
           });

frontend/src/business/components/track/plan/view/comonents/report/TestCaseReportView.vue

@@ -212,7 +212,7 @@
         }
 
         Promise.all(promises).then(function (info) {
-          exportPdf(canvasList);
+          exportPdf(name, canvasList);
           result.loading = false;
         });
       },

frontend/src/business/components/xpack

@@ -1 +1 @@
-Subproject commit f2d5a342c82e629f510550d5778d752bb73bf5e7
+Subproject commit 0a375848d034d20eaf05caf11769e1c75c39235c

frontend/src/common/js/utils.js

@@ -204,7 +204,7 @@ export function getUUID() {
 }
 
 
-export function exportPdf(canvasList) {
+export function exportPdf(name, canvasList) {
 
   let pdf = new jsPDF('', 'pt', 'a4');
 
@@ -212,6 +212,7 @@ export function exportPdf(canvasList) {
   let currentHeight = 0;
   for (let canvas of canvasList) {
     if (canvas) {
+
       let contentWidth = canvas.width;
       let contentHeight = canvas.height;
 
@@ -254,7 +255,7 @@ export function exportPdf(canvasList) {
     }
   }
 
-  pdf.save('stone.pdf');
+  pdf.save(name);
 
 }