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 { PageContainer } from '@ant-design-vue/pro-layout';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { ColumnsType } from 'ant-design-vue/lib/table';
import { message } from 'ant-design-vue/lib'; 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 { listMain } from '@/api/index';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { TooltipComponent } from 'echarts/components'; import { TooltipComponent } from 'echarts/components';
@@ -82,11 +82,11 @@ let tableState: TabeStateType = reactive({
/**表格状态 */ /**表格状态 */
let nfInfo: any = reactive({ let nfInfo: any = reactive({
obj: "OMC", obj: 'OMC',
version: "1.6.2", version: '1.6.2',
status: "正常", status: '正常',
number: "", number: '',
outTimeDate: "", outTimeDate: '',
}); });
/**表格状态类型 */ /**表格状态类型 */
@@ -112,22 +112,23 @@ type nfStateType = {
/**序列号 */ /**序列号 */
serialNum: string; serialNum: string;
/**许可证到期日期 */ /**许可证到期日期 */
/* selectedRowKeys: (string | number)[];*/ /* selectedRowKeys: (string | number)[];*/
expiryDate:string expiryDate: string;
}; };
/**网元详细信息 */ /**网元详细信息 */
let pronInfo: nfStateType = reactive({ let pronInfo: nfStateType = reactive({
hostName: '5gc', 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', dbInfo: 'adb v1.0.1',
ipAddress: '-', ipAddress: '-',
port:3030, port: 3030,
version: '-', version: '-',
cpuUse: '-', cpuUse: '-',
memoryUse:'-', memoryUse: '-',
capability:0 , capability: 0,
serialNum: '-', serialNum: '-',
expiryDate:"-", expiryDate: '-',
}); });
/**查询网元状态列表 */ /**查询网元状态列表 */
@@ -202,11 +203,13 @@ function init(e: any) {
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
myChart.clear(); //怕遗留以前得元素 myChart.clear(); //怕遗留以前得元素
let cpuUsage = realData.cpuUsage let cpuUsage = realData.cpuUsage;
let memUsage = realData.memUsage let memUsage = realData.memUsage;
var nfMenUsage = Math.round((memUsage?.nfUsedMem / memUsage?.totalMem) * 10000) / 100.0; var nfMenUsage =
let partitionInfo = realData.diskSpace?.partitionInfo[1] Math.round((memUsage?.nfUsedMem / memUsage?.totalMem) * 10000) / 100.0;
var nfMaxDiskSpace = Math.round((partitionInfo?.used / partitionInfo?.total) * 10000 ) / 100.0; let partitionInfo = realData.diskSpace?.partitionInfo[1];
var nfMaxDiskSpace =
Math.round((partitionInfo?.used / partitionInfo?.total) * 10000) / 100.0;
let option = { let option = {
tooltip: { tooltip: {
formatter: '{a} <br/>{b} : {c}%', formatter: '{a} <br/>{b} : {c}%',
@@ -226,7 +229,6 @@ function init(e: any) {
show: true, show: true,
//指针长度 //指针长度
length: '60%', length: '60%',
}, },
title: { title: {
offsetCenter: [0, '90%'], offsetCenter: [0, '90%'],
@@ -311,8 +313,6 @@ function init(e: any) {
nfInfo.obj = realData.name; nfInfo.obj = realData.name;
nfInfo.number = realData.serialNum; nfInfo.number = realData.serialNum;
nfInfo.outTimeDate = realData.expiryDate; nfInfo.outTimeDate = realData.expiryDate;
} }
/**抽屉 网元详细信息 */ /**抽屉 网元详细信息 */
@@ -323,39 +323,59 @@ const closeDrawer = () => {
/**抽屉 网元详细信息 */ /**抽屉 网元详细信息 */
/**监听表格行事件*/ /**监听表格行事件*/
function rowClick(record:any, index:any) { function rowClick(record: any, index: any) {
return { return {
onClick: (event:any) => { onClick: (event: any) => {
if (toRaw(record).status=='异常'){ if (toRaw(record).status == '异常') {
message.error(`网元状态异常`, 2); message.error(`网元状态异常`, 2);
return false; return false;
}else { } else {
let pronData=toRaw(record); let pronData = toRaw(record);
//渲染详细信息 //渲染详细信息
pronInfo={ pronInfo = {
hostName: pronData.hostName, hostName: pronData.hostName,
osInfo:pronData.osInfo, osInfo: pronData.osInfo,
dbInfo: pronData.dbInfo, dbInfo: pronData.dbInfo,
ipAddress:pronData.ipAddress, ipAddress: pronData.ipAddress,
port:pronData.port, port: pronData.port,
version:pronData.version, version: pronData.version,
cpuUse:pronData.name+":"+pronData.cpuUsage?.nfCpuUsage/100+"%; "+"SYS:"+pronData.cpuUsage?.sysCpuUsage / 100+"%", cpuUse:
memoryUse:"Total:"+pronData.memUsage?.totalMem+"KB; "+pronData.name+":"+pronData.memUsage?.nfUsedMem+"KB; SYS:"+pronData.memUsage?.sysMemUsage+"KB", pronData.name +
capability:pronData.capability , ':' +
serialNum:pronData.serialNum, pronData.cpuUsage?.nfCpuUsage / 100 +
expiryDate:pronData.expiryDate, '%; ' +
} '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; visible.value = true;
}, },
}; };
} }
let timer: any;
onMounted(() => { onMounted(() => {
fnGetList(); fnGetList();
timer = setInterval(fnGetList, 10000); // 每隔10秒执行一次
});
// 在组件卸载之前清除定时器
onBeforeUnmount(() => {
clearInterval(timer);
}); });
</script> </script>
@@ -364,29 +384,39 @@ onMounted(() => {
<div> <div>
<a-drawer :visible="visible" @close="closeDrawer" :width="700"> <a-drawer :visible="visible" @close="closeDrawer" :width="700">
<a-descriptions bordered :column="1" :label-style="{ width: '160px' }"> <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.hostName')">{{
<a-descriptions-item :label="t('views.index.osInfo')">{{ pronInfo.osInfo }}</a-descriptions-item> pronInfo.hostName
<a-descriptions-item :label="t('views.index.dbInfo')">{{ pronInfo.dbInfo }}</a-descriptions-item> }}</a-descriptions-item>
<a-descriptions-item :label="t('views.index.ipAddress')">{{ pronInfo.ipAddress }}</a-descriptions-item> <a-descriptions-item :label="t('views.index.osInfo')">{{
<a-descriptions-item :label="t('views.index.port')">{{ pronInfo.port }}</a-descriptions-item> pronInfo.osInfo
<a-descriptions-item :label="t('views.index.version')">{{ pronInfo.version }}</a-descriptions-item> }}</a-descriptions-item>
<a-descriptions-item :label="t('views.index.cpuUse')">{{ pronInfo.cpuUse }}</a-descriptions-item> <a-descriptions-item :label="t('views.index.dbInfo')">{{
<a-descriptions-item :label="t('views.index.memoryUse')">{{ pronInfo.memoryUse }}</a-descriptions-item> pronInfo.dbInfo
<a-descriptions-item :label="t('views.index.capability')">{{ pronInfo.capability }}</a-descriptions-item> }}</a-descriptions-item>
<a-descriptions-item :label="t('views.index.serialNum')">{{ pronInfo.serialNum }}</a-descriptions-item> <a-descriptions-item :label="t('views.index.ipAddress')">{{
<a-descriptions-item :label="t('views.index.expiryDate')">{{ pronInfo.expiryDate }}</a-descriptions-item> pronInfo.ipAddress
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.index.port')">{{
pronInfo.port
<template v-if="nfInfo.obj === 'OMC'"> }}</a-descriptions-item>
<a-descriptions-item label="版本号">{{ nfInfo.version }}</a-descriptions-item> <a-descriptions-item :label="t('views.index.version')">{{
<a-descriptions-item label="系统状态">{{ nfInfo.status }}</a-descriptions-item> pronInfo.version
</template> }}</a-descriptions-item>
<template v-else> <a-descriptions-item :label="t('views.index.cpuUse')">{{
<a-descriptions-item label="序列号">{{ nfInfo.number }}</a-descriptions-item> pronInfo.cpuUse
<a-descriptions-item label="许可证到期日期">{{ nfInfo.outTimeDate }}</a-descriptions-item> }}</a-descriptions-item>
</template> <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-descriptions>
</a-drawer> </a-drawer>
</div> </div>
@@ -407,7 +437,9 @@ onMounted(() => {
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'status'"> <template v-if="column.key === 'status'">
<div v-if="record.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>
<div v-else> <div v-else>
<a-tag color="pink">{{ record.name }}</a-tag> <a-tag color="pink">{{ record.name }}</a-tag>
@@ -418,27 +450,41 @@ onMounted(() => {
</a-col> </a-col>
<a-col :lg="10" :md="8" :xs="24"> <a-col :lg="10" :md="8" :xs="24">
<a-card title="运行状态" style="margin-bottom: 16px"> <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>
<a-card title="简略信息" style="margin-top: 16px"> <a-card title="简略信息" style="margin-top: 16px">
<a-descriptions bordered :column="1" :label-style="{ width: '160px' }"> <a-descriptions
<a-descriptions-item label="对象">{{ nfInfo.obj }}</a-descriptions-item> bordered
:column="1"
:label-style="{ width: '160px' }"
>
<a-descriptions-item label="对象">{{
nfInfo.obj
}}</a-descriptions-item>
<template v-if="nfInfo.obj === 'OMC'"> <template v-if="nfInfo.obj === 'OMC'">
<a-descriptions-item label="版本号">{{ nfInfo.version }}</a-descriptions-item> <a-descriptions-item label="版本号">{{
<a-descriptions-item label="系统状态">{{ nfInfo.status }}</a-descriptions-item> nfInfo.version
}}</a-descriptions-item>
<a-descriptions-item label="系统状态">{{
nfInfo.status
}}</a-descriptions-item>
</template> </template>
<template v-else> <template v-else>
<a-descriptions-item label="序列号">{{ nfInfo.number }}</a-descriptions-item> <a-descriptions-item label="序列号">{{
<a-descriptions-item label="许可证到期日期">{{ nfInfo.outTimeDate }}</a-descriptions-item> nfInfo.number
}}</a-descriptions-item>
<a-descriptions-item label="许可证到期日期">{{
nfInfo.outTimeDate
}}</a-descriptions-item>
</template> </template>
</a-descriptions> </a-descriptions>
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
</PageContainer> </PageContainer>
</template> </template>
<style lang="less" scoped></style> <style lang="less" scoped></style>