style(测试跟踪): 测试跟踪首页样式变动

--story=1007743 --user=宋天阳接口测试首页数据统计优化 https://www.tapd.cn/55049933/s/1193736
2022-07-04 16:09:28 +08:00 · 2022-07-04 16:09:28 +08:00 · 2888fb2775
parent 1e92abad39
commit 2888fb2775
18 changed files with 432 additions and 453 deletions
--- a/backend/src/main/java/io/metersphere/api/controller/APITestController.java
+++ b/backend/src/main/java/io/metersphere/api/controller/APITestController.java
@ -375,10 +375,10 @@ public class APITestController {
        return apiCountResult;
    }

-    @GetMapping("/faliureCaseAboutTestPlan/{projectId}/{limitNumber}")
-    public List<ExecutedCaseInfoDTO> faliureCaseAboutTestPlan(@PathVariable String projectId, @PathVariable int limitNumber) {
+    @GetMapping("/faliureCaseAboutTestPlan/{projectId}/{selectFunctionCase}/{limitNumber}")
+    public List<ExecutedCaseInfoDTO> faliureCaseAboutTestPlan(@PathVariable String projectId, @PathVariable boolean selectFunctionCase, @PathVariable int limitNumber) {

-        List<ExecutedCaseInfoResult> selectDataList = apiDefinitionExecResultService.findFailureCaseInfoByProjectIDAndLimitNumberInSevenDays(projectId, limitNumber);
+        List<ExecutedCaseInfoResult> selectDataList = apiDefinitionExecResultService.findFailureCaseInfoByProjectIDAndLimitNumberInSevenDays(projectId, selectFunctionCase, limitNumber);

        List<ExecutedCaseInfoDTO> returnList = new ArrayList<>(limitNumber);

--- a/backend/src/main/java/io/metersphere/api/service/ApiDefinitionExecResultService.java
+++ b/backend/src/main/java/io/metersphere/api/service/ApiDefinitionExecResultService.java
@ -401,7 +401,7 @@ public class ApiDefinitionExecResultService {

    }

-    public List<ExecutedCaseInfoResult> findFailureCaseInfoByProjectIDAndLimitNumberInSevenDays(String projectId, int limitNumber) {
+    public List<ExecutedCaseInfoResult> findFailureCaseInfoByProjectIDAndLimitNumberInSevenDays(String projectId, boolean selectFuntionCase, int limitNumber) {

        //获取7天之前的日期
        Date startDay = DateUtils.dateSum(new Date(), -6);
@ -415,7 +415,7 @@ public class ApiDefinitionExecResultService {
        if (startTime == null) {
            return new ArrayList<>(0);
        } else {
-            List<ExecutedCaseInfoResult> list = extApiDefinitionExecResultMapper.findFaliureCaseInTestPlanByProjectIDAndExecuteTimeAndLimitNumber(projectId, startTime.getTime());
+            List<ExecutedCaseInfoResult> list = extApiDefinitionExecResultMapper.findFaliureCaseInTestPlanByProjectIDAndExecuteTimeAndLimitNumber(projectId, selectFuntionCase, startTime.getTime());

            List<ExecutedCaseInfoResult> returnList = new ArrayList<>(limitNumber);

@ -423,18 +423,6 @@ public class ApiDefinitionExecResultService {
                if (i < limitNumber) {
                    //开始遍历查询TestPlan信息 --> 提供前台做超链接
                    ExecutedCaseInfoResult item = list.get(i);
-
-//                    QueryTestPlanRequest planRequest = new QueryTestPlanRequest();
-//                    planRequest.setProjectId(projectId);
-//                    if ("scenario".equals(item.getCaseType())) {
-//                        planRequest.setScenarioId(item.getTestCaseID());
-//                    } else if ("apiCase".equals(item.getCaseType())) {
-//                        planRequest.setApiId(item.getTestCaseID());
-//                    } else if ("load".equals(item.getCaseType())) {
-//                        planRequest.setLoadId(item.getTestCaseID());
-//                    }
-//                    List<TestPlanDTO> dtoList = extTestPlanMapper.selectTestPlanByRelevancy(planRequest);
-//                    item.setTestPlanDTOList(dtoList);
                    returnList.add(item);
                } else {
                    break;
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionExecResultMapper.java
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionExecResultMapper.java
@ -30,7 +30,7 @@ public interface ExtApiDefinitionExecResultMapper {

    List<ExecutedCaseInfoResult> findFaliureCaseInfoByProjectIDAndExecuteTimeAndLimitNumber(@Param("projectId") String projectId, @Param("startTimestamp") long startTimestamp);

-    List<ExecutedCaseInfoResult> findFaliureCaseInTestPlanByProjectIDAndExecuteTimeAndLimitNumber(@Param("projectId") String projectId, @Param("startTimestamp") long startTimestamp);
+    List<ExecutedCaseInfoResult> findFaliureCaseInTestPlanByProjectIDAndExecuteTimeAndLimitNumber(@Param("projectId") String projectId, @Param("selectFunctionCase") boolean selectFunctionCase, @Param("startTimestamp") long startTimestamp);

    String selectExecResult(String resourceId);

--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionExecResultMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionExecResultMapper.xml
@ -49,59 +49,92 @@
    <select id="findFaliureCaseInTestPlanByProjectIDAndExecuteTimeAndLimitNumber"
            resultType="io.metersphere.api.dto.datacount.ExecutedCaseInfoResult">
        SELECT *
-        FROM (SELECT testCase.testPlanCaseID            AS testPlanCaseID,
-                     testCase.id                        AS id,
-                     testCase.testCaseName              AS caseName,
-                     testCase.testPlanName              AS testPlan,
-                     testCase.testPlanId                AS testPlanId,
-                     caseErrorCountData.dataCountNumber AS failureTimes,
-                     'apiCase'                          AS caseType
-              FROM (SELECT testPlanCase.id AS testPlanCaseID,
-                           apiCase.id      AS id,
-                           apiCase.`name`  AS testCaseName,
-                           testPlan.id     AS testPlanId,
-                           testPlan.`name` AS testPlanName
-                    FROM api_test_case apiCase
-                             INNER JOIN test_plan_api_case testPlanCase ON testPlanCase.api_case_id = apiCase.id
-                             INNER JOIN test_plan testPlan ON testPlan.id = testPlanCase.test_plan_id
-                    WHERE (
-                                  apiCase.`status` IS NULL
-                                  OR apiCase.`status` != 'Trash'
-			AND apiCase.project_id = #{projectId})) testCase
-                       INNER JOIN (SELECT executionInfo.source_id AS sourceId,
-                                          COUNT(executionInfo.id) AS dataCountNumber
-                                   FROM api_case_execution_info executionInfo
-                                            INNER JOIN test_plan_api_case testPlanCase
-                                                       ON executionInfo.source_id = testPlanCase.id
-                                   WHERE executionInfo.`result` = 'error'
-                                     AND executionInfo.create_time > #{startTimestamp}
-                                   GROUP BY source_id) caseErrorCountData
-                                  ON caseErrorCountData.sourceId = testCase.testPlanCaseID
-              UNION
+        FROM (
+        SELECT testCase.testPlanCaseID AS testPlanCaseID,
+        testCase.id AS id,
+        testCase.testCaseName AS caseName,
+        testCase.testPlanName AS testPlan,
+        testCase.testPlanId AS testPlanId,
+        caseErrorCountData.dataCountNumber AS failureTimes,
+        'apiCase' AS caseType
+        FROM (SELECT testPlanCase.id AS testPlanCaseID,
+        apiCase.id AS id,
+        apiCase.`name` AS testCaseName,
+        testPlan.id AS testPlanId,
+        testPlan.`name` AS testPlanName
+        FROM api_test_case apiCase
+        INNER JOIN test_plan_api_case testPlanCase ON testPlanCase.api_case_id = apiCase.id
+        INNER JOIN test_plan testPlan ON testPlan.id = testPlanCase.test_plan_id
+        WHERE (
+        apiCase.`status` IS NULL
+        OR apiCase.`status` != 'Trash'
+        AND apiCase.project_id = #{projectId})) testCase
+        INNER JOIN (SELECT executionInfo.source_id AS sourceId,
+        COUNT(executionInfo.id) AS dataCountNumber
+        FROM api_case_execution_info executionInfo
+        INNER JOIN test_plan_api_case testPlanCase
+        ON executionInfo.source_id = testPlanCase.id
+        WHERE executionInfo.`result` = 'error'
+        AND executionInfo.create_time > #{startTimestamp}
+        GROUP BY source_id) caseErrorCountData
+        ON caseErrorCountData.sourceId = testCase.testPlanCaseID
+        UNION

-              SELECT scene.id                AS testCaseID,
-                     scene.id                AS id,
-                     scene.`name`            AS caseName,
-                     apiScene.testPlanName   AS testPlan,
-                     apiScene.testPlanId     AS testPlanId,
-                     count(executionInfo.id) AS failureTimes,
-                     'scenario'              AS caseType
-              FROM scenario_execution_info executionInfo
-                       INNER JOIN (SELECT testPlanScenario.id,
-                                          testPlanScenario.api_scenario_id,
-                                          testPlan.id     AS testPlanId,
-                                          testPlan.`name` AS testPlanName
-                                   FROM test_plan_api_scenario testPlanScenario
-                                            INNER JOIN test_plan testPlan ON testPlan.id = testPlanScenario.test_plan_id) apiScene
-                                  ON apiScene.id = executionInfo.source_id
-                       INNER JOIN api_scenario scene ON scene.id = apiScene.api_scenario_id
+        SELECT scene.id AS testCaseID,
+        scene.id AS id,
+        scene.`name` AS caseName,
+        apiScene.testPlanName AS testPlan,
+        apiScene.testPlanId AS testPlanId,
+        count(executionInfo.id) AS failureTimes,
+        'scenario' AS caseType
+        FROM scenario_execution_info executionInfo
+        INNER JOIN (SELECT testPlanScenario.id,
+        testPlanScenario.api_scenario_id,
+        testPlan.id AS testPlanId,
+        testPlan.`name` AS testPlanName
+        FROM test_plan_api_scenario testPlanScenario
+        INNER JOIN test_plan testPlan ON testPlan.id = testPlanScenario.test_plan_id) apiScene
+        ON apiScene.id = executionInfo.source_id
+        INNER JOIN api_scenario scene ON scene.id = apiScene.api_scenario_id

-              WHERE scene.project_id = #{projectId}
-                AND scene.`status` != 'Trash'
-		AND ( executionInfo.result = 'Error' OR executionInfo.result = 'Fail' )
-		AND executionInfo.create_time >= #{startTimestamp}
-              GROUP BY
-                  scene.id) showTable
+        WHERE scene.project_id = #{projectId}
+        AND scene.`status` != 'Trash'
+        AND ( executionInfo.result = 'Error' OR executionInfo.result = 'Fail' )
+        AND executionInfo.create_time >= #{startTimestamp}
+        GROUP BY
+        scene.id
+        <if test="selectFunctionCase == true">
+            UNION
+            SELECT
+            testCase.id AS testCaseID,
+            testCase.id AS id,
+            testCase.`name` AS caseName,
+            testCasePlan.testPlanName AS testPlan,
+            testCasePlan.testPlanId AS testPlanId,
+            count( executionInfo.id ) AS failureTimes,
+            'testCase' AS caseType
+            FROM
+            function_case_execution_info executionInfo
+            INNER JOIN (
+            SELECT
+            testPlanTestCase.id,
+            testPlanTestCase.case_id,
+            testPlan.id AS testPlanId,
+            testPlan.`name` AS testPlanName
+            FROM
+            test_plan_test_case testPlanTestCase
+            INNER JOIN test_plan testPlan ON testPlan.id = testPlanTestCase.plan_id
+            ) testCasePlan ON testCasePlan.id = executionInfo.source_id
+            INNER JOIN test_case testCase ON testCase.id = testCasePlan.case_id
+            WHERE
+            testCase.project_id = #{projectId}
+            AND testCase.`status` != 'Trash'
+            AND ( executionInfo.result = 'Failure' )
+            AND executionInfo.create_time >= #{startTimestamp}
+            GROUP BY
+            testCase.id
+        </if>
+        ) showTable
        ORDER BY showTable.failureTimes DESC
    </select>
    <select id="findFaliureCaseInfoByProjectIDAndExecuteTimeAndLimitNumber"
--- a/backend/src/main/java/io/metersphere/track/service/TestPlanTestCaseService.java
+++ b/backend/src/main/java/io/metersphere/track/service/TestPlanTestCaseService.java
@ -148,13 +148,8 @@ public class TestPlanTestCaseService {
        if (StringUtils.equals(TestPlanTestCaseStatus.Prepare.name(), testPlanTestCase.getStatus())) {
            testPlanTestCase.setStatus(TestPlanTestCaseStatus.Underway.name());
        } else {
-            if (StringUtils.isEmpty(testPlanTestCase.getCaseId())) {
-                String caseId = extTestPlanTestCaseMapper.selectCaseId(testPlanTestCase.getId());
-                functionCaseExecutionInfoService.insertExecutionInfo(caseId, testPlanTestCase.getStatus());
-            } else {
-                //记录功能用例执行信息
-                functionCaseExecutionInfoService.insertExecutionInfo(testPlanTestCase.getCaseId(), testPlanTestCase.getStatus());
-            }
+            //记录功能用例执行信息
+            functionCaseExecutionInfoService.insertExecutionInfo(testPlanTestCase.getId(), testPlanTestCase.getStatus());
        }
        testPlanTestCase.setExecutor(SessionUtils.getUser().getId());
        testPlanTestCase.setUpdateTime(System.currentTimeMillis());
--- a/frontend/src/business/components/api/homepage/components/ApiFailureTestCaseList.vue
+++ b/frontend/src/business/components/api/homepage/components/ApiFailureTestCaseList.vue
@ -24,6 +24,8 @@
                  :content="$t('api_test.home_page.failed_case_list.table_value.case_type.scene')"/>
          <ms-tag v-if="scope.row.caseType === 'load'" type="danger" effect="plain"
                  :content="$t('api_test.home_page.failed_case_list.table_value.case_type.load')"/>
+          <ms-tag v-if="scope.row.caseType === 'testCase'" effect="plain"
+                  :content="$t('api_test.home_page.failed_case_list.table_value.case_type.functional')"/>
        </template>
      </el-table-column>
      <el-table-column prop="testPlan" :label="$t('api_test.home_page.failed_case_list.table_coloum.test_plan')">
@ -67,7 +69,7 @@ export default {
  methods: {
    search() {
      if (this.projectId) {
-        this.result = this.$get("/api/faliureCaseAboutTestPlan/" + this.projectId + "/10", response => {
+        this.result = this.$get("/api/faliureCaseAboutTestPlan/" + this.projectId + "/false/10", response => {
          this.tableData = response.data;
        });
      }
--- a/frontend/src/business/components/api/homepage/components/FailureTestCaseList.vue
+++ b/frontend/src/business/components/api/homepage/components/FailureTestCaseList.vue
@ -2,16 +2,18 @@
  <el-card class="table-card" v-loading="result.loading" body-style="padding:10px;">
    <template v-slot:header>
      <span class="title">
-        {{$t('api_test.home_page.failed_case_list.title')}}
+        {{ $t('api_test.home_page.failed_case_list.title') }}
      </span>
    </template>
    <el-table border :data="tableData" class="adjust-table table-content" height="300px">
-      <el-table-column prop="sortIndex"  :label="$t('api_test.home_page.failed_case_list.table_coloum.index')" width="100" show-overflow-tooltip/>
-      <el-table-column prop="caseName"  :label="$t('api_test.home_page.failed_case_list.table_coloum.case_name')" width="150">
+      <el-table-column prop="sortIndex" :label="$t('api_test.home_page.failed_case_list.table_coloum.index')"
+                       width="100" show-overflow-tooltip/>
+      <el-table-column prop="caseName" :label="$t('api_test.home_page.failed_case_list.table_coloum.case_name')"
+                       width="150">
        <template v-slot:default="{row}">
-            <el-link type="info" @click="redirect(row.caseType,row.id)">
-              {{ row.caseName }}
-            </el-link>
+          <el-link type="info" @click="redirect(row.caseType,row.id)">
+            {{ row.caseName }}
+          </el-link>
        </template>
      </el-table-column>
      <el-table-column
@ -21,21 +23,28 @@
        width="150"
        show-overflow-tooltip>
        <template v-slot:default="scope">
-          <ms-tag v-if="scope.row.caseType === 'apiCase'" type="success" effect="plain" :content="$t('api_test.home_page.failed_case_list.table_value.case_type.api')"/>
-          <ms-tag v-if="scope.row.caseType === 'scenario'" type="warning" effect="plain" :content="$t('api_test.home_page.failed_case_list.table_value.case_type.scene')"/>
-          <ms-tag v-if="scope.row.caseType === 'load'" type="danger" effect="plain" :content="$t('api_test.home_page.failed_case_list.table_value.case_type.load')"/>
+          <ms-tag v-if="scope.row.caseType === 'apiCase'" type="success" effect="plain"
+                  :content="$t('api_test.home_page.failed_case_list.table_value.case_type.api')"/>
+          <ms-tag v-if="scope.row.caseType === 'scenario'" type="warning" effect="plain"
+                  :content="$t('api_test.home_page.failed_case_list.table_value.case_type.scene')"/>
+          <ms-tag v-if="scope.row.caseType === 'load'" type="danger" effect="plain"
+                  :content="$t('api_test.home_page.failed_case_list.table_value.case_type.load')"/>
+          <ms-tag v-if="scope.row.caseType === 'testCase'" effect="plain"
+                  :content="$t('api_test.home_page.failed_case_list.table_value.case_type.functional')"/>
        </template>
      </el-table-column>
-      <el-table-column prop="testPlan"  :label="$t('api_test.home_page.failed_case_list.table_coloum.test_plan')">
+      <el-table-column prop="testPlan" :label="$t('api_test.home_page.failed_case_list.table_coloum.test_plan')">
        <template v-slot:default="{row}">
          <div v-for="(testPlan, index) in row.testPlanDTOList" :key="index">
-            <el-link type="info" @click="redirect('testPlanEdit',testPlan.id)" v-if="testPlan.name === row.testPlan || row.caseType !== 'apiCase'">
+            <el-link type="info" @click="redirect('testPlanEdit',testPlan.id)"
+                     v-if="testPlan.name === row.testPlan || row.caseType !== 'apiCase'">
              {{ testPlan.name }};
            </el-link>
          </div>
        </template>
      </el-table-column>
-      <el-table-column prop="failureTimes"  :label="$t('api_test.home_page.failed_case_list.table_coloum.failure_times')" width="110" show-overflow-tooltip/>
+      <el-table-column prop="failureTimes" :label="$t('api_test.home_page.failed_case_list.table_coloum.failure_times')"
+                       width="110" show-overflow-tooltip/>
    </el-table>
  </el-card>
 </template>
@ -58,6 +67,9 @@ export default {
      loading: false
    }
  },
+  props: {
+    selectFunctionCase: Boolean,
+  },
  computed: {
    projectId() {
      return getCurrentProjectID();
@ -66,21 +78,21 @@ export default {
  methods: {
    search() {
      if (this.projectId) {
-        this.result = this.$get("/api/faliureCaseAboutTestPlan/"+ this.projectId +"/10", response => {
+        this.result = this.$get("/api/faliureCaseAboutTestPlan/" + this.projectId + "/" + this.selectFunctionCase + "/10", response => {
          this.tableData = response.data;
        });
      }
    },
-    redirect(pageType,param){
-      switch (pageType){
+    redirect(pageType, param) {
+      switch (pageType) {
        case "testPlanEdit":
-          this.$emit('redirectPage','testPlanEdit',null, param);
+          this.$emit('redirectPage', 'testPlanEdit', null, param);
          break;
        case "apiCase":
-          this.$emit('redirectPage','api','apiTestCase', 'single:'+param);
+          this.$emit('redirectPage', 'api', 'apiTestCase', 'single:' + param);
          break;
        case "scenario":
-          this.$emit('redirectPage','scenario','scenario', 'edit:'+param);
+          this.$emit('redirectPage', 'scenario', 'scenario', 'edit:' + param);
          break;
      }
    }
@ -99,8 +111,9 @@ export default {
 <style scoped>

 .el-table {
-  cursor:pointer;
+  cursor: pointer;
 }
+
 .el-card /deep/ .el-card__header {
  border-bottom: 0px solid #EBEEF5;
 }
--- a/frontend/src/business/components/api/homepage/components/card/ApiCaseCountCard.vue
+++ b/frontend/src/business/components/api/homepage/components/card/ApiCaseCountCard.vue
@ -52,7 +52,7 @@
    </el-container>
    <!-- 本周新增 -->
    <el-container class="detail-container">
-      <el-header style="height:20px;padding: 0px;margin-bottom: 0px;">
+      <el-header style="height:20px;padding: 0px;margin-bottom: 0px;font-size: 14px">
        <el-row>
          <el-col>
            {{ $t('api_test.home_page.test_case_details_card.this_week_add') }}
@ -65,18 +65,15 @@
      </el-header>
      <el-main style="padding:0px">
        <el-row>
-          <el-col :span="8">
+          <el-col :span="12">
            <span class="default-property">
              {{
                $t('api_test.home_page.test_case_details_card.this_week_execute', [testCaseCountData.thisWeekExecutedCount])
              }}
            </span>
          </el-col>
-          <el-col :span="8">
-            &nbsp;&nbsp;&nbsp;&nbsp;
-          </el-col>
-          <el-col :span="8">
-              <span class="main-property">
+          <el-col :span="12">
+              <span class="default-property" style="float: right">
                {{ $t('api_test.home_page.test_case_details_card.executed', [testCaseCountData.executedCount]) }}
              </span>
          </el-col>
@ -85,7 +82,7 @@
    </el-container>
    <!-- 用例通过率 -->
    <el-container class="detail-container">
-      <el-header style="height:20px;padding: 0px;margin-bottom: 5px;">
+      <el-header style="height:20px;padding: 0px;margin-bottom: 5px;font-size: 14px">
        <el-row>
          <span style="float: left">
            {{ $t('api_test.home_page.detail_card.rate.case_pase') + ":" }} &nbsp;&nbsp;
@ -106,35 +103,31 @@
          <el-col :span="6">
            <span class="default-property">
              {{ $t('api_test.home_page.detail_card.unexecute') }}
-              {{ "\xa0\xa0" }}
              <el-link class="rows-count-number" type="info" @click="redirectPage('unexecuteCount')" target="_blank">
                <b>{{ testCaseCountData.unexecuteCount }}</b>
              </el-link>
            </span>
          </el-col>
-          <el-col :span="6">
+          <el-col :span="6" class="itemIsCenter">
            <span class="default-property">
              {{ $t('api_test.home_page.detail_card.execution_failed') }}
-              {{ "\xa0\xa0" }}
              <el-link class="rows-count-number" type="info" @click="redirectPage('executionFailedCount')"
                       target="_blank">
                <b>{{ testCaseCountData.executionFailedCount }}</b>
              </el-link>
            </span>
          </el-col>
-          <el-col :span="6">
-            <span class="default-property">
+          <el-col :span="6" class="itemIsCenter">
+              <span class="default-property">
              {{ $t('error_report_library.option.name') }}
-              {{ "\xa0\xa0" }}
              <el-link class="rows-count-number" type="info" @click="redirectPage('fakeErrorCount')" target="_blank">
                <b>{{ testCaseCountData.fakeErrorCount }}</b>
              </el-link>
            </span>
          </el-col>
          <el-col :span="6">
-              <span class="main-property" style="float: left">
+              <span class="main-property" style="float: right">
                {{ $t('api_test.home_page.detail_card.execution_pass') }}
-                {{ "\xa0\xa0" }}
                <el-link class="rows-count-number" type="info" @click="redirectPage('executionPassCount')"
                         target="_blank">
                  <b>{{ testCaseCountData.executionPassCount }}</b>
@ -146,25 +139,22 @@
          <el-col :span="8">
            <span class="default-property">
              {{ $t('api_test.home_page.detail_card.unexecute') }}
-              {{ "\xa0\xa0" }}
              <el-link class="rows-count-number" type="info" @click="redirectPage('unexecuteCount')" target="_blank">
                <b>{{ testCaseCountData.unexecuteCount }}</b>
              </el-link>
            </span>
          </el-col>
-          <el-col :span="8">
+          <el-col :span="8" class="itemIsCenter">
            <span class="default-property">
              {{ $t('api_test.home_page.detail_card.execution_failed') }}
-              {{ "\xa0\xa0" }}
              <el-link class="rows-count-number" type="info" @click="redirectPage('notSuccessCount')" target="_blank">
                <b>{{ testCaseCountData.executionFailedCount + testCaseCountData.fakeErrorCount }}</b>
              </el-link>
            </span>
          </el-col>
          <el-col :span="8">
-              <span class="main-property" style="float: left">
+              <span class="main-property" style="float: right">
                {{ $t('api_test.home_page.detail_card.execution_pass') }}
-                {{ "\xa0\xa0" }}
                <el-link class="rows-count-number" type="info" @click="redirectPage('executionPassCount')"
                         target="_blank">
                  <b>{{ testCaseCountData.executionPassCount }}</b>
@ -176,7 +166,7 @@
    </el-container>
    <!-- 接口覆盖率 -->
    <el-container class="detail-container">
-      <el-header style="height:20px;padding: 0px;margin-bottom: 5px;">
+      <el-header style="height:20px;padding: 0px;margin-bottom: 5px;font-size: 14px">
        <el-row>
          <span style="float: left">
            {{ $t('api_test.home_page.detail_card.rate.interface_coverage') + ":" }}&nbsp;&nbsp;
@ -194,22 +184,17 @@
      </el-header>
      <el-main style="padding:0px">
        <el-row>
-          <el-col :span="8">
+          <el-col :span="12">
            <span class="default-property">
              {{ $t('api_test.home_page.detail_card.uncoverage') }}
-              {{ "\xa0\xa0" }}
               <el-link type="info" class="rows-count-number" @click="redirectPage('uncoverageCount')" target="_blank">
                 <b>{{ testCaseCountData.uncoverageCount }}</b>
                </el-link>
            </span>
          </el-col>
-          <el-col :span="8">
-            &nbsp;&nbsp;&nbsp;&nbsp;
-          </el-col>
-          <el-col :span="8">
-              <span class="main-property" style="float: left">
+          <el-col :span="12">
+              <span class="main-property" style="float: right">
                {{ $t('api_test.home_page.detail_card.coverage') }}
-                {{ "\xa0\xa0" }}
                <el-link class="rows-count-number" @click="redirectPage('coverageCount')" target="_blank">
                  <b>
                    {{ testCaseCountData.coverageCount }}
@ -272,7 +257,7 @@ export default {

 .rows-count-number {
  font-family: 'ArialMT', 'Arial', sans-serif;
-  font-size: 12px;
+  font-size: 14px;
  color: var(--count_number);
 }

@ -281,12 +266,12 @@ export default {
 }

 .default-property {
-  font-size: 12px;
+  font-size: 14px;
 }

 .main-property {
  color: #F39021;
-  font-size: 12px
+  font-size: 14px
 }

 .el-card /deep/ .el-card__header {
@ -305,4 +290,10 @@ export default {
  position: absolute;
  top: 0;
 }
+
+.itemIsCenter {
+  display: flex;
+  justify-content: center; /*主轴上居中*/
+  align-items: center; /*侧轴上居中*/
+}
 </style>
--- a/frontend/src/business/components/api/homepage/components/card/ApiCountCard.vue
+++ b/frontend/src/business/components/api/homepage/components/card/ApiCountCard.vue
@ -37,7 +37,7 @@

    <el-container class="detail-container">
      <!-- 本周新增 -->
-      <el-header style="height:20px;padding: 0px;margin-bottom: 0px;">
+      <el-header style="height:20px;padding: 0px;margin-bottom: 0px;font-size: 14px">
        <el-row>
          <el-col>
            {{ $t('api_test.home_page.api_details_card.this_week_add') }}
@ -57,7 +57,7 @@

    <!--   接口完成率   -->
    <el-container class="detail-container">
-      <el-header style="height:20px;padding: 0px;margin-bottom: 5px;">
+      <el-header style="height:20px;padding: 0px;margin-bottom: 5px;font-size: 14px">
        <el-row>
          <span style="float: left;">
            {{ $t('api_test.home_page.detail_card.rate.api_completion') + ":" }}&nbsp;&nbsp;
@ -78,25 +78,22 @@
          <el-col :span="8">
            <span class="default-property">
              {{ $t('api_test.home_page.detail_card.not_started') }}
-              {{ "\xa0\xa0" }}
              <el-link class="rows-count-number" type="info" @click="redirectPage('Prepare')" target="_blank">
                <b>{{ apiCountData.notStartedCount }}</b>
              </el-link>
            </span>
          </el-col>
-          <el-col :span="8">
+          <el-col :span="8" class="itemIsCenter">
            <span class="default-property">
              {{ $t('api_test.home_page.detail_card.running') }}
-              {{ "\xa0\xa0" }}
              <el-link class="rows-count-number" type="info" @click="redirectPage('Underway')" target="_blank">
                <b>{{ apiCountData.runningCount }}</b>
              </el-link>
            </span>
          </el-col>
          <el-col :span="8">
-              <span class="main-property" style="float: left">
+              <span class="main-property" style="float: right">
                {{ $t('api_test.home_page.detail_card.finished') }}
-                {{ "\xa0\xa0" }}
                <el-link class="rows-count-number" type="info" @click="redirectPage('Completed')" target="_blank">
                  <b>{{ apiCountData.finishedCount }}</b>
                </el-link>
@ -108,7 +105,7 @@

    <!--   接口覆蓋率   -->
    <el-container class="detail-container">
-      <el-header style="height:20px;padding: 0px;margin-bottom: 5px;">
+      <el-header style="height:20px;padding: 0px;margin-bottom: 5px;font-size: 14px">
        <el-row>
          <span style="float: left">
            {{ $t('api_test.home_page.detail_card.rate.interface_coverage') + ":" }}&nbsp;&nbsp;
@ -127,10 +124,9 @@
      </el-header>
      <el-main style="padding:0px">
        <el-row>
-          <el-col :span="8">
-            <span class="rows-count-number">
+          <el-col :span="12">
+            <span class="default-property">
              {{ $t('api_test.home_page.detail_card.uncoverage') }}
-              {{ "\xa0\xa0" }}
              <el-link class="rows-count-number" type="info" @click="redirectPage('notCoverate')" target="_blank">
                <b>
                {{ apiCoverage.notCoverate }}
@ -138,13 +134,9 @@
              </el-link>
            </span>
          </el-col>
-          <el-col :span="8">
-            &nbsp;&nbsp;&nbsp;&nbsp;
-          </el-col>
-          <el-col :span="8">
-              <span class="main-property" style="float: left">
+          <el-col :span="12">
+              <span class="main-property" style="float: right">
                {{ $t('api_test.home_page.detail_card.coverage') }}
-                {{ "\xa0\xa0" }}
                <el-link class="rows-count-number" @click="redirectPage('coverate')" target="_blank">
                  <b>
                  {{ apiCoverage.coverate }}
@ -192,7 +184,7 @@ export default {

 .rows-count-number {
  font-family: 'ArialMT', 'Arial', sans-serif;
-  font-size: 12px;
+  font-size: 14px;
  color: var(--count_number);
 }

@ -201,12 +193,12 @@ export default {
 }

 .default-property {
-  font-size: 12px;
+  font-size: 14px;
 }

 .main-property {
  color: #F39021;
-  font-size: 12px
+  font-size: 14px
 }

 .el-card /deep/ .el-card__header {
@ -225,4 +217,10 @@ export default {
  position: absolute;
  top: 0;
 }
+
+.itemIsCenter {
+  display: flex;
+  justify-content: center; /*主轴上居中*/
+  align-items: center; /*侧轴上居中*/
+}
 </style>
--- a/frontend/src/business/components/api/homepage/components/card/ScenarioCountCard.vue
+++ b/frontend/src/business/components/api/homepage/components/card/ScenarioCountCard.vue
@ -15,7 +15,7 @@
      <el-main style="padding-left: 0px;padding-right: 0px; margin-right: 5px">
        <div style="width: 185px; float:right;margin:0 auto">
          <el-row align="right">
-            <span style="text-align: right;display:block;">
+            <span style="text-align: right;display:block;margin-top: 4px">
            {{
                $t('api_test.home_page.test_scene_details_card.this_week_execute', [sceneCountData.thisWeekExecutedCount])
              }}
@ -25,7 +25,7 @@
            &nbsp;
          </el-row>
          <el-row align="right">
-            <span style="text-align: right;display:block;">
+            <span style="text-align: right;display:block;margin-bottom: 4px;">
            {{ $t('api_test.home_page.test_scene_details_card.executed', [sceneCountData.executedCount]) }}
            </span>
          </el-row>
@ -35,7 +35,7 @@

    <el-container class="detail-container">
      <!-- 本周新增 -->
-      <el-header style="height:20px;padding: 0px;margin-bottom: 0px;">
+      <el-header style="height:20px;padding: 0px;margin-bottom: 0px;font-size: 14px">
        <el-row>
          <el-col>
            {{ $t('api_test.home_page.api_details_card.this_week_add') }}
@ -55,7 +55,7 @@

    <!-- 场景通过率 -->
    <el-container class="detail-container">
-      <el-header style="height:20px;padding: 0px;margin-bottom: 5px;">
+      <el-header style="height:20px;padding: 0px;margin-bottom: 5px;font-size: 14px">
        <el-row>
          <span style="float: left">
            {{ $t('api_test.home_page.detail_card.rate.scenario_pase') + ":" }}&nbsp;&nbsp;
@ -74,18 +74,16 @@
      <el-main style="padding:0px">
        <el-row v-if="this.isXpack">
          <el-col :span="6">
-            <span class="rows-count-number">
+            <span class="default-property">
              {{ $t('api_test.home_page.detail_card.unexecute') }}
-              {{ "\xa0\xa0" }}
               <el-link type="info" @click="redirectPage('unexecuteCount')" target="_blank" style="color: #000000">
                 <b>{{ sceneCountData.unexecuteCount }}</b>
                </el-link>
            </span>
          </el-col>
-          <el-col :span="6">
-            <span class="rows-count-number" style="float: left">
+          <el-col :span="6" class="itemIsCenter">
+            <span class="default-property" style="float: left">
                {{ $t('api_test.home_page.detail_card.execution_failed') }}
-                {{ "\xa0\xa0" }}
                <el-link class="rows-count-number" @click="redirectPage('executionFailedCount')" target="_blank">
                  <b>
                    {{ sceneCountData.executionFailedCount }}
@ -93,10 +91,9 @@
                </el-link>
              </span>
          </el-col>
-          <el-col :span="6">
-            <span class="rows-count-number" style="float: left">
+          <el-col :span="6" class="itemIsCenter">
+            <span class="default-property" style="float: left">
                {{ $t('error_report_library.option.name') }}
-                {{ "\xa0\xa0" }}
                <el-link class="rows-count-number" @click="redirectPage('fakeErrorCount')" target="_blank">
                  <b>
                    {{ sceneCountData.fakeErrorCount }}
@ -105,9 +102,8 @@
              </span>
          </el-col>
          <el-col :span="6">
-              <span class="main-property" style="float: left">
+              <span class="main-property" style="float: right">
                {{ $t('api_test.home_page.detail_card.execution_pass') }}
-                {{ "\xa0\xa0" }}
                <el-link class="rows-count-number" @click="redirectPage('executionPassCount')" target="_blank">
                  <b>
                    {{ sceneCountData.executionPassCount }}
@ -118,18 +114,16 @@
        </el-row>
        <el-row v-else>
          <el-col :span="8">
-            <span class="rows-count-number">
+            <span class="default-property">
              {{ $t('api_test.home_page.detail_card.unexecute') }}
-              {{ "\xa0\xa0" }}
               <el-link type="info" @click="redirectPage('unexecuteCount')" target="_blank" style="color: #000000">
                 <b>{{ sceneCountData.unexecuteCount }}</b>
                </el-link>
            </span>
          </el-col>
-          <el-col :span="8">
-            <span class="rows-count-number" style="float: left">
+          <el-col :span="8" class="itemIsCenter">
+            <span class="default-property" style="float: left">
                {{ $t('api_test.home_page.detail_card.execution_failed') }}
-                {{ "\xa0\xa0" }}
                <el-link class="rows-count-number" @click="redirectPage('notSuccessCount')" target="_blank">
                  <b>
                    {{ sceneCountData.executionFailedCount + sceneCountData.fakeErrorCount }}
@ -138,9 +132,8 @@
              </span>
          </el-col>
          <el-col :span="8">
-              <span class="main-property" style="float: left">
+              <span class="main-property" style="float: right">
                {{ $t('api_test.home_page.detail_card.execution_pass') }}
-                {{ "\xa0\xa0" }}
                <el-link class="rows-count-number" @click="redirectPage('executionPassCount')" target="_blank">
                  <b>
                    {{ sceneCountData.executionPassCount }}
@ -154,7 +147,7 @@

    <!-- 场景覆盖率 -->
    <el-container class="detail-container">
-      <el-header style="height:20px;padding: 0px;margin-bottom: 5px;">
+      <el-header style="height:20px;padding: 0px;margin-bottom: 5px;font-size: 14px">
        <el-row>
          <span style="float: left">
            {{ $t('api_test.home_page.detail_card.rate.interface_coverage') + ":" }}&nbsp;&nbsp;
@ -175,22 +168,17 @@
      </el-header>
      <el-main style="padding:0px">
        <el-row>
-          <el-col :span="8">
+          <el-col :span="12">
            <span class="default-property">
              {{ $t('api_test.home_page.detail_card.uncoverage') }}
-              {{ "\xa0\xa0" }}
               <el-link type="info" class="rows-count-number" @click="redirectPage('notCoverate')" target="_blank">
                 <b>{{ scenarioCoverage.notCoverate }}</b>
                </el-link>
            </span>
          </el-col>
-          <el-col :span="8">
-            &nbsp;&nbsp;&nbsp;&nbsp;
-          </el-col>
-          <el-col :span="8">
-              <span class="main-property" style="float: left">
+          <el-col :span="12">
+              <span class="main-property" style="float: right">
                {{ $t('api_test.home_page.detail_card.coverage') }}
-                {{ "\xa0\xa0" }}
                <el-link class="rows-count-number" @click="redirectPage('coverate')" target="_blank">
                  <b>{{ scenarioCoverage.coverate }}</b>
                </el-link>
@ -245,7 +233,7 @@ export default {

 .rows-count-number {
  font-family: 'ArialMT', 'Arial', sans-serif;
-  font-size: 12px;
+  font-size: 14px;
  color: var(--count_number);
 }

@ -254,12 +242,12 @@ export default {
 }

 .default-property {
-  font-size: 12px;
+  font-size: 14px;
 }

 .main-property {
  color: #F39021;
-  font-size: 12px
+  font-size: 14px
 }

 .el-card /deep/ .el-card__header {
@ -278,4 +266,10 @@ export default {
  position: absolute;
  top: 0;
 }
+
+.itemIsCenter {
+  display: flex;
+  justify-content: center; /*主轴上居中*/
+  align-items: center; /*侧轴上居中*/
+}
 </style>
--- a/frontend/src/business/components/api/homepage/components/card/ScheduleTaskCountCard.vue
+++ b/frontend/src/business/components/api/homepage/components/card/ScheduleTaskCountCard.vue
@ -15,7 +15,7 @@
      <el-main style="padding-left: 0px;padding-right: 0px; margin-right: 5px">
        <div style="width: 185px; float:right;margin:0 auto">
          <el-row align="right">
-            <span style="text-align: right;display:block;">
+            <span style="text-align: right;display:block;margin-top: 4px">
            {{
                $t('api_test.home_page.test_scene_details_card.this_week_execute', [scheduleTaskCountData.thisWeekExecutedCount])
              }}
@ -25,7 +25,7 @@
            &nbsp;
          </el-row>
          <el-row align="right">
-            <span style="text-align: right;display:block;">
+            <span style="text-align: right;display:block;margin-bottom: 4px;">
            {{ $t('api_test.home_page.test_scene_details_card.executed', [scheduleTaskCountData.executedCount]) }}
            </span>
          </el-row>
@ -35,7 +35,7 @@

    <el-container class="detail-container">
      <!-- 本周新增 -->
-      <el-header style="height:20px;padding: 0px;margin-bottom: 0px;">
+      <el-header style="height:20px;padding: 0px;margin-bottom: 0px;font-size: 14px">
        <el-row>
          <el-col>
            {{ $t('api_test.home_page.api_details_card.this_week_add') }}
@ -55,7 +55,7 @@

    <!-- 任务成功率 -->
    <el-container class="detail-container">
-      <el-header style="height:20px;padding: 0px;margin-bottom: 5px;">
+      <el-header style="height:20px;padding: 0px;margin-bottom: 5px;font-size: 14px">
        <el-row>
          <span style="float: left">
            {{ $t('api_test.home_page.detail_card.rate.success') + ":" }}&nbsp;&nbsp;
@ -76,28 +76,23 @@
          <el-col :span="8">
            <span class="default-property">
              {{ $t('api_test.home_page.detail_card.failed') }}
-
-              {{ "\xa0\xa0" }}
               <el-link type="info" class="rows-count-number" @click="redirectPage('executionFailedCount')"
                        target="_blank">
                 <b>{{ scheduleTaskCountData.failedCount + scheduleTaskCountData.failedCount }}</b>
                </el-link>
            </span>
          </el-col>
-          <el-col :span="8">
+          <el-col :span="8" class="itemIsCenter">
            <span class="default-property">
              {{ $t('error_report_library.option.name') }}
-
-              {{ "\xa0\xa0" }}
               <el-link type="info" class="rows-count-number" @click="redirectPage('fakeErrorCount')" target="_blank">
                 <b>{{ scheduleTaskCountData.fakeErrorCount }}</b>
                </el-link>
            </span>
          </el-col>
          <el-col :span="8">
-              <span class="main-property" style="float: left">
+              <span class="main-property" style="float: right">
                {{ $t('api_test.home_page.detail_card.success') }}
-                {{ "\xa0\xa0" }}
                <el-link class="rows-count-number" @click="redirectPage('executionPassCount')" target="_blank">
                  <b>
                    {{ scheduleTaskCountData.successCount }}
@ -107,23 +102,17 @@
          </el-col>
        </el-row>
        <el-row v-else>
-          <el-col :span="8">
+          <el-col :span="12">
            <span class="default-property">
              {{ $t('api_test.home_page.detail_card.failed') }}
-
-              {{ "\xa0\xa0" }}
               <el-link type="info" class="rows-count-number" @click="redirectPage('notSuccessCount')" target="_blank">
                 <b>{{ scheduleTaskCountData.failedCount + scheduleTaskCountData.fakeErrorCount }}</b>
                </el-link>
            </span>
          </el-col>
-          <el-col :span="8">
-            &nbsp;&nbsp;&nbsp;&nbsp;
-          </el-col>
-          <el-col :span="8">
-              <span class="main-property" style="float: left">
+          <el-col :span="12">
+              <span class="main-property" style="float: right">
                {{ $t('api_test.home_page.detail_card.success') }}
-                {{ "\xa0\xa0" }}
                <el-link class="rows-count-number" @click="redirectPage('executionPassCount')" target="_blank">
                  <b>
                    {{ scheduleTaskCountData.successCount }}
@ -179,7 +168,7 @@ export default {

 .rows-count-number {
  font-family: 'ArialMT', 'Arial', sans-serif;
-  font-size: 12px;
+  font-size: 14px;
  color: var(--count_number);
 }

@ -188,12 +177,12 @@ export default {
 }

 .default-property {
-  font-size: 12px;
+  font-size: 14px;
 }

 .main-property {
  color: #F39021;
-  font-size: 12px
+  font-size: 14px
 }

 .el-card /deep/ .el-card__header {
@ -212,4 +201,10 @@ export default {
  position: absolute;
  top: 0;
 }
+
+.itemIsCenter {
+  display: flex;
+  justify-content: center; /*主轴上居中*/
+  align-items: center; /*侧轴上居中*/
+}
 </style>
--- a/frontend/src/business/components/common/chart/CountRectangleChart.vue
+++ b/frontend/src/business/components/common/chart/CountRectangleChart.vue
@ -21,8 +21,9 @@ export default {
 </script>

 <style scoped>
-
 .main-number-show {
+  line-height: 100px;
+  text-align: center;
  height: 62px;
  line-height: 62px;
  border-style: solid;
--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@ -544,6 +544,7 @@ export default {
    this.getTemplateField();
    this.$emit('setCondition', this.condition);
    this.initTableData();
+
    let redirectParam = this.$route.query.dataSelectRange;
    this.checkRedirectEditPage(redirectParam);
    // 切换tab之后版本查询
@ -720,9 +721,12 @@ export default {
      this.$refs.headerCustom.open(list);
    },
    getSelectDataRange() {
-      let dataRange = this.$route.params.dataSelectRange;
-      let dataType = this.$route.params.dataType;
-      this.selectDataRange = dataType === 'case' ? dataRange : 'all';
+      let routeParamObj = this.$route.params.paramObj;
+      this.selectDataRange = 'all';
+      if (routeParamObj) {
+        let dataRange = routeParamObj.dataSelectRange;
+        this.selectDataRange = dataRange;
+      }
    },
    initTableData(nodeIds) {
      this.condition.planId = "";
@ -770,14 +774,14 @@ export default {
        case 'coverage':
          this.condition.caseCoverage = 'coverage';
          break;
-        case 'Prepare':
-          this.condition.filters.review_status = [this.selectDataRange];
+        case 'notReviewed':
+          this.condition.filters.review_status = ['Prepare'];
          break;
-        case 'Pass':
-          this.condition.filters.review_status = [this.selectDataRange];
+        case 'reviewSuccess':
+          this.condition.filters.review_status = ['Pass'];
          break;
-        case 'UnPass':
-          this.condition.filters.review_status = [this.selectDataRange];
+        case 'reviewFail':
+          this.condition.filters.review_status = ['UnPass'];
          break;
      }
      this.condition.filters.priority = this.condition.filters['用例等级'];
@ -1279,7 +1283,7 @@ export default {
  margin-left: 10px;
 }

-/deep/ .el-table{
+/deep/ .el-table {
  overflow: auto;
 }
 </style>
--- a/frontend/src/business/components/track/home/TrackHome.vue
+++ b/frontend/src/business/components/track/home/TrackHome.vue
@ -25,7 +25,7 @@
          <bug-count-card class="track-card"/>
        </el-col>
        <el-col :span="12">
-          <ms-failure-test-case-list class="track-card" @redirectPage="redirectPage"/>
+          <ms-failure-test-case-list class="track-card" :select-function-case="true" @redirectPage="redirectPage"/>
        </el-col>
      </el-row>

@ -165,17 +165,14 @@ export default {
      //api页面跳转
      //传入UUID是为了进行页面重新加载判断
      let uuid = getUUID();
+      let redirectObj = {
+        redirectID: uuid, dataType: dataType, dataSelectRange: selectType
+      };
      switch (page) {
-        case "api":
+        case "testCase":
          this.$router.push({
-            name: 'ApiDefinition',
-            params: {redirectID: uuid, dataType: dataType, dataSelectRange: selectType}
-          });
-          break;
-        case "scenario":
-          this.$router.push({
-            name: 'ApiAutomation',
-            params: {redirectID: uuid, dataType: dataType, dataSelectRange: selectType}
+            name: 'testCaseRedirect',
+            params: {paramObj: redirectObj}
          });
          break;
        case "testPlanEdit":
--- a/frontend/src/business/components/track/home/components/BugCountCard.vue
+++ b/frontend/src/business/components/track/home/components/BugCountCard.vue
@ -7,13 +7,11 @@
    </div>
    <el-container>
      <el-aside width="150px">
-
-        <ms-count-ring-chart :content="bugTotalSize"/>
-
+        <count-rectangle-chart :content="bugTotalSize"/>
        <div>
          {{ $t('test_track.home.percentage') }}
          <span class="rage">
-              {{rage}}
+              {{ rage }}
            </span>
        </div>
      </el-aside>
@ -59,12 +57,12 @@
 <script>
 import {getCurrentProjectID} from "@/common/js/utils";
 import PlanStatusTableItem from "@/business/components/track/common/tableItems/plan/PlanStatusTableItem";
-import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
+import CountRectangleChart from "@/business/components/common/chart/CountRectangleChart";

 export default {
  name: "BugCountCard",
  components: {
-    MsCountRingChart,
+    CountRectangleChart,
    PlanStatusTableItem
  },
  data() {
@ -106,35 +104,9 @@ export default {
  border-bottom: 0px solid #EBEEF5;
 }

-.el-aside {
-  line-height: 100px;
-  text-align: center;
-  overflow-y: hidden;
-}
-
-.count-number {
-  font-family: 'ArialMT', 'Arial', sans-serif;
-  font-size: 33px;
-  color: var(--count_number);
-}
-
 .rage {
  font-family: 'ArialMT', 'Arial', sans-serif;
  font-size: 18px;
  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
@ -1,28 +1,28 @@
 <template>
  <el-card class="table-card" v-loading="result.loading" body-style="padding:10px;">
-    <div slot="header" >
+    <div slot="header">
      <span class="title">
        {{ $t('test_track.home.case_count') }}
      </span>
    </div>
-
+    <!--数值统计-->
    <el-container>
-
-      <el-aside width="120px">
-        <ms-count-ring-chart :content="trackCountData.allCaseCountNumber"/>
+      <el-aside width="34%">
+        <count-rectangle-chart :content="trackCountData.allCaseCountNumber"/>
      </el-aside>
-
      <el-main style="padding-left: 0px;padding-right: 0px;">
        <div style="width: 200px;margin:0 auto">
-
          <el-row align="center">
-            <el-col :span="6" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
+            <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="trackCountData.p0CountStr"></div>
            </el-col>
-            <el-col :span="6" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
+            <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="trackCountData.p1CountStr"></div>
            </el-col>
-            <el-col :span="6" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
+            <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="trackCountData.p2CountStr"></div>
            </el-col>
            <el-col :span="6" style="padding: 5px;">
@ -33,71 +33,75 @@
      </el-main>
    </el-container>

+    <!-- 本周新增-->
    <el-container class="detail-container">
-      <el-header style="height:20px;padding: 0px;margin-bottom: 10px;">
+      <el-header style="height:20px;padding: 0px;margin-bottom: 0px;font-size: 14px">
        <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">{{trackCountData.thisWeekAddedCount}}
+            {{ $t('api_test.home_page.api_details_card.this_week_add') }}
+            <el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">
+              {{ trackCountData.thisWeekAddedCount }}
            </el-link>
-            {{$t('api_test.home_page.unit_of_measurement')}}
+            {{ $t('api_test.home_page.unit_of_measurement') }}
          </el-col>
        </el-row>
      </el-header>
-      <el-main style="padding: 5px;margin-top: 10px">
-        <el-container>
-          <el-aside width="60%" class="count-number-show" style="margin-bottom: 0px;margin-top: 0px">
-            <el-container>
-              <el-aside width="30%">
-                {{ $t('test_track.home.review_rate') }}:
-              </el-aside>
-              <el-main style="padding: 0px 0px 0px 0px; line-height: 100px; text-align: center;">
-                <span class="count-number">
-                {{trackCountData.reviewRage}}
-                  <el-tooltip placement="top" class="info-tool-tip">
-                    <div slot="content">{{ $t('api_test.home_page.formula.review')}}</div>
-                    <el-button icon="el-icon-info" style="padding:0px;border: 0px"></el-button>
-                  </el-tooltip>
+      <el-main style="padding:0px">
+        <el-row>
+          <el-col :span="8">&nbsp;</el-col>
+        </el-row>
+      </el-main>
+    </el-container>
+
+    <!--   评审通过率   -->
+    <el-container class="detail-container">
+      <el-header style="height:20px;padding: 0px;margin-bottom: 5px;font-size: 14px">
+        <el-row>
+          <span style="float: left">
+            {{ $t('test_track.home.review_rate') + ":" }}&nbsp;&nbsp;
+          </span>
+          <span style="font-size: 14px">
+            <b>{{ trackCountData.reviewRage }}</b>
+            <el-tooltip placement="top" class="info-tool-tip">
+              <div slot="content">{{ $t('api_test.home_page.formula.review') }}</div>
+              <el-button icon="el-icon-info" style="padding:0px;border: 0px"></el-button>
+            </el-tooltip>
+          </span>
+        </el-row>
+      </el-header>
+      <el-main style="padding:0px">
+        <el-row>
+          <el-col :span="8">
+            <span class="default-property">
+              {{ $t('test_track.review.prepare') }}
+              <el-link class="rows-count-number" @click="redirectPage('notReviewed')" target="_blank">
+                <b>
+                {{ trackCountData.prepareCount }}
+                </b>
+              </el-link>
+            </span>
+          </el-col>
+          <el-col :span="8" class="itemIsCenter">
+            <span class="default-property">
+              {{ $t('test_track.review.un_pass') }}
+              <el-link class="rows-count-number" @click="redirectPage('reviewFail')" target="_blank">
+                <b>
+                {{ trackCountData.unPassCount }}
+                </b>
+              </el-link>
+            </span>
+          </el-col>
+          <el-col :span="8">
+              <span class="main-property" style="float: right">
+                {{ $t('test_track.review.pass') }}
+                <el-link class="rows-count-number" @click="redirectPage('reviewSuccess')" target="_blank">
+                  <b>
+                  {{ trackCountData.passCount }}
+                  </b>
+                </el-link>
              </span>
-              </el-main>
-            </el-container>
-          </el-aside>
-          <el-main style="padding: 5px">
-            <el-card class="no-shadow-card" body-style="padding-left:5px;padding-right:5px">
-              <main>
-                <el-row>
-                  <el-col>
-                    <span class="default-property">
-                      {{ $t('test_track.review.prepare') }}
-                      {{"\xa0\xa0"}}
-                      <el-link type="info" @click="redirectPage('Prepare')" target="_blank" style="color: #000000">
-                        {{trackCountData.prepareCount}}
-                      </el-link>
-                    </span>
-                  </el-col>
-                  <el-col style="margin-top: 5px;">
-                    <span class="default-property">
-                      {{ $t('test_track.review.un_pass') }}
-                      {{"\xa0\xa0"}}
-                      <el-link type="info" @click="redirectPage('UnPass')" target="_blank" style="color: #000000">
-                        {{trackCountData.unPassCount}}
-                      </el-link>
-                    </span>
-                  </el-col>
-                  <el-col style="margin-top: 5px;">
-                    <span class="main-property">
-                      {{ $t('test_track.review.pass') }}
-                      {{"\xa0\xa0"}}
-                      <el-link type="info" @click="redirectPage('Pass')" target="_blank" style="color: #000000">
-                        {{trackCountData.passCount}}
-                      </el-link>
-                    </span>
-                  </el-col>
-                </el-row>
-              </main>
-            </el-card>
-          </el-main>
-        </el-container>
+          </el-col>
+        </el-row>
      </el-main>
    </el-container>
  </el-card>
@ -105,70 +109,68 @@

 <script>
 import MsInstructionsIcon from "@/business/components/common/components/MsInstructionsIcon";
-import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
+import CountRectangleChart from "@/business/components/common/chart/CountRectangleChart";
+
 export default {
  name: "CaseCountCard",
-  components: {MsCountRingChart, MsInstructionsIcon},
-  props:{
+  components: {CountRectangleChart, MsInstructionsIcon},
+  props: {
    trackCountData: {},
  },
  data() {
    return {
-      result: {
-
-      }
+      result: {}
    }
  },
  methods: {
-    redirectPage(clickType){
-      this.$emit("redirectPage","case", "case",clickType);
+    redirectPage(clickType) {
+      this.$emit("redirectPage", "testCase", "case", clickType);
    }
  }
 }
 </script>

 <style scoped>
-.el-aside {
-  line-height: 100px;
-  text-align: center;
-}
-.count-number{
-  font-family:'ArialMT', 'Arial', sans-serif;
-  font-size:33px;
-  color: var(--count_number);
-  position: relative;
+
+.detail-container {
+  margin-top: 30px;
 }

-.count-number-show{
-  margin:20px auto;
+.default-property {
+  font-size: 14px
 }
-.detail-container{
-  margin-top: 30px
-}
-.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);
-}
-.default-property{
-  font-size: 12px
-}
-.main-property{
+
+.main-property {
  color: #F39021;
-  font-size: 12px
+  font-size: 14px
 }

 .el-card /deep/ .el-card__header {
  border-bottom: 0px solid #EBEEF5;
 }

-.count-info-div{
+.count-info-div {
  margin: 3px;
 }
-.count-info-div >>>p{
+
+.count-info-div >>> p {
  font-size: 10px;
 }
-.info-tool-tip{
+
+.info-tool-tip {
  position: absolute;
  top: 0;
 }
+
+.rows-count-number {
+  font-family: 'ArialMT', 'Arial', sans-serif;
+  font-size: 14px;
+  color: var(--count_number) !important;
+}
+
+.itemIsCenter {
+  display: flex;
+  justify-content: center; /*主轴上居中*/
+  align-items: center; /*侧轴上居中*/
+}
 </style>
--- a/frontend/src/business/components/track/home/components/RelevanceCaseCard.vue
+++ b/frontend/src/business/components/track/home/components/RelevanceCaseCard.vue
@ -1,23 +1,23 @@
 <template>
  <el-card class="table-card" v-loading="result.loading" body-style="padding:10px;">
-    <div slot="header" >
+    <div slot="header">
      <span class="title">
        {{ $t('test_track.home.relevance_case') }}
      </span>
    </div>
-
+    <!--数值统计-->
    <el-container>
-
      <el-aside width="120px">
-        <ms-count-ring-chart :content="relevanceCountData.allRelevanceCaseCount"/>
+        <count-rectangle-chart :content="relevanceCountData.allRelevanceCaseCount"/>
      </el-aside>
-
      <el-main style="padding-left: 0px;padding-right: 0px;">
        <el-row align="center">
-          <el-col :span="8" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
+          <el-col :span="8"
+                  style="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="8" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
+          <el-col :span="8"
+                  style="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="8" style="padding: 5px;">
@ -27,118 +27,104 @@
      </el-main>
    </el-container>

+    <!-- 本周新增-->
    <el-container class="detail-container">
-      <el-header style="height:20px;padding: 0px;margin-bottom: 10px;">
+      <el-header style="height:20px;padding: 0px;margin-bottom: 0px;font-size: 14px">
        <el-row>
          <el-col>
-            {{$t('api_test.home_page.api_details_card.this_week_add')}}
-            <el-link type="info" @click="redirectPage('thisWeekRelevanceCount')" target="_blank" style="color: #000000">{{relevanceCountData.thisWeekAddedCount}}
+            {{ $t('api_test.home_page.api_details_card.this_week_add') }}
+            <el-link type="info" @click="redirectPage('thisWeekRelevanceCount')" target="_blank" style="color: #000000">
+              {{ relevanceCountData.thisWeekAddedCount }}
            </el-link>
-            {{$t('api_test.home_page.unit_of_measurement')}}
+            {{ $t('api_test.home_page.unit_of_measurement') }}
          </el-col>
        </el-row>
      </el-header>
-      <el-main style="padding: 5px;margin-top: 10px">
-        <el-container>
-          <el-aside width="60%" class="count-number-show" style="margin-bottom: 0px;margin-top: 0px">
-            <el-container>
-              <el-aside width="30%">
-                {{ $t('test_track.home.coverage') }}:
-              </el-aside>
-              <el-main style="padding: 0px 0px 0px 0px; line-height: 100px; text-align: center;">
-                <span class="count-number">
-                {{relevanceCountData.coverageRage}}
-                  <el-tooltip placement="top" class="info-tool-tip">
-                    <div slot="content">{{ $t('api_test.home_page.formula.testplan_coverage')}}</div>
-                    <el-button icon="el-icon-info" style="padding:0px;border: 0px"></el-button>
-                  </el-tooltip>
+      <el-main style="padding:0px">
+        <el-row>
+          <el-col :span="8">&nbsp;</el-col>
+        </el-row>
+      </el-main>
+    </el-container>
+
+    <!--   用例覆盖率率   -->
+    <el-container class="detail-container">
+      <el-header style="height:20px;padding: 0px;margin-bottom: 5px;font-size: 14px">
+        <el-row>
+          <span style="float: left">
+            {{ $t('test_track.home.coverage') + ":" }}&nbsp;&nbsp;
+          </span>
+          <span style="font-size: 14px">
+            <b>{{ relevanceCountData.coverageRage }}</b>
+            <el-tooltip placement="top" class="info-tool-tip">
+              <div slot="content">{{ $t('api_test.home_page.formula.testplan_coverage') }}</div>
+              <el-button icon="el-icon-info" style="padding:0px;border: 0px"></el-button>
+            </el-tooltip>
+          </span>
+        </el-row>
+      </el-header>
+      <el-main style="padding:0px">
+        <el-row>
+          <el-col :span="12">
+            <span class="default-property">
+              {{ $t('api_test.home_page.detail_card.uncoverage') }}
+              <el-link class="rows-count-number" @click="redirectPage('uncoverage')" target="_blank">
+                <b>
+                {{ relevanceCountData.uncoverageCount }}
+                </b>
+              </el-link>
+            </span>
+          </el-col>
+          <el-col :span="12">
+              <span class="main-property" style="float: right">
+                {{ $t('api_test.home_page.detail_card.coverage') }}
+                <el-link class="rows-count-number" @click="redirectPage('coverage')" target="_blank">
+                  <b>
+                  {{ relevanceCountData.coverageCount }}
+                  </b>
+                </el-link>
              </span>
-              </el-main>
-            </el-container>
-          </el-aside>
-          <el-main style="padding: 5px">
-            <el-card class="no-shadow-card" body-style="padding-left:5px;padding-right:5px">
-              <main>
-                <el-row>
-                  <el-col>
-                    <span class="default-property">
-                      {{ $t('api_test.home_page.detail_card.uncoverage') }}
-                      {{"\xa0\xa0"}}
-                      <el-link type="info" @click="redirectPage('uncoverage')" target="_blank" style="color: #000000">
-                        {{relevanceCountData.uncoverageCount}}
-                      </el-link>
-                    </span>
-                  </el-col>
-                  <el-col style="margin-top: 5px;">
-                    <span class="main-property">
-                      {{ $t('api_test.home_page.detail_card.coverage') }}
-                      {{"\xa0\xa0"}}
-                      <el-link type="info" @click="redirectPage('coverage')" target="_blank" style="color: #000000">
-                        {{relevanceCountData.coverageCount}}
-                      </el-link>
-                    </span>
-                  </el-col>
-                </el-row>
-              </main>
-            </el-card>
-          </el-main>
-        </el-container>
+          </el-col>
+        </el-row>
      </el-main>
    </el-container>
  </el-card>
 </template>

 <script>
-import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
+import CountRectangleChart from "@/business/components/common/chart/CountRectangleChart";
+
 export default {
  name: "RelevanceCaseCard",
-  components: {MsCountRingChart},
-  props:{
-    relevanceCountData:{},
+  components: {CountRectangleChart},
+  props: {
+    relevanceCountData: {},
  },
  data() {
    return {
-      result: {
-
-      }
+      result: {}
    }
  },
  methods: {
-    redirectPage(clickType){
-      this.$emit("redirectPage","case","case",clickType);
+    redirectPage(clickType) {
+      this.$emit("redirectPage", "testCase", "relationCase", clickType);
    }
  }
 }
 </script>

 <style scoped>
-.el-aside {
-  line-height: 100px;
-  text-align: center;
-}
-.count-number{
-  font-family:'ArialMT', 'Arial', sans-serif;
-  font-size:33px;
-  color: var(--count_number);
-  position: relative;
-}
-
-.count-number-show{
-  margin:20px auto;
-}
-.detail-container{
+.detail-container {
  margin-top: 30px
 }
-.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);
+
+.default-property {
+  font-size: 14px
 }
-.default-property{
-  font-size: 12px
-}
-.main-property{
+
+.main-property {
  color: #F39021;
-  font-size: 12px
+  font-size: 14px
 }

 .el-card /deep/ .el-card__header {
@ -148,21 +134,25 @@ export default {
 .el-card >>> .el-card__body {
  padding-right: 0;
 }
-.count-info-div{
+
+.count-info-div {
  margin-top: 3px;
  margin-bottom: 3px;
  text-align: center;
 }
-.count-info-div >>>p{
+
+.count-info-div >>> p {
  font-size: 10px;
 }
-.info-tool-tip{
+
+.info-tool-tip {
  position: absolute;
  top: 0;
 }

-.el-col {
-  padding-right: 0 !important;
-  padding-left: 0 !important;
+.rows-count-number {
+  font-family: 'ArialMT', 'Arial', sans-serif;
+  font-size: 14px;
+  color: var(--count_number) !important;
 }
 </style>
--- a/frontend/src/business/components/track/router.js
+++ b/frontend/src/business/components/track/router.js
@ -1,4 +1,3 @@
-
 const TestTrack = () => import('@/business/components/track/TestTrack')
 const TrackHome = () => import('@/business/components/track/home/TrackHome')
 const TestCase = () => import('@/business/components/track/case/TestCase')
@ -33,6 +32,11 @@ export default {
      name: 'testCase',
      component: TestCase,
    },
+    {
+      path: 'case/all',
+      name: 'testCaseRedirect',
+      component: TestCase,
+    },
    {
      path: 'case/edit/:caseId',
      name: 'testCaseEdit',