From df2f5df2f79714b40341eb8a2749b360b40da7a7 Mon Sep 17 00:00:00 2001
From: "song.tianyang" <tianyang.song@fit2cloud.com>
Date: Thu, 17 Dec 2020 19:10:51 +0800
Subject: [PATCH 1/2] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5CSS=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

清除无效CSS样式、未使用CSS样式
---
 .../components/api/homepage/components/ApiDetailCard.vue   | 7 ++++---
 .../components/api/homepage/components/ApiInfoCard.vue     | 4 +---
 .../components/api/homepage/components/SceneDetailCard.vue | 6 ------
 .../api/homepage/components/ScheduleTaskDetailCard.vue     | 7 +------
 .../api/homepage/components/ScheduleTaskInfoCard.vue       | 4 +---
 .../api/homepage/components/TestCaseDetailCard.vue         | 7 +------
 .../api/homepage/components/TestCaseInfoCard.vue           | 4 +---
 7 files changed, 9 insertions(+), 30 deletions(-)

diff --git a/frontend/src/business/components/api/homepage/components/ApiDetailCard.vue b/frontend/src/business/components/api/homepage/components/ApiDetailCard.vue
index cb763e94e9..504c104f77 100644
--- a/frontend/src/business/components/api/homepage/components/ApiDetailCard.vue
+++ b/frontend/src/business/components/api/homepage/components/ApiDetailCard.vue
@@ -8,7 +8,10 @@
     <el-container>
       <el-main>
           <div class="text item">
+            <br/>
             {{$t('api_test.home_page.api_details_card.this_week_add',[apiCountData.thisWeekAddedCount])}}
+            <br/>
+            <br/>
           </div>
       </el-main>
     </el-container>
@@ -53,7 +56,5 @@ export default {
 }
 </script>
 <style scoped>
-.el-aside {
-  text-align: center;
-}
+
 </style>
diff --git a/frontend/src/business/components/api/homepage/components/ApiInfoCard.vue b/frontend/src/business/components/api/homepage/components/ApiInfoCard.vue
index 5ef667d712..b4c632a872 100644
--- a/frontend/src/business/components/api/homepage/components/ApiInfoCard.vue
+++ b/frontend/src/business/components/api/homepage/components/ApiInfoCard.vue
@@ -52,10 +52,8 @@ export default {
 </script>
 <style scoped>
 .el-aside {
-  /*background-color: #D3DCE6;*/
-  /*color: #333;*/
+  line-height: 100px;
   text-align: center;
-  /*line-height: 20;*/
 }
 .countNumber{
   font-size: 40px;
diff --git a/frontend/src/business/components/api/homepage/components/SceneDetailCard.vue b/frontend/src/business/components/api/homepage/components/SceneDetailCard.vue
index f4933a361f..d00da7be64 100644
--- a/frontend/src/business/components/api/homepage/components/SceneDetailCard.vue
+++ b/frontend/src/business/components/api/homepage/components/SceneDetailCard.vue
@@ -42,11 +42,5 @@ export default {
 }
 </script>
 <style scoped>
-.el-aside {
-  /*background-color: #D3DCE6;*/
-  /*color: #333;*/
-  text-align: center;
-  line-height: 100px;
-}
 
 </style>
diff --git a/frontend/src/business/components/api/homepage/components/ScheduleTaskDetailCard.vue b/frontend/src/business/components/api/homepage/components/ScheduleTaskDetailCard.vue
index 59c5386970..3c2ac75d72 100644
--- a/frontend/src/business/components/api/homepage/components/ScheduleTaskDetailCard.vue
+++ b/frontend/src/business/components/api/homepage/components/ScheduleTaskDetailCard.vue
@@ -49,10 +49,5 @@ export default {
 }
 </script>
 <style scoped>
-.el-aside {
-  /*background-color: #D3DCE6;*/
-  /*color: #333;*/
-  text-align: center;
-  /*line-height: 200px;*/
-}
+
 </style>
diff --git a/frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue b/frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue
index 390a15269d..ead029291d 100644
--- a/frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue
+++ b/frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue
@@ -60,10 +60,8 @@ export default {
 </script>
 <style scoped>
 .el-aside {
-  /*background-color: #D3DCE6;*/
-  /*color: #333;*/
+  line-height: 100px;
   text-align: center;
-  /*line-height: 200px;*/
 }
 
 .countNumber{
diff --git a/frontend/src/business/components/api/homepage/components/TestCaseDetailCard.vue b/frontend/src/business/components/api/homepage/components/TestCaseDetailCard.vue
index 943128a2d2..fcbf770325 100644
--- a/frontend/src/business/components/api/homepage/components/TestCaseDetailCard.vue
+++ b/frontend/src/business/components/api/homepage/components/TestCaseDetailCard.vue
@@ -49,10 +49,5 @@ export default {
 }
 </script>
 <style scoped>
-.el-aside {
-  /*background-color: #D3DCE6;*/
-  /*color: #333;*/
-  text-align: center;
-  /*line-height: 200px;*/
-}
+
 </style>
diff --git a/frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue b/frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue
index 77617ef9c4..a1c4a1619c 100644
--- a/frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue
+++ b/frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue
@@ -59,10 +59,8 @@ export default {
 </script>
 <style scoped>
 .el-aside {
-  /*background-color: #D3DCE6;*/
-  /*color: #333;*/
+  line-height: 100px;
   text-align: center;
-  /*line-height: 200px;*/
 }
 
 .countNumber{

From 5b0be270d2e95ab48a02898fa579f2568b0bdcd2 Mon Sep 17 00:00:00 2001
From: "song.tianyang" <tianyang.song@fit2cloud.com>
Date: Mon, 21 Dec 2020 18:19:13 +0800
Subject: [PATCH 2/2] =?UTF-8?q?refactor(=E6=8E=A5=E5=8F=A3=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95=E5=8A=9F=E8=83=BD=E9=A6=96=E9=A1=B5):=20=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E6=B5=8B=E8=AF=95=E9=A6=96=E9=A1=B5=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=8F=8A=E7=BB=9F=E8=AE=A1=E6=95=B0=E6=8D=AE=E6=9B=B4=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

接口测试首页由于更换了样式、展示数据等，重新开发该页面的
---
 .../api/controller/APITestController.java     |  65 ++++++-
 .../dto/dataCount/ExecutedCaseInfoResult.java |   2 +
 .../dataCount/response/ApiDataCountDTO.java   | 154 ++++++++++++++--
 .../response/ExecutedCaseInfoDTO.java         |   2 +
 .../api/service/APIReportService.java         |   5 +-
 .../api/service/ApiAutomationService.java     |   5 +
 .../api/service/ApiDefinitionService.java     |   8 +
 .../ext/ExtApiDefinitionExecResultMapper.java |  32 +---
 .../ext/ExtApiDefinitionExecResultMapper.xml  |  47 +++++
 .../mapper/ext/ExtApiDefinitionMapper.java    |  12 +-
 .../mapper/ext/ExtApiDefinitionMapper.xml     |  18 ++
 .../base/mapper/ext/ExtApiScenarioMapper.java |   9 +-
 .../base/mapper/ext/ExtApiScenarioMapper.xml  |  14 ++
 .../ext/ExtApiScenarioReportMapper.java       |   6 -
 .../mapper/ext/ExtApiScenarioReportMapper.xml |   8 +
 .../base/mapper/ext/ExtApiTestCaseMapper.java |  12 --
 .../base/mapper/ext/ExtApiTestCaseMapper.xml  |  12 ++
 .../mapper/ext/ExtApiTestReportMapper.java    |  17 +-
 .../mapper/ext/ExtApiTestReportMapper.xml     |  15 ++
 .../base/mapper/ext/ExtScheduleMapper.java    |  15 --
 .../base/mapper/ext/ExtScheduleMapper.xml     |  16 ++
 .../scenario/ScenarioExtendBtns.vue           |   8 +-
 .../api/homepage/ApiTestHomePage.vue          |  51 +++---
 .../api/homepage/components/ApiDetailCard.vue |  60 -------
 .../api/homepage/components/ApiInfoCard.vue   | 154 +++++++++++++---
 .../components/FailureTestCaseList.vue        |  20 ++-
 .../homepage/components/RunningTaskList.vue   |   9 +-
 .../homepage/components/SceneDetailCard.vue   |  46 -----
 .../api/homepage/components/SceneInfoCard.vue | 148 +++++++++++++---
 .../components/ScheduleTaskDetailCard.vue     |  53 ------
 .../components/ScheduleTaskInfoCard.vue       | 147 +++++++++++++---
 .../components/TestCaseDetailCard.vue         |  53 ------
 .../homepage/components/TestCaseInfoCard.vue  | 166 +++++++++++++++---
 frontend/src/i18n/en-US.js                    |  43 ++++-
 frontend/src/i18n/zh-CN.js                    |  49 +++++-
 frontend/src/i18n/zh-TW.js                    |  49 +++++-
 36 files changed, 1050 insertions(+), 480 deletions(-)
 delete mode 100644 frontend/src/business/components/api/homepage/components/ApiDetailCard.vue
 delete mode 100644 frontend/src/business/components/api/homepage/components/SceneDetailCard.vue
 delete mode 100644 frontend/src/business/components/api/homepage/components/ScheduleTaskDetailCard.vue
 delete mode 100644 frontend/src/business/components/api/homepage/components/TestCaseDetailCard.vue

diff --git a/backend/src/main/java/io/metersphere/api/controller/APITestController.java b/backend/src/main/java/io/metersphere/api/controller/APITestController.java
index 5589a4cd67..d5f9b0b7ec 100644
--- a/backend/src/main/java/io/metersphere/api/controller/APITestController.java
+++ b/backend/src/main/java/io/metersphere/api/controller/APITestController.java
@@ -28,6 +28,7 @@ import org.springframework.web.multipart.MultipartFile;
 
 import javax.annotation.Resource;
 
+import java.text.DecimalFormat;
 import java.util.ArrayList;
 import java.util.Date;
 import java.util.HashMap;
@@ -178,12 +179,27 @@ public class APITestController {
 
         ApiDataCountDTO apiCountResult = new ApiDataCountDTO();
 
-        List<ApiDataCountResult> countResultList = apiDefinitionService.countProtocolByProjectID(projectId);
-        apiCountResult.countByApiDefinitionCountResult(countResultList);
+        List<ApiDataCountResult> countResultByProtocolList = apiDefinitionService.countProtocolByProjectID(projectId);
+        apiCountResult.countProtocal(countResultByProtocolList);
 
         long dateCountByCreateInThisWeek = apiDefinitionService.countByProjectIDAndCreateInThisWeek(projectId);
         apiCountResult.setThisWeekAddedCount(dateCountByCreateInThisWeek);
 
+        //查询完成率、进行中、已完成
+        List<ApiDataCountResult> countResultByStatelList = apiDefinitionService.countStateByProjectID(projectId);
+        apiCountResult.countStatus(countResultByStatelList);
+        long allCount = apiCountResult.getFinishedCount()+apiCountResult.getRunningCount()+apiCountResult.getNotStartedCount();
+
+        if(allCount!=0){
+            float complateRageNumber =(float)apiCountResult.getFinishedCount()*100/allCount;
+            DecimalFormat df = new DecimalFormat("0.0");
+            apiCountResult.setCompletionRage(df.format(complateRageNumber)+"%");
+        }
+
+        apiCountResult.setHttpCountStr("HTTP&nbsp;&nbsp;<br/><br/>"+apiCountResult.getHttpApiDataCountNumber());
+        apiCountResult.setRpcCountStr("RPC&nbsp;&nbsp;<br/><br/>"+apiCountResult.getRpcApiDataCountNumber());
+        apiCountResult.setTcpCountStr("TCP&nbsp;&nbsp;<br/><br/>"+apiCountResult.getTcpApiDataCountNumber());
+        apiCountResult.setSqlCountStr("SQL&nbsp;&nbsp;<br/><br/>"+apiCountResult.getSqlApiDataCountNumber());
         return  apiCountResult;
     }
 
@@ -192,7 +208,7 @@ public class APITestController {
         ApiDataCountDTO apiCountResult = new ApiDataCountDTO();
 
         List<ApiDataCountResult> countResultList = apiTestCaseService.countProtocolByProjectID(projectId);
-        apiCountResult.countByApiDefinitionCountResult(countResultList);
+        apiCountResult.countProtocal(countResultList);
 
         long dateCountByCreateInThisWeek = apiTestCaseService.countByProjectIDAndCreateInThisWeek(projectId);
         apiCountResult.setThisWeekAddedCount(dateCountByCreateInThisWeek);
@@ -202,6 +218,23 @@ public class APITestController {
         long executedCountNumber = apiDefinitionExecResultService.countByTestCaseIDInProject(projectId);
         apiCountResult.setExecutedCount(executedCountNumber);
 
+        //未覆盖 已覆盖： 统计当前接口下是否含有案例
+        List<ApiDataCountResult> countResultByApiCoverageList = apiDefinitionService.countApiCoverageByProjectID(projectId);
+        apiCountResult.countApiCoverage(countResultByApiCoverageList);
+        long allCount = apiCountResult.getCoverageCount()+apiCountResult.getUncoverageCount();
+
+        if(allCount!=0){
+            float coverageRageNumber =(float)apiCountResult.getCoverageCount()*100/allCount;
+            DecimalFormat df = new DecimalFormat("0.0");
+            apiCountResult.setCoverageRage(df.format(coverageRageNumber)+"%");
+        }
+
+
+        apiCountResult.setHttpCountStr("HTTP&nbsp;&nbsp;<br/><br/>"+apiCountResult.getHttpApiDataCountNumber());
+        apiCountResult.setRpcCountStr("RPC&nbsp;&nbsp;<br/><br/>"+apiCountResult.getRpcApiDataCountNumber());
+        apiCountResult.setTcpCountStr("TCP&nbsp;&nbsp;<br/><br/>"+apiCountResult.getTcpApiDataCountNumber());
+        apiCountResult.setSqlCountStr("SQL&nbsp;&nbsp;<br/><br/>"+apiCountResult.getSqlApiDataCountNumber());
+
         return  apiCountResult;
     }
 
@@ -225,6 +258,18 @@ public class APITestController {
         long executedCountNumber = apiScenarioReportService.countByProjectID(projectId);
         apiCountResult.setExecutedCount(executedCountNumber);
 
+        //未执行、未通过、已通过
+        List<ApiDataCountResult> countResultByRunResult = apiAutomationService.countRunResultByProjectID(projectId);
+        apiCountResult.countRunResult(countResultByRunResult);
+
+        long allCount = apiCountResult.getUnexecuteCount()+apiCountResult.getExecutionPassCount()+apiCountResult.getExecutionFailedCount();
+
+        if(allCount!=0){
+            float coverageRageNumber =(float)apiCountResult.getExecutionPassCount()*100/allCount;
+            DecimalFormat df = new DecimalFormat("0.0");
+            apiCountResult.setCoverageRage(df.format(coverageRageNumber)+"%");
+        }
+
         return  apiCountResult;
 
     }
@@ -241,8 +286,17 @@ public class APITestController {
         apiCountResult.setThisWeekAddedCount(taskCountInThisWeek);
         long executedInThisWeekCountNumber = apiReportService.countByWorkspaceIdAndGroupAndCreateInThisWeek(workSpaceID,ScheduleGroup.API_TEST.name());
         apiCountResult.setThisWeekExecutedCount(executedInThisWeekCountNumber);
-        long executedCountNumber = apiReportService.countByWorkspaceIdAndGroup(workSpaceID,ScheduleGroup.API_TEST.name());
-        apiCountResult.setExecutedCount(executedCountNumber);
+
+        //统计 失败 成功 以及总数
+        List<ApiDataCountResult> allExecuteResult = apiReportService.countByWorkspaceIdAndGroupGroupByExecuteResult(workSpaceID,ScheduleGroup.API_TEST.name());
+        apiCountResult.countScheduleExecute(allExecuteResult);
+
+        long allCount = apiCountResult.getExecutedCount();
+        if(allCount!=0){
+            float coverageRageNumber =(float)apiCountResult.getSuccessCount()*100/allCount;
+            DecimalFormat df = new DecimalFormat("0.0");
+            apiCountResult.setCoverageRage(df.format(coverageRageNumber)+"%");
+        }
 
         return  apiCountResult;
     }
@@ -265,6 +319,7 @@ public class APITestController {
                 dataDTO.setCaseName(selectData.getCaseName());
                 dataDTO.setTestPlan(selectData.getTestPlan());
                 dataDTO.setFailureTimes(selectData.getFailureTimes());
+                dataDTO.setCaseType(selectData.getCaseType());
             }else {
                 dataDTO.setCaseName("");
                 dataDTO.setTestPlan("");
diff --git a/backend/src/main/java/io/metersphere/api/dto/dataCount/ExecutedCaseInfoResult.java b/backend/src/main/java/io/metersphere/api/dto/dataCount/ExecutedCaseInfoResult.java
index 2a499dc49f..5850260a8c 100644
--- a/backend/src/main/java/io/metersphere/api/dto/dataCount/ExecutedCaseInfoResult.java
+++ b/backend/src/main/java/io/metersphere/api/dto/dataCount/ExecutedCaseInfoResult.java
@@ -15,4 +15,6 @@ public class ExecutedCaseInfoResult {
     private String testPlan;
     //失败次数
     private Long failureTimes;
+    //案例类型
+    private String caseType;
 }
diff --git a/backend/src/main/java/io/metersphere/api/dto/dataCount/response/ApiDataCountDTO.java b/backend/src/main/java/io/metersphere/api/dto/dataCount/response/ApiDataCountDTO.java
index 657f03f4aa..d5bd3850a6 100644
--- a/backend/src/main/java/io/metersphere/api/dto/dataCount/response/ApiDataCountDTO.java
+++ b/backend/src/main/java/io/metersphere/api/dto/dataCount/response/ApiDataCountDTO.java
@@ -3,6 +3,7 @@ package io.metersphere.api.dto.dataCount.response;
 import io.metersphere.api.dto.dataCount.ApiDataCountResult;
 import io.metersphere.api.dto.scenario.request.RequestType;
 import io.metersphere.base.domain.ApiDefinition;
+import io.metersphere.commons.constants.APITestStatus;
 import lombok.Getter;
 import lombok.Setter;
 
@@ -16,31 +17,110 @@ import java.util.Locale;
 @Setter
 public class ApiDataCountDTO {
 
-    //接口统计
+    /**
+     * 接口统计
+     */
     private long allApiDataCountNumber = 0;
-    //http接口统计
+    /**
+     * http接口统计
+     */
     private long httpApiDataCountNumber = 0;
-    //rpc接口统计
+    /**
+     * rpc接口统计
+     */
     private long rpcApiDataCountNumber = 0;
-    //tcp接口统计
+    /**
+     * tcp接口统计
+     */
     private long tcpApiDataCountNumber = 0;
-    //sql接口统计
+    /**
+     * sql接口统计
+     */
     private long sqlApiDataCountNumber = 0;
 
-    //本周新增数量
+    private String httpCountStr = "";
+    private String rpcCountStr = "";
+    private String tcpCountStr = "";
+    private String sqlCountStr = "";
+
+    /**
+     * 本周新增数量
+     */
     private long thisWeekAddedCount = 0;
-    //本周执行数量
+    /**
+     * 本周执行数量
+     */
     private long thisWeekExecutedCount = 0;
-    //历史总执行数量
+    /**
+     * 历史总执行数量
+     */
     private long executedCount = 0;
 
+    /**
+     * 进行中
+     */
+    private long runningCount = 0;
+    /**
+     * 未开始
+     */
+    private long notStartedCount = 0;
+    /**
+     * 已完成
+     */
+    private long finishedCount = 0;
+    /**
+     * 未覆盖
+     */
+    private long uncoverageCount = 0;
+    /**
+     * 已覆盖
+     */
+    private long coverageCount = 0;
+    /**
+     * 未执行
+     */
+    private long unexecuteCount = 0;
+    /**
+     * 执行失败
+     */
+    private long executionFailedCount = 0;
+    /**
+     * 执行通过
+     */
+    private long executionPassCount = 0;
+    /**
+     * 失败
+     */
+    private long failedCount = 0;
+    /**
+     * 成功
+     */
+    private long successCount = 0;
+
+    /**
+     * 完成率
+     */
+    private String completionRage = " 0%";
+    /**
+     * 覆盖率
+     */
+    private String coverageRage = " 0%";
+    /**
+     * 通过率
+     */
+    private String passRage = " 0%";
+    /**
+     * 成功率
+     */
+    private String successRage = " 0%";
+
     public ApiDataCountDTO(){}
 
     /**
-     * 通过ApiDefinitionCountResult统计查询结果进行数据合计
+     * 对Protocal视角对查询结果进行统计
      * @param countResultList
      */
-    public void countByApiDefinitionCountResult(List<ApiDataCountResult> countResultList){
+    public void countProtocal(List<ApiDataCountResult> countResultList){
         for (ApiDataCountResult countResult :
                 countResultList) {
             switch (countResult.getGroupField().toUpperCase()){
@@ -62,4 +142,58 @@ public class ApiDataCountDTO {
             allApiDataCountNumber += countResult.getCountNumber();
         }
     }
+
+
+    /**
+     * 对Status视角对查询结果进行统计
+     * @param countResultList
+     */
+    public void countStatus(List<ApiDataCountResult> countResultList){
+        for (ApiDataCountResult countResult :
+                countResultList) {
+            if("Underway".equals(countResult.getGroupField())){
+                this.runningCount+= countResult.getCountNumber();
+            }else if("Completed".equals(countResult.getGroupField())){
+                this.finishedCount+= countResult.getCountNumber();
+            }else if("Trash".equals(countResult.getGroupField())){
+                this.notStartedCount+= countResult.getCountNumber();
+            }
+        }
+    }
+
+    public void countApiCoverage(List<ApiDataCountResult> countResultList) {
+
+        for (ApiDataCountResult countResult : countResultList) {
+            if("coverage".equals(countResult.getGroupField())){
+                this.coverageCount+= countResult.getCountNumber();
+            }else if("uncoverage".equals(countResult.getGroupField())){
+                this.uncoverageCount+= countResult.getCountNumber();
+            }
+        }
+    }
+
+    public void countRunResult(List<ApiDataCountResult> countResultByRunResult) {
+
+        for (ApiDataCountResult countResult : countResultByRunResult) {
+            if("notRun".equals(countResult.getGroupField())){
+                this.unexecuteCount+= countResult.getCountNumber();
+            }else if("Fail".equals(countResult.getGroupField())){
+                this.executionFailedCount+= countResult.getCountNumber();
+            }else {
+                this.executionPassCount+= countResult.getCountNumber();
+            }
+        }
+    }
+
+    public void countScheduleExecute(List<ApiDataCountResult> allExecuteResult) {
+        for (ApiDataCountResult countResult : allExecuteResult) {
+            if("Success".equals(countResult.getGroupField())){
+                this.successCount+= countResult.getCountNumber();
+            }else if("Error".equals(countResult.getGroupField())){
+                this.failedCount+= countResult.getCountNumber();
+            }
+
+            this.executedCount+= countResult.getCountNumber();
+        }
+    }
 }
diff --git a/backend/src/main/java/io/metersphere/api/dto/dataCount/response/ExecutedCaseInfoDTO.java b/backend/src/main/java/io/metersphere/api/dto/dataCount/response/ExecutedCaseInfoDTO.java
index bdd267efed..53d5f89639 100644
--- a/backend/src/main/java/io/metersphere/api/dto/dataCount/response/ExecutedCaseInfoDTO.java
+++ b/backend/src/main/java/io/metersphere/api/dto/dataCount/response/ExecutedCaseInfoDTO.java
@@ -17,4 +17,6 @@ public class ExecutedCaseInfoDTO {
     private String testPlan;
     //失败次数
     private Long failureTimes;
+    //案例类型
+    private String caseType;
 }
diff --git a/backend/src/main/java/io/metersphere/api/service/APIReportService.java b/backend/src/main/java/io/metersphere/api/service/APIReportService.java
index 032aec06e7..6b3a8001a9 100644
--- a/backend/src/main/java/io/metersphere/api/service/APIReportService.java
+++ b/backend/src/main/java/io/metersphere/api/service/APIReportService.java
@@ -6,6 +6,7 @@ import com.alibaba.fastjson.JSONObject;
 import io.metersphere.api.dto.APIReportResult;
 import io.metersphere.api.dto.DeleteAPIReportRequest;
 import io.metersphere.api.dto.QueryAPIReportRequest;
+import io.metersphere.api.dto.dataCount.ApiDataCountResult;
 import io.metersphere.api.jmeter.TestResult;
 import io.metersphere.base.domain.*;
 import io.metersphere.base.mapper.ApiDataViewMapper;
@@ -224,7 +225,7 @@ public class APIReportService {
         }
     }
 
-    public long countByWorkspaceIdAndGroup(String workspaceID, String group) {
-        return extApiTestReportMapper.countByWorkspaceIdAndGroup(workspaceID,group);
+    public List<ApiDataCountResult> countByWorkspaceIdAndGroupGroupByExecuteResult(String workspaceID, String group) {
+        return extApiTestReportMapper.countByWorkspaceIdAndGroupGroupByExecuteResult(workspaceID,group);
     }
 }
diff --git a/backend/src/main/java/io/metersphere/api/service/ApiAutomationService.java b/backend/src/main/java/io/metersphere/api/service/ApiAutomationService.java
index 058977e68a..765f8804d4 100644
--- a/backend/src/main/java/io/metersphere/api/service/ApiAutomationService.java
+++ b/backend/src/main/java/io/metersphere/api/service/ApiAutomationService.java
@@ -8,6 +8,7 @@ import com.fasterxml.jackson.databind.ObjectMapper;
 import com.google.gson.Gson;
 import io.metersphere.api.dto.APIReportResult;
 import io.metersphere.api.dto.automation.*;
+import io.metersphere.api.dto.dataCount.ApiDataCountResult;
 import io.metersphere.api.dto.definition.RunDefinitionRequest;
 import io.metersphere.api.dto.definition.request.*;
 import io.metersphere.api.dto.scenario.KeyValue;
@@ -377,4 +378,8 @@ public class ApiAutomationService {
             return extApiScenarioMapper.countByProjectIDAndCreatInThisWeek(projectId,firstTime.getTime(),lastTime.getTime());
         }
     }
+
+    public List<ApiDataCountResult> countRunResultByProjectID(String projectId) {
+        return extApiScenarioMapper.countRunResultByProjectID(projectId);
+    }
 }
diff --git a/backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java b/backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java
index d82500fcfa..1b29f1cda5 100644
--- a/backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java
+++ b/backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java
@@ -419,4 +419,12 @@ public class ApiDefinitionService {
             return extApiDefinitionMapper.countByProjectIDAndCreateInThisWeek(projectId, firstTime.getTime(), lastTime.getTime());
         }
     }
+
+    public List<ApiDataCountResult> countStateByProjectID(String projectId) {
+        return extApiDefinitionMapper.countStateByProjectID(projectId);
+    }
+
+    public List<ApiDataCountResult> countApiCoverageByProjectID(String projectId) {
+        return extApiDefinitionMapper.countApiCoverageByProjectID(projectId);
+    }
 }
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionExecResultMapper.java b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionExecResultMapper.java
index 5155e293c1..f17b319a53 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionExecResultMapper.java
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionExecResultMapper.java
@@ -13,40 +13,10 @@ public interface ExtApiDefinitionExecResultMapper {
 
     ApiDefinitionExecResult selectMaxResultByResourceId(String resourceId);
 
-
-    @Select({
-            "SELECT count(id) AS countNumber FROM api_definition_exec_result ",
-            "WHERE resource_id IN ( ",
-            "SELECT testCase.id FROM api_test_case testCase ",
-            "WHERE testCase.project_id = #{projectId}) ",
-            "and start_time BETWEEN #{firstDayTimestamp} AND #{lastDayTimestamp} "
-    })
     long countByProjectIDAndCreateInThisWeek(@Param("projectId") String projectId, @Param("firstDayTimestamp") long firstDayTimestamp, @Param("lastDayTimestamp") long lastDayTimestamp);
 
-    @Select({
-            "SELECT count(id) AS countNumber FROM api_definition_exec_result ",
-            "WHERE resource_id IN ( ",
-            "SELECT testCase.id FROM api_test_case testCase ",
-            "WHERE testCase.project_id = #{projectId}) ",
-    })
     long countByTestCaseIDInProject(String projectId);
 
-    @Select({
-            "SELECT testCase.testCaseName AS caseName,testCase.testPlanName AS testPlan ,caseErrorCountData.dataCountNumber AS failureTimes FROM ( ",
-            "SELECT apiCase.id AS testCaseID,apiCase.`name` AS testCaseName,group_concat(testPlan.`name`)  AS testPlanName FROM api_test_case apiCase ",
-            "LEFT JOIN test_plan testPlan ON testPlan.api_ids like concat('%\"',apiCase.id,'\"%') ",
-            "GROUP BY apiCase.id ",
-            "ORDER BY apiCase.create_time DESC ",
-            ")testCase ",
-            "INNER JOIN ( ",
-            "SELECT resource_id AS testCaseID,COUNT(id) AS dataCountNumber,start_time AS executeTime FROM api_definition_exec_result ",
-            "WHERE resource_id IN ( ",
-            "SELECT id FROM api_test_case WHERE project_id = #{projectId} ",
-            ") and `status` = 'error' GROUP BY resource_id ",
-            ") caseErrorCountData ON caseErrorCountData.testCaseID =testCase.testCaseID ",
-            "WHERE caseErrorCountData.executeTime >= #{startTimestamp} ",
-            "ORDER BY caseErrorCountData.dataCountNumber DESC ",
-            "limit #{limitNumber} "
-    })
     List<ExecutedCaseInfoResult> findFaliureCaseInfoByProjectIDAndExecuteTimeAndLimitNumber(@Param("projectId") String projectId, @Param("startTimestamp") long startTimestamp, @Param("limitNumber") int limitNumber);
+
 }
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionExecResultMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionExecResultMapper.xml
index effb2a59f3..d9e90833fd 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionExecResultMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionExecResultMapper.xml
@@ -9,4 +9,51 @@
         select  * from api_definition_exec_result
         where resource_id = #{resourceId,jdbcType=VARCHAR} ORDER BY create_time DESC LIMIT 1
     </select>
+
+
+    <select id="countByProjectIDAndCreateInThisWeek" resultType="java.lang.Long">
+        SELECT count(id) AS countNumber FROM api_definition_exec_result
+        WHERE resource_id IN (
+        SELECT testCase.id FROM api_test_case testCase
+        WHERE testCase.project_id = #{projectId})
+        and start_time BETWEEN #{firstDayTimestamp} AND #{lastDayTimestamp}
+    </select>
+
+    <select id="countByTestCaseIDInProject" resultType="java.lang.Long">
+        SELECT count(id) AS countNumber FROM api_definition_exec_result
+        WHERE resource_id IN (
+        SELECT testCase.id FROM api_test_case testCase
+        WHERE testCase.project_id = #{projectId})
+    </select>
+
+    <select id="findFaliureCaseInfoByProjectIDAndExecuteTimeAndLimitNumber" resultType="io.metersphere.api.dto.dataCount.ExecutedCaseInfoResult">
+        SELECT * FROM (
+            SELECT testCase.testCaseName AS caseName,testCase.testPlanName AS testPlan ,caseErrorCountData.dataCountNumber AS failureTimes,'apiCase' AS caseType
+            FROM (
+            SELECT apiCase.id AS testCaseID,apiCase.`name` AS testCaseName,group_concat(testPlan.`name`)  AS testPlanName FROM api_test_case apiCase
+            LEFT JOIN test_plan testPlan ON testPlan.api_ids like concat('%"',apiCase.id,'"%')
+            GROUP BY apiCase.id
+            ORDER BY apiCase.create_time DESC
+            )testCase
+            INNER JOIN (
+                SELECT resource_id AS testCaseID,COUNT(id) AS dataCountNumber,start_time AS executeTime FROM api_definition_exec_result
+                WHERE resource_id IN (
+                SELECT id FROM api_test_case WHERE project_id = #{projectId}
+                ) and `status` = 'error' GROUP BY resource_id
+            ) caseErrorCountData ON caseErrorCountData.testCaseID =testCase.testCaseID
+            WHERE caseErrorCountData.executeTime >= #{startTimestamp}
+            UNION
+            SELECT scene.`name` AS caseName,testPlan.`name` AS testPlan,count(report.id) AS failureTimes,'scenario' AS caseType
+            FROM api_scenario_report report
+               INNER JOIN api_scenario_report_detail reportDetail ON report.id = reportDetail.report_id
+               INNER JOIN api_scenario scene ON reportDetail.content like concat('%"',scene.`name`,'"%')
+               LEFT JOIN test_plan_api_scenario apiScene ON apiScene.api_scenario_id = scene.id
+               LEFT JOIN test_plan testPlan ON testPlan.id = apiScene.test_plan_id
+            WHERE report.project_id = #{projectId}
+            AND report.status = 'Error' AND report.create_time >= #{startTimestamp}
+          GROUP BY scene.id
+          ) showTable
+        ORDER BY showTable.failureTimes DESC
+            limit #{limitNumber}
+    </select>
 </mapper>
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionMapper.java b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionMapper.java
index 7c2119a1cf..a9d1627ff8 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionMapper.java
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionMapper.java
@@ -19,13 +19,11 @@ public interface ExtApiDefinitionMapper {
 
     int reduction(@Param("ids") List<String> ids);
 
-    @Select("SELECT protocol AS groupField,count(id) AS countNumber FROM api_definition  WHERE project_id = #{0} GROUP BY protocol;")
     List<ApiDataCountResult> countProtocolByProjectID(String projectId);
 
-    @Select({
-            "SELECT count(id) AS countNumber FROM api_definition ",
-            "WHERE project_id = #{projectId} ",
-            "AND create_time BETWEEN #{firstDayTimestamp} AND #{lastDayTimestamp} "
-    })
-    long countByProjectIDAndCreateInThisWeek(@Param("projectId") String projectId, @Param("firstDayTimestamp") long firstDayTimestamp, @Param("lastDayTimestamp") long lastDayTimestamp);
+    Long countByProjectIDAndCreateInThisWeek(@Param("projectId") String projectId, @Param("firstDayTimestamp") long firstDayTimestamp, @Param("lastDayTimestamp") long lastDayTimestamp);
+
+    List<ApiDataCountResult> countStateByProjectID(String projectId);
+
+    List<ApiDataCountResult> countApiCoverageByProjectID(String projectId);
 }
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionMapper.xml
index 54b533b8f7..6c1577704b 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionMapper.xml
@@ -274,4 +274,22 @@
         </foreach>
     </update>
 
+    <select id="countProtocolByProjectID" resultType="io.metersphere.api.dto.dataCount.ApiDataCountResult">
+        SELECT protocol AS groupField,count(id) AS countNumber FROM api_definition  WHERE project_id = #{0} GROUP BY protocol
+    </select>
+    <select id="countStateByProjectID" resultType="io.metersphere.api.dto.dataCount.ApiDataCountResult">
+        SELECT status AS groupField,count(id) AS countNumber FROM api_definition  WHERE project_id = #{0} GROUP BY status
+    </select>
+    <select id="countByProjectIDAndCreateInThisWeek" resultType="java.lang.Long">
+        SELECT count(id) AS countNumber FROM api_definition
+        WHERE project_id = #{projectId}
+        AND create_time BETWEEN #{firstDayTimestamp} AND #{lastDayTimestamp}
+    </select>
+    <select id="countApiCoverageByProjectID" resultType="io.metersphere.api.dto.dataCount.ApiDataCountResult">
+        SELECT count(api.id) AS countNumber, if(test_case_api.api_definition_id is null,"coverage","uncoverage") AS groupField  FROM api_definition api left Join (
+            SELECT DISTINCT api_definition_id FROM api_test_case
+        ) test_case_api ON api.id = test_case_api.api_definition_id
+        WHERE api.project_id = #{0}
+        GROUP BY groupField
+    </select>
 </mapper>
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioMapper.java b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioMapper.java
index f449472cc7..0e03149377 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioMapper.java
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioMapper.java
@@ -2,6 +2,7 @@ package io.metersphere.base.mapper.ext;
 
 import io.metersphere.api.dto.automation.ApiScenarioDTO;
 import io.metersphere.api.dto.automation.ApiScenarioRequest;
+import io.metersphere.api.dto.dataCount.ApiDataCountResult;
 import io.metersphere.base.domain.ApiScenario;
 import org.apache.ibatis.annotations.Param;
 import org.apache.ibatis.annotations.Select;
@@ -21,13 +22,9 @@ public interface ExtApiScenarioMapper {
 
     int reduction(@Param("ids") List<String> ids);
 
-    @Select("SELECT COUNT(id) AS countNumber FROM api_scenario WHERE project_id = #{0} ")
     long countByProjectID(String projectId);
 
-    @Select({
-            "SELECT count(id) AS countNumber FROM api_scenario ",
-            "WHERE project_id = #{projectId} ",
-            "AND create_time BETWEEN #{firstDayTimestamp} AND #{lastDayTimestamp} "
-    })
     long countByProjectIDAndCreatInThisWeek(@Param("projectId") String projectId, @Param("firstDayTimestamp") long firstDayTimestamp, @Param("lastDayTimestamp") long lastDayTimestamp);
+
+    List<ApiDataCountResult> countRunResultByProjectID(String projectId);
 }
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioMapper.xml
index e7c638e10c..298c8a75d5 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioMapper.xml
@@ -108,5 +108,19 @@
         </foreach>
     </update>
 
+    <select id="countByProjectID" resultType="java.lang.Long">
+        SELECT COUNT(id) AS countNumber FROM api_scenario WHERE project_id = #{0}
+    </select>
+    <select id="countByProjectIDAndCreatInThisWeek" resultType="java.lang.Long">
+        SELECT count(id) AS countNumber FROM api_scenario
+        WHERE project_id = #{projectId}
+        AND create_time BETWEEN #{firstDayTimestamp} AND #{lastDayTimestamp}
+    </select>
+
+    <select id="countRunResultByProjectID" resultType="io.metersphere.api.dto.dataCount.ApiDataCountResult">
+        SELECT count(id) AS countNumber, if(last_result is null,"notRun",last_result) AS groupField  FROM api_scenario
+        WHERE project_id = #{0}
+        GROUP BY groupField
+    </select>
 
 </mapper>
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioReportMapper.java b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioReportMapper.java
index 122fb7789f..3d26bc99a5 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioReportMapper.java
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioReportMapper.java
@@ -13,14 +13,8 @@ public interface ExtApiScenarioReportMapper {
 
     APIReportResult get(@Param("reportId") String reportId);
 
-    @Select("SELECT count(id) AS countNumber FROM api_scenario_report WHERE project_id = #{0} ")
     long countByProjectID(String projectId);
 
-    @Select({
-            "SELECT count(id) AS countNumber FROM api_scenario_report ",
-            "WHERE project_id = #{projectId} ",
-            "AND create_time BETWEEN #{firstDayTimestamp} AND #{lastDayTimestamp} "
-    })
     long countByProjectIDAndCreateInThisWeek(@Param("projectId") String projectId, @Param("firstDayTimestamp") long firstDayTimestamp, @Param("lastDayTimestamp") long lastDayTimestamp);
 
 }
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioReportMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioReportMapper.xml
index e5349f836e..ff7d90b4d6 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioReportMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioReportMapper.xml
@@ -166,4 +166,12 @@
         ORDER BY r.update_time DESC
     </select>
 
+    <select id="countByProjectID" resultType="java.lang.Long">
+        SELECT count(id) AS countNumber FROM api_scenario_report WHERE project_id = #{0}
+    </select>
+    <select id="countByProjectIDAndCreateInThisWeek" resultType="java.lang.Long">
+        SELECT count(id) AS countNumber FROM api_scenario_report
+        WHERE project_id = #{projectId}
+        AND create_time BETWEEN #{firstDayTimestamp} AND #{lastDayTimestamp}
+    </select>
 </mapper>
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestCaseMapper.java b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestCaseMapper.java
index 9bd14b82f1..cde8b8109f 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestCaseMapper.java
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestCaseMapper.java
@@ -15,19 +15,7 @@ public interface ExtApiTestCaseMapper {
     List<ApiTestCaseResult> list(@Param("request") ApiTestCaseRequest request);
     List<ApiTestCaseDTO> listSimple(@Param("request") ApiTestCaseRequest request);
 
-    @Select({
-            "SELECT apiDef.protocol AS groupField,COUNT(testCase.id) AS countNumber FROM api_test_case testCase ",
-            "INNER JOIN  api_definition apiDef ON testCase.api_definition_id = apiDef.id ",
-            "WHERE testCase.project_id = #{0} ",
-            "GROUP BY apiDef.protocol "
-    })
     List<ApiDataCountResult> countProtocolByProjectID(String projectId);
 
-    @Select({
-            "SELECT count(testCase.id) AS countNumber FROM api_test_case testCase ",
-            "INNER JOIN  api_definition apiDef ON testCase.api_definition_id = apiDef.id ",
-            "WHERE testCase.project_id = #{projectId} ",
-            "AND testCase.create_time BETWEEN #{firstDayTimestamp} AND #{lastDayTimestamp} "
-    })
     long countByProjectIDAndCreateInThisWeek(@Param("projectId") String projectId, @Param("firstDayTimestamp") long firstDayTimestamp, @Param("lastDayTimestamp") long lastDayTimestamp);
 }
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestCaseMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestCaseMapper.xml
index 6268fdb7d4..5fc19e6842 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestCaseMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestCaseMapper.xml
@@ -252,4 +252,16 @@
             </foreach>
         </if>
     </select>
+    <select id="countProtocolByProjectID" resultType="io.metersphere.api.dto.dataCount.ApiDataCountResult">
+        SELECT apiDef.protocol AS groupField,COUNT(testCase.id) AS countNumber FROM api_test_case testCase
+        INNER JOIN  api_definition apiDef ON testCase.api_definition_id = apiDef.id
+        WHERE testCase.project_id = #{0}
+        GROUP BY apiDef.protocol
+    </select>
+    <select id="countByProjectIDAndCreateInThisWeek" resultType="java.lang.Long">
+        SELECT count(testCase.id) AS countNumber FROM api_test_case testCase
+        INNER JOIN  api_definition apiDef ON testCase.api_definition_id = apiDef.id
+        WHERE testCase.project_id = #{projectId}
+        AND testCase.create_time BETWEEN #{firstDayTimestamp} AND #{lastDayTimestamp}
+    </select>
 </mapper>
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestReportMapper.java b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestReportMapper.java
index 6f6baf7120..ea9a4db48c 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestReportMapper.java
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestReportMapper.java
@@ -2,6 +2,7 @@ package io.metersphere.base.mapper.ext;
 
 import io.metersphere.api.dto.APIReportResult;
 import io.metersphere.api.dto.QueryAPIReportRequest;
+import io.metersphere.api.dto.dataCount.ApiDataCountResult;
 import io.metersphere.dto.ApiReportDTO;
 import io.metersphere.dto.DashboardTestDTO;
 import org.apache.ibatis.annotations.Param;
@@ -19,21 +20,7 @@ public interface ExtApiTestReportMapper {
 
     List<DashboardTestDTO> selectDashboardTests(@Param("workspaceId") String workspaceId, @Param("startTimestamp") long startTimestamp);
 
+    List<ApiDataCountResult> countByWorkspaceIdAndGroupGroupByExecuteResult(@Param("workspaceID") String workspaceID, @Param("group")String group);
 
-    @Select({
-            "SELECT COUNT(testReportDetail.report_id) AS countNumber FROM api_test_report_detail testReportDetail ",
-            "INNER JOIN `schedule` sch ON sch.resource_id = testReportDetail.test_id ",
-            "INNER JOIN api_test_report testReport ON testReportDetail.report_id = testReport.id ",
-            "WHERE workspace_id = #{workspaceID}  AND `group` = #{group} ",
-    })
-    long countByWorkspaceIdAndGroup(@Param("workspaceID") String workspaceID, @Param("group")String group);
-
-    @Select({
-            "SELECT COUNT(testReportDetail.report_id) AS countNumber FROM api_test_report_detail testReportDetail ",
-            "INNER JOIN `schedule` sch ON sch.resource_id = testReportDetail.test_id ",
-            "INNER JOIN api_test_report testReport ON testReportDetail.report_id = testReport.id ",
-            "WHERE workspace_id = #{workspaceID}  AND `group` = #{group} ",
-            "AND testReport.create_time BETWEEN #{startTime} and #{endTime} ",
-    })
     long countByProjectIDAndCreateInThisWeek(@Param("workspaceID") String workspaceID, @Param("group")String group, @Param("startTime") long startTime, @Param("endTime")long endTime);
 }
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestReportMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestReportMapper.xml
index 5cbc729bf8..64af48550c 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestReportMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestReportMapper.xml
@@ -152,4 +152,19 @@
         GROUP BY x
     </select>
 
+    <select id="countByWorkspaceIdAndGroupGroupByExecuteResult" resultType="io.metersphere.api.dto.dataCount.ApiDataCountResult">
+        SELECT testReport.`status` AS groupField,COUNT(testReportDetail.report_id) AS countNumber
+        FROM api_test_report_detail testReportDetail
+        INNER JOIN `schedule` sch ON sch.resource_id = testReportDetail.test_id
+        INNER JOIN api_test_report testReport ON testReportDetail.report_id = testReport.id
+        WHERE workspace_id = #{workspaceID}  AND `group` = #{group}
+    </select>
+
+    <select id="countByProjectIDAndCreateInThisWeek" resultType="java.lang.Long">
+        SELECT COUNT(testReportDetail.report_id) AS countNumber FROM api_test_report_detail testReportDetail
+        INNER JOIN `schedule` sch ON sch.resource_id = testReportDetail.test_id
+        INNER JOIN api_test_report testReport ON testReportDetail.report_id = testReport.id
+        WHERE workspace_id = #{workspaceID}  AND `group` = #{group}
+        AND testReport.create_time BETWEEN #{startTime} and #{endTime}
+    </select>
 </mapper>
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtScheduleMapper.java b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtScheduleMapper.java
index 28605aa975..b43f0dde45 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtScheduleMapper.java
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtScheduleMapper.java
@@ -11,24 +11,9 @@ import java.util.List;
 public interface ExtScheduleMapper {
     List<ScheduleDao> list(@Param("request") QueryScheduleRequest request);
 
-
-    @Select("SELECT COUNT(id) AS countNumber FROM `schedule` WHERE `workspace_id` = #{workspaceId} AND `group` = #{group} ")
     long countTaskByWorkspaceIdAndGroup(@Param("workspaceId") String workspaceId,@Param("group") String group);
 
-    @Select({
-            "SELECT COUNT(id) AS countNumber FROM `schedule` ",
-            "WHERE workspace_id = #{workspaceId} ",
-            "AND `group` = #{group} ",
-            "AND create_time BETWEEN #{startTime} and #{endTime}; "
-    })
     long countTaskByWorkspaceIdAndGroupAndCreateTimeRange(@Param("workspaceId")String workspaceId,@Param("group") String group, @Param("startTime") long startTime, @Param("endTime") long endTime);
 
-    @Select({
-            "SELECT apiTest.`name` AS scenario,sch.id AS taskID,sch.`value` AS rule,sch.`enable` AS `taskStatus`,u.`name` AS creator,sch.update_time AS updateTime ",
-            "FROM api_test apiTest ",
-            "INNER JOIN `schedule` sch ON apiTest.id = sch.resource_id ",
-            "INNER JOIN `user` u ON u.id = sch.user_id ",
-            "WHERE sch.`enable` = true AND sch.workspace_id = #{0,jdbcType=VARCHAR}"
-    })
     List<TaskInfoResult> findRunningTaskInfoByWorkspaceID(String workspaceID);
 }
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtScheduleMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtScheduleMapper.xml
index 5cb36cffce..d3e7e87d85 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtScheduleMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtScheduleMapper.xml
@@ -36,4 +36,20 @@
         </if>
     </select>
 
+    <select id="countTaskByWorkspaceIdAndGroup" resultType="java.lang.Long">
+        SELECT COUNT(id) AS countNumber FROM `schedule` WHERE `workspace_id` = #{workspaceId} AND `group` = #{group}
+    </select>
+    <select id="countTaskByWorkspaceIdAndGroupAndCreateTimeRange" resultType="java.lang.Long">
+        SELECT COUNT(id) AS countNumber FROM `schedule`
+        WHERE workspace_id = #{workspaceId}
+        AND `group` = #{group}
+        AND create_time BETWEEN #{startTime} and #{endTime}
+    </select>
+    <select id="findRunningTaskInfoByWorkspaceID" resultType="io.metersphere.api.dto.dataCount.response.TaskInfoResult">
+        SELECT apiTest.`name` AS scenario,sch.id AS taskID,sch.`value` AS rule,sch.`enable` AS `taskStatus`,u.`name` AS creator,sch.update_time AS updateTime
+        FROM api_test apiTest
+        INNER JOIN `schedule` sch ON apiTest.id = sch.resource_id
+        INNER JOIN `user` u ON u.id = sch.user_id
+        WHERE sch.`enable` = true AND sch.workspace_id = #{0,jdbcType=VARCHAR}
+    </select>
 </mapper>
\ No newline at end of file
diff --git a/frontend/src/business/components/api/automation/scenario/ScenarioExtendBtns.vue b/frontend/src/business/components/api/automation/scenario/ScenarioExtendBtns.vue
index 27fd0f24ea..bba3710ec5 100644
--- a/frontend/src/business/components/api/automation/scenario/ScenarioExtendBtns.vue
+++ b/frontend/src/business/components/api/automation/scenario/ScenarioExtendBtns.vue
@@ -5,17 +5,20 @@
     </el-link>
     <el-dropdown-menu slot="dropdown">
       <el-dropdown-item command="ref">{{ $t('api_test.automation.view_ref') }}</el-dropdown-item>
+<!--      <el-dropdown-item command="schedule">{{ $t('api_test.automation.schedule') }}</el-dropdown-item>-->
     </el-dropdown-menu>
     <ms-reference-view ref="viewRef"/>
+    <ms-schedule-maintain ref="scheduleMaintain" />
   </el-dropdown>
 </template>
 
 <script>
   import MsReferenceView from "@/business/components/api/automation/scenario/ReferenceView";
+  // import MsScheduleMaintain from "@/business/components/api/automation/schedule/ScheduleMaintain"
 
   export default {
     name: "MsScenarioExtendButtons",
-    components: {MsReferenceView},
+    components: { MsReferenceView},
     props: {
       row: Object
     },
@@ -25,6 +28,9 @@
           case  "ref":
             this.$refs.viewRef.open(this.row);
             break;
+          case "schedule":
+            this.$refs.scheduleMaintain.open(this.row);
+            break;
         }
       },
     }
diff --git a/frontend/src/business/components/api/homepage/ApiTestHomePage.vue b/frontend/src/business/components/api/homepage/ApiTestHomePage.vue
index a5d08b6ab9..6ed0a37f24 100644
--- a/frontend/src/business/components/api/homepage/ApiTestHomePage.vue
+++ b/frontend/src/business/components/api/homepage/ApiTestHomePage.vue
@@ -1,42 +1,34 @@
 <template>
   <ms-container>
+    <el-header height="0">
+      <div style="float: right">
+        <span>
+          😊 MeterSphere温馨提醒 —— 多喝热水哟！
+        </span>
+      </div>
+    </el-header>
     <ms-main-container v-loading="result.loading">
       <el-row :gutter="0"></el-row>
-      <el-row :gutter="0">
-        <el-col :span="4"  >
+      <el-row :gutter="10">
+        <el-col :span="6"  >
           <ms-api-info-card :api-count-data="apiCountData"/>
         </el-col>
-        <el-col :span="4" :offset="2">
+        <el-col :span="6" >
           <ms-test-case-info-card :test-case-count-data="testCaseCountData"/>
         </el-col>
-        <el-col :span="4" :offset="2">
+        <el-col :span="6" >
           <ms-scene-info-card :scene-count-data="sceneCountData"/>
         </el-col>
-        <el-col :span="4" :offset="2">
+        <el-col :span="6" >
           <ms-schedule-task-info-card :schedule-task-count-data="scheduleTaskCountData"/>
         </el-col>
       </el-row>
 
-      <el-row>
-        <el-col :span="4"  >
-          <ms-api-detail-card :api-count-data="apiCountData"/>
-        </el-col>
-        <el-col :span="4" :offset="2">
-          <ms-test-case-detail-card :test-case-count-data="testCaseCountData"/>
-        </el-col>
-        <el-col :span="4" :offset="2">
-          <ms-scene-detail-card :scene-count-data="sceneCountData"/>
-        </el-col>
-        <el-col :span="4" :offset="2">
-          <ms-schedule-task-detail-card :schedule-task-count-data="scheduleTaskCountData"/>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20" >
-        <el-col :span="11"  >
+      <el-row :gutter="10" >
+        <el-col :span="12"  >
           <ms-failure-test-case-list/>
         </el-col>
-        <el-col  :span="13"  >
+        <el-col  :span="12"  >
           <ms-running-task-list/>
         </el-col>
       </el-row>
@@ -53,21 +45,21 @@ import MsSceneInfoCard from "./components/SceneInfoCard";
 import MsScheduleTaskInfoCard from "./components/ScheduleTaskInfoCard";
 import MsTestCaseInfoCard from "./components/TestCaseInfoCard";
 
-import MsApiDetailCard from "./components/ApiDetailCard";
-import MsSceneDetailCard from "./components/SceneDetailCard";
-import MsScheduleTaskDetailCard from "./components/ScheduleTaskDetailCard";
-import MsTestCaseDetailCard from "./components/TestCaseDetailCard";
+// import MsApiDetailCard from "./components/ApiDetailCard";
+// import MsSceneDetailCard from "./components/SceneDetailCard";
+// import MsScheduleTaskDetailCard from "./components/ScheduleTaskDetailCard";
+// import MsTestCaseDetailCard from "./components/TestCaseDetailCard";
 
 import MsFailureTestCaseList from "./components/FailureTestCaseList";
 import MsRunningTaskList from "./components/RunningTaskList"
 import {getCurrentProjectID,getCurrentWorkspaceId} from "@/common/js/utils";
 
 export default {
-  name: "ApiTestHome",
+  name: "ApiTestHomePage",
 
   components: {
     MsApiInfoCard, MsSceneInfoCard, MsScheduleTaskInfoCard, MsTestCaseInfoCard,
-    MsApiDetailCard, MsSceneDetailCard, MsScheduleTaskDetailCard, MsTestCaseDetailCard,
+    // MsApiDetailCard, MsSceneDetailCard, MsScheduleTaskDetailCard, MsTestCaseDetailCard,
     MsFailureTestCaseList,MsRunningTaskList,
     MsMainContainer, MsContainer
   },
@@ -123,5 +115,4 @@ export default {
   margin-left: 20px;
   margin-right: 20px;
 }
-
 </style>
diff --git a/frontend/src/business/components/api/homepage/components/ApiDetailCard.vue b/frontend/src/business/components/api/homepage/components/ApiDetailCard.vue
deleted file mode 100644
index 504c104f77..0000000000
--- a/frontend/src/business/components/api/homepage/components/ApiDetailCard.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <el-card class="table-card" v-loading="result.loading">
-    <template v-slot:header>
-      <span class="title">
-        {{$t('api_test.home_page.api_details_card.title')}}
-      </span>
-    </template>
-    <el-container>
-      <el-main>
-          <div class="text item">
-            <br/>
-            {{$t('api_test.home_page.api_details_card.this_week_add',[apiCountData.thisWeekAddedCount])}}
-            <br/>
-            <br/>
-          </div>
-      </el-main>
-    </el-container>
-  </el-card>
-</template>
-
-<script>
-
-export default {
-  name: "MsApiDetailCard",
-  components: {},
-
-  data() {
-    return {
-      result: {},
-      loading: false
-    }
-  },
-  props:{
-    apiCountData:{},
-  },
-
-  methods: {
-    search() {
-      // this.result = this.$get("/api/apiCount/5", response => {
-      //   this.apiCountData = response.data;
-      // });
-    },
-    // link(row) {
-    //   this.$router.push({
-    //     path: '/api/report/view/' + row.id,
-    //   })
-    // }
-  },
-
-  created() {
-    this.search();
-  },
-  activated() {
-    this.search();
-  }
-}
-</script>
-<style scoped>
-
-</style>
diff --git a/frontend/src/business/components/api/homepage/components/ApiInfoCard.vue b/frontend/src/business/components/api/homepage/components/ApiInfoCard.vue
index b4c632a872..2c7db625e6 100644
--- a/frontend/src/business/components/api/homepage/components/ApiInfoCard.vue
+++ b/frontend/src/business/components/api/homepage/components/ApiInfoCard.vue
@@ -1,33 +1,93 @@
 <template>
-  <el-card class="table-card" v-loading="result.loading">
-    <template v-slot:header>
+  <el-card class="table-card" v-loading="result.loading" body-style="padding:10px;">
+    <div slot="header" >
       <span class="title">
         {{$t('api_test.home_page.api_count_card.title')}}
       </span>
-    </template>
+    </div>
     <el-container>
-      <el-aside width="40%">
-        <span class="countNumber">
-          {{apiCountData.allApiDataCountNumber}}
-        </span>
-        {{$t('api_test.home_page.unit_of_measurement')}}
-        </el-aside>
-      <el-container>
-        <el-main>
-          <div class="text item">
-            {{'HTTP: '+apiCountData.httpApiDataCountNumber}}
-          </div>
-          <div class="text item">
-            {{'RPC:'+apiCountData.rpcApiDataCountNumber}}
-          </div>
-          <div class="text item">
-            {{'TCP:'+apiCountData.tcpApiDataCountNumber}}
-          </div>
-          <div class="text item">
-            {{'SQL:'+apiCountData.sqlApiDataCountNumber}}
-          </div>
-        </el-main>
-      </el-container>
+      <el-aside width="120px">
+        <div class="main-number-show">
+          <span class="count-number">
+            {{apiCountData.allApiDataCountNumber}}
+          </span>
+          <span style="color: #6C317C;">
+            {{$t('api_test.home_page.unit_of_measurement')}}
+          </span>
+        </div>
+      </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;">
+              <div class="count-info-div" v-html="apiCountData.httpCountStr"></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="apiCountData.rpcCountStr"></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="apiCountData.tcpCountStr"></div>
+            </el-col>
+            <el-col :span="6" style="padding: 5px;">
+              <div class="count-info-div" v-html="apiCountData.sqlCountStr"></div>
+            </el-col>
+          </el-row>
+        </div>
+      </el-main>
+    </el-container>
+    <el-container class="detail-container">
+      <el-header style="height:20px;padding: 0px;margin-bottom: 10px;">
+        <el-row>
+          <el-col>
+            {{$t('api_test.home_page.api_details_card.this_week_add',[apiCountData.thisWeekAddedCount])}}
+          </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('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">
+                {{apiCountData.completionRage}}
+              </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.running')}}
+                      {{"\xa0\xa0"}}
+                      {{apiCountData.runningCount}}
+                    </span>
+                  </el-col>
+                  <el-col>
+                    <span class="default-property">
+                      {{$t('api_test.home_page.detail_card.not_started')}}
+                      {{"\xa0\xa0"}}
+                      {{apiCountData.notStartedCount}}
+                    </span>
+                  </el-col>
+                  <el-col>
+                    <span class="main-property">
+                      {{$t('api_test.home_page.detail_card.finished')}}
+                      {{"\xa0\xa0"}}
+                      {{apiCountData.finishedCount}}
+                    </span>
+                  </el-col>
+                </el-row>
+              </main>
+            </el-card>
+          </el-main>
+        </el-container>
+      </el-main>
     </el-container>
   </el-card>
 </template>
@@ -55,7 +115,47 @@ export default {
   line-height: 100px;
   text-align: center;
 }
-.countNumber{
-  font-size: 40px;
+.count-number{
+  font-family:'ArialMT', 'Arial', sans-serif;
+  font-size:33px;
+  color: #6C317C;
+}
+
+.main-number-show {
+  width: 100px;
+  height: 100px;
+  border-style: solid;
+  border-width: 7px;
+  border-color: #CDB9D2;
+  border-radius:50%;
+
+}
+
+.count-number-show{
+  margin:20px auto;
+}
+.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{
+
+}
+.main-property{
+  color: #F39021;
+}
+
+.el-card /deep/ .el-card__header {
+  border-bottom: 0px solid #EBEEF5;
+}
+
+.count-info-div{
+  margin: 3px;
+}
+.count-info-div >>>p{
+  font-size: 10px;
 }
 </style>
diff --git a/frontend/src/business/components/api/homepage/components/FailureTestCaseList.vue b/frontend/src/business/components/api/homepage/components/FailureTestCaseList.vue
index 4edee720cd..1e7235817b 100644
--- a/frontend/src/business/components/api/homepage/components/FailureTestCaseList.vue
+++ b/frontend/src/business/components/api/homepage/components/FailureTestCaseList.vue
@@ -7,7 +7,18 @@
     </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="250" show-overflow-tooltip/>
+      <el-table-column prop="caseName"  :label="$t('api_test.home_page.failed_case_list.table_coloum.case_name')" width="150" show-overflow-tooltip/>
+      <el-table-column
+        prop="caseType"
+        column-key="caseType"
+        :label="$t('api_test.home_page.failed_case_list.table_coloum.case_type')"
+        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')"/>
+        </template>
+      </el-table-column>
       <el-table-column prop="testPlan"  :label="$t('api_test.home_page.failed_case_list.table_coloum.test_plan')" show-overflow-tooltip/>
       <el-table-column prop="failureTimes"  :label="$t('api_test.home_page.failed_case_list.table_coloum.failure_times')" width="100" show-overflow-tooltip/>
     </el-table>
@@ -16,10 +27,14 @@
 
 <script>
 import {getCurrentProjectID} from "@/common/js/utils";
+import MsTag from "@/business/components/common/components/MsTag";
 
 export default {
   name: "MsFailureTestCaseList",
 
+  components: {
+    MsTag
+  },
 
   data() {
     return {
@@ -53,5 +68,8 @@ export default {
 .el-table {
   cursor:pointer;
 }
+.el-card /deep/ .el-card__header {
+  border-bottom: 0px solid #EBEEF5;
+}
 
 </style>
diff --git a/frontend/src/business/components/api/homepage/components/RunningTaskList.vue b/frontend/src/business/components/api/homepage/components/RunningTaskList.vue
index 254ae3cba1..60c4bf7b60 100644
--- a/frontend/src/business/components/api/homepage/components/RunningTaskList.vue
+++ b/frontend/src/business/components/api/homepage/components/RunningTaskList.vue
@@ -14,13 +14,13 @@
           <el-switch @click.stop.native v-model="scope.row.taskStatus" @change="updateTask(scope.row)"/>
         </template>
       </el-table-column>
-      <el-table-column width="200" :label="$t('api_test.home_page.running_task_list.table_coloum.next_execution_time')">
+      <el-table-column width="170" :label="$t('api_test.home_page.running_task_list.table_coloum.next_execution_time')">
         <template v-slot:default="scope">
           <span>{{ scope.row.nextExecutionTime | timestampFormatDate }}</span>
         </template>
       </el-table-column>
-      <el-table-column prop="creator"  :label="$t('api_test.home_page.running_task_list.table_coloum.create_user')" width="150" show-overflow-tooltip/>
-      <el-table-column width="200" :label="$t('api_test.home_page.running_task_list.table_coloum.update_time')">
+      <el-table-column prop="creator"  :label="$t('api_test.home_page.running_task_list.table_coloum.create_user')" width="100" show-overflow-tooltip/>
+      <el-table-column width="170" :label="$t('api_test.home_page.running_task_list.table_coloum.update_time')">
         <template v-slot:default="scope">
           <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
         </template>
@@ -75,5 +75,8 @@ export default {
 .el-table {
   cursor:pointer;
 }
+.el-card /deep/ .el-card__header {
+  border-bottom: 0px solid #EBEEF5;
+}
 
 </style>
diff --git a/frontend/src/business/components/api/homepage/components/SceneDetailCard.vue b/frontend/src/business/components/api/homepage/components/SceneDetailCard.vue
deleted file mode 100644
index d00da7be64..0000000000
--- a/frontend/src/business/components/api/homepage/components/SceneDetailCard.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <el-card class="table-card" v-loading="result.loading">
-    <template v-slot:header>
-      <span class="title">
-        {{$t('api_test.home_page.test_scene_details_card.title')}}
-      </span>
-    </template>
-    <el-container>
-        <el-main>
-          <div class="text item">
-            {{$t('api_test.home_page.test_scene_details_card.this_week_add',[sceneCountData.thisWeekAddedCount])}}
-          </div>
-          <div class="text item">
-            {{$t('api_test.home_page.test_scene_details_card.this_week_execute',[sceneCountData.thisWeekExecutedCount])}}
-          </div>
-          <div class="text item">
-            {{$t('api_test.home_page.test_scene_details_card.executed',[sceneCountData.executedCount])}}
-          </div>
-        </el-main>
-    </el-container>
-  </el-card>
-</template>
-
-<script>
-
-export default {
-  name: "MsSceneDetailCard",
-  components: {},
-
-  data() {
-    return {
-      result: {},
-      loading: false
-    }
-  },
-
-  methods: {
-  },
-  props:{
-    sceneCountData:{},
-  },
-}
-</script>
-<style scoped>
-
-</style>
diff --git a/frontend/src/business/components/api/homepage/components/SceneInfoCard.vue b/frontend/src/business/components/api/homepage/components/SceneInfoCard.vue
index 758f145d9c..7da19aaa67 100644
--- a/frontend/src/business/components/api/homepage/components/SceneInfoCard.vue
+++ b/frontend/src/business/components/api/homepage/components/SceneInfoCard.vue
@@ -1,29 +1,88 @@
 <template>
-  <el-card class="table-card" v-loading="result.loading">
-    <template v-slot:header>
+  <el-card class="table-card" v-loading="result.loading" body-style="padding:10px;">
+    <div slot="header" >
       <span class="title">
         {{$t('api_test.home_page.test_scene_count_card.title')}}
       </span>
-    </template>
+    </div>
     <el-container>
-      <el-aside width="40%">
-        <span class="countNumber">
-          {{sceneCountData.allApiDataCountNumber}}
-        </span>
-        {{$t('api_test.home_page.unit_of_measurement')}}
-      </el-aside>
-      <el-container>
-        <el-main>
-          <div class="text item">
-          </div>
-          <div class="text item">
-          </div>
-          <div class="text item">
-          </div>
-          <div class="text item">
-          </div>
-        </el-main>
-      </el-container>
+      <el-main style="padding: 0px 0px 0px 0px; line-height: 100px; text-align: center;">
+        <div class="main-number-show" style="margin: 0px auto;">
+          <span class="count-number">
+            {{sceneCountData.allApiDataCountNumber}}
+          </span>
+          {{$t('api_test.home_page.unit_of_measurement')}}
+        </div>
+      </el-main>
+    </el-container>
+    <el-container class="detail-container">
+      <el-header style="height:20px;padding: 0px;margin-bottom: 10px;">
+      <el-row :gutter="20" class="hidden-lg-and-down ">
+        <el-col  :span="8">
+          {{$t('api_test.home_page.test_scene_details_card.this_week_add',[sceneCountData.thisWeekAddedCount])}}
+        </el-col>
+        <el-col :span="8" >
+          {{$t('api_test.home_page.test_scene_details_card.this_week_execute',[sceneCountData.thisWeekExecutedCount])}}
+        </el-col>
+        <el-col :span="8" >
+          {{$t('api_test.home_page.test_scene_details_card.executed',[sceneCountData.executedCount])}}
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="hidden-xl-only">
+        <el-col  :span="8">
+          <div class="count-info-div" v-html="$t('api_test.home_page.test_scene_details_card.this_week_add_sm',[sceneCountData.thisWeekAddedCount])"></div>
+        </el-col>
+        <el-col :span="8" >
+          <div class="count-info-div" v-html="$t('api_test.home_page.test_scene_details_card.this_week_execute_sm',[sceneCountData.thisWeekExecutedCount])"></div>
+        </el-col>
+        <el-col :span="8" >
+          <div class="count-info-div" v-html="$t('api_test.home_page.test_scene_details_card.executed_sm',[sceneCountData.executedCount])"></div>
+        </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('api_test.home_page.detail_card.rate.pass')+":"}}
+              </el-aside>
+              <el-main style="padding: 0px 0px 0px 0px; line-height: 100px; text-align: center;">
+                <span class="count-number">
+                {{sceneCountData.passRage}}
+              </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="defaultProperty">
+                      {{$t('api_test.home_page.detail_card.unexecute')}}
+                      {{"\xa0\xa0"}}
+                      {{sceneCountData.unexecuteCount}}
+                    </span>
+                  </el-col>
+                  <el-col>
+                    {{$t('api_test.home_page.detail_card.execution_failed')}}
+                    {{"\xa0\xa0"}}
+                    {{sceneCountData.executionFailedCount}}
+                  </el-col>
+                  <el-col>
+                    <span class="main-property">
+                      {{$t('api_test.home_page.detail_card.execution_pass')}}
+                      {{"\xa0\xa0"}}
+                      {{sceneCountData.executionPassCount}}
+                    </span>
+                  </el-col>
+                </el-row>
+              </main>
+            </el-card>
+          </el-main>
+        </el-container>
+      </el-main>
     </el-container>
   </el-card>
 </template>
@@ -52,13 +111,50 @@ export default {
 </script>
 <style scoped>
 .el-aside {
-  /*background-color: #D3DCE6;*/
-  /*color: #333;*/
-  text-align: center;
   line-height: 100px;
+  text-align: center;
+}
+.count-number{
+  font-family:'ArialMT', 'Arial', sans-serif;
+  font-size:33px;
+  color: #6C317C;
+  margin:20px auto;
 }
 
-.countNumber{
-  font-size: 40px;
+.main-number-show {
+  width: 100px;
+  height: 100px;
+  border-style: solid;
+  border-width: 7px;
+  border-color: #CDB9D2;
+  border-radius:50%;
+}
+
+.count-number-show{
+  margin:20px auto;
+}
+.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);
+}
+.defaultProperty{
+
+}
+.main-property{
+  color: #F39021;
+}
+
+.el-card /deep/ .el-card__header {
+  border-bottom: 0px solid #EBEEF5;
+}
+
+.count-info-div{
+  margin: 3px;
+}
+.count-info-div >>>p{
+  font-size: 10px;
 }
 </style>
diff --git a/frontend/src/business/components/api/homepage/components/ScheduleTaskDetailCard.vue b/frontend/src/business/components/api/homepage/components/ScheduleTaskDetailCard.vue
deleted file mode 100644
index 3c2ac75d72..0000000000
--- a/frontend/src/business/components/api/homepage/components/ScheduleTaskDetailCard.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <el-card class="table-card" v-loading="result.loading">
-    <template v-slot:header>
-      <span class="title">
-        {{$t('api_test.home_page.schedule_task_details_card.title')}}
-      </span>
-    </template>
-    <el-container>
-      <el-main>
-        <div class="text item">
-          {{$t('api_test.home_page.schedule_task_details_card.this_week_add',[scheduleTaskCountData.thisWeekAddedCount])}}
-        </div>
-        <div class="text item">
-          {{$t('api_test.home_page.schedule_task_details_card.this_week_execute',[scheduleTaskCountData.thisWeekExecutedCount])}}
-        </div>
-        <div class="text item">
-          {{$t('api_test.home_page.schedule_task_details_card.executed',[scheduleTaskCountData.executedCount])}}
-        </div>
-      </el-main>
-    </el-container>
-  </el-card>
-</template>
-
-<script>
-
-export default {
-  name: "MsTestCaseDetailCard",
-
-  components: {},
-
-  data() {
-    return {
-      result: {},
-      loading: false
-    }
-  },
-
-  props:{
-    scheduleTaskCountData:{},
-  },
-
-  methods: {
-  },
-
-  created() {
-  },
-  activated() {
-  }
-}
-</script>
-<style scoped>
-
-</style>
diff --git a/frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue b/frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue
index ead029291d..8d57c6ddcf 100644
--- a/frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue
+++ b/frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue
@@ -1,40 +1,96 @@
 <template>
-  <el-card class="table-card" v-loading="result.loading">
-    <template v-slot:header>
+  <el-card class="table-card" v-loading="result.loading" body-style="padding:10px;">
+    <div slot="header" >
       <span class="title">
         {{$t('api_test.home_page.schedule_task_count_card.title')}}
       </span>
-    </template>
+    </div>
     <el-container>
-      <el-aside width="40%">
-        <span class="countNumber">
-          {{scheduleTaskCountData.allApiDataCountNumber}}
-        </span>
-        {{$t('api_test.home_page.unit_of_measurement')}}
-      </el-aside>
-      <el-container>
-        <el-main>
-          <div class="text item">
+      <el-main style="padding: 0px 0px 0px 0px; line-height: 100px; text-align: center;">
+        <div class="main-number-show" style="margin: 0px auto;">
+          <span class="count-number">
+            {{scheduleTaskCountData.allApiDataCountNumber}}
+          </span>
+          {{$t('api_test.home_page.unit_of_measurement')}}
+        </div>
+      </el-main>
+    </el-container>
 
-          </div>
-          <div class="text item">
-
-          </div>
-          <div class="text item">
-
-          </div>
-          <div class="text item">
-
-          </div>
-        </el-main>
-      </el-container>
+    <el-container class="detail-container">
+      <el-header style="height:20px;padding: 0px;margin-bottom: 10px;">
+        <el-row :gutter="20" class="hidden-lg-and-down ">
+          <el-col  :span="8">
+            {{$t('api_test.home_page.schedule_task_details_card.this_week_add',[scheduleTaskCountData.thisWeekAddedCount])}}
+          </el-col>
+          <el-col :span="8" >
+            {{$t('api_test.home_page.schedule_task_details_card.this_week_execute',[scheduleTaskCountData.thisWeekExecutedCount])}}
+          </el-col>
+          <el-col :span="8" >
+            {{$t('api_test.home_page.schedule_task_details_card.executed',[scheduleTaskCountData.executedCount])}}
+          </el-col>
+        </el-row>
+        <el-row :gutter="20" class="hidden-xl-only">
+          <el-col  :span="8">
+            <div class="count-info-div" v-html="$t('api_test.home_page.schedule_task_details_card.this_week_add_sm',[scheduleTaskCountData.thisWeekAddedCount])"></div>
+          </el-col>
+          <el-col :span="8" >
+            <div class="count-info-div" v-html="$t('api_test.home_page.schedule_task_details_card.this_week_execute_sm',[scheduleTaskCountData.thisWeekExecutedCount])"></div>
+          </el-col>
+          <el-col :span="8" >
+            <div class="count-info-div" v-html="$t('api_test.home_page.schedule_task_details_card.executed_sm',[scheduleTaskCountData.executedCount])"></div>
+          </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('api_test.home_page.detail_card.rate.success')+":"}}
+              </el-aside>
+              <el-main style="padding: 0px 0px 0px 0px; line-height: 100px; text-align: center;">
+                <span class="count-number">
+                {{scheduleTaskCountData.successRage}}
+              </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.failed')}}
+                      {{"\xa0\xa0"}}
+                      {{scheduleTaskCountData.failedCount}}
+                    </span>
+                  </el-col>
+                  <el-col style=" height: 20px">
+                  </el-col>
+                  <el-col>
+                    <span class="main-property">
+                      {{$t('api_test.home_page.detail_card.success')}}
+                      {{"\xa0\xa0"}}
+                      {{scheduleTaskCountData.successCount}}
+                    </span>
+                  </el-col>
+                </el-row>
+              </main>
+            </el-card>
+          </el-main>
+        </el-container>
+      </el-main>
     </el-container>
   </el-card>
 </template>
 
 <script>
+import 'element-ui/lib/theme-chalk/display.css';
+
 
 export default {
+
   name: "MsScheduleTaskInfoCard",
 
   components: {},
@@ -63,8 +119,47 @@ export default {
   line-height: 100px;
   text-align: center;
 }
+.count-number{
+  font-family:'ArialMT', 'Arial', sans-serif;
+  font-size:33px;
+  color: #6C317C;
+}
 
-.countNumber{
-  font-size: 40px;
+.main-number-show {
+  width: 100px;
+  height: 100px;
+  border-style: solid;
+  border-width: 7px;
+  border-color: #CDB9D2;
+  border-radius:50%;
+
+}
+
+.count-number-show{
+  margin:20px auto;
+}
+.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{
+
+}
+.main-property{
+  color: #F39021;
+}
+
+.el-card /deep/ .el-card__header {
+  border-bottom: 0px solid #EBEEF5;
+}
+
+.count-info-div{
+  margin: 3px;
+}
+.count-info-div >>>p{
+  font-size: 10px;
 }
 </style>
diff --git a/frontend/src/business/components/api/homepage/components/TestCaseDetailCard.vue b/frontend/src/business/components/api/homepage/components/TestCaseDetailCard.vue
deleted file mode 100644
index fcbf770325..0000000000
--- a/frontend/src/business/components/api/homepage/components/TestCaseDetailCard.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <el-card class="table-card" v-loading="result.loading">
-    <template v-slot:header>
-      <span class="title">
-        {{$t('api_test.home_page.test_case_details_card.title')}}
-      </span>
-    </template>
-    <el-container>
-      <el-main>
-        <div class="text item">
-          {{$t('api_test.home_page.test_case_details_card.this_week_add',[testCaseCountData.thisWeekAddedCount])}}
-        </div>
-        <div class="text item">
-          {{$t('api_test.home_page.test_case_details_card.this_week_execute',[testCaseCountData.thisWeekExecutedCount])}}
-        </div>
-        <div class="text item">
-          {{$t('api_test.home_page.test_case_details_card.executed',[testCaseCountData.executedCount])}}
-        </div>
-      </el-main>
-    </el-container>
-  </el-card>
-</template>
-
-<script>
-
-export default {
-  name: "MsTestCaseDetailCard",
-
-  components: {},
-
-  data() {
-    return {
-      result: {},
-      loading: false
-    }
-  },
-
-  props:{
-    testCaseCountData:{},
-  },
-
-  methods: {
-  },
-
-  created() {
-  },
-  activated() {
-  }
-}
-</script>
-<style scoped>
-
-</style>
diff --git a/frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue b/frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue
index a1c4a1619c..97d07a8615 100644
--- a/frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue
+++ b/frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue
@@ -1,33 +1,105 @@
 <template>
-  <el-card class="table-card" v-loading="result.loading">
-    <template v-slot:header>
+  <el-card class="table-card" v-loading="result.loading" body-style="padding:10px;">
+    <div slot="header" >
       <span class="title">
         {{$t('api_test.home_page.test_case_count_card.title')}}
       </span>
-    </template>
+    </div>
     <el-container>
-      <el-aside width="40%">
-        <span class="countNumber">
-          {{testCaseCountData.allApiDataCountNumber}}
-        </span>
-        {{$t('api_test.home_page.unit_of_measurement')}}
+      <el-aside width="120px">
+        <div class="main-number-show">
+          <span class="count-number">
+            {{testCaseCountData.allApiDataCountNumber}}
+          </span>
+          <span style="color: #6C317C;">
+            {{$t('api_test.home_page.unit_of_measurement')}}
+          </span>
+        </div>
       </el-aside>
-      <el-container>
-        <el-main>
-          <div class="text item">
-            {{'HTTP: '+testCaseCountData.httpApiDataCountNumber}}
-          </div>
-          <div class="text item">
-            {{'RPC:'+testCaseCountData.rpcApiDataCountNumber}}
-          </div>
-          <div class="text item">
-            {{'TCP:'+testCaseCountData.tcpApiDataCountNumber}}
-          </div>
-          <div class="text item">
-            {{'SQL:'+testCaseCountData.sqlApiDataCountNumber}}
-          </div>
-        </el-main>
-      </el-container>
+      <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;">
+              <div class="count-info-div" v-html="testCaseCountData.httpCountStr"></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="testCaseCountData.rpcCountStr"></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="testCaseCountData.tcpCountStr"></div>
+            </el-col>
+            <el-col :span="6" style="padding: 5px;">
+              <div class="count-info-div" v-html="testCaseCountData.sqlCountStr"></div>
+            </el-col>
+          </el-row>
+        </div>
+      </el-main>
+    </el-container>
+    <el-container class="detail-container">
+      <el-header style="height:20px;padding: 0px;margin-bottom: 10px;">
+        <el-row :gutter="20" class="hidden-lg-and-down ">
+          <el-col  :span="8">
+            {{$t('api_test.home_page.test_case_details_card.this_week_add',[testCaseCountData.thisWeekAddedCount])}}
+          </el-col>
+          <el-col :span="8" >
+            {{$t('api_test.home_page.test_case_details_card.this_week_execute',[testCaseCountData.thisWeekExecutedCount])}}
+          </el-col>
+          <el-col :span="8" >
+            {{$t('api_test.home_page.test_case_details_card.executed',[testCaseCountData.executedCount])}}
+          </el-col>
+        </el-row>
+        <el-row :gutter="20" class="hidden-xl-only">
+          <el-col  :span="8">
+            <div class="count-info-div" v-html="$t('api_test.home_page.test_case_details_card.this_week_add_sm',[testCaseCountData.thisWeekAddedCount])"></div>
+          </el-col>
+          <el-col :span="8" >
+            <div class="count-info-div" v-html="$t('api_test.home_page.test_case_details_card.this_week_execute_sm',[testCaseCountData.thisWeekExecutedCount])"></div>
+          </el-col>
+          <el-col :span="8" >
+            <div class="count-info-div" v-html="$t('api_test.home_page.test_case_details_card.executed_sm',[testCaseCountData.executedCount])"></div>
+          </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('api_test.home_page.detail_card.rate.coverage')+":"}}
+              </el-aside>
+              <el-main style="padding: 0px 0px 0px 0px; line-height: 100px; text-align: center;">
+                <span class="count-number">
+                {{testCaseCountData.coverageRage}}
+              </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"}}
+                      {{testCaseCountData.uncoverageCount}}
+                    </span>
+                  </el-col>
+                  <el-col style=" height: 20px">
+                  </el-col>
+                  <el-col>
+                    <span class="main-property">
+                      {{$t('api_test.home_page.detail_card.coverage')}}
+                      {{"\xa0\xa0"}}
+                      {{testCaseCountData.coverageCount}}
+                    </span>
+                  </el-col>
+                </el-row>
+              </main>
+            </el-card>
+          </el-main>
+        </el-container>
+      </el-main>
     </el-container>
   </el-card>
 </template>
@@ -42,7 +114,7 @@ export default {
   data() {
     return {
       result: {},
-      loading: false
+      loading: false,
     }
   },
   props:{
@@ -52,6 +124,7 @@ export default {
   },
 
   created() {
+
   },
   activated() {
   }
@@ -62,8 +135,47 @@ export default {
   line-height: 100px;
   text-align: center;
 }
+.count-number{
+  font-family:'ArialMT', 'Arial', sans-serif;
+  font-size:33px;
+  color: #6C317C;
+}
 
-.countNumber{
-  font-size: 40px;
+.main-number-show {
+  width: 100px;
+  height: 100px;
+  border-style: solid;
+  border-width: 7px;
+  border-color: #CDB9D2;
+  border-radius:50%;
+
+}
+
+.count-number-show{
+  margin:20px auto;
+}
+.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{
+
+}
+.main-property{
+  color: #F39021;
+}
+
+.el-card /deep/ .el-card__header {
+  border-bottom: 0px solid #EBEEF5;
+}
+
+.count-info-div{
+  margin: 3px;
+}
+.count-info-div >>>p{
+  font-size: 10px;
 }
 </style>
diff --git a/frontend/src/i18n/en-US.js b/frontend/src/i18n/en-US.js
index 3be77383b3..5ac9a8deef 100644
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@@ -582,6 +582,7 @@ export default {
       remove: "Remove",
       view_ref: "View ref",
       case_ref: "Case ref",
+      schedule: "Scheduled Task",
       scenario_ref: "Scenario ref",
       plan_ref: "Plan ref",
       batch_add_plan: "Add plan",
@@ -800,14 +801,32 @@ export default {
         title: "API count",
       },
       test_case_count_card:{
-        title: "Test case count",
+        title: "Api test case count",
       },
       test_scene_count_card:{
-        title: "Scene count",
+        title: "Scene test case count",
       },
       schedule_task_count_card:{
         title: "Schedule task count",
       },
+      detail_card:{
+        running:"Running",
+        not_started:"Not started",
+        finished:"Finished",
+        uncoverage:"Uncoverage",
+        coverage:"Coverage",
+        unexecute:"Unexecute",
+        execution_failed:"Execution failed",
+        execution_pass:"Execution passed",
+        failed:"Failure",
+        success:"Success",
+        rate:{
+          completion:"Completion rate",
+          coverage:"Coverage rate",
+          pass:"Pass rate",
+          success:"Success rate",
+        },
+      },
       api_details_card:{
         title: "API",
         this_week_add:"Added {0} this week",
@@ -817,30 +836,46 @@ export default {
         this_week_add:"Added {0} this week",
         this_week_execute:"Executed {0} this week",
         executed:"Executed {0} in history",
+        this_week_add_sm:"Added {0}<br/> this week",
+        this_week_execute_sm:"Executed {0}<br/> this week",
+        executed_sm:"Executed {0}<br/> in history",
       },
       test_scene_details_card:{
         title: "Scene",
         this_week_add:"Added {0} this week",
         this_week_execute:"Executed {0} this week",
         executed:"Executed {0} in history",
+        this_week_add_sm:"Added {0}<br/> this week",
+        this_week_execute_sm:"Executed {0}<br/> this week",
+        executed_sm:"Executed {0}<br/> in history",
       },
       schedule_task_details_card:{
         title: "Schedule task",
         this_week_add:"Added {0} this week",
         this_week_execute:"Executed {0} this week",
         executed:"Executed {0} in history",
+        this_week_add_sm:"Added {0}<br/> this week",
+        this_week_execute_sm:"Executed {0}<br/> this week",
+        executed_sm:"Executed {0}<br/> in history",
       },
       failed_case_list:{
-        title: "Top 10 failure process set cases in the past 7 days",
+        title: "Top 10 failure cases about test plan in the past 7 days",
         table_coloum:{
           index: "Ranking",
           case_name: "Case name",
+          case_type: "Case Type",
           test_plan: "Test plan",
           failure_times: "Failure times",
         },
+        table_value:{
+          case_type:{
+            api: "Api case",
+            scene: "Scenario case",
+          }
+        }
       },
       running_task_list:{
-        title: "Running task",
+        title: "Running schedule task",
         table_coloum:{
           index: "Index",
           scenario: "Scene",
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index 98f7261c6d..6b8087e6df 100644
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -581,6 +581,7 @@ export default {
       remove: "删除",
       view_ref: "查看引用",
       case_ref: "用例引用",
+      schedule: "定时任务",
       scenario_ref: "场景引用",
       plan_ref: "测试计划引用",
       batch_add_plan: "添加到测试计划",
@@ -798,50 +799,84 @@ export default {
     home_page:{
       unit_of_measurement:"个",
       api_count_card:{
-        title: "接口总数",
+        title: "接口数量统计",
       },
       test_case_count_card:{
-        title: "用例总数",
+        title: "接口用例数量统计",
       },
       test_scene_count_card:{
-        title: "场景总数",
+        title: "场景用例数量统计",
       },
       schedule_task_count_card:{
-        title: "定时任务总数",
+        title: "定时任务数量统计",
+      },
+      detail_card:{
+        running:"进行中",
+        not_started:"未开始",
+        finished:"已完成",
+        uncoverage:"未覆盖",
+        coverage:"已覆盖",
+        unexecute:"未执行",
+        execution_failed:"未通过",
+        execution_pass:"已通过",
+        failed:"失败",
+        success:"成功",
+        rate:{
+          completion:"完成率",
+          coverage:"覆盖率",
+          pass:"通过率",
+          success:"成功率",
+        },
       },
       api_details_card:{
         title: "接口",
-        this_week_add:"本周新增{0}个",
+        this_week_add:"本周新增: {0}个",
       },
       test_case_details_card:{
         title: "用例",
         this_week_add:"本周新增: {0}个",
         this_week_execute:"本周执行: {0}次",
         executed:"历史总执行: {0}次",
+        this_week_add_sm:"本周新增:<br/>{0}个",
+        this_week_execute_sm:"本周执行:<br/>{0}次",
+        executed_sm:"历史总执行:<br/>{0}次",
       },
       test_scene_details_card:{
         title: "场景",
         this_week_add:"本周新增: {0}个",
         this_week_execute:"本周执行: {0}次",
         executed:"历史总执行: {0}次",
+        this_week_add_sm:"本周新增:<br/>{0}个",
+        this_week_execute_sm:"本周执行:<br/>{0}次",
+        executed_sm:"历史总执行:<br/>{0}次",
       },
       schedule_task_details_card:{
         title: "定时任务",
         this_week_add:"本周新增: {0}个",
         this_week_execute:"本周执行: {0}次",
         executed:"历史总执行: {0}次",
+        this_week_add_sm:"本周新增:<br/>{0}个",
+        this_week_execute_sm:"本周执行:<br/>{0}次",
+        executed_sm:"历史总执行:<br/>{0}次",
       },
       failed_case_list:{
-        title: "过去7天流程集失败用例TOP 10",
+        title: "过去7天测试计划失败用例TOP 10",
         table_coloum:{
           index: "排名",
           case_name: "用例名称",
+          case_type: "用例类型",
           test_plan: "所属测试计划",
           failure_times: "失败次数",
         },
+        table_value:{
+          case_type:{
+            api: "接口用例",
+            scene: "场景用例",
+          }
+        }
       },
       running_task_list:{
-        title: "运行中的任务",
+        title: "运行中的定时任务",
         table_coloum:{
           index: "序号",
           scenario: "场景名称",
diff --git a/frontend/src/i18n/zh-TW.js b/frontend/src/i18n/zh-TW.js
index b96c0bb2f7..849537ec9f 100644
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@@ -581,6 +581,7 @@ export default {
       remove: "删除",
       view_ref: "查看引用",
       case_ref: "用例引用",
+      schedule: "定時任務",
       scenario_ref: "场景引用",
       plan_ref: "测试计划引用",
       batch_add_plan: "添加到测试计划",
@@ -797,50 +798,84 @@ export default {
     home_page:{
       unit_of_measurement:"個",
       api_count_card:{
-        title: "接口總數",
+        title: "接口數量統計",
       },
       test_case_count_card:{
-        title: "用例總數",
+        title: "接口用例數量統計",
       },
       test_scene_count_card:{
-        title: "場景總數",
+        title: "場景用例數量統計",
       },
       schedule_task_count_card:{
-        title: "定時任務總數",
+        title: "定時任務數量統計",
+      },
+      detail_card:{
+        running:"進行中",
+        not_started:"未開始",
+        finished:"已完成",
+        uncoverage:"未覆蓋",
+        coverage:"已覆蓋",
+        unexecute:"未執行",
+        execution_failed:"未通過",
+        execution_pass:"已通過",
+        failed:"失敗",
+        success:"成功",
+        rate:{
+          completion:"完成率",
+          coverage:"覆蓋率",
+          pass:"通過率",
+          success:"成功率",
+        },
       },
       api_details_card:{
         title: "接口",
-        this_week_add:"本週新增{0}个",
+        this_week_add:"本週新增: {0}个",
       },
       test_case_details_card:{
         title: "用例",
         this_week_add:"本週新增: {0}个",
         this_week_execute:"本週執行: {0}次",
         executed:"歷史總執行: {0}次",
+        this_week_add_sm:"本週新增:<br/>{0}个",
+        this_week_execute_sm:"本週執行:<br/>{0}次",
+        executed_sm:"歷史總執行:<br/>{0}次",
       },
       test_scene_details_card:{
         title: "場景",
         this_week_add:"本週新增: {0}个",
         this_week_execute:"本週執行: {0}次",
         executed:"歷史總執行: {0}次",
+        this_week_add_sm:"本週新增:<br/>{0}个",
+        this_week_execute_sm:"本週執行:<br/>{0}次",
+        executed_sm:"歷史總執行:<br/>{0}次",
       },
       schedule_task_details_card:{
         title: "定時任務",
         this_week_add:"本週新增: {0}个",
         this_week_execute:"本週執行: {0}次",
         executed:"歷史總執行: {0}次",
+        this_week_add_sm:"本週新增:<br/>{0}个",
+        this_week_execute_sm:"本週執行:<br/>{0}次",
+        executed_sm:"歷史總執行:<br/>{0}次",
       },
       failed_case_list:{
-        title: "過去7天流程集失敗用例TOP 10",
+        title: "過去7天測試計畫失敗用例TOP 10",
         table_coloum:{
           index: "排名",
           case_name: "用例名稱",
+          case_type: "用例類型",
           test_plan: "所屬測試計畫",
           failure_times: "失敗次數",
         },
+        table_value:{
+          case_type:{
+            api: "接口用例",
+            scene: "場景用例",
+          }
+        }
       },
       running_task_list:{
-        title: "運行中的任務",
+        title: "運行中的定時任務",
         table_coloum:{
           index: "序號",
           scenario: "場景名稱",