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

2024-12-19 20:24:46 +08:00
parent 6e7402fd63
commit 139a14fd3d
3 changed files with 141 additions and 215 deletions
--- a/src/i18n/locales/en-US.ts
+++ b/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',
-      runStatus:'Running Status',
-      mark:'Brief Information',
+      neStatus: 'Status Abnormal',
+      runStatus:'Status',
+      mark:'Information',
      object:'Object',
      versionNum:'Version',
-      systemStatus:'Status',
      realNeStatus:'Status',
      reloadTime:'Refresh Time',
      Critical:'Critical',
--- a/src/i18n/locales/zh-CN.ts
+++ b/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:'主要告警',
--- a/src/views/configManage/neOverview/index.vue
+++ b/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,105 +123,75 @@ 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 => {
-    tableState.data = res.data;
-    tableState.loading = false;
-    var rightNum = 0;
-    var errorNum = 0;
-    res.data.forEach((item: any) => {
-      if (item.serverState.online) {
-        rightNum++;
+  if (one) {
+    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 {
-        errorNum++;
+        fnTableSelectedRowKeys(tableState.selectedRowKeys);
      }
-    });
-    const optionData: any = {
-      title: {
-        text: '',
-        subtext: '',
-        left: 'center',
-      },
-      tooltip: {
-        trigger: 'item',
-      },
-      legend: {
-        orient: 'vertical',
-        left: 'left',
-      },
-      color: indexColor.value.map(item => item.tagClass),
-      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: {},
+    })
+    .finally(() => {
+      var rightNum = 0;
+      var errorNum = 0;
+      for (const v of tableState.data) {
+        if (v?.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),
+        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)',
+              },
+            },

-    fnDesign(statusBar.value, optionData);
-  });
+            label: {},
+          },
+        ],
+      };
+      fnDesign(statusBar.value, optionData);
+    });
 }

 function fnDesign(container: HTMLElement | undefined, option: any) {
@@ -240,66 +212,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,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')">{{
-              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>