fix: bug

2026-04-23 14:59:05 +08:00
parent a9467e8a0c
commit a5e76313cb
28 changed files with 1284 additions and 702 deletions
--- a/src/views/asset-management/asset-information/components/BasicInfoCard.vue
+++ b/src/views/asset-management/asset-information/components/BasicInfoCard.vue
@@ -194,6 +194,11 @@
            </ElTag>
          </template>
        </ElTableColumn>
+        <ElTableColumn label="实名认证策略" width="120">
+          <template #default="scope">
+            {{ getRealnamePolicyName(scope.row.realname_policy) }}
+          </template>
+        </ElTableColumn>
        <ElTableColumn label="实名时间" width="180">
          <template #default="scope">
            {{ scope.row.real_name_at ? formatDateTime(scope.row.real_name_at) : '-' }}
@@ -229,7 +234,7 @@

      <!-- 设备实时信息 -->
      <ElDivider content-position="left">设备实时信息</ElDivider>
-      <div v-if="deviceRealtime" style="margin-top: 16px">
+      <div v-if="deviceRealtime" v-loading="realtimeLoading" style="margin-top: 16px">
        <ElDescriptions :column="4" border>
          <!-- 基本状态 -->
          <ElDescriptionsItem label="在线状态">
@@ -522,9 +527,12 @@
    cardInfo: AssetInfo
    deviceRealtime: DeviceRealtimeInfo | null
    pollingEnabled: boolean
+    realtimeLoading?: boolean
  }

-  const props = defineProps<Props>()
+  const props = withDefaults(defineProps<Props>(), {
+    realtimeLoading: false
+  })

  const { hasAuth } = useAuth()

--- a/src/views/asset-management/asset-information/components/CurrentPackageCard.vue
+++ b/src/views/asset-management/asset-information/components/CurrentPackageCard.vue
@@ -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>
--- a/src/views/asset-management/asset-information/components/PackageListCard.vue
+++ b/src/views/asset-management/asset-information/components/PackageListCard.vue
@@ -3,9 +3,12 @@
    <template #header>
      <div class="card-header">
        <span>套餐列表</span>
+        <div class="card-header-right">
+          <ElButton type="primary" @click="handleShowRecharge">套餐充值</ElButton>
+        </div>
      </div>
    </template>
-    <div class="package-table-wrapper">
+    <div v-loading="loading" class="package-table-wrapper">
      <!-- 绑定设备提示 -->
      <ElEmpty v-if="props.boundDeviceId" :image-size="100">
        <template #description>
@@ -36,7 +39,7 @@
          </ElTableColumn>
          <ElTableColumn label="套餐价格" width="120">
            <template #default="scope">
-              {{ formatAmount(scope.row.package_price || 0) }}
+              {{ formatAmount(scope.row.paid_amount || scope.row.package_price || 0) }}
            </template>
          </ElTableColumn>
          <ElTableColumn prop="status_name" label="套餐状态" width="100">
@@ -104,6 +107,11 @@
              {{ formatDateTime(scope.row.expires_at) }}
            </template>
          </ElTableColumn>
+          <ElTableColumn prop="created_at" label="创建时间" width="170" show-overflow-tooltip>
+            <template #default="scope">
+              {{ formatDateTime(scope.row.created_at) }}
+            </template>
+          </ElTableColumn>
        </ElTable>
        <ElPagination
          v-model:current-page="pagination.page"
@@ -152,6 +160,7 @@
    pageSize?: number
    boundDeviceId?: number
    boundDeviceNo?: string
+    loading?: boolean
  }

  const props = withDefaults(defineProps<Props>(), {
@@ -159,12 +168,14 @@
    page: 1,
    pageSize: 10,
    boundDeviceId: undefined,
-    boundDeviceNo: ''
+    boundDeviceNo: '',
+    loading: false
  })

  // Emits
  interface Emits {
    (e: 'showDailyRecords', payload: { packageRow: PackageInfo }): void
+    (e: 'showRecharge'): void
    (e: 'page-change', page: number): void
    (e: 'size-change', size: number): void
    (e: 'navigateToDevice', deviceNo: string): void
@@ -212,6 +223,10 @@
    emit('showDailyRecords', { packageRow })
  }

+  const handleShowRecharge = () => {
+    emit('showRecharge')
+  }
+
  // 页码变化
  const handlePageChange = (page: number) => {
    emit('page-change', page)
@@ -229,6 +244,13 @@
      width: 100%;
      overflow: hidden; // 防止内容溢出

+      .card-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+      }
+
      .package-table-wrapper {
        .table-scroll-container {
          overflow-x: auto;
--- a/src/views/asset-management/asset-information/components/WalletTransactionCard.vue
+++ b/src/views/asset-management/asset-information/components/WalletTransactionCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <ElCard shadow="never" class="info-card wallet-info">
+  <ElCard shadow="never" class="info-card wallet-info" v-loading="walletLoading">
    <template #header>
      <div class="card-header wallet-header">
        <div class="header-left">
--- a/src/views/asset-management/asset-information/composables/useAssetInfo.ts
+++ b/src/views/asset-management/asset-information/composables/useAssetInfo.ts
@@ -29,6 +29,8 @@ export function useAssetInfo() {
  const packageList = ref<AssetPackageUsageRecord[]>([])
  const walletInfo = ref<AssetWalletResponse | null>(null)
  const walletLoading = ref(false)
+  const packageLoading = ref(false)
+  const realtimeLoading = ref(false)

  /**
   * 获取资产详情
@@ -142,6 +144,7 @@ export function useAssetInfo() {
   */
  const loadPackageList = async (identifier: string, page: number = 1, pageSize: number = 10) => {
    try {
+      packageLoading.value = true
      const response = await AssetService.getAssetPackages(identifier, {
        page,
        page_size: pageSize
@@ -161,6 +164,8 @@ export function useAssetInfo() {
    } catch (error) {
      console.error('获取套餐列表失败:', error)
      return { items: [], total: 0, page: 1, pageSize }
+    } finally {
+      packageLoading.value = false
    }
  }

@@ -173,23 +178,17 @@ export function useAssetInfo() {
      currentPackageLoading.value = true
      currentPackageErrorMsg.value = ''

-      const [currentPkgResponse, packageListResponse] = await Promise.all([
-        AssetService.getCurrentPackage(identifier),
-        AssetService.getAssetPackages(identifier, { page: 1, page_size: 50 })
-      ])
+      const response = await AssetService.getCurrentPackage(identifier)

-      const activePackage = packageListResponse.data?.items?.find((p: any) => p.status === 1)
-      const activePaidAmount = activePackage?.paid_amount || 0
-
-      if (currentPkgResponse.code === 0) {
-        if (currentPkgResponse.data) {
-          const pkg = currentPkgResponse.data
+      if (response.code === 0) {
+        if (response.data) {
+          const pkg = response.data

          currentPackage.value = {
            id: pkg.package_usage_id || 0,
            package_id: pkg.package_id || 0,
            package_name: pkg.package_name || '',
-            package_price: activePaidAmount,
+            paid_amount: pkg.paid_amount || 0,
            package_total_data: pkg.data_limit_mb || 0,
            real_data_used: pkg.data_usage_mb || 0,
            real_data_remaining: (pkg.data_limit_mb || 0) - (pkg.data_usage_mb || 0),
@@ -208,7 +207,8 @@ export function useAssetInfo() {
            data_limit_mb: pkg.data_limit_mb,
            virtual_limit_mb: pkg.virtual_limit_mb,
            virtual_remain_mb: pkg.virtual_remain_mb,
-            data_usage_mb: pkg.data_usage_mb
+            data_usage_mb: pkg.data_usage_mb,
+            created_at: pkg.created_at || ''
          }

          // 同时更新 cardInfo 中的流量显示信息（根据是否启用虚流量选择数据源）
@@ -260,6 +260,7 @@ export function useAssetInfo() {
   */
  const loadRealtimeStatus = async (identifier: string, assetType: string) => {
    try {
+      realtimeLoading.value = true
      const response = await AssetService.getRealtimeStatus(identifier)
      if (response.code === 0 && response.data) {
        const data = response.data
@@ -323,6 +324,8 @@ export function useAssetInfo() {
      }
    } catch (error) {
      console.error('获取实时状态失败:', error)
+    } finally {
+      realtimeLoading.value = false
    }
  }

@@ -377,8 +380,10 @@ export function useAssetInfo() {
    currentPackageLoading,
    currentPackageErrorMsg,
    packageList,
+    packageLoading,
    walletInfo,
    walletLoading,
+    realtimeLoading,

    // Methods
    fetchAssetDetail,
--- a/src/views/asset-management/asset-information/index.vue
+++ b/src/views/asset-management/asset-information/index.vue
@@ -17,6 +17,7 @@
            :card-info="cardInfo"
            :device-realtime="deviceRealtime"
            v-model:polling-enabled="pollingEnabled"
+            :realtime-loading="realtimeLoading"
            @enable-card="handleEnableCard"
            @disable-card="handleDisableCard"
            @manual-deactivate="handleManualDeactivate"
@@ -56,7 +57,9 @@
            :page-size="packagePagination.pageSize"
            :bound-device-id="cardInfo.bound_device_id"
            :bound-device-no="cardInfo.bound_device_no"
+            :loading="packageLoading"
            @show-daily-records="handleShowDailyRecords"
+            @show-recharge="showRechargeDialog"
            @page-change="handlePackagePageChange"
            @size-change="handlePackageSizeChange"
            @navigate-to-device="handleNavigateToDevice"
@@ -172,8 +175,10 @@
    currentPackageLoading,
    currentPackageErrorMsg,
    packageList,
+    packageLoading,
    walletInfo,
    walletLoading,
+    realtimeLoading,
    fetchAssetDetail,
    loadPackageList,
    loadCurrentPackage,