feat(测试跟踪): 用例数量统计

backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestCaseMapper.java

@@ -5,6 +5,7 @@ import io.metersphere.controller.request.BaseQueryRequest;
 import io.metersphere.track.dto.TestCaseDTO;
 import io.metersphere.track.request.testcase.QueryTestCaseRequest;
 import io.metersphere.track.request.testcase.TestCaseBatchRequest;
+import io.metersphere.track.response.TrackCountResult;
 import org.apache.ibatis.annotations.Param;
 
 import java.util.List;
@@ -48,4 +49,15 @@ public interface ExtTestCaseMapper {
     int checkIsHave(@Param("caseId") String caseId, @Param("workspaceIds") Set<String> workspaceIds);
 
     List<String> selectIds(@Param("request") BaseQueryRequest condition);
+
+    /**
+     * 按照用例等级统计
+     * @param projectId 项目ID
+     * @return 统计结果
+     */
+    List<TrackCountResult> countPriority(@Param("projectId") String projectId);
+
+    long countCreatedThisWeek(@Param("projectId") String projectId, @Param("firstDayTimestamp") long firstDayTimestamp, @Param("lastDayTimestamp") long lastDayTimestamp);
+
+    List<TrackCountResult> countStatus(@Param("projectId") String projectId);
 }

backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestCaseMapper.xml

@@ -319,4 +319,18 @@
         </where>
     </sql>
 
+    <select id="countPriority" resultType="io.metersphere.track.response.TrackCountResult">
+        SELECT test_case.priority as groupField,count(id) AS countNumber FROM test_case WHERE project_id = #{projectId} GROUP BY test_case.priority
+    </select>
+
+    <!-- todo 排除删除的用例统计-->
+    <select id="countCreatedThisWeek" resultType="java.lang.Long">
+        SELECT count(id) AS countNumber FROM test_case WHERE test_case.project_id = #{projectId}
+          AND create_time BETWEEN #{firstDayTimestamp} AND #{lastDayTimestamp}
+    </select>
+
+    <select id="countStatus" resultType="io.metersphere.track.response.TrackCountResult">
+        SELECT review_status AS groupField,count(id) AS countNumber FROM test_case  WHERE project_id = #{projectId} GROUP BY test_case.review_status;
+    </select>
+
 </mapper>

backend/src/main/java/io/metersphere/track/controller/TrackController.java

@@ -0,0 +1,53 @@
+package io.metersphere.track.controller;
+
+
+import io.metersphere.commons.constants.RoleConstants;
+import io.metersphere.track.response.TrackCountResult;
+import io.metersphere.track.response.TrackStatisticsDTO;
+import io.metersphere.track.service.TrackService;
+import org.apache.shiro.authz.annotation.Logical;
+import org.apache.shiro.authz.annotation.RequiresRoles;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import javax.annotation.Resource;
+import java.text.DecimalFormat;
+import java.util.List;
+
+@RestController
+@RequestMapping("/track")
+@RequiresRoles(value = {RoleConstants.ADMIN, RoleConstants.TEST_MANAGER, RoleConstants.TEST_USER, RoleConstants.TEST_VIEWER, RoleConstants.ORG_ADMIN}, logical = Logical.OR)
+public class TrackController {
+
+    @Resource
+    private TrackService trackService;
+
+    @GetMapping("/count/{projectId}")
+    public TrackStatisticsDTO getTrackCount(@PathVariable String projectId) {
+        TrackStatisticsDTO statistics = new TrackStatisticsDTO();
+
+        List<TrackCountResult> priorityResults = trackService.countPriority(projectId);
+        statistics.countPriority(priorityResults);
+
+        long size = trackService.countCreatedThisWeek(projectId);
+        statistics.setThisWeekAddedCount(size);
+
+        List<TrackCountResult> statusResults = trackService.countStatus(projectId);
+        statistics.countStatus(statusResults);
+
+        long total = statistics.getPrepareCount() + statistics.getPassCount() + statistics.getUnPassCount();
+        if (total != 0) {
+            float reviewed = (float) (statistics.getPassCount() + statistics.getUnPassCount()) * 100 / total;
+            DecimalFormat df = new DecimalFormat("0.0");
+            statistics.setReviewRage(df.format(reviewed) + "%");
+        }
+
+        statistics.setP0CountStr("P0&nbsp;&nbsp;<br/><br/>" + statistics.getP0CaseCountNumber());
+        statistics.setP1CountStr("P1&nbsp;&nbsp;<br/><br/>" + statistics.getP1CaseCountNumber());
+        statistics.setP2CountStr("P2&nbsp;&nbsp;<br/><br/>" + statistics.getP2CaseCountNumber());
+        statistics.setP3CountStr("P3&nbsp;&nbsp;<br/><br/>" + statistics.getP3CaseCountNumber());
+        return statistics;
+    }
+}

backend/src/main/java/io/metersphere/track/request/testcase/CasePriority.java

@@ -0,0 +1,8 @@
+package io.metersphere.track.request.testcase;
+
+public class CasePriority {
+    public static final String P0 = "P0";
+    public static final String P1 = "P1";
+    public static final String P2 = "P2";
+    public static final String P3 = "P3";
+}

backend/src/main/java/io/metersphere/track/response/TrackCountResult.java

@@ -0,0 +1,19 @@
+package io.metersphere.track.response;
+
+
+import lombok.Getter;
+import lombok.Setter;
+
+@Getter
+@Setter
+public class TrackCountResult {
+
+    /**
+     * 分组统计字段
+     */
+    private String groupField;
+    /**
+     * 数据统计
+     */
+    private long countNumber;
+}

backend/src/main/java/io/metersphere/track/response/TrackStatisticsDTO.java

@@ -0,0 +1,143 @@
+package io.metersphere.track.response;
+
+import io.metersphere.commons.constants.TestReviewCaseStatus;
+import io.metersphere.track.request.testcase.CasePriority;
+import lombok.Getter;
+import lombok.Setter;
+
+import java.util.List;
+
+/**
+ * 用例数量统计数据
+ */
+@Getter
+@Setter
+public class TrackStatisticsDTO {
+
+    /**
+     * 用例总计
+     */
+    private long allCaseCountNumber = 0;
+
+    /**
+     * P0登记用例总计
+     */
+    private long p0CaseCountNumber = 0;
+
+    /**
+     * P1登记用例总计
+     */
+    private long p1CaseCountNumber = 0;
+
+    /**
+     * P2登记用例总计
+     */
+    private long p2CaseCountNumber = 0;
+
+    /**
+     * P3登记用例总计
+     */
+    private long p3CaseCountNumber = 0;
+
+    private String p0CountStr = "";
+    private String p1CountStr = "";
+    private String p2CountStr = "";
+    private String p3CountStr = "";
+
+    /**
+     * 关联用例数量统计
+     */
+    private long relevanceCaseCount = 0;
+
+    /**
+     * 接口用例数量统计
+     */
+    private long apiCaseCount = 0;
+
+    /**
+     * 场景用例数量统计
+     */
+    private long scenarioCaseCount = 0;
+
+    /**
+     * 性能用例数量统计
+     */
+    private long performanceCaseCount = 0;
+
+
+    private String apiCaseCountStr = "";
+    private String scenarioCaseStr = "";
+    private String performanceCaseCountStr = "";
+
+    /**
+     * 本周新增数量
+     */
+    private long thisWeekAddedCount = 0;
+    /**
+     * 未覆盖
+     */
+    private long uncoverageCount = 0;
+    /**
+     * 已覆盖
+     */
+    private long coverageCount = 0;
+    /**
+     * 覆盖率
+     */
+    private String coverageRage = " 0%";
+    /**
+     * 评审率
+     */
+    private String reviewRage = " 0%";
+    /**
+     * 未评审
+     */
+    private long prepareCount = 0;
+    /**
+     * 已通过
+     */
+    private long passCount = 0;
+    /**
+     * 未通过
+     */
+    private long unPassCount = 0;
+
+
+    /**
+     * 按照 Priority 统计
+     * @param trackCountResults 统计结果
+     */
+    public void countPriority(List<TrackCountResult> trackCountResults) {
+        for (TrackCountResult countResult : trackCountResults) {
+            switch (countResult.getGroupField().toUpperCase()){
+                case CasePriority.P0:
+                    this.p0CaseCountNumber += countResult.getCountNumber();
+                    break;
+                case CasePriority.P1:
+                    this.p1CaseCountNumber += countResult.getCountNumber();
+                    break;
+                case CasePriority.P2:
+                    this.p2CaseCountNumber += countResult.getCountNumber();
+                    break;
+                case CasePriority.P3:
+                    this.p3CaseCountNumber += countResult.getCountNumber();
+                    break;
+                default:
+                    break;
+            }
+            this.allCaseCountNumber += countResult.getCountNumber();
+        }
+    }
+
+    public void countStatus(List<TrackCountResult> statusResults) {
+        for (TrackCountResult countResult : statusResults) {
+            if(TestReviewCaseStatus.Prepare.name().equals(countResult.getGroupField())){
+                this.prepareCount += countResult.getCountNumber();
+            }else if(TestReviewCaseStatus.Pass.name().equals(countResult.getGroupField())){
+                this.passCount += countResult.getCountNumber();
+            }else if(TestReviewCaseStatus.UnPass.name().equals(countResult.getGroupField())){
+                this.unPassCount += countResult.getCountNumber();
+            }
+        }
+    }
+}

backend/src/main/java/io/metersphere/track/service/TrackService.java

@@ -0,0 +1,40 @@
+package io.metersphere.track.service;
+
+import io.metersphere.base.mapper.ext.ExtTestCaseMapper;
+import io.metersphere.commons.utils.DateUtils;
+import io.metersphere.track.response.TrackCountResult;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import javax.annotation.Resource;
+import java.util.Date;
+import java.util.List;
+import java.util.Map;
+
+@Service
+@Transactional(rollbackFor = Exception.class)
+public class TrackService {
+
+    @Resource
+    private ExtTestCaseMapper extTestCaseMapper;
+
+    public List<TrackCountResult> countPriority(String projectId) {
+        return extTestCaseMapper.countPriority(projectId);
+    }
+
+    public long countCreatedThisWeek(String projectId) {
+        Map<String, Date> startAndEndDateInWeek = DateUtils.getWeedFirstTimeAndLastTime(new Date());
+
+        Date firstTime = startAndEndDateInWeek.get("firstTime");
+        Date lastTime = startAndEndDateInWeek.get("lastTime");
+
+        if (firstTime == null || lastTime == null) {
+            return 0;
+        } else {
+            return extTestCaseMapper.countCreatedThisWeek(projectId, firstTime.getTime(), lastTime.getTime());
+        }
+    }
+
+    public List<TrackCountResult> countStatus(String projectId) {
+        return extTestCaseMapper.countStatus(projectId);
+    }
+}

frontend/src/business/components/track/home/TrackHome.vue

@@ -1,17 +1,44 @@
 <template>
   <ms-container>
-    <ms-main-container>
+    <el-header height="0">
-      <el-row :gutter="20">
+      <div style="float: right">
-        <el-col :span="15">
+        <div v-if="tipsType==='1'">
-          <el-row>
+          🤔️ 天凉了，保温杯买了吗？
-            <related-test-plan-list ref="relatedTestPlanList"/>
+        </div>
-          </el-row>
+        <div v-else-if="tipsType==='2'">
-          <el-row>
+          😔 觉得MeterSphere不好用就来
-            <review-list :title="$t('test_track.review.my_review')" ref="caseReviewList"/>
+          <el-link href="https://github.com/metersphere/metersphere/issues" target="_blank" style="color: black"
-          </el-row>
+                   type="primary">https://github.com/metersphere/metersphere/issues
+          </el-link>
+          吐个槽吧！
+        </div>
+        <div v-else-if="tipsType==='3'">
+          😄 觉得MeterSphere好用就来
+          <el-link href="https://github.com/metersphere/metersphere" target="_blank" style="color: black"
+                   type="primary">https://github.com/metersphere/metersphere
+          </el-link>
+          点个star吧！
+        </div>
+        <div v-else>
+          😊 MeterSphere温馨提醒 —— 多喝热水哟！
+        </div>
+      </div>
+    </el-header>
+    <ms-main-container v-loading="result.loading">
+      <el-row :gutter="0"></el-row>
+      <el-row :gutter="10">
+        <el-col :span="6">
+          <div class="square">
+            <case-count-card :track-count-data="trackCountData" class="track-card"/>
+          </div>
         </el-col>
-        <el-col :span="9">
+        <el-col :span="6">
-          <test-case-side-list :title="$t('test_track.home.recent_test')" ref="testCaseRecentList"/>
+          <div class="square">
+            <relevance-case-card class="track-card"/>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="square">3</div>
         </el-col>
       </el-row>
     </ms-main-container>
@@ -19,39 +46,68 @@
 </template>
 
 <script>
-import RelatedTestPlanList from "./components/RelatedTestPlanList";
+
-import TestCaseSideList from "./components/TestCaseSideList";
+import MsMainContainer from "@/business/components/common/components/MsMainContainer";
-import MsContainer from "../../common/components/MsContainer";
+import MsContainer from "@/business/components/common/components/MsContainer";
-import MsMainContainer from "../../common/components/MsMainContainer";
+import CaseCountCard from "@/business/components/track/home/components/CaseCountCard";
-import ReviewList from "./components/ReviewList";
+import RelevanceCaseCard from "@/business/components/track/home/components/RelevanceCaseCard";
+import {getCurrentProjectID} from "@/common/js/utils";
 
 export default {
   name: "TrackHome",
-  components: {MsMainContainer, MsContainer, TestCaseSideList, RelatedTestPlanList, ReviewList},
+  components: {
-  watch: {
+    RelevanceCaseCard,
-    '$route'(to, from) {
+    CaseCountCard,
-      if (to.path.indexOf('/track/home') > -1) {
+    MsMainContainer,
-        this.innitData();
+    MsContainer
-      }
+  },
+  data() {
+    return {
+      tipsType: "1",
+      result: {},
+      trackCountData: {}
     }
   },
+  activated() {
+    this.checkTipsType();
+    this.init();
+  },
   methods: {
-    innitData() {
+    checkTipsType() {
-      this.$refs.relatedTestPlanList.initTableData();
+      let random = Math.floor(Math.random() * (4 - 1 + 1)) + 1;
-      this.$refs.testCaseRecentList.initTableData();
+      this.tipsType = random + "";
-      this.$refs.caseReviewList.initTableData();
+    },
+    init() {
+      let selectProjectId = getCurrentProjectID();
+      this.$get("/track/count/" + selectProjectId, response => {
+        this.trackCountData = response.data;
+      });
     }
+
   }
 }
 </script>
 
 <style scoped>
+.square {
+  background-color: #ecf0f3;
+  width: 100%;
+  height: 400px;
+}
 
-.ms-main-container >>> .el-table {
+.rectangle {
-  cursor: pointer;
+  background-color: #e7e5e5;
+  width: 100%;
+  height: 400px;
 }
 
 .el-row {
-  padding-bottom: 20px;
+  margin-bottom: 20px;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.track-card {
+  height: 100%;
 }
 </style>

frontend/src/business/components/track/home/components/CaseCountCard.vue

@@ -0,0 +1,191 @@
+<template>
+  <el-card class="table-card" v-loading="result.loading" body-style="padding:10px;">
+    <div slot="header" >
+      <span class="title">
+        用例数量统计
+      </span>
+    </div>
+
+    <el-container>
+      <el-aside width="120px">
+        <div class="main-number-show">
+          <span class="count-number">
+            {{trackCountData.allCaseCountNumber}}
+          </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="trackCountData.p0CountStr"></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="trackCountData.p1CountStr"></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="trackCountData.p2CountStr"></div>
+            </el-col>
+            <el-col :span="6" style="padding: 5px;">
+              <div class="count-info-div" v-html="trackCountData.p3CountStr"></div>
+            </el-col>
+          </el-row>
+<!--          <el-row align="right" style="margin-left: 20px" class="hidden-xl-only">-->
+<!--            <el-col :span="6" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">-->
+<!--              <div class="count-info-div" v-html="trackCountData.p0CountStr"></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="trackCountData.p1CountStr"></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="trackCountData.p2CountStr"></div>-->
+<!--            </el-col>-->
+<!--            <el-col :span="6" style="padding: 5px;">-->
+<!--              <div class="count-info-div" v-html="trackCountData.p3CountStr"></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')}}
+            <el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">{{trackCountData.thisWeekAddedCount}}
+            </el-link>
+            {{$t('api_test.home_page.unit_of_measurement')}}
+          </el-col>
+        </el-row>
+      </el-header>
+      <el-main style="padding: 5px;margin-top: 10px">
+        <el-container>
+          <el-aside width="60%" class="count-number-show" style="margin-bottom: 0px;margin-top: 0px">
+            <el-container>
+              <el-aside width="30%">
+                {{$t('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">
+                {{trackCountData.reviewRage}}
+              </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"}}
+                      <el-link type="info" @click="redirectPage('Underway')" target="_blank" style="color: #000000">
+                        {{trackCountData.prepareCount}}
+                      </el-link>
+                    </span>
+                  </el-col>
+                  <el-col style="margin-top: 5px;">
+                    <span class="default-property">
+                      {{$t('api_test.home_page.detail_card.not_started')}}
+                      {{"\xa0\xa0"}}
+                      <el-link type="info" @click="redirectPage('Prepare')" target="_blank" style="color: #000000">
+                        {{trackCountData.passCount}}
+                      </el-link>
+                    </span>
+                  </el-col>
+                  <el-col style="margin-top: 5px;">
+                    <span class="main-property">
+                      {{$t('api_test.home_page.detail_card.finished')}}
+                      {{"\xa0\xa0"}}
+                      <el-link type="info" @click="redirectPage('Completed')" target="_blank" style="color: #000000">
+                        {{trackCountData.unPassCount}}
+                      </el-link>
+                    </span>
+                  </el-col>
+                </el-row>
+              </main>
+            </el-card>
+          </el-main>
+        </el-container>
+      </el-main>
+    </el-container>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: "CaseCountCard",
+  props:{
+    trackCountData: {},
+  },
+  data() {
+    return {
+      result: {
+
+      }
+    }
+  },
+  methods: {
+    redirectPage(clickType){
+      this.$emit("redirectPage","api","api",clickType);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-aside {
+  line-height: 100px;
+  text-align: center;
+}
+.count-number{
+  font-family:'ArialMT', 'Arial', sans-serif;
+  font-size:33px;
+  color: var(--count_number);
+}
+
+.main-number-show {
+  width: 100px;
+  height: 100px;
+  border-style: solid;
+  border-width: 7px;
+  border-color: var(--count_number_shallow);
+  border-radius:50%;
+
+}
+
+.count-number-show{
+  margin:20px auto;
+}
+.detail-container{
+  margin-top: 30px
+}
+.no-shadow-card{
+  -webkit-box-shadow: 0 0px 0px 0 rgba(0,0,0,.1);
+  box-shadow: 0 0px 0px 0 rgba(0,0,0,.1);
+}
+.default-property{
+  font-size: 12px
+}
+.main-property{
+  color: #F39021;
+  font-size: 12px
+}
+
+.el-card /deep/ .el-card__header {
+  border-bottom: 0px solid #EBEEF5;
+}
+
+.count-info-div{
+  margin: 3px;
+}
+.count-info-div >>>p{
+  font-size: 10px;
+}
+</style>

frontend/src/business/components/track/home/components/RelevanceCaseCard.vue

@@ -0,0 +1,191 @@
+<template>
+  <el-card class="table-card" v-loading="result.loading" body-style="padding:10px;">
+    <div slot="header" >
+      <span class="title">
+        用例数量统计
+      </span>
+    </div>
+
+    <el-container>
+      <el-aside width="120px">
+        <div class="main-number-show">
+          <span class="count-number">
+            {{caseCountData}}
+          </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" class="hidden-lg-and-down">
+            <el-col :span="6" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
+              <div class="count-info-div" v-html="1"></div>
+            </el-col>
+            <el-col :span="6" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
+              <div class="count-info-div" v-html="2"></div>
+            </el-col>
+            <el-col :span="6" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
+              <div class="count-info-div" v-html="3"></div>
+            </el-col>
+            <el-col :span="6" style="padding: 5px;">
+              <div class="count-info-div" v-html="4"></div>
+            </el-col>
+          </el-row>
+          <el-row align="right" style="margin-left: 20px" class="hidden-xl-only">
+            <el-col :span="6" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
+              <div class="count-info-div" v-html="5"></div>
+            </el-col>
+            <el-col :span="6" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
+              <div class="count-info-div" v-html="6"></div>
+            </el-col>
+            <el-col :span="6" style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
+              <div class="count-info-div" v-html="7"></div>
+            </el-col>
+            <el-col :span="6" style="padding: 5px;">
+              <div class="count-info-div" v-html="8"></div>
+            </el-col>
+          </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')}}
+            <el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">{{caseCountData}}
+            </el-link>
+            {{$t('api_test.home_page.unit_of_measurement')}}
+          </el-col>
+        </el-row>
+      </el-header>
+      <el-main style="padding: 5px;margin-top: 10px">
+        <el-container>
+          <el-aside width="60%" class="count-number-show" style="margin-bottom: 0px;margin-top: 0px">
+            <el-container>
+              <el-aside width="30%">
+                {{$t('api_test.home_page.detail_card.rate.completion')+":"}}
+              </el-aside>
+              <el-main style="padding: 0px 0px 0px 0px; line-height: 100px; text-align: center;">
+                <span class="count-number">
+                {{caseCountData}}
+              </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"}}
+                      <el-link type="info" @click="redirectPage('Underway')" target="_blank" style="color: #000000">
+                        {{caseCountData}}
+                      </el-link>
+                    </span>
+                  </el-col>
+                  <el-col style="margin-top: 5px;">
+                    <span class="default-property">
+                      {{$t('api_test.home_page.detail_card.not_started')}}
+                      {{"\xa0\xa0"}}
+                      <el-link type="info" @click="redirectPage('Prepare')" target="_blank" style="color: #000000">
+                        {{caseCountData}}
+                      </el-link>
+                    </span>
+                  </el-col>
+                  <el-col style="margin-top: 5px;">
+                    <span class="main-property">
+                      {{$t('api_test.home_page.detail_card.finished')}}
+                      {{"\xa0\xa0"}}
+                      <el-link type="info" @click="redirectPage('Completed')" target="_blank" style="color: #000000">
+                        {{caseCountData}}
+                      </el-link>
+                    </span>
+                  </el-col>
+                </el-row>
+              </main>
+            </el-card>
+          </el-main>
+        </el-container>
+      </el-main>
+    </el-container>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: "RelevanceCaseCard",
+  props:{
+    caseCountData:{},
+  },
+  data() {
+    return {
+      result: {
+
+      }
+    }
+  },
+  methods: {
+    redirectPage(clickType){
+      this.$emit("redirectPage","api","api",clickType);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-aside {
+  line-height: 100px;
+  text-align: center;
+}
+.count-number{
+  font-family:'ArialMT', 'Arial', sans-serif;
+  font-size:33px;
+  color: var(--count_number);
+}
+
+.main-number-show {
+  width: 100px;
+  height: 100px;
+  border-style: solid;
+  border-width: 7px;
+  border-color: var(--count_number_shallow);
+  border-radius:50%;
+
+}
+
+.count-number-show{
+  margin:20px auto;
+}
+.detail-container{
+  margin-top: 30px
+}
+.no-shadow-card{
+  -webkit-box-shadow: 0 0px 0px 0 rgba(0,0,0,.1);
+  box-shadow: 0 0px 0px 0 rgba(0,0,0,.1);
+}
+.default-property{
+  font-size: 12px
+}
+.main-property{
+  color: #F39021;
+  font-size: 12px
+}
+
+.el-card /deep/ .el-card__header {
+  border-bottom: 0px solid #EBEEF5;
+}
+
+.count-info-div{
+  margin: 3px;
+}
+.count-info-div >>>p{
+  font-size: 10px;
+}
+</style>