feat(测试跟踪): 首页重构

2021-03-13 13:01:28 +08:00 · 2021-03-13 13:01:28 +08:00 · 551f34fee7
parent 7d26ee82c5
commit 551f34fee7
14 changed files with 583 additions and 73 deletions
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestCaseMapper.java
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestCaseMapper.java
@ -60,4 +60,16 @@ public interface ExtTestCaseMapper {
    long countCreatedThisWeek(@Param("projectId") String projectId, @Param("firstDayTimestamp") long firstDayTimestamp, @Param("lastDayTimestamp") long lastDayTimestamp);

    List<TrackCountResult> countStatus(@Param("projectId") String projectId);
+
+    List<TrackCountResult> countRelevance(@Param("projectId") String projectId);
+
+    long countRelevanceCreatedThisWeek(@Param("projectId") String projectId,@Param("firstDayTimestamp") long firstDayTimestamp, @Param("lastDayTimestamp") long lastDayTimestamp);
+
+    List<TrackCountResult> countCoverage(@Param("projectId") String projectId);
+
+    List<TrackCountResult> countFuncMaintainer(@Param("projectId") String projectId);
+
+    List<TrackCountResult> countRelevanceMaintainer(@Param("projectId") String projectId);
+
+
 }
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestCaseMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestCaseMapper.xml
@ -328,9 +328,33 @@
        SELECT count(id) AS countNumber FROM test_case WHERE test_case.project_id = #{projectId}
          AND create_time BETWEEN #{firstDayTimestamp} AND #{lastDayTimestamp}
    </select>
-
+    <!-- todo 排除删除的用例统计-->
    <select id="countStatus" resultType="io.metersphere.track.response.TrackCountResult">
-        SELECT review_status AS groupField,count(id) AS countNumber FROM test_case  WHERE project_id = #{projectId} GROUP BY test_case.review_status;
+        SELECT review_status AS groupField,count(id) AS countNumber FROM test_case  WHERE project_id = #{projectId} GROUP BY test_case.review_status
    </select>

+    <select id="countRelevance" resultType="io.metersphere.track.response.TrackCountResult">
+        SELECT type AS groupField, count(id) AS countNumber FROM test_case WHERE test_case.project_id = #{projectId} GROUP BY test_case.type
+    </select>
+    <select id="countRelevanceCreatedThisWeek" resultType="java.lang.Long">
+        SELECT count(id) AS countNumber FROM test_case WHERE test_case.project_id = #{projectId}
+        AND create_time BETWEEN #{firstDayTimestamp} AND #{lastDayTimestamp}
+    </select>
+
+    <select id="countCoverage" resultType="io.metersphere.track.response.TrackCountResult">
+        SELECT count(test_case.id) AS countNumber, if(test_case.test_id is null,"uncoverage","coverage") AS groupField
+        FROM test_case WHERE test_case.project_id=#{projectId} GROUP BY groupField
+    </select>
+    <select id="countFuncMaintainer" resultType="io.metersphere.track.response.TrackCountResult">
+        select count(tc.id) as countNumber, user.name as groupField from test_case tc right join user on tc.maintainer = user.id
+        where tc.project_id = #{projectId}
+        group by tc.maintainer
+    </select>
+    <select id="countRelevanceMaintainer" resultType="io.metersphere.track.response.TrackCountResult">
+        select count(tc.id) as countNumber, user.name as groupField from test_case tc right join user on tc.maintainer = user.id
+        where tc.project_id = #{projectId} and tc.test_id is not null
+        group by tc.maintainer
+    </select>
+
+
 </mapper>
--- a/backend/src/main/java/io/metersphere/track/controller/TrackController.java
+++ b/backend/src/main/java/io/metersphere/track/controller/TrackController.java
@ -2,6 +2,8 @@ package io.metersphere.track.controller;


 import io.metersphere.commons.constants.RoleConstants;
+import io.metersphere.performance.base.ChartsData;
+import io.metersphere.track.response.BugStatustics;
 import io.metersphere.track.response.TrackCountResult;
 import io.metersphere.track.response.TrackStatisticsDTO;
 import io.metersphere.track.service.TrackService;
@ -50,4 +52,42 @@ public class TrackController {
        statistics.setP3CountStr("P3&nbsp;&nbsp;<br/><br/>" + statistics.getP3CaseCountNumber());
        return statistics;
    }
+
+    @GetMapping("/relevance/count/{projectId}")
+    public TrackStatisticsDTO getRelevanceCount(@PathVariable String projectId) {
+        TrackStatisticsDTO statistics = new TrackStatisticsDTO();
+
+        List<TrackCountResult> relevanceResults = trackService.countRelevance(projectId);
+        statistics.countRelevance(relevanceResults);
+
+        long size = trackService.countRelevanceCreatedThisWeek(projectId);
+        statistics.setThisWeekAddedCount(size);
+
+        List<TrackCountResult> coverageResults = trackService.countCoverage(projectId);
+        statistics.countCoverage(coverageResults);
+
+        long total = statistics.getUncoverageCount() + statistics.getCoverageCount();
+
+        if (total != 0) {
+            float coverageRageNumber = (float) statistics.getCoverageCount() * 100 / total;
+            DecimalFormat df = new DecimalFormat("0.0");
+            statistics.setCoverageRage(df.format(coverageRageNumber) + "%");
+        }
+
+        statistics.setApiCaseCountStr("接口用例&nbsp;&nbsp;<br/><br/>" + statistics.getApiCaseCount());
+        statistics.setPerformanceCaseCountStr("性能用例&nbsp;&nbsp;<br/><br/>" + statistics.getPerformanceCaseCount());
+        statistics.setScenarioCaseStr("场景用例&nbsp;&nbsp;<br/><br/>" + statistics.getScenarioCaseCount());
+
+        return statistics;
+    }
+
+    @GetMapping("/case/bar/{projectId}")
+    public List<ChartsData> getCaseMaintenanceBar(@PathVariable String projectId) {
+        return trackService.getCaseMaintenanceBar(projectId);
+    }
+
+    @GetMapping("/bug/count/{projectId}")
+    public BugStatustics getBugStatustics(@PathVariable String projectId) {
+        return trackService.getBugStatustics(projectId);
+    }
 }
--- a/backend/src/main/java/io/metersphere/track/request/testcase/CasePriority.java
+++ b/backend/src/main/java/io/metersphere/track/request/testcase/CasePriority.java
@ -1,8 +1,12 @@
 package io.metersphere.track.request.testcase;

-public class CasePriority {
+public class TrackCount {
    public static final String P0 = "P0";
    public static final String P1 = "P1";
    public static final String P2 = "P2";
    public static final String P3 = "P3";
+
+    public static final String API = "api";
+    public static final String PERFORMANCE = "performance";
+    public static final String AUTOMATION = "automation";
 }
--- a/backend/src/main/java/io/metersphere/track/response/BugStatustics.java
+++ b/backend/src/main/java/io/metersphere/track/response/BugStatustics.java
@ -0,0 +1,16 @@
+package io.metersphere.track.response;
+
+import lombok.Getter;
+import lombok.Setter;
+
+import java.util.ArrayList;
+import java.util.List;
+
+@Getter
+@Setter
+public class BugStatustics {
+
+    private long bugTotalSize;
+    private String rage;
+    private List<TestPlanBugCount> list = new ArrayList<>();
+}
--- a/backend/src/main/java/io/metersphere/track/response/TestPlanBugCount.java
+++ b/backend/src/main/java/io/metersphere/track/response/TestPlanBugCount.java
@ -0,0 +1,16 @@
+package io.metersphere.track.response;
+
+import lombok.Getter;
+import lombok.Setter;
+
+@Getter
+@Setter
+public class TestPlanBugCount {
+    private int index;
+    private String planName;
+    private long creatTime;
+    private String status;
+    private int caseSize;
+    private int bugSize;
+    private String passRage;
+}
--- a/backend/src/main/java/io/metersphere/track/response/TrackStatisticsDTO.java
+++ b/backend/src/main/java/io/metersphere/track/response/TrackStatisticsDTO.java
@ -1,7 +1,8 @@
 package io.metersphere.track.response;

+import io.metersphere.api.dto.datacount.ApiDataCountResult;
 import io.metersphere.commons.constants.TestReviewCaseStatus;
-import io.metersphere.track.request.testcase.CasePriority;
+import io.metersphere.track.request.testcase.TrackCount;
 import lombok.Getter;
 import lombok.Setter;

@ -47,7 +48,7 @@ public class TrackStatisticsDTO {
    /**
     * 关联用例数量统计
     */
-    private long relevanceCaseCount = 0;
+    private long allRelevanceCaseCount = 0;

    /**
     * 接口用例数量统计
@ -110,16 +111,16 @@ public class TrackStatisticsDTO {
    public void countPriority(List<TrackCountResult> trackCountResults) {
        for (TrackCountResult countResult : trackCountResults) {
            switch (countResult.getGroupField().toUpperCase()){
-                case CasePriority.P0:
+                case TrackCount.P0:
                    this.p0CaseCountNumber += countResult.getCountNumber();
                    break;
-                case CasePriority.P1:
+                case TrackCount.P1:
                    this.p1CaseCountNumber += countResult.getCountNumber();
                    break;
-                case CasePriority.P2:
+                case TrackCount.P2:
                    this.p2CaseCountNumber += countResult.getCountNumber();
                    break;
-                case CasePriority.P3:
+                case TrackCount.P3:
                    this.p3CaseCountNumber += countResult.getCountNumber();
                    break;
                default:
@ -140,4 +141,33 @@ public class TrackStatisticsDTO {
            }
        }
    }
+
+    public void countRelevance(List<TrackCountResult> relevanceResults) {
+        for (TrackCountResult countResult : relevanceResults) {
+            switch (countResult.getGroupField().toUpperCase()){
+                case TrackCount.API:
+                    this.apiCaseCount += countResult.getCountNumber();
+                    break;
+                case TrackCount.PERFORMANCE:
+                    this.performanceCaseCount += countResult.getCountNumber();
+                    break;
+                case TrackCount.AUTOMATION:
+                    this.scenarioCaseCount += countResult.getCountNumber();
+                    break;
+                default:
+                    break;
+            }
+            this.allRelevanceCaseCount += countResult.getCountNumber();
+        }
+    }
+
+    public void countCoverage(List<TrackCountResult> coverageResults) {
+        for (TrackCountResult countResult : coverageResults) {
+            if("coverage".equals(countResult.getGroupField())){
+                this.coverageCount+= countResult.getCountNumber();
+            }else if("uncoverage".equals(countResult.getGroupField())){
+                this.uncoverageCount+= countResult.getCountNumber();
+            }
+        }
+    }
 }
--- a/backend/src/main/java/io/metersphere/track/service/TrackService.java
+++ b/backend/src/main/java/io/metersphere/track/service/TrackService.java
@ -1,14 +1,22 @@
 package io.metersphere.track.service;

+import io.metersphere.base.domain.*;
+import io.metersphere.base.mapper.*;
 import io.metersphere.base.mapper.ext.ExtTestCaseMapper;
 import io.metersphere.commons.utils.DateUtils;
+import io.metersphere.performance.base.ChartsData;
+import io.metersphere.track.response.BugStatustics;
+import io.metersphere.track.response.TestPlanBugCount;
 import io.metersphere.track.response.TrackCountResult;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 import javax.annotation.Resource;
+import java.math.BigDecimal;
+import java.util.ArrayList;
 import java.util.Date;
 import java.util.List;
 import java.util.Map;
+import java.util.stream.Collectors;

@Service
@Transactional(rollbackFor = Exception.class)
@ -16,6 +24,16 @@ public class TrackService {

    @Resource
    private ExtTestCaseMapper extTestCaseMapper;
+    @Resource
+    private TestPlanMapper testPlanMapper;
+    @Resource
+    private TestPlanTestCaseMapper testPlanTestCaseMapper;
+    @Resource
+    private TestPlanLoadCaseMapper testPlanLoadCaseMapper;
+    @Resource
+    private TestPlanApiCaseMapper testPlanApiCaseMapper;
+    @Resource
+    private TestPlanApiScenarioMapper testPlanApiScenarioMapper;

    public List<TrackCountResult> countPriority(String projectId) {
        return extTestCaseMapper.countPriority(projectId);
@ -37,4 +55,114 @@ public class TrackService {
    public List<TrackCountResult> countStatus(String projectId) {
        return extTestCaseMapper.countStatus(projectId);
    }
+
+    public List<TrackCountResult> countRelevance(String projectId) {
+        return extTestCaseMapper.countRelevance(projectId);
+    }
+
+    public long countRelevanceCreatedThisWeek(String projectId) {
+        Map<String, Date> startAndEndDateInWeek = DateUtils.getWeedFirstTimeAndLastTime(new Date());
+
+        Date firstTime = startAndEndDateInWeek.get("firstTime");
+        Date lastTime = startAndEndDateInWeek.get("lastTime");
+
+        if (firstTime == null || lastTime == null) {
+            return 0;
+        } else {
+            return extTestCaseMapper.countRelevanceCreatedThisWeek(projectId, firstTime.getTime(), lastTime.getTime());
+        }
+    }
+
+    public List<TrackCountResult> countCoverage(String projectId) {
+        return extTestCaseMapper.countCoverage(projectId);
+    }
+
+    public List<ChartsData> getCaseMaintenanceBar(String projectId) {
+        List<TrackCountResult> funcMaintainer = extTestCaseMapper.countFuncMaintainer(projectId);
+        List<TrackCountResult> relevanceMaintainer = extTestCaseMapper.countRelevanceMaintainer(projectId);
+        List<String> list = relevanceMaintainer.stream().map(TrackCountResult::getGroupField).collect(Collectors.toList());
+
+        List<ChartsData> charts = new ArrayList<>();
+        for (TrackCountResult result : funcMaintainer) {
+            String groupField = result.getGroupField();
+            if (!list.contains(groupField)) {
+                // 创建了功能用例，但是未关联测试
+                TrackCountResult trackCount = new TrackCountResult();
+                trackCount.setCountNumber(0);
+                trackCount.setGroupField(groupField);
+                relevanceMaintainer.add(trackCount);
+            }
+            ChartsData chartsData = new ChartsData();
+            chartsData.setxAxis(groupField);
+            chartsData.setyAxis(BigDecimal.valueOf(result.getCountNumber()));
+            chartsData.setGroupName("FUNCTIONCASE");
+            charts.add(chartsData);
+        }
+
+        for (TrackCountResult result : relevanceMaintainer) {
+            ChartsData chartsData = new ChartsData();
+            chartsData.setxAxis(result.getGroupField());
+            chartsData.setyAxis(BigDecimal.valueOf(result.getCountNumber()));
+            chartsData.setGroupName("RELEVANCECASE");
+            charts.add(chartsData);
+        }
+
+        return charts;
+    }
+
+    public BugStatustics getBugStatustics(String projectId) {
+        TestPlanExample example = new TestPlanExample();
+        example.createCriteria().andProjectIdEqualTo(projectId);
+        List<TestPlan> plans = testPlanMapper.selectByExample(example);
+        List<TestPlanBugCount> list = new ArrayList<>();
+        BugStatustics bugStatustics = new BugStatustics();
+        int index = 1;
+        for (TestPlan plan : plans) {
+            TestPlanBugCount testPlanBug = new TestPlanBugCount();
+            testPlanBug.setIndex(index++);
+            testPlanBug.setPlanName(plan.getName());
+            testPlanBug.setCreatTime(plan.getCreateTime());
+            testPlanBug.setStatus(plan.getStatus());
+            testPlanBug.setCaseSize(getPlanCaseSize(plan.getId()));
+            testPlanBug.setBugSize(getPlanBugSize(plan.getId()));
+            testPlanBug.setPassRage(getPlanPassRage(plan.getId()));
+            list.add(testPlanBug);
+        }
+
+        // todo
+        bugStatustics.setList(list);
+        bugStatustics.setRage("1");
+        bugStatustics.setBugTotalSize(2);
+        return bugStatustics;
+    }
+
+    private int getPlanCaseSize(String planId) {
+        TestPlanTestCaseExample testPlanTestCaseExample = new TestPlanTestCaseExample();
+        testPlanTestCaseExample.createCriteria().andPlanIdEqualTo(planId);
+        List<TestPlanTestCase> testPlanTestCases = testPlanTestCaseMapper.selectByExample(testPlanTestCaseExample);
+
+        TestPlanApiCaseExample testPlanApiCaseExample = new TestPlanApiCaseExample();
+        testPlanApiCaseExample.createCriteria().andTestPlanIdEqualTo(planId);
+        List<TestPlanApiCase> testPlanApiCases = testPlanApiCaseMapper.selectByExample(testPlanApiCaseExample);
+
+        TestPlanLoadCaseExample example = new TestPlanLoadCaseExample();
+        example.createCriteria().andTestPlanIdEqualTo(planId);
+        List<TestPlanLoadCase> testPlanLoadCases = testPlanLoadCaseMapper.selectByExample(example);
+
+        TestPlanApiScenarioExample testPlanApiScenarioExample = new TestPlanApiScenarioExample();
+        testPlanApiCaseExample.createCriteria().andTestPlanIdEqualTo(planId);
+        List<TestPlanApiScenario> testPlanApiScenarios = testPlanApiScenarioMapper.selectByExample(testPlanApiScenarioExample);
+
+
+        return testPlanTestCases.size() + testPlanApiCases.size() + testPlanLoadCases.size() + testPlanApiScenarios.size();
+
+    }
+
+    private int getPlanBugSize(String planId) {
+        return 1;
+    }
+
+    private String getPlanPassRage(String planId) {
+        return "10%";
+    }
 }
--- a/frontend/src/business/components/track/home/TrackHome.vue
+++ b/frontend/src/business/components/track/home/TrackHome.vue
@ -34,13 +34,35 @@
        </el-col>
        <el-col :span="6">
          <div class="square">
-            <relevance-case-card class="track-card"/>
+            <relevance-case-card :relevance-count-data="relevanceCountData" class="track-card"/>
          </div>
        </el-col>
        <el-col :span="12">
-          <div class="square">3</div>
+          <div class="square">
+            <case-maintenance :case-option="caseOption" class="track-card"/>
+          </div>
        </el-col>
      </el-row>
+
+      <el-row :gutter="10">
+        <el-col :span="12">
+          <bug-count-card class="track-card"/>
+        </el-col>
+        <el-col :span="12">
+          <ms-failure-test-case-list class="track-card"/>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="10">
+        <el-col :span="12">
+          <review-list class="track-card"/>
+        </el-col>
+        <el-col :span="12">
+          <ms-running-task-list class="track-card"/>
+        </el-col>
+      </el-row>
+
+
    </ms-main-container>
  </ms-container>
 </template>
@ -52,20 +74,34 @@ import MsContainer from "@/business/components/common/components/MsContainer";
 import CaseCountCard from "@/business/components/track/home/components/CaseCountCard";
 import RelevanceCaseCard from "@/business/components/track/home/components/RelevanceCaseCard";
 import {getCurrentProjectID} from "@/common/js/utils";
+import CaseMaintenance from "@/business/components/track/home/components/CaseMaintenance";
+import {COUNT_NUMBER, COUNT_NUMBER_SHALLOW} from "@/common/js/constants";
+import BugCountCard from "@/business/components/track/home/components/BugCountCard";
+import ReviewList from "@/business/components/track/home/components/ReviewList";
+import MsRunningTaskList from "@/business/components/api/homepage/components/RunningTaskList";
+import MsFailureTestCaseList from "@/business/components/api/homepage/components/FailureTestCaseList";

+require('echarts/lib/component/legend');
 export default {
  name: "TrackHome",
  components: {
+    ReviewList,
+    BugCountCard,
    RelevanceCaseCard,
    CaseCountCard,
    MsMainContainer,
-    MsContainer
+    MsContainer,
+    CaseMaintenance,
+    MsRunningTaskList,
+    MsFailureTestCaseList
  },
  data() {
    return {
      tipsType: "1",
      result: {},
-      trackCountData: {}
+      trackCountData: {},
+      relevanceCountData: {},
+      caseOption: {}
    }
  },
  activated() {
@ -79,9 +115,76 @@ export default {
    },
    init() {
      let selectProjectId = getCurrentProjectID();
+
      this.$get("/track/count/" + selectProjectId, response => {
        this.trackCountData = response.data;
      });
+
+      this.$get("/track/relevance/count/" + selectProjectId, response => {
+        this.relevanceCountData = response.data;
+      });
+
+      this.$get("/track/case/bar/" + selectProjectId, response => {
+        let data = response.data;
+        this.setBarOption(data);
+      })
+    },
+    setBarOption(data) {
+      let xAxis = [];
+      data.map(d => {
+        if (!xAxis.includes(d.xAxis)) {
+          xAxis.push(d.xAxis);
+        }
+      });
+      let yAxis1 = data.filter(d => d.groupName === 'FUNCTIONCASE').map(d => d.yAxis);
+      let yAxis2 = data.filter(d => d.groupName === 'RELEVANCECASE').map(d => d.yAxis);
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxis
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          data: ["功能用例数", "关联用例数"],
+          orient: 'vertical',
+          right: '80',
+        },
+        series: [{
+          name: "功能用例数",
+          data: yAxis1,
+          type: 'bar',
+          itemStyle: {
+            normal: {
+              color: COUNT_NUMBER
+            }
+          }
+        },
+          {
+            name: "关联用例数",
+            data: yAxis2,
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                color: COUNT_NUMBER_SHALLOW
+              }
+            }
+          }]
+      };
+      this.caseOption = option;
    }

  }
@ -90,13 +193,11 @@ export default {

 <style scoped>
 .square {
-  background-color: #ecf0f3;
  width: 100%;
  height: 400px;
 }

 .rectangle {
-  background-color: #e7e5e5;
  width: 100%;
  height: 400px;
 }
--- a/frontend/src/business/components/track/home/components/BugCountCard.vue
+++ b/frontend/src/business/components/track/home/components/BugCountCard.vue
@ -0,0 +1,122 @@
+<template>
+  <el-card class="table-card" v-loading="result.loading" body-style="padding:10px;">
+    <div slot="header">
+      <span class="title">
+        遗留缺陷统计
+      </span>
+    </div>
+    <el-container>
+      <el-aside width="150px">
+        <div class="main-number-show">
+          <span class="count-number">
+            {{ bugTotalSize }}
+          </span>
+          <span style="color: #6C317C;">
+            {{ $t('api_test.home_page.unit_of_measurement') }}
+          </span>
+          <div>
+            占比:
+            <el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">{{ rage }}
+            </el-link>
+          </div>
+        </div>
+      </el-aside>
+      <el-table border :data="tableData" class="adjust-table table-content" height="300">
+        <el-table-column prop="index" label="序号"
+                         width="100" show-overflow-tooltip/>
+        <el-table-column prop="planName" label="测试计划名称"
+                         width="130" show-overflow-tooltip/>
+        <el-table-column prop="createTime" :label="$t('commons.create_time')" width="130">
+          <template v-slot:default="scope">
+            <span>{{ scope.row.createTime | timestampFormatDate }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="status"
+          column-key="status"
+          :label="$t('test_track.plan.plan_status')"
+          show-overflow-tooltip>
+          <template v-slot:default="scope">
+          <span @click.stop="clickt = 'stop'">
+            <plan-status-table-item :value="scope.row.status"/>
+          </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="caseSize" label="用例数"
+                         width="80" show-overflow-tooltip/>
+        <el-table-column prop="bugSize" label="缺陷数"
+                         width="80" show-overflow-tooltip/>
+        <el-table-column prop="passRage" label="通过率"
+                         width="80" show-overflow-tooltip/>
+      </el-table>
+    </el-container>
+  </el-card>
+</template>
+
+<script>
+import {getCurrentProjectID} from "@/common/js/utils";
+import PlanStatusTableItem from "@/business/components/track/common/tableItems/plan/PlanStatusTableItem";
+
+export default {
+  name: "BugCountCard",
+  components: {
+    PlanStatusTableItem
+  },
+  data() {
+    return {
+      tableData: [],
+      result: {},
+      bugTotalSize: 0,
+      rage: '0%'
+    }
+  },
+  methods: {
+    init() {
+      this.result = this.$get("/track/bug/count/" + getCurrentProjectID(), res => {
+        let data = res.data;
+        this.tableData = data.list;
+        this.bugTotalSize = data.bugTotalSize;
+        this.rage = data.rage;
+      })
+    }
+  },
+  created() {
+    this.init()
+  },
+  activated() {
+    this.init()
+  }
+}
+</script>
+
+<style scoped>
+
+.el-card /deep/ .el-card__header {
+  border-bottom: 0px solid #EBEEF5;
+}
+
+.el-aside {
+  line-height: 100px;
+  text-align: center;
+}
+
+.count-number {
+  font-family: 'ArialMT', 'Arial', sans-serif;
+  font-size: 33px;
+  color: var(--count_number);
+}
+
+.main-number-show {
+  width: 100px;
+  height: 100px;
+  border-style: solid;
+  border-width: 7px;
+  border-color: var(--count_number_shallow);
+  border-radius: 50%;
+
+}
+
+.count-number-show {
+  margin: 20px auto;
+}
+</style>
--- a/frontend/src/business/components/track/home/components/CaseCountCard.vue
+++ b/frontend/src/business/components/track/home/components/CaseCountCard.vue
@ -68,7 +68,7 @@
          <el-aside width="60%" class="count-number-show" style="margin-bottom: 0px;margin-top: 0px">
            <el-container>
              <el-aside width="30%">
-                {{$t('api_test.home_page.detail_card.rate.completion')+":"}}
+                评审率:
              </el-aside>
              <el-main style="padding: 0px 0px 0px 0px; line-height: 100px; text-align: center;">
                <span class="count-number">
--- a/frontend/src/business/components/track/home/components/CaseMaintenance.vue
+++ b/frontend/src/business/components/track/home/components/CaseMaintenance.vue
@ -0,0 +1,41 @@
+<template>
+  <el-card class="table-card" v-loading="result.loading" body-style="padding:10px;">
+    <div slot="header">
+      <span class="title">
+        用例维护人分布
+      </span>
+    </div>
+    <el-container>
+      <ms-chart ref="chart1" :options="caseOption" :autoresize="true" style="width: 100%;height: 340px"></ms-chart>
+    </el-container>
+  </el-card>
+</template>
+
+<script>
+import MsChart from "@/business/components/common/chart/MsChart";
+
+export default {
+  name: "CaseMaintenance",
+  components: {MsChart},
+  props: {
+    caseOption: {}
+  },
+  data() {
+    return {
+      result: {}
+    }
+  }
+}
+</script>
+
+<style scoped>
+.no-shadow-card{
+  -webkit-box-shadow: 0 0px 0px 0 rgba(0,0,0,.1);
+  box-shadow: 0 0px 0px 0 rgba(0,0,0,.1);
+}
+
+.el-card /deep/ .el-card__header {
+  border-bottom: 0px solid #EBEEF5;
+  padding-bottom: 0px;
+}
+</style>
--- a/frontend/src/business/components/track/home/components/RelevanceCaseCard.vue
+++ b/frontend/src/business/components/track/home/components/RelevanceCaseCard.vue
@ -2,7 +2,7 @@
  <el-card class="table-card" v-loading="result.loading" body-style="padding:10px;">
    <div slot="header" >
      <span class="title">
-        用例数量统计
+        关联用例数量统计
      </span>
    </div>

@ -10,7 +10,7 @@
      <el-aside width="120px">
        <div class="main-number-show">
          <span class="count-number">
-            {{caseCountData}}
+            {{relevanceCountData.allRelevanceCaseCount}}
          </span>
          <span style="color: #6C317C;">
            {{$t('api_test.home_page.unit_of_measurement')}}
@ -18,34 +18,17 @@
        </div>
      </el-aside>
      <el-main style="padding-left: 0px;padding-right: 0px;">
-        <div style="width: 200px;margin:0 auto">
+        <div style="width: 300px;margin:0 auto">

-          <el-row align="center" class="hidden-lg-and-down">
-            <el-col :span="6" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
-              <div class="count-info-div" v-html="1"></div>
+          <el-row align="center">
+            <el-col :span="6" style="width:90px;padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
+              <div class="count-info-div" v-html="relevanceCountData.apiCaseCountStr"></div>
            </el-col>
-            <el-col :span="6" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
-              <div class="count-info-div" v-html="2"></div>
+            <el-col :span="6" style="width:90px;padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
+              <div class="count-info-div" v-html="relevanceCountData.scenarioCaseStr"></div>
            </el-col>
-            <el-col :span="6" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
-              <div class="count-info-div" v-html="3"></div>
-            </el-col>
-            <el-col :span="6" style="padding: 5px;">
-              <div class="count-info-div" v-html="4"></div>
-            </el-col>
-          </el-row>
-          <el-row align="right" style="margin-left: 20px" class="hidden-xl-only">
-            <el-col :span="6" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
-              <div class="count-info-div" v-html="5"></div>
-            </el-col>
-            <el-col :span="6" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
-              <div class="count-info-div" v-html="6"></div>
-            </el-col>
-            <el-col :span="6" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
-              <div class="count-info-div" v-html="7"></div>
-            </el-col>
-            <el-col :span="6" style="padding: 5px;">
-              <div class="count-info-div" v-html="8"></div>
+            <el-col :span="6" style="width:90px;padding: 5px;">
+              <div class="count-info-div" v-html="relevanceCountData.performanceCaseCountStr"></div>
            </el-col>
          </el-row>
        </div>
@ -57,7 +40,7 @@
        <el-row>
          <el-col>
            {{$t('api_test.home_page.api_details_card.this_week_add')}}
-            <el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">{{caseCountData}}
+            <el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">{{relevanceCountData.thisWeekAddedCount}}
            </el-link>
            {{$t('api_test.home_page.unit_of_measurement')}}
          </el-col>
@ -68,11 +51,11 @@
          <el-aside width="60%" class="count-number-show" style="margin-bottom: 0px;margin-top: 0px">
            <el-container>
              <el-aside width="30%">
-                {{$t('api_test.home_page.detail_card.rate.completion')+":"}}
+                覆盖率:
              </el-aside>
              <el-main style="padding: 0px 0px 0px 0px; line-height: 100px; text-align: center;">
                <span class="count-number">
-                {{caseCountData}}
+                {{relevanceCountData.coverageRage}}
              </span>
              </el-main>
            </el-container>
@ -83,28 +66,19 @@
                <el-row>
                  <el-col>
                    <span class="default-property">
-                      {{$t('api_test.home_page.detail_card.running')}}
+                      未覆盖
                      {{"\xa0\xa0"}}
                      <el-link type="info" @click="redirectPage('Underway')" target="_blank" style="color: #000000">
-                        {{caseCountData}}
-                      </el-link>
-                    </span>
-                  </el-col>
-                  <el-col style="margin-top: 5px;">
-                    <span class="default-property">
-                      {{$t('api_test.home_page.detail_card.not_started')}}
-                      {{"\xa0\xa0"}}
-                      <el-link type="info" @click="redirectPage('Prepare')" target="_blank" style="color: #000000">
-                        {{caseCountData}}
+                        {{relevanceCountData.uncoverageCount}}
                      </el-link>
                    </span>
                  </el-col>
                  <el-col style="margin-top: 5px;">
                    <span class="main-property">
-                      {{$t('api_test.home_page.detail_card.finished')}}
+                      已覆盖
                      {{"\xa0\xa0"}}
-                      <el-link type="info" @click="redirectPage('Completed')" target="_blank" style="color: #000000">
-                        {{caseCountData}}
+                      <el-link type="info" @click="redirectPage('Prepare')" target="_blank" style="color: #000000">
+                        {{relevanceCountData.coverageCount}}
                      </el-link>
                    </span>
                  </el-col>
@ -122,7 +96,7 @@
 export default {
  name: "RelevanceCaseCard",
  props:{
-    caseCountData:{},
+    relevanceCountData:{},
  },
  data() {
    return {
--- a/frontend/src/business/components/track/home/components/ReviewList.vue
+++ b/frontend/src/business/components/track/home/components/ReviewList.vue
@ -1,14 +1,14 @@
 <template>
-  <home-base-component :title="$t('test_track.review.my_review')" v-loading>
-    <template slot="header-area">
-      <div style="float: right">
-        <ms-table-button :is-tester-permission="true" v-if="!showMyCreator" icon="el-icon-view"
-                         :content="$t('test_track.review.my_create')" @click="searchMyCreator"/>
-        <ms-table-button :is-tester-permission="true" v-if="showMyCreator" icon="el-icon-view"
-                         :content="$t('test_track.review.reviewed_by_me')" @click="searchMyCreator"/>
-      </div>
-
-    </template>
+  <el-card class="table-card" v-loading="result.loading" body-style="padding:10px;">
+    <div slot="header">
+      <span class="title">
+        遗留缺陷统计
+      </span>
+      <ms-table-button :is-tester-permission="true" v-if="!showMyCreator" icon="el-icon-view"
+                       :content="$t('test_track.review.my_create')" @click="searchMyCreator" style="float: right"/>
+      <ms-table-button :is-tester-permission="true" v-if="showMyCreator" icon="el-icon-view"
+                       :content="$t('test_track.review.reviewed_by_me')" @click="searchMyCreator" style="float: right"/>
+    </div>
    <el-table
      class="adjust-table"
      border
@ -60,7 +60,7 @@

    </el-table>

-  </home-base-component>
+  </el-card>
 </template>

 <script>
@ -120,5 +120,7 @@ export default {
 </script>

 <style scoped>
-
+.el-card /deep/ .el-card__header {
+  border-bottom: 0px solid #EBEEF5;
+}
 </style>