Merge remote-tracking branch 'origin/master'

test-test/src/main/java/com/test/test/controller/TestReportController.java

@@ -5,6 +5,7 @@ import com.test.common.core.controller.BaseController;
 import com.test.common.core.domain.AjaxResult;
 import com.test.common.core.page.TableDataInfo;
 import com.test.common.enums.BusinessType;
+import com.test.test.domain.TestReport;
 import com.test.test.domain.qo.IDQO;
 import com.test.test.domain.qo.TestReportAddQO;
 import com.test.test.domain.vo.TestReportVo;
@@ -53,4 +54,36 @@ public class TestReportController extends BaseController {
     public AjaxResult addTestReport(@RequestBody TestReportAddQO testReportAddQO) {
         return toAjax(testReportService.addTestReport(testReportAddQO));
     }
+
+    /**
+     * 查询测试计划关联测试报告详情
+     */
+    @PostMapping("/caseExecuteDetail")
+    public AjaxResult caseExecuteDetail(@RequestBody IDQO id) {
+        return success(testReportService.selectCaseTestReportById(id.getId()));
+    }
+
+    /**
+     * 删除测试报告
+     * @param id
+     * @return
+     */
+    @Log(title = "测试报告", businessType = BusinessType.DELETE)
+    @PostMapping("/delExecuteCaseReport")
+    public AjaxResult delExecuteCaseReport(@RequestBody IDQO id) {
+        TestReport testReport = testReportService.selectCaseTestReportById(id.getId());
+        testReport.setDelFlag("1");
+        return toAjax(testReportService.updateExecuteCaseReport(testReport));
+    }
+
+    /**
+     * 修改测试计划关联测试报告
+     * @param testReport
+     */
+    @Log(title = "测试报告", businessType = BusinessType.UPDATE)
+    @PostMapping("/updateExecuteCaseReport")
+    public AjaxResult updateExecuteCaseReport(@RequestBody TestReport testReport) {
+        return toAjax(testReportService.updateExecuteCaseReport(testReport));
+    }
+
 }

test-test/src/main/java/com/test/test/domain/TestCaseLog.java

@@ -29,6 +29,14 @@ public class TestCaseLog extends BaseEntity
     @Excel(name = "用例id")
     private Long caseId;
 
+    /** 测试计划id */
+    @Excel(name = "测试计划id")
+    private Long planId;
+
+    /** 测试计划关联用例类型 */
+    @Excel(name = "测试计划关联用例类型")
+    private Integer type;
+
     /** 操作类别 */
     @Excel(name = "操作类别")
     private String operType;

test-test/src/main/java/com/test/test/domain/vo/TestCaseReportVO.java

@@ -0,0 +1,18 @@
+package com.test.test.domain.vo;
+
+import java.io.Serializable;
+import lombok.Data;
+
+@Data
+public class TestCaseReportVO implements Serializable {
+
+    private static final long serialVersionUID = 6972995415807958849L;
+
+    private String name;
+
+    private String result;
+
+    private Integer caseNum;
+
+    private Integer passNum;
+}

test-test/src/main/java/com/test/test/domain/vo/TestReportVo.java

@@ -9,6 +9,9 @@ public class TestReportVo extends BaseEntity {
 
     private static final long serialVersionUID = -4331077290310280474L;
 
+    /** 测试报告id */
+    private Long id;
+
     /**
      * 测试报告名称
      */
@@ -17,6 +20,9 @@ public class TestReportVo extends BaseEntity {
     /** 测试结果(0,未通过,1,通过) */
     private String result;
 
+    /** 测试报告（jason格式存储）*/
+    private String report;
+
     /** 测试用例类型(0,冒烟测试,1,功能测试,2,回归测试,3,准生产测试,4,生产验证) */
     private Long type;
 

test-test/src/main/java/com/test/test/mapper/TestCaseLogMapper.java

@@ -2,6 +2,7 @@ package com.test.test.mapper;
 
 import com.test.test.domain.TestCaseLog;
 
+import com.test.test.domain.qo.TestReportAddQO;
 import java.util.List;
 
 /**
@@ -28,6 +29,14 @@ public interface TestCaseLogMapper
      */
     public List<TestCaseLog> selectTestCaseLogList(TestCaseLog testCaseLog);
 
+    /**
+     * 查询用例日志列表
+     *
+     * @param testCaseLog 用例日志
+     * @return 用例日志集合
+     */
+    public String selectTestCaseLogCaseSid(TestReportAddQO testCaseLog);
+
     /**
      * 新增用例日志
      *

test-test/src/main/java/com/test/test/mapper/TestReportMapper.java

@@ -20,4 +20,18 @@ public interface TestReportMapper {
      * @return
      */
     int addTestReport(TestReport testReport);
+
+    /**
+     * 查询用例执行测试报告详情
+     * @param id
+     * @return
+     */
+    TestReport selectCaseTestReportById(Long id);
+
+    /**
+     * 修改用例执行测试报告
+     * @param testReport
+     * @return
+     */
+    int updateExecuteCaseReport(TestReport testReport);
 }

test-test/src/main/java/com/test/test/service/ITestReportService.java

@@ -23,4 +23,18 @@ public interface ITestReportService {
      * @return
      */
     public int addTestReport(TestReportAddQO testReportAddQO);
+
+    /**
+     * 更新执行用例测试报告
+     * @param testReport
+     * @return
+     */
+    public int updateExecuteCaseReport(TestReport testReport);
+
+    /**
+     * 查询测试报告详情
+     * @param id
+     * @return
+     */
+    public TestReport selectCaseTestReportById(Long id);
 }

test-test/src/main/java/com/test/test/service/impl/TestCaseServiceImpl.java

@@ -236,6 +236,8 @@ public class TestCaseServiceImpl implements ITestCaseService
             testCase.setContextResultMap(contextResultMap);
             TestCaseLog testCaseLog = new TestCaseLog();
             testCaseLog.setCaseId(id);
+            testCaseLog.setPlanId(testPlanCase.getPlanId());
+            testCaseLog.setType(testPlanCase.getType());
             testCaseLog.setOperTime(DateUtils.getNowDate());
             testCaseLog.setOperType("执行");
             testCaseLog.setCaseSid(caseSid);

test-test/src/main/java/com/test/test/service/impl/TestReportServiceImpl.java

@@ -1,11 +1,17 @@
 package com.test.test.service.impl;
 
+import com.alibaba.fastjson2.JSONObject;
 import com.test.common.utils.DateUtils;
 import com.test.common.utils.SecurityUtils;
+import com.test.common.utils.StringUtils;
 import com.test.common.utils.bean.BeanUtils;
+import com.test.test.domain.TestCaseResult;
 import com.test.test.domain.TestReport;
 import com.test.test.domain.qo.TestReportAddQO;
+import com.test.test.domain.vo.TestCaseReportVO;
 import com.test.test.domain.vo.TestReportVo;
+import com.test.test.mapper.TestCaseLogMapper;
+import com.test.test.mapper.TestCaseResultMapper;
 import com.test.test.mapper.TestPlanReportMapper;
 import com.test.test.mapper.TestReportMapper;
 import com.test.test.service.ITestReportService;
@@ -29,6 +35,12 @@ public class TestReportServiceImpl implements ITestReportService {
     @Resource
     private TestPlanReportMapper testPlanReportMapper;
 
+    @Resource
+    private TestCaseLogMapper testCaseLogMapper;
+
+    @Resource
+    private TestCaseResultMapper testCaseResultMapper;
+
     /**
      * 查询测试报告列表
      * @param planId
@@ -46,11 +58,33 @@ public class TestReportServiceImpl implements ITestReportService {
      */
     @Override
     public int addTestReport(TestReportAddQO testReportAddQO) {
+        String caseSid = testCaseLogMapper.selectTestCaseLogCaseSid(testReportAddQO);
+        if (StringUtils.isEmpty(caseSid)) {
+            throw new RuntimeException("未执行用例,无法生成报告");
+        }
+        TestCaseResult testCaseResult = new TestCaseResult();
+        testCaseResult.setCaseSid(caseSid);
+        List<TestCaseResult> testCaseResults = testCaseResultMapper.selectTestCaseResultList(testCaseResult);
+        int count = testCaseResults.size();
+        int passNum = (int)testCaseResults.stream().filter(result -> "成功".equals(result.getStatus())).count();
+        if (count == passNum) {
+            testReportAddQO.setResult("1");
+        }
+        TestCaseReportVO testCaseReportVO = new TestCaseReportVO();
+        testCaseReportVO.setName(testReportAddQO.getName());
+        testCaseReportVO.setResult("0");
+        testCaseReportVO.setCaseNum(count);
+        testCaseReportVO.setPassNum(passNum);
+        String reportJson = JSONObject.toJSONString(testCaseReportVO);
         TestReport testReport = new TestReport();
+        if (count == passNum) {
+            testReport.setResult("1");
+        }
         BeanUtils.copyProperties(testReportAddQO,testReport);
         testReport.setSerialNumber(generateSerialNumber());
         testReport.setResult("0");
         testReport.setStatus("0");
+        testReport.setReport(reportJson);
         testReport.setCreateTime(DateUtils.getNowDate());
         testReport.setDelFlag("0");
         testReport.setUpdateBy(SecurityUtils.getUsername());
@@ -61,6 +95,27 @@ public class TestReportServiceImpl implements ITestReportService {
         return testPlanReportMapper.insertTestPlanReport(testReportAddQO);
     }
 
+    /**
+     * 更新执行用例报告
+     * @param testReport
+     * @return
+     */
+    @Override
+    public int updateExecuteCaseReport(TestReport testReport) {
+        testReport.setUpdateTime(DateUtils.getNowDate());
+        return testReportMapper.updateExecuteCaseReport(testReport);
+    }
+
+    /**
+     * 根据id查询报告
+     * @param id
+     * @return
+     */
+    @Override
+    public TestReport selectCaseTestReportById(Long id) {
+        return testReportMapper.selectCaseTestReportById(id);
+    }
+
     /**
      * 生成随机序列号
      * @return

test-test/src/main/resources/mapper/test/TestCaseLogMapper.xml

@@ -36,10 +36,21 @@
         where id = #{id}
     </select>
 
+    <select id="selectTestCaseLogCaseSid" resultType="java.lang.String">
+        SELECT case_sid
+        FROM test_case_log
+        WHERE plan_id = #{planId}
+        AND type = #{type}
+        ORDER BY id
+        DESC limit 1
+    </select>
+
     <insert id="insertTestCaseLog" parameterType="TestCaseLog" useGeneratedKeys="true" keyProperty="id">
         insert into test_case_log
         <trim prefix="(" suffix=")" suffixOverrides=",">
             <if test="caseId != null">case_id,</if>
+            <if test="planId != null">plan_id,</if>
+            <if test="type != null">type,</if>
             <if test="operType != null">oper_type,</if>
             <if test="operDetail != null">oper_detail,</if>
             <if test="operUser != null">oper_user,</if>
@@ -48,6 +59,8 @@
         </trim>
         <trim prefix="values (" suffix=")" suffixOverrides=",">
             <if test="caseId != null">#{caseId},</if>
+            <if test="planId != null">#{planId},</if>
+            <if test="type != null">#{type},</if>
             <if test="operType != null">#{operType},</if>
             <if test="operDetail != null">#{operDetail},</if>
             <if test="operUser != null">#{operUser},</if>

test-test/src/main/resources/mapper/test/TestPlanMapper.xml

@@ -149,19 +149,23 @@
     (SELECT COUNT(1) FROM test_plan_case tpc
     WHERE tpc.plan_id = tp.id
     AND tpc.del_flag = '0'
-    AND tpc.type = '1') AS functionTestPassNum,
+    AND tpc.type = '1'
+    AND tpc.execute_result = '1') AS functionTestPassNum,
     (SELECT COUNT(1) FROM test_plan_case tpc
     WHERE tpc.plan_id = tp.id
     AND tpc.del_flag = '0'
-    AND tpc.type = '2') AS regressionTestPassNum,
+    AND tpc.type = '2'
+    AND tpc.execute_result = '1') AS regressionTestPassNum,
     (SELECT COUNT(1) FROM test_plan_case tpc
     WHERE tpc.plan_id = tp.id
     AND tpc.del_flag = '0'
-    AND tpc.type = '3') AS preProductionTestPassNum,
+    AND tpc.type = '3'
+    AND tpc.execute_result = '1') AS preProductionTestPassNum,
     (SELECT COUNT(1) FROM test_plan_case tpc
     WHERE tpc.plan_id = tp.id
     AND tpc.del_flag = '0'
-    AND tpc.type = '4') AS productionTestPassNum,
+    AND tpc.type = '4'
+    AND tpc.execute_result = '1') AS productionTestPassNum,
     tp.version,
     (
     SELECT COUNT(1) FROM test_plan_defect tpd

test-test/src/main/resources/mapper/test/TestReportMapper.xml

@@ -31,18 +31,72 @@
     </trim>
   </insert>
 
+  <resultMap type="TestReport" id="TestReportResult">
+    <result property="id" column="id"/>
+    <result property="serialNumber" column="serial_number"/>
+    <result property="name" column="name"/>
+    <result property="result" column="result"/>
+    <result property="status" column="status"/>
+    <result property="report" column="report"/>
+    <result property="updateBy" column="update_by"/>
+    <result property="createTime" column="create_time"/>
+    <result property="updateTime" column="update_time"/>
+    <result property="version" column="version"/>
+    <result property="delFlag" column="del_flag"/>
+  </resultMap>
+
+  <sql id="selectTestReportVo">
+    SELECT id,
+           serial_number,
+           name,
+           result,
+           status,
+           report,
+           update_by,
+           create_time,
+           update_time,
+           version,
+           del_flag
+    FROM test_report
+  </sql>
+
   <select id="selectTestReportList" parameterType="Long" resultType="TestReportVo">
-    SELECT
+    SELECT tr.id          AS id,
            tr.name        AS name,
            tr.result      AS result,
+           tr.report      AS report,
            tr.status      AS status,
            tpr.type       AS type,
            tr.create_time AS createTime,
-      tr.update_by AS updateBy
+           tr.update_by   AS updateBy,
+           tr.update_time AS updateTime
     FROM test_plan_report tpr
            LEFT JOIN test_report tr ON tr.id = tpr.report_id
     WHERE tpr.plan_id = #{planId}
       AND tpr.del_flag = '0'
+      AND tr.del_flag = '0'
     ORDER BY tr.create_time DESC
   </select>
+
+  <select id="selectCaseTestReportById" parameterType="Long" resultMap="TestReportResult">
+    <include refid="selectTestReportVo"/>
+    where id = #{id}
+  </select>
+
+  <update id="updateExecuteCaseReport" parameterType="testReport">
+    update test_report
+    <trim prefix="SET" suffixOverrides=",">
+      <if test="serialNumber != null">serial_number = #{serialNumber},</if>
+      <if test="name != null">name = #{name},</if>
+      <if test="result != null">result = #{result},</if>
+      <if test="status != null">status = #{status},</if>
+      <if test="report != null">report = #{report},</if>
+      <if test="updateBy != null">update_by = #{updateBy},</if>
+      <if test="createTime != null">create_time = #{createTime},</if>
+      <if test="updateTime != null">update_time = #{updateTime},</if>
+      <if test="version != null">version = #{version},</if>
+      <if test="delFlag != null">del_flag = #{delFlag},</if>
+    </trim>
+    where id = #{id}
+  </update>
 </mapper>

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

@@ -9,6 +9,8 @@ const api = {
   testPlanProjectList: '/test/testPlanProject/list',
   addTestReport:  'test/testReport/addTestReport',
   getTestReportList: 'test/testReport/reportList',
+  delExecuteCaseReport: 'test/testReport/delExecuteCaseReport',
+  updateExecuteCaseReport: 'test/testReport/updateExecuteCaseReport',
   getPlanOverview:'test/testPlan/planOverview',
   getPlanCaseTrendData: 'test/testPlan/planCaseTrendData',
 }
@@ -77,6 +79,22 @@ export function getTestReportList(data) {
   })
 }
 
+export function delExecuteCaseReport(id) {
+  return request({
+    url: api.delExecuteCaseReport,
+    method: 'post',
+    data: {id}
+  })
+}
+
+export function updateExecuteCaseReport(data) {
+  return request({
+    url: api.updateExecuteCaseReport,
+    method: 'post',
+    data: data
+  })
+}
+
 export function getPlanOverview(id) {
   return request({
     url: api.getPlanOverview,

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

@@ -35,6 +35,11 @@
           </el-table-column>
           <el-table-column prop="updateBy" label="最后更新人" align="center"/>
           <el-table-column prop="updateTime" label="最后更新时间" align="center"/>
+          <el-table-column label="操作" align="center">
+            <template #default="{ row }">
+              <el-button type="text" size="mini" @click.native.stop="handleDel(row.id)">删除</el-button>
+            </template>
+          </el-table-column>
         </el-Table>
       </el-tabs>
       <pagination
@@ -65,7 +70,7 @@
 </template>
 <script>
 import SimpleOptions from "@/components/FormItem/option/SimpleOptions.vue";
-import {addTestReport, getTestReportList} from "@/api/test/testPlan";
+import {addTestReport, delExecuteCaseReport, getTestReportList} from "@/api/test/testPlan";
 
 export default {
   name: 'caseReport',
@@ -101,19 +106,34 @@ export default {
       }
     }
   },
-  mounted() {
+  activated() {
+    this.$nextTick(() => {
+      console.log('getlist')
       this.getList()
+    })
+  },
+  mounted() {
+
   },
   methods: {
     handleRowClick(row){
       this.$tab.openPage('平台报告', '/testplan/casereport/platformReport',
         {id: row.id,
           name: row.name,
-          type: row.result,
+          type: row.type,
           planId: row.planId,
+          report: row.report
         }
       )
     },
+    handleDel(id) {
+      this.$modal.confirm('是否确认删除测试报告？').then(function () {
+        return delExecuteCaseReport(id);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      });
+    },
     getList() {
       this.loading = true
       this.queryParams.id = Number(this.planId)

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

@@ -3,9 +3,9 @@
     <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">
+        <div class="header-buttons" v-if="isEdit">
           <span>测试结果</span>
-          <el-select v-model="selectedResult" placeholder="请选择" clearable>
+          <el-select v-model="selectedResult" placeholder="请选择">
             <el-option
               v-for="item in resultOptions"
               :key="item.value"
@@ -15,28 +15,42 @@
           </el-select>
           <el-button type="primary" icon="el-icon-setting" @click="configureModule">配置模块</el-button>
           <el-button type="primary" size="medium" @click="saveReport">保存报告</el-button>
+          <el-button type="danger" size="medium" @click="isEdit = false">取消编辑</el-button>
+        </div>
+        <div class="header-buttons" v-else>
+          <el-button type="primary" icon="el-icon-setting" @click="configureModule">下载报告</el-button>
+          <el-button type="primary" size="medium" @click="isEdit = true">编辑报告</el-button>
         </div>
       </el-col>
     </el-row>
-      <div class="report-container">
+      <div class="report-container" :class="testStatusClass">
         <div class="report-header">
-          <div class="report-title">
+          <div class="report-title" v-if="isEdit">
-            <span>{{ reportTitle }}</span>
+            <el-input v-model="reportTitle" style="width: 300px" placeholder="请输入报告名称"/>
-          </div>
             <div class="report-info">
               <span>关联项目：中移商业保理平台</span>
               <span>测试阶段：{{ reportType }}</span>
             </div>
           </div>
+          <div class="report-title" v-else>
+            <span>{{ reportTitle }}</span>
+            <div class="report-info">
+              <span>关联项目：中移商业保理平台</span>
+              <span>测试阶段：{{ reportType }}</span>
+            </div>
+          </div>
+        </div>
 
         <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>
+            <span class="value">{{ passRate }}%</span>
-            <div class="progress-bar"></div>
+            <div class="progress-bar-container">
+              <div class="progress-bar" :style="{ width: passRate + '%' }"></div>
+            </div>
             <div class="label">用例通过率</div>
           </div>
           <div class="overview-item">
@@ -71,6 +85,7 @@
 <script>
 import * as echarts from 'echarts';
 import router from "@/router";
+import {updateExecuteCaseReport} from "@/api/test/testPlan";
 
 export default {
   name: 'report',
@@ -83,13 +98,15 @@ export default {
   },
   data() {
     return {
+      isEdit: false,
+      reportId: '',
       reportType: '',
       reportTitle: '',
+      reportData: {},
       selectedResult: '', // 选择的测试结果
       resultOptions: [ // 测试结果选项
-        { value: 'all', label: '全部' },
+        { value: '1', label: '通过' },
-        { value: 'passed', label: '通过' },
+        { value: '0', label: '不通过' }
-        { value: 'failed', label: '失败' }
       ],
 
       // 执行结果分布数据
@@ -106,14 +123,24 @@ export default {
       // 用例类型分布数据
       caseTypeDistributionData: {
         series: [
-          { value: 1, name: '接口用例' ,itemStyle: {color: '#6fcdac'} }
+          { value: 0, name: '接口用例' ,itemStyle: {color: '#6fcdac'} }
         ]
       }
     };
   },
   created() {
+    this.reportId = this.$route.query.id;
     this.reportTitle = this.$route.query.name;
     this.reportType = this.$route.query.type;
+    this.reportData = JSON.parse(this.$route.query.report);
+    this.selectedResult = this.reportData.result;
+
+    // 更新饼图数据
+    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 +154,33 @@ export default {
     }
   },
   computed: {
-
+    passRate() {
+      if (this.reportData.caseNum === 0) return 0;
+      return (this.reportData.passNum / this.reportData.caseNum) * 100;
+    },
+    testStatusClass() {
+      return this.selectedResult === '0' ? 'status-not-passed' : 'status-passed';
+    }
   },
   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',
+            radius: ['40%', '70%'],
+            data: this.resultDistributionData.series
+          }]
+        }, true); // true 表示合并选项
+      }
+    });
   },
   methods: {
     initResultDistributionChart() {
@@ -219,9 +268,31 @@ export default {
     },
 
     saveReport() {
-      // 保存报告的逻辑
+      let reportData = {
-      console.log('Save report');
+        caseNum: this.reportData.caseNum,
-    }
+        name: this.reportData.name,
+        passNum: this.reportData.passNum,
+        result: this.selectedResult  // 使用外部的 result 值替换
+      };
+      // 构造要提交的数据对象
+      const reportDataToSave = {
+        id: this.reportId,
+        name: this.reportTitle,
+        result: this.selectedResult,
+        report: JSON.stringify(reportData)
+      };
+
+      updateExecuteCaseReport(reportDataToSave)
+      .then(response => {
+        this.$message.success('报告保存成功');
+        // 可选：更新页面状态为非编辑模式
+        this.isEdit = false;
+      })
+      .catch(error => {
+        this.$message.error('报告保存失败');
+        console.error('保存报告失败:', error);
+      });
+    },
   },
 }
 </script>
@@ -230,7 +301,12 @@ export default {
 .report-container {
   height: 300px;
   margin-bottom: 20px;
-  background: linear-gradient(90deg, #6fcdac, #9ed2bb);
+  &.status-not-passed {
+    background: linear-gradient(180deg, #e7998b, #e8b1b0);
+  }
+  &.status-passed {
+    background: linear-gradient(180deg, #6fcdac, #9ed2bb);
+  }
   .report-header {
 
     color: white;
@@ -268,13 +344,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;
+      //}
     }
   }
 }