OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

新增首页10s刷新

Browse Source
This commit is contained in:
lai
2023-10-25 17:23:24 +08:00
parent 31687125f8
commit a7ad5208b9
1 changed files with 121 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
src/views/index.vue
View File

@@ -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} <br/>{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);
});
</script>
@@ -364,29 +384,39 @@ onMounted(() => {
<div>
<a-drawer :visible="visible" @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.dbInfo')">{{ pronInfo.dbInfo }}</a-descriptions-item>
<a-descriptions-item :label="t('views.index.ipAddress')">{{ pronInfo.ipAddress }}</a-descriptions-item>
<a-descriptions-item :label="t('views.index.port')">{{ pronInfo.port }}</a-descriptions-item>
<a-descriptions-item :label="t('views.index.version')">{{ pronInfo.version }}</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.capability')">{{ pronInfo.capability }}</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>
<template v-if="nfInfo.obj === 'OMC'">
<a-descriptions-item label="版本号">{{ nfInfo.version }}</a-descriptions-item>
<a-descriptions-item label="系统状态">{{ nfInfo.status }}</a-descriptions-item>
</template>
<template v-else>
<a-descriptions-item label="序列号">{{ nfInfo.number }}</a-descriptions-item>
<a-descriptions-item label="许可证到期日期">{{ nfInfo.outTimeDate }}</a-descriptions-item>
</template>
<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.dbInfo')">{{
pronInfo.dbInfo
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.index.ipAddress')">{{
pronInfo.ipAddress
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.index.port')">{{
pronInfo.port
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.index.version')">{{
pronInfo.version
}}</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.capability')">{{
pronInfo.capability
}}</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>
@@ -407,7 +437,9 @@ onMounted(() => {
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'status'">
<div v-if="record.status == '正常'">
<a-tag color="blue" @click="init(record)">{{ record.name }}</a-tag>
<a-tag color="blue" @click="init(record)">{{
record.name
}}</a-tag>
</div>
<div v-else>
<a-tag color="pink">{{ record.name }}</a-tag>
@@ -418,27 +450,41 @@ onMounted(() => {
</a-col>
<a-col :lg="10" :md="8" :xs="24">
<a-card title="运行状态" style="margin-bottom: 16px">
<div id="echarts-records" style="width: 100%;min-height:200px"></div>
<div
id="echarts-records"
style="width: 100%; min-height: 200px"
></div>
</a-card>
<a-card title="简略信息" style="margin-top: 16px">
<a-descriptions bordered :column="1" :label-style="{ width: '160px' }">
<a-descriptions-item label="对象">{{ nfInfo.obj }}</a-descriptions-item>
<a-descriptions
bordered
:column="1"
:label-style="{ width: '160px' }"
>
<a-descriptions-item label="对象">{{
nfInfo.obj
}}</a-descriptions-item>
<template v-if="nfInfo.obj === 'OMC'">
<a-descriptions-item label="版本号">{{ nfInfo.version }}</a-descriptions-item>
<a-descriptions-item label="系统状态">{{ nfInfo.status }}</a-descriptions-item>
<a-descriptions-item label="版本号">{{
nfInfo.version
}}</a-descriptions-item>
<a-descriptions-item label="系统状态">{{
nfInfo.status
}}</a-descriptions-item>
</template>
<template v-else>
<a-descriptions-item label="序列号">{{ nfInfo.number }}</a-descriptions-item>
<a-descriptions-item label="许可证到期日期">{{ nfInfo.outTimeDate }}</a-descriptions-item>
<a-descriptions-item label="序列号">{{
nfInfo.number
}}</a-descriptions-item>
<a-descriptions-item label="许可证到期日期">{{
nfInfo.outTimeDate
}}</a-descriptions-item>
</template>
</a-descriptions>
</a-card>
</a-col>
</a-row>
</PageContainer>
</template>
<style lang="less" scoped></style>