feat: 增加报告对比功能

backend/src/main/java/io/metersphere/base/mapper/ext/ExtLoadTestReportMapper.xml

@@ -91,6 +91,9 @@
             <if test="reportRequest.projectId != null">
                 AND project.id = #{reportRequest.projectId,jdbcType=VARCHAR}
             </if>
+            <if test="reportRequest.testId != null">
+                AND ltr.test_id = #{reportRequest.testId,jdbcType=VARCHAR}
+            </if>
             <if test="reportRequest.filters != null and reportRequest.filters.size() > 0">
                 <foreach collection="reportRequest.filters.entrySet()" index="key" item="values">
                     <if test="values != null and values.size() > 0">

backend/src/main/java/io/metersphere/performance/controller/request/ReportRequest.java

@@ -12,6 +12,7 @@ import java.util.Map;
 public class ReportRequest {
     private String name;
     private String workspaceId;
+    private String testId;
     private String userId;
     private List<OrderRequest> orders;
     private Map<String, List<String>> filters;

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

@@ -25,13 +25,12 @@
               <el-button :disabled="isReadOnly" type="info" plain size="mini" @click="handleExport(reportName)">
                 {{ $t('test_track.plan_view.export_report') }}
               </el-button>
+              <el-button :disabled="isReadOnly || report.status !== 'Completed'" type="default" plain size="mini" @click="compareReports()">
+                {{ $t('report.compare') }}
+              </el-button>
               <el-button :disabled="isReadOnly" type="warning" plain size="mini" @click="downloadJtl()">
                 {{ $t('report.downloadJtl') }}
               </el-button>
-
-              <!--<el-button :disabled="isReadOnly" type="warning" plain size="mini">-->
-              <!--{{$t('report.compare')}}-->
-              <!--</el-button>-->
             </el-row>
           </el-col>
           <el-col :span="8">
@@ -83,6 +82,7 @@
         </div>
       </el-dialog>
     </ms-main-container>
+    <compare-reports ref="compareReports"/>
   </ms-container>
 </template>
 
@@ -99,11 +99,13 @@ import {checkoutTestManagerOrTestUser, exportPdf} from "@/common/js/utils";
 import html2canvas from 'html2canvas';
 import MsPerformanceReportExport from "./PerformanceReportExport";
 import {Message} from "element-ui";
+import CompareReports from "@/business/components/performance/report/components/CompareReports";
 
 
 export default {
   name: "PerformanceReportView",
   components: {
+    CompareReports,
     MsPerformanceReportExport,
     MsReportErrorLog,
     MsReportLogDetails,
@@ -312,6 +314,9 @@ export default {
           Message.error({message: JSON.parse(data).message || e.message, showClose: true});
         });
       });
+    },
+    compareReports() {
+      this.$refs.compareReports.open(this.report);
     }
   },
   created() {

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

@@ -25,31 +25,26 @@
           <el-table-column
             prop="name"
             :label="$t('commons.name')"
-            width="150"
             show-overflow-tooltip>
           </el-table-column>
           <el-table-column
             prop="testName"
             :label="$t('report.test_name')"
-            width="150"
             show-overflow-tooltip>
           </el-table-column>
           <el-table-column
             prop="projectName"
             :label="$t('report.project_name')"
-            width="150"
             show-overflow-tooltip>
           </el-table-column>
           <el-table-column
             prop="userName"
             :label="$t('report.user_name')"
-            width="150"
             show-overflow-tooltip>
           </el-table-column>
           <el-table-column
             prop="createTime"
             sortable
-            width="250"
             :label="$t('commons.create_time')">
             <template v-slot:default="scope">
               <span>{{ scope.row.createTime | timestampFormatDate }}</span>
@@ -76,8 +71,8 @@
             <template v-slot:default="scope">
               <ms-table-operator-button :tip="$t('api_report.detail')" icon="el-icon-s-data"
                                         @exec="handleEdit(scope.row)" type="primary"/>
-              <ms-table-operator-button :tip="$t('load_test.report.diff')" icon="el-icon-more"
+              <ms-table-operator-button :tip="$t('load_test.report.diff')" icon="el-icon-s-operation"
-                                        @exec="handleDiff(scope.row)" type="success"/>
+                                        @exec="handleDiff(scope.row)" type="warning"/>
               <ms-table-operator-button :is-tester-permission="true" :tip="$t('api_report.delete')"
                                         icon="el-icon-delete" @exec="handleDelete(scope.row)" type="danger"/>
             </template>
@@ -87,6 +82,7 @@
                              :total="total"/>
       </el-card>
     </ms-main-container>
+    <compare-reports ref="compareReports"/>
   </ms-container>
 </template>
 
@@ -103,11 +99,14 @@ import MsTableHeader from "../../common/components/MsTableHeader";
 import {LIST_CHANGE, PerformanceEvent} from "@/business/components/common/head/ListEvent";
 import ShowMoreBtn from "../../track/case/components/ShowMoreBtn";
 import {_filter, _sort} from "@/common/js/tableUtils";
-
+import MsDialogFooter from "@/business/components/common/components/MsDialogFooter";
+import CompareReports from "@/business/components/performance/report/components/CompareReports";
 
 export default {
   name: "PerformanceTestReportList",
   components: {
+    CompareReports,
+    MsDialogFooter,
     MsTableHeader,
     ReportTriggerModeItem,
     MsTableOperatorButton,
@@ -203,7 +202,7 @@ export default {
       });
     },
     handleDiff(report) {
-      console.log("aaa");
+      this.$refs.compareReports.open(report);
     },
     _handleDeleteNoMsg(report) {
       this.result = this.$post(this.deletePath + report.id, {}, () => {

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

@@ -0,0 +1,107 @@
+<template>
+  <el-dialog :close-on-click-modal="false"
+             :destroy-on-close="true"
+             :title="$t('已完成的测试报告')" width="50%"
+             :visible.sync="loadReportVisible">
+    <el-table v-loading="reportLoadingResult.loading"
+              class="basic-config"
+              :data="compareReports"
+              @select-all="handleSelectAll"
+              @select="handleSelectionChange">
+
+      <el-table-column type="selection"/>
+      <el-table-column
+        prop="name"
+        :label="$t('commons.name')"
+        show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column
+        prop="userName"
+        :label="$t('report.user_name')"
+        show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column
+        :label="$t('commons.create_time')">
+        <template v-slot:default="scope">
+          <i class="el-icon-time"/>
+          <span class="last-modified">{{ scope.row.createTime | timestampFormatDate }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <ms-table-pagination :change="getCompareReports" :current-page.sync="currentPage" :page-size.sync="pageSize"
+                         :total="total"/>
+
+    <template v-slot:footer>
+      <ms-dialog-footer @cancel="close" @confirm="handleCompare"/>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import MsTablePagination from "@/business/components/common/pagination/TablePagination";
+import MsDialogFooter from "@/business/components/common/components/MsDialogFooter";
+
+export default {
+  name: "CompareReports",
+  components: {MsDialogFooter, MsTablePagination},
+  data() {
+    return {
+      loadReportVisible: false,
+      reportLoadingResult: {},
+      compareReports: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      selectIds: new Set,
+    }
+  },
+  methods: {
+    open(report) {
+      this.getCompareReports(report.testId);
+      this.loadReportVisible = true;
+    },
+    close() {
+      this.loadReportVisible = false;
+    },
+    getCompareReports(testId) {
+
+      let condition = {
+        testId: testId,
+        filters: {status: ["Completed"]}
+      };
+      this.reportLoadingResult = this.$post('/performance/report/list/all/' + this.currentPage + "/" + this.pageSize, condition, res => {
+        let data = res.data;
+        this.total = data.itemCount;
+        this.compareReports = data.listObject;
+      })
+    },
+    handleCompare() {
+      console.log(111);
+    },
+    handleSelectAll(selection) {
+      if (selection.length > 0) {
+        this.compareReports.forEach(item => {
+          this.selectIds.add(item.id);
+        });
+      } else {
+        this.compareReports.forEach(item => {
+          if (this.selectIds.has(item.id)) {
+            this.selectIds.delete(item.id);
+          }
+        });
+      }
+    },
+    handleSelectionChange(selection, row) {
+      if (this.selectIds.has(row.id)) {
+        this.selectIds.delete(row.id);
+      } else {
+        this.selectIds.add(row.id);
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/i18n/zh-CN.js

@@ -433,7 +433,7 @@ export default {
     export: '导出',
     export_to_ms_format: '导出 Metersphere 格式',
     export_to_swagger3_format: '导出 Swagger3.0 格式',
-    compare: '比较',
+    compare: '报告对比',
     generation_error: '报告生成错误, 无法查看, 请检查日志详情!',
     being_generated: '报告正在生成中...',
     delete_confirm: '确认删除报告: ',

frontend/src/i18n/zh-TW.js

@@ -433,7 +433,7 @@ export default {
     export: '導出',
     export_to_ms_format: '導出 Metersphere 格式',
     export_to_swagger3_format: '導出 Swagger3.0 格式',
-    compare: '比較',
+    compare: '報告比較',
     generation_error: '報告生成錯誤, 無法查看, 請檢查日誌詳情!',
     being_generated: '報告正在生成中...',
     delete_confirm: '確認刪除報告: ',