测试计划关联用例

测试报告界面

test-ui/src/router/index.js

@@ -254,6 +254,20 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/testplan/casereport/platformReport',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/test/testplan/caseReport/platformReport'),
+        name: 'platformReport',
+        noCache: true,
+        meta: { title: '平台报告', activeMenu: '/testplan' }
+      }
+    ]
+  },
 ]
 
 // 动态路由，基于用户权限动态去加载

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

@@ -16,7 +16,7 @@
         </el-button>
       </div>
       <el-tabs style="margin-top: 10px;">
-        <el-Table v-loading="loading" :data="list">
+        <el-Table v-loading="loading" :data="list" @row-click="handleRowClick">
           <el-table-column prop="name" label="测试报告名称" align="center"/>
           <el-table-column prop="result" label="测试结果" align="center">
             <template #default="{ row }">
@@ -105,6 +105,15 @@ export default {
     this.getList()
   },
   methods: {
+    handleRowClick(row){
+      this.$tab.openPage('平台报告', '/testplan/casereport/platformReport',
+        {id: row.id,
+          name: row.name,
+          type: row.result,
+          planId: row.planId,
+        }
+      )
+    },
     getList() {
       this.loading = true
       this.queryParams.id = Number(this.planId)

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

@@ -0,0 +1,324 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="24" class="page-header">
+        <el-page-header :title="reportTitle" @back="goBack" ></el-page-header>
+        <div class="header-buttons">
+          <span>测试结果</span>
+          <el-select v-model="selectedResult" placeholder="请选择" clearable>
+            <el-option
+              v-for="item in resultOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+          <el-button type="primary" icon="el-icon-setting" @click="configureModule">配置模块</el-button>
+          <el-button type="primary" size="medium" @click="saveReport">保存报告</el-button>
+        </div>
+      </el-col>
+    </el-row>
+      <div class="report-container">
+        <div class="report-header">
+          <div class="report-title">
+            <span>{{ reportTitle }}</span>
+          </div>
+          <div class="report-info">
+            <span>关联项目：中移商业保理平台</span>
+            <span>测试阶段：{{ reportType }}</span>
+          </div>
+        </div>
+
+        <div class="report-overview">
+          <div class="overview-item">
+            <div class="value">1</div>
+            <span class="label">执行用例数</span>
+          </div>
+          <div class="overview-item">
+            <span class="value">100%</span>
+            <div class="progress-bar"></div>
+            <div class="label">用例通过率</div>
+          </div>
+          <div class="overview-item">
+            <div class="value">0</div>
+            <span class="label">缺陷数</span>
+          </div>
+        </div>
+      </div>
+
+      <el-row :gutter="10">
+        <el-col :span="24">
+          <el-card>
+            <el-row>
+              <span style="font-size: 18px;color: #4f587e">用例分布</span>
+            </el-row>
+            <div class="charts">
+              <el-card shadow="hover" class="chart-item">
+                <h3>执行结果分布</h3>
+                <div id="result-distribution-chart"></div>
+              </el-card>
+              <el-card shadow="hover" class="chart-item">
+                <h3>用例类型分布</h3>
+                <div id="case-type-distribution-chart"></div>
+              </el-card>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import router from "@/router";
+
+export default {
+  name: 'report',
+  dicts: ['test_type'],
+  props: {
+    planId: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      reportType: '',
+      reportTitle: '',
+      selectedResult: '', // 选择的测试结果
+      resultOptions: [ // 测试结果选项
+        { value: 'all', label: '全部' },
+        { value: 'passed', label: '通过' },
+        { value: 'failed', label: '失败' }
+      ],
+
+      // 执行结果分布数据
+      resultDistributionData: {
+        series: [
+          { value: 0, name: '通过' ,itemStyle: {color: '#6fcdac'}},
+          { value: 0, name: '失败' ,itemStyle: {color: '#e97d64'}},
+          { value: 0, name: '跳过' ,itemStyle: {color: '#7484a1'}},
+          { value: 0, name: '阻塞' ,itemStyle: {color: '#f5c539'}},
+          { value: 0, name: '未执行' ,itemStyle: {color: '#cecece'}}
+        ]
+      },
+
+      // 用例类型分布数据
+      caseTypeDistributionData: {
+        series: [
+          { value: 1, name: '接口用例' ,itemStyle: {color: '#6fcdac'} }
+        ]
+      }
+    };
+  },
+  created() {
+    this.reportTitle = this.$route.query.name;
+    this.reportType = this.$route.query.type;
+  },
+  watch: {
+    'dict.type.test_type': {
+      handler(newVal) {
+        if (newVal && newVal.length > 0) {
+          const targetType = this.$route.query.type;
+          this.reportType = newVal.find(e => String(e.value) === String(targetType)).label;
+        }
+      },
+      immediate: true
+    }
+  },
+  computed: {
+
+  },
+  mounted() {
+    this.initResultDistributionChart();
+    this.initCaseTypeDistributionChart();
+  },
+  methods: {
+    initResultDistributionChart() {
+      const chartDom = document.getElementById('result-distribution-chart');
+      const myChart = echarts.init(chartDom);
+      const option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          orient: 'vertical',
+          right: 'right',
+          textStyle: {
+            color: '#666'
+          }
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '20',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.resultDistributionData.series
+          }
+        ]
+      };
+
+      myChart.setOption(option);
+    },
+    initCaseTypeDistributionChart() {
+      const chartDom = document.getElementById('case-type-distribution-chart');
+      const myChart = echarts.init(chartDom);
+      const option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          orient: 'vertical',
+          right: 'right',
+          textStyle: {
+            color: '#666'
+          }
+        },
+        series: [
+          {
+            type: 'pie',
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.caseTypeDistributionData.series
+          }
+        ]
+      };
+
+      myChart.setOption(option);
+    },
+
+    goBack() {
+      this.$router.back();
+      // 关闭当前页面
+      this.$tab.closePage(router.currentRoute);
+    },
+
+    configureModule() {
+      // 配置模块的逻辑
+      console.log('Configure module');
+    },
+
+    saveReport() {
+      // 保存报告的逻辑
+      console.log('Save report');
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.report-container {
+  height: 300px;
+  margin-bottom: 20px;
+  background: linear-gradient(90deg, #6fcdac, #9ed2bb);
+  .report-header {
+
+    color: white;
+    padding: 20px;
+    text-align: center;
+    position: relative;
+    margin-bottom: 50px;
+
+    .report-title {
+      font-size: 18px;
+      margin-bottom: 10px;
+    }
+
+    .report-info {
+      font-size: 14px;
+    }
+  }
+
+  .report-overview {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    color: white;
+    padding: 20px;
+
+    .overview-item {
+      text-align: center;
+
+      .value {
+        font-size: 24px;
+        margin-bottom: 10px;
+      }
+
+      .label {
+        font-size: 14px;
+      }
+
+      .progress-bar {
+        width: 100px;
+        height: 10px;
+        background-color: white;
+        margin-top: 10px;
+        border-radius: 5px;
+      }
+    }
+  }
+}
+  .charts {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 20px;
+    .chart-item {
+      width: 45%;
+      h3 {
+        text-align: center;
+        margin-bottom: 10px;
+      }
+      #result-distribution-chart, #case-type-distribution-chart {
+        width: 100%;
+        height: 300px;
+      }
+    }
+  }
+.page-header {
+  ::v-deep.el-page-header__title {
+    font-size: 20px;
+    color: #000000;
+    font-weight: bold;
+  }
+
+  height: 100px;
+  display: flex;
+  align-items: center;
+  border-bottom: solid 1px #e6e6e6;
+
+  .header-buttons {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+
+    span {
+      margin-right: 10px;
+    }
+
+    .el-select, .el-button {
+      margin-left: 10px;
+    }
+  }
+}
+</style>
+

test-ui/src/views/test/testplan/execute/caseExecute.vue

@@ -145,9 +145,9 @@ export default {
       this.getList();
     },
     relateCaseVue() {
-      // this.open = true;
-      // this.reset();
-      // this.$refs.relateCase.getList()
+      this.open = true;
+      this.reset();
+      this.$refs.relateCase.getList()
     },
     /** 查询列表 */
     getList() {