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

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

@@ -1,7 +1,8 @@
 <template>
+  <div>
     <ms-container v-loading="loading || reportExportVisible">
-    <ms-main-container class="api-report-content">
-      <el-card class="report-body">
+      <ms-main-container>
+        <el-card>
           <section class="report-container" v-if="this.report.testId">
             <!-- header -->
             <ms-api-report-view-header
@@ -20,7 +21,7 @@
               <!-- content header chart -->
               <ms-metric-chart :content="content" :totalTime="totalTime" :report="report"/>
 
-            <el-tabs v-model="activeName" @tab-click="handleClick" style="min-width: 1500px">
+              <el-tabs v-model="activeName" @tab-click="handleClick" style="min-width: 1200px">
                 <!-- all step-->
                 <el-tab-pane label="All" name="total">
                   <ms-scenario-results
@@ -89,6 +90,12 @@
                     height="calc(100vh - 500px)"/>
                 </el-tab-pane>
               </el-tabs>
+            </main>
+          </section>
+        </el-card>
+      </ms-main-container>
+
+    </ms-container>
 
     <!--export report-->
     <ms-api-report-export
@@ -98,12 +105,8 @@
       :title="report.name"
       :content="content"
       :report="report"
-              :total-time="totalTime" class="ms-copy-bottom"/>
-          </main>
-        </section>
-      </el-card>
-    </ms-main-container>
-  </ms-container>
+      :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,14 +3,12 @@
                              :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) }}
@@ -76,7 +74,6 @@
         </div>
       </el-card>
     </div>
-    </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';
 
@@ -344,7 +343,7 @@ export function getUrlParams(url) {
 
 /**
  * @param  ele 要生成 pdf 的DOM元素（容器）
- * @param  padfName     PDF文件生成后的文件名字
+ * @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) => {