fix(operator): fix operator edit issue
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 5m51s
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 5m51s
This commit is contained in:
sexygoat
@@ -12,114 +12,110 @@
|
||||
{{ 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="currentPackage.enable_virtual_data">
|
||||
已用 {{ formatDataSize(currentPackage.virtual_data_used || 0) }} / 剩余
|
||||
{{ formatDataSize(currentPackage.virtual_data_remaining || 0) }} / 总量
|
||||
{{ formatDataSize(currentPackage.virtual_data_total || 0) }}
|
||||
</template>
|
||||
<template v-else>
|
||||
已用 {{ formatDataSize(currentPackage.real_data_used || 0) }} / 剩余
|
||||
{{ formatDataSize(currentPackage.real_data_remaining || 0) }} / 总量
|
||||
{{ formatDataSize(currentPackage.real_data_total || 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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 绑定设备提示（优先于一切内容） -->
|
||||
<template v-if="props.boundDeviceId">
|
||||
<ElEmpty :image-size="100">
|
||||
<template #description>
|
||||
<span>该卡已绑定设备，请点击 </span>
|
||||
<ElButton
|
||||
type="primary"
|
||||
link
|
||||
style="font-size: 15px; font-weight: 600"
|
||||
@click="emit('navigateToDevice', props.boundDeviceNo!)"
|
||||
>{{ props.boundDeviceNo }}</ElButton
|
||||
>
|
||||
<span> 进行查看</span>
|
||||
</template>
|
||||
</ElEmpty>
|
||||
</template>
|
||||
|
||||
<!-- 显示错误信息 -->
|
||||
<ElAlert v-if="errorMsg" :title="errorMsg" type="warning" :closable="false" />
|
||||
<ElAlert v-else-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 label="套餐类型">
|
||||
{{ getPackageTypeName(currentPackage.package_type) }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="虚流量比例">
|
||||
{{ currentPackage.virtual_ratio || '-' }}
|
||||
</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>
|
||||
<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" 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>
|
||||
<ElDescriptionsItem label="状态">
|
||||
<ElTag :type="getPackageStatusTagType(currentPackage.status)" size="small">
|
||||
{{ currentPackage.status_name || '-' }}
|
||||
</ElTag>
|
||||
</ElDescriptionsItem>
|
||||
</ElDescriptions>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<ElEmpty v-else-if="!loading" :description="errorMsg || '暂无当前生效套餐'" :image-size="100" />
|
||||
@@ -155,16 +151,23 @@
|
||||
currentPackage: PackageInfo | null
|
||||
loading?: boolean
|
||||
errorMsg?: string
|
||||
boundDeviceId?: number
|
||||
boundDeviceNo?: string
|
||||
boundDeviceName?: string
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
loading: false,
|
||||
errorMsg: ''
|
||||
errorMsg: '',
|
||||
boundDeviceId: undefined,
|
||||
boundDeviceNo: '',
|
||||
boundDeviceName: ''
|
||||
})
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits<{
|
||||
showRecharge: []
|
||||
navigateToDevice: [deviceNo: string]
|
||||
}>()
|
||||
|
||||
// Methods
|
||||
@@ -208,34 +211,32 @@
|
||||
}
|
||||
}
|
||||
|
||||
.traffic-progress-wrapper {
|
||||
padding: 16px;
|
||||
margin-top: 16px;
|
||||
background: var(--el-fill-color-light);
|
||||
border-radius: 8px;
|
||||
.header-progress {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 0 24px;
|
||||
|
||||
.progress-info {
|
||||
.header-progress-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
margin-bottom: 6px;
|
||||
|
||||
.progress-label {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
.progress-title {
|
||||
flex-shrink: 0;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-regular);
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.package-actions {
|
||||
margin-top: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user