diff --git a/src/api/neData/psap.ts b/src/api/neData/psap.ts
new file mode 100644
index 00000000..b2630eb5
--- /dev/null
+++ b/src/api/neData/psap.ts
@@ -0,0 +1,43 @@
+import { request } from '@/plugins/http-fetch';
+
+/**
+ * 查询IMS-CDR会话事件
+ * @param query 查询参数
+ * @returns object
+ */
+export function listPSAPDataCDR(query: Record<string, any>) {
+  return request({
+    url: '/neData/psap/cdr/list',
+    method: 'get',
+    params: query,
+    timeout: 60_000,
+  });
+}
+
+/**
+ * IMS-CDR会话删除
+ * @param id 信息ID
+ * @returns object
+ */
+export function delPSAPDataCDR(cdrIds: string | number) {
+  return request({
+    url: `/neData/psap/cdr/${cdrIds}`,
+    method: 'delete',
+    timeout: 60_000,
+  });
+}
+
+/**
+ * IMS-CDR会话列表导出
+ * @param data 查询列表条件
+ * @returns object
+ */
+export function exportPSAPDataCDR(data: Record<string, any>) {
+  return request({
+    url: '/neData/psap/cdr/export',
+    method: 'post',
+    data,
+    responseType: 'blob',
+    timeout: 60_000,
+  });
+}
diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index 119c4a3c..43d336f2 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -433,6 +433,8 @@ export default {
         sgwcServedMSISDN: 'MSISDN',
         sgwcVolumeGPRSUplink: 'GPRS Uplink',
         sgwcVolumeGPRSDownlink: 'GPRS Downlink',
+        recordPath:'Record Path',
+        msd:'MSD',
       },
       ue: {
         eventType: "Event Type",
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index e865ea0b..45c44fb2 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -433,6 +433,8 @@ export default {
         sgwcServedMSISDN: 'MSISDN',
         sgwcVolumeGPRSUplink: 'GPRS 上行链路',
         sgwcVolumeGPRSDownlink: 'GPRS 下行链路',
+        recordPath:'录音文件路径',
+        msd:'最小数据集',
       },
       ue: {
         eventType: "事件类型",
diff --git a/src/views/dashboard/overview/components/psapOverview/DashboardCards.vue b/src/views/dashboard/overview/components/psapOverview/DashboardCards.vue
new file mode 100644
index 00000000..173ec4d8
--- /dev/null
+++ b/src/views/dashboard/overview/components/psapOverview/DashboardCards.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { defineComponent, ref } from 'vue';
+import TrendChart from './TrendChart.vue';
+
+
+// 模拟数据
+const activeCallsData = ref([10, 20, 30, 40, 30, 20, 0]);
+const mosData = ref([40, 50, 60, 70, 80, 30, 70]);
+const failedCallsData = ref([10, 10, 30, 20, 50, 40, 30]);
+
+
+
+</script>
+
+<template>
+  <a-card>
+    <div style="font-size:32px; font-weight: bold; color: #000; margin-bottom: 20px;">
+      Calls</div>
+    <a-row :gutter="[16, 16]">
+      <!-- 活跃呼叫卡片 -->
+      <a-col :xs="24" :sm="24" :lg="8">
+        <a-card :bordered="false" class="metric-card">
+          <div class="card-title">Online Users</div>
+          <div class="card-content">
+            <div class="trend-chart">
+              <TrendChart :data="activeCallsData" color="#4CAF50" />
+            </div>
+            <div class="metric-info">
+              <div class="metric-value">
+                0
+                <a-icon class="trend-icon up" type="arrow-up" />
+              </div>
+              <div class="metric-change">-20 last 5m</div>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+
+      <!-- MOS卡片 -->
+      <a-col :xs="24" :sm="24" :lg="8">
+        <a-card :bordered="false" class="metric-card">
+          <div class="card-title">Total Users</div>
+          <div class="card-content">
+            <div class="trend-chart">
+              <TrendChart :data="mosData" color="#2196F3" />
+            </div>
+            <div class="metric-info">
+              <div class="metric-value">
+                70
+                <a-icon class="trend-icon right" type="arrow-right" />
+              </div>
+              <div class="metric-change">+40 last 5m</div>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+
+
+
+      <!-- 失败呼叫卡片 -->
+      <a-col :xs="24" :sm="24" :lg="8">
+        <a-card :bordered="false" class="metric-card">
+          <div class="card-title">Parallel Users</div>
+          <div class="card-content">
+            <div class="trend-chart">
+              <TrendChart :data="failedCallsData" color="#F44336" />
+            </div>
+            <div class="metric-info">
+              <div class="metric-value">
+                30
+              </div>
+              <div class="metric-change">-10 last 5m</div>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+  </a-card>
+</template>
+
+<style scoped>
+.dashboard-cards {
+  padding: 16px;
+}
+
+.metric-card {
+  border-radius: 8px;
+  height: 100%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 16px;
+}
+
+.card-content {
+  display: flex;
+  align-items: center;
+}
+
+.trend-chart {
+  flex: 1;
+  height: 50px;
+}
+
+.metric-info {
+  margin-left: 16px;
+  text-align: right;
+}
+
+.full-width {
+  width: 100%;
+  text-align: center;
+}
+
+.metric-value {
+  font-size: 24px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.metric-change {
+  font-size: 12px;
+  color: #999;
+  margin-top: 4px;
+}
+
+.trend-icon {
+  margin-left: 8px;
+  font-size: 16px;
+}
+
+.up {
+  color: #4CAF50;
+}
+
+.down {
+  color: #F44336;
+}
+
+.right {
+  color: #2196F3;
+}
+</style>
diff --git a/src/views/dashboard/overview/components/psapOverview/TrendChart.vue b/src/views/dashboard/overview/components/psapOverview/TrendChart.vue
new file mode 100644
index 00000000..42845694
--- /dev/null
+++ b/src/views/dashboard/overview/components/psapOverview/TrendChart.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="trend-chart-container" ref="chartContainer"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, PropType } from 'vue';
+import * as echarts from 'echarts/core';
+import { LineChart } from 'echarts/charts';
+import { GridComponent } from 'echarts/components';
+import { SVGRenderer } from 'echarts/renderers';
+
+echarts.use([LineChart, GridComponent, SVGRenderer]);
+
+// 定义props
+const props = defineProps({
+  data: {
+    type: Array as PropType<number[]>,
+    required: true
+  },
+  color: {
+    type: String,
+    default: '#4CAF50'
+  }
+});
+
+const chartContainer = ref<HTMLElement | null>(null);
+let chart: echarts.ECharts | null = null;
+
+const initChart = () => {
+  if (!chartContainer.value) return;
+
+  chart = echarts.init(chartContainer.value);
+
+  const option = {
+    grid: {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    },
+    xAxis: {
+      type: 'category',
+      show: false,
+      data: ['40m', '', '', '', '', '', 'now']
+    },
+    yAxis: {
+      type: 'value',
+      show: false
+    },
+    series: [
+      {
+        data: props.data,
+        type: 'line',
+        smooth: true,
+        symbol: 'none',
+        lineStyle: {
+          color: props.color,
+          width: 2
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: props.color + '40' // 40% 透明度
+              },
+              {
+                offset: 1,
+                color: props.color + '00' // 0% 透明度
+              }
+            ]
+          }
+        }
+      }
+    ],
+    animation: false
+  };
+
+  chart.setOption(option);
+};
+
+onMounted(() => {
+  initChart();
+
+  window.addEventListener('resize', () => {
+    chart?.resize();
+  });
+});
+
+watch(() => props.data, () => {
+  chart?.setOption({
+    series: [{ data: props.data }]
+  });
+});
+</script>
+
+<style scoped>
+.trend-chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/dashboard/overview/index.vue b/src/views/dashboard/overview/index.vue
index f955c4f3..e1400c18 100644
--- a/src/views/dashboard/overview/index.vue
+++ b/src/views/dashboard/overview/index.vue
@@ -1,684 +1,30 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
-import svgBase from '@/assets/svg/base.svg';
-import svgUserIMS from '@/assets/svg/userIMS.svg';
-import svgUserSMF from '@/assets/svg/userSMF.svg';
-import useI18n from '@/hooks/useI18n';
-import Topology from './components/Topology/index.vue';
-import NeResources from './components/NeResources/index.vue';
-import UserActivity from './components/UserActivity/index.vue';
-import AlarnTypeBar from './components/AlarnTypeBar/index.vue';
-import UPFFlow from './components/UPFFlow/index.vue';
-import { listUDMSub } from '@/api/neData/udm_sub';
-import { listUENumBySMF } from '@/api/neUser/smf';
-import { listUENumByIMS } from '@/api/neUser/ims';
-import { listBase5G } from '@/api/neUser/base5G';
-import {
-  graphNodeClickID,
-  graphState,
-  notNeNodes,
-  graphNodeStateNum,
-  neStateRequestMap,
-} from './hooks/useTopology';
-import { upfTotalFlow, upfTFActive } from './hooks/useUPFTotalFlow';
-import { useFullscreen } from '@vueuse/core';
-import useWS from './hooks/useWS';
-import useAppStore from '@/store/modules/app';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { useRouter } from 'vue-router';
-import useNeInfoStore from '@/store/modules/neinfo';
-import { message } from 'ant-design-vue';
-import { upfWhoId } from './hooks/useWS';
 
-const neInfoStore = useNeInfoStore();
-const router = useRouter();
-const appStore = useAppStore();
-const { t } = useI18n();
-const { wsSend, userActivitySend, upfTFSend, reSendUPF } = useWS();
 
-/**概览状态类型 */
-type SkimStateType = {
-  /**UDM签约用户数量 */
-  udmSubNum: number;
-  /**SMF在线用户数 */
-  smfUeNum: number;
-  /**IMS在线用户数 */
-  imsUeNum: number;
-  /**5G基站数量 */
-  gnbNum: number;
-  /**5G在线用户数量 */
-  gnbUeNum: number;
-  /**4G基站数量 */
-  enbNum: number;
-  /**4G在线用户数量 */
-  enbUeNum: number;
-};
 
-/**概览状态信息 */
-let skimState: SkimStateType = reactive({
-  udmSubNum: 0,
-  smfUeNum: 0,
-  imsUeNum: 0,
-  gnbNum: 0,
-  gnbUeNum: 0,
-  enbNum: 0,
-  enbUeNum: 0,
-});
-
-/**网元参数 */
-let neCascaderOptions = ref<Record<string, any>[]>([]);
-
-/**总览节点 */
-const viewportDom = ref<HTMLElement | null>(null);
-const { isFullscreen, toggle } = useFullscreen(viewportDom);
-
-let initFlag = false;
-/**10s调度器 */
-const interval10s = ref<any>(null);
-
-/**5s调度器 */
-const interval5s = ref<any>(null);
-
-/**查询网元状态 */
-function fnGetNeState() {
-  // 获取节点状态
-  for (const node of graphState.data.nodes) {
-    if (notNeNodes.includes(node.id)) continue;
-    const { neType, neId } = node.neInfo;
-    if (!neType || !neId) continue;
-    // 请求标记检查避免重复发送
-    if (neStateRequestMap.value.get(neType)) continue;
-    neStateRequestMap.value.set(neType, true);
-
-    wsSend({
-      requestId: `neState_${neType}_${neId}`,
-      type: 'ne_state',
-      data: {
-        neType: neType,
-        neId: neId,
-      },
-    });
-  }
-}
-
-/**获取概览信息 */
-async function fnGetSkim() {
-  const neHandlers = new Map([
-    // [
-    //   'UDM',
-    //   {
-    //     request: (neId: string) =>
-    //       listUDMSub({ neId: neId, pageNum: 1, pageSize: 1 }),
-    //     process: (res: any) =>
-    //       res.code === RESULT_CODE_SUCCESS &&
-    //       (skimState.udmSubNum += res.total),
-    //   },
-    // ],
-    [
-      'SMF',
-      {
-        request: (neId: string) => listUENumBySMF(neId),
-        process: (res: any) =>
-          res.code === RESULT_CODE_SUCCESS && (skimState.smfUeNum += res.data),
-      },
-    ],
-    [
-      'IMS',
-      {
-        request: (neId: string) => listUENumByIMS(neId),
-        process: (res: any) =>
-          res.code === RESULT_CODE_SUCCESS && (skimState.imsUeNum += res.data),
-      },
-    ],
-    [
-      'AMF',
-      {
-        request: (neId: string) => listBase5G({ neType: 'AMF', neId }),
-        process: (res: any) => {
-          if (res.code === RESULT_CODE_SUCCESS) {
-            skimState.gnbNum += res.total;
-            skimState.gnbUeNum += res.rows.reduce(
-              (sum: number, item: any) => sum + item.ueNum,
-              0
-            );
-          }
-        },
-      },
-    ],
-    [
-      'MME',
-      {
-        request: (neId: string) => listBase5G({ neType: 'MME', neId }),
-        process: (res: any) => {
-          if (res.code === RESULT_CODE_SUCCESS) {
-            skimState.enbNum += res.total;
-            skimState.enbUeNum += res.rows.reduce(
-              (sum: number, item: any) => sum + item.ueNum,
-              0
-            );
-          }
-        },
-      },
-    ],
-  ]);
-
-  const requests = neCascaderOptions.value.flatMap(
-    (ne: any) =>
-      ne.children
-        ?.map((child: any) => {
-          const handler = neHandlers.get(child.neType);
-          return handler
-            ? {
-                promise: handler.request(child.neId),
-                process: handler.process,
-              }
-            : null;
-        })
-        .filter(Boolean) || []
-  );
-
-  const results = await Promise.allSettled(requests.map(r => r.promise));
-
-  // 重置
-  Object.assign(skimState, {
-    udmSubNum: 0,
-    smfUeNum: 0,
-    imsUeNum: 0,
-    gnbNum: 0,
-    gnbUeNum: 0,
-    enbNum: 0,
-    enbUeNum: 0,
-  });
-  results.forEach((result, index) => {
-    if (result.status === 'fulfilled') {
-      requests[index].process(result.value);
-    }
-  });
-
-  // UDM
-  listUDMSub({ neId: udmNeId.value, pageNum: 1, pageSize: 1 }).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS) {
-      skimState.udmSubNum = res.total;
-    }
-  });
-}
-
-/**初始数据函数 */
-function loadData() {
-  fnGetNeState(); // 获取网元状态
-  userActivitySend();
-  upfTFSend('0');
-  upfTFSend('7');
-  upfTFSend('30');
-
-  clearInterval(interval10s.value);
-  interval10s.value = setInterval(() => {
-    if (!interval10s.value) return;
-    if (upfTFActive.value === '0') {
-      upfTFSend('7');
-      upfTFActive.value = '7';
-    } else if (upfTFActive.value === '7') {
-      upfTFSend('30');
-      upfTFActive.value = '30';
-    } else if (upfTFActive.value === '30') {
-      upfTFSend('0');
-      upfTFActive.value = '0';
-    }
-  }, 10_000);
-
-  clearInterval(interval5s.value);
-  interval5s.value = setInterval(() => {
-    if (!interval5s.value || !initFlag) return;
-    fnGetSkim(); // 获取概览信息
-    fnGetNeState(); // 获取网元状态
-  }, 5_000);
-}
-
-/**栏目信息跳转 */
-function fnToRouter(name: string, query?: any) {
-  router.push({ name, query });
-}
-
-/**网元参数 */
-let neOtions = ref<Record<string, any>[]>([]);
-
-// UPF实时流量下拉框选择
-function fnSelectNe(value: any, option: any) {
-  upfWhoId.value = value;
-  reSendUPF(value);
-  // upfTotalFlow.value.map((item: any) => {
-  //   item.requestFlag = false;
-  // });
-
-  for (var key in upfTotalFlow.value) {
-    upfTotalFlow.value[key].requestFlag = false;
-  }
-  // loadData();
-}
-
-let udmNeId = ref<string>('001');
-let udmOtions = ref<Record<string, any>[]>([]);
-/**用户数量-选择UDM */
-function fnSelectUDM(e: any) {
-  udmNeId.value = e.key;
-  listUDMSub({ neId: udmNeId.value, pageNum: 1, pageSize: 1 }).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS) {
-      skimState.udmSubNum = res.total;
-    }
-  });
-}
-
-// 定义一个方法返回 views 容器
-const getPopupContainer = () => {
-  // 使用 ref 或其他方式来引用你的 views 容器
-  // 如果 views 容器直接在这个组件内部，你可以使用 ref
-  // 但在这个例子中，我们假设它是通过类名来获取的
-  return document.querySelector('.viewport');
-};
+import DashboardCards from './components/psapOverview/DashboardCards.vue';
 
 onMounted(() => {
-  neInfoStore
-    .fnNelist()
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-        if (res.data.length > 0) {
-          // UPF
-          let arr: Record<string, any>[] = [];
-          res.data.forEach(i => {
-            if (i.neType === 'UPF') {
-              arr.push({ value: i.neId, label: i.neName, rmUid: i.rmUid });
-            }
-          });
-          neOtions.value = arr;
-          if (arr.length > 0) {
-            //queryParams.neRealId = arr[0].value;
-            fnSelectNe(arr[0].value, arr[0]);
-          }
-
-          // UDM
-          let arr1: Record<string, any>[] = [];
-          res.data.forEach((v: any) => {
-            if (v.neType === 'UDM') {
-              arr1.push({ value: v.neId, label: v.neName, rmUid: v.rmUid });
-            }
-          });
-          udmOtions.value = arr1;
-          if (arr1.length > 0) {
-            fnSelectUDM({ key: arr1[0].value });
-          }
-
-          // 过滤不可用的网元
-          neCascaderOptions.value = neInfoStore.getNeCascaderOptions.filter(
-            (item: any) => {
-              return ['UDM', 'SMF', 'IMS', 'AMF', 'MME'].includes(item.value);
-            }
-          );
-          if (neCascaderOptions.value.length === 0) {
-            message.warning({
-              content: t('common.noData'),
-              duration: 2,
-            });
-            return;
-          }
-        }
-      } else {
-        message.warning({
-          content: t('common.noData'),
-          duration: 2,
-        });
-      }
-    })
-    .finally(() => {
-      initFlag = true;
-      fnGetSkim().then(() => {
-        loadData();
-      });
-    });
 });
 
 onBeforeUnmount(() => {
-  clearInterval(interval10s.value);
-  interval10s.value = null;
-  clearInterval(interval5s.value);
-  interval5s.value = null;
-  initFlag = false;
+
 });
 </script>
 
 <template>
-  <div class="viewport" ref="viewportDom">
-    <div class="brand">
-      <div
-        class="brand-title"
-        @click="toggle"
-        :title="t('views.dashboard.overview.fullscreen')"
-      >
-        {{ t('views.dashboard.overview.title') }}
-        <FullscreenExitOutlined v-if="isFullscreen" />
-        <FullscreenOutlined v-else />
-      </div>
-      <div class="brand-desc">{{ appStore.appName }}</div>
-    </div>
-
-    <div class="column">
-      <!--概览-->
-      <div class="skim panel">
-        <div class="inner">
-          <h3>
-            <IdcardOutlined style="color: #68d8fe" />&nbsp;&nbsp;
-            {{ t('views.dashboard.overview.skim.userTitle') }}
-          </h3>
-          <div class="data">
-            <div
-              class="item toRouter"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
-              <div @click="fnToRouter('Sub_2010')">
-                <UserOutlined
-                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
-                />
-                {{ skimState.udmSubNum }}
-              </div>
-              <span>
-                <a-dropdown :trigger="['click']">
-                  <div class="toDeep-text">
-                    {{ t('views.dashboard.overview.skim.users') }}
-                    <DownOutlined style="margin-left: 12px; font-size: 12px" />
-                  </div>
-                  <template #overlay>
-                    <a-menu @click="fnSelectUDM">
-                      <a-menu-item v-for="v in udmOtions" :key="v.value" :disabled="udmNeId === v.value">
-                        {{ v.label }}
-                      </a-menu-item>
-                    </a-menu>
-                  </template>
-                </a-dropdown>
-              </span>
-            </div>
-            <div
-              class="item toRouter"
-              @click="fnToRouter('Ims_2080')"
-              :title="t('views.dashboard.overview.toRouter')"
-              style="margin: 0 12px"
-              v-perms:has="['dashboard:overview:imsUeNum']"
-            >
-              <div>
-                <img :src="svgUserIMS" style="width: 18px; margin-right: 8px" />
-                {{ skimState.imsUeNum }}
-              </div>
-              <span>
-                {{ t('views.dashboard.overview.skim.imsUeNum') }}
-              </span>
-            </div>
-            <div
-              class="item toRouter"
-              @click="fnToRouter('Ue_2081')"
-              :title="t('views.dashboard.overview.toRouter')"
-              v-perms:has="['dashboard:overview:smfUeNum']"
-            >
-              <div>
-                <img :src="svgUserSMF" style="width: 18px; margin-right: 8px" />
-                {{ skimState.smfUeNum }}
-              </div>
-              <span>
-                {{ t('views.dashboard.overview.skim.smfUeNum') }}
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="skim panel base" v-perms:has="['dashboard:overview:gnbBase']">
-        <div class="inner">
-          <h3>
-            <GlobalOutlined style="color: #68d8fe" />&nbsp;&nbsp; 5G
-            {{ t('views.dashboard.overview.skim.baseTitle') }}
-          </h3>
-          <div class="data">
-            <div
-              class="item toRouter"
-              @click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
-              <div style="align-items: flex-start">
-                <img
-                  :src="svgBase"
-                  style="width: 18px; margin-right: 8px; height: 2rem"
-                />
-                {{ skimState.gnbNum }}
-              </div>
-              <span>{{ t('views.dashboard.overview.skim.gnbBase') }}</span>
-            </div>
-            <div
-              class="item toRouter"
-              @click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
-              <div style="align-items: flex-start">
-                <UserOutlined
-                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
-                />
-                {{ skimState.gnbUeNum }}
-              </div>
-              <span>{{ t('views.dashboard.overview.skim.gnbUeNum') }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="skim panel base" v-perms:has="['dashboard:overview:enbBase']">
-        <div class="inner">
-          <h3>
-            <GlobalOutlined style="color: #68d8fe" />&nbsp;&nbsp; 4G
-            {{ t('views.dashboard.overview.skim.baseTitle') }}
-          </h3>
-          <div class="data">
-            <div
-              class="item toRouter"
-              @click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
-              <div style="align-items: flex-start">
-                <img
-                  :src="svgBase"
-                  style="width: 18px; margin-right: 8px; height: 2rem"
-                />
-                {{ skimState.enbNum }}
-              </div>
-              <span>{{ t('views.dashboard.overview.skim.enbBase') }}</span>
-            </div>
-            <div
-              class="item toRouter"
-              @click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
-              <div style="align-items: flex-start">
-                <UserOutlined
-                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
-                />
-                {{ skimState.enbUeNum }}
-              </div>
-              <span>{{ t('views.dashboard.overview.skim.enbUeNum') }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 用户行为 -->
-      <div class="userActivity panel">
-        <div class="inner">
-          <h3>
-            <WhatsAppOutlined style="color: #68d8fe" />&nbsp;&nbsp;
-            {{ t('views.dashboard.overview.userActivity.title') }}
-          </h3>
-          <div class="chart">
-            <UserActivity />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="column" style="flex: 4; margin: 1.333rem 0.833rem 0">
-      <!-- 实时流量 -->
-      <div class="upfFlow panel">
-        <div class="inner">
-          <h3
-            class="toRouter"
-            :title="t('views.dashboard.overview.toRouter')"
-            style="display: flex; align-items: center"
-          >
-            <AreaChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
-            <span @click="fnToRouter('GoldTarget_2104')">{{
-              t('views.dashboard.overview.upfFlow.title')
-            }}</span>
-            <a-select
-              v-model:value="upfWhoId"
-              :options="neOtions"
-              :get-Popup-Container="getPopupContainer"
-              class="toDeep"
-              style="width: 100px; color: #fff; margin-left: auto"
-              @change="fnSelectNe"
-            />
-          </h3>
-
-          <div class="chart">
-            <UPFFlow />
-          </div>
-        </div>
-      </div>
-      <!-- 网络拓扑 -->
-      <div class="topology panel">
-        <div class="inner">
-          <h3
-            class="toRouter"
-            @click="fnToRouter('TopologyArchitecture_2128')"
-            :title="t('views.dashboard.overview.toRouter')"
-          >
-            <span>
-              <ApartmentOutlined style="color: #68d8fe" />&nbsp;&nbsp;
-              {{ t('views.dashboard.overview.topology.title') }}
-            </span>
-            <span>
-              {{ t('views.dashboard.overview.topology.normal') }}:
-              <span class="normal"> {{ graphNodeStateNum[0] }} </span>
-              {{ t('views.dashboard.overview.topology.abnormal') }}:
-              <span class="abnormal"> {{ graphNodeStateNum[1] }} </span>
-            </span>
-          </h3>
-          <div class="chart">
-            <Topology />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="column">
-      <!-- 流量统计 -->
-      <div class="upfFlowTotal panel">
-        <div class="inner">
-          <h3>
-            <span>
-              <SwapOutlined style="color: #68d8fe" />&nbsp;&nbsp;
-              {{ t('views.dashboard.overview.upfFlowTotal.title') }}
-            </span>
-
-            <!-- 筛选 -->
-            <div class="filter">
-              <span
-                :data-key="v"
-                :class="{ active: upfTFActive === v }"
-                v-for="v in ['0', '7', '30']"
-                :key="v"
-                @click="
-                  () => {
-                    upfTFActive = v;
-                  }
-                "
-              >
-                {{
-                  v === '0'
-                    ? '24' + t('common.units.hour')
-                    : v + t('common.units.day')
-                }}
-              </span>
-            </div>
-          </h3>
-          <div class="chart">
-            <!-- 数据 -->
-            <div class="data">
-              <div class="item">
-                <span>
-                  <ArrowUpOutlined style="color: #597ef7" />
-                  {{ t('views.dashboard.overview.upfFlowTotal.up') }}
-                </span>
-                <h4>{{ upfTotalFlow[upfTFActive].upFrom }}</h4>
-              </div>
-              <div class="item">
-                <span>
-                  <ArrowDownOutlined style="color: #52c41a" />
-                  {{ t('views.dashboard.overview.upfFlowTotal.down') }}
-                </span>
-                <h4>{{ upfTotalFlow[upfTFActive].downFrom }}</h4>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- 告警统计 -->
-      <div class="alarmType panel">
-        <div class="inner">
-          <h3
-            class="toRouter"
-            @click="fnToRouter('HistoryAlarm_2097')"
-            :title="t('views.dashboard.overview.toRouter')"
-          >
-            <PieChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
-            {{ t('views.dashboard.overview.alarmTypeBar.alarmSum') }}
-          </h3>
-          <div class="chart">
-            <AlarnTypeBar />
-          </div>
-        </div>
-      </div>
-      <!-- 资源情况 -->
-      <div class="resources panel">
-        <div class="inner">
-          <h3>
-            <DashboardOutlined style="color: #68d8fe" />&nbsp;&nbsp;
-            {{ t('views.dashboard.overview.resources.title') }}：
-            {{ graphNodeClickID }}
-          </h3>
-          <div class="chart">
-            <NeResources />
-          </div>
-        </div>
-      </div>
-    </div>
+  <div class="dashboard-page">
+    <DashboardCards />
   </div>
 </template>
 
 <style lang="less" scoped>
+.cardClass {
+  height: 100%;
+  width: 100%;
+  border-radius: 10px;
+}
+
 @import url('./css/index.css');
-.toDeep {
-  --editor-background-color: blue;
-}
-
-.toDeep :deep(.ant-select-selector) {
-  background-color: #101129;
-  border: none;
-}
-
-.toDeep :deep(.ant-select-arrow) {
-  color: #fff;
-}
-
-.toDeep :deep(.ant-select-selection-item) {
-  color: #fff;
-}
-.toDeep-text {
-  color: #4c9bfd !important;
-  font-size: 0.844rem !important;
-  position: relative !important;
-  line-height: 2rem !important;
-  white-space: nowrap !important;
-  text-align: start !important;
-  text-overflow: ellipsis !important;
-  overflow: hidden !important;
-}
 </style>
diff --git a/src/views/dashboard/psapCDR/index.vue b/src/views/dashboard/psapCDR/index.vue
new file mode 100644
index 00000000..801c423c
--- /dev/null
+++ b/src/views/dashboard/psapCDR/index.vue
@@ -0,0 +1,835 @@
+<script setup lang="ts">
+import { reactive, onMounted, toRaw, ref, onBeforeUnmount } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import useI18n from '@/hooks/useI18n';
+import {
+  RESULT_CODE_ERROR,
+  RESULT_CODE_SUCCESS,
+} from '@/constants/result-constants';
+import useDictStore from '@/store/modules/dict';
+import useNeInfoStore from '@/store/modules/neinfo';
+import {
+  delPSAPDataCDR,
+  exportPSAPDataCDR,
+  listPSAPDataCDR,
+} from '@/api/neData/psap';
+import { parseDateToStr, parseDuration } from '@/utils/date-utils';
+import { OptionsType, WS } from '@/plugins/ws-websocket';
+import saveAs from 'file-saver';
+import PQueue from 'p-queue';
+import { useClipboard } from '@vueuse/core';
+import dayjs, { type Dayjs } from 'dayjs';
+const { copy } = useClipboard({ legacy: true });
+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 neOtions = ref<Record<string, any>[]>([]);
+
+/**开始结束时间 */
+let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>([
+  dayjs().startOf('hour'),
+  dayjs().endOf('hour'),
+]);
+/**时间范围 */
+let rangePickerPresets = ref([
+  {
+    label: 'Now hour',
+    value: [dayjs().startOf('hour'), dayjs().endOf('hour')],
+  },
+  { label: 'Today', value: [dayjs().startOf('day'), dayjs().endOf('day')] },
+  {
+    label: 'Yesterday',
+    value: [
+      dayjs().subtract(1, 'day').startOf('day'),
+      dayjs().subtract(1, 'day').endOf('day'),
+    ],
+  },
+]);
+
+/**查询参数 */
+let queryParams = reactive({
+  /**网元类型 */
+  neType: 'PSAP',
+  neId: '001',
+  recordType: '',
+  callerParty: '',
+  calledParty: '',
+  sortField: 'timestamp',
+  sortOrder: 'desc',
+  /**开始时间 */
+  startTime: undefined as undefined | number,
+  /**结束时间 */
+  endTime: undefined as undefined | number,
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  recordTypes.value = [];
+  queryParams = Object.assign(queryParams, {
+    recordType: '',
+    callerParty: '',
+    calledParty: '',
+    startTime: undefined,
+    endTime: undefined,
+    pageNum: 1,
+    pageSize: 20,
+  });
+  queryRangePicker.value = [dayjs().startOf('hour'), dayjs().endOf('hour')];
+  tablePagination.current = 1;
+  tablePagination.pageSize = 20;
+  fnGetList();
+}
+
+/**记录类型 */
+const recordTypes = ref<string[]>([]);
+
+/**查询记录类型变更 */
+function fnQueryRecordTypeChange(value: any) {
+  if (Array.isArray(value)) {
+    queryParams.recordType = value.join(',');
+  }
+}
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'middle',
+  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: 150,
+    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.caller'),
+    dataIndex: 'cdrJSON',
+    key: 'callerParty',
+    align: 'left',
+    width: 120,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.callerParty;
+    },
+  },
+  {
+    title: t('views.dashboard.cdr.called'),
+    dataIndex: 'cdrJSON',
+    key: 'calledParty',
+    align: 'left',
+    width: 120,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.calledParty;
+    },
+  },
+  {
+    title: t('views.dashboard.cdr.result'),
+    dataIndex: 'cdrJSON',
+    key: 'cause',
+    align: 'left',
+    width: 150,
+  },
+  {
+    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.recordPath'),
+    dataIndex: 'cdrJSON',
+    key: 'record_path',
+    align: 'left',
+    width: 100,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.record_path;
+    },
+  },
+  {
+    title: t('views.dashboard.cdr.msd'),
+    dataIndex: 'cdrJSON',
+    key: 'msd',
+    align: 'left',
+    width: 100,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.msd;
+    },
+  },
+  {
+    title: t('views.dashboard.cdr.seizureTime'),
+    dataIndex: 'cdrJSON',
+    align: 'left',
+    width: 200,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      if (typeof cdrJSON.seizureTime === 'number') {
+        return parseDateToStr(+cdrJSON.seizureTime * 1000);
+      }
+      return cdrJSON.seizureTime;
+    },
+  },
+  {
+    title: t('views.dashboard.cdr.releaseTime'),
+    dataIndex: 'cdrJSON',
+    align: 'left',
+    width: 200,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      if (typeof cdrJSON.releaseTime === 'number') {
+        return parseDateToStr(+cdrJSON.releaseTime * 1000);
+      }
+      return cdrJSON.releaseTime;
+    },
+  },
+  {
+    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 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);
+      delPSAPDataCDR(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;
+        });
+    },
+  });
+}
+
+/**
+ * 复制CDR
+ * @param jsonStr JSON字符串
+ */
+function fnRecordCopy(jsonStr: string) {
+  if (!jsonStr) return;
+  const text = JSON.stringify(jsonStr, null, 2);
+  copy(text).then(() => {
+    message.success(t('common.copyOk'), 3);
+  });
+}
+
+/**查询列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  // 时间范围
+  if (
+    Array.isArray(queryRangePicker.value) &&
+    queryRangePicker.value.length > 0
+  ) {
+    queryParams.startTime = queryRangePicker.value[0].valueOf();
+    queryParams.endTime = queryRangePicker.value[1].valueOf();
+  } else {
+    queryParams.startTime = undefined;
+    queryParams.endTime = undefined;
+  }
+  listPSAPDataCDR(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;
+  });
+}
+
+/**列表导出 */
+function fnExportList() {
+  if (modalState.confirmLoading) return;
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.dashboard.cdr.exportTip'),
+    onOk() {
+      const hide = message.loading(t('common.loading'), 0);
+      const querys = toRaw(queryParams);
+      querys.pageSize = 10000;
+      exportPSAPDataCDR(querys)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.operateOk'),
+              duration: 3,
+            });
+            saveAs(res.data, `psap_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 fnRealTime() {
+  realTimeData.value = !realTimeData.value;
+  if (realTimeData.value) {
+    tableState.seached = false;
+    // 建立链接
+    const options: OptionsType = {
+      url: '/ws',
+      params: {
+        /**订阅通道组
+         *
+         * IMS_CDR会话事件(GroupID:1005)
+         */
+        subGroupID: `1005_${queryParams.neId}`,
+      },
+      onmessage: wsMessage,
+      onerror: (ev: any) => {
+        console.error(ev);
+      },
+    };
+    ws.connect(options);
+  } else {
+    ws.close();
+    tableState.seached = true;
+    fnGetList(1);
+  }
+}
+
+/**接收数据后回调 */
+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_${queryParams.neId}`) {
+    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;
+      }
+    }
+  );
+  // 获取网元网元列表
+  useNeInfoStore()
+    .fnNelist()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        if (res.data.length > 0) {
+          let arr: Record<string, any>[] = [];
+          res.data.forEach(i => {
+            if (i.neType === 'PSAP') {
+              arr.push({ value: i.neId, label: i.neName });
+            }
+          });
+          neOtions.value = arr;
+          if (arr.length > 0) {
+            queryParams.neId = arr[0].value;
+          }
+        }
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
+    })
+    .finally(() => {
+      // 获取列表数据
+      fnGetList();
+    });
+});
+
+onBeforeUnmount(() => {
+  if (ws.state() !== -1) {
+    ws.close();
+  }
+});
+</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="6" :md="12" :xs="24">
+            <a-form-item label="PSAP" name="neId ">
+              <a-select v-model:value="queryParams.neId" :options="neOtions" :placeholder="t('common.selectPlease')"
+                @change="fnQueryReset()" />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item :label="t('views.dashboard.cdr.called')" name="calledParty">
+              <a-input v-model:value="queryParams.calledParty" allow-clear
+                :placeholder="t('common.inputPlease')"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item :label="t('views.dashboard.cdr.caller')" name="callerParty ">
+              <a-input v-model:value="queryParams.callerParty" allow-clear
+                :placeholder="t('common.inputPlease')"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="4" :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-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'].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="t('views.dashboard.cdr.time')" name="queryRangePicker">
+              <a-range-picker v-model:value="queryRangePicker" :presets="rangePickerPresets" :bordered="true"
+                :allow-clear="false" style="width: 100%" :show-time="{ format: 'HH:mm:ss' }"
+                format="YYYY-MM-DD HH:mm:ss"></a-range-picker>
+            </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')" v-perms:has="['cdr:ne:remove']">
+            <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>
+        <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" :disabled="realTimeData" />
+          </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"
+        :scroll="{ x: tableColumns.length * 150, 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-default="0" />
+            </span>
+            <span v-else>
+              {{ t('views.dashboard.cdr.resultOk') }}
+            </span>
+          </template>
+          <template v-if="column.key === 'id'">
+            <a-space :size="8" align="center">
+              <a-tooltip>
+                <template #title>{{ t('common.copyText') }}</template>
+                <a-button type="link" @click.prevent="fnRecordCopy(record.cdrJSON)">
+                  <template #icon>
+                    <CopyOutlined />
+                  </template>
+                </a-button>
+              </a-tooltip>
+              <a-tooltip>
+                <template #title>{{ t('common.deleteText') }}</template>
+                <a-button type="link" @click.prevent="fnRecordDelete(record.id)" v-perms:has="['cdr:ne:remove']">
+                  <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.ne.common.neName') }}: </span>
+                <span>{{ record.neName }}</span>
+              </div>
+              <div>
+                <span>{{ t('views.ne.common.rmUid') }}: </span>
+                <span>{{ record.rmUID }}</span>
+              </div>
+              <div>
+                <span>{{ t('views.dashboard.cdr.time') }}: </span>
+                <span>
+                  {{
+                    typeof record.cdrJSON.releaseTime === 'number'
+                      ? parseDateToStr(+record.cdrJSON.releaseTime * 1000)
+                      : record.cdrJSON.releaseTime
+                  }}
+                </span>
+              </div>
+            </a-col>
+            <a-col :lg="8" :md="12" :xs="24">
+              <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-default="0" />
+                </span>
+                <span v-else>
+                  {{ t('views.dashboard.cdr.resultOk') }}
+                </span>
+              </div>
+              <div>
+                <span>{{ t('views.dashboard.cdr.seizureTime') }}: </span>
+                <span>
+                  {{
+                    typeof record.cdrJSON.seizureTime === 'number'
+                      ? parseDateToStr(+record.cdrJSON.seizureTime * 1000)
+                      : record.cdrJSON.seizureTime
+                  }}
+                </span>
+              </div>
+              <div>
+                <span>{{ t('views.dashboard.cdr.releaseTime') }}: </span>
+                <span>
+                  {{
+                    typeof record.cdrJSON.releaseTime === 'number'
+                      ? parseDateToStr(+record.cdrJSON.releaseTime * 1000)
+                      : record.cdrJSON.releaseTime
+                  }}
+                </span>
+              </div>
+            </a-col>
+          </a-row>
+        </template>
+      </a-table>
+    </a-card>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>
diff --git a/src/views/ne/neInfo/components/EditModal.vue b/src/views/ne/neInfo/components/EditModal.vue
index b8955ab7..07dbd0f3 100644
--- a/src/views/ne/neInfo/components/EditModal.vue
+++ b/src/views/ne/neInfo/components/EditModal.vue
@@ -104,12 +104,12 @@ let modalState: ModalStateType = reactive({
   from: {
     id: undefined,
     neId: '001',
-    neType: 'AMF',
+    neType: 'PSAP',
     neName: '',
     ip: '',
     port: 33030,
     pvFlag: 'PNF',
-    rmUid: '4400HXAMF001',
+    rmUid: '4400HXPSAP001',
     neAddress: '',
     dn: '',
     vendorName: '',
@@ -321,14 +321,14 @@ function fnNeTypeChange(v: any) {
     });
   }
 
-  modalState.from.rmUid = `4400HX${v}${modalState.from.neId}`; // 4400HX1AMF001
+  modalState.from.rmUid = `4400HX${v}${modalState.from.neId}`; // 4400HX1PSAP001
 }
 
 /**表单修改网元neId */
 function fnNeIdChange(e: any) {
   const v = e.target.value;
   if (v.length < 1) return;
-  modalState.from.rmUid = `4400HX${modalState.from.neType}${v}`; // 4400HX1AMF001
+  modalState.from.rmUid = `4400HX${modalState.from.neType}${v}`; // 4400HX1PSAP001
 }
 
 /**表单修改网元IP */