修改工单

2026-02-25 16:14:38 +08:00
parent ca3184857e
commit dccad819cf
20 changed files with 2163 additions and 1229 deletions
--- a/src/views/card-management/single-card/index.vue
+++ b/src/views/card-management/single-card/index.vue
@@ -1,45 +1,89 @@
 <template>
  <ArtTableFullScreen>
    <div class="single-card-page" id="table-full-screen">
+      <!-- ICCID查询区域 -->
+      <ElCard shadow="never" class="search-card" style="margin-bottom: 16px">
+        <template #header>
+          <span>ICCID查询</span>
+        </template>
+        <div class="iccid-search">
+          <ElInput
+            v-model="searchIccid"
+            placeholder="请输入ICCID"
+            clearable
+            style="width: 400px; margin-right: 16px"
+            @keyup.enter="handleSearchCard"
+          >
+            <template #prepend>ICCID</template>
+          </ElInput>
+          <ElButton type="primary" @click="handleSearchCard" :loading="loading">查询</ElButton>
+        </div>
+        <!-- 格式化显示的ICCID -->
+        <div v-if="formattedIccid" class="formatted-iccid">
+          {{ formattedIccid }}
+        </div>
+      </ElCard>
+
      <!-- 网卡信息卡片 -->
      <ElCard shadow="never" class="card-info-card" style="margin-bottom: 16px">
        <template #header>
          <span>网卡信息</span>
        </template>
-        <ElForm :model="cardInfo" label-width="120px" :inline="false">
+        <div v-if="!hasSearched" class="empty-state">
+          <p style="text-align: center; color: var(--el-text-color-secondary); padding: 40px">
+            请在上方输入ICCID进行查询
+          </p>
+        </div>
+        <ElForm v-else :model="cardInfo" label-width="120px" :inline="false">
          <ElRow :gutter="24">
            <ElCol :span="8">
              <ElFormItem label="ICCID:">
-                <span>{{ cardInfo.iccid }}</span>
+                <span>{{ cardInfo.iccid || '-' }}</span>
              </ElFormItem>
            </ElCol>
            <ElCol :span="8">
              <ElFormItem label="IMSI:">
-                <span>{{ cardInfo.imsi }}</span>
+                <span>{{ cardInfo.imsi || '-' }}</span>
              </ElFormItem>
            </ElCol>
            <ElCol :span="8">
              <ElFormItem label="手机号码:">
-                <span>{{ cardInfo.msisdn }}</span>
+                <span>{{ cardInfo.msisdn || '-' }}</span>
              </ElFormItem>
            </ElCol>
          </ElRow>
          <ElRow :gutter="24">
            <ElCol :span="8">
              <ElFormItem label="运营商:">
-                <ElTag :type="getOperatorTagType(cardInfo.operator)">{{
-                  cardInfo.operatorName
-                }}</ElTag>
+                <ElTag v-if="cardInfo.operatorName" :type="getOperatorTagType(cardInfo.operator)">
+                  {{ cardInfo.operatorName }}
+                </ElTag>
+                <span v-else>-</span>
              </ElFormItem>
            </ElCol>
            <ElCol :span="8">
              <ElFormItem label="网络类型:">
-                <span>{{ cardInfo.networkType }}</span>
+                <span>{{ cardInfo.networkType || '-' }}</span>
              </ElFormItem>
            </ElCol>
            <ElCol :span="8">
              <ElFormItem label="状态:">
-                <ElTag :type="getStatusTagType(cardInfo.status)">{{ cardInfo.statusName }}</ElTag>
+                <ElTag v-if="cardInfo.statusName" :type="getStatusTagType(cardInfo.status)">
+                  {{ cardInfo.statusName }}
+                </ElTag>
+                <span v-else>-</span>
+              </ElFormItem>
+            </ElCol>
+          </ElRow>
+          <ElRow :gutter="24">
+            <ElCol :span="8">
+              <ElFormItem label="激活时间:">
+                <span>{{ cardInfo.activatedDate || '-' }}</span>
+              </ElFormItem>
+            </ElCol>
+            <ElCol :span="8">
+              <ElFormItem label="过期时间:">
+                <span>{{ cardInfo.expiryDate || '-' }}</span>
              </ElFormItem>
            </ElCol>
          </ElRow>
@@ -47,7 +91,7 @@
      </ElCard>

      <!-- 操作区域 -->
-      <ElCard shadow="never" class="operation-card" style="margin-bottom: 16px">
+      <ElCard v-if="hasSearched" shadow="never" class="operation-card" style="margin-bottom: 16px">
        <template #header>
          <span>操作区域</span>
        </template>
@@ -66,7 +110,7 @@
      </ElCard>

      <!-- 流量信息 -->
-      <ElCard shadow="never" class="traffic-card" style="margin-bottom: 16px">
+      <ElCard v-if="hasSearched" shadow="never" class="traffic-card" style="margin-bottom: 16px">
        <template #header>
          <span>流量信息</span>
        </template>
@@ -100,7 +144,7 @@
      </ElCard>

      <!-- 使用记录 -->
-      <ElCard shadow="never" class="art-table-card">
+      <ElCard v-if="hasSearched" shadow="never" class="art-table-card">
        <template #header>
          <span>使用记录</span>
          <ElButton style="float: right" @click="refreshUsageRecords">刷新</ElButton>
@@ -158,6 +202,7 @@
  import { ElTag, ElMessageBox, ElMessage, FormInstance } from 'element-plus'
  import { useRoute } from 'vue-router'
  import type { FormRules } from 'element-plus'
+  import { CardService } from '@/api/modules'

  defineOptions({ name: 'SingleCard' })

@@ -165,26 +210,36 @@
  const rechargeDialogVisible = ref(false)
  const route = useRoute()

-  // 网卡信息
-  const cardInfo = reactive({
-    iccid: '89860123456789012345',
-    imsi: '460012345678901',
-    msisdn: '13800138001',
-    operator: 'mobile',
-    operatorName: '中国移动',
-    networkType: '4G',
-    status: '1',
-    statusName: '激活',
-    activatedDate: '2024-01-15',
-    expiryDate: '2025-01-15'
+  // ICCID搜索相关
+  const searchIccid = ref('')
+  const hasSearched = ref(false)
+
+  // 格式化显示的ICCID（4位一组，用横杠分隔）
+  const formattedIccid = computed(() => {
+    if (!cardInfo.iccid) return ''
+    return cardInfo.iccid.replace(/(\d{4})(?=\d)/g, '$1-')
  })

-  // 流量信息
+  // 网卡信息 - 默认为空
+  const cardInfo = reactive({
+    iccid: '',
+    imsi: '',
+    msisdn: '',
+    operator: '',
+    operatorName: '',
+    networkType: '',
+    status: '',
+    statusName: '',
+    activatedDate: '',
+    expiryDate: ''
+  })
+
+  // 流量信息 - 默认为空
  const trafficInfo = reactive({
-    totalTraffic: '10GB',
-    usedTraffic: '2.5GB',
-    remainingTraffic: '7.5GB',
-    usagePercentage: '25'
+    totalTraffic: '0MB',
+    usedTraffic: '0MB',
+    remainingTraffic: '0MB',
+    usagePercentage: '0'
  })

  const pagination = reactive({
@@ -193,25 +248,8 @@
    total: 0
  })

-  // 使用记录
-  const usageRecords = ref([
-    {
-      id: 1,
-      date: '2024-11-07',
-      time: '14:30:25',
-      dataUsage: '125.6MB',
-      fee: '0.12',
-      location: '北京市朝阳区'
-    },
-    {
-      id: 2,
-      date: '2024-11-07',
-      time: '13:45:12',
-      dataUsage: '256.8MB',
-      fee: '0.26',
-      location: '北京市朝阳区'
-    }
-  ])
+  // 使用记录 - 默认为空
+  const usageRecords = ref([])

  // 充值表单
  const rechargeForm = reactive({
@@ -394,40 +432,107 @@
    pagination.total = usageRecords.value.length
  })

+  // 处理ICCID搜索
+  const handleSearchCard = async () => {
+    if (!searchIccid.value.trim()) {
+      ElMessage.warning('请输入ICCID')
+      return
+    }
+    await loadCardInfoByIccid(searchIccid.value.trim())
+  }
+
  // 根据ICCID加载卡片信息
  const loadCardInfoByIccid = async (iccid: string) => {
    loading.value = true
    try {
-      // 这里应该调用API根据ICCID获取卡片详细信息
-      // 模拟API调用
-      await new Promise((resolve) => setTimeout(resolve, 500))
+      const response = await CardService.getIotCardDetailByIccid(iccid)

-      // 模拟更新卡片信息（实际应该从API获取）
-      Object.assign(cardInfo, {
-        iccid: iccid,
-        imsi: '460012345678901',
-        msisdn: '13800138001',
-        operator: 'mobile',
-        operatorName: '中国移动',
-        networkType: '4G',
-        status: '1',
-        statusName: '激活',
-        activatedDate: '2024-01-15',
-        expiryDate: '2025-01-15'
-      })
+      if (response.code === 200 && response.data) {
+        const data = response.data
+        hasSearched.value = true

-      ElMessage.success(`已加载ICCID ${iccid} 的详细信息`)
-    } catch (error) {
+        // 更新网卡基本信息
+        Object.assign(cardInfo, {
+          iccid: data.iccid || '',
+          imsi: data.imsi || '',
+          msisdn: data.msisdn || '',
+          operator: data.carrier_type || '',
+          operatorName: data.carrier_name || '',
+          networkType: data.network_type || '',
+          status: String(data.status || ''),
+          statusName: getStatusName(data.status),
+          activatedDate: data.activated_at || '',
+          expiryDate: data.expire_at || ''
+        })
+
+        // 更新流量信息
+        const totalMB = data.data_usage_mb || 0
+        const usedMB = data.current_month_usage_mb || 0
+        const remainingMB = totalMB - usedMB
+        const percentage = totalMB > 0 ? Math.round((usedMB / totalMB) * 100) : 0
+
+        Object.assign(trafficInfo, {
+          totalTraffic: formatDataSize(totalMB),
+          usedTraffic: formatDataSize(usedMB),
+          remainingTraffic: formatDataSize(remainingMB),
+          usagePercentage: String(percentage)
+        })
+
+        ElMessage.success('查询成功')
+      } else {
+        ElMessage.error(response.message || '查询失败')
+      }
+    } catch (error: any) {
      console.error('获取卡片信息失败:', error)
-      ElMessage.error('获取卡片信息失败')
+      ElMessage.error(error?.message || '获取卡片信息失败')
    } finally {
      loading.value = false
    }
  }
+
+  // 获取状态名称
+  const getStatusName = (status: number) => {
+    const statusMap: Record<number, string> = {
+      0: '未激活',
+      1: '激活',
+      2: '停用',
+      3: '已过期',
+      4: '已注销'
+    }
+    return statusMap[status] || '未知'
+  }
+
+  // 格式化数据大小
+  const formatDataSize = (mb: number) => {
+    if (mb >= 1024) {
+      return `${(mb / 1024).toFixed(2)}GB`
+    }
+    return `${mb.toFixed(2)}MB`
+  }
 </script>

 <style lang="scss" scoped>
  .single-card-page {
+    .search-card {
+      .iccid-search {
+        display: flex;
+        align-items: center;
+      }
+
+      .formatted-iccid {
+        margin-top: 16px;
+        padding: 16px;
+        background-color: var(--el-fill-color-light);
+        border-radius: 4px;
+        font-size: 32px;
+        font-weight: 600;
+        letter-spacing: 2px;
+        text-align: center;
+        color: var(--el-color-primary);
+        font-family: 'Courier New', Courier, monospace;
+      }
+    }
+
    .operation-buttons {
      display: flex;
      flex-wrap: wrap;