⚡ 优化上传数量显示.

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));
 }

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-space class="host-item-status"
-            <!-- 未完成 -->
+                   direction="vertical"
-            <a-tag class="host-item-status-tag"
+                   size="mini">
-                   color="#73D13D"
+            <!-- 传输中 -->
-                   title="未完成数量"
+            <span class="host-item-status-text span-green" title="传输中">
-                   size="small">
+              {{ getStatusCount(host.files, [UploadTaskFileStatus.WAITING, UploadTaskFileStatus.UPLOADING]) }}
-              {{ host.files.length - getFinishCount(host.files) }}
+            </span>
-              <template #icon>
-                <icon-clock-circle class="host-item-status-icon" />
-              </template>
-            </a-tag>
             <!-- 已完成 -->
-            <a-tag class="host-item-status-tag"
+            <span class="host-item-status-text span-blue" title="已完成">
-                   color="#40A9FF"
+              {{ getStatusCount(host.files, [UploadTaskFileStatus.FINISHED, UploadTaskFileStatus.CANCELED]) }}
-                   title="已完成数量"
+            </span>
-                   size="small">
+            <!-- 已失败 -->
-              {{ getFinishCount(host.files) }}
+            <span class="host-item-status-text span-red" title="已失败">
-              <template #icon>
+              {{ getStatusCount(host.files, [UploadTaskFileStatus.FAILED]) }}
-                <icon-check-circle class="host-item-status-icon" />
+            </span>
-              </template>
-            </a-tag>
           </a-space>
         </div>
       </a-scrollbar>
@@ -90,10 +84,8 @@
   };
 
   // 获取已完成数量
-  const getFinishCount = (files: Array<UploadTaskFile>) => {
+  const getStatusCount = (files: Array<UploadTaskFile>, status: Array<string>) => {
-    return files.filter(s => s.status === UploadTaskFileStatus.FINISHED
+    return files.filter(s => status.includes(s.status)).length;
-      || s.status === UploadTaskFileStatus.CANCELED
-      || s.status === UploadTaskFileStatus.FAILED).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 {
+        &-text {
-          max-width: 64px;
           width: 100%;
-        }
+          max-width: 48px;
-
+          display: inline-flex;
-        &-icon {
+          justify-content: flex-end;
-          color: #FFFFFF;
+          font-weight: 600;
         }
       }