卡清单管理 详情加字段 列表加上默认速率字段

src/views/lotCard/cardList/config.js

@@ -8,7 +8,6 @@ export const columns = [
     { title: 'SIM生成日期', dataIndex: 'createTime', align: 'center', ellipsis: true },
     // { title: '支付方式', dataIndex: 'payType', align: 'center', ellipsis: true },
     { title: 'SIM状态', dataIndex: 'iccidStatus', align: 'center', ellipsis: true },
-    { title: '预警状态', dataIndex: '', align: 'center', ellipsis: true },
     { title: '已使用总流量', dataIndex: 'dataUsageTotal', slotName: 'dataUsageTotal', align: 'center', ellipsis: true },
     { title: '语音呼入分钟数', dataIndex: 'voiceMtTotal', align: 'center', ellipsis: true },
     { title: '语音呼出分钟数', dataIndex: 'voiceMoTotal', align: 'center', ellipsis: true },
@@ -20,13 +19,13 @@ export const columns = [
     { title: 'IMSI所属供应商名称', dataIndex: 'currentImsiProvider', align: 'center', ellipsis: true },
     { title: '卡套餐', dataIndex: 'tariffName', align: 'center', ellipsis: true },
     { title: '预警状态', dataIndex: 'forewarningStatus', align: 'center', width: 200, ellipsis: true },
-    { title: '历史用量', dataIndex: 'HistoricalUsage', align: 'center', width: 200, ellipsis: true },
     { title: '池名称/编号', dataIndex: 'poolNum', slotName: 'poolNum', align: 'center', width: 200, ellipsis: true },
     { title: '沉默期到期时间', dataIndex: 'SilenceEndtime', align: 'center', width: 200, ellipsis: true },
-    { title: '已用(套餐流量)', dataIndex: 'dataUsage', align: 'center', width: 200, ellipsis: true },
-    { title: '可用(套餐流量)', dataIndex: 'dataTotal', align: 'center', width: 200, ellipsis: true },
-    { title: '已用(加油包流量)', dataIndex: 'usedBg', align: 'center', width: 200, ellipsis: true },
-    { title: '可用(加油包流量)', dataIndex: 'usableBg', align: 'center', width: 200, ellipsis: true },
+    { title: '已用(套餐流量)', dataIndex: 'dataUsage', align: 'center', ellipsis: true },
+    { title: '可用(套餐流量)', dataIndex: 'dataTotal', align: 'center', ellipsis: true },
+    { title: '已用(加油包流量)', dataIndex: 'usedBg', align: 'center', ellipsis: true },
+    { title: '可用(加油包流量)', dataIndex: 'usableBg', align: 'center', ellipsis: true },
+    { title: '默认速率', dataIndex: 'dataSpeed', align: 'center', ellipsis: true },
     {
         title: window.$t('global.common.operations'),
         dataIndex: 'id',

src/views/lotCard/cardList/index.vue

@@ -41,7 +41,7 @@
       @page-change="evChangePage">
       <template #poolNum="{ record }">
         <span>{{ record.poolName }}</span>
-        <br/>
+        <br />
         <span>{{ record.poolId }}</span>
       </template>
       <template #dataUsageTotal="{ record }">
@@ -94,10 +94,9 @@ const intData = async () => {
   const soureName = await Getdictionary('source')
   const accountStatusName = await Getdictionary('account')
   const { data } = await cardInfoList(param)
-  dataSource.value = (data.records || []).map((item,index) => {
+  dataSource.value = (data.records || []).map((item, index) => {
     const payType = item.payType == 0 ? 'Prepay' : 'Postpay';
     const soure = soureName.find(val => val.value == item.source)?.label
-    // const accountStatus = accountStatusName.find(val => val.value == item.Info.accountStatus)?.label
     const iccidStatus = accountStatusName.find(val => val.value == item.iccidStatus)?.label
     return {
       ...item,
@@ -105,12 +104,12 @@ const intData = async () => {
       payType: payType,
       sourceName: soure,
       iccidStatus,
-      forewarningStatus:'正常',
-      HistoricalUsage:'10/G',
-      SilenceEndtime:'一个月',
-      usedBg:'0',
-      usableBg:'0',
-      ...item.dataPackage[0]
+      forewarningStatus: '正常',
+      SilenceEndtime: '一个月',
+      usedBg: '0',
+      usableBg: '0',
+      dataUsage: item.dataPackage[0]?.dataUsage + '/MB',
+      dataTotal: item.dataPackage[0]?.dataTotal + '/MB',
     }
   })
   pagination.value.total = data.total

src/views/lotCard/cardList/trafficUseDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <a-modal width="70%" :visible="visible" :title="'卡详情' + Card_info.iccid" :hide-cancel='true'
-           :ok-text="$t('lotCard.close')" @ok="handleSubmit" @cancel="handleCancel" draggable>
+    :ok-text="$t('lotCard.close')" @ok="handleSubmit" @cancel="handleCancel" draggable>
     <!-- 卡片信息 -->
     <a-row class="grid-demo" :gutter="24">
       <a-col :span="12">
@@ -12,11 +12,6 @@
               </a-form-item>
             </a-col>
 
-            <a-col :span="12">
-              <a-form-item label="IMSI">
-                {{ Card_info.account }}
-              </a-form-item>
-            </a-col>
             <a-col :span="12">
               <a-form-item label="IMSI">
                 {{ Card_info.currentImsi }}
@@ -54,20 +49,20 @@
           <a-row :gutter="10" wrap>
             <a-col :span="12">
               <a-form-item label="套餐名称">
-                {{ dataPackage?.productName }}
+                {{ Card_info?.tariffName }}
               </a-form-item>
             </a-col>
             <a-col :span="12">
               <a-form-item label="套餐状态">
                 {{
                   dataPackage?.status == 1 ? '已激活' : (dataPackage?.status == 2 ? '关闭' :
-                      dataPackage?.status == 3 ? '已过期' : '未使用')
+                    dataPackage?.status == 3 ? '已过期' : '未使用')
                 }}
               </a-form-item>
             </a-col>
             <a-col :span="12">
               <a-form-item label="有效期">
-                {{ dataPackage?.validMonth }}月
+                {{ dataPackage?.validDays }}月
               </a-form-item>
             </a-col>
             <a-col :span="12">
@@ -112,20 +107,19 @@
       <a-col :span="12">
         <a-tabs>
           <a-tab-pane key="1" title="月用量">
-            <div class="chart" style="width:100%" id="chartContainer"/>
+            <div class="chart" style="width:100%" id="chartContainer" />
           </a-tab-pane>
           <a-tab-pane key="2" title="卡套餐信息">
-            <a-table :columns="columnsCard" :data="dataCard" :scroll="{ x: 'auto' }" :pagination="false"/>
+            <a-table :columns="columnsCard" :data="dataCard" :scroll="{ x: 'auto' }" :pagination="false" />
           </a-tab-pane>
           <a-tab-pane key="3" title="预警信息">
             Content of Tab Panel 3
           </a-tab-pane>
           <a-tab-pane key="4" title="充值记录">
-            <a-table :columns="columnsTopup" :data="dataTopup" :scroll="{ x: 'auto' }"/>
+            <a-table :columns="columnsTopup" :data="dataTopup" :scroll="{ x: 'auto' }" />
           </a-tab-pane>
           <a-tab-pane key="5" title="使用量">
-            <a-table :columns="columnsAmount" :data="dataAmount" :scroll="{ x: 'auto' }"
-                     :pagination="false"/>
+            <a-table :columns="columnsAmount" :data="dataAmount" :scroll="{ x: 'auto' }" :pagination="false" />
           </a-tab-pane>
           <a-tab-pane key="6" title="操作记录">
             Content of Tab Panel 3
@@ -145,10 +139,10 @@
   </a-modal>
 </template>
 <script setup>
-import {onMounted, ref} from "vue";
-import {getDataCDR, PauseSIMService, RecoverSIMService, OffSIMCard} from '@/api/path/lotCard.api'
-import {Getdictionary} from '@/mixins/index'
-import {Message} from '@arco-design/web-vue'
+import { onMounted, ref } from "vue";
+import { getDataCDR, PauseSIMService, RecoverSIMService, OffSIMCard } from '@/api/path/lotCard.api'
+import { Getdictionary } from '@/mixins/index'
+import { Message } from '@arco-design/web-vue'
 // 图表插件
 import * as echarts from "echarts";
 
@@ -171,7 +165,7 @@ const option = ref({
   },
   series: [
     {
-      data: [],
+      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
       type: 'bar',
     }
   ],
@@ -315,7 +309,7 @@ const open = (data) => {
   // 卡套餐信息
   dataCard.value = (data.dataPackage || []).map(val => {
     const status = val.status == 1 ? '已激活' : (val.status == 2 ? '关闭' :
-        val.status == 3 ? '已过期' : '未使用')
+      val.status == 3 ? '已过期' : '未使用')
     const tatal = val.dataTotal == -1 ? '无限流量' : val.dataTotal
     return {
       ...val,
@@ -369,10 +363,12 @@ const intData = async () => {
     });
 
     // 将当前时间段的数据中的 'usage' 字段合并到 series[0].data 数组中
-    const usageData = (res.data || [])
-        .filter(val => val.usage !== undefined)
-        .map(val => val.usage);
-    option.value.series[0].data.push(...usageData);
+    const usageData = res.data.length === 0
+      ? []
+      : res.data.map(val => val.usage !== undefined && val.usage !== null ? val.usage : 0);
+    if (usageData.length !== 0) {
+      option.value.series[0].data.push(...usageData);
+    }
     initChart()
   }
 }
@@ -410,7 +406,7 @@ const initChart = () => {
   })
 }
 
-defineExpose({open})
+defineExpose({ open })
 
 
 onMounted(() => {