修改 终端运行评价

src/views/pqs/runManage/runEvaluate/components/region.vue

@@ -2,13 +2,16 @@
     <div :style="height" style="overflow-y: auto" class="pd10">
         <!-- <MyEChart :options="options" /> -->
         <div v-for="(item, index) in List">
-            <div class="box">
-                <div class="div">{{ item.name }}({{ item.count }}台)：</div>
+            <div class="box" @mouseenter="item.flag = false" @mouseleave="item.flag = true">
+                <div class="div">{{ item.name }} <span>({{ item.count }}台)</span></div>
                 <!-- <el-progress style="flex: 1" :percentage="(item.count / total).toFixed(2) * 100">
                 <span>{{ item.count }}台</span>
             </el-progress> -->
                 <el-progress style="flex: 1" :percentage="item.score" :color="ratingColor(item.score)">
-                    <span :style="`color:${ratingColor(item.score)}`">{{ item.score }}分</span>
+                    <span v-if="item.flag" :style="`color:${ratingColor(item.score)}`">
+                        {{ ratingName(item.score) }}
+                    </span>
+                    <span v-else :style="`color:${ratingColor(item.score)}`">{{ item.score }}分</span>
                 </el-progress>
             </div>
             <el-divider />
@@ -35,6 +38,9 @@ const info = () => {
     areaTerminalStatistic(props.params).then(res => {
         total.value = res.data.reduce((sum, item) => sum + Number(item.count), 0)
         List.value = res.data
+        List.value.forEach(item => {
+            item.flag = true
+        })
     })
     //     let dataSource = [
     //         { value: '90', name: '张家口' },
@@ -95,7 +101,7 @@ const info = () => {
     //                                 ? '#2b7fd3'
     //                                 : params.value >= 70
     //                                 ? '#ffcc33'
-    //                                 : '#97017e'
+    //                                 : '#c00'
     //                         }
     //                     },
     //                     markLine: {
@@ -148,13 +154,24 @@ const info = () => {
 }
 const ratingColor = (num: number) => {
     if (num >= 90) {
-        return '#19A094'
+        return '#00b07d'
     } else if (num >= 80) {
         return '#2b7fd3'
     } else if (num >= 70) {
         return '#ff8c00'
     } else {
-        return '#97017e'
+        return '#c00'
+    }
+}
+const ratingName = (num: number) => {
+    if (num >= 90) {
+        return '优秀'
+    } else if (num >= 80) {
+        return '良好'
+    } else if (num >= 70) {
+        return '一般'
+    } else {
+        return '较差'
     }
 }
 onMounted(() => {
@@ -198,12 +215,17 @@ defineExpose({
     }
 }
 .box {
+    cursor: pointer;
     // display: flex;
     .div {
         // width: 100px;
+        font-size: 16px;
+        span{
+            font-size: 14px;
+        }
     }
 }
 :deep(.el-divider--horizontal) {
-    margin: 10px 0;
+    margin: 5px 0;
 }
 </style>