fix(测试跟踪)：首页用例评审分布结果统计展示错误

--bug=1023471 --user=王旭 【测试跟踪】首页 - 用例评审 结果分布 统计错误 https://www.tapd.cn/55049933/s/1352438

framework/sdk-parent/frontend/src/components/yrogress/MsYanProgress.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="y-progress" :style="{'width':againPercent + '%','background-color':tip[3].fillStyle || '#ccc'}">
+    <a class="y-progress_text" :style="{'width':((again/total)*100)+'%'}">
+      <span class="y-tooltip" v-text="tip[3].text.replace('X',again>total?total:again)"></span>
+    </a>
+    <div
+      class="y-progress_bar"
+      :style="{'width':underwayPercent+ '%','background-color':tip[0].fillStyle || '#000'}"
+    >
+      <a class="y-progress_text" :style="{'width':((underway/total)*100)+'%'}">
+        <span class="y-tooltip" v-text="tip[0].text.replace('X',underway>total?total:underway)"></span>
+      </a>
+    </div>
+    <div
+      class="y-progress_bar"
+      :style="{'width':unPassPercent+'%','background-color':tip[2].fillStyle || '#080'}"
+    >
+      <a class="y-progress_text" :style="{'width':((unPass/total)*100)+'%'}">
+        <span class="y-tooltip" v-text="tip[2].text.replace('X',unPass>total?total:unPass)"></span>
+      </a>
+    </div>
+    <div
+      class="y-progress_bar"
+      :style="{'width':passPercent+'%','background-color':tip[1].fillStyle || '#9c3'}"
+    >
+      <a class="y-progress_text" :style="{'width':((pass/total)*100)+'%'}">
+        <span class="y-tooltip" v-text="tip[1].text.replace('X',pass>total?total:pass)"></span>
+      </a>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name:'ms-yan-progress',
+  data() {
+    return {
+    };
+  },
+  props: {
+    total: {
+      type: Number,
+      default: 0
+    },
+    pass: {
+      type: Number,
+      default: 0
+    },
+    tip: {
+      type: Array,
+      default: () => []
+    },
+    unPass: {
+      type: Number,
+      default: 0
+    },
+    again: {
+      type: Number,
+      default: 0
+    },
+    underway: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    passPercent() {
+      if (this.pass >= this.total) {
+        return 1e2;
+      }
+      return parseInt((this.pass / this.total) * 100);
+    },
+    unPassPercent() {
+      if (this.unPass >= this.total) {
+        return 1e2;
+      }
+      return parseInt(((this.unPass + this.pass)/this.total) * 100);
+    },
+    againPercent() {
+      if (this.again >= this.total) {
+        return 1e2;
+      }
+      return parseInt(((this.again + this.pass + this.unPass + this.underway)/ this.total) * 100);
+    },
+    underwayPercent() {
+      if (this.underway >= this.total) {
+        return 1e2;
+      }
+      return parseInt(((this.underway + this.pass + this.unPass)/ this.total) * 100);
+    },
+  },
+};
+</script>
+<style scoped>
+.y-progress {
+  position: relative;
+  width: 100%;
+  height: 8px;
+  background-color: #ccc;
+  border-radius: 4px;
+}
+.y-progress_bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  border-radius: 4px;
+  transition: all 1.5s ease;
+}
+.y-progress_text {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  text-align: center;
+}
+.y-progress_text .y-tooltip {
+  position: absolute;
+  top: 15px;
+  right: 0;
+  background-color: #333;
+  color: #f1f1f1;
+  border-radius: 5px;
+  padding: 5px 10px;
+  visibility: hidden;
+  opacity: 0;
+  transform: scale(0);
+  transition: all ease-in 0.2s;
+}
+.y-progress_text:hover .y-tooltip {
+  visibility: visible;
+  opacity: 1;
+  transform: scale(1);
+}
+.y-tooltip:after {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translate(-50%, 0);
+  border: 5px solid;
+  border-color: transparent transparent #333 transparent;
+}
+</style>

framework/sdk-parent/frontend/src/components/yrogress/index.js

@@ -0,0 +1,61 @@
+import Comp from './MsYanProgress';
+
+const CONF = {
+    tip: [
+        {
+            text: "通过",
+            fillStyle: "#ccc",
+        }, {
+            text: "不通过",
+            fillStyle: "#9c3",
+        }, {
+            text: "评审中",
+            fillStyle: "#080"
+        }, {
+            text: "重新评审",
+            fillStyle: "#000"
+        }
+    ]
+};
+
+let YanProgress1 = {
+    install(Vue) {
+        Vue.component('ms-yan-progress', Object.assign({}, Comp, {
+            props: {
+                "total": {
+                    type: Number,
+                    default: 0
+                },
+                "pass": {
+                    type: Number,
+                    default: 0
+                },
+                "unPass": {
+                    type: Number,
+                    default: 0
+                },
+                "again": {
+                  type: Number,
+                  default: 0
+                },
+                "underway": {
+                  type: Number,
+                  default: 0
+                },
+                "tip": {
+                    type: Array,
+                    default() {
+                        return CONF.tip;
+                    }
+                }
+            },
+        }));
+    }
+};
+
+if (window && window.Vue) {
+    window.Vue.use(YanProgress1);
+}
+
+export default YanProgress1;
+

test-track/frontend/src/business/case/components/BatchMove.vue

@@ -143,8 +143,8 @@ export default {
       if (!value) {
         return '';
       }
-      if (value.length > 20) {
+      if (value.length > 25) {
-        return value.slice(0, 20) + '...';
+        return value.slice(0, 25) + '...';
       }
       return value;
     }
@@ -226,6 +226,6 @@ export default {
   height:34px;
   display: inline-block;
   title:content;
-  font-size: x-large;
+  font-size: large;
 }
 </style>

test-track/frontend/src/business/home/components/ReviewList.vue

@@ -54,7 +54,12 @@
             <template v-slot:default="scope">
               <el-tooltip :content="getResultTip(scope.row)"
                           placement="top" :enterable="false" class="item" effect="dark">
-                <yan-progress :total="scope.row.caseCount" :done="getResultCount(scope.row, 'Pass')" :modify="getResultCount(scope.row, 'UnPass')" :tip="tip"/>
+                <ms-yan-progress :total="scope.row.caseCount"
+                               :pass="getResultCount(scope.row, 'Pass')"
+                               :unPass="getResultCount(scope.row, 'UnPass')"
+                               :underway="getResultCount(scope.row, 'Underway')"
+                               :again="getResultCount(scope.row, 'Again')"
+                               :tip="tip"/>
               </el-tooltip>
             </template>
           </el-table-column>
@@ -83,10 +88,11 @@ import {getRelateTestCaseReview} from "@/api/test-review";
 import HomePagination from "@/business/home/components/pagination/HomePagination";
 import BasicStatusLabel from "metersphere-frontend/src/components/BasicStatusLabel";
 import {hasPermission} from "@/business/utils/sdk-utils";
+import MsYanProgress from 'metersphere-frontend/src/components/yrogress/MsYanProgress';
 
 export default {
   name: "ReviewList",
-  components: {MsTableOperator, HomeBaseComponent, MsTableButton, HomePagination, BasicStatusLabel},
+  components: {MsTableOperator, HomeBaseComponent, MsTableButton, HomePagination, BasicStatusLabel,MsYanProgress},
   data() {
     return {
       loading: false,
@@ -97,9 +103,10 @@ export default {
       pageSize: 5,
       total: 0,
       tip: [
-        {text: "X", fillStyle: '#1F232926'},
+        {text: "X", fillStyle: '#AA4FBF'},//评审中
-        {text: "X", fillStyle: '#F76964'},
+        {text: "X", fillStyle: '#55B040'},//通过
-        {text: "X", fillStyle: '#AA4FBF'}
+        {text: "X", fillStyle: '#F76964'},//不通过
+        {text: "X", fillStyle: '#FFD131'}
       ]
     }
   },