luo/gt-agent-company
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
sexygoat
2026-05-06 18:14:08 +08:00
parent 663c71cbc1
commit d8a16bdf8d
3 changed files with 477 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
src/pages/agent-system/asset-detail/index.vue
View File

@@ -2,6 +2,7 @@
import { ref, computed, onMounted } from 'vue'
import { getAssetDetail, getAssetPackages, getCurrentPackage, getAssetHistory, stopAsset, startAsset } from '@/api/assets'
import type { AssetType, CardInfo, DeviceInfo, AssetPackage, HistoryRecord } from '@/api/assets'
import { formatDataSize, formatTime } from '@/utils/format'
// 资产类型
const assetType = ref<AssetType>('card')
@@ -55,6 +56,50 @@ const statusColor = computed(() => {
: { bg: '#ffebee', text: '#c62828' }
})
function getPackageStatusColor(status?: number) {
const map: Record<number, { bg: string, text: string }> = {
0: { bg: '#fff3e0', text: '#e65100' },
1: { bg: '#e8f5e9', text: '#2e7d32' },
2: { bg: '#f5f5f5', text: '#999' },
3: { bg: '#ffebee', text: '#c62828' },
4: { bg: '#f5f5f5', text: '#999' },
}
return status !== undefined ? map[status] || { bg: '#f5f5f5', text: '#999' } : { bg: '#f5f5f5', text: '#999' }
}
function getPackageUsedMb(pkg: AssetPackage) {
return Number(pkg.enable_virtual_data ? pkg.virtual_used_mb : pkg.real_used_mb) || 0
}
function getPackageTotalMb(pkg: AssetPackage) {
return Number(pkg.real_total_mb) || 0
}
function getPackageRemainMb(pkg: AssetPackage) {
return Math.max(0, getPackageTotalMb(pkg) - (Number(pkg.real_used_mb) || 0))
}
function getPackageUsagePercent(pkg: AssetPackage) {
const total = getPackageTotalMb(pkg)
if (total <= 0)
return 0
return Math.min(100, (getPackageUsedMb(pkg) / total) * 100)
}
function getPackageTypeText(type?: AssetPackage['package_type']) {
const map: Record<string, string> = {
formal: '正式套餐',
addon: '加油包',
}
return type ? map[type] || type : '-'
}
function formatPackagePrice(amount?: number) {
if (amount === undefined || amount === null)
return '-'
return `¥${(amount / 100).toFixed(2)}`
}
// 页面加载
onMounted(() => {
// 从路由参数获取 assetType 和 assetIdentifier
@@ -72,7 +117,7 @@ async function loadAssetDetail() {
try {
// 调用资产详情接口
const detailData = await getAssetDetail(assetType.value, assetId.value)
const detailData = await getAssetDetail(assetType.value, assetIdentifier.value)
// 根据类型提取详情
if (assetType.value === 'card' && detailData.card) {
@@ -118,29 +163,16 @@ async function loadAssetDetail() {
// 加载套餐列表
async function loadPackages() {
try {
// 1. 调用当前生效套餐接口
try {
const current = await getCurrentPackage(assetIdentifier.value)
currentPackage.value = current
} catch (error) {
console.warn('获取当前套餐失败:', error)
currentPackage.value = null
}
// 2. 调用套餐列表接口
currentPackage.value = await getCurrentPackage(assetIdentifier.value)
const packagesData = await getAssetPackages(assetIdentifier.value, {
page: 1,
page_size: 50
})
packageList.value = packagesData.items || []
// 如果没有获取到当前套餐,从列表中查找生效中的套餐
if (!currentPackage.value && packageList.value.length > 0) {
currentPackage.value = packageList.value.find(pkg => pkg.status === 1) || null
}
}
catch (error: any) {
console.error('加载套餐列表失败:', error)
packageList.value = []
}
}
@@ -282,7 +314,7 @@ function viewWallet() {
<view class="bg-white rounded-16px shadow-[0_2px_12px_rgba(0,0,0,0.06)] overflow-hidden mb-3">
<!-- 顶部信息 -->
<view class="px-4 pt-4 pb-3 border-b-1px border-[#f5f5f5]">
<view class="flex items-center justify-between mb-3">
<view v-if="false" class="flex items-center justify-between mb-3">
<view class="flex items-center gap-2">
<i
:class="[
@@ -437,7 +469,83 @@ function viewWallet() {
<view v-if="activeTab === 'package'" class="space-y-3">
<!-- 当前套餐 -->
<view v-if="currentPackage" class="bg-white rounded-16px shadow-[0_2px_12px_rgba(0,0,0,0.06)] p-4">
<view class="flex items-center justify-between mb-3">
<view class="flex items-start justify-between gap-3 mb-3">
<view class="min-w-0 flex-1">
<text class="text-14px font-600 text-[#212121] block break-all">
{{ currentPackage.package_name || '-' }}
</text>
<text class="text-11px text-[#999] block mt-1 break-all">
订单号：{{ currentPackage.order_no || '-' }}
</text>
</view>
<view
:style="{
backgroundColor: getPackageStatusColor(currentPackage.status).bg,
color: getPackageStatusColor(currentPackage.status).text,
}"
class="px-2 py-0.5 rounded text-10px font-600"
>
{{ currentPackage.status_name || '-' }}
</view>
</view>
<view class="grid grid-cols-3 gap-2 mb-3">
<view class="bg-[#f5f5f5] rounded-8px p-2 text-center">
<text class="text-10px text-[#999] block mb-1">总量</text>
<text class="text-12px font-600 text-[#212121]">{{ formatDataSize(getPackageTotalMb(currentPackage)) }}</text>
</view>
<view class="bg-[#f5f5f5] rounded-8px p-2 text-center">
<text class="text-10px text-[#999] block mb-1">已使用</text>
<text class="text-12px font-600 text-[var(--brand-primary)]">{{ formatDataSize(getPackageUsedMb(currentPackage)) }}</text>
</view>
<view class="bg-[#f5f5f5] rounded-8px p-2 text-center">
<text class="text-10px text-[#999] block mb-1">剩余</text>
<text class="text-12px font-600 text-[#2e7d32]">{{ formatDataSize(getPackageRemainMb(currentPackage)) }}</text>
</view>
</view>
<view class="bg-[#f5f5f5] rounded-8px p-2 mb-3">
<view class="flex items-center justify-between mb-1">
<text class="text-11px text-[#666]">已使用</text>
<text class="text-11px font-600 text-[#212121]">
{{ formatDataSize(getPackageUsedMb(currentPackage)) }} /
{{ formatDataSize(getPackageTotalMb(currentPackage)) }}
</text>
</view>
<view class="h-4px bg-[#e0e0e0] rounded-full overflow-hidden">
<view
:style="{ width: `${getPackageUsagePercent(currentPackage)}%` }"
:class="[
'h-full rounded-full transition-all',
getPackageUsagePercent(currentPackage) > 90 ? 'bg-[#ff6b6b]' : 'bg-[#3ed268]',
]"
/>
</view>
</view>
<view class="space-y-2 mb-1">
<view class="flex items-center justify-between text-12px">
<text class="text-[#666]">套餐价格</text>
<text class="text-[#212121]">{{ formatPackagePrice(currentPackage.paid_amount) }}</text>
</view>
<view class="flex items-center justify-between text-12px">
<text class="text-[#666]">套餐类型</text>
<text class="text-[#212121]">{{ getPackageTypeText(currentPackage.package_type) }}</text>
</view>
<view class="flex items-center justify-between text-12px">
<text class="text-[#666]">开始时间</text>
<text class="text-[#212121]">{{ formatTime(currentPackage.activated_at) }}</text>
</view>
<view class="flex items-center justify-between text-12px">
<text class="text-[#666]">到期时间</text>
<text class="text-[#212121]">{{ formatTime(currentPackage.expires_at) }}</text>
</view>
<view class="flex items-center justify-between text-12px">
<text class="text-[#666]">下单时间</text>
<text class="text-[#212121]">{{ formatTime(currentPackage.created_at) }}</text>
</view>
</view>
<view v-if="false" class="flex items-center justify-between mb-3">
<text class="text-14px font-600 text-[#212121]">
当前套餐
</text>
@@ -446,14 +554,14 @@ function viewWallet() {
</view>
</view>
<text class="text-16px font-700 text-[#212121] block mb-2">
<text v-if="false" class="text-16px font-700 text-[#212121] block mb-2">
{{ currentPackage.package_name || '-' }}
</text>
<text class="text-14px text-[var(--brand-primary)] font-600 block mb-3">
<text v-if="false" class="text-14px text-[var(--brand-primary)] font-600 block mb-3">
已用: {{ currentPackage.virtual_used_mb || 0 }}MB / 总量: {{ currentPackage.virtual_limit_mb || 0 }}MB
</text>
<view class="flex items-center justify-between text-12px text-[#999]">
<view v-if="false" class="flex items-center justify-between text-12px text-[#999]">
<text v-if="currentPackage.activated_at && currentPackage.expires_at">
{{ currentPackage.activated_at }} ~ {{ currentPackage.expires_at }}
</text>
@@ -488,7 +596,7 @@ function viewWallet() {
</view>
<view class="flex items-center justify-between mb-1">
<text class="text-12px text-[#666]">
已用: {{ pkg.virtual_used_mb || 0 }}MB / {{ pkg.virtual_limit_mb || 0 }}MB
已用: {{ formatDataSize(getPackageUsedMb(pkg)) }} / {{ formatDataSize(getPackageTotalMb(pkg)) }}
</text>
<text class="text-11px text-[#999]">
优先级: {{ pkg.priority || '-' }}
@@ -501,10 +609,10 @@ function viewWallet() {
</view>
<!-- 暂无套餐 -->
<view v-else class="bg-white rounded-16px shadow-[0_2px_12px_rgba(0,0,0,0.06)] p-4 py-12 center flex-col">
<view v-if="!currentPackage" class="bg-white rounded-16px shadow-[0_2px_12px_rgba(0,0,0,0.06)] p-4 py-12 center flex-col">
<i class="i-mdi-package-variant-closed text-60px text-[#ddd] mb-2" />
<text class="text-13px text-[#999]">
暂无套餐数据
暂无生效套餐
</text>
</view>
</view>