luo/one-pipe-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 资产信息流量显示
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 6m22s
Details

Browse Source
This commit is contained in:
luo
2026-07-21 14:51:29 +08:00
parent 2c8524485b
commit f52970ae6c
6 changed files with 212 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/views/asset-management/asset-information/components/CurrentPackageCard.vue
View File

@@ -59,24 +59,45 @@
)
}}</span>
</span>
<span v-if="canShowCurrentPackageVirtualUsage" class="stat-item">
<span class="stat-label">停机阈值</span>
<span class="stat-value">{{
formatDataSize(currentPackage.virtual_total_mb || 0)
}}</span>
</span>
</div>
<div class="progress-wrapper">
<div class="progress-track">
<ElProgress
:percentage="
getUsageProgress(
currentPackage.real_used_mb || 0,
currentPackage.real_total_mb || 0
)
"
:color="
getProgressColorByPercentage(
getUsageProgress(
currentPackage.real_used_mb || 0,
currentPackage.real_total_mb || 0
)
)
"
:stroke-width="10"
/>
<div
v-if="canShowCurrentPackageVirtualUsage"
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>
</div>
<ElProgress
:percentage="
getUsageProgress(
currentPackage.real_used_mb || 0,
currentPackage.real_total_mb || 0
)
"
:color="
getProgressColorByPercentage(
getUsageProgress(
currentPackage.real_used_mb || 0,
currentPackage.real_total_mb || 0
)
)
"
:stroke-width="10"
/>
</div>
<!-- 虚流量 -->
<div v-if="canShowCurrentPackageVirtualUsage" class="flow-stat-section">
@@ -89,9 +110,17 @@
}}</span>
</span>
<span class="stat-item">
<span class="stat-label">停机阈值</span>
<span class="stat-label">总量</span>
<span class="stat-value">{{
formatDataSize(currentPackage.virtual_total_mb || 0)
formatDataSize(currentPackage.real_total_mb || 0)
}}</span>
</span>
<span class="stat-item">
<span class="stat-label">剩余</span>
<span class="stat-value">{{
formatDataSize(
(currentPackage.real_total_mb || 0) - (currentPackage.virtual_used_mb || 0)
)
}}</span>
</span>
</div>
@@ -115,16 +144,6 @@
"
: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">
{{

67
src/views/asset-management/asset-information/components/PackageListCard.vue
View File

@@ -84,19 +84,42 @@
)
}}</span
>
<span v-if="canShowPackageVirtualUsage(scope.row)" class="total"
>停机阈值: {{ formatDataSize(scope.row.virtual_total_mb || 0) }}</span
>
</div>
<div v-if="canViewCurrentPackageRealUsage" class="progress-wrapper">
<div class="progress-track">
<ElProgress
style="margin-top: 4px"
:percentage="
getUsageProgress(
scope.row.real_used_mb || 0,
scope.row.real_total_mb || 0
)
"
:color="
getProgressColorByPercentage(
getUsageProgress(
scope.row.real_used_mb || 0,
scope.row.real_total_mb || 0
)
)
"
/>
<div
v-if="canShowPackageVirtualUsage(scope.row)"
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>
</div>
<ElProgress
v-if="canViewCurrentPackageRealUsage"
style="margin-top: 4px"
:percentage="
getUsageProgress(scope.row.real_used_mb || 0, scope.row.real_total_mb || 0)
"
:color="
getProgressColorByPercentage(
getUsageProgress(scope.row.real_used_mb || 0, scope.row.real_total_mb || 0)
)
"
/>
<div
v-if="canShowPackageVirtualUsage(scope.row)"
class="progress-text"
@@ -106,7 +129,15 @@
>已使用虚流量: {{ formatDataSize(scope.row.virtual_used_mb || 0) }}</span
>
<span class="total"
>停机阈值: {{ formatDataSize(scope.row.virtual_total_mb || 0) }}</span
>总量: {{ formatDataSize(scope.row.real_total_mb || 0) }}</span
>
<span class="remaining"
>剩余:
{{
formatDataSize(
(scope.row.real_total_mb || 0) - (scope.row.virtual_used_mb || 0)
)
}}</span
>
</div>
<div v-if="canShowPackageVirtualUsage(scope.row)" class="progress-wrapper">
@@ -129,16 +160,6 @@
)
"
/>
<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">
{{