feat(LDAP): 测试报告导出

2020-08-18 15:56:19 +08:00 · 2020-08-18 15:56:19 +08:00 · 509e5c9fbb
parent 1cff9c1d02
commit 509e5c9fbb
10 changed files with 510 additions and 390 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@ -38,6 +38,7 @@
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
+    "file-writer": "^1.0.2",
    "vue-template-compiler": "^2.6.10",
    "vue2-ace-editor": "0.0.15"
  },
--- a/frontend/src/business/components/api/report/ApiReportView.vue
+++ b/frontend/src/business/components/api/report/ApiReportView.vue
@ -4,9 +4,17 @@
      <el-card>
        <section class="report-container" v-if="this.report.testId">
          <header class="report-header">
+            <el-row>
+              <el-col>
                <span>{{ report.projectName }} / </span>
                <router-link :to="path">{{ report.testName }}</router-link>
                <span class="time">{{ report.createTime | timestampFormatDate }}</span>
+                <el-button plain type="primary" size="mini" @click="handleExport(report.name)"
+                           style="margin-left: 1200px">
+                  {{$t('test_track.plan_view.export_report')}}
+                </el-button>
+              </el-col>
+            </el-row>
          </header>
          <main v-if="this.isNotRunning">
            <ms-metric-chart :content="content" :totalTime="totalTime"/>
@ -43,6 +51,8 @@
  import MsMetricChart from "./components/MetricChart";
  import MsScenarioResults from "./components/ScenarioResults";
  import {Scenario} from "../test/model/ScenarioModel";
+  import writer from "file-writer";
+  import ResumeCss from "../../../../common/css/main.css";

  export default {
    name: "MsApiReportView",
@ -62,6 +72,29 @@
    },

    methods: {
+      handleExport(name) {
+        let html = this.getHtml();
+        writer(`${name}.html`, html, 'utf-8');
+      },
+      getHtml() {
+        const template = this.$refs.resume.innerHTML
+        let html = `<!DOCTYPE html>
+                 <html>
+                 <head>
+                 <meta charset="utf-8">
+                 <meta name="viewport" content="width=device-width,initial-scale=1.0">
+                 <title>html</title>
+                <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+                <style>${ResumeCss}</style>
+                </head>
+                <body>
+                <div style="margin:0 auto;width:1200px">
+                     ${template}
+                </div>
+                </body>
+                </html>`
+        return html
+      },
      init() {
        this.loading = true;
        this.report = {};
--- a/frontend/src/business/components/common/components/MsPieChart.vue
+++ b/frontend/src/business/components/common/components/MsPieChart.vue
@ -43,7 +43,8 @@
              type: 'pie',
              radius: ['40%', '70%'],
              // roseType: 'angle',
-              data: this.data
+              data: this.data,
+              animation: false
            }
          ]
        },
--- a/frontend/src/business/components/performance/report/PerformanceReportView.vue
+++ b/frontend/src/business/components/performance/report/PerformanceReportView.vue
@ -22,9 +22,10 @@
                         @click="rerun(testId)">
                {{ $t('report.test_execute_again') }}
              </el-button>
-              <!--<el-button :disabled="isReadOnly" type="info" plain size="mini">
+              <el-button :disabled="isReadOnly" type="info" plain size="mini" @click="exports(reportName)">
                {{$t('report.export')}}
              </el-button>
+              <!--
              <el-button :disabled="isReadOnly" type="warning" plain size="mini">
                {{$t('report.compare')}}
              </el-button>-->
@ -44,7 +45,7 @@
        </el-row>

        <el-divider/>
-
+        <div ref="resume">
          <el-tabs v-model="active" type="border-card" :stretch="true">
            <el-tab-pane :label="$t('load_test.pressure_config')">
              <ms-performance-pressure-config :is-read-only="true" :report="report"/>
@ -62,6 +63,8 @@
              <ms-report-log-details :report="report"/>
            </el-tab-pane>
          </el-tabs>
+        </div>
+

      </el-card>
      <el-dialog :title="$t('report.test_stop_now_confirm')" :visible.sync="dialogFormVisible" width="30%">
@ -79,17 +82,19 @@
 </template>

 <script>
-import MsReportErrorLog from './components/ErrorLog';
-import MsReportLogDetails from './components/LogDetails';
-import MsReportRequestStatistics from './components/RequestStatistics';
-import MsReportTestOverview from './components/TestOverview';
-import MsPerformancePressureConfig from "./components/PerformancePressureConfig";
-import MsContainer from "../../common/components/MsContainer";
-import MsMainContainer from "../../common/components/MsMainContainer";
+  import MsReportErrorLog from './components/ErrorLog';
+  import MsReportLogDetails from './components/LogDetails';
+  import MsReportRequestStatistics from './components/RequestStatistics';
+  import MsReportTestOverview from './components/TestOverview';
+  import MsPerformancePressureConfig from "./components/PerformancePressureConfig";
+  import MsContainer from "../../common/components/MsContainer";
+  import MsMainContainer from "../../common/components/MsMainContainer";

-import {checkoutTestManagerOrTestUser} from "@/common/js/utils";
+  import {checkoutTestManagerOrTestUser} from "@/common/js/utils";
+  import writer from "file-writer";
+  import ResumeCss from "../../../../common/css/main.css";

-export default {
+  export default {
    name: "PerformanceReportView",
    components: {
      MsReportErrorLog,
@ -124,6 +129,29 @@ export default {
      }
    },
    methods: {
+      exports(name) {
+        let html = this.getHtml();
+        writer(`${name}.html`, html, 'utf-8');
+      },
+      getHtml() {
+        const template = this.$refs.resume.innerHTML
+        let html = `<!DOCTYPE html>
+                 <html>
+                 <head>
+                 <meta charset="utf-8">
+                 <meta name="viewport" content="width=device-width,initial-scale=1.0">
+                 <title>html</title>
+                <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+                <style></style>
+                </head>
+                <body>
+                <div style="margin:0 auto;width:1200px">
+                     ${template}
+                </div>
+                </body>
+                </html>`
+        return html
+      },
      initBreadcrumb() {
        if (this.reportId) {
          this.result = this.$get("/performance/report/test/pro/info/" + this.reportId, res => {
@ -310,19 +338,19 @@ export default {
        }
      }
    }
-}
+  }
 </script>

 <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;
-}
+  }

 </style>
--- a/frontend/src/business/components/track/plan/view/comonents/report/TemplateComponent/ExportTestCaseReport.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/report/TemplateComponent/ExportTestCaseReport.vue
@ -0,0 +1,15 @@
+<template>
+  <div>
+    <chart/>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "ExportTestCaseReport"
+  }
+</script>
+
+<style scoped>
+
+</style>
--- a/frontend/src/business/components/track/plan/view/comonents/report/TemplateComponent/TestResultChartComponent.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/report/TemplateComponent/TestResultChartComponent.vue
@ -66,6 +66,8 @@
            this.charData.push(data);
          });
          this.reload();
+
+
        },
        reload() {
          this.isShow = false;
--- a/frontend/src/business/components/track/plan/view/comonents/report/TestCaseReportView.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/report/TestCaseReportView.vue
@ -13,18 +13,25 @@
        <el-row type="flex" class="head-bar">
          <el-col :span="12">
            <div class="name-edit">
-              <el-button plain size="mini" icon="el-icon-back" @click="handleClose">{{$t('test_track.return')}}</el-button>
-              &nbsp;
+              <el-button plain size="mini" icon="el-icon-back" @click="handleClose">{{$t('test_track.return')}}
+              </el-button>&nbsp;
              <span class="title">{{report.name}}</span>
            </div>
          </el-col>
          <el-col :span="12" class="head-right">
-            <el-button :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleSave">{{$t('commons.save')}}</el-button>
-            <el-button :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleEdit">{{$t('test_track.plan_view.edit_component')}}</el-button>
+            <el-button :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleSave">
+              {{$t('commons.save')}}
+            </el-button>
+            <el-button :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleEdit">
+              {{$t('test_track.plan_view.edit_component')}}
+            </el-button>
+            <el-button :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleExport(report.name)">
+              {{$t('test_track.plan_view.export_report')}}
+            </el-button>
          </el-col>
        </el-row>

-        <div class="container">
+        <div class="container" ref="resume">
          <el-main>
            <div class="preview" v-for="item in previews" :key="item.id">
              <template-component :isReportView="true" :metric="metric" :preview="item"/>
@ -47,16 +54,20 @@
  import RichTextComponent from "./TemplateComponent/RichTextComponent";
  import TestCaseReportTemplateEdit from "./TestCaseReportTemplateEdit";
  import TemplateComponent from "./TemplateComponent/TemplateComponent";
+  import writer from 'file-writer'
+  import ResumeCss from "../../../../../../../common/css/main.css";

  export default {
    name: "TestCaseReportView",
    components: {
-        TemplateComponent,
+      TemplateComponent, ResumeCss,
      TestCaseReportTemplateEdit,
-        RichTextComponent, TestResultComponent, TestResultChartComponent, BaseInfoComponent},
+      RichTextComponent, TestResultComponent, TestResultChartComponent, BaseInfoComponent
+    },
    data() {
      return {
        result: {},
+        imgUrl: "",
        showDialog: false,
        previews: [],
        report: {},
@ -65,12 +76,12 @@
        planId: '',
        componentMap: new Map(
          [
-              [1, { name: this.$t('test_track.plan_view.base_info'), id: 1 , type: 'system'}],
-              [2, { name: this.$t('test_track.plan_view.test_result'), id: 2 , type: 'system'}],
-              [3, { name: this.$t('test_track.plan_view.result_distribution'), id: 3 ,type: 'system'}],
-              [4, { name: this.$t('test_track.plan_view.failure_case'), id: 4 ,type: 'system'}],
-              [5, { name: this.$t('test_track.plan_view.defect_list'), id: 5 ,type: 'system'}],
-              [6, { name: this.$t('test_track.plan_view.custom_component'), id: 6 ,type: 'custom'}]
+            [1, {name: this.$t('test_track.plan_view.base_info'), id: 1, type: 'system'}],
+            [2, {name: this.$t('test_track.plan_view.test_result'), id: 2, type: 'system'}],
+            [3, {name: this.$t('test_track.plan_view.result_distribution'), id: 3, type: 'system'}],
+            [4, {name: this.$t('test_track.plan_view.failure_case'), id: 4, type: 'system'}],
+            [5, {name: this.$t('test_track.plan_view.defect_list'), id: 5, type: 'system'}],
+            [6, {name: this.$t('test_track.plan_view.custom_component'), id: 6, type: 'custom'}]
          ]
        ),
        isTestManagerOrTestUser: false
@ -134,10 +145,35 @@
      handleEdit() {
        this.$refs.templateEdit.open(this.reportId, true);
      },
+      /*导出报告*/
+      handleExport(name) {
+        let html = this.getHtml();
+        writer(`${name}.html`, html, 'utf-8');
+      },
+      getHtml() {
+        const template = this.$refs.resume.innerHTML
+        let html = `<!DOCTYPE html>
+                 <html>
+                 <head>
+                 <meta charset="utf-8">
+                 <meta name="viewport" content="width=device-width,initial-scale=1.0">
+                 <title>html</title>
+                <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+                <style>${ResumeCss}</style>
+                </head>
+                <body>
+                <div style="margin:0 auto;width:1200px">
+                   <img id ='div' :src = "imgUrl" :style=" {width: '1000px', height: '500px'}" />
+                     ${template}
+                </div>
+                </body>
+                </html>`
+        return html
+      },
      handleSave() {
        let param = {};
        this.buildParam(param);
-          this.result = this.$post('/case/report/edit', param, () =>{
+        this.result = this.$post('/case/report/edit', param, () => {
          this.$success(this.$t('commons.save_success'));
        });
      },
@ -186,7 +222,8 @@
            this.metric.endTime = new Date(this.report.endTime);
          }
        });
-        }
+      },
+
    }
  }
 </script>
@ -204,7 +241,7 @@
    line-height: 45px;
    padding: 0 10px;
    border: 1px solid #EBEEF5;
-    box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
+    box-shadow: 0 0 2px 0 rgba(31, 31, 31, 0.15), 0 1px 2px 0 rgba(31, 31, 31, 0.15);
  }

  .container {
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@ -669,6 +669,7 @@ export default {
      report_template: "Report template",
      test_detail: "Test detail",
      failure_case: "Failure case",
+      export_report: "Export Report"
    }
  },
  test_resource_pool: {
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@ -674,6 +674,7 @@ export default {
      report_template: "测试报告模版",
      test_detail: "测试详情",
      failure_case: "失败用例",
+      export_report: "导出报告"
    }
  },
  test_resource_pool: {
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@ -669,6 +669,7 @@ export default {
      report_template: "測試報告模版",
      test_detail: "測試詳情",
      failure_case: "失敗用例",
+      export_report: "匯出報告"
    }
  },
  test_resource_pool: {