ref: 重构获取网元状态信息

src/views/configManage/neOverview/index.vue

@@ -63,7 +63,7 @@ let tableColumns: ColumnsType = [
     align: 'left',
     customRender(opt) {
       if (opt.value?.refreshTime) {
-        return parseDateToStr(opt.value?.refreshTime, 'HH:mm:ss');
+        return parseDateToStr(opt.value?.refreshTime);
       }
       return '-';
     },
@@ -94,11 +94,8 @@ let tableColumns: ColumnsType = [
   },
   {
     title: t('views.index.ipAddress'),
-    dataIndex: 'serverState',
+    dataIndex: 'ip',
     align: 'left',
-    customRender(opt) {
-      return opt.value?.neIP || '-';
-    },
   },
 ];
 
@@ -151,10 +148,10 @@ async function fnGetList(reload: boolean = false) {
   if (!reload) {
     // 选择第一个
     if (tableState.data.length > 0) {
-      const item = tableState.data.find((item: any) => item.status === 1) 
+      const item = tableState.data.find((item: any) => item.status === 1)
       if (item) {
         const id = item.id;
-        fnTableSelectedRowKeys([id]); 
+        fnTableSelectedRowKeys([id]);
       }
     } else {
       fnTableSelectedRowKeys(tableState.selectedRowKeys);
@@ -250,8 +247,9 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
 
   serverState.value = Object.assign(
     {
-     // cpuUse: `NE:${nfCpuP}%; SYS:${sysCpuP}%`,
+      // cpuUse: `NE:${nfCpuP}%; SYS:${sysCpuP}%`,
-     // memoryUse: `Total: ${totalMemInMB}MB; NE: ${nfUsedMemInMB}MB; SYS: ${sysMemUsageInMB}MB`,
+      // memoryUse: `Total: ${totalMemInMB}MB; NE: ${nfUsedMemInMB}MB; SYS: ${sysMemUsageInMB}MB`,
+      neIP: row.ip,
     },
     neState
   );
@@ -315,22 +313,13 @@ onBeforeUnmount(() => {
     <a-row :gutter="16">
       <a-col :lg="14" :md="16" :xs="24">
         <!-- 表格列表 -->
-        <a-table
+        <a-table class="table" row-key="id" size="small" :columns="tableColumns" :data-source="tableState.data"
-          class="table"
+          :loading="tableState.loading" :pagination="false" :scroll="{ x: true }" :row-selection="{
-          row-key="id"
-          size="small"
-          :columns="tableColumns"
-          :data-source="tableState.data"
-          :loading="tableState.loading"
-          :pagination="false"
-          :scroll="{ x: true }"
-          :row-selection="{
             type: 'radio',
             columnWidth: '48px',
             selectedRowKeys: tableState.selectedRowKeys,
             onChange: fnTableSelectedRowKeys,
-          }"
+          }">
-        >
           <template #bodyCell="{ column, record }">
             <template v-if="column.key === 'status'">
               <DictTag :options="dict.neInfoStatus" :value="record.status" />
@@ -339,24 +328,12 @@ onBeforeUnmount(() => {
         </a-table>
       </a-col>
       <a-col :lg="10" :md="8" :xs="24">
-        <a-card
+        <a-card :title="t('views.index.runStatus')" style="margin-bottom: 16px" size="small">
-          :title="t('views.index.runStatus')"
-          style="margin-bottom: 16px"
-          size="small"
-        >
           <div style="width: 100%; min-height: 200px" ref="statusBar"></div>
         </a-card>
-        <a-card
+        <a-card :loading="tableState.loading" :title="`${t('views.index.mark')} - ${serverState.neName || 'OMC'}`"
-          :loading="tableState.loading"
+          style="margin-top: 16px" size="small">
-          :title="`${t('views.index.mark')} - ${serverState.neName || 'OMC'}`"
+          <a-descriptions bordered :column="1" :label-style="{ width: '160px' }">
-          style="margin-top: 16px"
-          size="small"
-        >
-          <a-descriptions
-            bordered
-            :column="1"
-            :label-style="{ width: '160px' }"
-          >
             <a-descriptions-item :label="t('views.index.hostName')">
               {{ serverState.hostname }}
             </a-descriptions-item>

src/views/dashboard/overview/components/NeResources/index.vue

@@ -247,42 +247,7 @@ function fnChangeData(data: any[], itemID: string) {
   // console.log(info.neState.cpu.sysCpuUsage);
   // console.log(info.neState.mem);
   // console.log(info.neState.disk);
-  let sysCpuUsage = 0;
+  const { nfCpuUsage, sysCpuUsage, sysMemUsage, sysDiskUsage } = info.neState
-  let nfCpuUsage = 0;
-  if (info.neState.cpu) {
-    nfCpuUsage = info.neState.cpu.nfCpuUsage;
-    const nfCpu = +(info.neState.cpu.nfCpuUsage / 100);
-    nfCpuUsage = +nfCpu.toFixed(2);
-    if (nfCpuUsage > 100) {
-      nfCpuUsage = 100;
-    }
-
-    sysCpuUsage = info.neState.cpu.sysCpuUsage;
-    let sysCpu = +(info.neState.cpu.sysCpuUsage / 100);
-    sysCpuUsage = +sysCpu.toFixed(2);
-    if (sysCpuUsage > 100) {
-      sysCpuUsage = 100;
-    }
-  }
-
-  let sysMemUsage = 0;
-  if (info.neState.mem) {
-    const men = info.neState.mem.sysMemUsage;
-    sysMemUsage = +(men / 100).toFixed(2);
-    if (sysMemUsage > 100) {
-      sysMemUsage = 100;
-    }
-  }
-
-  let sysDiskUsage = 0;
-  if (info.neState.disk && Array.isArray(info.neState.disk.partitionInfo)) {
-    let disks: any[] = info.neState.disk.partitionInfo;
-    disks = disks.sort((a, b) => +b.used - +a.used);
-    if (disks.length > 0) {
-      const { total, used } = disks[0];
-      sysDiskUsage = +((used / total) * 100).toFixed(2);
-    }
-  }
 
   category.value[0].value = sysDiskUsage;
   category.value[1].value = sysMemUsage;

src/views/dashboard/overview/hooks/useTopology.ts

@@ -74,8 +74,7 @@ export function neStateParse(neType: string, data: Record<string, any>) {
 
   // 更新网元状态
   const newNeState = Object.assign(node.neState, data, {
-    refreshTime: parseDateToStr(data.refreshTime, 'HH:mm:ss'),
+    refreshTime: parseDateToStr(data.refreshTime, 'MM-DD HH:mm:ss'),
-    online: !!data.cpu,
   });
 
   // 通过 ID 查询节点实例

src/views/dashboard/overview2/components/NeResources/index.vue

@@ -71,9 +71,8 @@ const optionData: any = {
       label: {
         normal: {
           formatter: () => {
-            return `${t('views.dashboard.overview.resources.neCpu')}\n${
+            return `${t('views.dashboard.overview.resources.neCpu')}\n${resourceData.value.neCpu
-              resourceData.value.neCpu
+              }%`;
-            }%`;
           },
           textStyle: {
             fontSize: 12,
@@ -103,9 +102,8 @@ const optionData: any = {
       label: {
         normal: {
           formatter: () => {
-            return `${t('views.dashboard.overview.resources.sysCpu')}\n${
+            return `${t('views.dashboard.overview.resources.sysCpu')}\n${resourceData.value.sysCpu
-              resourceData.value.sysCpu
+              }%`;
-            }%`;
           },
           textStyle: {
             fontSize: 12,
@@ -135,9 +133,8 @@ const optionData: any = {
       label: {
         normal: {
           formatter: () => {
-            return `${t('views.dashboard.overview.resources.sysMem')}\n${
+            return `${t('views.dashboard.overview.resources.sysMem')}\n${resourceData.value.sysMem
-              resourceData.value.sysMem
+              }%`;
-            }%`;
           },
           textStyle: {
             fontSize: 12,
@@ -167,9 +164,8 @@ const optionData: any = {
       label: {
         normal: {
           formatter: () => {
-            return `${t('views.dashboard.overview.resources.sysDisk')}\n${
+            return `${t('views.dashboard.overview.resources.sysDisk')}\n${resourceData.value.sysDisk
-              resourceData.value.sysDisk
+              }%`;
-            }%`;
           },
           textStyle: {
             fontSize: 12,
@@ -213,45 +209,7 @@ function fnChangeData(data: any[], itemID: string) {
   let info = data.find((item: any) => item.id === neType);
   if (!info || !info.neStateMap[neID]?.online) return;
 
-  let sysCpuUsage = 0;
+  const { nfCpuUsage, sysCpuUsage, sysMemUsage, sysDiskUsage } = info.neStateMap[neID]
-  let nfCpuUsage = 0;
-  if (info.neStateMap[neID].cpu) {
-    nfCpuUsage = info.neStateMap[neID].cpu.nfCpuUsage;
-    const nfCpu = +(info.neStateMap[neID].cpu.nfCpuUsage / 100);
-    nfCpuUsage = +nfCpu.toFixed(2);
-    if (nfCpuUsage > 100) {
-      nfCpuUsage = 100;
-    }
-
-    sysCpuUsage = info.neStateMap[neID].cpu.sysCpuUsage;
-    let sysCpu = +(info.neStateMap[neID].cpu.sysCpuUsage / 100);
-    sysCpuUsage = +sysCpu.toFixed(2);
-    if (sysCpuUsage > 100) {
-      sysCpuUsage = 100;
-    }
-  }
-
-  let sysMemUsage = 0;
-  if (info.neStateMap[neID].mem) {
-    const men = info.neStateMap[neID].mem.sysMemUsage;
-    sysMemUsage = +(men / 100).toFixed(2);
-    if (sysMemUsage > 100) {
-      sysMemUsage = 100;
-    }
-  }
-
-  let sysDiskUsage = 0;
-  if (
-    info.neStateMap[neID].disk &&
-    Array.isArray(info.neStateMap[neID].disk.partitionInfo)
-  ) {
-    let disks: any[] = info.neStateMap[neID].disk.partitionInfo;
-    disks = disks.sort((a, b) => +b.used - +a.used);
-    if (disks.length > 0) {
-      const { total, used } = disks[0];
-      sysDiskUsage = +((used / total) * 100).toFixed(2);
-    }
-  }
 
   resourceData.value = {
     neCpu: nfCpuUsage,
@@ -269,9 +227,8 @@ function fnChangeData(data: any[], itemID: string) {
         label: {
           normal: {
             formatter: () => {
-              return `${t('views.dashboard.overview.resources.neCpu')}\n${
+              return `${t('views.dashboard.overview.resources.neCpu')}\n${resourceData.value.neCpu
-                resourceData.value.neCpu
+                }%`;
-              }%`;
             },
           },
         },
@@ -282,9 +239,8 @@ function fnChangeData(data: any[], itemID: string) {
         label: {
           normal: {
             formatter: () => {
-              return `${t('views.dashboard.overview.resources.sysCpu')}\n${
+              return `${t('views.dashboard.overview.resources.sysCpu')}\n${resourceData.value.sysCpu
-                resourceData.value.sysCpu
+                }%`;
-              }%`;
             },
           },
         },
@@ -295,9 +251,8 @@ function fnChangeData(data: any[], itemID: string) {
         label: {
           normal: {
             formatter: () => {
-              return `${t('views.dashboard.overview.resources.sysMem')}\n${
+              return `${t('views.dashboard.overview.resources.sysMem')}\n${resourceData.value.sysMem
-                resourceData.value.sysMem
+                }%`;
-              }%`;
             },
           },
         },
@@ -308,9 +263,8 @@ function fnChangeData(data: any[], itemID: string) {
         label: {
           normal: {
             formatter: () => {
-              return `${t('views.dashboard.overview.resources.sysDisk')}\n${
+              return `${t('views.dashboard.overview.resources.sysDisk')}\n${resourceData.value.sysDisk
-                resourceData.value.sysDisk
+                }%`;
-              }%`;
             },
           },
         },

src/views/dashboard/overview2/hooks/useTopology.ts

@@ -38,18 +38,16 @@ export const graphG6 = ref<any>(null);
 export const graphNodeClickID = ref<string>('UPF_001');
 
 /**图节点网元信息状态 */
-export const graphNodeState = computed(() =>{
+export const graphNodeState = computed(() => {
- return  graphState.data.nodes.map((item: any) => ({
+  return graphState.data.nodes.map((item: any) => ({
     id: item.id,
     label: item.label,
     neInfo: item.neInfo,
     neState: item.neState,
-    neInfoList:item.neInfoList,
+    neInfoList: item.neInfoList,
     neStateMap: item.neStateMap,
-  }))
+  }));
-}
+});
-
-);
 
 /**图节点网元状态数量 */
 export const graphNodeStateNum = computed(() => {
@@ -72,8 +70,12 @@ export const graphNodeStateNum = computed(() => {
 export const neStateRequestMap = ref<Map<string, boolean>>(new Map());
 
 /**neStateParse 网元状态 数据解析 */
-export function neStateParse(neType: string, data: Record<string, any>,neId: string) {
+export function neStateParse(
- // console.log('neStateParse',neType, data, neId);
+  neType: string,
+  data: Record<string, any>,
+  neId: string
+) {
+  // console.log('neStateParse',neType, data, neId);
 
   const { combos, edges, nodes } = graphState.data;
 
@@ -82,25 +84,24 @@ export function neStateParse(neType: string, data: Record<string, any>,neId: str
 
   if (!node) return;
 
-    // 初始化状态映射
+  // 初始化状态映射
-    if (!node.neStateMap) node.neStateMap = {};
+  if (!node.neStateMap) node.neStateMap = {};
 
   // 更新网元状态
-  const newNeState :any = {
+  const newNeState: any = {
-    ...data,  // 先展开data对象
+    ...data, // 先展开data对象
-    refreshTime: parseDateToStr(data.refreshTime, 'HH:mm:ss'),
+    refreshTime: parseDateToStr(data.refreshTime, 'MM-DD HH:mm:ss'),
-    online: !!data.cpu,
+    neId: neId,
-    neId: neId
   };
-    // 如果是001，更新节点状态。neInfo为主要的网元信息
+  // 如果是001，更新节点状态。neInfo为主要的网元信息
-    if (node.neInfo && node.neInfo.neId === neId) {
+  if (node.neInfo && node.neInfo.neId === neId) {
-      Object.assign(node.neState, newNeState);
+    Object.assign(node.neState, newNeState);
-    }
+  }
 
-    //console.log(node.neState)
+  //console.log(node.neState)
-    // 无论是否为主要网元，都更新状态映射
+  // 无论是否为主要网元，都更新状态映射
-    node.neStateMap[neId] = {...newNeState};
+  node.neStateMap[neId] = { ...newNeState };
-      // 通过 ID 查询节点实例
+  // 通过 ID 查询节点实例
   const item = graphG6.value.findById(node.id);
   if (item) {
     // 检查当前节点下所有网元的状态
@@ -109,32 +110,33 @@ export function neStateParse(neType: string, data: Record<string, any>,neId: str
     let stateColor = '#52c41a'; // 默认绿色（所有网元都正常）
     if (allStates.some((state: any) => !state.online)) {
       // 如果有任何一个网元不正常
-      stateColor = allStates.every((state: any) => !state.online) ? '#f5222d' : '#faad14'; // 红色（全部不正常）或黄色（部分不正常）
+      stateColor = allStates.every((state: any) => !state.online)
+        ? '#f5222d'
+        : '#faad14'; // 红色（全部不正常）或黄色（部分不正常）
     }
 
-      // 图片类型不能填充
+    // 图片类型不能填充
-      if (node.type && node.type.startsWith('image')) {
+    if (node.type && node.type.startsWith('image')) {
-        // 更新节点
+      // 更新节点
-        if (node.label !== newNeState.neType) {
+      if (node.label !== newNeState.neType) {
-          graphG6.value.updateItem(item, {
-            label: newNeState.neType,
-          });
-        }
-        // 设置状态
-        graphG6.value.setItemState(item, 'top-right-dot', stateColor);
-      } else {
-        // 更新节点
         graphG6.value.updateItem(item, {
           label: newNeState.neType,
-          style: {
-            fill: stateColor, // 填充色
-            stroke: stateColor, // 填充色
-          },
         });
-        // 设置状态
-        graphG6.value.setItemState(item, 'stroke', newNeState.online);
       }
-
+      // 设置状态
+      graphG6.value.setItemState(item, 'top-right-dot', stateColor);
+    } else {
+      // 更新节点
+      graphG6.value.updateItem(item, {
+        label: newNeState.neType,
+        style: {
+          fill: stateColor, // 填充色
+          stroke: stateColor, // 填充色
+        },
+      });
+      // 设置状态
+      graphG6.value.setItemState(item, 'stroke', newNeState.online);
+    }
   }
 
   // 设置边状态

src/views/monitor/topologyArchitecture/index.vue

@@ -143,11 +143,10 @@ const graphNodeTooltip = new Tooltip({
         "
         >
         <div><strong>${t('views.monitor.topology.state')}：</strong><span>
-        ${
+        ${neState.online
-          neState.online
+        ? t('views.monitor.topology.normalcy')
-            ? t('views.monitor.topology.normalcy')
+        : t('views.monitor.topology.exceptions')
-            : t('views.monitor.topology.exceptions')
+      }
-        }
         </span></div>
         <div><strong>${t('views.monitor.topology.refreshTime')}：</strong><span>
         ${neState.refreshTime ?? '--'}
@@ -399,11 +398,10 @@ function wsMessage(res: Record<string, any>) {
   const [neType, neId] = requestId.split('_');
   const { combos, edges, nodes } = graphState.data;
   const node = nodes.find((item: Record<string, any>) => item.id === neType);
-
+  console.log(data)
   // 更新网元状态
   const newNeState = Object.assign(node.neState, data, {
-    refreshTime: parseDateToStr(data.refreshTime, 'HH:mm:ss'),
+    refreshTime: parseDateToStr(data.refreshTime, 'MM-DD HH:mm:ss'),
-    online: !!data.cpu,
   });
 
   // 通过 ID 查询节点实例
@@ -505,11 +503,7 @@ onBeforeUnmount(() => {
 
 <template>
   <PageContainer>
-    <a-card
+    <a-card :bordered="false" :body-style="{ marginBottom: '24px' }" size="small">
-      :bordered="false"
-      :body-style="{ marginBottom: '24px' }"
-      size="small"
-    >
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-space :size="8" align="center">
@@ -521,12 +515,10 @@ onBeforeUnmount(() => {
       </template>
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <a-button
+        <a-button type="default" size="small" @click.prevent="fnGraphDataLoad(true)">
-          type="default"
+          <template #icon>
-          size="small"
+            <ReloadOutlined />
-          @click.prevent="fnGraphDataLoad(true)"
+          </template>
-        >
-          <template #icon><ReloadOutlined /></template>
           {{ t('common.reloadText') }}
         </a-button>
       </template>

src/views/ne/neInfo/index.vue

@@ -5,7 +5,6 @@ import {
   toRaw,
   defineAsyncComponent,
   ref,
-  computed,
 } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { message, Modal } from 'ant-design-vue/es';
@@ -272,8 +271,6 @@ function reloadRowInfo(row: Record<string, any>) {
           item.status = '0';
         }
         Object.assign(item.serverState, res.data);
-        const resouresUsage = parseResouresUsage(item.serverState);
-        Reflect.set(item, 'resoures', resouresUsage);
       }
     })
     .finally(() => {
@@ -401,23 +398,7 @@ function fnGetList(pageNum?: number) {
         }
         const { total, rows } = res.data;
         tablePagination.total = total;
-        // 遍历处理资源情况数值
+        tableState.data = rows
-        tableState.data = rows.map((item: any) => {
-          let resouresUsage = {
-            sysDiskUsage: 0,
-            sysMemUsage: 0,
-            sysCpuUsage: 0,
-            nfCpuUsage: 0,
-          };
-          const neState = item.serverState;
-          if (neState) {
-            resouresUsage = parseResouresUsage(neState);
-          } else {
-            item.serverState = { online: false };
-          }
-          Reflect.set(item, 'resoures', resouresUsage);
-          return item;
-        });
       }
       tableState.loading = false;
     })
@@ -442,33 +423,29 @@ onMounted(() => {
 
 <template>
   <PageContainer>
-    <a-card
+    <a-card v-show="tableState.seached" :bordered="false" :body-style="{ marginBottom: '24px', paddingBottom: 0 }">
-      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="t('views.ne.common.neType')" name="neType ">
-              <a-auto-complete
+              <a-auto-complete v-model:value="queryParams.neType" :options="neListStore.getNeSelectOtions" allow-clear
-                v-model:value="queryParams.neType"
+                :placeholder="t('common.inputPlease')" />
-                :options="neListStore.getNeSelectOtions"
-                allow-clear
-                :placeholder="t('common.inputPlease')"
-              />
             </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>
+                  <template #icon>
+                    <SearchOutlined />
+                  </template>
                   {{ t('common.search') }}
                 </a-button>
                 <a-button type="default" @click.prevent="fnQueryReset">
-                  <template #icon><ClearOutlined /></template>
+                  <template #icon>
+                    <ClearOutlined />
+                  </template>
                   {{ t('common.reset') }}
                 </a-button>
               </a-space>
@@ -482,32 +459,25 @@ onMounted(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-space :size="8" align="center">
-          <a-button
+          <a-button type="primary" @click.prevent="fnModalVisibleByEdit()" v-perms:has="['ne:neInfo:add']">
-            type="primary"
+            <template #icon>
-            @click.prevent="fnModalVisibleByEdit()"
+              <PlusOutlined />
-            v-perms:has="['ne:neInfo:add']"
+            </template>
-          >
-            <template #icon><PlusOutlined /></template>
             {{ t('common.addText') }}
           </a-button>
-          <a-button
+          <a-button type="default" :loading="modalState.confirmLoading" @click.prevent="fnRecordMore('quickOAM', {})"
-            type="default"
+            v-perms:has="['ne:neInfo:oam']">
-            :loading="modalState.confirmLoading"
+            <template #icon>
-            @click.prevent="fnRecordMore('quickOAM', {})"
+              <SettingOutlined />
-            v-perms:has="['ne:neInfo:oam']"
+            </template>
-          >
-            <template #icon><SettingOutlined /></template>
             {{ t('views.ne.neInfo.quickOam.title') }}
           </a-button>
-          <a-button
+          <a-button type="default" danger :disabled="tableState.selectedRowKeys.length <= 0"
-            type="default"
+            :loading="modalState.confirmLoading" @click.prevent="fnRecordDelete('0')"
-            danger
+            v-perms:has="['ne:neInfo:delete']">
-            :disabled="tableState.selectedRowKeys.length <= 0"
+            <template #icon>
-            :loading="modalState.confirmLoading"
+              <DeleteOutlined />
-            @click.prevent="fnRecordDelete('0')"
+            </template>
-            v-perms:has="['ne:neInfo:delete']"
-          >
-            <template #icon><DeleteOutlined /></template>
             {{ t('common.deleteText') }}
           </a-button>
         </a-space>
@@ -518,30 +488,27 @@ onMounted(() => {
         <a-space :size="8" align="center">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
-            <a-switch
+            <a-switch v-model:checked="tableState.seached" :checked-children="t('common.switch.show')"
-              v-model:checked="tableState.seached"
+              :un-checked-children="t('common.switch.hide')" size="small" />
-              :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>
+              <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>
+                <template #icon>
+                  <ColumnHeightOutlined />
+                </template>
               </a-button>
               <template #overlay>
-                <a-menu
+                <a-menu :selected-keys="[tableState.size as string]" @click="fnTableSize">
-                  :selected-keys="[tableState.size as string]"
-                  @click="fnTableSize"
-                >
                   <a-menu-item key="default">
                     {{ t('common.size.default') }}
                   </a-menu-item>
@@ -559,22 +526,14 @@ onMounted(() => {
       </template>
 
       <!-- 表格列表 -->
-      <a-table
+      <a-table class="table" row-key="id" :columns="tableColumns" :loading="tableState.loading"
-        class="table"
+        :data-source="tableState.data" :size="tableState.size" :pagination="tablePagination"
-        row-key="id"
+        :scroll="{ x: tableColumns.length * 120 }" :row-selection="{
-        :columns="tableColumns"
-        :loading="tableState.loading"
-        :data-source="tableState.data"
-        :size="tableState.size"
-        :pagination="tablePagination"
-        :scroll="{ x: tableColumns.length * 120 }"
-        :row-selection="{
           type: 'checkbox',
           columnWidth: '48px',
           selectedRowKeys: tableState.selectedRowKeys,
           onChange: fnTableSelectedRowKeys,
-        }"
+        }">
-      >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'status'">
             <DictTag :options="dict.neInfoStatus" :value="record.status" />
@@ -583,49 +542,42 @@ onMounted(() => {
             <a-space :size="8" align="center">
               <a-tooltip>
                 <template #title>{{ t('common.editText') }}</template>
-                <a-button
+                <a-button type="link" @click.prevent="fnModalVisibleByEdit(record)" v-perms:has="['ne:neInfo:edit']">
-                  type="link"
+                  <template #icon>
-                  @click.prevent="fnModalVisibleByEdit(record)"
+                    <FormOutlined />
-                  v-perms:has="['ne:neInfo:edit']"
+                  </template>
-                >
-                  <template #icon><FormOutlined /></template>
                 </a-button>
               </a-tooltip>
               <a-tooltip>
                 <template #title>
                   {{ t('views.ne.common.restart') }}
                 </template>
-                <a-button
+                <a-button type="link" @click.prevent="fnRecordMore('restart', record)"
-                  type="link"
+                  v-perms:has="['ne:neInfo:restart']">
-                  @click.prevent="fnRecordMore('restart', record)"
+                  <template #icon>
-                  v-perms:has="['ne:neInfo:restart']"
+                    <UndoOutlined />
-                >
+                  </template>
-                  <template #icon><UndoOutlined /></template>
                 </a-button>
               </a-tooltip>
               <a-tooltip placement="left">
                 <template #title>{{ t('common.moreText') }}</template>
                 <a-dropdown placement="bottomRight" trigger="click">
                   <a-button type="link">
-                    <template #icon><EllipsisOutlined /> </template>
+                    <template #icon>
+                      <EllipsisOutlined />
+                    </template>
                   </a-button>
                   <template #overlay>
-                    <a-menu @click="({ key }:any) => fnRecordMore(key, record)">
+                    <a-menu @click="({ key }: any) => fnRecordMore(key, record)">
                       <a-menu-item key="log">
                         <FileTextOutlined />
                         {{ t('views.ne.common.log') }}
                       </a-menu-item>
-                      <a-menu-item
+                      <a-menu-item key="start" v-if="hasPermissions(['ne:neInfo:start'])">
-                        key="start"
-                        v-if="hasPermissions(['ne:neInfo:start'])"
-                      >
                         <ThunderboltOutlined />
                         {{ t('views.ne.common.start') }}
                       </a-menu-item>
-                      <a-menu-item
+                      <a-menu-item key="stop" v-if="hasPermissions(['ne:neInfo:stop'])">
-                        key="stop"
-                        v-if="hasPermissions(['ne:neInfo:stop'])"
-                      >
                         <CloseSquareOutlined />
                         {{ t('views.ne.common.stop') }}
                       </a-menu-item>
@@ -633,35 +585,23 @@ onMounted(() => {
                         <SyncOutlined />
                         {{ t('views.ne.common.reload') }}
                       </a-menu-item>
-                      <a-menu-item
+                      <a-menu-item key="delete" v-if="hasPermissions(['ne:neInfo:delete'])">
-                        key="delete"
-                        v-if="hasPermissions(['ne:neInfo:delete'])"
-                      >
                         <DeleteOutlined />
                         {{ t('common.deleteText') }}
                       </a-menu-item>
-                      <a-menu-item
+                      <a-menu-item key="oam" v-if="
-                        key="oam"
+                        !['OMC'].includes(record.neType) ||
-                        v-if="
+                        hasPermissions(['ne:neInfo:oam'])
-                          !['OMC'].includes(record.neType) ||
+                      ">
-                          hasPermissions(['ne:neInfo:oam'])
-                        "
-                      >
                         <FileTextOutlined />
                         {{ t('views.ne.common.oam') }}
                       </a-menu-item>
                       <!-- 配置备份 -->
-                      <a-menu-item
+                      <a-menu-item key="backConfExport" v-if="hasPermissions(['ne:neInfo:export'])">
-                        key="backConfExport"
-                        v-if="hasPermissions(['ne:neInfo:export'])"
-                      >
                         <ExportOutlined />
                         {{ t('views.ne.neInfo.backConf.export') }}
                       </a-menu-item>
-                      <a-menu-item
+                      <a-menu-item key="backConfImport" v-if="hasPermissions(['ne:neInfo:import'])">
-                        key="backConfImport"
-                        v-if="hasPermissions(['ne:neInfo:import'])"
-                      >
                         <ImportOutlined />
                         {{ t('views.ne.neInfo.backConf.import') }}
                       </a-menu-item>
@@ -701,59 +641,39 @@ onMounted(() => {
               </a-divider>
               <div>
                 <span>{{ t('views.ne.neInfo.neCpu') }}：</span>
-                <a-progress
+                <a-progress status="normal" :stroke-color="record.serverState.nfCpuUsage < 30
-                  status="normal"
+                  ? '#52c41a'
-                  :stroke-color="
+                  : record.serverState.nfCpuUsage > 70
-                    record.resoures.nfCpuUsage < 30
+                    ? '#ff4d4f'
-                      ? '#52c41a'
+                    : '#1890ff'
-                      : record.resoures.nfCpuUsage > 70
+                  " :percent="record.serverState.nfCpuUsage" />
-                      ? '#ff4d4f'
-                      : '#1890ff'
-                  "
-                  :percent="record.resoures.nfCpuUsage"
-                />
               </div>
               <div>
                 <span>{{ t('views.ne.neInfo.sysCpu') }}：</span>
-                <a-progress
+                <a-progress status="normal" :stroke-color="record.serverState.sysCpuUsage < 30
-                  status="normal"
+                  ? '#52c41a'
-                  :stroke-color="
+                  : record.serverState.sysCpuUsage > 70
-                    record.resoures.sysCpuUsage < 30
+                    ? '#ff4d4f'
-                      ? '#52c41a'
+                    : '#1890ff'
-                      : record.resoures.sysCpuUsage > 70
+                  " :percent="record.serverState.sysCpuUsage" />
-                      ? '#ff4d4f'
-                      : '#1890ff'
-                  "
-                  :percent="record.resoures.sysCpuUsage"
-                />
               </div>
               <div>
                 <span>{{ t('views.ne.neInfo.sysMem') }}：</span>
-                <a-progress
+                <a-progress status="normal" :stroke-color="record.serverState.sysMemUsage < 30
-                  status="normal"
+                  ? '#52c41a'
-                  :stroke-color="
+                  : record.serverState.sysMemUsage > 70
-                    record.resoures.sysMemUsage < 30
+                    ? '#ff4d4f'
-                      ? '#52c41a'
+                    : '#1890ff'
-                      : record.resoures.sysMemUsage > 70
+                  " :percent="record.serverState.sysMemUsage" />
-                      ? '#ff4d4f'
-                      : '#1890ff'
-                  "
-                  :percent="record.resoures.sysMemUsage"
-                />
               </div>
               <div>
                 <span>{{ t('views.ne.neInfo.sysDisk') }}：</span>
-                <a-progress
+                <a-progress status="normal" :stroke-color="record.serverState.sysDiskUsage < 30
-                  status="normal"
+                  ? '#52c41a'
-                  :stroke-color="
+                  : record.serverState.sysDiskUsage > 70
-                    record.resoures.sysDiskUsage < 30
+                    ? '#ff4d4f'
-                      ? '#52c41a'
+                    : '#1890ff'
-                      : record.resoures.sysDiskUsage > 70
+                  " :percent="record.serverState.sysDiskUsage" />
-                      ? '#ff4d4f'
-                      : '#1890ff'
-                  "
-                  :percent="record.resoures.sysDiskUsage"
-                />
               </div>
             </a-col>
           </a-row>
@@ -762,35 +682,19 @@ onMounted(() => {
     </a-card>
 
     <!-- 新增框或修改框 -->
-    <EditModal
+    <EditModal v-model:open="modalState.openByEdit" :edit-id="modalState.editId" @ok="fnModalEditOk"
-      v-model:open="modalState.openByEdit"
+      @cancel="fnModalEditCancel"></EditModal>
-      :edit-id="modalState.editId"
-      @ok="fnModalEditOk"
-      @cancel="fnModalEditCancel"
-    ></EditModal>
 
     <!-- OAM编辑框 -->
-    <OAMModal
+    <OAMModal v-model:open="modalState.openByOAM" :ne-id="modalState.neId" :ne-type="modalState.neType"
-      v-model:open="modalState.openByOAM"
+      @cancel="fnModalEditCancel"></OAMModal>
-      :ne-id="modalState.neId"
-      :ne-type="modalState.neType"
-      @cancel="fnModalEditCancel"
-    ></OAMModal>
 
     <!-- 配置文件备份框 -->
-    <BackConfModal
+    <BackConfModal ref="backConf" v-model:open="modalState.openByBackConf" :ne-id="modalState.neId"
-      ref="backConf"
+      :ne-type="modalState.neType" @cancel="fnModalEditCancel"></BackConfModal>
-      v-model:open="modalState.openByBackConf"
-      :ne-id="modalState.neId"
-      :ne-type="modalState.neType"
-      @cancel="fnModalEditCancel"
-    ></BackConfModal>
 
     <!-- 快速OAM配置框 -->
-    <QuickOAMModal
+    <QuickOAMModal v-model:open="modalState.openByQuickOAM" @cancel="fnModalEditCancel"></QuickOAMModal>
-      v-model:open="modalState.openByQuickOAM"
-      @cancel="fnModalEditCancel"
-    ></QuickOAMModal>
   </PageContainer>
 </template>