feat: 新增CDR和UE页面，以及翻译

src/api/neData/amf.ts

@@ -0,0 +1,28 @@
+import { request } from '@/plugins/http-fetch';
+
+/**
+ * 查询AMF-UE会话事件列表
+ * @param query 查询参数
+ * @returns object
+ */
+export function listAMFDataUE(query: Record<string, any>) {
+  return request({
+    url: '/neData/amf/ue/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+/**
+ * AMF-UE会话删除
+ * @param id 信息ID
+ * @returns object
+ */
+export function delAMFDataUE(ueIds: string | number) {
+    return request({
+      url: `/neData/amf/ue/${ueIds}`,
+      method: 'delete',
+      timeout: 60_000,
+    });
+  }
+  

src/api/neData/ims.ts

@@ -0,0 +1,28 @@
+import { request } from '@/plugins/http-fetch';
+
+/**
+ * 查询IMS-CDR会话事件
+ * @param query 查询参数
+ * @returns object
+ */
+export function listIMSDataCDR(query: Record<string, any>) {
+  return request({
+    url: '/neData/ims/cdr/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+/**
+ * IMS-CDR会话删除
+ * @param id 信息ID
+ * @returns object
+ */
+export function delIMSDataCDR(cdrIds: string | number) {
+    return request({
+      url: `/neData/ims/cdr/${cdrIds}`,
+      method: 'delete',
+      timeout: 60_000,
+    });
+  }
+  

src/i18n/locales/en-US.ts

@@ -54,6 +54,8 @@ export default {
     },
     rowId: 'ID',
     operate: 'Operation',
+    operateOk: 'Operation Successful!',
+    operateErr: 'Operation Failed!',
     units: {
       second: 'Second',
       minute: 'Minute',
@@ -541,6 +543,35 @@ export default {
           resultOK: "Success",
         },
       },
+      cdr: {
+        recordType: "Recording Behavior",
+        realTimeDataStart: "Turn on real-time data",
+        realTimeDataStop: "Turn off real-time data",
+        cdrInfo: "CDR Info",
+        neName: "NE name",
+        rmUID: "UID",
+        time: "Time",
+        rowInfo: "Info",
+        type: "Type",
+        duration: "Duration",
+        caller: "Caller",
+        called: "Called",
+        result: "Result",
+        delTip: "Confirm deletion of the data item numbered [{msg}]?",
+      },
+      ue: {
+        eventType: "Event Type",
+        realTimeDataStart: "Turn on real-time data",
+        realTimeDataStop: "Turn off real-time data",
+        ueInfo: "UE Info",
+        neName: "NE name",
+        rmUID: "UID",
+        time: "Time",
+        rowInfo: "Info",
+        result: "Result",
+        resultOk: "Successes",
+        delTip: "Confirm deletion of the data item numbered [{msg}]?",
+      },
     },
     ne: {
       neHost: {
@@ -560,7 +591,6 @@ export default {
         remark: "Remark",
         createTime: "Time",
         delTip: "Confirm that you want to delete the host number [{num}]?",
-        ok: "Successful Operation",
         addTitle: "Add Host Connection",
         editTitle: "Edit Host Connection",
         test: "Test Connection To Host",
@@ -576,7 +606,6 @@ export default {
         remark: "Remark",
         createTime: "Time",
         delTip: "Are you sure you want to delete the message with command number [{num}]?",
-        ok: "Successful Operation",
         addTitle: "New Host Commands",
         editTitle: "Edit Host Commands",
       },

src/i18n/locales/zh-CN.ts

@@ -54,6 +54,8 @@ export default {
     },
     rowId: '编号',
     operate: '操作',
+    operateOk: '操作成功！',
+    operateErr: '操作失败！',
     units: {
       second: '秒',
       minute: '分钟',
@@ -540,7 +542,36 @@ export default {
           time: "时间",
           resultOK: "成功",
         },
-      }
+      },
+      cdr: {
+        recordType: "记录行为",
+        realTimeDataStart: "开启实时数据",
+        realTimeDataStop: "关闭实时数据",
+        cdrInfo: "CDR信息",
+        neName: "网元名称",
+        rmUID: "资源标识",
+        time: "记录时间",
+        rowInfo: "记录信息",
+        type: "记录类型",
+        duration: "通话时长",
+        caller: "主叫",
+        called: "被叫",
+        result: "结果",
+        delTip: "确认删除编号为【{msg}】的数据项?",
+      },
+      ue: {
+        eventType: "事件类型",
+        realTimeDataStart: "开启实时数据",
+        realTimeDataStop: "关闭实时数据",
+        ueInfo: "UE信息",
+        neName: "网元名称",
+        rmUID: "资源标识",
+        rowInfo: "记录信息",
+        time: "记录时间",
+        result: "结果",
+        resultOk: "成功",
+        delTip: "确认删除编号为【{msg}】的数据项?",
+      },
     },
     ne: {
       neHost: {
@@ -560,7 +591,6 @@ export default {
         remark: "备注信息",
         createTime: "创建时间",
         delTip: "确认要删除主机编号为【{num}】的信息吗？",
-        ok: "操作成功",
         addTitle: "新增主机连接",
         editTitle: "编辑主机连接",
         test: "测试连接",
@@ -576,7 +606,6 @@ export default {
         remark: "备注",
         createTime: "创建时间",
         delTip: "确认要删除命令编号为【{num}】的信息吗？",
-        ok: "操作成功",
         addTitle: "新增主机命令",
         editTitle: "编辑主机命令",
       },

src/views/dashboard/amfUE/index.vue

@@ -0,0 +1,663 @@
+<script setup lang="ts">
+import { reactive, onMounted, toRaw, ref } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { message, Modal } 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_ERROR,
+  RESULT_CODE_SUCCESS,
+} from '@/constants/result-constants';
+import useDictStore from '@/store/modules/dict';
+import { listAMFDataUE, delAMFDataUE } from '@/api/neData/amf';
+import { parseDateToStr, parseDuration } from '@/utils/date-utils';
+import { OptionsType, WS } from '@/plugins/ws-websocket';
+import PQueue from 'p-queue';
+const { t } = useI18n();
+const { getDict } = useDictStore();
+const ws = new WS();
+const queue = new PQueue({ concurrency: 1, autoStart: true });
+
+/**字典数据 */
+let dict: {
+  /**UE 事件认证代码类型 */
+  ueAauthCode: DictType[];
+  /**UE 事件类型 */
+  ueEventType: DictType[];
+  /**UE 事件CM状态 */
+  ueEventCmState: DictType[];
+} = reactive({
+  ueAauthCode: [],
+  ueEventType: [],
+  ueEventCmState: [],
+});
+
+/**查询参数 */
+let queryParams = reactive({
+  /**网元类型 */
+  neType: 'AMF',
+  neId: '001',
+  eventType: 'auth-result',
+  sortField: 'timestamp',
+  sortOrder: 'desc',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  eventTypes.value = ['auth-result'];
+  queryParams = Object.assign(queryParams, {
+    eventType: 'auth-result',
+    pageNum: 1,
+    pageSize: 20,
+  });
+  tablePagination.current = 1;
+  tablePagination.pageSize = 20;
+  fnGetList();
+}
+
+/**记录类型 */
+const eventTypes = ref<string[]>(['auth-result']);
+
+/**查询记录类型变更 */
+function fnQueryEventTypeChange(value: any) {
+  if (Array.isArray(value)) {
+    queryParams.eventType = value.join(',');
+  }
+}
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**斑马纹 */
+  striped: boolean;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'middle',
+  striped: false,
+  seached: true,
+  data: [],
+  selectedRowKeys: [],
+});
+
+/**表格字段列 */
+let tableColumns: ColumnsType = [
+  {
+    title: t('common.rowId'),
+    dataIndex: 'id',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: 'IMSI',
+    dataIndex: 'eventJSON',
+    align: 'left',
+    width: 100,
+    customRender(opt) {
+      const eventJSON = opt.value;
+      return eventJSON.imsi;
+    },
+  },
+  {
+    title: t('views.dashboard.ue.eventType'),
+    dataIndex: 'eventType',
+    key: 'eventType',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.dashboard.ue.result'),
+    dataIndex: 'eventJSON',
+    key: 'result',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.dashboard.ue.time'),
+    dataIndex: 'eventJSON',
+    key: 'time',
+    align: 'center',
+    width: 150,
+  },
+  {
+    title: t('common.operate'),
+    key: 'id',
+    align: 'left',
+  },
+];
+
+/**表格分页器参数 */
+let tablePagination = reactive({
+  /**当前页数 */
+  current: 1,
+  /**每页条数 */
+  pageSize: 20,
+  /**默认的每页条数 */
+  defaultPageSize: 20,
+  /**指定每页可以显示多少条 */
+  pageSizeOptions: ['10', '20', '50', '100'],
+  /**只有一页时是否隐藏分页器 */
+  hideOnSinglePage: false,
+  /**是否可以快速跳转至某页 */
+  showQuickJumper: true,
+  /**是否可以改变 pageSize */
+  showSizeChanger: true,
+  /**数据总数 */
+  total: 0,
+  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**表格紧凑型变更操作 */
+function fnTableSize({ key }: MenuInfo) {
+  tableState.size = key as SizeType;
+}
+
+/**表格斑马纹 */
+function fnTableStriped(_record: unknown, index: number): any {
+  return tableState.striped && index % 2 === 1 ? 'table-striped' : undefined;
+}
+
+/**表格多选 */
+function fnTableSelectedRowKeys(keys: (string | number)[]) {
+  tableState.selectedRowKeys = keys;
+}
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+  /**最大ID值 */
+  maxId: number;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  confirmLoading: false,
+  maxId: 0,
+});
+
+/**
+ * 记录删除
+ * @param id  编号
+ */
+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.ue.delTip', { msg }),
+    onOk() {
+      modalState.confirmLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      delAMFDataUE(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初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  listAMFDataUE(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      // 取消勾选
+      if (tableState.selectedRowKeys.length > 0) {
+        tableState.selectedRowKeys = [];
+      }
+      tablePagination.total = res.total;
+      // 遍历处理cdr字符串数据
+      tableState.data = res.rows.map(item => {
+        let eventJSON = item.eventJSON;
+        if (!eventJSON) {
+          Reflect.set(item, 'eventJSON', {});
+        }
+
+        try {
+          eventJSON = JSON.parse(eventJSON);
+          Reflect.set(item, 'eventJSON', eventJSON);
+        } catch (error) {
+          console.error(error);
+          Reflect.set(item, 'eventJSON', {});
+        }
+
+        return item;
+      });
+
+      // 取最大值ID用作实时累加
+      if (res.total > 0) {
+        modalState.maxId = Number(res.rows[0].id);
+      }
+    }
+    tableState.loading = false;
+  });
+}
+
+/**实时数据开关 */
+const realTimeData = ref<boolean>(false);
+
+/**
+ * 实时数据
+ */
+function fnRealTime() {
+  realTimeData.value = !realTimeData.value;
+  if (realTimeData.value) {
+    // 建立链接
+    const options: OptionsType = {
+      url: '/ws',
+      params: {
+        /**订阅通道组
+         *
+         * UE会话事件-AMF (GroupID:1010)
+         */
+        subGroupID: '1010',
+      },
+      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;
+  }
+  // ueEvent CDR会话事件
+  if (data.groupId === '1010') {
+    const ueEvent = data.data;
+    console.log(ueEvent);
+    queue.add(async () => {
+      modalState.maxId += 1;
+      tableState.data.unshift({
+        id: modalState.maxId,
+        neType: ueEvent.neType,
+        neName: ueEvent.neName, // 空
+        rmUID: ueEvent.rmUID, // 空
+        timestamp: ueEvent.timestamp,
+        eventType: ueEvent.eventType,
+        eventJSON: ueEvent.eventJSON,
+      });
+      tablePagination.total += 1;
+      await new Promise(resolve => setTimeout(resolve, 800));
+    });
+  }
+}
+
+onMounted(() => {
+  // 初始字典数据
+  Promise.allSettled([
+    getDict('ue_auth_code'),
+    getDict('ue_event_type'),
+    getDict('ue_event_cm_state'),
+  ])
+    .then(resArr => {
+      if (resArr[0].status === 'fulfilled') {
+        dict.ueAauthCode = resArr[0].value;
+      }
+      if (resArr[1].status === 'fulfilled') {
+        dict.ueEventType = resArr[1].value;
+      }
+      if (resArr[2].status === 'fulfilled') {
+        dict.ueEventCmState = resArr[2].value;
+      }
+    })
+    .finally(() => {
+      // 获取列表数据
+      fnGetList();
+    });
+});
+</script>
+
+<template>
+  <PageContainer>
+    <a-card
+      v-show="tableState.seached"
+      :bordered="false"
+      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
+    >
+      <!-- 表格搜索栏 -->
+      <a-form :model="queryParams" name="queryParams" layout="horizontal">
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.ue.eventType')"
+              name="eventType "
+            >
+              <a-select
+                v-model:value="eventTypes"
+                mode="tags"
+                :options="dict.ueEventType"
+                :placeholder="t('common.selectPlease')"
+                @change="fnQueryEventTypeChange"
+              ></a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item>
+              <a-space :size="8">
+                <a-button type="primary" @click.prevent="fnGetList(1)">
+                  <template #icon><SearchOutlined /></template>
+                  {{ t('common.search') }}
+                </a-button>
+                <a-button type="default" @click.prevent="fnQueryReset">
+                  <template #icon><ClearOutlined /></template>
+                  {{ t('common.reset') }}
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+
+    <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.ue.realTimeDataStart')
+                : t('views.dashboard.ue.realTimeDataStop')
+            "
+            ok-text="Yes"
+            cancel-text="No"
+            @confirm="fnRealTime()"
+          >
+            <a-button type="primary" :danger="realTimeData">
+              <template #icon><FundOutlined /> </template>
+              {{
+                !realTimeData
+                  ? t('views.dashboard.ue.realTimeDataStart')
+                  : t('views.dashboard.ue.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-space>
+      </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <a-tooltip>
+            <template #title>{{ t('common.searchBarText') }}</template>
+            <a-switch
+              v-model:checked="tableState.seached"
+              :checked-children="t('common.switch.show')"
+              :un-checked-children="t('common.switch.hide')"
+              size="small"
+            />
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ t('common.tableStripedText') }}</template>
+            <a-switch
+              v-model:checked="tableState.striped"
+              :checked-children="t('common.switch.open')"
+              :un-checked-children="t('common.switch.shut')"
+              size="small"
+            />
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ t('common.reloadText') }}</template>
+            <a-button type="text" @click.prevent="fnGetList()">
+              <template #icon><ReloadOutlined /></template>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ t('common.sizeText') }}</template>
+            <a-dropdown trigger="click" placement="bottomRight">
+              <a-button type="text">
+                <template #icon><ColumnHeightOutlined /></template>
+              </a-button>
+              <template #overlay>
+                <a-menu
+                  :selected-keys="[tableState.size as string]"
+                  @click="fnTableSize"
+                >
+                  <a-menu-item key="default">
+                    {{ t('common.size.default') }}
+                  </a-menu-item>
+                  <a-menu-item key="middle">
+                    {{ t('common.size.middle') }}
+                  </a-menu-item>
+                  <a-menu-item key="small">
+                    {{ t('common.size.small') }}
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="id"
+        :columns="tableColumns"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :pagination="tablePagination"
+        :row-class-name="fnTableStriped"
+        :scroll="{ x: tableColumns.length * 120, y: 'calc(100vh - 480px)' }"
+        :row-selection="{
+          type: 'checkbox',
+          columnWidth: '48px',
+          selectedRowKeys: tableState.selectedRowKeys,
+          onChange: fnTableSelectedRowKeys,
+        }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'eventType'">
+            <DictTag :options="dict.ueEventType" :value="record.eventType" />
+          </template>
+          <template v-if="column.key === 'result'">
+            <span v-if="record.eventType === 'auth-result'">
+              <DictTag
+                :options="dict.ueAauthCode"
+                :value="record.eventJSON.authCode"
+              />
+            </span>
+            <span
+              v-if="record.eventType === 'detach'"
+              :title="record.eventJSON.detachTime"
+            >
+              <span>{{ t('views.dashboard.ue.resultOk') }}</span>
+            </span>
+            <span v-if="record.eventType === 'cm-state'">
+              <DictTag
+                :options="dict.ueEventCmState"
+                :value="record.eventJSON.status"
+              />
+            </span>
+          </template>
+          <template v-if="column.key === 'time'">
+            <span
+              v-if="record.eventType === 'auth-result'"
+              :title="record.eventJSON.authTime"
+            >
+              {{ record.eventJSON.authTime }}
+            </span>
+            <span
+              v-if="record.eventType === 'detach'"
+              :title="record.eventJSON.detachTime"
+            >
+              {{ record.eventJSON.detachTime }}
+            </span>
+            <span
+              v-if="record.eventType === 'cm-state'"
+              :title="record.eventJSON.changeTime"
+            >
+              {{ record.eventJSON.changeTime }}
+            </span>
+          </template>
+          <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 }">
+          <div style="width: 46%; padding-left: 32px; padding-bottom: 16px">
+            <a-divider orientation="left">
+              {{ t('views.dashboard.ue.ueInfo') }}
+            </a-divider>
+            <div>
+              <span>{{ t('views.dashboard.ue.neName') }}: </span>
+              <span>{{ record.neName }}</span>
+            </div>
+            <div>
+              <span>{{ t('views.dashboard.ue.rmUID') }}: </span>
+              <span>{{ record.rmUID }}</span>
+            </div>
+            <a-divider orientation="left">
+              {{ t('views.dashboard.ue.rowInfo') }}
+            </a-divider>
+            <div>
+              <span>{{ t('views.dashboard.ue.time') }}: </span>
+              <span
+                v-if="record.eventType === 'auth-result'"
+                :title="record.eventJSON.authTime"
+              >
+                {{ record.eventJSON.authTime }}
+              </span>
+              <span
+                v-if="record.eventType === 'detach'"
+                :title="record.eventJSON.detachTime"
+              >
+                {{ record.eventJSON.detachTime }}
+              </span>
+              <span
+                v-if="record.eventType === 'cm-state'"
+                :title="record.eventJSON.changeTime"
+              >
+                {{ record.eventJSON.changeTime }}
+              </span>
+            </div>
+            <div>
+              <span>{{ t('views.dashboard.ue.eventType') }}: </span>
+              <DictTag :options="dict.ueEventType" :value="record.eventType" />
+            </div>
+            <div>
+              <span>{{ t('views.dashboard.ue.result') }}: </span>
+              <span v-if="record.eventType === 'auth-result'">
+                <DictTag
+                  :options="dict.ueAauthCode"
+                  :value="record.eventJSON.authCode"
+                />
+              </span>
+              <span v-if="record.eventType === 'detach'">
+                {{ t('views.dashboard.ue.resultOK') }}
+              </span>
+              <span v-if="record.eventType === 'cm-state'">
+                <DictTag
+                  :options="dict.ueEventCmState"
+                  :value="record.eventJSON.status"
+                />
+              </span>
+            </div>
+          </div>
+        </template>
+      </a-table>
+    </a-card>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.table-striped) td {
+  background-color: #fafafa;
+}
+
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>

src/views/dashboard/cdr/index.vue

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref, onMounted, onBeforeUnmount } from 'vue';
-import {
-  listCacheName,
-  listCacheKey,
-  getCacheValue,
-  clearCacheName,
-  clearCacheKey,
-  clearCacheSafe,
-} from '@/api/monitor/cache';
-import { PageContainer } from 'antdv-pro-layout';
-import { ColumnsType } from 'ant-design-vue/lib/table/Table';
-import { message } from 'ant-design-vue/lib';
-import { hasPermissions } from '@/plugins/auth-user';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { WS, OptionsType } from '@/plugins/ws-websocket';
-import useI18n from '@/hooks/useI18n';
-const { t } = useI18n();
-
-const ws = new WS();
-
-onMounted(() => {
-  const options: OptionsType = {
-    url: '/ws',
-    params: {
-      subGroupID: '1005',
-    },
-    onmessage: ev => {
-      // 接收数据后回调
-      console.log(ev);
-    },
-    onerror: (ev: any) => {
-      // 接收数据后回调
-      console.log(ev);
-    },
-  };
-  ws.connect(options);
-
-  setInterval(() => {
-    ws.send({ a: 1 });
-  }, 1000);
-});
-
-onBeforeUnmount(() => {
-  ws.close();
-});
-</script>
-
-<template>
-  <div></div>
-</template>
-
-<style lang="less" scoped></style>

src/views/dashboard/imsCDR/index.vue

@@ -0,0 +1,663 @@
+<script setup lang="ts">
+import { reactive, onMounted, toRaw, ref } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { message, Modal } 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_ERROR,
+  RESULT_CODE_SUCCESS,
+} from '@/constants/result-constants';
+import useDictStore from '@/store/modules/dict';
+import { delIMSDataCDR, listIMSDataCDR } from '@/api/neData/ims';
+import { parseDateToStr, parseDuration } from '@/utils/date-utils';
+import { OptionsType, WS } from '@/plugins/ws-websocket';
+import PQueue from 'p-queue';
+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 queryParams = reactive({
+  /**网元类型 */
+  neType: 'IMS',
+  neId: '001',
+  recordType: 'MOC',
+  sortField: 'timestamp',
+  sortOrder: 'desc',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  recordTypes.value = ['MOC']
+  queryParams = Object.assign(queryParams, {
+    recordType: 'MOC',
+    pageNum: 1,
+    pageSize: 20,
+  });
+  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 = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**斑马纹 */
+  striped: boolean;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'middle',
+  striped: false,
+  seached: true,
+  data: [],
+  selectedRowKeys: [],
+});
+
+/**表格字段列 */
+let tableColumns: ColumnsType = [
+  {
+    title: t('common.rowId'),
+    dataIndex: 'id',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.dashboard.cdr.recordType'),
+    dataIndex: 'cdrJSON',
+    align: 'left',
+    width: 100,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.recordType;
+    },
+  },
+  {
+    title: t('views.dashboard.cdr.type'),
+    dataIndex: 'cdrJSON',
+    key: 'callType',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.dashboard.cdr.called'),
+    dataIndex: 'cdrJSON',
+    key: 'calledParty',
+    align: 'left',
+    width: 100,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.calledParty;
+    },
+  },
+  {
+    title: t('views.dashboard.cdr.caller'),
+    dataIndex: 'cdrJSON',
+    key: 'callerParty',
+    align: 'left',
+    width: 100,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.callerParty;
+    },
+  },
+  {
+    title: t('views.dashboard.cdr.duration'),
+    dataIndex: 'cdrJSON',
+    key: 'callDuration',
+    align: 'left',
+    width: 100,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.callType === 'sms'
+        ? '-'
+        : parseDuration(cdrJSON.callDuration);
+    },
+  },
+  {
+    title: t('views.dashboard.cdr.result'),
+    dataIndex: 'cdrJSON',
+    key: 'cause',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.dashboard.cdr.time'),
+    dataIndex: 'cdrJSON',
+    align: 'center',
+    width: 150,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return parseDateToStr(+cdrJSON.releaseTime * 1000);
+    },
+  },
+  {
+    title: t('common.operate'),
+    key: 'id',
+    align: 'left',
+  },
+];
+
+/**表格分页器参数 */
+let tablePagination = reactive({
+  /**当前页数 */
+  current: 1,
+  /**每页条数 */
+  pageSize: 20,
+  /**默认的每页条数 */
+  defaultPageSize: 20,
+  /**指定每页可以显示多少条 */
+  pageSizeOptions: ['10', '20', '50', '100'],
+  /**只有一页时是否隐藏分页器 */
+  hideOnSinglePage: false,
+  /**是否可以快速跳转至某页 */
+  showQuickJumper: true,
+  /**是否可以改变 pageSize */
+  showSizeChanger: true,
+  /**数据总数 */
+  total: 0,
+  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**表格紧凑型变更操作 */
+function fnTableSize({ key }: MenuInfo) {
+  tableState.size = key as SizeType;
+}
+
+/**表格斑马纹 */
+function fnTableStriped(_record: unknown, index: number): any {
+  return tableState.striped && index % 2 === 1 ? 'table-striped' : undefined;
+}
+
+/**表格多选 */
+function fnTableSelectedRowKeys(keys: (string | number)[]) {
+  tableState.selectedRowKeys = keys;
+}
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+  /**最大ID值 */
+  maxId: number;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  confirmLoading: false,
+  maxId: 0,
+});
+
+/**
+ * 记录删除
+ * @param id  编号
+ */
+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);
+      delIMSDataCDR(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初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  listIMSDataCDR(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      // 取消勾选
+      if (tableState.selectedRowKeys.length > 0) {
+        tableState.selectedRowKeys = [];
+      }
+      tablePagination.total = res.total;
+      // 遍历处理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;
+  });
+}
+
+/**实时数据开关 */
+const realTimeData = ref<boolean>(false);
+
+/**
+ * 实时数据
+ */
+function fnRealTime() {
+  realTimeData.value = !realTimeData.value;
+  if (realTimeData.value) {
+    // 建立链接
+    const options: OptionsType = {
+      url: '/ws',
+      params: {
+        /**订阅通道组
+         *
+         * CDR会话事件-IMS (GroupID:1005)
+         */
+        subGroupID: '1005',
+      },
+      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 === '1005') {
+    const cdrEvent = data.data;
+    console.log(cdrEvent);
+    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;
+      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();
+    });
+});
+</script>
+
+<template>
+  <PageContainer>
+    <a-card
+      v-show="tableState.seached"
+      :bordered="false"
+      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
+    >
+      <!-- 表格搜索栏 -->
+      <a-form :model="queryParams" name="queryParams" layout="horizontal">
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.recordType')"
+              name="recordType "
+            >
+              <a-select
+                v-model:value="recordTypes"
+                mode="tags"
+                :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="6" :md="12" :xs="24">
+            <a-form-item>
+              <a-space :size="8">
+                <a-button type="primary" @click.prevent="fnGetList(1)">
+                  <template #icon><SearchOutlined /></template>
+                  {{ t('common.search') }}
+                </a-button>
+                <a-button type="default" @click.prevent="fnQueryReset">
+                  <template #icon><ClearOutlined /></template>
+                  {{ t('common.reset') }}
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+
+    <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-space>
+      </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <a-tooltip>
+            <template #title>{{ t('common.searchBarText') }}</template>
+            <a-switch
+              v-model:checked="tableState.seached"
+              :checked-children="t('common.switch.show')"
+              :un-checked-children="t('common.switch.hide')"
+              size="small"
+            />
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ t('common.tableStripedText') }}</template>
+            <a-switch
+              v-model:checked="tableState.striped"
+              :checked-children="t('common.switch.open')"
+              :un-checked-children="t('common.switch.shut')"
+              size="small"
+            />
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ t('common.reloadText') }}</template>
+            <a-button type="text" @click.prevent="fnGetList()">
+              <template #icon><ReloadOutlined /></template>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ t('common.sizeText') }}</template>
+            <a-dropdown trigger="click" placement="bottomRight">
+              <a-button type="text">
+                <template #icon><ColumnHeightOutlined /></template>
+              </a-button>
+              <template #overlay>
+                <a-menu
+                  :selected-keys="[tableState.size as string]"
+                  @click="fnTableSize"
+                >
+                  <a-menu-item key="default">
+                    {{ t('common.size.default') }}
+                  </a-menu-item>
+                  <a-menu-item key="middle">
+                    {{ t('common.size.middle') }}
+                  </a-menu-item>
+                  <a-menu-item key="small">
+                    {{ t('common.size.small') }}
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="id"
+        :columns="tableColumns"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :pagination="tablePagination"
+        :row-class-name="fnTableStriped"
+        :scroll="{ x: tableColumns.length * 120, y: 'calc(100vh - 480px)' }"
+        :row-selection="{
+          type: 'checkbox',
+          columnWidth: '48px',
+          selectedRowKeys: tableState.selectedRowKeys,
+          onChange: fnTableSelectedRowKeys,
+        }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'callType'">
+            <DictTag
+              :options="dict.cdrCallType"
+              :value="record.cdrJSON.callType"
+            />
+          </template>
+          <template v-if="column.key === 'cause'">
+            <span v-if="record.cdrJSON.callType !== 'sms'">
+              <DictTag
+                :options="dict.cdrSipCode"
+                :value="record.cdrJSON.cause"
+                value-option="0"
+              />
+            </span>
+            <span v-else>
+              {{ t('views.dashboard.overview.userActivity.resultOK') }}
+            </span>
+          </template>
+          <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 }">
+          <div style="width: 46%; padding-left: 32px; padding-bottom: 16px">
+            <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>{{ t('views.dashboard.cdr.type') }}: </span>
+              <DictTag
+                :options="dict.cdrCallType"
+                :value="record.cdrJSON.callType"
+              />
+            </div>
+            <div>
+              <span>{{ t('views.dashboard.cdr.duration') }}: </span>
+              <span v-if="record.cdrJSON.callType !== 'sms'">
+                {{ parseDuration(record.cdrJSON.callDuration) }}
+              </span>
+              <span v-else> - </span>
+            </div>
+            <div>
+              <span>{{ t('views.dashboard.cdr.caller') }}: </span>
+              <span>{{ record.cdrJSON.callerParty }}</span>
+            </div>
+            <div>
+              <span>{{ t('views.dashboard.cdr.called') }}: </span>
+              <span>{{ record.cdrJSON.calledParty }}</span>
+            </div>
+            <div>
+              <span>{{ t('views.dashboard.cdr.result') }}: </span>
+              <span v-if="record.cdrJSON.callType !== 'sms'">
+                <DictTag
+                  :options="dict.cdrSipCode"
+                  :value="record.cdrJSON.cause"
+                  value-option="0"
+                />
+              </span>
+              <span v-else>
+                {{ t('views.dashboard.overview.userActivity.resultOK') }}
+              </span>
+            </div>
+          </div>
+        </template>
+      </a-table>
+    </a-card>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.table-striped) td {
+  background-color: #fafafa;
+}
+
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>