测试计划概览前端及后端代码完善

test-ui/package.json

@@ -46,6 +46,7 @@
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
     "json-editor-vue": "^0.17.3",
+    "moment": "^2.30.1",
     "nprogress": "0.2.0",
     "quill": "2.0.2",
     "screenfull": "5.0.2",

test-ui/src/api/test/testPlan.js

@@ -8,7 +8,9 @@ const api = {
   testPlanDetail: 'test/testPlan/planDetail',
   testPlanProjectList: '/test/testPlanProject/list',
   addTestReport:  'test/testReport/addTestReport',
-  getTestReportList: 'test/testReport/reportList'
+  getTestReportList: 'test/testReport/reportList',
+  getPlanOverview:'test/testPlan/planOverview',
+  getPlanCaseTrendData: 'test/testPlan/planCaseTrendData',
 }
 
 export function getTestPlanList(data) {
@@ -74,3 +76,19 @@ export function getTestReportList(data) {
     params: data
   })
 }
+
+export function getPlanOverview(id) {
+  return request({
+    url: api.getPlanOverview,
+    method: 'post',
+    data: {id}
+  })
+}
+
+export function getPlanCaseTrendData(id) {
+  return request({
+    url: api.getPlanCaseTrendData,
+    method: 'post',
+    data: {id}
+  })
+}

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

@@ -375,6 +375,9 @@ export default {
         {id: row.id,
           name: row.name,
           testStatus: row.status,
+          startPlanTime: row.startPlanTime,
+          endPlanTime: row.endPlanTime,
+          manager: row.manager,
         });
     },
     handleTabClick(tab) {

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

@@ -30,7 +30,7 @@
     </el-row>
 
     <!-- 测试计划界面 -->
-    <probably-view :planId="planId" v-show="activeIndex === '1'"></probably-view>
+    <probably-view :overViewData="overViewData" :planId="planId" v-show="activeIndex === '1'"></probably-view>
     <case-execute :planId="planId" :name="testTitle" v-show="activeIndex === '2'"></case-execute>
     <case-report :planId="planId" v-show="activeIndex === '3'"></case-report>
     <test-defects :planId="planId" :name="testTitle" v-show="activeIndex === '4'"></test-defects>
@@ -66,6 +66,7 @@ export default {
         '3': '已终止'
       },
       planId: '',
+      overViewData: {},
       testStatus: '',
       testTitle: '',
       activeTab: 'overview',// 默认选中的标签页
@@ -114,6 +115,11 @@ export default {
     this.planId = this.$route.query.id;
     this.testTitle = this.$route.query.name
     this.testStatus = this.$route.query.testStatus
+    this.overViewData = {
+      startTime: this.$route.query.startPlanTime,
+      endTime: this.$route.query.endPlanTime,
+      manager: this.$route.query.manager
+    }
   }
 };
 </script>

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

@@ -17,14 +17,13 @@
             </el-row>
             <el-row :gutter="10">
               <el-col :span="5">
-                <!--                <span>起止时间：{{ startToEndTime }}</span>-->
-                <span>起止时间：2020-04-01 ~ 2020-04-30</span>
+                <span>起止时间：{{ overViewData.startTime }} ~ {{ overViewData.endTime }}</span>
               </el-col>
               <el-col :span="7">
-                <span>当前测试计划已经开始 3 天,距离截止时间还有 52 天</span>
+                <span>当前测试计划已经开始 {{ daysElapsed }} 天,距离截止时间还有 {{ daysRemaining }} 天</span>
               </el-col>
               <el-col :span="5">
-                <span>负责人：{{  }}</span>
+                <span>负责人：{{ overViewData.manager }}</span>
               </el-col>
             </el-row>
           </div>
@@ -34,10 +33,10 @@
                 <div class="progress-content">
                   <div id="executionProgressChart" style="width: 70%; height: 200px;"></div>
                   <div class="progress-text">
-                    <p style="font-size: 40px;margin: auto">100%</p>
+                    <p style="font-size: 40px;margin: auto">{{ executionProgress || 0 }}%</p>
                     <p>执行进度</p>
-                    <p>用例总数 1</p>
-                    <p><span style="color: #409EFF">●</span> 已执行用例 1</p>
+                    <p>用例总数 {{ viewData.caseCount }}</p>
+                    <p><span style="color: #6e92ef">●</span> 已执行用例 {{ viewData.executedCaseCount }}</p>
                   </div>
                 </div>
               </el-card>
@@ -47,13 +46,13 @@
                 <div class="progress-content">
                   <el-row :gutter="10">
                     <el-col class="rate-content" :span="12">
-                      <p>100%</p>
-                      <el-progress :percentage="100" status="success"></el-progress>
+                      <p>{{ executionPassRate || 0 }}%</p>
+                      <el-progress :percentage="(viewData.passedCaseCount / viewData.executedCaseCount).toFixed(2) * 100 || 0" status="success"></el-progress>
                       <p>执行用例通过率</p>
                     </el-col>
                     <el-col class="rate-content" :span="12">
-                      <p>100%</p>
-                      <el-progress :percentage="100" status="success"></el-progress>
+                      <p>{{ overallPassRate || 0 }}%</p>
+                      <el-progress :percentage="(viewData.passedCaseCount / viewData.caseCount).toFixed(2) * 100 || 0" status="success"></el-progress>
                       <p>总体用例通过率</p>
                     </el-col>
                   </el-row>
@@ -64,14 +63,14 @@
               <el-card shadow="hover">
                 <div class="progress-content">
                   <div class="defect-content">
-                    <p>0</p>
+                    <p>{{ viewData.defectCount }}</p>
                     <p>缺陷数</p>
                     <el-row>
-                      <el-col :span="4">0</el-col>
-                      <el-col :span="4">0</el-col>
-                      <el-col :span="4">0</el-col>
-                      <el-col :span="4">0</el-col>
-                      <el-col :span="4">0</el-col>
+                      <el-col :span="4">{{ viewData.unconfirmedDefectCount }}</el-col>
+                      <el-col :span="4">{{ viewData.fixingDefectCount }}</el-col>
+                      <el-col :span="4">{{ viewData.unverifiedDefectCount }}</el-col>
+                      <el-col :span="4">{{ viewData.invalidDefectCount }}</el-col>
+                      <el-col :span="4">{{ viewData.suspendedDefectCount }}</el-col>
                     </el-row>
                     <el-row>
                       <el-col :span="4">待确认</el-col>
@@ -98,13 +97,13 @@
           </div>
           <el-card shadow="hover">
             <div class="distribution-content">
-              <el-progress type="circle" :percentage="100" color="#67C23A"></el-progress>
+              <div id="distributionChart" style="width: 70%; height: 200px;"></div>
               <div class="distribution-text">
-                <p><span style="background-color: #67C23A; display: inline-block; width: 10px; height: 10px;"></span> 通过 1</p>
-                <p><span style="background-color: #F56C6C; display: inline-block; width: 10px; height: 10px;"></span> 失败 0</p>
-                <p><span style="background-color: #E6A23C; display: inline-block; width: 10px; height: 10px;"></span> 阻塞 0</p>
-                <p><span style="background-color: #F56C6C; display: inline-block; width: 10px; height: 10px;"></span> 跳过 0</p>
-                <p><span style="background-color: #909399; display: inline-block; width: 10px; height: 10px;"></span> 未执行 0</p>
+                <p><span style="background-color: #9cdab9; display: inline-block; width: 10px; height: 10px;"></span> 通过 {{ viewData.passedCaseCount }}</p>
+                <p><span style="background-color: #d4836a; display: inline-block; width: 10px; height: 10px;"></span> 失败 {{ viewData.failedCaseCount }}</p>
+                <p><span style="background-color: #e9c456; display: inline-block; width: 10px; height: 10px;"></span> 阻塞 {{ viewData.blockedCaseCount }}</p>
+                <p><span style="background-color: #79849e; display: inline-block; width: 10px; height: 10px;"></span> 跳过 {{ viewData.skippedCaseCount }}</p>
+                <p><span style="background-color: #cdcdcd; display: inline-block; width: 10px; height: 10px;"></span> 未执行 {{ viewData.notExecutedCaseCount }}</p>
               </div>
             </div>
           </el-card>
@@ -117,12 +116,34 @@
           </div>
           <el-card shadow="hover">
             <div class="distribution-text" style="height: 200px">
-              <line-chart :data="trendData" :chart-data="trendData"></line-chart>
+              <div id="caseTrendChart" style="width: 100%; height: 200px;"></div>
             </div>
           </el-card>
         </el-card>
       </el-col>
     </el-row>
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>缺陷等级分布</span>
+          </div>
+          <el-card shadow="hover">
+            <div id="defectLevelChart" style="width: 100%; height: 200px;"></div>
+          </el-card>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>缺陷类型分布</span>
+          </div>
+          <el-card shadow="hover">
+            <div id="defectTypeChart" style="width: 100%; height: 200px;"></div>
+          </el-card>
+        </el-card>
+      </el-col>
+    </el-row>
     <el-card class="box-card">
       <div>
         关联需求信息
@@ -160,25 +181,29 @@
 </template>
 
 <script>
-import LineChart from '@/views/dashboard/LineChart';
 import * as echarts from 'echarts';
-import {getTestPlanProjectList} from "@/api/test/testPlan";
+import moment from 'moment';
+import {getPlanCaseTrendData, getPlanOverview, getTestPlanProjectList} from "@/api/test/testPlan";
 
 export default {
   name: 'probablyView',
-  components: {
-    LineChart,
-  },
   props: {
     planId: {
       type: String,
       default: '',
     },
+    overViewData:  {
+      type: Object,
+      default: () => {
+        return {
+          startTime: '',
+          endTime: '',
+          manager: '',
+        }
+      }
+    },
   },
   dicts: ['priority_level', 'project_source', 'project_type', 'status'],
-  mounted() {
-    this.initExecutionProgressChart();
-  },
   data() {
     return {
       priorityColor: {
@@ -192,42 +217,84 @@ export default {
       list: [],
       loading: false,
       myChart: null,
-      startToEndTime: '',
+      distributionChart: null,
+      lineChart: null,
+      viewData: [],
+      caseTrendData: [],
+      // 执行进度
+      executionProgress: 0,
+      // 执行用例通过率
+      executionPassRate: 0,
+      // 总体用例通过率
+      overallPassRate: 0,
       defectSlider: 0,
       queryParams: {
         planId: '',
         pageNum: 1,
         pageSize: 10,
       },
-      trendData: {
-        labels: ['2025-04-01', '2025-04-02', '2025-04-03'],
-        datasets: [
-          {
-            label: '通过',
-            backgroundColor: '#67C23A',
-            data: [0, 0.5, 1],
-          },
-          {
-            label: '失败',
-            backgroundColor: '#F56C6C',
-            data: [0, 0, 0],
-          },
-          {
-            label: '跳过',
-            backgroundColor: '#E6A23C',
-            data: [0, 0, 0],
-          },
-          {
-            label: '阻塞',
-            backgroundColor: '#909399',
-            data: [0, 0, 0],
-          },
-        ],
-      },
     };
   },
+  mounted() {
+    // 饼图1
+    const chartDom = document.getElementById('executionProgressChart');
+    this.myChart = echarts.init(chartDom);
+    const Observer = new ResizeObserver(() =>{
+      this.myChart.resize();
+    })
+    Observer.observe(chartDom);
+
+    // 饼图2
+    const chartDom2 = document.getElementById('distributionChart');
+    this.distributionChart = echarts.init(chartDom2);
+    const Observer2 = new ResizeObserver(() =>{
+      this.distributionChart.resize();
+    })
+    Observer2.observe(chartDom2);
+
+    // 折线趋势图
+    const lineChartDom = document.getElementById('caseTrendChart');
+    this.lineChart = echarts.init(lineChartDom);
+    const Observer3 = new ResizeObserver(() =>{
+      this.lineChart.resize();
+    })
+    Observer3.observe(lineChartDom);
+
+    // 柱状图1
+    const barChartDom = document.getElementById('defectLevelChart');
+    this.barChart = echarts.init(barChartDom);
+    const Observer4 = new ResizeObserver(() =>{
+      this.barChart.resize();
+    })
+    Observer4.observe(barChartDom);
+
+    // 柱状图2
+    const barChartDom2 = document.getElementById('defectTypeChart');
+    this.barChart2 = echarts.init(barChartDom2);
+    const Observer5 = new ResizeObserver(() =>{
+      this.barChart2.resize();
+    })
+    Observer5.observe(barChartDom2);
+  },
   created() {
     this.getList();
+    this.getInfoList();
+    this.getTrendData();
+  },
+  computed: {
+    daysElapsed() {
+      if (!this.overViewData.startTime) return 0;
+      const start = moment(this.overViewData.startTime);
+      const now = moment();
+      return now.diff(start, 'days');
+    },
+    daysRemaining() {
+      if (!this.overViewData.endTime) return 0;
+      const end = moment(this.overViewData.endTime);
+      const now = moment();
+      const diffDays = end.diff(now, 'days');
+      return diffDays > 0 ? diffDays : 0; // 确保不显示负数
+    },
   },
   methods: {
     getList() {
@@ -239,11 +306,37 @@ export default {
         this.loading = false;
       })
     },
+
+    getInfoList() {
+      getPlanOverview(this.queryParams.planId).then(response => {
+        this.viewData = response;
+        this.executionProgress = (this.viewData.executedCaseCount / this.viewData.caseCount).toFixed(2) * 100 || 0;
+        if (this.viewData.executedCaseCount === 0) {
+          this.executionPassRate = 0;
+        } else {
+          this.executionPassRate = ((this.viewData.passedCaseCount / this.viewData.executedCaseCount).toFixed(2) * 100).toFixed(2) || 0 ;
+        }
+        if  (this.viewData.caseCount === 0) {
+          this.overallPassRate = 0;
+        } else {
+          this.overallPassRate = ((this.viewData.passedCaseCount / this.viewData.caseCount).toFixed(2) * 100).toFixed(2) || 0;
+        }
+        this.initExecutionProgressChart();
+        this.initDistributionChart();
+        this.initCaseTrendChart();
+        this.initDefectLevelChart();
+        this.initDefectTypeChart();
+      })
+    },
+
+    getTrendData(){
+      getPlanCaseTrendData(this.queryParams.planId).then(response => {
+        this.caseTrendData = response;
+        this.initCaseTrendChart();
+      })
+    },
     // 初始化执行进度饼图
     initExecutionProgressChart() {
-      const chartDom = document.getElementById('executionProgressChart');
-      const myChart = echarts.init(chartDom);
-
       const option = {
         tooltip: {
           trigger: 'item'
@@ -254,36 +347,230 @@ export default {
         },
         series: [
           {
-            name: 'Access From',
+            name: '执行进度',
             type: 'pie',
             radius: ['40%', '70%'],
             avoidLabelOverlap: false,
             label: {
-              show: false,
-              position: 'center'
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: 40,
-                fontWeight: 'bold'
-              }
-            },
-            labelLine: {
-              show: false
+              formatter: '{b}: {c}%',
+              position: 'inside'
             },
             data: [
-              {value: 1},
+              { value: this.executionProgress, name: '执行进度' , itemStyle: { color: '#6e92ef'}},
+              { value: 100 - this.executionProgress, name: '剩余进度' ,  itemStyle: { color: '#f5f5f5'}}
             ]
           }
         ]
       };
 
-      myChart.setOption(option);
-      // 监听窗口大小变化，自动调整图表大小
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
+     option && this.myChart.setOption(option);
+    },
+
+    // 初始化执行分布饼图
+    initDistributionChart() {
+      const option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            name: '用例状态',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: this.viewData.passedCaseCount, itemStyle: { color: '#9cdab9' } },
+              { value: this.viewData.failedCaseCount, itemStyle: { color: '#d4836a' } },
+              { value: this.viewData.blockedCaseCount, itemStyle: { color: '#e9c456' } },
+              { value: this.viewData.skippedCaseCount, itemStyle: { color: '#79849e' } },
+              { value: this.viewData.notExecutedCaseCount, itemStyle: { color: '#cdcdcd' } }
+            ]
+          }
+        ]
+      };
+
+      option && this.distributionChart.setOption(option);
+    },
+
+    // 初始化折线图
+    initCaseTrendChart() {
+      const dates = this.caseTrendData.map(item => item.caseTrendDates);
+
+      const passedData = this.caseTrendData.map(item => item.passed);
+      const failedData = this.caseTrendData.map(item => item.failed);
+      const blockedData = this.caseTrendData.map(item => item.blocked);
+      const skippedData = this.caseTrendData.map(item => item.skipped);
+      const notExecutedData = this.caseTrendData.map(item => item.notExecuted);
+
+      const option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['阻塞', '通过', '跳过', '失败', '未执行'],
+          left: 'left'
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: dates
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: '阻塞',
+            type: 'line',
+            data: blockedData
+          },
+          {
+            name: '通过',
+            type: 'line',
+            data: passedData
+          },
+          {
+            name: '跳过',
+            type: 'line',
+            data: skippedData
+          },
+          {
+            name: '失败',
+            type: 'line',
+            data: failedData
+          },
+          {
+            name: '未执行',
+            type: 'line',
+            data: notExecutedData
+          }
+        ]
+      };
+
+      option && this.lineChart.setOption(option);
+    },
+
+    // 初始化柱状图
+    initDefectLevelChart() {
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        legend: {
+          data: ['缺陷数']
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['致命', '严重', '一般', '轻微', '无效'],
+            axisTick: {
+              alignWithLabel: true
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: '缺陷数',
+            type: 'bar',
+            barWidth: '30%',
+            itemStyle: {
+              color: '#D68972FF' // 更改柱状图颜色为橙色
+            },
+            data: [
+              this.viewData.fatalLevelDefectCount,
+              this.viewData.seriousLevelDefectCount,
+              this.viewData.normalLevelDefectCount,
+              this.viewData.minorLevelDefectCount,
+              this.viewData.invalidLevelDefectCount
+            ] // 更新数据以匹配图片
+          }
+        ]
+      };
+
+      option && this.barChart.setOption(option);
+    },
+
+    // 初始化柱状图
+    initDefectTypeChart() {
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        legend: {
+          data: ['缺陷数']
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['功能逻辑', 'UI交互', '性能问题', '兼容性问题', '配置错误','安全问题', '安装部署' ,'其他'],
+            axisTick: {
+              alignWithLabel: true
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: '缺陷数',
+            type: 'bar',
+            barWidth: '30%',
+            itemStyle: {
+              color: '#D68972FF' // 更改柱状图颜色为橙色
+            },
+            data: [this.viewData.logicDefectCount,
+              this.viewData.uiDefectCount,
+              this.viewData.performanceDefectCount,
+              this.viewData.compatibilityDefectCount,
+              this.viewData.configurationDefectCount,
+              this.viewData.securityDefectCount,
+              this.viewData.installationDefectCount,
+              this.viewData.otherDefectCount
+            ] // 更新数据以匹配图片
+          }
+        ]
+      };
+
+      option && this.barChart2.setOption(option);
     },
   },
 };