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

feat:流量展示
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 4m30s
Details

Browse Source
This commit is contained in:
sexygoat
2026-04-27 15:57:31 +08:00
parent a055ff166a
commit d52efaadcb
3 changed files with 299 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,69 +32,140 @@
<template v-else-if="currentPackage">
<!-- 流量使用情况 - 横向进度条卡片 -->
<div class="flow-progress-card">
<div class="flow-stats-row">
<div class="flow-stat-item">
<span class="flow-stat-label">总量</span>
<span class="flow-stat-value">
{{ formatDataSize(currentPackage.data_limit_mb || 0) }}
</span>
</div>
<div v-if="isAdminOrPlatform" class="flow-stat-item">
<span class="flow-stat-label">实际可用</span>
<span class="flow-stat-value">
{{
formatDataSize(
currentPackage.enable_virtual_data
? currentPackage.virtual_limit_mb || 0
: currentPackage.data_limit_mb || 0
)
}}
</span>
</div>
<div class="flow-stat-item">
<span class="flow-stat-label">剩余可用</span>
<span class="flow-stat-value">
{{
formatDataSize(
currentPackage.enable_virtual_data
? currentPackage.virtual_remain_mb || 0
: (currentPackage.data_limit_mb || 0) - (currentPackage.data_usage_mb || 0)
)
}}
</span>
</div>
</div>
<div class="flow-progress-bar">
<ElProgress
:percentage="
currentPackage.enable_virtual_data
? getUsageProgress(
currentPackage.virtual_data_used || 0,
currentPackage.virtual_data_total || 0
)
: getUsageProgress(
currentPackage.real_data_used || 0,
currentPackage.real_data_total || 0
)
"
:color="
currentPackage.enable_virtual_data
? getProgressColorByPercentage(
getUsageProgress(
currentPackage.virtual_data_used || 0,
currentPackage.virtual_data_total || 0
<!-- 管理员视角：始终显示真流量和虚流量 -->
<template v-if="isAdminOrPlatform">
<div class="flow-stats-container">
<!-- 真流量 -->
<div class="flow-stat-section">
<div class="flow-stat-label">真流量使用</div>
<div class="flow-stat-row">
<span class="stat-item">
<span class="stat-label">已使用</span>
<span class="stat-value">{{ formatDataSize(currentPackage.data_usage_mb || 0) }}</span>
</span>
<span class="stat-item">
<span class="stat-label">总量</span>
<span class="stat-value">{{ formatDataSize(currentPackage.data_limit_mb || 0) }}</span>
</span>
<span class="stat-item">
<span class="stat-label">剩余</span>
<span class="stat-value">{{
formatDataSize(
(currentPackage.data_limit_mb || 0) - (currentPackage.data_usage_mb || 0)
)
}}</span>
</span>
</div>
<ElProgress
:percentage="
getUsageProgress(
currentPackage.data_usage_mb || 0,
currentPackage.data_limit_mb || 0
)
: getProgressColorByPercentage(
getUsageProgress(
currentPackage.real_data_used || 0,
currentPackage.real_data_total || 0
"
:color="getProgressColorByPercentage(
getUsageProgress(
currentPackage.data_usage_mb || 0,
currentPackage.data_limit_mb || 0
)
)"
:stroke-width="10"
/>
</div>
<!-- 虚流量 -->
<div class="flow-stat-section">
<div class="flow-stat-label">虚流量使用</div>
<div class="flow-stat-row">
<span class="stat-item">
<span class="stat-label">已使用</span>
<span class="stat-value">{{ formatDataSize(currentPackage.virtual_used_mb || 0) }}</span>
</span>
<span class="stat-item">
<span class="stat-label">总量</span>
<span class="stat-value">{{ formatDataSize(currentPackage.virtual_limit_mb || 0) }}</span>
</span>
<span class="stat-item">
<span class="stat-label">剩余</span>
<span class="stat-value">{{
formatDataSize(
(currentPackage.virtual_limit_mb || 0) - (currentPackage.virtual_used_mb || 0)
)
}}</span>
</span>
</div>
<ElProgress
:percentage="
getUsageProgress(
currentPackage.virtual_used_mb || 0,
currentPackage.virtual_limit_mb || 0
)
"
:stroke-width="14"
/>
</div>
"
:color="getProgressColorByPercentage(
getUsageProgress(
currentPackage.virtual_used_mb || 0,
currentPackage.virtual_limit_mb || 0
)
)"
:stroke-width="10"
/>
</div>
</div>
</template>
<!-- 非管理员 或 未启用虚流量 -->
<template v-else>
<div class="flow-stats-row">
<div class="flow-stat-item">
<span class="flow-stat-label">已使用</span>
<span class="flow-stat-value">
{{
formatDataSize(
currentPackage.enable_virtual_data
? currentPackage.virtual_used_mb || 0
: currentPackage.data_usage_mb || 0
)
}}
</span>
</div>
<div class="flow-stat-item">
<span class="flow-stat-label">总量</span>
<span class="flow-stat-value">
{{ formatDataSize(currentPackage.data_limit_mb || 0) }}
</span>
</div>
<div class="flow-stat-item">
<span class="flow-stat-label">剩余</span>
<span class="flow-stat-value">
{{
formatDataSize(
(currentPackage.data_limit_mb || 0) - (currentPackage.data_usage_mb || 0)
)
}}
</span>
</div>
</div>
<div class="flow-progress-bar" style="margin-top: 16px">
<ElProgress
:percentage="
getUsageProgress(
currentPackage.enable_virtual_data
? currentPackage.virtual_used_mb || 0
: currentPackage.data_usage_mb || 0,
currentPackage.data_limit_mb || 0
)
"
:color="getProgressColorByPercentage(
getUsageProgress(
currentPackage.enable_virtual_data
? currentPackage.virtual_used_mb || 0
: currentPackage.data_usage_mb || 0,
currentPackage.data_limit_mb || 0
)
)"
:stroke-width="14"
/>
</div>
</template>
</div>
<!-- 套餐详情表格 -->
@@ -111,12 +182,12 @@
<ElDescriptionsItem label="套餐类型">
{{ getPackageTypeName(currentPackage.package_type) }}
</ElDescriptionsItem>
<!--<ElDescriptionsItem-->
<!-- v-if="isAdminOrPlatform && currentPackage.enable_virtual_data"-->
<!-- label="虚流量比例"-->
<!--&gt;-->
<!-- {{ currentPackage.virtual_ratio || '-' }}-->
<!--</ElDescriptionsItem>-->
<ElDescriptionsItem
v-if="isAdminOrPlatform && currentPackage.enable_virtual_data"
label="虚流量比例"
>
{{ currentPackage.virtual_ratio || '-' }}
</ElDescriptionsItem>
<ElDescriptionsItem label="开始时间">
{{ formatDateTime(currentPackage.start_time) || '-' }}
</ElDescriptionsItem>
@@ -212,6 +283,46 @@
border-radius: 8px;
margin-bottom: 20px;
.flow-stats-container {
display: flex;
gap: 40px;
.flow-stat-section {
flex: 1;
min-width: 0;
.flow-stat-label {
font-size: 13px;
color: var(--el-text-color-secondary);
margin-bottom: 8px;
font-weight: 500;
}
.flow-stat-row {
display: flex;
gap: 16px;
margin-bottom: 8px;
.stat-item {
display: flex;
align-items: baseline;
gap: 4px;
.stat-label {
font-size: 12px;
color: var(--el-text-color-secondary);
}
.stat-value {
font-size: 14px;
font-weight: 600;
color: var(--el-text-color-primary);
}
}
}
}
}
.flow-stats-row {
display: flex;
gap: 32px;
@@ -237,6 +348,12 @@
.flow-progress-bar {
padding: 0 4px;
.progress-label {
font-size: 12px;
color: var(--el-text-color-secondary);
margin-bottom: 4px;
}
}
}