From 5133d09ec203842cf17671b8fd8fbf2f4994535a Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Tue, 11 Jun 2024 16:23:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20SMF=20CDR=E6=95=B0=E6=8D=AE=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=B1=95=E7=A4=BA=E5=92=8C=E5=AF=BC=E5=87=BA=EF=BC=8C?=
 =?UTF-8?q?=E6=9C=AA=E8=BF=9B=E8=A1=8C=E5=A4=9A=E8=AF=AD=E8=A8=80=E5=A4=84?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/neData/smf.ts                |  30 +-
 src/views/dashboard/smfCDR/index.vue | 692 +++++++++++++++++++--------
 2 files changed, 521 insertions(+), 201 deletions(-)

diff --git a/src/api/neData/smf.ts b/src/api/neData/smf.ts
index d46069ca..4139c3ed 100644
--- a/src/api/neData/smf.ts
+++ b/src/api/neData/smf.ts
@@ -5,10 +5,38 @@ import { request } from '@/plugins/http-fetch';
  * @param query 查询参数
  * @returns object
  */
-export function listIMSDataCDR(query: Record<string, any>) {
+export function listSMFDataCDR(query: Record<string, any>) {
   return request({
     url: '/neData/smf/cdr/list',
     method: 'get',
     params: query,
   });
 }
+
+/**
+ * SMF-CDR会话删除
+ * @param id 信息ID
+ * @returns object
+ */
+export function delSMFDataCDR(cdrIds: string | number) {
+  return request({
+    url: `/neData/smf/cdr/${cdrIds}`,
+    method: 'delete',
+    timeout: 60_000,
+  });
+}
+
+/**
+ * SMF-CDR会话列表导出
+ * @param data 查询列表条件
+ * @returns object
+ */
+export function exportSMFDataCDR(data: Record<string, any>) {
+  return request({
+    url: '/neData/smf/cdr/export',
+    method: 'post',
+    data,
+    responseType: 'blob',
+    timeout: 60_000,
+  });
+}
diff --git a/src/views/dashboard/smfCDR/index.vue b/src/views/dashboard/smfCDR/index.vue
index 724f09c5..3bc66d03 100644
--- a/src/views/dashboard/smfCDR/index.vue
+++ b/src/views/dashboard/smfCDR/index.vue
@@ -1,40 +1,43 @@
 <script setup lang="ts">
-import { reactive, onMounted, toRaw, ref, onBeforeUnmount } from 'vue';
+import { reactive, onMounted, toRaw, onBeforeUnmount, ref } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
+import { Modal, message } from 'ant-design-vue/lib';
 import { SizeType } from 'ant-design-vue/lib/config-provider';
 import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
 import { ColumnsType } from 'ant-design-vue/lib/table';
 import useI18n from '@/hooks/useI18n';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import useDictStore from '@/store/modules/dict';
-import { listIMSDataCDR } from '@/api/neData/smf';
-import { WS } from '@/plugins/ws-websocket';
+import {
+  RESULT_CODE_ERROR,
+  RESULT_CODE_SUCCESS,
+} from '@/constants/result-constants';
+import {
+  delSMFDataCDR,
+  exportSMFDataCDR,
+  listSMFDataCDR,
+} from '@/api/neData/smf';
+import { parseDateToStr } from '@/utils/date-utils';
+import { OptionsType, WS } from '@/plugins/ws-websocket';
 import PQueue from 'p-queue';
+import saveAs from 'file-saver';
 const { t } = useI18n();
-const { getDict } = useDictStore();
 const ws = new WS();
 const queue = new PQueue({ concurrency: 1, autoStart: true });
 
-/**字典数据 */
-let dict: {
-  /**CDR SIP响应代码类别类型 */
-  cdrSipCode: DictType[];
-  /**CDR 呼叫类型 */
-  cdrCallType: DictType[];
-} = reactive({
-  cdrSipCode: [],
-  cdrCallType: [],
-});
+/**开始结束时间 */
+let queryRangePicker = ref<[string, string]>(['', '']);
 
 /**查询参数 */
 let queryParams = reactive({
   /**网元类型 */
   neType: 'SMF',
   neId: '001',
-  recordType: 'MOC',
   subscriberID: '',
   sortField: 'timestamp',
   sortOrder: 'desc',
+  /**开始时间 */
+  startTime: '',
+  /**结束时间 */
+  endTime: '',
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -43,28 +46,19 @@ let queryParams = reactive({
 
 /**查询参数重置 */
 function fnQueryReset() {
-  recordTypes.value = ['MOC'];
   queryParams = Object.assign(queryParams, {
-    recordType: 'MOC',
     subscriberID: '',
+    startTime: '',
+    endTime: '',
     pageNum: 1,
     pageSize: 20,
   });
+  queryRangePicker.value = ['', ''];
   tablePagination.current = 1;
   tablePagination.pageSize = 20;
   fnGetList();
 }
 
-/**记录类型 */
-const recordTypes = ref<string[]>(['MOC']);
-
-/**查询记录类型变更 */
-function fnQueryRecordTypeChange(value: any) {
-  if (Array.isArray(value)) {
-    queryParams.recordType = value.join(',');
-  }
-}
-
 /**表格状态类型 */
 type TabeStateType = {
   /**加载等待 */
@@ -97,57 +91,122 @@ let tableColumns: ColumnsType = [
     width: 100,
   },
   {
-    title: 'Record Type',
+    title: 'Charging ID', // 计费ID
     dataIndex: 'cdrJSON',
     align: 'left',
-  },
-  {
-    title: 'Charging ID',
-    dataIndex: 'chargingId',
-    key: 'chargingId',
-    align: 'center',
     width: 100,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.chargingID;
+    },
   },
   {
-    title: 'Subscriber ID',
-    dataIndex: 'subscriberId',
-    key: 'subscriberId',
-    align: 'center',
-    width: 120,
+    title: 'Subscriber ID Data', // 用户 ID 数据
+    dataIndex: 'cdrJSON',
+    align: 'left',
+    width: 150,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.subscriberIdentifier?.subscriptionIDData;
+    },
   },
   {
-    title: 'Duration',
-    dataIndex: 'duration',
-    key: 'duration',
-    align: 'center',
+    title: 'Subscriber ID Type', // 用户 ID 类型
+    dataIndex: 'cdrJSON',
+    align: 'left',
+    width: 150,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.subscriberIdentifier?.subscriptionIDType;
+    },
   },
   {
-    title: 'Data Volume Uplink',
-    dataIndex: 'dataVolumeUplink',
-    key: 'dataVolumeUplink',
-    align: 'center',
+    title: 'Data Volume Uplink', // 数据量上行链路
+    dataIndex: 'cdrJSON',
+    align: 'left',
+    width: 150,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      const listOfMultipleUnitUsage = cdrJSON.listOfMultipleUnitUsage;
+      if (
+        !Array.isArray(listOfMultipleUnitUsage) ||
+        listOfMultipleUnitUsage.length < 1
+      ) {
+        return 0;
+      }
+      const usedUnitContainer = listOfMultipleUnitUsage[0].usedUnitContainer;
+      if (!Array.isArray(usedUnitContainer) || usedUnitContainer.length < 1) {
+        return 0;
+      }
+      return usedUnitContainer[0].dataVolumeUplink;
+    },
   },
   {
-    title: 'Data Volume Downlink',
-    dataIndex: 'dataVolumeDownlink',
-    key: 'dataVolumeDownlink',
-    align: 'center',
+    title: 'Data Volume Downlink', // 数据量下行链路
+    dataIndex: 'cdrJSON',
+    align: 'left',
+    width: 180,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      const listOfMultipleUnitUsage = cdrJSON.listOfMultipleUnitUsage;
+      if (
+        !Array.isArray(listOfMultipleUnitUsage) ||
+        listOfMultipleUnitUsage.length < 1
+      ) {
+        return 0;
+      }
+      const usedUnitContainer = listOfMultipleUnitUsage[0].usedUnitContainer;
+      if (!Array.isArray(usedUnitContainer) || usedUnitContainer.length < 1) {
+        return 0;
+      }
+      return usedUnitContainer[0].dataVolumeDownlink;
+    },
   },
   {
-    title: 'DataTotal Volume',
-    dataIndex: 'dataTotalVolume',
-    align: 'center',
+    title: 'Data Total Volume', // 数据总量
+    dataIndex: 'cdrJSON',
+    align: 'left',
+    width: 150,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      const listOfMultipleUnitUsage = cdrJSON.listOfMultipleUnitUsage;
+      if (
+        !Array.isArray(listOfMultipleUnitUsage) ||
+        listOfMultipleUnitUsage.length < 1
+      ) {
+        return 0;
+      }
+      const usedUnitContainer = listOfMultipleUnitUsage[0].usedUnitContainer;
+      if (!Array.isArray(usedUnitContainer) || usedUnitContainer.length < 1) {
+        return 0;
+      }
+      return usedUnitContainer[0].dataTotalVolume;
+    },
   },
   {
-    title: 'pduAddress',
-    key: 'pduAddress',
-    dataIndex: 'pduAddress',
-    align: 'center',
+    title: 'Duration', // 持续时间
+    dataIndex: 'cdrJSON',
+    align: 'left',
+    width: 100,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.duration;
+    },
   },
   {
-    title: 'createdAt',
-    dataIndex: 'createdAt',
-    align: 'center',
+    title: 'Invocation Time', // 调用时间
+    dataIndex: 'cdrJSON',
+    align: 'left',
+    width: 250,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.invocationTimestamp;
+    },
+  },
+  {
+    title: t('common.operate'),
+    key: 'id',
+    align: 'left',
   },
 ];
 
@@ -195,37 +254,53 @@ type ModalStateType = {
   confirmLoading: boolean;
   /**最大ID值 */
   maxId: number;
-  /**表单数据 */
-  from: Record<string, any>;
-  /**标题 */
-  title: string;
-  /**详细框是否显示 */
-  visibleByView: boolean;
 };
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
   confirmLoading: false,
   maxId: 0,
-  from: {
-    iPV4dynamicAddressFlag: 'true',
-    iPv6dynamicPrefixFlag: 'false',
-    pDUIPv4Address: '',
-    pDUIPv6AddresswithPrefix: '',
-  },
-  title: 'View',
-  visibleByView: false,
 });
 
 /**
- * 对话框弹出显示为 查看
- * @param row 单行记录信息
+ * 记录删除
+ * @param id  编号
  */
-function fnModalVisibleByVive(row: Record<string, any>) {
-  modalState.from = Object.assign(modalState.from, row);
-  modalState.from.pduAddress = JSON.parse(row.pduAddress);
-  modalState.title = `${row.subscriberID}`;
-  modalState.visibleByView = true;
+function fnRecordDelete(id: string) {
+  if (!id || modalState.confirmLoading) return;
+  let msg = id;
+  if (id === '0') {
+    msg = `${id}...  ${tableState.selectedRowKeys.length}`;
+    id = tableState.selectedRowKeys.join(',');
+  }
+
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.dashboard.cdr.delTip', { msg }),
+    onOk() {
+      modalState.confirmLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      delSMFDataCDR(id)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.operateOk'),
+              duration: 3,
+            });
+            fnGetList(1);
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          modalState.confirmLoading = false;
+        });
+    },
+  });
 }
 
 /**查询列表, pageNum初始页数 */
@@ -235,64 +310,149 @@ function fnGetList(pageNum?: number) {
   if (pageNum) {
     queryParams.pageNum = pageNum;
   }
-  listIMSDataCDR(toRaw(queryParams)).then(res => {
+  if (!queryRangePicker.value) {
+    queryRangePicker.value = ['', ''];
+  }
+  queryParams.startTime = queryRangePicker.value[0];
+  queryParams.endTime = queryRangePicker.value[1];
+  listSMFDataCDR(toRaw(queryParams)).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
-      /**测试数据 */
-
-      // res.rows = [
-      //   {
-      //     id: '12',
-      //     neType: 'SMF',
-      //     neName: 'SMF_001',
-      //     rmUID: '4400HX1SMF001',
-      //     timestamp: 1700020424,
-      //     recordType: '"21212"',
-      //     chargingID: '82',
-      //     subscriberID: '"82"',
-      //     duration: '68',
-      //     dataVolumeUplink: '[45]',
-      //     dataVolumeDownlink: '[67]',
-      //     dataTotalVolume: '[5]',
-      //     pduAddress:
-      //       '{"iPV4dynamicAddressFlag": true, "iPv6dynamicPrefixFlag":false, "pDUIPv4Address":"192.168.2.219","pDUIPv6AddresswithPrefix": ""}',
-      //     createdAt: '2024-05-27T16:41:02Z',
-      //   },
-      // ];
-
       // 取消勾选
       if (tableState.selectedRowKeys.length > 0) {
         tableState.selectedRowKeys = [];
       }
       tablePagination.total = res.total;
-      tableState.data = res.rows;
+      // 遍历处理cdr字符串数据
+      tableState.data = res.rows.map(item => {
+        let cdrJSON = item.cdrJSON;
+        if (!cdrJSON) {
+          Reflect.set(item, 'cdrJSON', {});
+        }
+
+        try {
+          cdrJSON = JSON.parse(cdrJSON);
+          Reflect.set(item, 'cdrJSON', cdrJSON);
+        } catch (error) {
+          console.error(error);
+          Reflect.set(item, 'cdrJSON', {});
+        }
+
+        return item;
+      });
+
+      // 取最大值ID用作实时累加
+      if (res.total > 0) {
+        modalState.maxId = Number(res.rows[0].id);
+      }
     }
     tableState.loading = false;
   });
 }
 
+/**列表导出 */
+function fnExportList() {
+  if (modalState.confirmLoading) return;
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.dashboard.cdr.exportTipSMF'),
+    onOk() {
+      const hide = message.loading(t('common.loading'), 0);
+      const querys = toRaw(queryParams);
+      querys.pageSize = 10000;
+      exportSMFDataCDR(querys)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.operateOk'),
+              duration: 3,
+            });
+            saveAs(res.data, `smf_cdr_event_export_${Date.now()}.xlsx`);
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          modalState.confirmLoading = false;
+        });
+    },
+  });
+}
+
+/**实时数据开关 */
+const realTimeData = ref<boolean>(false);
+
 /**
- * 对话框弹出关闭执行函数
- * 进行表达规则校验
+ * 实时数据
  */
-function fnModalCancel() {
-  modalState.visibleByView = false;
+function fnRealTime() {
+  realTimeData.value = !realTimeData.value;
+  if (realTimeData.value) {
+    // 建立链接
+    const options: OptionsType = {
+      url: '/ws',
+      params: {
+        /**订阅通道组
+         *
+         * CDR会话事件-SMF (GroupID:1006)
+         */
+        subGroupID: '1006',
+      },
+      onmessage: wsMessage,
+      onerror: wsError,
+    };
+    ws.connect(options);
+  } else {
+    ws.close();
+  }
+}
+
+/**接收数据后回调 */
+function wsError(ev: any) {
+  // 接收数据后回调
+  console.error(ev);
+}
+
+/**接收数据后回调 */
+function wsMessage(res: Record<string, any>) {
+  const { code, requestId, data } = res;
+  if (code === RESULT_CODE_ERROR) {
+    console.warn(res.msg);
+    return;
+  }
+
+  // 订阅组信息
+  if (!data?.groupId) {
+    return;
+  }
+  // cdrEvent CDR会话事件
+  if (data.groupId === '1006') {
+    const cdrEvent = data.data;
+    queue.add(async () => {
+      modalState.maxId += 1;
+      tableState.data.unshift({
+        id: modalState.maxId,
+        neType: cdrEvent.neType,
+        neName: cdrEvent.neName,
+        rmUID: cdrEvent.rmUID,
+        timestamp: cdrEvent.timestamp,
+        cdrJSON: cdrEvent.CDR,
+      });
+      tablePagination.total += 1;
+      if (tableState.data.length > 100) {
+        tableState.data.pop();
+      }
+      await new Promise(resolve => setTimeout(resolve, 800));
+    });
+  }
 }
 
 onMounted(() => {
-  // 初始字典数据
-  Promise.allSettled([getDict('cdr_sip_code'), getDict('cdr_call_type')])
-    .then(resArr => {
-      if (resArr[0].status === 'fulfilled') {
-        dict.cdrSipCode = resArr[0].value;
-      }
-      if (resArr[1].status === 'fulfilled') {
-        dict.cdrCallType = resArr[1].value;
-      }
-    })
-    .finally(() => {
-      // 获取列表数据
-      fnGetList();
-    });
+  // 获取列表数据
+  fnGetList();
 });
 
 onBeforeUnmount(() => {
@@ -312,30 +472,32 @@ onBeforeUnmount(() => {
       <!-- 表格搜索栏 -->
       <a-form :model="queryParams" name="queryParams" layout="horizontal">
         <a-row :gutter="16">
-          <a-col :lg="8" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.dashboard.cdr.recordType')"
-              name="recordType "
-            >
-              <a-select
-                v-model:value="recordTypes"
-                mode="multiple"
-                :options="
-                  ['MOC', 'MTC', 'MOSM', 'MTSM'].map(v => ({ value: v }))
-                "
-                :placeholder="t('common.selectPlease')"
-                @change="fnQueryRecordTypeChange"
-              ></a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="8" :md="12" :xs="24">
-            <a-form-item label="Subscriber ID" name="subscriberID">
+          <a-col :lg="4" :md="12" :xs="24">
+            <a-form-item label="Subscriber ID" name="calledParty ">
               <a-input
                 v-model:value="queryParams.subscriberID"
                 allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="40"
               ></a-input>
             </a-form-item>
           </a-col>
+          <a-col :lg="8" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.time')"
+              name="queryRangePicker"
+            >
+              <a-range-picker
+                v-model:value="queryRangePicker"
+                allow-clear
+                bordered
+                :show-time="{ format: 'HH:mm:ss' }"
+                format="YYYY-MM-DD HH:mm:ss"
+                value-format="x"
+                style="width: 100%"
+              ></a-range-picker>
+            </a-form-item>
+          </a-col>
           <a-col :lg="4" :md="12" :xs="24">
             <a-form-item>
               <a-space :size="8">
@@ -356,6 +518,46 @@ onBeforeUnmount(() => {
 
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
+      <template #title>
+        <a-space :size="8" align="center">
+          <a-popconfirm
+            placement="bottomLeft"
+            :title="
+              !realTimeData
+                ? t('views.dashboard.cdr.realTimeDataStart')
+                : t('views.dashboard.cdr.realTimeDataStop')
+            "
+            ok-text="Yes"
+            cancel-text="No"
+            @confirm="fnRealTime()"
+          >
+            <a-button type="primary" :danger="realTimeData">
+              <template #icon><FundOutlined /> </template>
+              {{
+                !realTimeData
+                  ? t('views.dashboard.cdr.realTimeDataStart')
+                  : t('views.dashboard.cdr.realTimeDataStop')
+              }}
+            </a-button>
+          </a-popconfirm>
+
+          <a-button
+            type="default"
+            danger
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            :loading="modalState.confirmLoading"
+            @click.prevent="fnRecordDelete('0')"
+          >
+            <template #icon><DeleteOutlined /></template>
+            {{ t('common.deleteText') }}
+          </a-button>
+
+          <a-button type="dashed" @click.prevent="fnExportList()">
+            <template #icon><ExportOutlined /></template>
+            {{ t('common.export') }}
+          </a-button>
+        </a-space>
+      </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
@@ -420,66 +622,156 @@ onBeforeUnmount(() => {
         }"
       >
         <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'callType'">
-            <DictTag
-              :options="dict.cdrCallType"
-              :value="record.cdrJSON.callType"
-            />
-          </template>
-
-          <template v-if="column.key === 'pduAddress'">
-            <a-tooltip>
-              <template #title>{{ t('common.viewText') }}</template>
-              <a-button
-                type="link"
-                @click.prevent="fnModalVisibleByVive(record)"
-              >
-                <template #icon><ProfileOutlined /></template>
-              </a-button>
-            </a-tooltip>
+          <template v-if="column.key === 'id'">
+            <a-space :size="8" align="center">
+              <a-tooltip>
+                <template #title>{{ t('common.deleteText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnRecordDelete(record.id)"
+                >
+                  <template #icon>
+                    <DeleteOutlined />
+                  </template>
+                </a-button>
+              </a-tooltip>
+            </a-space>
           </template>
         </template>
+        <template #expandedRowRender="{ record }">
+          <a-row :gutter="16">
+            <a-col :lg="8" :md="12" :xs="24" :offset="2">
+              <a-divider orientation="left">
+                {{ t('views.dashboard.cdr.cdrInfo') }}
+              </a-divider>
+              <div>
+                <span>{{ t('views.dashboard.cdr.neName') }}: </span>
+                <span>{{ record.neName }}</span>
+              </div>
+              <div>
+                <span>{{ t('views.dashboard.cdr.rmUID') }}: </span>
+                <span>{{ record.rmUID }}</span>
+              </div>
+              <div>
+                <span>{{ t('views.dashboard.cdr.time') }}: </span>
+                <span>{{ parseDateToStr(+record.timestamp * 1000) }}</span>
+              </div>
+              <a-divider orientation="left">
+                {{ t('views.dashboard.cdr.rowInfo') }}
+              </a-divider>
+              <div>
+                <span>Record Network Function ID: </span>
+                <span>{{ record.cdrJSON.recordingNetworkFunctionID }}</span>
+              </div>
+              <div>
+                <span>Record Type: </span>
+                <span>{{ record.cdrJSON.recordType }}</span>
+              </div>
+              <div>
+                <span>Record Opening Time: </span>
+                <span>{{ record.cdrJSON.recordOpeningTime }}</span>
+              </div>
+              <div>
+                <span>Charging ID: </span>
+                <span>{{ record.cdrJSON.chargingID }}</span>
+              </div>
+              <div>
+                <span>Duration: </span>
+                <span>{{ record.cdrJSON.duration }}</span>
+              </div>
+              <a-divider orientation="left"> SubscriberIdentifier </a-divider>
+              <div>
+                <span>Subscription ID Type: </span>
+                <span>
+                  {{ record.cdrJSON.subscriberIdentifier?.subscriptionIDType }}
+                </span>
+              </div>
+              <div>
+                <span>Subscription ID Data: </span>
+                <span>
+                  {{ record.cdrJSON.subscriberIdentifier?.subscriptionIDData }}
+                </span>
+              </div>
+            </a-col>
+            <a-col :lg="8" :md="12" :xs="24">
+              <a-divider orientation="left">
+                List Of Multiple Unit Usage
+              </a-divider>
+              <div v-for="u in record.cdrJSON.listOfMultipleUnitUsage">
+                <div>RatingGroup: {{ u.ratingGroup }}</div>
+                <div v-for="udata in u.usedUnitContainer">
+                  <div>
+                    <span>Data Total Volume: </span>
+                    <span>{{ udata.dataTotalVolume }}</span>
+                  </div>
+                  <div>
+                    <span>Data Volume Downlink: </span>
+                    <span>{{ udata.dataVolumeDownlink }}</span>
+                  </div>
+                  <div>
+                    <span>Data Volume Uplink: </span>
+                    <span>{{ udata.dataVolumeUplink }}</span>
+                  </div>
+                  <div>
+                    <span>Time: </span>
+                    <span>{{ udata.time }}</span>
+                  </div>
+                </div>
+              </div>
+              <a-divider orientation="left">
+                PDU Session Charging Information
+              </a-divider>
+              <div>
+                <span>User Identifier: </span>
+                <span>{{
+                  record.cdrJSON.pDUSessionChargingInformation?.userIdentifier
+                }}</span>
+              </div>
+              <div>
+                <span>SSC Mode: </span>
+                <span>{{
+                  record.cdrJSON.pDUSessionChargingInformation?.sSCMode
+                }}</span>
+                &nbsp;&nbsp;
+                <span>RAT Type: </span>
+                <span>{{
+                  record.cdrJSON.pDUSessionChargingInformation?.rATType
+                }}</span>
+                &nbsp;&nbsp;
+                <span>DNN ID: </span>
+                <span>
+                  {{ record.cdrJSON.pDUSessionChargingInformation?.dNNID }}
+                </span>
+              </div>
+              <div>
+                <span>PDU Type: </span>
+                <span>
+                  {{ record.cdrJSON.pDUSessionChargingInformation?.pDUType }}
+                </span>
+              </div>
+              <div>
+                <span>PDU IPv4 Address: </span>
+                <span>
+                  {{
+                    record.cdrJSON.pDUSessionChargingInformation?.pDUAddress
+                      ?.pDUIPv4Address
+                  }}
+                </span>
+              </div>
+              <div>
+                <span>PDU IPv6 Addres Swith Prefix: </span>
+                <span>
+                  {{
+                    record.cdrJSON.pDUSessionChargingInformation?.pDUAddress
+                      ?.pDUIPv6AddresswithPrefix
+                  }}
+                </span>
+              </div>
+            </a-col>
+          </a-row>
+        </template>
       </a-table>
     </a-card>
-
-    <!-- 详情框 -->
-    <DraggableModal
-      width="800px"
-      :visible="modalState.visibleByView"
-      :title="modalState.title"
-      @cancel="fnModalCancel"
-      :footer="null"
-    >
-      <a-form layout="horizontal" labelAlign="left" :labelWrap="false">
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="subscriberID" name="subscriberID">
-              {{ modalState.from.subscriberID }}
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="chargingID" name="chargingID">
-              {{ modalState.from.chargingID }}
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-descriptions title="PDU Address" :column="2" size="small" bordered>
-          <a-descriptions-item label="IPV4 Dynamic Address Flag">
-            {{ modalState.from.pduAddress.iPV4dynamicAddressFlag }}
-          </a-descriptions-item>
-          <a-descriptions-item label="IPV6 Dynamic Prefix Flag">
-            {{ modalState.from.pduAddress.iPv6dynamicPrefixFlag }}
-          </a-descriptions-item>
-          <a-descriptions-item label="PDU IPV4 Address">{{
-            modalState.from.pduAddress.pDUIPv4Address
-          }}</a-descriptions-item>
-          <a-descriptions-item label="PDU IPV6 Address With Prefix">{{
-            modalState.from.pduAddress.pDUIPv6AddresswithPrefix
-          }}</a-descriptions-item>
-        </a-descriptions>
-      </a-form>
-    </DraggableModal>
   </PageContainer>
 </template>