From 7dd16936317b8e5cdc7d6347d21f478c203d6c1b Mon Sep 17 00:00:00 2001
From: likexuan <likexuan@geedgenetworks.com>
Date: Fri, 9 Sep 2022 13:59:10 +0800
Subject: [PATCH] =?UTF-8?q?feat=20:=20asset=20process=20=E4=BA=8C=E7=BA=A7?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=20=E8=BF=9B=E5=BA=A6=E6=9D=A1=E6=9B=B4?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/table/asset/assetProcessTable.vue  | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/nezha-fronted/src/components/common/table/asset/assetProcessTable.vue b/nezha-fronted/src/components/common/table/asset/assetProcessTable.vue
index 3b90325ee..f9e7c6596 100644
--- a/nezha-fronted/src/components/common/table/asset/assetProcessTable.vue
+++ b/nezha-fronted/src/components/common/table/asset/assetProcessTable.vue
@@ -54,15 +54,15 @@
           {{utcTimeToTimezoneStr(scope.row[item.prop])}}
         </template>
         <template v-else-if="item.prop === 'cpuUsage'">
-            <div style="height:100%;">
-                <progress id="container" max="100" :value= scope.row[item.prop]></progress>
-                <div style="float:left">{{scope.row[item.prop] + '%'}}</div>
+            <div style="height:100%;display: flex;align-items: center;">
+                <el-progress id="container" :show-text="false" :stroke-width="18" :color="'#00c398'" :percentage="scope.row[item.prop]"></el-progress>
+                <div class="percentage">{{scope.row[item.prop] + '%'}}</div>
             </div>
         </template>
         <template v-else-if="item.prop === 'memUsage'">
-            <div style="height:100%;">
-                <progress id="container" max="100" :value= scope.row[item.prop]></progress>
-                <div style="float:left">{{scope.row[item.prop] + '%'}}</div>
+            <div style="height:100%;height:100%;display: flex;align-items: center;">
+                <el-progress id="container" :show-text="false" :stroke-width="18" :color="'#00c398'" :percentage="scope.row[item.prop]"></el-progress>
+                <div class="percentage">{{scope.row[item.prop] + '%'}}</div>
             </div>
         </template>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
@@ -178,16 +178,22 @@ export default {
   border-radius: 0;
 }
 #container {
-  float:left;
   width: 120px;
+  min-width: 120px;
   height: 18px;
   margin-right: 15px;
+}
+.percentage{
+  flex-grow: 1;
+  word-wrap: break-word;
+}
+>>>.el-progress-bar__outer{
+  border-radius: 2px;
   background-color: #e6eaed;
 }
- /* 进度条被填充部分的背景颜色 */
-::-webkit-progress-value {
-     background-color: #00c398;
- }
+>>>.el-progress-bar__inner{
+  border-radius: 0;
+}
   /deep/ .active-icon {
     margin-left: 5px;
   }