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

fix(operator): fix operator edit issue
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 4m35s
Details

Browse Source
This commit is contained in:
sexygoat
2026-04-10 09:50:00 +08:00
parent c2c1644799
commit 9a6f085cde
20 changed files with 4082 additions and 2782 deletions
Download Patch File Download Diff File Expand all files Collapse all files

226
src/views/asset-management/asset-information/components/CurrentPackageCard.vue Normal file
View File

@@ -0,0 +1,226 @@
<template>
<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" class="card-header-right">
<ElButton type="primary" size="small" @click="handleShowRecharge"> 套餐充值 </ElButton>
</div>
</div>
</template>
<!-- 显示错误信息 -->
<ElAlert v-if="errorMsg" :title="errorMsg" type="warning" :closable="false" />
<!-- 显示套餐详情 -->
<div v-else-if="currentPackage">
<ElDescriptions :column="3" border>
<!-- 套餐基本信息 -->
<ElDescriptionsItem label="套餐名称">
{{ currentPackage.package_name || '-' }}
</ElDescriptionsItem>
<ElDescriptionsItem label="套餐价格">
{{ formatAmount(currentPackage.package_price) }}
</ElDescriptionsItem>
<ElDescriptionsItem label="套餐总量">
{{ formatDataSize(currentPackage.package_total_data || 0) }}
</ElDescriptionsItem>
<!-- 套餐时长 -->
<ElDescriptionsItem v-if="currentPackage.duration_days" label="套餐时长" :span="3">
{{ currentPackage.duration_days }}天
</ElDescriptionsItem>
</ElDescriptions>
<!-- 真流量进度 -->
<div class="traffic-progress-wrapper">
<div class="progress-info">
<span class="progress-label">真流量</span>
<span class="progress-text">
已用 {{ formatDataSize(currentPackage.real_data_used || 0) }} / 剩余
{{ formatDataSize(currentPackage.real_data_remaining || 0) }} / 总量
{{ formatDataSize(currentPackage.real_data_total || 0) }}
</span>
</div>
<ElProgress
:percentage="
getUsageProgress(
currentPackage.real_data_used || 0,
currentPackage.real_data_total || 0
)
"
:color="
getProgressColorByPercentage(
getUsageProgress(
currentPackage.real_data_used || 0,
currentPackage.real_data_total || 0
)
)
"
:stroke-width="20"
/>
</div>
<!-- 虚流量进度 -->
<div class="traffic-progress-wrapper">
<div class="progress-info">
<span class="progress-label">虚流量</span>
<span class="progress-text">
已用 {{ formatDataSize(currentPackage.virtual_data_used || 0) }} / 剩余
{{ formatDataSize(currentPackage.virtual_data_remaining || 0) }} / 总量
{{ formatDataSize(currentPackage.virtual_data_total || 0) }}
</span>
</div>
<ElProgress
:percentage="
getUsageProgress(
currentPackage.virtual_data_used || 0,
currentPackage.virtual_data_total || 0
)
"
:color="
getProgressColorByPercentage(
getUsageProgress(
currentPackage.virtual_data_used || 0,
currentPackage.virtual_data_total || 0
)
)
"
:stroke-width="20"
/>
</div>
<!-- 时间信息 -->
<ElDescriptions :column="3" border style="margin-top: 16px">
<ElDescriptionsItem label="开始时间">
{{ formatDateTime(currentPackage.start_time) || '-' }}
</ElDescriptionsItem>
<ElDescriptionsItem label="到期时间">
{{ formatDateTime(currentPackage.expire_time) || '-' }}
</ElDescriptionsItem>
<ElDescriptionsItem label="状态">
<ElTag :type="getPackageStatusTagType(currentPackage.status)" size="small">
{{ currentPackage.status_name || '-' }}
</ElTag>
</ElDescriptionsItem>
</ElDescriptions>
</div>
<!-- 空状态 -->
<ElEmpty v-else-if="!loading" :description="errorMsg || '暂无当前生效套餐'" :image-size="100" />
</ElCard>
</template>
<script setup lang="ts">
import {
ElCard,
ElTag,
ElButton,
ElDescriptions,
ElDescriptionsItem,
ElProgress,
ElEmpty,
ElAlert
} from 'element-plus'
import { useAssetFormatters } from '../composables/useAssetFormatters'
import { formatDateTime } from '@/utils/business/format'
import type { PackageInfo } from '../types'
// Use formatters
const {
formatAmount,
formatDataSize,
getPackageStatusTagType,
getUsageProgress,
getProgressColorByPercentage
} = useAssetFormatters()
// Props
interface Props {
currentPackage: PackageInfo | null
loading?: boolean
errorMsg?: string
}
withDefaults(defineProps<Props>(), {
loading: false,
errorMsg: ''
})
// Emits
const emit = defineEmits<{
showRecharge: []
}>()
// Methods
const handleShowRecharge = () => {
emit('showRecharge')
}
</script>
<style scoped lang="scss">
.current-package-card {
.card-header {
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;
}
}
.traffic-progress-wrapper {
padding: 16px;
margin-top: 16px;
background: var(--el-fill-color-light);
border-radius: 8px;
.progress-info {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
.progress-label {
font-size: 15px;
font-weight: 500;
color: var(--el-text-color-primary);
}
.progress-text {
font-size: 13px;
color: var(--el-text-color-regular);
}
}
}
.package-actions {
margin-top: 16px;
text-align: right;
}
}
</style>