fit: 测试报告导出格式优化

2020-09-23 11:45:14 +08:00 · 2020-09-23 11:45:14 +08:00 · d4473116fd
parent f28e0c7229
commit d4473116fd
9 changed files with 180 additions and 95 deletions
--- a/frontend/src/business/components/api/report/ApiReportExport.vue
+++ b/frontend/src/business/components/api/report/ApiReportExport.vue
@ -1,30 +1,35 @@
 <template>
  <el-card>
-    <div class="report-title title">接口测试报告</div>
+    <ms-report-title :title="$t('report.api_test_report')"/>
    <ms-metric-chart :content="content" :totalTime="totalTime"/>
    <div class="scenario-result" v-for="(scenario, index) in content.scenarios" :key="index" :scenario="scenario">
        <div>
-          <el-card >
+          <el-card>
            <template v-slot:header>
              {{$t('api_report.scenario_name')}}：{{scenario.name}}
            </template>
-            <div class="ms-border" v-for="(request, index) in scenario.requestResults" :key="index" :request="request">
+            <div class="ms-border clearfix" v-for="(request, index) in scenario.requestResults" :key="index" :request="request">

-              <div class="request-left">
-                <api-report-reqest-header-item :title="request.name">
-                  <span class="url"> {{request.url}}</span>
-                </api-report-reqest-header-item>
+              <div class="request-top">
+                <div>
+                  {{request.name}}
+                </div>
+                <div class="url">
+                  {{request.url}}
+                </div>
              </div>

+              <el-divider/>

-              <div class="request-right">
+
+              <div class="request-bottom">

                <api-report-reqest-header-item :title="$t('api_test.request.method')">
                  <span class="method"> {{request.method}}</span>
                </api-report-reqest-header-item>

                <api-report-reqest-header-item :title="$t('api_report.response_time')">
-                  {{request.responseResult.responseTime}}
+                  {{request.responseResult.responseTime}} ms
                </api-report-reqest-header-item>

                <api-report-reqest-header-item :title="$t('api_report.latency')">
@ -36,11 +41,11 @@
                </api-report-reqest-header-item>

                <api-report-reqest-header-item :title="$t('api_report.response_size')">
-                  {{request.responseResult.latency}} ms
+                  {{request.responseResult.responseSize}} bytes
                </api-report-reqest-header-item>

                <api-report-reqest-header-item :title="$t('api_report.error')">
-                  {{request.responseResult.responseSize}} bytes
+                  {{request.error}}
                </api-report-reqest-header-item>

                <api-report-reqest-header-item :title="$t('api_report.assertions')">
@ -72,9 +77,10 @@
    import MsRequestResultTail from "./components/RequestResultTail";
    import ApiReportReqestHeaderItem from "./ApiReportReqestHeaderItem";
    import MsMetricChart from "./components/MetricChart";
+    import MsReportTitle from "../../common/components/MsReportTitle";
    export default {
      name: "MsApiReportExport",
-      components: {MsMetricChart, ApiReportReqestHeaderItem, MsRequestResultTail, MsScenarioResult},
+      components: {MsReportTitle, MsMetricChart, ApiReportReqestHeaderItem, MsRequestResultTail, MsScenarioResult},
      props: {
        content: Object,
        totalTime: Number
@ -99,27 +105,10 @@
    font-weight: 500;
  }

-  .request-right {
-    float: right;
-  }
-
-  .request-left {
-    float: left;
+  .request-top,.request-bottom {
    margin-left: 20px;
  }

-  .ms-border {
-    height: 60px;
-  }
-
-  .report-title {
-    font-size: 30px;
-    font-weight: bold;
-    height: 50px;
-    text-align: center;
-    margin-bottom: 20px;
-  }
-
  .url {
    color: #409EFF;
    font-size: 14px;
@ -133,4 +122,8 @@
    border-style: none;
  }

+  .request-top div {
+    margin-top: 10px;
+  }
+
 </style>
--- a/frontend/src/business/components/common/components/MsReportTitle.vue
+++ b/frontend/src/business/components/common/components/MsReportTitle.vue
@ -0,0 +1,22 @@
+<template>
+  <div class="report-title title">{{title}}</div>
+</template>
+
+<script>
+    export default {
+      name: "MsReportTitle",
+      props: {title: String}
+    }
+</script>
+
+<style scoped>
+
+  .report-title {
+    font-size: 30px;
+    font-weight: bold;
+    height: 50px;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+
+</style>
--- a/frontend/src/business/components/performance/report/PerformanceReportExport.vue
+++ b/frontend/src/business/components/performance/report/PerformanceReportExport.vue
@ -0,0 +1,54 @@
+<template>
+  <el-card class="report-export">
+    <ms-report-title :title="$t('report.load_test_report')"/>
+    <el-card id="testOverview">
+      <template v-slot:header >
+        <span class="title">{{$t('report.test_overview')}}</span>
+      </template>
+      <ms-report-test-overview :report="report" ref="testOverview"/>
+    </el-card>
+    <el-card id="requestStatistics" title="'requestStatistics'">
+      <template v-slot:header >
+        <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 >
+        <span class="title">{{$t('report.test_error_log')}}</span>
+      </template>
+      <ms-report-error-log :report="report" ref="errorLog"/>
+    </el-card>
+  </el-card>
+</template>
+
+<script>
+
+  import MsReportErrorLog from './components/ErrorLog';
+  import MsReportRequestStatistics from './components/RequestStatistics';
+  import MsReportTestOverview from './components/TestOverview';
+
+  import {checkoutTestManagerOrTestUser} from "@/common/js/utils";
+  import MsPerformanceReportExport from "./PerformanceReportExport";
+  import MsReportTitle from "../../common/components/MsReportTitle";
+
+
+  export default {
+    name: "MsPerformanceReportExport",
+    components: {
+      MsReportTitle,
+      MsReportErrorLog,
+      MsReportRequestStatistics,
+      MsReportTestOverview,
+    },
+    props: ['report']
+  }
+</script>
+
+<style scoped>
+
+  .report-export .el-card {
+    margin-top: 20px;
+  }
+
+</style>
--- a/frontend/src/business/components/performance/report/PerformanceReportView.vue
+++ b/frontend/src/business/components/performance/report/PerformanceReportView.vue
@ -22,8 +22,8 @@
                         @click="rerun(testId)">
                {{ $t('report.test_execute_again') }}
              </el-button>
-              <el-button :disabled="isReadOnly" type="info" plain size="mini" @click="exportReport(reportName)">
-                 {{$t('report.export')}}
+              <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" type="warning" plain size="mini">-->
@ -65,26 +65,7 @@
          </el-tabs>
        </div>

-        <div class="report-export" v-show="reportExportVisible">
-          <el-card id="testOverview">
-            <template v-slot:header >
-              <span class="title">{{$t('report.test_overview')}}</span>
-            </template>
-            <ms-report-test-overview :report="report" ref="testOverview"/>
-          </el-card>
-          <el-card id="requestStatistics" title="'requestStatistics'">
-            <template v-slot:header >
-              <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 >
-              <span class="title">{{$t('report.test_error_log')}}</span>
-            </template>
-            <ms-report-error-log :report="report" ref="errorLog"/>
-          </el-card>
-        </div>
+        <ms-performance-report-export id="performanceReportExport" v-show="reportExportVisible" :report="report"/>

      </el-card>
      <el-dialog :title="$t('report.test_stop_now_confirm')" :visible.sync="dialogFormVisible" width="30%">
@ -113,11 +94,13 @@ import MsMainContainer from "../../common/components/MsMainContainer";
 import {checkoutTestManagerOrTestUser} from "@/common/js/utils";
 import {exportPdf} from "../../../../common/js/utils";
 import html2canvas from 'html2canvas';
+import MsPerformanceReportExport from "./PerformanceReportExport";


 export default {
  name: "PerformanceReportView",
  components: {
+    MsPerformanceReportExport,
    MsReportErrorLog,
    MsReportLogDetails,
    MsReportRequestStatistics,
@ -147,7 +130,6 @@ export default {
      websocket: null,
      dialogFormVisible: false,
      reportExportVisible: false,
-      isShow: true,
      testPlan: {testResourcePoolId: null}
    }
  },
@ -273,41 +255,25 @@ export default {
      this.initReportTimeInfo();
      window.console.log("socket closed.");
    },
-    exportReport(name) {
-      this.result = {loading: true};
-      let result = this.result;
-      result.loading = true;
+    handleExport(name) {
+      this.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;
+          html2canvas(document.getElementById('performanceReportExport'), {
+            scale: 2
+          }).then(function(canvas) {
+            exportPdf(name, [canvas]);
            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');
-        });
-      });
+      this.result.loading = false;
    },
  },
  created() {
--- a/frontend/src/business/components/track/plan/view/comonents/report/TestCaseReportView.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/report/TestCaseReportView.vue
@ -33,8 +33,11 @@

        <div class="container" ref="resume" id="app">
          <el-main>
-            <div v-for="(item, index) in previews" :key="item.id" id="reportViewpp">
-              <template-component :isReportView="true" :metric="metric" :preview="item" :index="index" ref="templateComponent"/>
+            <div id="reportViewpp" :class="{'report-export' : reportExportVisible}">
+              <ms-report-title v-if="reportExportVisible" :title="$t('report.test_plan_report')"/>
+              <div v-for="(item, index) in previews" :key="item.id">
+                <template-component :isReportView="true" :metric="metric" :preview="item" :index="index" ref="templateComponent"/>
+              </div>
            </div>
          </el-main>
        </div>
@ -52,10 +55,13 @@
  import RichTextComponent from "./TemplateComponent/RichTextComponent";
  import TestCaseReportTemplateEdit from "./TestCaseReportTemplateEdit";
  import TemplateComponent from "./TemplateComponent/TemplateComponent";
+  import html2canvas from "html2canvas";
+  import MsReportTitle from "../../../../../common/components/MsReportTitle";

  export default {
    name: "TestCaseReportView",
    components: {
+      MsReportTitle,
      TemplateComponent,
      TestCaseReportTemplateEdit,
      RichTextComponent, TestResultComponent, TestResultChartComponent, BaseInfoComponent
@ -70,6 +76,7 @@
        reportId: '',
        metric: {},
        planId: '',
+        reportExportVisible: false,
        componentMap: new Map(
          [
            [1, {name: this.$t('test_track.plan_view.base_info'), id: 1, type: 'system'}],
@ -198,24 +205,44 @@
          }
        });
      },
-      /*导出报告*/
      handleExport(name) {
+        this.result.loading = true;
+        this.reportExportVisible = true;
+        let reset = this.exportReportReset;

-        let result = this.result;
-        result.loading = true;
-
-        let promises = [];
-        let canvasList = new Array(this.previews.length);
-
-        for (let item of this.$refs.templateComponent) {
-          promises.push(item.getCanvas(canvasList));
-        }
-
-        Promise.all(promises).then(function (info) {
-          exportPdf(name, canvasList);
-          result.loading = false;
+        this.$nextTick(function () {
+          setTimeout(() => {
+            html2canvas(document.getElementById('reportViewpp'), {
+              scale: 2
+            }).then(function(canvas) {
+              exportPdf(name, [canvas]);
+              reset();
+            });
+          }, 1000);
        });
+
      },
+      exportReportReset() {
+        this.reportExportVisible = false;
+        this.result.loading = false;
+      },
+      // handleExport(name) {
+      //
+      //   let result = this.result;
+      //   result.loading = true;
+      //
+      //   let promises = [];
+      //   let canvasList = new Array(this.previews.length);
+      //
+      //   for (let item of this.$refs.templateComponent) {
+      //     promises.push(item.getCanvas(canvasList));
+      //   }
+      //
+      //   Promise.all(promises).then(function (info) {
+      //     exportPdf(name, canvasList);
+      //     result.loading = false;
+      //   });
+      // },
    }
  }
 </script>
@ -250,4 +277,18 @@
    text-align: right;
  }

+  .report-export {
+    padding: 20px 30px;
+    background: white;
+  }
+
+  .report-export >>> .template-component {
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  .report-export .el-card {
+    margin-top: 20px;
+  }
+
 </style>
--- a/frontend/src/business/components/xpack
+++ b/frontend/src/business/components/xpack
@ -1 +1 @@
-Subproject commit 2c5f7e15858f51e836cffa911f8ab7511b3cc0d5
+Subproject commit 0368a1888936d4ae75554e5341509379982e243c
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@ -292,6 +292,9 @@ export default {
    add: 'Add Role',
  },
  report: {
+    api_test_report: 'Api Test Report',
+    load_test_report: 'Load Test Report',
+    test_plan_report: 'Test Plan Report',
    recent: 'Recent Report',
    search_by_name: 'Search by Name',
    test_name: 'Test',
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@ -292,6 +292,9 @@ export default {
    add: '添加角色',
  },
  report: {
+    api_test_report: '接口测试报告',
+    load_test_report: '性能测试报告',
+    test_plan_report: '测试计划报告',
    recent: '最近的报告',
    search_by_name: '根据名称搜索',
    test_name: '所属测试',
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@ -292,6 +292,9 @@ export default {
    add: '添加角色',
  },
  report: {
+    api_test_report: '接口測試報告',
+    load_test_report: '性能測試報告',
+    test_plan_report: '測試計劃報告',
    recent: '最近的報告',
    search_by_name: '根據名稱搜索',
    test_name: '所屬測試',