diff --git a/src/api/neData/mf.ts b/src/api/neData/mf.ts
deleted file mode 100644
index e88ba658..00000000
--- a/src/api/neData/mf.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { request } from '@/plugins/http-fetch';
-
-/**
- * 查询IMS-CDR会话事件
- * @param query 查询参数
- * @returns object
- */
-export function listMFDataCDR(query: Record<string, any>) {
-  return request({
-    url: '/neData/mf/cdr/list',
-    method: 'get',
-    params: query,
-    timeout: 60_000,
-  });
-}
-
-/**
- * IMS-CDR会话删除
- * @param id 信息ID
- * @returns object
- */
-export function delMFDataCDR(cdrIds: string | number) {
-  return request({
-    url: `/neData/mf/cdr/${cdrIds}`,
-    method: 'delete',
-    timeout: 60_000,
-  });
-}
-
-/**
- * IMS-CDR会话列表导出
- * @param data 查询列表条件
- * @returns object
- */
-export function exportMFDataCDR(data: Record<string, any>) {
-  return request({
-    url: '/neData/mf/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 43d336f2..119c4a3c 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -433,8 +433,6 @@ 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 45c44fb2..e865ea0b 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -433,8 +433,6 @@ export default {
         sgwcServedMSISDN: 'MSISDN',
         sgwcVolumeGPRSUplink: 'GPRS 上行链路',
         sgwcVolumeGPRSDownlink: 'GPRS 下行链路',
-        recordPath:'录音文件路径',
-        msd:'最小数据集',
       },
       ue: {
         eventType: "事件类型",
diff --git a/src/views/dashboard/mfCDR/index.vue b/src/views/dashboard/mfCDR/index.vue
deleted file mode 100644
index b80e5788..00000000
--- a/src/views/dashboard/mfCDR/index.vue
+++ /dev/null
@@ -1,835 +0,0 @@
-<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 {
-  delMFDataCDR,
-  exportMFDataCDR,
-  listMFDataCDR,
-} from '@/api/neData/mf';
-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: 'MF',
-  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);
-      delMFDataCDR(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;
-  }
-  listMFDataCDR(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;
-      exportMFDataCDR(querys)
-        .then(res => {
-          if (res.code === RESULT_CODE_SUCCESS) {
-            message.success({
-              content: t('common.operateOk'),
-              duration: 3,
-            });
-            saveAs(res.data, `MF_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 === 'MF') {
-              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="MF" 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/dashboard/overview/components/mfOverview/DashboardCards.vue b/src/views/dashboard/overview/components/mfOverview/DashboardCards.vue
deleted file mode 100644
index e49f9253..00000000
--- a/src/views/dashboard/overview/components/mfOverview/DashboardCards.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<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;">
-      Users</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>
-
-      <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/mfOverview/TrendChart.vue b/src/views/dashboard/overview/components/mfOverview/TrendChart.vue
deleted file mode 100644
index 42845694..00000000
--- a/src/views/dashboard/overview/components/mfOverview/TrendChart.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<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 29f7c571..f955c4f3 100644
--- a/src/views/dashboard/overview/index.vue
+++ b/src/views/dashboard/overview/index.vue
@@ -1,30 +1,684 @@
 <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;
+};
 
-import DashboardCards from './components/MFOverview/DashboardCards.vue';
+/**概览状态信息 */
+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');
+};
 
 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="dashboard-page">
-    <DashboardCards />
+  <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>
 </template>
 
 <style lang="less" scoped>
-.cardClass {
-  height: 100%;
-  width: 100%;
-  border-radius: 10px;
+@import url('./css/index.css');
+.toDeep {
+  --editor-background-color: blue;
 }
 
-@import url('./css/index.css');
+.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/ne/neInfo/components/EditModal.vue b/src/views/ne/neInfo/components/EditModal.vue
index cee8601b..b8955ab7 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: 'MF',
+    neType: 'AMF',
     neName: '',
     ip: '',
     port: 33030,
     pvFlag: 'PNF',
-    rmUid: '4400HXMF001',
+    rmUid: '4400HXAMF001',
     neAddress: '',
     dn: '',
     vendorName: '',
@@ -321,14 +321,14 @@ function fnNeTypeChange(v: any) {
     });
   }
 
-  modalState.from.rmUid = `4400HX${v}${modalState.from.neId}`; // 4400HX1MF001
+  modalState.from.rmUid = `4400HX${v}${modalState.from.neId}`; // 4400HX1AMF001
 }
 
 /**表单修改网元neId */
 function fnNeIdChange(e: any) {
   const v = e.target.value;
   if (v.length < 1) return;
-  modalState.from.rmUid = `4400HX${modalState.from.neType}${v}`; // 4400HX1MF001
+  modalState.from.rmUid = `4400HX${modalState.from.neType}${v}`; // 4400HX1AMF001
 }
 
 /**表单修改网元IP */