diff --git a/src/views/index.vue b/src/views/index.vue index ab4cd04c..888eeaed 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -2,7 +2,7 @@ import { PageContainer } from '@ant-design-vue/pro-layout'; import { ColumnsType } from 'ant-design-vue/lib/table'; import { message } from 'ant-design-vue/lib'; -import { reactive, toRaw,ref,onMounted} from 'vue'; +import { reactive, toRaw, ref, onMounted,onBeforeUnmount} from 'vue'; import { listMain } from '@/api/index'; import useI18n from '@/hooks/useI18n'; import { TooltipComponent } from 'echarts/components'; @@ -82,11 +82,11 @@ let tableState: TabeStateType = reactive({ /**表格状态 */ let nfInfo: any = reactive({ - obj: "OMC", - version: "1.6.2", - status: "正常", - number: "", - outTimeDate: "", + obj: 'OMC', + version: '1.6.2', + status: '正常', + number: '', + outTimeDate: '', }); /**表格状态类型 */ @@ -112,22 +112,23 @@ type nfStateType = { /**序列号 */ serialNum: string; /**许可证到期日期 */ -/* selectedRowKeys: (string | number)[];*/ - expiryDate:string + /* selectedRowKeys: (string | number)[];*/ + expiryDate: string; }; /**网元详细信息 */ let pronInfo: nfStateType = reactive({ hostName: '5gc', - osInfo: 'Linux 5gc 4.15.0-112-generic #113-Ubuntu SMP Thu Jul 9 23:41:39 UTC 2020 x86_64 GNU/Linux', + osInfo: + 'Linux 5gc 4.15.0-112-generic #113-Ubuntu SMP Thu Jul 9 23:41:39 UTC 2020 x86_64 GNU/Linux', dbInfo: 'adb v1.0.1', ipAddress: '-', - port:3030, + port: 3030, version: '-', cpuUse: '-', - memoryUse:'-', - capability:0 , + memoryUse: '-', + capability: 0, serialNum: '-', - expiryDate:"-", + expiryDate: '-', }); /**查询网元状态列表 */ @@ -202,11 +203,13 @@ function init(e: any) { var myChart = echarts.init(chartDom); myChart.clear(); //怕遗留以前得元素 - let cpuUsage = realData.cpuUsage - let memUsage = realData.memUsage - var nfMenUsage = Math.round((memUsage?.nfUsedMem / memUsage?.totalMem) * 10000) / 100.0; - let partitionInfo = realData.diskSpace?.partitionInfo[1] - var nfMaxDiskSpace = Math.round((partitionInfo?.used / partitionInfo?.total) * 10000 ) / 100.0; + let cpuUsage = realData.cpuUsage; + let memUsage = realData.memUsage; + var nfMenUsage = + Math.round((memUsage?.nfUsedMem / memUsage?.totalMem) * 10000) / 100.0; + let partitionInfo = realData.diskSpace?.partitionInfo[1]; + var nfMaxDiskSpace = + Math.round((partitionInfo?.used / partitionInfo?.total) * 10000) / 100.0; let option = { tooltip: { formatter: '{a}
{b} : {c}%', @@ -226,7 +229,6 @@ function init(e: any) { show: true, //指针长度 length: '60%', - }, title: { offsetCenter: [0, '90%'], @@ -311,8 +313,6 @@ function init(e: any) { nfInfo.obj = realData.name; nfInfo.number = realData.serialNum; nfInfo.outTimeDate = realData.expiryDate; - - } /**抽屉 网元详细信息 */ @@ -323,39 +323,59 @@ const closeDrawer = () => { /**抽屉 网元详细信息 */ /**监听表格行事件*/ -function rowClick(record:any, index:any) { +function rowClick(record: any, index: any) { return { - onClick: (event:any) => { - if (toRaw(record).status=='异常'){ + onClick: (event: any) => { + if (toRaw(record).status == '异常') { message.error(`网元状态异常`, 2); return false; - }else { - let pronData=toRaw(record); + } else { + let pronData = toRaw(record); //渲染详细信息 - pronInfo={ + pronInfo = { hostName: pronData.hostName, - osInfo:pronData.osInfo, + osInfo: pronData.osInfo, dbInfo: pronData.dbInfo, - ipAddress:pronData.ipAddress, - port:pronData.port, - version:pronData.version, - cpuUse:pronData.name+":"+pronData.cpuUsage?.nfCpuUsage/100+"%; "+"SYS:"+pronData.cpuUsage?.sysCpuUsage / 100+"%", - memoryUse:"Total:"+pronData.memUsage?.totalMem+"KB; "+pronData.name+":"+pronData.memUsage?.nfUsedMem+"KB; SYS:"+pronData.memUsage?.sysMemUsage+"KB", - capability:pronData.capability , - serialNum:pronData.serialNum, - expiryDate:pronData.expiryDate, - } + ipAddress: pronData.ipAddress, + port: pronData.port, + version: pronData.version, + cpuUse: + pronData.name + + ':' + + pronData.cpuUsage?.nfCpuUsage / 100 + + '%; ' + + 'SYS:' + + pronData.cpuUsage?.sysCpuUsage / 100 + + '%', + memoryUse: + 'Total:' + + pronData.memUsage?.totalMem + + 'KB; ' + + pronData.name + + ':' + + pronData.memUsage?.nfUsedMem + + 'KB; SYS:' + + pronData.memUsage?.sysMemUsage + + 'KB', + capability: pronData.capability, + serialNum: pronData.serialNum, + expiryDate: pronData.expiryDate, + }; } visible.value = true; - }, }; } - - +let timer: any; onMounted(() => { - fnGetList(); + timer = setInterval(fnGetList, 10000); // 每隔10秒执行一次 +}); + +// 在组件卸载之前清除定时器 + +onBeforeUnmount(() => { + clearInterval(timer); }); @@ -364,29 +384,39 @@ onMounted(() => {
- {{ pronInfo.hostName }} - {{ pronInfo.osInfo }} - {{ pronInfo.dbInfo }} - {{ pronInfo.ipAddress }} - {{ pronInfo.port }} - {{ pronInfo.version }} - {{ pronInfo.cpuUse }} - {{ pronInfo.memoryUse }} - {{ pronInfo.capability }} - {{ pronInfo.serialNum }} - {{ pronInfo.expiryDate }} - - - - - - + {{ + pronInfo.hostName + }} + {{ + pronInfo.osInfo + }} + {{ + pronInfo.dbInfo + }} + {{ + pronInfo.ipAddress + }} + {{ + pronInfo.port + }} + {{ + pronInfo.version + }} + {{ + pronInfo.cpuUse + }} + {{ + pronInfo.memoryUse + }} + {{ + pronInfo.capability + }} + {{ + pronInfo.serialNum + }} + {{ + pronInfo.expiryDate + }}
@@ -407,7 +437,9 @@ onMounted(() => {