From f7a7b6905f93948bdac225c78803af45e4c10b2f Mon Sep 17 00:00:00 2001
From: lijiahang <ljh1553488six@139.com>
Date: Mon, 13 May 2024 10:28:35 +0800
Subject: [PATCH] =?UTF-8?q?:zap:=20=E4=BC=98=E5=8C=96=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E6=95=B0=E9=87=8F=E6=98=BE=E7=A4=BA.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 orion-ops-ui/src/assets/style/global.less     |  4 ++
 .../components/batch-upload-hosts.vue         | 53 ++++++++-----------
 2 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/orion-ops-ui/src/assets/style/global.less b/orion-ops-ui/src/assets/style/global.less
index f92df832..ae3f4176 100644
--- a/orion-ops-ui/src/assets/style/global.less
+++ b/orion-ops-ui/src/assets/style/global.less
@@ -265,6 +265,10 @@ body {
   cursor: pointer;
 }
 
+.span-green {
+  color: rgb(var(--green-6));
+}
+
 .span-blue {
   color: rgb(var(--arcoblue-6));
 }
diff --git a/orion-ops-ui/src/views/exec/batch-upload/components/batch-upload-hosts.vue b/orion-ops-ui/src/views/exec/batch-upload/components/batch-upload-hosts.vue
index bf918dc9..832e5974 100644
--- a/orion-ops-ui/src/views/exec/batch-upload/components/batch-upload-hosts.vue
+++ b/orion-ops-ui/src/views/exec/batch-upload/components/batch-upload-hosts.vue
@@ -36,27 +36,21 @@
             </div>
           </div>
           <!-- 主机状态 -->
-          <a-space class="host-item-status" direction="vertical">
-            <!-- 未完成 -->
-            <a-tag class="host-item-status-tag"
-                   color="#73D13D"
-                   title="未完成数量"
-                   size="small">
-              {{ host.files.length - getFinishCount(host.files) }}
-              <template #icon>
-                <icon-clock-circle class="host-item-status-icon" />
-              </template>
-            </a-tag>
+          <a-space class="host-item-status"
+                   direction="vertical"
+                   size="mini">
+            <!-- 传输中 -->
+            <span class="host-item-status-text span-green" title="传输中">
+              {{ getStatusCount(host.files, [UploadTaskFileStatus.WAITING, UploadTaskFileStatus.UPLOADING]) }}
+            </span>
             <!-- 已完成 -->
-            <a-tag class="host-item-status-tag"
-                   color="#40A9FF"
-                   title="已完成数量"
-                   size="small">
-              {{ getFinishCount(host.files) }}
-              <template #icon>
-                <icon-check-circle class="host-item-status-icon" />
-              </template>
-            </a-tag>
+            <span class="host-item-status-text span-blue" title="已完成">
+              {{ getStatusCount(host.files, [UploadTaskFileStatus.FINISHED, UploadTaskFileStatus.CANCELED]) }}
+            </span>
+            <!-- 已失败 -->
+            <span class="host-item-status-text span-red" title="已失败">
+              {{ getStatusCount(host.files, [UploadTaskFileStatus.FAILED]) }}
+            </span>
           </a-space>
         </div>
       </a-scrollbar>
@@ -90,10 +84,8 @@
   };
 
   // 获取已完成数量
-  const getFinishCount = (files: Array<UploadTaskFile>) => {
-    return files.filter(s => s.status === UploadTaskFileStatus.FINISHED
-      || s.status === UploadTaskFileStatus.CANCELED
-      || s.status === UploadTaskFileStatus.FAILED).length;
+  const getStatusCount = (files: Array<UploadTaskFile>, status: Array<string>) => {
+    return files.filter(s => status.includes(s.status)).length;
   };
 
 </script>
@@ -124,7 +116,7 @@
       }
 
       &-host {
-        width: calc(100% - 64px);
+        width: calc(100% - 48px);
         display: flex;
         align-items: flex-start;
         flex-direction: column;
@@ -134,13 +126,12 @@
       &-status {
         user-select: none;
 
-        &-tag {
-          max-width: 64px;
+        &-text {
           width: 100%;
-        }
-
-        &-icon {
-          color: #FFFFFF;
+          max-width: 48px;
+          display: inline-flex;
+          justify-content: flex-end;
+          font-weight: 600;
         }
       }