From ffdc6e2bbb1f734ed669268c14ce632918c50259 Mon Sep 17 00:00:00 2001
From: sexygoat <1538832180@qq.com>
Date: Tue, 28 Apr 2026 09:38:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=81=9C=E6=9C=BA?=
 =?UTF-8?q?=E6=96=AD=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CurrentPackageCard.vue         | 54 ++++++++++++++-----
 .../components/PackageListCard.vue            | 54 ++++++++++++++-----
 2 files changed, 82 insertions(+), 26 deletions(-)

diff --git a/src/views/asset-management/asset-information/components/CurrentPackageCard.vue b/src/views/asset-management/asset-information/components/CurrentPackageCard.vue
index ba8218b..e57345e 100644
--- a/src/views/asset-management/asset-information/components/CurrentPackageCard.vue
+++ b/src/views/asset-management/asset-information/components/CurrentPackageCard.vue
@@ -95,23 +95,30 @@
                   }}</span>
                 </span>
               </div>
-              <ElProgress
-                :percentage="
-                  getUsageProgress(
-                    currentPackage.virtual_used_mb || 0,
-                    currentPackage.virtual_total_mb || 0
-                  )
-                "
-                :color="
-                  getProgressColorByPercentage(
+              <div class="progress-wrapper">
+                <ElProgress
+                  :percentage="
                     getUsageProgress(
                       currentPackage.virtual_used_mb || 0,
                       currentPackage.virtual_total_mb || 0
                     )
-                  )
-                "
-                :stroke-width="10"
-              />
+                  "
+                  :color="
+                    getProgressColorByPercentage(
+                      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>
+              </div>
             </div>
           </div>
         </template>
@@ -262,6 +269,11 @@
     }
     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">
@@ -355,6 +367,22 @@
           margin-bottom: 4px;
         }
       }
+
+      .progress-wrapper {
+        position: relative;
+
+        .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;
+        }
+      }
     }
 
     .package-info-table {
diff --git a/src/views/asset-management/asset-information/components/PackageListCard.vue b/src/views/asset-management/asset-information/components/PackageListCard.vue
index 228994e..505c61e 100644
--- a/src/views/asset-management/asset-information/components/PackageListCard.vue
+++ b/src/views/asset-management/asset-information/components/PackageListCard.vue
@@ -94,23 +94,30 @@
                       >停机阈值: {{ formatDataSize(scope.row.virtual_total_mb || 0) }}</span
                     >
                   </div>
-                  <ElProgress
-                    style="margin-top: 4px"
-                    :percentage="
-                      getUsageProgress(
-                        scope.row.virtual_used_mb || 0,
-                        scope.row.virtual_total_mb || 0
-                      )
-                    "
-                    :color="
-                      getProgressColorByPercentage(
+                  <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(
+                          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>
+                  </div>
                 </template>
                 <template v-else>
                   <div class="progress-text">
@@ -340,6 +347,11 @@
     getProgressColorByPercentage
   } = 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')) {
@@ -443,6 +455,22 @@
                 color: var(--el-text-color-secondary);
               }
             }
+
+            .progress-wrapper {
+              position: relative;
+
+              .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;
+              }
+            }
           }
         }
       }