style(接口测试): 报告页面高度自动适应，导出报告样式优化

api-test/frontend/src/business/automation/report/ApiReportDetail.vue

@@ -1,109 +1,112 @@
 <template>
-  <ms-container v-loading="loading || reportExportVisible">
-    <ms-main-container class="api-report-content">
-      <el-card class="report-body">
-        <section class="report-container" v-if="this.report.testId">
-          <!-- header -->
-          <ms-api-report-view-header
-            :show-cancel-button="showCancel"
-            :show-rerun-button="showRerunButton"
-            :is-plan="isPlan"
-            :is-template="isTemplate"
-            :debug="debug"
-            :report="report"
-            :project-env-map="projectEnvMap"
-            @reportExport="handleExport"
-            @reportSave="handleSave"/>
+  <div>
+    <ms-container v-loading="loading || reportExportVisible">
+      <ms-main-container>
+        <el-card>
+          <section class="report-container" v-if="this.report.testId">
+            <!-- header -->
+            <ms-api-report-view-header
+              :show-cancel-button="showCancel"
+              :show-rerun-button="showRerunButton"
+              :is-plan="isPlan"
+              :is-template="isTemplate"
+              :debug="debug"
+              :report="report"
+              :project-env-map="projectEnvMap"
+              @reportExport="handleExport"
+              @reportSave="handleSave"/>
 
-          <!-- content -->
-          <main v-if="isNotRunning">
-            <!-- content header chart -->
-            <ms-metric-chart :content="content" :totalTime="totalTime" :report="report"/>
+            <!-- content -->
+            <main v-if="isNotRunning">
+              <!-- content header chart -->
+              <ms-metric-chart :content="content" :totalTime="totalTime" :report="report"/>
 
-            <el-tabs v-model="activeName" @tab-click="handleClick" style="min-width: 1500px">
-              <!-- all step-->
-              <el-tab-pane label="All" name="total">
-                <ms-scenario-results
-                  :treeData="fullTreeNodes"
-                  :console="content.console"
-                  :report="report"
-                  :is-share="isShare"
-                  :share-id="shareId"
-                  v-on:requestResult="requestResult"
-                  ref="resultsTree"/>
-              </el-tab-pane>
-              <!-- fail step -->
-              <el-tab-pane name="fail">
-                <template slot="label">
-                  Error
-                </template>
-                <ms-scenario-results
-                  v-on:requestResult="requestResult"
-                  :console="content.console"
-                  :report="report"
-                  :is-share="isShare"
-                  :share-id="shareId"
-                  :treeData="fullTreeNodes" ref="failsTree"
-                  :errorReport="content.error"/>
-              </el-tab-pane>
-              <!--error step -->
-              <el-tab-pane name="errorReport" v-if="content.errorCode > 0">
-                <template slot="label">
+              <el-tabs v-model="activeName" @tab-click="handleClick" style="min-width: 1200px">
+                <!-- all step-->
+                <el-tab-pane label="All" name="total">
+                  <ms-scenario-results
+                    :treeData="fullTreeNodes"
+                    :console="content.console"
+                    :report="report"
+                    :is-share="isShare"
+                    :share-id="shareId"
+                    v-on:requestResult="requestResult"
+                    ref="resultsTree"/>
+                </el-tab-pane>
+                <!-- fail step -->
+                <el-tab-pane name="fail">
+                  <template slot="label">
+                    Error
+                  </template>
+                  <ms-scenario-results
+                    v-on:requestResult="requestResult"
+                    :console="content.console"
+                    :report="report"
+                    :is-share="isShare"
+                    :share-id="shareId"
+                    :treeData="fullTreeNodes" ref="failsTree"
+                    :errorReport="content.error"/>
+                </el-tab-pane>
+                <!--error step -->
+                <el-tab-pane name="errorReport" v-if="content.errorCode > 0">
+                  <template slot="label">
                   <span class="fail" style="color: #F6972A">
                     FakeError
                   </span>
-                </template>
-                <ms-scenario-results
-                  v-on:requestResult="requestResult"
-                  :report="report"
-                  :is-share="isShare"
-                  :share-id="shareId"
-                  :console="content.console"
-                  :treeData="fullTreeNodes" ref="errorReportTree"/>
-              </el-tab-pane>
-              <!-- Not performed step -->
-              <el-tab-pane name="unExecute" v-if="content.unExecute > 0">
-                <template slot="label">
+                  </template>
+                  <ms-scenario-results
+                    v-on:requestResult="requestResult"
+                    :report="report"
+                    :is-share="isShare"
+                    :share-id="shareId"
+                    :console="content.console"
+                    :treeData="fullTreeNodes" ref="errorReportTree"/>
+                </el-tab-pane>
+                <!-- Not performed step -->
+                <el-tab-pane name="unExecute" v-if="content.unExecute > 0">
+                  <template slot="label">
                     <span class="fail"
                           style="color: #9C9B9A">
                       Pending
                      </span>
-                </template>
-                <ms-scenario-results
-                  v-on:requestResult="requestResult"
-                  :report="report"
-                  :is-share="isShare"
-                  :share-id="shareId"
-                  :console="content.console"
-                  :treeData="fullTreeNodes" ref="unExecuteTree"/>
-              </el-tab-pane>
-              <!-- console -->
-              <el-tab-pane name="console">
-                <template slot="label">
-                  <span class="console">Console</span>
-                </template>
-                <ms-code-edit
-                  :mode="'text'"
-                  :read-only="true"
-                  :data.sync="content.console"
-                  height="calc(100vh - 500px)"/>
-              </el-tab-pane>
-            </el-tabs>
+                  </template>
+                  <ms-scenario-results
+                    v-on:requestResult="requestResult"
+                    :report="report"
+                    :is-share="isShare"
+                    :share-id="shareId"
+                    :console="content.console"
+                    :treeData="fullTreeNodes" ref="unExecuteTree"/>
+                </el-tab-pane>
+                <!-- console -->
+                <el-tab-pane name="console">
+                  <template slot="label">
+                    <span class="console">Console</span>
+                  </template>
+                  <ms-code-edit
+                    :mode="'text'"
+                    :read-only="true"
+                    :data.sync="content.console"
+                    height="calc(100vh - 500px)"/>
+                </el-tab-pane>
+              </el-tabs>
+            </main>
+          </section>
+        </el-card>
+      </ms-main-container>
 
-            <!--export report-->
-            <ms-api-report-export
-              v-if="reportExportVisible"
-              id="apiTestReport"
-              :project-env-map="projectEnvMap"
-              :title="report.name"
-              :content="content"
-              :report="report"
-              :total-time="totalTime" class="ms-copy-bottom"/>
-          </main>
-        </section>
-      </el-card>
-    </ms-main-container>
-  </ms-container>
+    </ms-container>
+
+    <!--export report-->
+    <ms-api-report-export
+      v-if="reportExportVisible"
+      id="apiTestReport"
+      :project-env-map="projectEnvMap"
+      :title="report.name"
+      :content="content"
+      :report="report"
+      :total-time="totalTime" class="target-node-item"/>
+  </div>
 </template>
 
 <script>
@@ -756,7 +759,7 @@ export default {
 <style scoped>
 
 .report-container {
-  height: calc(100vh - 155px);
+  height: calc(100vh - 70px);
   min-height: 600px;
   overflow-y: auto;
 }
@@ -799,9 +802,7 @@ export default {
   min-width: 750px !important;
 }
 
-.ms-copy-bottom {
-  position: absolute;
-  bottom: 0;
-
+.target-node-item {
+  background: #FFFFFF;
 }
 </style>

api-test/frontend/src/business/automation/report/ApiReportExport.vue

@@ -3,79 +3,76 @@
                              :type="$t('report.api_test_report')">
     <ms-metric-chart :content="content" :is-export="true" :totalTime="totalTime" :report="report"/>
     <div class="scenario-result" v-for="(scenario, index) in content.scenarios" :key="index" :scenario="scenario">
-      <div>
-        <el-card>
-          <template v-slot:header>
-            {{ $t('api_report.scenario_name') }}：{{ scenario.name }}
-          </template>
-          <div class="ms-border clearfix" v-for="(request, index) in scenario.requestResults" :key="index"
-               :request="request">
-
-            <div class="request-top">
-              <div>
-                {{ getName(request.name) }}
-              </div>
-              <div class="url">
-                {{ request.url }}
-              </div>
+      <el-card>
+        <template v-slot:header>
+          {{ $t('api_report.scenario_name') }}：{{ scenario.name }}
+        </template>
+        <div class="ms-border clearfix" v-for="(request, index) in scenario.requestResults" :key="index"
+             :request="request">
+          <div class="request-top">
+            <div>
+              {{ getName(request.name) }}
             </div>
-            <el-divider/>
-            <div class="request-middle">
-              <api-report-request-header-item :title="$t('api_test.request.method')">
-                <span class="method"> {{ request.method }}</span>
-              </api-report-request-header-item>
-
-              <api-report-request-header-item :title="$t('api_report.response_time')">
-                {{ request.responseResult.responseTime }} ms
-              </api-report-request-header-item>
-
-              <api-report-request-header-item :title="$t('api_report.latency')">
-                {{ request.responseResult.latency }} ms
-              </api-report-request-header-item>
-
-              <api-report-request-header-item :title="$t('api_report.request_size')">
-                {{ request.requestSize }} bytes
-              </api-report-request-header-item>
-
-              <api-report-request-header-item :title="$t('api_report.response_size')">
-                {{ request.responseResult.responseSize }} bytes
-              </api-report-request-header-item>
-
-              <api-report-request-header-item :title="$t('api_report.error')">
-                {{ request.error }}
-              </api-report-request-header-item>
-
-              <api-report-request-header-item :title="$t('api_report.assertions')">
-                {{ request.passAssertions + " / " + request.totalAssertions }}
-              </api-report-request-header-item>
-
-              <api-report-request-header-item :title="$t('api_report.response_code')">
-                {{ request.responseResult.responseCode }}
-              </api-report-request-header-item>
-
-              <api-report-request-header-item :title="$t('api_report.result')">
-                <el-tag v-if="request.unexecute">{{
-                    $t('api_test.home_page.detail_card.unexecute')
-                  }}
-                </el-tag>
-                <el-tag v-else-if="!request.success && request.status && request.status==='PENDING'">{{
-                    $t('api_test.home_page.detail_card.unexecute')
-                  }}
-                </el-tag>
-                <el-tag v-else-if="request.errorCode" class="ms-test-error_code">
-                  {{ $t('error_report_library.option.name') }}
-                </el-tag>
-                <el-tag size="mini" type="success" v-else-if="request.success">
-                  {{ $t('api_report.success') }}
-                </el-tag>
-                <el-tag size="mini" type="danger" v-else>
-                  {{ $t('api_report.fail') }}
-                </el-tag>
-              </api-report-request-header-item>
+            <div class="url">
+              {{ request.url }}
             </div>
           </div>
-        </el-card>
-      </div>
+          <el-divider/>
+          <div class="request-middle">
+            <api-report-request-header-item :title="$t('api_test.request.method')">
+              <span class="method"> {{ request.method }}</span>
+            </api-report-request-header-item>
+
+            <api-report-request-header-item :title="$t('api_report.response_time')">
+              {{ request.responseResult.responseTime }} ms
+            </api-report-request-header-item>
+
+            <api-report-request-header-item :title="$t('api_report.latency')">
+              {{ request.responseResult.latency }} ms
+            </api-report-request-header-item>
+
+            <api-report-request-header-item :title="$t('api_report.request_size')">
+              {{ request.requestSize }} bytes
+            </api-report-request-header-item>
+
+            <api-report-request-header-item :title="$t('api_report.response_size')">
+              {{ request.responseResult.responseSize }} bytes
+            </api-report-request-header-item>
+
+            <api-report-request-header-item :title="$t('api_report.error')">
+              {{ request.error }}
+            </api-report-request-header-item>
+
+            <api-report-request-header-item :title="$t('api_report.assertions')">
+              {{ request.passAssertions + " / " + request.totalAssertions }}
+            </api-report-request-header-item>
+
+            <api-report-request-header-item :title="$t('api_report.response_code')">
+              {{ request.responseResult.responseCode }}
+            </api-report-request-header-item>
+
+            <api-report-request-header-item :title="$t('api_report.result')">
+              <el-tag v-if="request.unexecute">{{
+                  $t('api_test.home_page.detail_card.unexecute')
+                }}
+              </el-tag>
+              <el-tag v-else-if="!request.success && request.status && request.status==='PENDING'">{{
+                  $t('api_test.home_page.detail_card.unexecute')
+                }}
+              </el-tag>
+              <el-tag v-else-if="request.errorCode" class="ms-test-error_code">
+                {{ $t('error_report_library.option.name') }}
+              </el-tag>
+              <el-tag size="mini" type="success" v-else-if="request.success">
+                {{ $t('api_report.success') }}
+              </el-tag>
+              <el-tag size="mini" type="danger" v-else>
+                {{ $t('api_report.fail') }}
+              </el-tag>
+            </api-report-request-header-item>
+          </div>
+        </div>
+      </el-card>
     </div>
   </ms-report-export-template>
 </template>

api-test/frontend/src/business/automation/report/ApiReportViewHeader.vue

@@ -233,6 +233,6 @@ export default {
 }
 
 .report-header {
-  min-width: 1500px;
+  min-width: 1200px;
 }
 </style>

api-test/frontend/src/business/automation/report/components/MetricChart.vue

@@ -318,7 +318,7 @@ export default {
 <style scoped>
 .metric-container {
   padding: 5px 10px;
-  min-width: 1500px;
+  min-width: 1200px;
 }
 
 .metric-container #chart {

framework/sdk-parent/frontend/src/components/task/TaskCenter.vue

@@ -559,4 +559,10 @@ export default {
 .report-bottom {
   margin-top: 10px;
 }
+
+:deep(.report-container) {
+  height: calc(100vh - 155px) !important;
+  min-height: 600px;
+  overflow-y: auto;
+}
 </style>

framework/sdk-parent/frontend/src/utils/index.js

@@ -1,6 +1,5 @@
 import {COUNT_NUMBER, COUNT_NUMBER_SHALLOW, ORIGIN_COLOR, ORIGIN_COLOR_SHALLOW, PRIMARY_COLOR} from "./constants";
 import i18n from '../i18n'
-import {MessageBox} from "element-ui";
 import html2canvas from 'html2canvas';
 import JsPDF from 'jspdf';
 
@@ -343,8 +342,8 @@ export function getUrlParams(url) {
 
 
 /**
- * @param  ele          要生成 pdf 的DOM元素（容器）
- * @param  padfName     PDF文件生成后的文件名字
+ * @param  ele 要生成 pdf 的DOM元素（容器）
+ * @param  pdfName PDF文件生成后的文件名字
  * */
 export function downloadPDF(ele, pdfName) {
   let eleW = ele.offsetWidth;// 获得该容器的宽
@@ -393,6 +392,7 @@ export function downloadPDF(ele, pdfName) {
 
   html2canvas(ele, {
     dpi: 300,
+    backgroundColor: 'white',
     // allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
     useCORS: true  //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
   }).then((canvas) => {