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

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

@@ -55,46 +55,117 @@
</ElTag>
</template>
</ElTableColumn>
<ElTableColumn label="流量" min-width="320">
<ElTableColumn label="流量" min-width="450">
<template #default="scope">
<div class="traffic-progress">
<div class="progress-text">
<template v-if="scope.row.enable_virtual_data">
<template v-if="isAdminOrPlatform">
<div class="progress-text">
<span class="used"
>已用: {{ formatDataSize(scope.row.virtual_used_mb || 0) }}</span
>
<span class="remaining"
>剩余: {{ formatDataSize(scope.row.virtual_remain_mb || 0) }}</span
>已使用真流量: {{ formatDataSize(scope.row.data_usage_mb || 0) }}</span
>
<span class="total"
>总量: {{ formatDataSize(scope.row.virtual_limit_mb || 0) }}</span
>真流量总量: {{ formatDataSize(scope.row.data_limit_mb || 0) }}</span
>
<span class="remaining"
>真流量剩余:
{{
formatDataSize(
(scope.row.data_limit_mb || 0) - (scope.row.data_usage_mb || 0)
)
}}</span
>
</div>
<ElProgress
style="margin-top: 4px"
:percentage="
getUsageProgress(scope.row.data_usage_mb || 0, scope.row.data_limit_mb || 0)
"
:color="
getProgressColorByPercentage(
getUsageProgress(scope.row.data_usage_mb || 0, scope.row.data_limit_mb || 0)
)
"
/>
<div class="progress-text" style="margin-top: 8px">
<span class="used"
>已使用虚流量: {{ formatDataSize(scope.row.virtual_used_mb || 0) }}</span
>
<span class="total"
>虚流量总量: {{ formatDataSize(scope.row.virtual_limit_mb || 0) }}</span
>
<span class="remaining"
>虚流量剩余:
{{
formatDataSize(
(scope.row.virtual_limit_mb || 0) - (scope.row.virtual_used_mb || 0)
)
}}</span
>
</div>
<ElProgress
style="margin-top: 4px"
:percentage="
getUsageProgress(
scope.row.virtual_used_mb || 0,
scope.row.virtual_limit_mb || 0
)
"
:color="
getProgressColorByPercentage(
getUsageProgress(
scope.row.virtual_used_mb || 0,
scope.row.virtual_limit_mb || 0
)
)
"
/>
</template>
<template v-else>
<div class="progress-text">
<span class="used"
>已使用:
{{
formatDataSize(
scope.row.enable_virtual_data
? scope.row.virtual_used_mb || 0
: scope.row.data_usage_mb || 0
)
}}</span
>
<span class="total"
>总量: {{ formatDataSize(scope.row.data_limit_mb || 0) }}</span
>
</template>
<template v-else>
<span class="used">已用: {{ formatDataSize(scope.row.data_usage_mb) }}</span>
<span class="remaining"
>剩余:
{{ formatDataSize(scope.row.data_limit_mb - scope.row.data_usage_mb) }}</span
{{
formatDataSize(
(scope.row.data_limit_mb || 0) - (scope.row.data_usage_mb || 0)
)
}}</span
>
<span class="total">总量: {{ formatDataSize(scope.row.data_limit_mb) }}</span>
</template>
</div>
<ElProgress
:percentage="
scope.row.enable_virtual_data
? getUsageProgress(scope.row.virtual_used_mb, scope.row.virtual_limit_mb)
: getUsageProgress(scope.row.data_usage_mb, scope.row.data_limit_mb)
"
:color="
scope.row.enable_virtual_data
? getProgressColorByPercentage(
getUsageProgress(scope.row.virtual_used_mb, scope.row.virtual_limit_mb)
</div>
<ElProgress
style="margin-top: 8px"
:percentage="
getUsageProgress(
scope.row.enable_virtual_data
? scope.row.virtual_used_mb || 0
: scope.row.data_usage_mb || 0,
scope.row.data_limit_mb || 0
)
"
:color="
getProgressColorByPercentage(
getUsageProgress(
scope.row.enable_virtual_data
? scope.row.virtual_used_mb || 0
: scope.row.data_usage_mb || 0,
scope.row.data_limit_mb || 0
)
: getProgressColorByPercentage(
getUsageProgress(scope.row.data_usage_mb, scope.row.data_limit_mb)
)
"
/>
)
"
/>
</template>
</div>
</template>
</ElTableColumn>
@@ -187,9 +258,16 @@
import { formatDateTime } from '@/utils/business/format'
import type { AssetPackageUsageRecord } from '@/types/api'
import { useAuth } from '@/composables/useAuth'
import { useUserStore } from '@/store/modules/user'
import { storeToRefs } from 'pinia'
import CreateRefundDialog from '@/components/business/CreateRefundDialog.vue'
const { hasAuth } = useAuth()
const userStore = useUserStore()
const { info: userInfo } = storeToRefs(userStore)
const isAdminOrPlatform = computed(
() => userInfo.value.user_type === 1 || userInfo.value.user_type === 2
)
// 退款申请对话框
const createRefundDialogVisible = ref(false)