refactor: 首页数量统计显示优化

--bug=1009703 --user=陈建星 [测试跟踪] github#9466测试跟踪首页用例数量统计显示不全 https://www.tapd.cn/55049933/s/10932477

frontend/src/business/components/api/homepage/components/ApiInfoCard.vue

@@ -7,15 +7,9 @@
     </div>
     <el-container>
       <el-aside width="120px">
-        <div class="main-number-show">
+        <ms-count-ring-chart :content="apiCountData.allApiDataCountNumber"/>
-          <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">
 
@@ -162,10 +156,11 @@
 
 <script>
 
+import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
 export default {
   name: "MsApiInfoCard",
 
-  components: {},
+  components: {MsCountRingChart},
 
   data() {
     return {
@@ -205,16 +200,6 @@ export default {
   position: relative;
 }
 
-.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;
 }

frontend/src/business/components/api/homepage/components/SceneInfoCard.vue

@@ -7,14 +7,7 @@
     </div>
     <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;">
+        <ms-count-ring-chart :content="sceneCountData.allApiDataCountNumber"/>
-          <span class="count-number">
-            {{sceneCountData.allApiDataCountNumber}}
-          </span>
-          <span style="color: #6C317C;">
-            {{$t('api_test.home_page.unit_of_measurement')}}
-          </span>
-        </div>
       </el-main>
     </el-container>
     <el-container class="detail-container">
@@ -127,10 +120,11 @@
 
 <script>
 
+import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
 export default {
   name: "MsSceneInfoCard",
 
-  components: {},
+  components: {MsCountRingChart},
 
   data() {
     return {
@@ -176,12 +170,7 @@ export default {
   font-weight: bold;
 }
 .main-number-show {
-  width: 100px;
+  margin: 0 auto;
-  height: 100px;
-  border-style: solid;
-  border-width: 7px;
-  border-color: var(--count_number_shallow);
-  border-radius:50%;
 }
 
 .count-number-show{

frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue

@@ -7,14 +7,7 @@
     </div>
     <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;">
+        <ms-count-ring-chart :content="scheduleTaskCountData.allApiDataCountNumber"/>
-          <span class="count-number">
-            {{scheduleTaskCountData.allApiDataCountNumber}}
-          </span>
-          <span style="color: #6C317C;">
-            {{$t('api_test.home_page.unit_of_measurement')}}
-          </span>
-        </div>
       </el-main>
     </el-container>
 
@@ -93,13 +86,14 @@
 
 <script>
 import 'element-ui/lib/theme-chalk/display.css';
+import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
 
 
 export default {
 
   name: "MsScheduleTaskInfoCard",
 
-  components: {},
+  components: {MsCountRingChart},
 
   data() {
     return {
@@ -133,13 +127,7 @@ export default {
 }
 
 .main-number-show {
-  width: 100px;
+  margin: 0px auto;
-  height: 100px;
-  border-style: solid;
-  border-width: 7px;
-  border-color: var(--count_number_shallow);
-  border-radius:50%;
-
 }
 
 .count-number-show{

frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue

@@ -7,14 +7,7 @@
     </div>
     <el-container>
       <el-aside width="120px">
-        <div class="main-number-show">
+        <ms-count-ring-chart :content="testCaseCountData.allApiDataCountNumber"/>
-          <span class="count-number">
-            {{ testCaseCountData.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">
@@ -147,10 +140,11 @@
 
 <script>
 
+import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
 export default {
   name: "MsTestCaseInfoCard",
 
-  components: {},
+  components: {MsCountRingChart},
 
   data() {
     return {
@@ -194,16 +188,6 @@ export default {
   position: relative;
 }
 
-.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;
 }

frontend/src/business/components/common/chart/MsCountRingChart.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-tooltip :content="content + ''" placement="top-start">
+    <div class="main-number-show">
+      <span class="count-number">
+        {{content}}
+      </span>
+      <span style="color: #6C317C;">
+        {{$t('api_test.home_page.unit_of_measurement')}}
+      </span>
+    </div>
+  </el-tooltip>
+</template>
+
+<script>
+export default {
+  name: "MsCountRingChart",
+  props: {
+    content: {
+      type: [Number, String]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.main-number-show {
+  width: 100px;
+  height: 100px;
+  border-style: solid;
+  border-width: 7px;
+  border-color: var(--count_number_shallow);
+  border-radius:50%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap
+}
+
+.count-number {
+  font-family:'ArialMT', 'Arial', sans-serif;
+  font-size: 33px;
+  color: var(--count_number);
+  position: relative;
+}
+
+</style>

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

@@ -38,7 +38,6 @@
         </el-col>
       </el-row>
 
-
     </ms-main-container>
   </ms-container>
 </template>

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

@@ -7,21 +7,17 @@
     </div>
     <el-container>
       <el-aside width="150px">
-        <div class="main-number-show">
+
-          <span class="count-number">
+        <ms-count-ring-chart :content="bugTotalSize"/>
-            {{ bugTotalSize }}
+
-          </span>
+        <div>
-          <span style="color: #6C317C;">
+          {{ $t('test_track.home.percentage') }}
-            {{ $t('api_test.home_page.unit_of_measurement') }}
+          <span class="rage">
-          </span>
-          <div>
-            {{ $t('test_track.home.percentage') }}
-            <span class="rage">
               {{rage}}
             </span>
-          </div>
         </div>
       </el-aside>
+
       <el-table border :data="tableData" class="adjust-table table-content" height="300">
         <el-table-column prop="index" :label="$t('test_track.home.serial_number')"
                          width="60" show-overflow-tooltip/>
@@ -57,10 +53,12 @@
 <script>
 import {getCurrentProjectID} from "@/common/js/utils";
 import PlanStatusTableItem from "@/business/components/track/common/tableItems/plan/PlanStatusTableItem";
+import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
 
 export default {
   name: "BugCountCard",
   components: {
+    MsCountRingChart,
     PlanStatusTableItem
   },
   data() {

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

@@ -7,16 +7,11 @@
     </div>
 
     <el-container>
+
       <el-aside width="120px">
-        <div class="main-number-show">
+        <ms-count-ring-chart :content="trackCountData.allCaseCountNumber"/>
-          <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">
 
@@ -123,8 +118,11 @@
 </template>
 
 <script>
+import MsInstructionsIcon from "@/business/components/common/components/MsInstructionsIcon";
+import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
 export default {
   name: "CaseCountCard",
+  components: {MsCountRingChart, MsInstructionsIcon},
   props:{
     trackCountData: {},
   },
@@ -155,16 +153,6 @@ export default {
   position: relative;
 }
 
-.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;
 }

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

@@ -7,16 +7,11 @@
     </div>
 
     <el-container>
+
       <el-aside width="120px">
-        <div class="main-number-show">
+        <ms-count-ring-chart :content="relevanceCountData.allRelevanceCaseCount"/>
-          <span class="count-number">
-            {{relevanceCountData.allRelevanceCaseCount}}
-          </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: 300px;margin:0 auto">
 
@@ -97,8 +92,10 @@
 </template>
 
 <script>
+import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
 export default {
   name: "RelevanceCaseCard",
+  components: {MsCountRingChart},
   props:{
     relevanceCountData:{},
   },
@@ -129,16 +126,6 @@ export default {
   position: relative;
 }
 
-.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;
 }