From 62377effe9502880e400c393285aad64ffcc1fe8 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 22 Mar 2024 18:52:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A8=A1=E5=9E=8B=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/views/template/component/ModelCard.vue | 45 ++++++++++++++++++-
 1 file changed, 43 insertions(+), 2 deletions(-)

diff --git a/ui/src/views/template/component/ModelCard.vue b/ui/src/views/template/component/ModelCard.vue
index 8694c7894..050be3987 100644
--- a/ui/src/views/template/component/ModelCard.vue
+++ b/ui/src/views/template/component/ModelCard.vue
@@ -15,12 +15,25 @@
         </li>
       </ul>
     </div>
+    <!-- progress -->
+    <div class="progress-mask" v-if="model.status === 'DOWNLOAD'">
+      <!-- <el-progress type="circle" :percentage="progress" />
+      <p>正在下载 <span class="dotting"></span></p> -->
+      <el-progress type="dashboard" :percentage="progress" class="percentage">
+        <template #default="{ percentage }">
+          <span class="percentage-value">{{ percentage }}%</span>
+          <span class="percentage-label">正在下载 <span class="dotting"></span></span>
+        </template>
+      </el-progress>
+    </div>
 
     <template #mouseEnter>
       <div class="operation-button">
         <el-tooltip effect="dark" content="修改" placement="top">
           <el-button text @click.stop="openEditModel">
-            <el-icon><EditPen /></el-icon>
+            <el-icon>
+              <component :is="model.status === 'ERROR' ? 'RefreshRight' : 'EditPen'" />
+            </el-icon>
           </el-button>
         </el-tooltip>
 
@@ -54,7 +67,7 @@ const progress = computed(() => {
       const maxObj = down_model_chunk.reduce((prev: any, current: any) => {
         return (prev.index || 0) > (current.index || 0) ? prev : current
       })
-      return maxObj.progress
+      return maxObj.progress?.toFixed(1)
     }
     return 0
   }
@@ -126,5 +139,33 @@ onBeforeUnmount(() => {
       margin-left: 4px;
     }
   }
+  .progress-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgba(122, 122, 122, 0.8);
+    width: 100%;
+    height: 100%;
+    z-index: 111;
+    text-align: center;
+    .percentage {
+      top: 50%;
+      transform: translateY(-50%);
+      margin-top: 5px;
+    }
+
+    .percentage-value {
+      display: block;
+      margin-top: 10px;
+      font-size: 28px;
+      color: #ffffff;
+    }
+    .percentage-label {
+      display: block;
+      margin-top: 10px;
+      font-size: 12px;
+      color: #ffffff;
+    }
+  }
 }
 </style>