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

fix: bug
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 2m9s
Details

Browse Source
This commit is contained in:
sexygoat
2026-04-23 14:59:05 +08:00
parent a9467e8a0c
commit a5e76313cb
28 changed files with 1284 additions and 702 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,66 +2,9 @@
<ElCard shadow="never" class="info-card current-package-card">
<template #header>
<div class="card-header">
<div class="card-header-left">
<span class="header-title">当前生效套餐</span>
<ElTag
v-if="currentPackage"
:type="getPackageStatusTagType(currentPackage.status)"
size="small"
>
{{ currentPackage?.status_name || '-' }}
</ElTag>
</div>
<!-- 中间：流量进度 -->
<div v-if="currentPackage && !props.boundDeviceId" class="header-progress">
<div class="header-progress-info">
<span class="progress-title">流量</span>
<span class="progress-text">
<template v-if="isAdminOrPlatform">
总量 {{ formatDataSize(currentPackage.data_limit_mb || currentPackage.package_total_data || 0) }} / 实际可用
{{ formatDataSize(currentPackage.enable_virtual_data ? (currentPackage.virtual_limit_mb || 0) : (currentPackage.data_limit_mb || currentPackage.package_total_data || 0)) }} / 剩余可用
{{ formatDataSize(currentPackage.enable_virtual_data ? (currentPackage.virtual_remain_mb || 0) : ((currentPackage.data_limit_mb || currentPackage.package_total_data || 0) - (currentPackage.data_usage_mb || 0))) }}
</template>
<template v-else>
总量 {{ formatDataSize(currentPackage.data_limit_mb || currentPackage.package_total_data || 0) }} / 剩余可用
{{ formatDataSize(currentPackage.enable_virtual_data ? (currentPackage.virtual_remain_mb || 0) : ((currentPackage.data_limit_mb || currentPackage.package_total_data || 0) - (currentPackage.data_usage_mb || 0))) }}
</template>
</span>
</div>
<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
)
)
: getProgressColorByPercentage(
getUsageProgress(
currentPackage.real_data_used || 0,
currentPackage.real_data_total || 0
)
)
"
:stroke-width="10"
/>
</div>
<div v-if="currentPackage" class="card-header-right">
<ElButton type="primary" size="small" @click="handleShowRecharge"> 套餐充值 </ElButton>
<span class="header-title">当前生效套餐</span>
<div class="header-actions">
<slot name="header-actions" />
</div>
</div>
</template>
@@ -86,33 +29,80 @@
<!-- 显示错误信息 -->
<ElAlert v-else-if="errorMsg" :title="errorMsg" type="warning" :closable="false" />
<!-- 显示套餐详情 -->
<ElDescriptions v-else-if="currentPackage" :column="3" border>
<ElDescriptionsItem label="套餐名称">
{{ currentPackage.package_name || '-' }}
</ElDescriptionsItem>
<ElDescriptionsItem label="套餐价格">
{{ formatAmount(currentPackage.package_price) }}
</ElDescriptionsItem>
<ElDescriptionsItem label="套餐类型">
{{ getPackageTypeName(currentPackage.package_type) }}
</ElDescriptionsItem>
<ElDescriptionsItem
v-if="currentPackage.enable_virtual_data && isAdminOrPlatform"
label="虚流量比例"
>
{{ currentPackage.virtual_ratio || '-' }}
</ElDescriptionsItem>
<ElDescriptionsItem v-if="currentPackage.duration_days" label="套餐时长" :span="3">
{{ currentPackage.duration_days }}天
</ElDescriptionsItem>
<ElDescriptionsItem label="开始时间">
{{ formatDateTime(currentPackage.start_time) || '-' }}
</ElDescriptionsItem>
<ElDescriptionsItem label="到期时间">
{{ formatDateTime(currentPackage.expire_time) || '-' }}
</ElDescriptionsItem>
</ElDescriptions>
<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 || currentPackage.package_total_data || 0) }}
</span>
</div>
<div v-if="isAdminOrPlatform && currentPackage.enable_virtual_data" class="flow-stat-item">
<span class="flow-stat-label">实际可用</span>
<span class="flow-stat-value">
{{ formatDataSize(currentPackage.virtual_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 || currentPackage.package_total_data || 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))
: getProgressColorByPercentage(getUsageProgress(currentPackage.real_data_used || 0, currentPackage.real_data_total || 0))
"
:stroke-width="14"
/>
</div>
</div>
<!-- 套餐详情表格 -->
<ElDescriptions :column="3" border class="package-info-table">
<ElDescriptionsItem label="套餐名称">
{{ currentPackage.package_name || '-' }}
</ElDescriptionsItem>
<ElDescriptionsItem label="套餐价格">
{{ formatAmount(currentPackage.paid_amount || currentPackage.package_price || 0) }}
</ElDescriptionsItem>
<ElDescriptionsItem label="套餐类型">
{{ getPackageTypeName(currentPackage.package_type) }}
</ElDescriptionsItem>
<ElDescriptionsItem v-if="isAdminOrPlatform && currentPackage.enable_virtual_data" label="虚流量比例">
{{ currentPackage.virtual_ratio || '-' }}
</ElDescriptionsItem>
<ElDescriptionsItem label="开始时间">
{{ formatDateTime(currentPackage.start_time) || '-' }}
</ElDescriptionsItem>
<ElDescriptionsItem label="到期时间">
{{ formatDateTime(currentPackage.expire_time) || '-' }}
</ElDescriptionsItem>
<ElDescriptionsItem label="购买时间">
{{ formatDateTime(currentPackage.created_at) || '-' }}
</ElDescriptionsItem>
<ElDescriptionsItem v-if="currentPackage.duration_days" label="套餐时长">
{{ currentPackage.duration_days }}天
</ElDescriptionsItem>
</ElDescriptions>
</template>
<!-- 空状态 -->
<ElEmpty v-else-if="!loading" :description="errorMsg || '暂无当前生效套餐'" :image-size="100" />
@@ -122,7 +112,6 @@
<script setup lang="ts">
import {
ElCard,
ElTag,
ElButton,
ElDescriptions,
ElDescriptionsItem,
@@ -136,21 +125,19 @@
import { formatDateTime } from '@/utils/business/format'
import type { PackageInfo } from '../types'
// Use formatters
const {
formatAmount,
formatDataSize,
getPackageStatusTagType,
getUsageProgress,
getProgressColorByPercentage
} = useAssetFormatters()
const userStore = useUserStore()
const { info: userInfo } = storeToRefs(userStore)
const isSuperAdmin = computed(() => userInfo.value.user_type === 1)
const isAdminOrPlatform = computed(() => userInfo.value.user_type === 1 || userInfo.value.user_type === 2)
const isAdminOrPlatform = computed(
() => userInfo.value.user_type === 1 || userInfo.value.user_type === 2
)
// Props
interface Props {
currentPackage: PackageInfo | null
loading?: boolean
@@ -168,18 +155,11 @@
boundDeviceName: ''
})
// Emits
const emit = defineEmits<{
showRecharge: []
navigateToDevice: [deviceNo: string]
}>()
// Methods
const handleShowRecharge = () => {
emit('showRecharge')
}
// 套餐类型名称
const getPackageTypeName = (type?: string) => {
const typeMap: Record<string, string> = {
formal: '正式套餐',
@@ -195,52 +175,49 @@
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
.card-header-left {
display: flex;
gap: 12px;
align-items: center;
.header-title {
font-size: 16px;
font-weight: 500;
}
}
.card-header-right {
display: flex;
gap: 8px;
align-items: center;
.header-title {
font-size: 16px;
font-weight: 500;
}
}
.header-progress {
flex: 1;
min-width: 0;
padding: 0 24px;
.flow-progress-card {
padding: 20px;
background: var(--el-fill-color-light);
border-radius: 8px;
margin-bottom: 20px;
.header-progress-info {
.flow-stats-row {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 6px;
gap: 32px;
margin-bottom: 16px;
.progress-title {
flex-shrink: 0;
font-size: 13px;
font-weight: 600;
color: var(--el-text-color-primary);
}
.flow-stat-item {
display: flex;
align-items: baseline;
gap: 8px;
.progress-text {
font-size: 12px;
color: var(--el-text-color-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.flow-stat-label {
font-size: 13px;
color: var(--el-text-color-secondary);
}
.flow-stat-value {
font-size: 16px;
font-weight: 600;
color: var(--el-text-color-primary);
}
}
}
.flow-progress-bar {
padding: 0 4px;
}
}
.package-info-table {
margin-top: 0;
}
}
</style>