fix:进度条

src/views/asset-management/asset-information/components/CurrentPackageCard.vue

@@ -96,28 +96,46 @@
                 </span>
               </div>
               <div class="progress-wrapper">
-                <ElProgress
-                  :percentage="
-                    getUsageProgress(
-                      currentPackage.virtual_used_mb || 0,
-                      currentPackage.virtual_total_mb || 0
-                    )
-                  "
-                  :color="
-                    getProgressColorByPercentage(
+                <div class="progress-track">
+                  <ElProgress
+                    :show-text="false"
+                    :percentage="
+                      getUsageProgress(
+                        currentPackage.virtual_used_mb || 0,
+                        currentPackage.virtual_total_mb || 0
+                      )
+                    "
+                    :color="
+                      getProgressColorByPercentage(
+                        getUsageProgress(
+                          currentPackage.virtual_used_mb || 0,
+                          currentPackage.virtual_total_mb || 0
+                        )
+                      )
+                    "
+                    :stroke-width="10"
+                  />
+                  <div
+                    class="breakpoint-marker"
+                    :style="
+                      getBreakpointMarkerStyle(
+                        currentPackage.virtual_total_mb || 0,
+                        currentPackage.real_total_mb || 0
+                      )
+                    "
+                    :title="`停机阈值/真流量总量: ${formatDataSize(currentPackage.virtual_total_mb || 0)} / ${formatDataSize(currentPackage.real_total_mb || 0)}`"
+                  ></div>
+                </div>
+                <span class="progress-percentage">
+                  {{
+                    formatProgressPercentage(
                       getUsageProgress(
                         currentPackage.virtual_used_mb || 0,
                         currentPackage.virtual_total_mb || 0
                       )
                     )
-                  "
-                  :stroke-width="10"
-                />
-                <div
-                  class="breakpoint-marker"
-                  :style="{ left: getBreakpointPosition(currentPackage) + '%' }"
-                  :title="`停机阈值/真流量总量: ${formatDataSize(currentPackage.virtual_total_mb || 0)} / ${formatDataSize(currentPackage.real_total_mb || 0)}`"
-                ></div>
+                  }}
+                </span>
               </div>
             </div>
           </div>
@@ -231,8 +249,14 @@
   import { formatDateTime } from '@/utils/business/format'
   import type { PackageInfo } from '../types'
 
-  const { formatAmount, formatDataSize, getUsageProgress, getProgressColorByPercentage } =
-    useAssetFormatters()
+  const {
+    formatAmount,
+    formatDataSize,
+    getUsageProgress,
+    getProgressColorByPercentage,
+    formatProgressPercentage,
+    getBreakpointMarkerStyle
+  } = useAssetFormatters()
 
   const userStore = useUserStore()
   const { info: userInfo } = storeToRefs(userStore)
@@ -269,11 +293,6 @@
     }
     return typeMap[type || ''] || '-'
   }
-
-  const getBreakpointPosition = (pkg: PackageInfo) => {
-    if (!pkg.real_total_mb || pkg.real_total_mb === 0) return 0
-    return (pkg.virtual_total_mb / pkg.real_total_mb) * 100
-  }
 </script>
 
 <style scoped lang="scss">
@@ -369,18 +388,34 @@
       }
 
       .progress-wrapper {
-        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 1px;
 
-        .breakpoint-marker {
-          position: absolute;
-          top: 50%;
-          width: 8px;
-          height: 8px;
-          background-color: var(--el-color-danger);
-          border-radius: 50%;
-          transform: translate(-50%, -50%);
-          z-index: 1;
-          cursor: pointer;
+        .progress-track {
+          position: relative;
+          flex: 1;
+          min-width: 0;
+
+          .breakpoint-marker {
+            position: absolute;
+            top: 50%;
+            width: 8px;
+            height: 8px;
+            background-color: var(--el-color-danger);
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 1;
+            cursor: pointer;
+          }
+        }
+
+        .progress-percentage {
+          min-width: 44px;
+          font-size: 14px;
+          color: var(--el-text-color-secondary);
+          text-align: right;
+          white-space: nowrap;
         }
       }
     }