From 20007f4732f11a8a15fcd4137f643951d130afe1 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Sat, 8 Mar 2025 10:31:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=AF=BC=E5=87=BA?=
 =?UTF-8?q?=E6=89=80=E6=9C=89=E5=AD=A6=E7=94=9F=E9=85=8D=E7=BD=AE=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=EF=BC=8C=E4=BC=98=E5=8C=96=E6=8F=90=E7=A4=BA=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 practical_training/api/pt/neConfig.ts         |   15 +-
 practical_training/i18n/locales/en-US.ts      |    6 +-
 practical_training/i18n/locales/zh-CN.ts      |    6 +-
 .../hooks/usePtOptions.ts                     |  163 +--
 .../configParamTreeTable/index.vue            |  109 +-
 .../monitor/topologyArchitecture/index.vue    | 1146 +++++++----------
 src/api/pt/neConfig.ts                        |   15 +-
 src/i18n/locales/en-US.ts                     |    6 +-
 src/i18n/locales/zh-CN.ts                     |    6 +-
 .../hooks/usePtOptions.ts                     |  163 +--
 .../configParamTreeTable/index.vue            |  109 +-
 src/views/configManage/neOverview/index.vue   |  423 +++---
 src/views/monitor/topology/index.vue          |    1 +
 .../monitor/topologyArchitecture/index.vue    |    6 +-
 14 files changed, 1067 insertions(+), 1107 deletions(-)

diff --git a/practical_training/api/pt/neConfig.ts b/practical_training/api/pt/neConfig.ts
index 6e45d4d9..733ad021 100644
--- a/practical_training/api/pt/neConfig.ts
+++ b/practical_training/api/pt/neConfig.ts
@@ -44,7 +44,7 @@ export function ptContrastAsDefault(params: Record<string, any>) {
  * @param student 仅教师 student
  * @returns object
  */
-export function ptExport(student: string|undefined) {
+export function ptExport(student: string | undefined) {
   return request({
     url: `/pt/neConfigData/export`,
     method: 'get',
@@ -54,6 +54,19 @@ export function ptExport(student: string|undefined) {
   });
 }
 
+/**
+ * 配置数据导出Excel (仅教师全量)
+ * @returns object
+ */
+export function ptExportAll() {
+  return request({
+    url: `/pt/neConfigData/export-all`,
+    method: 'get',
+    responseType: 'blob',
+    timeout: 180_000,
+  });
+}
+
 /**
  * 网元参数配置信息
  * @param params 数据 {neType,paramName}
diff --git a/practical_training/i18n/locales/en-US.ts b/practical_training/i18n/locales/en-US.ts
index 3cf352c9..44021817 100644
--- a/practical_training/i18n/locales/en-US.ts
+++ b/practical_training/i18n/locales/en-US.ts
@@ -514,13 +514,17 @@ export default {
         ptDiffRest: 'Restore this version',
         ptHistory: 'History',
         ptReset: 'Reset To Example',
+        ptResetTip: 'Confirmed to reset to the sample configuration?',
         ptLoad: 'Load Current Configuration',
+        ptLoadTip: 'Confirm that you want to load the current network element configuration?',
         ptExport: "Export Excel",
-        ptExportTip: "Exporting NE Configuration Data to an Excel file",
+        ptExportTip: "Confirm that you want to export the network element configuration data to an Excel file?",
+        ptExportAll: "导出所有学生配置",
         ptApplyShow: 'View Student',
         ptApply: 'request',
         ptApplyNE: 'Application To NE',
         ptApplyStu: 'Application To {ne}',
+        ptApplyStuTip: 'Confirm that you want to initiate a Configure Application to {ne} request to the teacher?',
         ptApplyStuRack: 'Return Request',
         ptApplyStuNE: 'Application Request',
       },
diff --git a/practical_training/i18n/locales/zh-CN.ts b/practical_training/i18n/locales/zh-CN.ts
index 0a3a3561..289cfecc 100644
--- a/practical_training/i18n/locales/zh-CN.ts
+++ b/practical_training/i18n/locales/zh-CN.ts
@@ -514,13 +514,17 @@ export default {
         ptDiffRest: '还原此版本',
         ptHistory: '历史记录',
         ptReset: '重置为示例',
+        ptResetTip: '确认要重置为示例配置吗？',
         ptLoad: '载入当前网元配置',
+        ptLoadTip: '确认要载入当前网元配置吗？',
         ptExport: "导出Excel",
-        ptExportTip: "导出网元配置数据到Excel文件中",
+        ptExportTip: "确认要导出网元配置数据到Excel文件中吗？",
+        ptExportAll: "导出所有学生配置",
         ptApplyShow: '查看学生',
         ptApply: '申请',
         ptApplyNE: '应用配置到网元',
         ptApplyStu: '申请配置应用到 {ne}',
+        ptApplyStuTip: '确认要向教师发起配置应用到 {ne} 的申请吗？',
         ptApplyStuRack: '退回该学生配置',
         ptApplyStuNE: '应用该学生配置',
       },
diff --git a/practical_training/views/configManage/configParamTreeTable/hooks/usePtOptions.ts b/practical_training/views/configManage/configParamTreeTable/hooks/usePtOptions.ts
index c2d7d464..f10a98dc 100644
--- a/practical_training/views/configManage/configParamTreeTable/hooks/usePtOptions.ts
+++ b/practical_training/views/configManage/configParamTreeTable/hooks/usePtOptions.ts
@@ -5,9 +5,9 @@ import {
   updatePtNeConfigApply,
 } from '@/api/pt/neConfigApply';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { hasRoles } from '@/plugins/auth-user';
+import { Modal } from 'ant-design-vue/es';
 import { message } from 'ant-design-vue/lib';
-import { computed, onMounted, reactive } from 'vue';
+import { computed, reactive } from 'vue';
 
 /**
  * 实训教学函数
@@ -22,48 +22,60 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
   });
   /**（管理员）保存网元下所有配置为示例配置 */
   function ptConfigSave(neType: string) {
-    ptConfigState.saveLoading = true;
-    ptSaveAsDefault(neType, '001')
-      .then(res => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
-            content: t('common.operateOk'),
-            duration: 3,
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: t('views.configManage.configParamForm.ptLoadTip'),
+      onOk() {
+        ptConfigState.saveLoading = true;
+        ptSaveAsDefault(neType, '001')
+          .then(res => {
+            if (res.code === RESULT_CODE_SUCCESS) {
+              message.success({
+                content: t('common.operateOk'),
+                duration: 3,
+              });
+            } else {
+              message.error({
+                content: `${res.msg}`,
+                duration: 3,
+              });
+            }
+          })
+          .finally(() => {
+            ptConfigState.saveLoading = false;
+            fnActiveConfigNode('#');
           });
-        } else {
-          message.error({
-            content: `${res.msg}`,
-            duration: 3,
-          });
-        }
-      })
-      .finally(() => {
-        ptConfigState.saveLoading = false;
-        fnActiveConfigNode('#');
-      });
+      },
+    });
   }
 
   /**重置网元下所有配置 */
   function ptConfigReset(neType: string) {
-    ptConfigState.restLoading = true;
-    ptResetAsDefault(neType)
-      .then(res => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
-            content: t('common.operateOk'),
-            duration: 3,
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: t('views.configManage.configParamForm.ptResetTip'),
+      onOk() {
+        ptConfigState.restLoading = true;
+        ptResetAsDefault(neType)
+          .then(res => {
+            if (res.code === RESULT_CODE_SUCCESS) {
+              message.success({
+                content: t('common.operateOk'),
+                duration: 3,
+              });
+            } else {
+              message.error({
+                content: `${res.msg}`,
+                duration: 3,
+              });
+            }
+          })
+          .finally(() => {
+            ptConfigState.restLoading = false;
+            fnActiveConfigNode('#');
           });
-        } else {
-          message.error({
-            content: `${res.msg}`,
-            duration: 3,
-          });
-        }
-      })
-      .finally(() => {
-        ptConfigState.restLoading = false;
-        fnActiveConfigNode('#');
-      });
+      },
+    });
   }
 
   /**配置下方应用(学生)申请撤回和(管理/教师)应用退回 */
@@ -97,33 +109,42 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
       result = stuPtNeConfigApply({ neType, status });
     }
     if (!result) return;
-    ptConfigState.applyLoading = true;
-    result
-      .then((res: any) => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
-            content: t('common.operateOk'),
-            duration: 3,
-          });
-          // 教师修改学生时改变状态
-          if (student) {
-            const item = classState.studentOptionsDef.find(
-              s => s.value === classState.student
-            );
-            if (item) {
-              item.applyStatus = status;
+
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: t('views.configManage.configParamForm.ptApplyStuTip', {
+        ne: neType,
+      }),
+      onOk() {
+        ptConfigState.applyLoading = true;
+        result
+          .then((res: any) => {
+            if (res.code === RESULT_CODE_SUCCESS) {
+              message.success({
+                content: t('common.operateOk'),
+                duration: 3,
+              });
+              // 教师修改学生时改变状态
+              if (student) {
+                const item = classState.studentOptionsDef.find(
+                  s => s.value === classState.student
+                );
+                if (item) {
+                  item.applyStatus = status;
+                }
+              }
+            } else {
+              message.error({
+                content: `${res.msg}`,
+                duration: 3,
+              });
             }
-          }
-        } else {
-          message.error({
-            content: `${res.msg}`,
-            duration: 3,
+          })
+          .finally(() => {
+            ptConfigState.applyLoading = false;
           });
-        }
-      })
-      .finally(() => {
-        ptConfigState.applyLoading = false;
-      });
+      },
+    });
   }
 
   const classState = reactive<{
@@ -148,13 +169,6 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
     studentOptionsDef: [],
   });
 
-  // 仅教师加载
-  if (hasRoles(['teacher'])) {
-    onMounted(() => {
-      classStudents(); // 初始学生列表
-    });
-  }
-
   /**学生选择搜索 */
   function studentChange(v: any) {
     if (!v) {
@@ -166,7 +180,7 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
   let timeout: any;
 
   /**学生选择搜索 */
-  function studentSearch(val: string) {
+  function studentSearch(neType: string, val: string) {
     if (timeout) {
       clearTimeout(timeout);
       timeout = null;
@@ -175,12 +189,12 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
       Object.assign(classState.studentOptions, classState.studentOptionsDef);
       return;
     }
-    timeout = setTimeout(() => classStudents(val), 500);
+    timeout = setTimeout(() => classStudents(neType, val), 500);
   }
 
   /**班级学生列表 */
-  function classStudents(val?: string) {
-    getPtClassStudents({ userName: val }).then(res => {
+  function classStudents(neType: string, val?: string) {
+    getPtClassStudents({ neType, userName: val }).then(res => {
       classState.studentOptions = [];
       if (!Array.isArray(res.data) || res.data.length <= 0) {
         return;
@@ -221,6 +235,7 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
     ptConfigReset,
     ptConfigApply,
     classState,
+    classStudents,
     studentStatus,
     studentSearch,
     studentChange,
diff --git a/practical_training/views/configManage/configParamTreeTable/index.vue b/practical_training/views/configManage/configParamTreeTable/index.vue
index 5f96c062..5e7714c3 100644
--- a/practical_training/views/configManage/configParamTreeTable/index.vue
+++ b/practical_training/views/configManage/configParamTreeTable/index.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, toRaw, watch, defineAsyncComponent } from 'vue';
+import {
+  reactive,
+  ref,
+  onMounted,
+  toRaw,
+  watch,
+  defineAsyncComponent,
+} from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { ProModal } from 'antdv-pro-modal';
 import { message, Modal } from 'ant-design-vue/es';
@@ -18,8 +25,10 @@ import {
   getPtNeConfigData,
   ptContrastAsDefault,
   ptExport,
+  ptExportAll,
 } from '@/api/pt/neConfig';
-import { isSystemAdmin, hasRoles } from '@/plugins/auth-user';const neInfoStore = useNeInfoStore();
+import { isSystemAdmin, hasRoles } from '@/plugins/auth-user';
+const neInfoStore = useNeInfoStore();
 import saveAs from 'file-saver';
 const { t } = useI18n();
 const { ruleVerification, smfByUPFIdLoadData, smfByUPFIdOptions } = useOptions({
@@ -232,35 +241,42 @@ function fnGetNeConfig() {
 
   treeState.loading = true;
   // 获取数据
-  getAllNeConfig(neType).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-      const arr = [];
-      for (const item of res.data) {
-        let paramPerms: string[] = [];
-        if (item.paramPerms) {
-          paramPerms = item.paramPerms.split(',');
-        } else {
-          paramPerms = ['post', 'put', 'delete'];
+  getAllNeConfig(neType)
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        const arr = [];
+        for (const item of res.data) {
+          let paramPerms: string[] = [];
+          if (item.paramPerms) {
+            paramPerms = item.paramPerms.split(',');
+          } else {
+            paramPerms = ['post', 'put', 'delete'];
+          }
+          arr.push({
+            ...item,
+            children: undefined,
+            title: item.paramDisplay,
+            key: item.paramName,
+            paramPerms,
+          });
+        }
+        treeState.data = arr;
+        treeState.loading = false;
+        // 取首个tag
+        if (res.data.length > 0) {
+          const item = JSON.parse(JSON.stringify(treeState.data[0]));
+          treeState.selectNode = item;
+          treeState.selectLoading = false;
+          fnActiveConfigNode(item.key);
         }
-        arr.push({
-          ...item,
-          children: undefined,
-          title: item.paramDisplay,
-          key: item.paramName,
-          paramPerms,
-        });
       }
-      treeState.data = arr;
-      treeState.loading = false;
-      // 取首个tag
-      if (res.data.length > 0) {
-        const item = JSON.parse(JSON.stringify(treeState.data[0]));
-        treeState.selectNode = item;
-        treeState.selectLoading = false;
-        fnActiveConfigNode(item.key);
+    })
+    .finally(() => {
+      // 仅教师加载
+      if (hasRoles(['teacher'])) {
+        classStudents(neType);
       }
-    }
-  });
+    });
 }
 
 /**对话框对象信息状态类型 */
@@ -344,6 +360,7 @@ const {
   studentStatus,
   studentSearch,
   studentChange,
+  classStudents,
 } = usePtOptions({ t, fnActiveConfigNode });
 
 const { tablePagination, listState, listEdit, listEditClose, listEditOk } =
@@ -450,6 +467,35 @@ function fnDataExport() {
   });
 }
 
+// 数据导出Excel
+function fnDataExportAll() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.configManage.configParamForm.ptExportTip'),
+    onOk() {
+      const hide = message.loading(t('common.loading'), 0);
+      ptExportAll()
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.operateOk'),
+              duration: 2,
+            });
+            saveAs(res.data, `students_config_data_${Date.now()}.zip`);
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 2,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+        });
+    },
+  });
+}
+
 onMounted(() => {
   // 获取网元网元列表
   neInfoStore.fnNelist().then(res => {
@@ -500,7 +546,7 @@ onMounted(() => {
         <a-col :lg="8" :md="12" :xs="24" v-roles:has="['teacher']">
           <a-form-item
             :label="t('views.configManage.configParamForm.ptApplyShow')"
-            name="neType "
+            name="student "
           >
             <a-select
               v-model:value="classState.student"
@@ -512,7 +558,7 @@ onMounted(() => {
               :filter-option="false"
               :not-found-content="null"
               :options="classState.studentOptions"
-              @search="studentSearch"
+              @search="(v:any)=> studentSearch(treeState.neType, v)"
               @change="studentChange"
             >
               <template #option="{ value, label, applyStatus }">
@@ -586,6 +632,9 @@ onMounted(() => {
               <a-button @click="fnDataExport()" v-roles:has="['teacher']">
                 {{ t('views.configManage.configParamForm.ptExport') }}
               </a-button>
+              <a-button @click="fnDataExportAll()" v-roles:has="['teacher']">
+                {{ t('views.configManage.configParamForm.ptExportAll') }}
+              </a-button>
 
               <!-- 学生 -->
               <a-button
diff --git a/practical_training/views/monitor/topologyArchitecture/index.vue b/practical_training/views/monitor/topologyArchitecture/index.vue
index c09143a6..456e2537 100644
--- a/practical_training/views/monitor/topologyArchitecture/index.vue
+++ b/practical_training/views/monitor/topologyArchitecture/index.vue
@@ -1,714 +1,554 @@
 <script setup lang="ts">
-import { reactive, onMounted, toRaw, computed } from 'vue';
+import { reactive, onMounted, ref, onBeforeUnmount } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { ProModal } from 'antdv-pro-modal';
-import { Form, 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 { parseDateToStr } from '@/utils/date-utils';
-import useDictStore from '@/store/modules/dict';
-import useNeInfoStore from '@/store/modules/neinfo';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import useI18n from '@/hooks/useI18n';
 import {
-  getPtNeConfigApplyList,
-  stuPtNeConfigApply,
-  updatePtNeConfigApply,
-} from '@/api/pt/neConfigApply';
+  RESULT_CODE_ERROR,
+  RESULT_CODE_SUCCESS,
+} from '@/constants/result-constants';
+import { listAllNeInfo } from '@/api/ne/neInfo';
+import { message } from 'ant-design-vue/es';
+import { getGraphData } from '@/api/monitor/topology';
+import { parseDateToStr } from '@/utils/date-utils';
+import { Graph, GraphData, Menu, Tooltip } from '@antv/g6';
+import {
+  edgeCubicAnimateCircleMove,
+  edgeCubicAnimateLineDash,
+  edgeLineAnimateState,
+} from '../topologyBuild/hooks/registerEdge';
+import {
+  nodeCircleAnimateShapeR,
+  nodeCircleAnimateShapeStroke,
+  nodeImageAnimateState,
+  nodeRectAnimateState,
+} from '../topologyBuild/hooks/registerNode';
+import useNeOptions from '@/views/ne/neInfo/hooks/useNeOptions';
+import useI18n from '@/hooks/useI18n';
+import { OptionsType, WS } from '@/plugins/ws-websocket';
 import { hasRoles } from '@/plugins/auth-user';
+import { parseBasePath } from '@/plugins/file-static-url';
 const { t } = useI18n();
-const { getDict } = useDictStore();
-const neInfoStore = useNeInfoStore();
+const { fnNeRestart, fnNeStop, fnNeLogFile } = useNeOptions();
+const ws = new WS();
 
-/**字典数据 */
-let dict: {
-  /**配置申请应用状态 */
-  ptConfigApplyStatus: DictType[];
-} = reactive({
-  ptConfigApplyStatus: [],
+/**图DOM节点实例对象 */
+const graphG6Dom = ref<HTMLElement | undefined>(undefined);
+
+/**图状态 */
+const graphState = reactive<Record<string, any>>({
+  /**当前图组名 */
+  group: '5GC System Architecture',
+  /**图数据 */
+  data: {
+    combos: [],
+    edges: [],
+    nodes: [],
+  },
 });
 
-/**查询参数 */
-let queryParams = reactive({
-  /**网元类型 */
-  neType: '',
-  /**申请人 */
-  createBy: '',
-  /**状态 */
-  status: undefined,
-  /**当前页数 */
-  pageNum: 1,
-  /**每页条数 */
-  pageSize: 20,
-});
-
-/**查询参数重置 */
-function fnQueryReset() {
-  queryParams = Object.assign(queryParams, {
-    neType: '',
-    createBy: '',
-    status: undefined,
-    pageNum: 1,
-    pageSize: 20,
-  });
-  tablePagination.current = 1;
-  tablePagination.pageSize = 20;
-  fnGetList();
-}
-
-/**表格状态类型 */
-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: 'center',
-    width: 100,
-  },
-  {
-    title: t('views.ne.common.neType'),
-    dataIndex: 'neType',
-    align: 'left',
-    width: 100,
-  },
-  {
-    title: '申请人',
-    dataIndex: 'createBy',
-    align: 'left',
-    width: 120,
-  },
-  {
-    title: '申请时间',
-    dataIndex: 'createTime',
-    align: 'left',
-    width: 150,
-    customRender(opt) {
-      if (+opt.value <= 0) return '';
-      return parseDateToStr(+opt.value);
-    },
-  },
-  {
-    title: '状态',
-    dataIndex: 'status',
-    key: 'status',
-    align: 'left',
-    width: 100,
-  },
-  {
-    title: '处理人',
-    dataIndex: 'updateBy',
-    align: 'left',
-    width: 120,
-  },
-  {
-    title: '处理时间',
-    dataIndex: 'updateTime',
-    align: 'left',
-    width: 150,
-    customRender(opt) {
-      if (+opt.value <= 0) return '';
-      return parseDateToStr(+opt.value);
-    },
-  },
-  {
-    title: t('common.operate'),
-    key: 'id',
-    align: 'left',
-  },
+/**非网元元素 */
+const notNeNodes = [
+  '5GC',
+  'DN',
+  'UE',
+  'Base',
+  'lan',
+  'lan1',
+  'lan2',
+  'lan3',
+  'lan4',
+  'lan5',
+  'lan6',
+  'lan7',
+  'LAN',
+  'NR',
 ];
 
-/**表格分页器参数 */
-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: total }),
-  onChange: (page: number, pageSize: number) => {
-    tablePagination.current = page;
-    tablePagination.pageSize = pageSize;
-    queryParams.pageNum = page;
-    queryParams.pageSize = pageSize;
-    fnGetList();
+/**图实例对象 */
+const graphG6 = ref<any>(null);
+
+/**图节点右击菜单 */
+const graphNodeMenu = new Menu({
+  offsetX: 6,
+  offseY: 10,
+  itemTypes: ['node'],
+  getContent(evt) {
+    if (!evt) return t('views.monitor.topologyBuild.graphNotInfo');
+    const { id, label, neState }: any = evt.item?.getModel();
+    if (notNeNodes.includes(id)) {
+      return `<div><span>${label || id}</span></div>`;
+    }
+    if (!neState) {
+      return `<div><span>${label || id}</span></div>`;
+    }
+    if (hasRoles(['student'])) {
+      return 'Student';
+    }
+    return `
+    <div
+      style="
+        display: flex;
+        flex-direction: column;
+        width: 140px;
+      "
+    >
+      <h3 style="margin-bottom: 8px">
+      ${t('views.monitor.topology.name')}:
+      ${neState.neName ?? '--'}
+      </h3>
+      <div id="restart" style="cursor: pointer; margin-bottom: 4px">
+        > ${t('views.ne.common.restart')}
+      </div>
+      <div id="stop" style="cursor: pointer; margin-bottom: 4px;">
+        > ${t('views.ne.common.stop')}
+      </div>
+      <div id="log" style="cursor: pointer; margin-bottom: 4px;">
+        > ${t('views.ne.common.log')}
+      </div>
+    </div>
+    `;
+  },
+  handleMenuClick(target, item) {
+    const { neInfo }: any = item?.getModel();
+    const { neName, neType, neId } = neInfo;
+    const targetId = target.id;
+    switch (targetId) {
+      case 'restart':
+        fnNeRestart({ neName, neType, neId });
+        break;
+      case 'stop':
+        fnNeStop({ neName, neType, neId });
+        break;
+      case 'log':
+        fnNeLogFile({ neType, neId });
+        break;
+    }
   },
 });
 
-/**表格紧凑型变更操作 */
-function fnTableSize({ key }: MenuInfo) {
-  tableState.size = key as SizeType;
-}
-
-/**表格多选 */
-function fnTableSelectedRowKeys(keys: (string | number)[], infos: any) {
-  const arr = [];
-  for (const item of infos) {
-    if (item.status === '0') {
-      arr.push(item.id);
+/**图节点展示 */
+const graphNodeTooltip = new Tooltip({
+  offsetX: 10,
+  offsetY: 20,
+  getContent(evt) {
+    if (!evt) return t('views.monitor.topologyBuild.graphNotInfo');
+    const { id, label, neState }: any = evt.item?.getModel();
+    if (notNeNodes.includes(id)) {
+      return `<div><span>${label || id}</span></div>`;
     }
-  }
-  tableState.selectedRowKeys = arr;
-}
-
-/**查询列表, pageNum初始页数 */
-function fnGetList(pageNum?: number) {
-  if (tableState.loading) return;
-  tableState.loading = true;
-  if (pageNum) {
-    queryParams.pageNum = pageNum;
-  }
-  getPtNeConfigApplyList(toRaw(queryParams)).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS) {
-      // 取消勾选
-      if (tableState.selectedRowKeys.length > 0) {
-        tableState.selectedRowKeys = [];
-      }
-      tablePagination.total = res.total;
-      tableState.data = res.rows;
-      if (
-        tablePagination.total <=
-          (queryParams.pageNum - 1) * tablePagination.pageSize &&
-        queryParams.pageNum !== 1
-      ) {
-        tableState.loading = false;
-        fnGetList(queryParams.pageNum - 1);
-      }
+    if (!neState) {
+      return `<div><span>${label || id}</span></div>`;
     }
-    tableState.loading = false;
-  });
-}
-
-/**对话框对象信息状态类型 */
-type ModalStateType = {
-  /**详情框是否显示 */
-  openByView: boolean;
-  /**新增框或修改框是否显示 */
-  openByEdit: boolean;
-  /**标题 */
-  title: string;
-  /**表单数据 */
-  from: Record<string, any>;
-  /**确定按钮 loading */
-  confirmLoading: boolean;
-  /**cron生成框是否显示 */
-  openByCron: boolean;
-};
-
-/**对话框对象信息状态 */
-let modalState: ModalStateType = reactive({
-  openByView: false,
-  openByEdit: false,
-  title: '任务',
-  from: {
-    id: undefined,
-    createBy: '',
-    createTime: 0,
-    updateBy: '',
-    updateTime: 0,
-    neType: 'MME',
-    status: '0',
-    backInfo: '',
+    let notStudentInfo = '';
+    if (hasRoles(['teacher', 'admin'])) {
+      notStudentInfo = `
+        <div><strong>${t('views.monitor.topology.serialNum')}：</strong><span>
+        ${neState.sn ?? '--'}
+        </span></div>
+        <div><strong>${t('views.monitor.topology.expiryDate')}：</strong><span>
+        ${neState.expire ?? '--'}
+        </span></div> `;
+    }
+    return `
+        <div
+        style="
+            display: flex;
+            flex-direction: column;
+            width: 200px;
+        "
+        >
+        <div><strong>${t('views.monitor.topology.state')}：</strong><span>
+        ${
+          neState.online
+            ? t('views.monitor.topology.normalcy')
+            : t('views.monitor.topology.exceptions')
+        }
+        </span></div>
+        <div><strong>${t('views.monitor.topology.refreshTime')}：</strong><span>
+        ${neState.refreshTime ?? '--'}
+        </span></div>
+        <div>========================</div>
+        <div><strong>ID：</strong><span>${neState.neId}</span></div>
+        <div><strong>${t('views.monitor.topology.name')}：</strong><span>
+        ${neState.neName ?? '--'}
+        </span></div>
+        <div><strong>IP：</strong><span>${neState.neIP}</span></div>
+        <div><strong>${t('views.monitor.topology.version')}：</strong><span>
+        ${neState.version ?? '--'}
+        </span></div>
+        ${notStudentInfo}
+        </div>
+        `;
   },
-  confirmLoading: false,
-  openByCron: false,
+  itemTypes: ['node'],
 });
 
-/**对话框内表单属性和校验规则 */
-const modalStateFrom = Form.useForm(
-  modalState.from,
-  reactive({
-    status: [
-      {
-        required: true,
-        message: t('common.selectPlease'),
+/**注册自定义边或节点 */
+function registerEdgeNode() {
+  // 边
+  edgeCubicAnimateLineDash();
+  edgeCubicAnimateCircleMove();
+  edgeLineAnimateState();
+  // 节点
+  nodeCircleAnimateShapeR();
+  nodeCircleAnimateShapeStroke();
+  nodeRectAnimateState();
+  nodeImageAnimateState();
+}
+
+/**图数据渲染 */
+function handleRanderGraph(
+  container: HTMLElement | undefined,
+  data: GraphData
+) {
+  if (!container) return;
+  const { clientHeight, clientWidth } = container;
+
+  // 注册自定义边或节点
+  registerEdgeNode();
+
+  const graph = new Graph({
+    container: container,
+    width: clientWidth,
+    height: clientHeight,
+    fitCenter: true,
+    fitView: true,
+    fitViewPadding: [40],
+    autoPaint: true,
+    modes: {
+      default: [
+        'drag-combo',
+        'drag-canvas',
+        'zoom-canvas',
+        'collapse-expand-combo',
+      ],
+    },
+    groupByTypes: false,
+    nodeStateStyles: {
+      selected: {
+        fill: 'transparent',
       },
-    ],
-  })
-);
+    },
+    plugins: [graphNodeMenu, graphNodeTooltip],
+    animate: true, // 是否使用动画过度，默认为 false
+    animateCfg: {
+      duration: 500, // Number，一次动画的时长
+      easing: 'linearEasing', // String，动画函数
+    },
+  });
+  graph.data(data);
+  graph.render();
 
-/**
- * 对话框弹出显示为 查看
- * @param jobId 任务id
- */
-function fnModalVisibleByVive(row: Record<string, any>) {
-  modalState.from = Object.assign(modalState.from, row);
-  modalState.title = '查看';
-  modalState.openByView = true;
+  graphG6.value = graph;
+
+  // 创建 ResizeObserver 实例
+  var observer = new ResizeObserver(function (entries) {
+    // 当元素大小发生变化时触发回调函数
+    entries.forEach(function (entry) {
+      if (!graphG6.value) {
+        return;
+      }
+      graphG6.value.changeSize(
+        entry.contentRect.width,
+        entry.contentRect.height - 30
+      );
+      graphG6.value.fitCenter();
+    });
+  });
+  // 监听元素大小变化
+  observer.observe(container);
+
+  return graph;
 }
 
 /**
- * 对话框弹出显示为 编辑
- * @param jobId 任务id
+ * 获取图组数据渲染到画布
+ * @param reload 是否重载数据
  */
-function fnModalVisibleByEdit(row: Record<string, any>) {
-  Object.assign(modalState.from, row);
-  modalState.from.status = '3';
-  modalState.title = '编辑状态';
-  modalState.openByEdit = true;
-}
-
-/**
- * 对话框弹出确认执行函数
- * 进行表达规则校验
- */
-function fnModalOk() {
-  modalStateFrom
-    .validate()
-    .then(() => {
-      modalState.confirmLoading = true;
-      const from = toRaw(modalState.from);
-      updatePtNeConfigApply({
-        applyId: from.id,
-        neType: from.neType,
-        status: from.status,
-        backInfo: from.backInfo,
-      })
-        .then(res => {
-          if (res.code === RESULT_CODE_SUCCESS) {
-            message.success({
-              content: t('common.operateOk'),
-              duration: 3,
-            });
-
-            modalState.openByEdit = false;
-            modalStateFrom.resetFields();
-            fnGetList();
-          } else {
-            message.error({
-              content: `${res.msg}`,
-              duration: 3,
-            });
-          }
-        })
-        .finally(() => {
-          modalState.confirmLoading = false;
+function fnGraphDataLoad(reload: boolean = false) {
+  Promise.all([
+    getGraphData(graphState.group),
+    listAllNeInfo({
+      bandStatus: false,
+    }),
+  ])
+    .then(resArr => {
+      const graphRes = resArr[0];
+      const neRes = resArr[1];
+      if (
+        graphRes.code === RESULT_CODE_SUCCESS &&
+        Array.isArray(graphRes.data.nodes) &&
+        graphRes.data.nodes.length > 0 &&
+        neRes.code === RESULT_CODE_SUCCESS &&
+        Array.isArray(neRes.data) &&
+        neRes.data.length > 0
+      ) {
+        return {
+          graphData: graphRes.data,
+          neList: neRes.data,
+        };
+      } else {
+        message.warning({
+          content: t('views.monitor.topology.noData'),
+          duration: 5,
         });
+      }
     })
-    .catch(e => {
-      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    .then(res => {
+      if (!res) return;
+      const { combos, edges, nodes } = res.graphData;
+
+      // 节点过滤
+      const nf: Record<string, any>[] = nodes.filter(
+        (node: Record<string, any>) => {
+          Reflect.set(node, 'neState', { online: false });
+          // 图片路径处理
+          if (node.img) node.img = parseBasePath(node.img);
+          if (node.icon.show && node.icon?.img)
+            node.icon.img = parseBasePath(node.icon.img);
+          // 遍历是否有网元数据
+          const nodeID: string = node.id;
+          const hasNe = res.neList.some(ne => {
+            Reflect.set(node, 'neInfo', ne.neType === nodeID ? ne : {});
+            return ne.neType === nodeID;
+          });
+          if (hasNe) {
+            return true;
+          }
+          if (notNeNodes.includes(nodeID)) {
+            return true;
+          }
+          return false;
+        }
+      );
+
+      // 边过滤
+      const ef: Record<string, any>[] = edges.filter(
+        (edge: Record<string, any>) => {
+          const edgeSource: string = edge.source;
+          const edgeTarget: string = edge.target;
+          const hasNeS = nf.some(n => n.id === edgeSource);
+          const hasNeT = nf.some(n => n.id === edgeTarget);
+          // console.log(hasNeS, edgeSource, hasNeT, edgeTarget);
+          if (hasNeS && hasNeT) {
+            return true;
+          }
+          if (hasNeS && notNeNodes.includes(edgeTarget)) {
+            return true;
+          }
+          if (hasNeT && notNeNodes.includes(edgeSource)) {
+            return true;
+          }
+          return false;
+        }
+      );
+
+      // 分组过滤
+      combos.forEach((combo: Record<string, any>) => {
+        const comboChildren: Record<string, any>[] = combo.children;
+        combo.children = comboChildren.filter(c => nf.some(n => n.id === c.id));
+        return combo;
+      });
+
+      // 图数据
+      graphState.data = { combos, edges: ef, nodes: nf };
+    })
+    .finally(() => {
+      if (graphState.data.length < 0) return;
+      // 重载数据
+      if (reload) {
+        graphG6.value.read(graphState.data);
+      } else {
+        handleRanderGraph(graphG6Dom.value, graphState.data);
+      }
+      clearInterval(interval10s.value);
+      interval10s.value = null;
+      fnGetState();
+      interval10s.value = setInterval(async () => {
+        if (!interval10s.value) return;
+        fnGetState(); // 获取网元状态
+      }, 20_000);
     });
 }
 
-/**
- * 对话框弹出关闭执行函数
- * 进行表达规则校验
- */
-function fnModalCancel() {
-  modalState.openByEdit = false;
-  modalState.openByView = false;
-  modalState.from = {};
+/**网元状态调度器 */
+const interval10s = ref<any>(null);
+
+/**查询网元状态 */
+function fnGetState() {
+  // 获取节点状态
+  for (const node of graphState.data.nodes) {
+    if (notNeNodes.includes(node.id)) continue;
+    const { neType, neId } = node.neInfo;
+    if (!neType || !neId) continue;
+    ws.send({
+      requestId: `${neType}_${neId}`,
+      type: 'ne_state',
+      data: {
+        neType: neType,
+        neId: neId,
+      },
+    });
+  }
 }
 
-/**批量退回 */
-function fnRecordBack(row?: Record<string, any>) {
-  Modal.confirm({
-    title: t('common.tipTitle'),
-    content: row
-      ? '确认要撤回配置应用申请吗？'
-      : '确认要批量退回学生的配置应用申请吗？',
-    onOk() {
-      let result: any;
-      if (row) {
-        result = stuPtNeConfigApply({ neType: row.neType, status: '1' });
-      } else {
-        result = updatePtNeConfigApply({
-          status: '3',
-          backId: tableState.selectedRowKeys.join(','),
-          backInfo: '请重新检查配置',
+/**接收数据后回调 */
+function wsError(ev: any) {
+  // 接收数据后回调
+  console.error(ev);
+}
+
+/**接收数据后回调 */
+function wsMessage(res: Record<string, any>) {
+  const { code, requestId, data } = res;
+  if (code === RESULT_CODE_ERROR) {
+    console.warn(res.msg);
+    return;
+  }
+  if (!requestId) return;
+  const [neType, neId] = requestId.split('_');
+  const { combos, edges, nodes } = graphState.data;
+  const node = nodes.find((item: Record<string, any>) => item.id === neType);
+
+  // 更新网元状态
+  const newNeState = Object.assign(node.neState, data, {
+    refreshTime: parseDateToStr(data.refreshTime, 'HH:mm:ss'),
+    online: !!data.cpu,
+  });
+
+  // 通过 ID 查询节点实例
+  const item = graphG6.value.findById(node.id);
+  if (item) {
+    const stateColor = newNeState.online ? '#52c41a' : '#f5222d'; // 状态颜色
+    // 图片类型不能填充
+    if (node.type.startsWith('image')) {
+      // 更新节点
+      if (node.label !== newNeState.neName) {
+        graphG6.value.updateItem(item, {
+          label: newNeState.neName,
         });
       }
-      result.then((res: any) => {
-        fnGetList();
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
-            content: t('common.operateOk'),
-            duration: 3,
-          });
-        } else {
-          message.error({
-            content: `${res.msg}`,
-            duration: 3,
-          });
-        }
+      // 设置状态
+      graphG6.value.setItemState(item, 'top-right-dot', stateColor);
+    } else {
+      // 更新节点
+      graphG6.value.updateItem(item, {
+        label: newNeState.neName,
+        // neState: newNeState,
+        style: {
+          fill: stateColor, // 填充色
+          stroke: stateColor, // 填充色
+        },
+        // labelCfg: {
+        //   style: {
+        //     fill: '#ffffff', // 标签文本色
+        //   },
+        // },
       });
-    },
-  });
+      // 设置状态
+      graphG6.value.setItemState(item, 'stroke', newNeState.online);
+    }
+  }
+
+  // 设置边状态
+  for (const edge of edges) {
+    const edgeSource: string = edge.source;
+    const edgeTarget: string = edge.target;
+    const neS = nodes.find((n: any) => n.id === edgeSource);
+    const neT = nodes.find((n: any) => n.id === edgeTarget);
+    // console.log(neS, edgeSource, neT, edgeTarget);
+
+    if (neS && neT) {
+      // 通过 ID 查询节点实例
+      // const item = graphG6.value.findById(edge.id);
+      // console.log(
+      //   `${edgeSource} - ${edgeTarget}`,
+      //   neS.neState.online && neT.neState.online
+      // );
+      // const stateColor = neS.neState.online && neT.neState.online ? '#000000' : '#ff4d4f'; // 状态颜色
+      // 更新边
+      // graphG6.value.updateItem(item, {
+      //   label: `${edgeSource} - ${edgeTarget}`,
+      //   style: {
+      //     stroke: stateColor, // 填充色
+      //   },
+      //   labelCfg: {
+      //     style: {
+      //       fill: '#ffffff', // 标签文本色
+      //     },
+      //   },
+      // });
+      // 设置状态
+      graphG6.value.setItemState(
+        edge.id,
+        'circle-move',
+        neS.neState.online && neT.neState.online
+      );
+    }
+    if (neS && notNeNodes.includes(edgeTarget)) {
+      graphG6.value.setItemState(edge.id, 'line-dash', neS.neState.online);
+    }
+    if (neT && notNeNodes.includes(edgeSource)) {
+      graphG6.value.setItemState(edge.id, 'line-dash', neT.neState.online);
+    }
+  }
 }
 
-/**应用状态 */
-const applyStatus = computed(() => {
-  if (hasRoles(['student'])) {
-    return dict.ptConfigApplyStatus.filter(s => ['0', '1'].includes(s.value));
-  }
-  let data = dict.ptConfigApplyStatus;
-  if (modalState.openByEdit && modalState.from.id) {
-    data = dict.ptConfigApplyStatus.filter(s => ['2', '3'].includes(s.value));
-  }
-  return data;
+onMounted(() => {
+  fnGraphDataLoad(false);
+
+  // 建立链接
+  const options: OptionsType = {
+    url: '/ws',
+    onmessage: wsMessage,
+    onerror: wsError,
+  };
+  ws.connect(options);
 });
 
-onMounted(() => {
-  // 初始字典数据
-  Promise.allSettled([getDict('pt_config_apply_status')]).then(resArr => {
-    if (resArr[0].status === 'fulfilled') {
-      dict.ptConfigApplyStatus = resArr[0].value;
-    }
-  });
-  // 获取网元列表
-  neInfoStore.fnNelist().finally(() => {
-    // 获取列表数据
-    fnGetList();
-  });
+onBeforeUnmount(() => {
+  ws.close();
+  clearInterval(interval10s.value);
+  interval10s.value = null;
 });
 </script>
 
 <template>
   <PageContainer>
     <a-card
-      v-show="tableState.seached"
       :bordered="false"
-      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
+      :body-style="{ marginBottom: '24px' }"
+      size="small"
     >
-      <!-- 表格搜索栏 -->
-      <a-form :model="queryParams" name="queryParams" layout="horizontal">
-        <a-row :gutter="16">
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.configManage.license.neType')"
-              name="neType "
-            >
-              <a-auto-complete
-                v-model:value="queryParams.neType"
-                :options="neInfoStore.getNeSelectOtions"
-                allow-clear
-                :placeholder="t('views.configManage.license.neTypePlease')"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item label="状态" name="status">
-              <a-select
-                v-model:value="queryParams.status"
-                allow-clear
-                :placeholder="t('common.selectPlease')"
-                :options="applyStatus"
-              >
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item>
-              <a-space :size="8">
-                <a-button type="primary" @click.prevent="fnGetList(1)">
-                  <template #icon><SearchOutlined /></template>
-                  {{ t('common.search') }}
-                </a-button>
-                <a-button type="default" @click.prevent="fnQueryReset">
-                  <template #icon><ClearOutlined /></template>
-                  {{ t('common.reset') }}
-                </a-button>
-              </a-space>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-    </a-card>
-
-    <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <div class="button-container">
-          <a-button
-            type="default"
-            danger
-            :disabled="tableState.selectedRowKeys.length <= 0"
-            @click.prevent="fnRecordBack()"
-            v-roles:has="['admin', 'teacher']"
-          >
-            <template #icon><DeleteOutlined /></template>
-            批量退回
-          </a-button>
-        </div>
+        <a-space :size="8" align="center">
+          <span>
+            {{ t('views.monitor.topologyBuild.graphGroup') }}：
+            {{ graphState.group }}
+          </span>
+        </a-space>
       </template>
-
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <div class="button-container">
-          <a-tooltip>
-            <template #title>{{ t('common.searchBarText') }}</template>
-            <a-switch
-              v-model:checked="tableState.seached"
-              :checked-children="t('common.switch.show')"
-              :un-checked-children="t('common.switch.hide')"
-              size="small"
-            />
-          </a-tooltip>
-          <a-tooltip>
-            <template #title>{{ t('common.reloadText') }}</template>
-            <a-button type="text" @click.prevent="fnGetList()">
-              <template #icon><ReloadOutlined /></template>
-            </a-button>
-          </a-tooltip>
-          <a-tooltip placement="topRight">
-            <template #title>{{ t('common.sizeText') }}</template>
-            <a-dropdown placement="bottomRight" trigger="click">
-              <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>
-        </div>
-      </template>
-
-      <!-- 表格列表 -->
-      <a-table
-        class="table"
-        row-key="id"
-        :columns="tableColumns"
-        :loading="tableState.loading"
-        :data-source="tableState.data"
-        :size="tableState.size"
-        :scroll="{ x: tableColumns.length * 120 }"
-        :pagination="tablePagination"
-        :row-selection="{
-          type: 'checkbox',
-          selectedRowKeys: tableState.selectedRowKeys,
-          onChange: fnTableSelectedRowKeys,
-        }"
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'status'">
-            <DictTag
-              :options="dict.ptConfigApplyStatus"
-              :value="record.status"
-            />
-          </template>
-          <template v-if="column.key === 'id'">
-            <a-space :size="8" align="center">
-              <a-tooltip>
-                <template #title>{{ t('common.viewText') }}</template>
-                <a-button
-                  type="link"
-                  @click.prevent="fnModalVisibleByVive(record)"
-                >
-                  <template #icon><ProfileOutlined /></template>
-                </a-button>
-              </a-tooltip>
-              <a-tooltip v-if="record.status === '0' && hasRoles(['student'])">
-                <template #title>撤回</template>
-                <a-button type="link" @click.prevent="fnRecordBack(record)">
-                  <template #icon><RollbackOutlined /></template>
-                </a-button>
-              </a-tooltip>
-              <a-tooltip
-                v-if="record.status === '0' && hasRoles(['admin', 'teacher'])"
-              >
-                <template #title>{{ t('common.editText') }}</template>
-                <a-button
-                  type="link"
-                  @click.prevent="fnModalVisibleByEdit(record)"
-                >
-                  <template #icon><FormOutlined /></template>
-                </a-button>
-              </a-tooltip>
-            </a-space>
-          </template>
-        </template>
-      </a-table>
-    </a-card>
-
-    <!-- 详情框 -->
-    <ProModal
-      :drag="true"
-      :width="800"
-      :open="modalState.openByView"
-      :title="modalState.title"
-      @cancel="fnModalCancel"
-    >
-      <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
-        <a-row>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item :label="t('views.ne.common.neType')" name="neType">
-              {{ modalState.from.neType }}
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="状态" name="status">
-              <DictTag
-                :options="dict.ptConfigApplyStatus"
-                :value="modalState.from.status"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="申请人" name="createBy">
-              {{ modalState.from.createBy }}
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="申请时间" name="createTime">
-              {{ parseDateToStr(+modalState.from.createTime) }}
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row v-if="modalState.from.status !== '0'">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="处理人" name="updateBy">
-              {{ modalState.from.updateBy }}
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="处理时间" name="updateTime">
-              {{ parseDateToStr(+modalState.from.updateTime) }}
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-form-item
-          v-if="modalState.from.status === '3'"
-          label="退回说明"
-          name="backInfo"
-          :label-col="{ span: 3 }"
-          :label-wrap="true"
+        <a-button
+          type="default"
+          size="small"
+          @click.prevent="fnGraphDataLoad(true)"
         >
-          {{ modalState.from.backInfo }}
-        </a-form-item>
-      </a-form>
-      <template #footer>
-        <a-button key="cancel" @click="fnModalCancel">
-          {{ t('common.close') }}
+          <template #icon><ReloadOutlined /></template>
+          {{ t('common.reloadText') }}
         </a-button>
       </template>
-    </ProModal>
 
-    <!-- 新增框或修改框 -->
-    <ProModal
-      :drag="true"
-      :width="800"
-      :open="modalState.openByEdit"
-      :title="modalState.title"
-      :confirm-loading="modalState.confirmLoading"
-      :destroyOnClose="true"
-      @ok="fnModalOk"
-      @cancel="fnModalCancel"
-    >
-      <a-form
-        name="modalStateFrom"
-        layout="horizontal"
-        :label-col="{ span: 6 }"
-        :label-wrap="true"
-      >
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item :label="t('views.ne.common.neType')" name="neType">
-              {{ modalState.from.neType }}
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="申请人" name="createBy">
-              {{ modalState.from.createBy }}
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="申请时间" name="createTime">
-              {{ parseDateToStr(+modalState.from.createTime) }}
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-form-item
-          label="状态"
-          name="status"
-          :label-col="{ span: 3 }"
-          :label-wrap="true"
-          v-bind="modalStateFrom.validateInfos.status"
-        >
-          <a-select
-            v-model:value="modalState.from.status"
-            :placeholder="t('common.selectPlease')"
-            :options="applyStatus"
-          >
-          </a-select>
-        </a-form-item>
-
-        <a-form-item
-          v-if="modalState.from.status === '3'"
-          label="退回说明"
-          name="backInfo"
-          :label-col="{ span: 3 }"
-          :label-wrap="true"
-        >
-          <a-textarea
-            v-model:value="modalState.from.backInfo"
-            :auto-size="{ minRows: 2, maxRows: 6 }"
-            :maxlength="400"
-            :placeholder="t('common.inputPlease')"
-          />
-        </a-form-item>
-      </a-form>
-    </ProModal>
+      <div ref="graphG6Dom" class="chart"></div>
+    </a-card>
   </PageContainer>
 </template>
 
 <style lang="less" scoped>
-.table :deep(.ant-pagination) {
-  padding: 0 24px;
+.chart {
+  width: 100%;
+  height: calc(100vh - 300px);
+  background-color: rgb(43, 47, 51);
 }
 </style>
diff --git a/src/api/pt/neConfig.ts b/src/api/pt/neConfig.ts
index 6e45d4d9..733ad021 100644
--- a/src/api/pt/neConfig.ts
+++ b/src/api/pt/neConfig.ts
@@ -44,7 +44,7 @@ export function ptContrastAsDefault(params: Record<string, any>) {
  * @param student 仅教师 student
  * @returns object
  */
-export function ptExport(student: string|undefined) {
+export function ptExport(student: string | undefined) {
   return request({
     url: `/pt/neConfigData/export`,
     method: 'get',
@@ -54,6 +54,19 @@ export function ptExport(student: string|undefined) {
   });
 }
 
+/**
+ * 配置数据导出Excel (仅教师全量)
+ * @returns object
+ */
+export function ptExportAll() {
+  return request({
+    url: `/pt/neConfigData/export-all`,
+    method: 'get',
+    responseType: 'blob',
+    timeout: 180_000,
+  });
+}
+
 /**
  * 网元参数配置信息
  * @param params 数据 {neType,paramName}
diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index 3cf352c9..44021817 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -514,13 +514,17 @@ export default {
         ptDiffRest: 'Restore this version',
         ptHistory: 'History',
         ptReset: 'Reset To Example',
+        ptResetTip: 'Confirmed to reset to the sample configuration?',
         ptLoad: 'Load Current Configuration',
+        ptLoadTip: 'Confirm that you want to load the current network element configuration?',
         ptExport: "Export Excel",
-        ptExportTip: "Exporting NE Configuration Data to an Excel file",
+        ptExportTip: "Confirm that you want to export the network element configuration data to an Excel file?",
+        ptExportAll: "导出所有学生配置",
         ptApplyShow: 'View Student',
         ptApply: 'request',
         ptApplyNE: 'Application To NE',
         ptApplyStu: 'Application To {ne}',
+        ptApplyStuTip: 'Confirm that you want to initiate a Configure Application to {ne} request to the teacher?',
         ptApplyStuRack: 'Return Request',
         ptApplyStuNE: 'Application Request',
       },
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 0a3a3561..289cfecc 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -514,13 +514,17 @@ export default {
         ptDiffRest: '还原此版本',
         ptHistory: '历史记录',
         ptReset: '重置为示例',
+        ptResetTip: '确认要重置为示例配置吗？',
         ptLoad: '载入当前网元配置',
+        ptLoadTip: '确认要载入当前网元配置吗？',
         ptExport: "导出Excel",
-        ptExportTip: "导出网元配置数据到Excel文件中",
+        ptExportTip: "确认要导出网元配置数据到Excel文件中吗？",
+        ptExportAll: "导出所有学生配置",
         ptApplyShow: '查看学生',
         ptApply: '申请',
         ptApplyNE: '应用配置到网元',
         ptApplyStu: '申请配置应用到 {ne}',
+        ptApplyStuTip: '确认要向教师发起配置应用到 {ne} 的申请吗？',
         ptApplyStuRack: '退回该学生配置',
         ptApplyStuNE: '应用该学生配置',
       },
diff --git a/src/views/configManage/configParamTreeTable/hooks/usePtOptions.ts b/src/views/configManage/configParamTreeTable/hooks/usePtOptions.ts
index c2d7d464..f10a98dc 100644
--- a/src/views/configManage/configParamTreeTable/hooks/usePtOptions.ts
+++ b/src/views/configManage/configParamTreeTable/hooks/usePtOptions.ts
@@ -5,9 +5,9 @@ import {
   updatePtNeConfigApply,
 } from '@/api/pt/neConfigApply';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { hasRoles } from '@/plugins/auth-user';
+import { Modal } from 'ant-design-vue/es';
 import { message } from 'ant-design-vue/lib';
-import { computed, onMounted, reactive } from 'vue';
+import { computed, reactive } from 'vue';
 
 /**
  * 实训教学函数
@@ -22,48 +22,60 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
   });
   /**（管理员）保存网元下所有配置为示例配置 */
   function ptConfigSave(neType: string) {
-    ptConfigState.saveLoading = true;
-    ptSaveAsDefault(neType, '001')
-      .then(res => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
-            content: t('common.operateOk'),
-            duration: 3,
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: t('views.configManage.configParamForm.ptLoadTip'),
+      onOk() {
+        ptConfigState.saveLoading = true;
+        ptSaveAsDefault(neType, '001')
+          .then(res => {
+            if (res.code === RESULT_CODE_SUCCESS) {
+              message.success({
+                content: t('common.operateOk'),
+                duration: 3,
+              });
+            } else {
+              message.error({
+                content: `${res.msg}`,
+                duration: 3,
+              });
+            }
+          })
+          .finally(() => {
+            ptConfigState.saveLoading = false;
+            fnActiveConfigNode('#');
           });
-        } else {
-          message.error({
-            content: `${res.msg}`,
-            duration: 3,
-          });
-        }
-      })
-      .finally(() => {
-        ptConfigState.saveLoading = false;
-        fnActiveConfigNode('#');
-      });
+      },
+    });
   }
 
   /**重置网元下所有配置 */
   function ptConfigReset(neType: string) {
-    ptConfigState.restLoading = true;
-    ptResetAsDefault(neType)
-      .then(res => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
-            content: t('common.operateOk'),
-            duration: 3,
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: t('views.configManage.configParamForm.ptResetTip'),
+      onOk() {
+        ptConfigState.restLoading = true;
+        ptResetAsDefault(neType)
+          .then(res => {
+            if (res.code === RESULT_CODE_SUCCESS) {
+              message.success({
+                content: t('common.operateOk'),
+                duration: 3,
+              });
+            } else {
+              message.error({
+                content: `${res.msg}`,
+                duration: 3,
+              });
+            }
+          })
+          .finally(() => {
+            ptConfigState.restLoading = false;
+            fnActiveConfigNode('#');
           });
-        } else {
-          message.error({
-            content: `${res.msg}`,
-            duration: 3,
-          });
-        }
-      })
-      .finally(() => {
-        ptConfigState.restLoading = false;
-        fnActiveConfigNode('#');
-      });
+      },
+    });
   }
 
   /**配置下方应用(学生)申请撤回和(管理/教师)应用退回 */
@@ -97,33 +109,42 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
       result = stuPtNeConfigApply({ neType, status });
     }
     if (!result) return;
-    ptConfigState.applyLoading = true;
-    result
-      .then((res: any) => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
-            content: t('common.operateOk'),
-            duration: 3,
-          });
-          // 教师修改学生时改变状态
-          if (student) {
-            const item = classState.studentOptionsDef.find(
-              s => s.value === classState.student
-            );
-            if (item) {
-              item.applyStatus = status;
+
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: t('views.configManage.configParamForm.ptApplyStuTip', {
+        ne: neType,
+      }),
+      onOk() {
+        ptConfigState.applyLoading = true;
+        result
+          .then((res: any) => {
+            if (res.code === RESULT_CODE_SUCCESS) {
+              message.success({
+                content: t('common.operateOk'),
+                duration: 3,
+              });
+              // 教师修改学生时改变状态
+              if (student) {
+                const item = classState.studentOptionsDef.find(
+                  s => s.value === classState.student
+                );
+                if (item) {
+                  item.applyStatus = status;
+                }
+              }
+            } else {
+              message.error({
+                content: `${res.msg}`,
+                duration: 3,
+              });
             }
-          }
-        } else {
-          message.error({
-            content: `${res.msg}`,
-            duration: 3,
+          })
+          .finally(() => {
+            ptConfigState.applyLoading = false;
           });
-        }
-      })
-      .finally(() => {
-        ptConfigState.applyLoading = false;
-      });
+      },
+    });
   }
 
   const classState = reactive<{
@@ -148,13 +169,6 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
     studentOptionsDef: [],
   });
 
-  // 仅教师加载
-  if (hasRoles(['teacher'])) {
-    onMounted(() => {
-      classStudents(); // 初始学生列表
-    });
-  }
-
   /**学生选择搜索 */
   function studentChange(v: any) {
     if (!v) {
@@ -166,7 +180,7 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
   let timeout: any;
 
   /**学生选择搜索 */
-  function studentSearch(val: string) {
+  function studentSearch(neType: string, val: string) {
     if (timeout) {
       clearTimeout(timeout);
       timeout = null;
@@ -175,12 +189,12 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
       Object.assign(classState.studentOptions, classState.studentOptionsDef);
       return;
     }
-    timeout = setTimeout(() => classStudents(val), 500);
+    timeout = setTimeout(() => classStudents(neType, val), 500);
   }
 
   /**班级学生列表 */
-  function classStudents(val?: string) {
-    getPtClassStudents({ userName: val }).then(res => {
+  function classStudents(neType: string, val?: string) {
+    getPtClassStudents({ neType, userName: val }).then(res => {
       classState.studentOptions = [];
       if (!Array.isArray(res.data) || res.data.length <= 0) {
         return;
@@ -221,6 +235,7 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
     ptConfigReset,
     ptConfigApply,
     classState,
+    classStudents,
     studentStatus,
     studentSearch,
     studentChange,
diff --git a/src/views/configManage/configParamTreeTable/index.vue b/src/views/configManage/configParamTreeTable/index.vue
index 5f96c062..5e7714c3 100644
--- a/src/views/configManage/configParamTreeTable/index.vue
+++ b/src/views/configManage/configParamTreeTable/index.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, toRaw, watch, defineAsyncComponent } from 'vue';
+import {
+  reactive,
+  ref,
+  onMounted,
+  toRaw,
+  watch,
+  defineAsyncComponent,
+} from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { ProModal } from 'antdv-pro-modal';
 import { message, Modal } from 'ant-design-vue/es';
@@ -18,8 +25,10 @@ import {
   getPtNeConfigData,
   ptContrastAsDefault,
   ptExport,
+  ptExportAll,
 } from '@/api/pt/neConfig';
-import { isSystemAdmin, hasRoles } from '@/plugins/auth-user';const neInfoStore = useNeInfoStore();
+import { isSystemAdmin, hasRoles } from '@/plugins/auth-user';
+const neInfoStore = useNeInfoStore();
 import saveAs from 'file-saver';
 const { t } = useI18n();
 const { ruleVerification, smfByUPFIdLoadData, smfByUPFIdOptions } = useOptions({
@@ -232,35 +241,42 @@ function fnGetNeConfig() {
 
   treeState.loading = true;
   // 获取数据
-  getAllNeConfig(neType).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-      const arr = [];
-      for (const item of res.data) {
-        let paramPerms: string[] = [];
-        if (item.paramPerms) {
-          paramPerms = item.paramPerms.split(',');
-        } else {
-          paramPerms = ['post', 'put', 'delete'];
+  getAllNeConfig(neType)
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        const arr = [];
+        for (const item of res.data) {
+          let paramPerms: string[] = [];
+          if (item.paramPerms) {
+            paramPerms = item.paramPerms.split(',');
+          } else {
+            paramPerms = ['post', 'put', 'delete'];
+          }
+          arr.push({
+            ...item,
+            children: undefined,
+            title: item.paramDisplay,
+            key: item.paramName,
+            paramPerms,
+          });
+        }
+        treeState.data = arr;
+        treeState.loading = false;
+        // 取首个tag
+        if (res.data.length > 0) {
+          const item = JSON.parse(JSON.stringify(treeState.data[0]));
+          treeState.selectNode = item;
+          treeState.selectLoading = false;
+          fnActiveConfigNode(item.key);
         }
-        arr.push({
-          ...item,
-          children: undefined,
-          title: item.paramDisplay,
-          key: item.paramName,
-          paramPerms,
-        });
       }
-      treeState.data = arr;
-      treeState.loading = false;
-      // 取首个tag
-      if (res.data.length > 0) {
-        const item = JSON.parse(JSON.stringify(treeState.data[0]));
-        treeState.selectNode = item;
-        treeState.selectLoading = false;
-        fnActiveConfigNode(item.key);
+    })
+    .finally(() => {
+      // 仅教师加载
+      if (hasRoles(['teacher'])) {
+        classStudents(neType);
       }
-    }
-  });
+    });
 }
 
 /**对话框对象信息状态类型 */
@@ -344,6 +360,7 @@ const {
   studentStatus,
   studentSearch,
   studentChange,
+  classStudents,
 } = usePtOptions({ t, fnActiveConfigNode });
 
 const { tablePagination, listState, listEdit, listEditClose, listEditOk } =
@@ -450,6 +467,35 @@ function fnDataExport() {
   });
 }
 
+// 数据导出Excel
+function fnDataExportAll() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.configManage.configParamForm.ptExportTip'),
+    onOk() {
+      const hide = message.loading(t('common.loading'), 0);
+      ptExportAll()
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.operateOk'),
+              duration: 2,
+            });
+            saveAs(res.data, `students_config_data_${Date.now()}.zip`);
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 2,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+        });
+    },
+  });
+}
+
 onMounted(() => {
   // 获取网元网元列表
   neInfoStore.fnNelist().then(res => {
@@ -500,7 +546,7 @@ onMounted(() => {
         <a-col :lg="8" :md="12" :xs="24" v-roles:has="['teacher']">
           <a-form-item
             :label="t('views.configManage.configParamForm.ptApplyShow')"
-            name="neType "
+            name="student "
           >
             <a-select
               v-model:value="classState.student"
@@ -512,7 +558,7 @@ onMounted(() => {
               :filter-option="false"
               :not-found-content="null"
               :options="classState.studentOptions"
-              @search="studentSearch"
+              @search="(v:any)=> studentSearch(treeState.neType, v)"
               @change="studentChange"
             >
               <template #option="{ value, label, applyStatus }">
@@ -586,6 +632,9 @@ onMounted(() => {
               <a-button @click="fnDataExport()" v-roles:has="['teacher']">
                 {{ t('views.configManage.configParamForm.ptExport') }}
               </a-button>
+              <a-button @click="fnDataExportAll()" v-roles:has="['teacher']">
+                {{ t('views.configManage.configParamForm.ptExportAll') }}
+              </a-button>
 
               <!-- 学生 -->
               <a-button
diff --git a/src/views/configManage/neOverview/index.vue b/src/views/configManage/neOverview/index.vue
index a2492040..c5288206 100644
--- a/src/views/configManage/neOverview/index.vue
+++ b/src/views/configManage/neOverview/index.vue
@@ -2,7 +2,14 @@
 import { PageContainer } from 'antdv-pro-layout';
 import { ColumnsType } from 'ant-design-vue/es/table';
 import { message } from 'ant-design-vue/es';
-import { reactive, ref, onMounted, onBeforeUnmount, markRaw } from 'vue';
+import {
+  reactive,
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  markRaw,
+  useTemplateRef,
+} from 'vue';
 import useI18n from '@/hooks/useI18n';
 import { TooltipComponent } from 'echarts/components';
 import { GaugeChart } from 'echarts/charts';
@@ -32,24 +39,12 @@ echarts.use([
 ]);
 
 /**图DOM节点实例对象 */
-const statusBar = ref<HTMLElement | undefined>(undefined);
+const statusBar = useTemplateRef<HTMLDivElement>('statusBar');
 
 /**图实例对象 */
 const statusBarChart = ref<any>(null);
 
-/**网元状态字典数据 */
-let indexColor = ref<DictType[]>([
-  { label: 'Normal', value: 'normal', tagType: '', tagClass: '#91cc75' },
-  {
-    label: 'Abnormal',
-    value: 'abnormal',
-    tagType: '',
-    tagClass: '#ee6666',
-  },
-]);
-
 /**表格字段列 */
-//customRender(){} ----单元格处理
 let tableColumns: ColumnsType = [
   {
     title: t('views.index.object'),
@@ -67,7 +62,9 @@ let tableColumns: ColumnsType = [
     dataIndex: 'serverState',
     align: 'left',
     customRender(opt) {
-      if (opt.value?.refreshTime) return parseDateToStr(opt.value?.refreshTime);
+      if (opt.value?.refreshTime) {
+        return parseDateToStr(opt.value?.refreshTime, 'HH:mm:ss');
+      }
       return '-';
     },
   },
@@ -104,12 +101,13 @@ let tableColumns: ColumnsType = [
     },
   },
 ];
+
 /**表格状态类型 */
 type TabeStateType = {
   /**加载等待 */
   loading: boolean;
   /**记录数据 */
-  data: object[];
+  data: Record<string, any>[];
   /**勾选记录 */
   selectedRowKeys: (string | number)[];
 };
@@ -121,114 +119,92 @@ let tableState: TabeStateType = reactive({
   selectedRowKeys: [],
 });
 
-/**表格状态 */
-let nfInfo: any = reactive({
-  obj: 'OMC',
-  version: appStore.version,
-  status: t('views.index.normal'),
-  outTimeDate: '',
-  serialNum: appStore.serialNum,
-});
-
-/**表格状态类型 */
-type nfStateType = {
-  /**主机名 */
-  hostName: string;
-  /**操作系统信息 */
-  osInfo: string;
-  /**IP地址 */
-  ipAddress: string;
-  /**版本 */
-  version: string;
-  /**CPU利用率 */
-  cpuUse: string;
-  /**内存使用 */
-  memoryUse: string;
-  /**用户容量 */
-  capability: number;
-  /**序列号 */
-  serialNum: string;
-  /**许可证到期日期 */
-  /*  selectedRowKeys: (string | number)[];*/
-  expiryDate: string;
-};
-/**网元详细信息 */
-let pronInfo: nfStateType = reactive({
-  hostName: '5gc',
-  osInfo: 'Linux 5gc 4.15.0-112-generic 2020 x86_64 GNU/Linux',
-  ipAddress: '-',
-  version: '-',
-  cpuUse: '-',
-  memoryUse: '-',
-  capability: 0,
-  serialNum: '-',
-  expiryDate: '-',
-});
+/**状态 */
+let serverState: any = ref({});
 
 /**查询网元状态列表 */
-function fnGetList(one: boolean) {
-  if (tableState.loading) return;
-  one && (tableState.loading = true);
-  listAllNeInfo({ bandStatus: true }).then(res => {
+async function fnGetList(reload: boolean = false) {
+  tableState.loading = !reload;
+  try {
+    const res = await listAllNeInfo({ bandStatus: true });
     tableState.data = res.data;
-    tableState.loading = false;
-    var rightNum = 0;
-    var errorNum = 0;
-    res.data.forEach((item: any) => {
-      if (item.serverState.online) {
-        rightNum++;
-      } else {
-        errorNum++;
-      }
-    });
-    const optionData: any = {
-      title: {
-        text: '',
-        subtext: '',
-        left: 'center',
-      },
-      tooltip: {
-        trigger: 'item',
-      },
-      legend: {
-        orient: 'vertical',
-        left: 'left',
-      },
-      color: indexColor.value.map(item => item.tagClass),
+  } catch (error) {
+    console.error(error);
+    tableState.data = [];
+  }
+  tableState.loading = false;
+  if (tableState.data.length == 0) {
+    return;
+  }
+
+  var rightNum = 0;
+  var errorNum = 0;
+  for (const v of tableState.data) {
+    if (v?.serverState?.online) {
+      rightNum++;
+    } else {
+      errorNum++;
+    }
+  }
+
+  // 初始
+  if (!reload) {
+    // 选择第一个
+    if (tableState.data.length > 0) {
+      const id = tableState.data[0].id;
+      fnTableSelectedRowKeys([id]);
+    } else {
+      fnTableSelectedRowKeys(tableState.selectedRowKeys);
+    }
+
+    if (statusBar.value) {
+      fnDesign(statusBar.value, rightNum, errorNum);
+    }
+  } else {
+    statusBarChart.value.setOption({
       series: [
         {
-          name: t('views.index.realNeStatus'),
-          type: 'pie',
-          radius: '70%',
-          center: ['50%', '50%'],
           data: [
             { value: rightNum, name: t('views.index.normal') },
             { value: errorNum, name: t('views.index.abnormal') },
           ],
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.5)',
-            },
-          },
-
-          label: {},
         },
       ],
-    };
-
-    fnDesign(statusBar.value, optionData);
-  });
+    });
+  }
 }
 
-function fnDesign(container: HTMLElement | undefined, option: any) {
-  if (!container) return;
-
-  if (!statusBarChart.value) {
-    statusBarChart.value = markRaw(echarts.init(container, 'light'));
-  }
-  option && statusBarChart.value.setOption(option);
+function fnDesign(container: HTMLElement, rightNum: number, errorNum: number) {
+  /// 图表数据
+  const optionData: any = {
+    title: {
+      text: '',
+      subtext: '',
+      left: 'center',
+    },
+    tooltip: {
+      trigger: 'item',
+    },
+    legend: {
+      orient: 'vertical',
+      left: 'left',
+    },
+    color: dict.indexStatus.map(item => item.tagClass),
+    series: [
+      {
+        name: t('views.index.runStatus'),
+        type: 'pie',
+        radius: '70%',
+        center: ['50%', '50%'],
+        data: [
+          { value: rightNum, name: t('views.index.normal') },
+          { value: errorNum, name: t('views.index.abnormal') },
+        ],
+      },
+    ],
+  };
+  statusBarChart.value = markRaw(echarts.init(container, 'light'));
+  statusBarChart.value.setOption(optionData);
 
   // 创建 ResizeObserver 实例
   var observer = new ResizeObserver(entries => {
@@ -240,66 +216,43 @@ function fnDesign(container: HTMLElement | undefined, option: any) {
   observer.observe(container);
 }
 
-/**抽屉 网元详细信息 */
-const open = ref(false);
-const closeDrawer = () => {
-  open.value = false;
-};
-/**抽屉 网元详细信息 */
+/**表格多选 */
+function fnTableSelectedRowKeys(keys: (string | number)[]) {
+  if (keys.length <= 0) return;
+  const id = keys[0];
+  const row: any = tableState.data.find((item: any) => item.id === id);
+  if (!row) {
+    message.error(t('views.index.neStatus'), 2);
+    return;
+  }
+  const neState = row.serverState;
+  if (!neState?.online) {
+    message.error(t('views.index.neStatus'), 2);
+    return;
+  }
+  tableState.selectedRowKeys = keys;
+  // Mem 将KB转换为MB
+  // const totalMemInKB = neState.mem?.totalMem;
+  // const nfUsedMemInKB = neState.mem?.nfUsedMem;
+  // const sysMemUsageInKB = neState.mem?.sysMemUsage;
+  // const totalMemInMB = Math.round((totalMemInKB / 1024) * 100) / 100;
+  // const nfUsedMemInMB = Math.round((nfUsedMemInKB / 1024) * 100) / 100;
+  // const sysMemUsageInMB = Math.round((sysMemUsageInKB / 1024) * 100) / 100;
 
-/**监听表格行事件*/
-function rowClick(record: any, index: any) {
-  return {
-    onClick: (event: any) => {
-      let pronData = JSON.parse(JSON.stringify(record.serverState));
-      if (!pronData.online) {
-        message.error(t('views.index.neStatus'), 2);
-        return false;
-      } else {
-        const totalMemInKB = pronData.mem?.totalMem;
-        const nfUsedMemInKB = pronData.mem?.nfUsedMem;
-        const sysMemUsageInKB = pronData.mem?.sysMemUsage;
+  // CPU
+  // const nfCpu = neState.cpu?.nfCpuUsage;
+  // const sysCpu = neState.cpu?.sysCpuUsage;
+  // const nfCpuP = Math.round(nfCpu) / 100;
+  // const sysCpuP = Math.round(sysCpu) / 100;
 
-        // 将KB转换为MB
-        const totalMemInMB = Math.round((totalMemInKB / 1024) * 100) / 100;
-        const nfUsedMemInMB = Math.round((nfUsedMemInKB / 1024) * 100) / 100;
-        const sysMemUsageInMB =
-          Math.round((sysMemUsageInKB / 1024) * 100) / 100;
-
-        //渲染详细信息
-        pronInfo = {
-          hostName: pronData.hostname,
-          osInfo: pronData.os,
-          ipAddress: pronData.neIP,
-          version: pronData.version,
-          cpuUse:
-            pronData.neName +
-            ':' +
-            pronData.cpu?.nfCpuUsage / 100 +
-            '%; ' +
-            'SYS:' +
-            pronData.cpu?.sysCpuUsage / 100 +
-            '%',
-          memoryUse:
-            'Total:' +
-            totalMemInMB +
-            'MB; ' +
-            pronData.name +
-            ':' +
-            nfUsedMemInMB +
-            'MB; SYS:' +
-            sysMemUsageInMB +
-            'MB',
-          capability: pronData.capability,
-          serialNum: pronData.sn,
-          expiryDate: pronData.expire,
-        };
-      }
-      open.value = true;
+  serverState.value = Object.assign(
+    {
+     // cpuUse: `NE:${nfCpuP}%; SYS:${sysCpuP}%`,
+     // memoryUse: `Total: ${totalMemInMB}MB; NE: ${nfUsedMemInMB}MB; SYS: ${sysMemUsageInMB}MB`,
     },
-  };
+    neState
+  );
 }
-let timer: any;
 
 /**
  * 国际化翻译转换
@@ -312,63 +265,50 @@ function fnLocale() {
   appStore.setTitle(title);
 }
 
+/**字典数据 */
+let dict: {
+  /**网元信息状态 */
+  neInfoStatus: DictType[];
+  /**主页状态 */
+  indexStatus: DictType[];
+} = reactive({
+  neInfoStatus: [],
+  indexStatus: [],
+});
+
+let timer: any;
+let timerFlag: boolean = false;
 onMounted(() => {
-  getDict('index_status')
-    .then(res => {
-      if (res.length > 0) {
-        indexColor.value = res;
+  // 初始字典数据
+  Promise.allSettled([getDict('ne_info_status'), getDict('index_status')])
+    .then(resArr => {
+      if (resArr[0].status === 'fulfilled') {
+        dict.neInfoStatus = resArr[0].value;
+      }
+      if (resArr[1].status === 'fulfilled') {
+        dict.indexStatus = resArr[1].value;
       }
     })
-    .finally(() => {
+    .finally(async () => {
       fnLocale();
-      fnGetList(true);
-      timer = setInterval(() => fnGetList(false), 10000); // 每隔10秒执行一次
+      await fnGetList(false);
+      timer = setInterval(() => {
+        if (timerFlag) return;
+        fnGetList(true);
+      }, 10_000); // 每隔10秒执行一次
     });
 });
 
 // 在组件卸载之前清除定时器
-
 onBeforeUnmount(() => {
   clearInterval(timer);
+  timer = null;
+  timerFlag = true;
 });
 </script>
 
 <template>
   <PageContainer :breadcrumb="{}">
-    <div>
-      <a-drawer :open="open" @close="closeDrawer" :width="700">
-        <a-descriptions bordered :column="1" :label-style="{ width: '160px' }">
-          <a-descriptions-item :label="t('views.index.hostName')">{{
-            pronInfo.hostName
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.osInfo')">{{
-            pronInfo.osInfo
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.ipAddress')">{{
-            pronInfo.ipAddress
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.version')">{{
-            pronInfo.version
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.capability')">{{
-            pronInfo.capability
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.cpuUse')">{{
-            pronInfo.cpuUse
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.memoryUse')">{{
-            pronInfo.memoryUse
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.serialNum')">{{
-            pronInfo.serialNum
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.expiryDate')">{{
-            pronInfo.expiryDate
-          }}</a-descriptions-item>
-        </a-descriptions>
-      </a-drawer>
-    </div>
-
     <a-row :gutter="16">
       <a-col :lg="14" :md="16" :xs="24">
         <!-- 表格列表 -->
@@ -377,20 +317,20 @@ onBeforeUnmount(() => {
           row-key="id"
           size="small"
           :columns="tableColumns"
-          :loading="tableState.loading"
           :data-source="tableState.data"
+          :loading="tableState.loading"
           :pagination="false"
           :scroll="{ x: true }"
-          :customRow="rowClick"
+          :row-selection="{
+            type: 'radio',
+            columnWidth: '48px',
+            selectedRowKeys: tableState.selectedRowKeys,
+            onChange: fnTableSelectedRowKeys,
+          }"
         >
           <template #bodyCell="{ column, record }">
             <template v-if="column.key === 'status'">
-              <div v-if="record.serverState.online">
-                <a-tag color="blue">{{ t('views.index.normal') }}</a-tag>
-              </div>
-              <div v-else>
-                <a-tag color="pink">{{ t('views.index.abnormal') }}</a-tag>
-              </div>
+              <DictTag :options="dict.neInfoStatus" :value="record.status" />
             </template>
           </template>
         </a-table>
@@ -404,7 +344,8 @@ onBeforeUnmount(() => {
           <div style="width: 100%; min-height: 200px" ref="statusBar"></div>
         </a-card>
         <a-card
-          :title="t('views.index.mark')"
+          :loading="tableState.loading"
+          :title="`${t('views.index.mark')} - ${serverState.neName || 'OMC'}`"
           style="margin-top: 16px"
           size="small"
         >
@@ -413,25 +354,33 @@ onBeforeUnmount(() => {
             :column="1"
             :label-style="{ width: '160px' }"
           >
-            <a-descriptions-item :label="t('views.index.object')">{{
-              nfInfo.obj
-            }}</a-descriptions-item>
-            <template v-if="nfInfo.obj === 'OMC'">
-              <a-descriptions-item :label="t('views.index.versionNum')">{{
-                nfInfo.version
-              }}</a-descriptions-item>
-              <a-descriptions-item :label="t('views.index.systemStatus')">{{
-                nfInfo.status
-              }}</a-descriptions-item>
-            </template>
-            <template v-else>
-              <a-descriptions-item :label="t('views.index.serialNum')">{{
-                nfInfo.serialNum
-              }}</a-descriptions-item>
-              <a-descriptions-item :label="t('views.index.expiryDate')">{{
-                nfInfo.outTimeDate
-              }}</a-descriptions-item>
-            </template>
+            <a-descriptions-item :label="t('views.index.hostName')">
+              {{ serverState.hostname }}
+            </a-descriptions-item>
+            <a-descriptions-item :label="t('views.index.osInfo')">
+              {{ serverState.os }}
+            </a-descriptions-item>
+            <a-descriptions-item :label="t('views.index.ipAddress')">
+              {{ serverState.neIP }}
+            </a-descriptions-item>
+            <a-descriptions-item :label="t('views.index.version')">
+              {{ serverState.version }}
+            </a-descriptions-item>
+            <a-descriptions-item :label="t('views.index.capability')">
+              {{ serverState.capability }}
+            </a-descriptions-item>
+            <!-- <a-descriptions-item :label="t('views.index.cpuUse')">
+              {{ serverState.cpuUse }}
+            </a-descriptions-item>
+            <a-descriptions-item :label="t('views.index.memoryUse')">
+              {{ serverState.memoryUse }}
+            </a-descriptions-item> -->
+            <a-descriptions-item :label="t('views.index.serialNum')">
+              {{ serverState.sn }}
+            </a-descriptions-item>
+            <a-descriptions-item :label="t('views.index.expiryDate')">
+              {{ serverState.expire }}
+            </a-descriptions-item>
           </a-descriptions>
         </a-card>
       </a-col>
diff --git a/src/views/monitor/topology/index.vue b/src/views/monitor/topology/index.vue
index 2e30e98c..fdb9d274 100644
--- a/src/views/monitor/topology/index.vue
+++ b/src/views/monitor/topology/index.vue
@@ -50,6 +50,7 @@ async function fnGetState() {
       graphG6.value.setItemState(neShape, 'neState', ne.serverState.online);
     }
   }
+  await new Promise(resolve => setTimeout(resolve, 15_000));
 }
 
 /**查询全部网元数据列表 */
diff --git a/src/views/monitor/topologyArchitecture/index.vue b/src/views/monitor/topologyArchitecture/index.vue
index 00b6fc43..456e2537 100644
--- a/src/views/monitor/topologyArchitecture/index.vue
+++ b/src/views/monitor/topologyArchitecture/index.vue
@@ -96,13 +96,13 @@ const graphNodeMenu = new Menu({
       ${neState.neName ?? '--'}
       </h3>
       <div id="restart" style="cursor: pointer; margin-bottom: 4px">
-        > ${t('views.configManage.neManage.restart')}
+        > ${t('views.ne.common.restart')}
       </div>
       <div id="stop" style="cursor: pointer; margin-bottom: 4px;">
-        > ${t('views.configManage.neManage.stop')}
+        > ${t('views.ne.common.stop')}
       </div>
       <div id="log" style="cursor: pointer; margin-bottom: 4px;">
-        > ${t('views.configManage.neManage.log')}
+        > ${t('views.ne.common.log')}
       </div>
     </div>
     `;