feat: 网元总览点击状态显示页面调整

src/i18n/locales/en-US.ts

@@ -222,12 +222,11 @@ export default {
       capability: 'Capability',
       serialNum: 'Serial Number',
       expiryDate: 'Expiry Date',
-      neStatus: 'NE status is abnormal',
+      neStatus: 'Status Abnormal',
-      runStatus:'Running Status',
+      runStatus:'Status',
-      mark:'Brief Information',
+      mark:'Information',
       object:'Object',
       versionNum:'Version',
-      systemStatus:'Status',
       realNeStatus:'Status',
       reloadTime:'Refresh Time',
       Critical:'Critical',

src/i18n/locales/zh-CN.ts

@@ -222,13 +222,12 @@ export default {
       capability: '用户容量',
       serialNum: '序列号',
       expiryDate: '许可证到期日期',
-      neStatus:'网元状态异常',
+      neStatus:'状态异常',
       runStatus:'运行状态',
-      mark:'简略信息',
+      mark:'信息',
       object:'对象',
       versionNum:'版本号',
-      systemStatus:'系统状态',
+      realNeStatus:'状态',
-      realNeStatus:'网元状态',
       reloadTime:'刷新时间',
       Critical:'严重告警',
       Major:'主要告警',

src/views/configManage/neOverview/index.vue

@@ -49,7 +49,6 @@ let indexColor = ref<DictType[]>([
 ]);
 
 /**表格字段列 */
-//customRender(){} ----单元格处理
 let tableColumns: ColumnsType = [
   {
     title: t('views.index.object'),
@@ -67,7 +66,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 +105,13 @@ let tableColumns: ColumnsType = [
     },
   },
 ];
+
 /**表格状态类型 */
 type TabeStateType = {
   /**加载等待 */
   loading: boolean;
   /**记录数据 */
-  data: object[];
+  data: Record<string, any>[];
   /**勾选记录 */
   selectedRowKeys: (string | number)[];
 };
@@ -121,66 +123,37 @@ let tableState: TabeStateType = reactive({
   selectedRowKeys: [],
 });
 
-/**表格状态 */
+/**状态 */
-let nfInfo: any = reactive({
+let serverState: any = ref({});
-  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: '-',
-});
 
 /**查询网元状态列表 */
 function fnGetList(one: boolean) {
   if (tableState.loading) return;
-  one && (tableState.loading = true);
+  if (one) {
-  listAllNeInfo({ bandStatus: true }).then(res => {
+    tableState.loading = true;
+  }
+  listAllNeInfo({ bandStatus: true })
+    .then(res => {
       tableState.data = res.data;
       tableState.loading = false;
+      if (one && res.data.length > 0) {
+        const id = res.data[0].id;
+        fnTableSelectedRowKeys([id]);
+      } else {
+        fnTableSelectedRowKeys(tableState.selectedRowKeys);
+      }
+    })
+    .finally(() => {
       var rightNum = 0;
       var errorNum = 0;
-    res.data.forEach((item: any) => {
+      for (const v of tableState.data) {
-      if (item.serverState.online) {
+        if (v?.serverState?.online) {
           rightNum++;
         } else {
           errorNum++;
         }
-    });
+      }
+      /// 图表数据
       const optionData: any = {
         title: {
           text: '',
@@ -217,7 +190,6 @@ function fnGetList(one: boolean) {
           },
         ],
       };
-
       fnDesign(statusBar.value, optionData);
     });
 }
@@ -240,66 +212,43 @@ function fnDesign(container: HTMLElement | undefined, option: any) {
   observer.observe(container);
 }
 
-/**抽屉 网元详细信息 */
+/**表格多选 */
-const open = ref(false);
+function fnTableSelectedRowKeys(keys: (string | number)[]) {
-const closeDrawer = () => {
+  if (keys.length <= 0) return;
-  open.value = false;
+  const id = keys[0];
-};
+  const row: any = tableState.data.find((item: any) => item.id === id);
-/**抽屉 网元详细信息 */
+  if (!row) {
-
-/**监听表格行事件*/
-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;
+    return;
-      } else {
+  }
-        const totalMemInKB = pronData.mem?.totalMem;
+  const neState = row.serverState;
-        const nfUsedMemInKB = pronData.mem?.nfUsedMem;
+  if (!neState?.online) {
-        const sysMemUsageInKB = pronData.mem?.sysMemUsage;
+    message.error(t('views.index.neStatus'), 2);
-
+    return;
-        // 将KB转换为MB
+  }
+  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 =
+  const sysMemUsageInMB = Math.round((sysMemUsageInKB / 1024) * 100) / 100;
-          Math.round((sysMemUsageInKB / 1024) * 100) / 100;
 
-        //渲染详细信息
+  // CPU
-        pronInfo = {
+  const nfCpu = neState.cpu?.nfCpuUsage;
-          hostName: pronData.hostname,
+  const sysCpu = neState.cpu?.sysCpuUsage;
-          osInfo: pronData.os,
+  const nfCpuP = Math.round(nfCpu) / 100;
-          ipAddress: pronData.neIP,
+  const sysCpuP = Math.round(sysCpu) / 100;
-          version: pronData.version,
+
-          cpuUse:
+  serverState.value = Object.assign(
-            pronData.neName +
+    {
-            ':' +
+      cpuUse: `NE:${nfCpuP}%; SYS:${sysCpuP}%`,
-            pronData.cpu?.nfCpuUsage / 100 +
+      memoryUse: `Total: ${totalMemInMB}MB; NE: ${nfUsedMemInMB}MB; SYS: ${sysMemUsageInMB}MB`,
-            '%; ' +
-            '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;
     },
-  };
+    neState
+  );
 }
-let timer: any;
 
 /**
  * 国际化翻译转换
@@ -312,6 +261,7 @@ function fnLocale() {
   appStore.setTitle(title);
 }
 
+let timer: any;
 onMounted(() => {
   getDict('index_status')
     .then(res => {
@@ -322,12 +272,11 @@ onMounted(() => {
     .finally(() => {
       fnLocale();
       fnGetList(true);
-      timer = setInterval(() => fnGetList(false), 10000); // 每隔10秒执行一次
+      timer = setInterval(() => fnGetList(false), 10_000); // 每隔10秒执行一次
     });
 });
 
 // 在组件卸载之前清除定时器
-
 onBeforeUnmount(() => {
   clearInterval(timer);
 });
@@ -335,40 +284,6 @@ onBeforeUnmount(() => {
 
 <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">
         <!-- 表格列表 -->
@@ -381,7 +296,12 @@ onBeforeUnmount(() => {
           :data-source="tableState.data"
           :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'">
@@ -404,7 +324,7 @@ onBeforeUnmount(() => {
           <div style="width: 100%; min-height: 200px" ref="statusBar"></div>
         </a-card>
         <a-card
-          :title="t('views.index.mark')"
+          :title="`${t('views.index.mark')} - ${serverState.neName}`"
           style="margin-top: 16px"
           size="small"
         >
@@ -413,25 +333,33 @@ onBeforeUnmount(() => {
             :column="1"
             :label-style="{ width: '160px' }"
           >
-            <a-descriptions-item :label="t('views.index.object')">{{
+            <a-descriptions-item :label="t('views.index.hostName')">
-              nfInfo.obj
+              {{ serverState.hostname }}
-            }}</a-descriptions-item>
+            </a-descriptions-item>
-            <template v-if="nfInfo.obj === 'OMC'">
+            <a-descriptions-item :label="t('views.index.osInfo')">
-              <a-descriptions-item :label="t('views.index.versionNum')">{{
+              {{ serverState.os }}
-                nfInfo.version
+            </a-descriptions-item>
-              }}</a-descriptions-item>
+            <a-descriptions-item :label="t('views.index.ipAddress')">
-              <a-descriptions-item :label="t('views.index.systemStatus')">{{
+              {{ serverState.neIP }}
-                nfInfo.status
+            </a-descriptions-item>
-              }}</a-descriptions-item>
+            <a-descriptions-item :label="t('views.index.version')">
-            </template>
+              {{ serverState.version }}
-            <template v-else>
+            </a-descriptions-item>
-              <a-descriptions-item :label="t('views.index.serialNum')">{{
+            <a-descriptions-item :label="t('views.index.capability')">
-                nfInfo.serialNum
+              {{ serverState.capability }}
-              }}</a-descriptions-item>
+            </a-descriptions-item>
-              <a-descriptions-item :label="t('views.index.expiryDate')">{{
+            <a-descriptions-item :label="t('views.index.cpuUse')">
-                nfInfo.outTimeDate
+              {{ serverState.cpuUse }}
-              }}</a-descriptions-item>
+            </a-descriptions-item>
-            </template>
+            <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>