refactor: 测试计划报告优化

frontend/src/business/components/track/plan/view/comonents/report/TemplateComponent/FailureResultAdvanceComponent.vue

@@ -1,12 +1,9 @@
 <template>
 
   <common-component :title="$t('test_track.plan_view.failure_case')">
-    <template>
+    <functional-failure-cases-list v-if="showFunctional" :functional-test-cases="failureTestCases.functionalTestCases"/>
-      <functional-failure-cases-list :functional-test-cases="failureTestCases.functionalTestCases"/>
+    <api-failure-cases-list v-if="showApi" :api-test-cases="failureTestCases.apiTestCases"/>
-      <api-failure-cases-list :api-test-cases="failureTestCases.apiTestCases"/>
+    <scenario-failure-cases-list v-if="showScenario" :scenario-test-cases="failureTestCases.scenarioTestCases"/>
-      <scenario-failure-cases-list :scenario-test-cases="failureTestCases.scenarioTestCases"/>
-    </template>
-
   </common-component>
 
 </template>
@@ -81,6 +78,17 @@
           }
         }
       },
+      computed: {
+        showFunctional() {
+          return this.failureTestCases.functionalTestCases.length > 0 || (this.failureTestCases.apiTestCases.length <= 0 && this.failureTestCases.scenarioTestCases.length <= 0);
+        },
+        showApi() {
+          return this.failureTestCases.apiTestCases.length > 0;
+        },
+        showScenario() {
+          return this.failureTestCases.scenarioTestCases.length > 0;
+        }
+      },
       methods: {
         goFailureTestCase(row) {
           hub.$emit("openFailureTestCase", row);
@@ -98,7 +106,7 @@
   }
 
   .failure-cases-list {
-    margin-bottom: 30px;
+    margin-bottom: 40px;
   }
 
 </style>

frontend/src/business/components/track/plan/view/comonents/report/TemplateComponent/TestResultAdvanceChartComponent.vue

@@ -2,25 +2,25 @@
 
   <common-component :title="$t('test_track.plan_view.result_statistics')">
 
-    <template>
+    <div :class="{'show-one': isShowOne}">
 
-      <div class="char-item">
+      <div class="char-item" v-if="showFunctional">
         <ms-pie-chart v-if="isShow" :text="'功能测试用例'"
                       :name="$t('test_track.plan_view.test_result')" :data="functionalCharData"/>
       </div>
 
-      <div class="char-item">
+      <div class="char-item" v-if="showApi">
         <ms-pie-chart v-if="isShow" :text="'接口测试用例'"
                       :name="$t('test_track.plan_view.test_result')" :data="apiCharData"/>
       </div>
 
-      <div class="char-item">
+      <div class="char-item"  v-if="showScenario">
         <ms-pie-chart v-if="isShow" :text="'场景测试用例'"
                       :name="$t('test_track.plan_view.test_result')" :data="scenarioCharData"/>
       </div>
 
 
-    </template>
+    </div>
 
   </common-component>
 
@@ -76,6 +76,30 @@
           }
         }
       },
+     computed: {
+       showFunctional() {
+         return this.executeResult.functionalResult.length > 0 || (this.executeResult.apiResult.length <= 0 && this.executeResult.scenarioResult.length <= 0);
+       },
+       showApi() {
+         return this.executeResult.apiResult.length > 0;
+       },
+       showScenario() {
+         return this.executeResult.scenarioResult.length > 0;
+       },
+       isShowOne() {
+         let count = 0;
+         if (this.showFunctional) {
+           count++;
+         }
+         if (this.showApi) {
+           count++;
+         }
+         if (this.showScenario) {
+           count++;
+         }
+         return count === 1;
+       }
+     },
       watch: {
         executeResult() {
           this.getCharData();
@@ -141,4 +165,8 @@
     display: inline-block;
   }
 
+  .show-one .char-item {
+    display: block;
+  }
+
 </style>

frontend/src/business/components/track/plan/view/comonents/report/statistics/TestCaseStatisticsReportView.vue

@@ -1,17 +1,16 @@
 <template>
-  <div>
+  <div v-loading="result.loading">
-
     <el-row type="flex" class="head-bar">
       <el-col :span="12">
       </el-col>
 
-          <el-col v-if="!reportId" :span="12" class="head-right">
+      <el-col v-if="!reportId" :span="11" class="head-right">
         <el-button :disabled="!isTestManagerOrTestUser" plain size="mini" @click="openTemplateReport">
           {{$t('test_track.plan_view.create_report')}}
         </el-button>
       </el-col>
 
-          <el-col v-else :span="12" class="head-right">
+      <el-col v-else :span="11" class="head-right">
         <el-button :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleSave">
           {{$t('commons.save')}}
         </el-button>
@@ -227,12 +226,13 @@
   }
 
   .head-bar {
-    background: white;
+    /*background: white;*/
-    height: 45px;
+    /*height: 45px;*/
-    line-height: 45px;
+    /*line-height: 45px;*/
-    padding: 0 10px;
+    /*padding-left: 10px;*/
-    border: 1px solid #EBEEF5;
+    /*padding: 0 10px;*/
-    box-shadow: 0 0 2px 0 rgba(31, 31, 31, 0.15), 0 1px 2px 0 rgba(31, 31, 31, 0.15);
+    /*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);*/
   }
 
   .container {
@@ -247,6 +247,19 @@
 
   .head-right {
     text-align: right;
+
   }
 
+  .head-bar .el-button {
+    margin-bottom: 10px;
+    width: 80px;
+  }
+
+  .head-bar {
+    position: fixed;
+    right: 10px;
+    padding: 20px;
+  }
+
+
 </style>