From 139a14fd3d8d741a08ea707cf14cbfa28f998051 Mon Sep 17 00:00:00 2001 From: TsMask <340112800@qq.com> Date: Thu, 19 Dec 2024 20:24:46 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BD=91=E5=85=83=E6=80=BB=E8=A7=88?= =?UTF-8?q?=E7=82=B9=E5=87=BB=E7=8A=B6=E6=80=81=E6=98=BE=E7=A4=BA=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/i18n/locales/en-US.ts | 7 +- src/i18n/locales/zh-CN.ts | 7 +- src/views/configManage/neOverview/index.vue | 342 ++++++++------------ 3 files changed, 141 insertions(+), 215 deletions(-) diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts index 2c0763b9..f7953c9e 100644 --- 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', diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts index 61beaaad..8707f564 100644 --- 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:'主要告警', diff --git a/src/views/configManage/neOverview/index.vue b/src/views/configManage/neOverview/index.vue index a2492040..9dd9605b 100644 --- a/src/views/configManage/neOverview/index.vue +++ b/src/views/configManage/neOverview/index.vue @@ -49,7 +49,6 @@ let indexColor = ref([ ]); /**表格字段列 */ -//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[]; /**勾选记录 */ 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(() => {