refactor: 测试计划报告图表样式

frontend/src/business/components/common/components/MsDoughnutPieChart.vue

@@ -33,7 +33,7 @@ export default {
             name: this.name,
             type: 'pie',
             left: -150,
-            radius: ['40%', '60%'],
+            radius: ['40%', '50%'],
             avoidLabelOverlap: false,
             label: {
               // padding: [10, 10, 20, 10],

frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanReportNavigationBar.vue

@@ -68,7 +68,9 @@ export default {
   top: 40%;
   line-height: 30px;
   border-radius: 0 15px 15px 0;
-  background-color: #acb7c1;
+  /*background-color: #acb7c1;*/
+  background-color: #783887;
+  color: white;
   display: inline-block;
   position: absolute;
   cursor: pointer;

frontend/src/business/components/track/plan/view/comonents/report/detail/component/ApiResult.vue

@@ -5,7 +5,8 @@
         <ms-doughnut-pie-chart :name="$t('单接口用例')" :data="caseCharData" ref="functionChar"/>
       </el-col>
       <el-col :span="12">
-        <api-scenario-char-result :data="scenarioCharData"/>
+        <api-scenario-char-result :name="'场景用例数'" :data="scenarioCharData"/>
+        <api-scenario-char-result style="margin-top: -50px;" :name="'步骤用例数'" :data="stepCharData"/>
       </el-col>
     </el-row>
   </div>
@@ -25,12 +26,16 @@ export default {
       caseDataMap: new Map([
         ["success", {name: this.$t('test_track.plan_view.pass'), itemStyle: {color: '#67C23A'}}],
         ["Success", {name: this.$t('test_track.plan_view.pass'), itemStyle: {color: '#67C23A'}}],
+        ["Pass", {name: this.$t('test_track.plan_view.pass'), itemStyle: {color: '#67C23A'}}],
         ["error", {name: this.$t('test_track.plan_view.failure'), itemStyle: {color: '#F56C6C'}}],
         ["Fail", {name: this.$t('test_track.plan_view.failure'), itemStyle: {color: '#F56C6C'}}],
+        ["Failure", {name: this.$t('test_track.plan_view.failure'), itemStyle: {color: '#F56C6C'}}],
         ["Prepare", {name: this.$t('api_test.home_page.detail_card.unexecute'), itemStyle: {color: '#909399'}}],
+        ["Underway", {name: this.$t('api_test.home_page.detail_card.unexecute'), itemStyle: {color: '#909399'}}],
       ]),
       caseCharData: [],
       scenarioCharData: [],
+      stepCharData: [],
       isShow: true
     }
   },
@@ -66,32 +71,20 @@ export default {
       let apiScenarioData = [];
       this.apiResult.apiScenarioData.forEach(item => {
         let data = this.getDataByStatus(item.status);
-        data.data = [item.count];
+        data.value = item.count;
-        for (let i = 0; i < this.apiResult.apiScenarioStepData.length; i++) {
-          let stepItem = this.apiResult.apiScenarioStepData[i];
-          if (item.status) {
-            if (item.status === 'Fail' && stepItem.status === 'Failure') {
-              data.data.push(stepItem.count);
-              break;
-            }
-            if (item.status === 'Success' && stepItem.status === 'Pass') {
-              data.data.push(stepItem.count);
-              break;
-            }
-            if (item.status === 'Prepare' && stepItem.status === 'Underway') {
-              data.data.push(stepItem.count);
-              break;
-            }
-          } else {
-            if (stepItem.status === 'Underway') {
-              data.data.push(stepItem.count);
-              break;
-            }
-          }
-        }
         apiScenarioData.push(data);
       });
+
+      let stepCharData = [];
+      for (let i = 0; i < this.apiResult.apiScenarioStepData.length; i++) {
+        let stepItem = this.apiResult.apiScenarioStepData[i];
+        let data = this.getDataByStatus(stepItem.status);
+        data.value = stepItem.count;
+        stepCharData.push(data);
+      }
+
       this.scenarioCharData = apiScenarioData;
+      this.stepCharData = stepCharData;
     },
     getDataByStatus(status) {
       let tmp = this.caseDataMap.get(status);

frontend/src/business/components/track/plan/view/comonents/report/detail/component/ApiScenarioCharResult.vue

@@ -1,5 +1,5 @@
 <template>
-  <ms-chart v-if="visible" :options="options"/>
+  <ms-chart style="height: 250px" v-if="visible" :options="options"/>
 </template>
 
 <script>
@@ -26,24 +26,16 @@ export default {
         },
         legend: {
           data: [],
-          // orient: 'vertical',
-          // right: 0,
-          // bottom: '40%',
         },
         grid: {
           left: 100
         },
         xAxis: {
-          // type: 'value',
+          type: 'value',
-          // // name: 'Days',
-          // axisLabel: {
-          //     formatter: '{value}'
-          // }
         },
         yAxis: {
           type: 'category',
-          inverse: true,
+          data: [],
-          data: ['场景用例数',  '步骤用例数'],
           axisLabel: {
             formatter: function (value) {
             },
@@ -64,30 +56,12 @@ export default {
         },
         series: [
           {
-            name: '未执行',
+            data: [],
             type: 'bar',
-            data: [165, 170],
+            barWidth: 20,
-            label: seriesLabel,
+            label: {
-            itemStyle: {
+              show: true,
-              color: '#909399'
+              formatter: {}
-            }
-          },
-          {
-            name: '成功',
-            type: 'bar',
-            label: seriesLabel,
-            data: [150, 105],
-            itemStyle: {
-              color: '#F56C6C'
-            }
-          },
-          {
-            name: '失败',
-            type: 'bar',
-            label: seriesLabel,
-            data: [220, 82],
-            itemStyle: {
-              color: '#67C23A'
             }
           }
         ]
@@ -123,45 +97,26 @@ export default {
       });
     },
     setFormatterFunc() {
-      let data = this.data;
+
-      let caseCount = 0;
+      let dataCount = 0;
-      let stepCount = 0;
       this.data.forEach(item => {
-        caseCount += item.data[0];
+        dataCount += item.value;
-        if (item.data[1]) {
-          stepCount += item.data[1];
-        }
       });
 
-      let formatterFuc = function (value) {
+      let formatterFuc = function (item) {
-        let total = 0;
+        return item.data.value + '/' + ((item.data.value / dataCount) * 100).toFixed(0) + '%';
-        if (value.dataIndex == 0) {
-          total = caseCount;
-        } else {
-          total = stepCount;
-        }
-        return value.data + '/' + ((value.data / total) * 100).toFixed(0) + '%';
       };
 
-      this.data.forEach(item => {
+      this.options.series[0].data = this.data;
-        item.type = 'bar';
+      this.options.series[0].label.formatter = formatterFuc;
-        item.label = {
-          show: true,
-          formatter: formatterFuc
-        };
-      });
-
-      this.options.series = data;
 
+      let name = this.name;
       this.options.yAxis.axisLabel.formatter =  function (value) {
-        if (value === '场景用例数') {
+          return '{name|' + name + '}\n' + '{count| ' + dataCount + '}';
-          return '{name|场景用例数}\n' + '{count| ' + caseCount + '}';
-        } else {
-          return '{name|步骤用例数}\n' + '{count|' + stepCount + '}';
-        }
       };
 
-      this.options.legend.data = data.map(i => i.name);
+      this.options.legend.data = this.data.map(i => i.name);
+      this.options.yAxis.data = this.data.map(i => i.name);
     },
   }
 }