修改布局

src/views/my-simcard/single-card/index.vue

@@ -124,7 +124,98 @@
     <div v-if="cardInfo" class="card-content-area slide-in">
       <!-- 主要内容区域 -->
       <div class="main-content-layout">
-        <!-- 第一行：当前套餐 -->
+        <!-- 第一行：基本信息（卡信息） -->
+        <div class="row full-width">
+          <ElCard shadow="never" class="info-card basic-info">
+            <template #header>
+              <div class="card-header">
+                <span>{{ cardInfo?.asset_type === 'card' ? '卡信息' : '设备信息' }}</span>
+                <ElTag :type="cardInfo?.asset_type === 'card' ? 'success' : 'primary'" size="small">
+                  {{ cardInfo?.asset_type === 'card' ? 'IoT卡' : '设备' }}
+                </ElTag>
+              </div>
+            </template>
+            <ElDescriptions :column="2" border>
+              <ElDescriptionsItem label="虚拟号">{{
+                cardInfo?.virtual_no || '--'
+              }}</ElDescriptionsItem>
+              <ElDescriptionsItem label="资产状态">
+                <ElTag :type="getAssetStatusType(cardInfo?.status)" size="small">
+                  {{ getAssetStatusName(cardInfo?.status) }}
+                </ElTag>
+              </ElDescriptionsItem>
+
+              <!-- 卡专属字段 -->
+              <template v-if="cardInfo?.asset_type === 'card'">
+                <ElDescriptionsItem label="ICCID">{{ cardInfo?.iccid || '--' }}</ElDescriptionsItem>
+                <ElDescriptionsItem label="MSISDN">{{
+                  cardInfo?.msisdn || '--'
+                }}</ElDescriptionsItem>
+                <ElDescriptionsItem label="IMSI">{{ cardInfo?.imsi || '--' }}</ElDescriptionsItem>
+                <ElDescriptionsItem label="运营商">{{
+                  cardInfo?.carrier_name || '--'
+                }}</ElDescriptionsItem>
+                <ElDescriptionsItem label="网络状态">
+                  <ElTag :type="cardInfo?.network_status === 1 ? 'success' : 'danger'" size="small">
+                    {{ cardInfo?.network_status === 1 ? '开机' : '停机' }}
+                  </ElTag>
+                </ElDescriptionsItem>
+                <ElDescriptionsItem label="卡类型">{{
+                  cardInfo?.card_category || '--'
+                }}</ElDescriptionsItem>
+                <ElDescriptionsItem label="绑定设备">{{
+                  cardInfo?.bound_device_name || '--'
+                }}</ElDescriptionsItem>
+                <ElDescriptionsItem label="最后同步时间">{{
+                  formatDateTime(cardInfo?.last_sync_time) || '--'
+                }}</ElDescriptionsItem>
+                <ElDescriptionsItem label="本月已用流量">{{
+                  formatDataSize(cardInfo?.current_month_usage_mb || 0)
+                }}</ElDescriptionsItem>
+              </template>
+
+              <!-- 设备专属字段 -->
+              <template v-if="cardInfo?.asset_type === 'device'">
+                <ElDescriptionsItem label="设备名称">{{
+                  cardInfo?.device_name || '--'
+                }}</ElDescriptionsItem>
+                <ElDescriptionsItem label="设备型号">{{
+                  cardInfo?.device_model || '--'
+                }}</ElDescriptionsItem>
+                <ElDescriptionsItem label="设备类型">{{
+                  cardInfo?.device_type || '--'
+                }}</ElDescriptionsItem>
+                <ElDescriptionsItem label="制造商">{{
+                  cardInfo?.manufacturer || '--'
+                }}</ElDescriptionsItem>
+                <ElDescriptionsItem label="IMEI">{{ cardInfo?.imei || '--' }}</ElDescriptionsItem>
+                <ElDescriptionsItem label="SN">{{ cardInfo?.sn || '--' }}</ElDescriptionsItem>
+                <ElDescriptionsItem label="最大卡槽">{{
+                  cardInfo?.max_sim_slots || '--'
+                }}</ElDescriptionsItem>
+                <ElDescriptionsItem label="已绑定卡数">{{
+                  cardInfo?.bound_card_count || 0
+                }}</ElDescriptionsItem>
+                <ElDescriptionsItem label="保护期状态">
+                  <ElTag :type="getProtectStatusType(cardInfo?.device_protect_status)" size="small">
+                    {{ getProtectStatusName(cardInfo?.device_protect_status) }}
+                  </ElTag>
+                </ElDescriptionsItem>
+              </template>
+
+              <ElDescriptionsItem label="实名状态">
+                <ElTag :type="getRealNameStatusType(cardInfo?.real_name_status)" size="small">
+                  {{ getRealNameStatusName(cardInfo?.real_name_status) }}
+                </ElTag>
+              </ElDescriptionsItem>
+              <ElDescriptionsItem label="激活时间">{{
+                cardInfo?.activated_at || '--'
+              }}</ElDescriptionsItem>
+            </ElDescriptions>
+          </ElCard>
+        </div>
+
+        <!-- 第二行：当前生效套餐 -->
         <div class="row full-width">
           <ElCard shadow="never" class="info-card current-package-card">
             <template #header>
@@ -235,97 +326,6 @@
           </ElCard>
         </div>
 
-        <!-- 第二行：基本信息 -->
-        <div class="row full-width">
-          <ElCard shadow="never" class="info-card basic-info">
-            <template #header>
-              <div class="card-header">
-                <span>{{ cardInfo?.asset_type === 'card' ? '卡信息' : '设备信息' }}</span>
-                <ElTag :type="cardInfo?.asset_type === 'card' ? 'success' : 'primary'" size="small">
-                  {{ cardInfo?.asset_type === 'card' ? 'IoT卡' : '设备' }}
-                </ElTag>
-              </div>
-            </template>
-            <ElDescriptions :column="2" border>
-              <ElDescriptionsItem label="虚拟号">{{
-                cardInfo?.virtual_no || '--'
-              }}</ElDescriptionsItem>
-              <ElDescriptionsItem label="资产状态">
-                <ElTag :type="getAssetStatusType(cardInfo?.status)" size="small">
-                  {{ getAssetStatusName(cardInfo?.status) }}
-                </ElTag>
-              </ElDescriptionsItem>
-
-              <!-- 卡专属字段 -->
-              <template v-if="cardInfo?.asset_type === 'card'">
-                <ElDescriptionsItem label="ICCID">{{ cardInfo?.iccid || '--' }}</ElDescriptionsItem>
-                <ElDescriptionsItem label="MSISDN">{{
-                  cardInfo?.msisdn || '--'
-                }}</ElDescriptionsItem>
-                <ElDescriptionsItem label="IMSI">{{ cardInfo?.imsi || '--' }}</ElDescriptionsItem>
-                <ElDescriptionsItem label="运营商">{{
-                  cardInfo?.carrier_name || '--'
-                }}</ElDescriptionsItem>
-                <ElDescriptionsItem label="网络状态">
-                  <ElTag :type="cardInfo?.network_status === 1 ? 'success' : 'danger'" size="small">
-                    {{ cardInfo?.network_status === 1 ? '开机' : '停机' }}
-                  </ElTag>
-                </ElDescriptionsItem>
-                <ElDescriptionsItem label="卡类型">{{
-                  cardInfo?.card_category || '--'
-                }}</ElDescriptionsItem>
-                <ElDescriptionsItem label="绑定设备">{{
-                  cardInfo?.bound_device_name || '--'
-                }}</ElDescriptionsItem>
-                <ElDescriptionsItem label="最后同步时间">{{
-                  formatDateTime(cardInfo?.last_sync_time) || '--'
-                }}</ElDescriptionsItem>
-                <ElDescriptionsItem label="本月已用流量">{{
-                  formatDataSize(cardInfo?.current_month_usage_mb || 0)
-                }}</ElDescriptionsItem>
-              </template>
-
-              <!-- 设备专属字段 -->
-              <template v-if="cardInfo?.asset_type === 'device'">
-                <ElDescriptionsItem label="设备名称">{{
-                  cardInfo?.device_name || '--'
-                }}</ElDescriptionsItem>
-                <ElDescriptionsItem label="设备型号">{{
-                  cardInfo?.device_model || '--'
-                }}</ElDescriptionsItem>
-                <ElDescriptionsItem label="设备类型">{{
-                  cardInfo?.device_type || '--'
-                }}</ElDescriptionsItem>
-                <ElDescriptionsItem label="制造商">{{
-                  cardInfo?.manufacturer || '--'
-                }}</ElDescriptionsItem>
-                <ElDescriptionsItem label="IMEI">{{ cardInfo?.imei || '--' }}</ElDescriptionsItem>
-                <ElDescriptionsItem label="SN">{{ cardInfo?.sn || '--' }}</ElDescriptionsItem>
-                <ElDescriptionsItem label="最大卡槽">{{
-                  cardInfo?.max_sim_slots || '--'
-                }}</ElDescriptionsItem>
-                <ElDescriptionsItem label="已绑定卡数">{{
-                  cardInfo?.bound_card_count || 0
-                }}</ElDescriptionsItem>
-                <ElDescriptionsItem label="保护期状态">
-                  <ElTag :type="getProtectStatusType(cardInfo?.device_protect_status)" size="small">
-                    {{ getProtectStatusName(cardInfo?.device_protect_status) }}
-                  </ElTag>
-                </ElDescriptionsItem>
-              </template>
-
-              <ElDescriptionsItem label="实名状态">
-                <ElTag :type="getRealNameStatusType(cardInfo?.real_name_status)" size="small">
-                  {{ getRealNameStatusName(cardInfo?.real_name_status) }}
-                </ElTag>
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="激活时间">{{
-                cardInfo?.activated_at || '--'
-              }}</ElDescriptionsItem>
-            </ElDescriptions>
-          </ElCard>
-        </div>
-
         <!-- 第三行：归属信息和钱包概况 -->
         <div class="row two-columns">
           <!-- 左侧：归属信息 -->
@@ -1342,6 +1342,8 @@
     if (!cardInfo.value?.currentPackageDetail) return '0.00'
     const total = cardInfo.value.currentPackageDetail.data_limit_mb || 0
     const used = cardInfo.value.currentPackageDetail.data_usage_mb || 0
+    // 如果真流量总量和真流量已用都是0,则显示100%
+    if (total === 0 && used === 0) return '100.00'
     if (total === 0) return '0.00'
     return ((used / total) * 100).toFixed(2)
   }

src/views/package-management/package-list/index.vue

@@ -594,6 +594,7 @@
         { required: true, message: '请输入套餐名称', trigger: 'blur' },
         { min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur' }
       ],
+      series_id: [{ required: true, message: '请选择套餐系列', trigger: 'change' }],
       package_type: [{ required: true, message: '请选择套餐类型', trigger: 'change' }],
       duration_months: [
         { required: true, message: '请输入有效期', trigger: 'blur' },