fix:进度条

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

@@ -4,7 +4,10 @@
       <div class="card-header">
         <span>套餐列表</span>
         <div class="card-header-right">
-          <ElButton type="primary" :disabled="props.boundDeviceId" @click="handleShowRecharge"
+          <ElButton
+            type="primary"
+            :disabled="Boolean(props.boundDeviceId)"
+            @click="handleShowRecharge"
             >套餐充值</ElButton
           >
         </div>
@@ -97,28 +100,46 @@
                     >
                   </div>
                   <div class="progress-wrapper">
-                    <ElProgress
-                      style="margin-top: 4px"
-                      :percentage="
-                        getUsageProgress(
-                          scope.row.virtual_used_mb || 0,
-                          scope.row.virtual_total_mb || 0
-                        )
-                      "
-                      :color="
-                        getProgressColorByPercentage(
+                    <div class="progress-track">
+                      <ElProgress
+                        style="margin-top: 4px"
+                        :show-text="false"
+                        :percentage="
+                          getUsageProgress(
+                            scope.row.virtual_used_mb || 0,
+                            scope.row.virtual_total_mb || 0
+                          )
+                        "
+                        :color="
+                          getProgressColorByPercentage(
+                            getUsageProgress(
+                              scope.row.virtual_used_mb || 0,
+                              scope.row.virtual_total_mb || 0
+                            )
+                          )
+                        "
+                      />
+                      <div
+                        class="breakpoint-marker"
+                        :style="
+                          getBreakpointMarkerStyle(
+                            scope.row.virtual_total_mb || 0,
+                            scope.row.real_total_mb || 0
+                          )
+                        "
+                        :title="`停机阈值/真流量总量: ${formatDataSize(scope.row.virtual_total_mb || 0)} / ${formatDataSize(scope.row.real_total_mb || 0)}`"
+                      ></div>
+                    </div>
+                    <span class="progress-percentage">
+                      {{
+                        formatProgressPercentage(
                           getUsageProgress(
                             scope.row.virtual_used_mb || 0,
                             scope.row.virtual_total_mb || 0
                           )
                         )
-                      "
-                    />
-                    <div
-                      class="breakpoint-marker"
-                      :style="{ left: getBreakpointPosition(scope.row) + '%' }"
-                      :title="`停机阈值/真流量总量: ${formatDataSize(scope.row.virtual_total_mb || 0)} / ${formatDataSize(scope.row.real_total_mb || 0)}`"
-                    ></div>
+                      }}
+                    </span>
                   </div>
                 </template>
                 <template v-else>
@@ -346,14 +367,11 @@
     formatAmount,
     getPackageStatusTagType,
     getUsageProgress,
-    getProgressColorByPercentage
+    getProgressColorByPercentage,
+    formatProgressPercentage,
+    getBreakpointMarkerStyle
   } = useAssetFormatters()
 
-  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
-  }
-
   // 套餐名称点击
   const handlePackageNameClick = (packageRow: PackageInfo) => {
     if (!hasAuth('package_usage:daily_records')) {
@@ -459,18 +477,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;
               }
             }
           }