fix:测试计划新建报告及报告详情显示

test-ui/src/views/test/testplan/caseReport/caseReport.vue

@@ -111,6 +111,7 @@ export default {
           name: row.name,
           type: row.result,
           planId: row.planId,
+          report: row.report
         }
       )
     },

test-ui/src/views/test/testplan/caseReport/platformReport.vue

@@ -31,12 +31,14 @@
 
         <div class="report-overview">
           <div class="overview-item">
-            <div class="value">1</div>
+            <div class="value">{{ reportData.caseNum }}</div>
             <span class="label">执行用例数</span>
           </div>
           <div class="overview-item">
-            <span class="value">100%</span>
-            <div class="progress-bar"></div>
+            <span class="value">{{ passRate }}%</span>
+            <div class="progress-bar-container">
+              <div class="progress-bar" :style="{ width: passRate + '%' }"></div>
+            </div>
             <div class="label">用例通过率</div>
           </div>
           <div class="overview-item">
@@ -85,6 +87,7 @@ export default {
     return {
       reportType: '',
       reportTitle: '',
+      reportData: {},
       selectedResult: '', // 选择的测试结果
       resultOptions: [ // 测试结果选项
         { value: 'all', label: '全部' },
@@ -106,7 +109,7 @@ export default {
       // 用例类型分布数据
       caseTypeDistributionData: {
         series: [
-          { value: 1, name: '接口用例' ,itemStyle: {color: '#6fcdac'} }
+          { value: 0, name: '接口用例' ,itemStyle: {color: '#6fcdac'} }
         ]
       }
     };
@@ -114,6 +117,14 @@ export default {
   created() {
     this.reportTitle = this.$route.query.name;
     this.reportType = this.$route.query.type;
+    this.reportData = JSON.parse(this.$route.query.report);
+
+    // 更新饼图数据
+    this.resultDistributionData.series[0].value = this.reportData.passNum || 0;
+    this.resultDistributionData.series[1].value = this.reportData.caseNum - this.reportData.passNum || 0;
+
+    // 更新接口用例饼图数据
+    this.caseTypeDistributionData.series[0].value = this.reportData.caseNum || 0;
   },
   watch: {
     'dict.type.test_type': {
@@ -127,11 +138,29 @@ export default {
     }
   },
   computed: {
-
+    passRate() {
+      if (this.reportData.caseNum === 0) return 0;
+      return (this.reportData.passNum / this.reportData.caseNum) * 100;
+    }
   },
   mounted() {
     this.initResultDistributionChart();
     this.initCaseTypeDistributionChart();
+
+
+    // 强制重绘图表以应用最新数据
+    this.$nextTick(() => {
+      const chartDom = document.getElementById('result-distribution-chart');
+      if (chartDom) {
+        const myChart = echarts.getInstanceByDom(chartDom);
+        myChart.setOption({
+          series: [{
+            type: 'pie',
+            data: this.resultDistributionData.series
+          }]
+        }, true); // true 表示合并选项
+      }
+    });
   },
   methods: {
     initResultDistributionChart() {
@@ -268,13 +297,29 @@ export default {
         font-size: 14px;
       }
 
-      .progress-bar {
+      .progress-bar-container {
         width: 100px;
         height: 10px;
-        background-color: white;
+        background-color: #e0e0e0; /* 背景颜色表示未完成部分 */
+        border-radius: 5px;
+        overflow: hidden;
         margin-top: 10px;
+      }
+
+
+      .progress-bar {
+        height: 100%;
+        background-color: white; /* 进度条颜色 */
         border-radius: 5px;
       }
+
+      //.progress-bar {
+      //  width: 100px;
+      //  height: 10px;
+      //  background-color: white;
+      //  margin-top: 10px;
+      //  border-radius: 5px;
+      //}
     }
   }
 }