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

ref: 重构获取网元状态信息

Browse Source
This commit is contained in:
TsMask
2025-10-27 15:16:30 +08:00
parent 0b15ff1476
commit 90395e7464
7 changed files with 181 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/views/dashboard/overview/components/NeResources/index.vue
View File

@@ -247,42 +247,7 @@ function fnChangeData(data: any[], itemID: string) {
// console.log(info.neState.cpu.sysCpuUsage);
// console.log(info.neState.mem);
// console.log(info.neState.disk);
let sysCpuUsage = 0;
let nfCpuUsage = 0;
if (info.neState.cpu) {
nfCpuUsage = info.neState.cpu.nfCpuUsage;
const nfCpu = +(info.neState.cpu.nfCpuUsage / 100);
nfCpuUsage = +nfCpu.toFixed(2);
if (nfCpuUsage > 100) {
nfCpuUsage = 100;
}
sysCpuUsage = info.neState.cpu.sysCpuUsage;
let sysCpu = +(info.neState.cpu.sysCpuUsage / 100);
sysCpuUsage = +sysCpu.toFixed(2);
if (sysCpuUsage > 100) {
sysCpuUsage = 100;
}
}
let sysMemUsage = 0;
if (info.neState.mem) {
const men = info.neState.mem.sysMemUsage;
sysMemUsage = +(men / 100).toFixed(2);
if (sysMemUsage > 100) {
sysMemUsage = 100;
}
}
let sysDiskUsage = 0;
if (info.neState.disk && Array.isArray(info.neState.disk.partitionInfo)) {
let disks: any[] = info.neState.disk.partitionInfo;
disks = disks.sort((a, b) => +b.used - +a.used);
if (disks.length > 0) {
const { total, used } = disks[0];
sysDiskUsage = +((used / total) * 100).toFixed(2);
}
}
const { nfCpuUsage, sysCpuUsage, sysMemUsage, sysDiskUsage } = info.neState
category.value[0].value = sysDiskUsage;
category.value[1].value = sysMemUsage;

3
src/views/dashboard/overview/hooks/useTopology.ts
View File

@@ -74,8 +74,7 @@ export function neStateParse(neType: string, data: Record<string, any>) {
// 更新网元状态
const newNeState = Object.assign(node.neState, data, {
refreshTime: parseDateToStr(data.refreshTime, 'HH:mm:ss'),
online: !!data.cpu,
refreshTime: parseDateToStr(data.refreshTime, 'MM-DD HH:mm:ss'),
});
// 通过 ID 查询节点实例

80
src/views/dashboard/overview2/components/NeResources/index.vue
View File

@@ -71,9 +71,8 @@ const optionData: any = {
label: {
normal: {
formatter: () => {
return `${t('views.dashboard.overview.resources.neCpu')}\n${
resourceData.value.neCpu
}%`;
return `${t('views.dashboard.overview.resources.neCpu')}\n${resourceData.value.neCpu
}%`;
},
textStyle: {
fontSize: 12,
@@ -103,9 +102,8 @@ const optionData: any = {
label: {
normal: {
formatter: () => {
return `${t('views.dashboard.overview.resources.sysCpu')}\n${
resourceData.value.sysCpu
}%`;
return `${t('views.dashboard.overview.resources.sysCpu')}\n${resourceData.value.sysCpu
}%`;
},
textStyle: {
fontSize: 12,
@@ -135,9 +133,8 @@ const optionData: any = {
label: {
normal: {
formatter: () => {
return `${t('views.dashboard.overview.resources.sysMem')}\n${
resourceData.value.sysMem
}%`;
return `${t('views.dashboard.overview.resources.sysMem')}\n${resourceData.value.sysMem
}%`;
},
textStyle: {
fontSize: 12,
@@ -167,9 +164,8 @@ const optionData: any = {
label: {
normal: {
formatter: () => {
return `${t('views.dashboard.overview.resources.sysDisk')}\n${
resourceData.value.sysDisk
}%`;
return `${t('views.dashboard.overview.resources.sysDisk')}\n${resourceData.value.sysDisk
}%`;
},
textStyle: {
fontSize: 12,
@@ -213,45 +209,7 @@ function fnChangeData(data: any[], itemID: string) {
let info = data.find((item: any) => item.id === neType);
if (!info || !info.neStateMap[neID]?.online) return;
let sysCpuUsage = 0;
let nfCpuUsage = 0;
if (info.neStateMap[neID].cpu) {
nfCpuUsage = info.neStateMap[neID].cpu.nfCpuUsage;
const nfCpu = +(info.neStateMap[neID].cpu.nfCpuUsage / 100);
nfCpuUsage = +nfCpu.toFixed(2);
if (nfCpuUsage > 100) {
nfCpuUsage = 100;
}
sysCpuUsage = info.neStateMap[neID].cpu.sysCpuUsage;
let sysCpu = +(info.neStateMap[neID].cpu.sysCpuUsage / 100);
sysCpuUsage = +sysCpu.toFixed(2);
if (sysCpuUsage > 100) {
sysCpuUsage = 100;
}
}
let sysMemUsage = 0;
if (info.neStateMap[neID].mem) {
const men = info.neStateMap[neID].mem.sysMemUsage;
sysMemUsage = +(men / 100).toFixed(2);
if (sysMemUsage > 100) {
sysMemUsage = 100;
}
}
let sysDiskUsage = 0;
if (
info.neStateMap[neID].disk &&
Array.isArray(info.neStateMap[neID].disk.partitionInfo)
) {
let disks: any[] = info.neStateMap[neID].disk.partitionInfo;
disks = disks.sort((a, b) => +b.used - +a.used);
if (disks.length > 0) {
const { total, used } = disks[0];
sysDiskUsage = +((used / total) * 100).toFixed(2);
}
}
const { nfCpuUsage, sysCpuUsage, sysMemUsage, sysDiskUsage } = info.neStateMap[neID]
resourceData.value = {
neCpu: nfCpuUsage,
@@ -269,9 +227,8 @@ function fnChangeData(data: any[], itemID: string) {
label: {
normal: {
formatter: () => {
return `${t('views.dashboard.overview.resources.neCpu')}\n${
resourceData.value.neCpu
}%`;
return `${t('views.dashboard.overview.resources.neCpu')}\n${resourceData.value.neCpu
}%`;
},
},
},
@@ -282,9 +239,8 @@ function fnChangeData(data: any[], itemID: string) {
label: {
normal: {
formatter: () => {
return `${t('views.dashboard.overview.resources.sysCpu')}\n${
resourceData.value.sysCpu
}%`;
return `${t('views.dashboard.overview.resources.sysCpu')}\n${resourceData.value.sysCpu
}%`;
},
},
},
@@ -295,9 +251,8 @@ function fnChangeData(data: any[], itemID: string) {
label: {
normal: {
formatter: () => {
return `${t('views.dashboard.overview.resources.sysMem')}\n${
resourceData.value.sysMem
}%`;
return `${t('views.dashboard.overview.resources.sysMem')}\n${resourceData.value.sysMem
}%`;
},
},
},
@@ -308,9 +263,8 @@ function fnChangeData(data: any[], itemID: string) {
label: {
normal: {
formatter: () => {
return `${t('views.dashboard.overview.resources.sysDisk')}\n${
resourceData.value.sysDisk
}%`;
return `${t('views.dashboard.overview.resources.sysDisk')}\n${resourceData.value.sysDisk
}%`;
},
},
},

90
src/views/dashboard/overview2/hooks/useTopology.ts
View File

@@ -38,18 +38,16 @@ export const graphG6 = ref<any>(null);
export const graphNodeClickID = ref<string>('UPF_001');
/**图节点网元信息状态 */
export const graphNodeState = computed(() =>{
return graphState.data.nodes.map((item: any) => ({
export const graphNodeState = computed(() => {
return graphState.data.nodes.map((item: any) => ({
id: item.id,
label: item.label,
neInfo: item.neInfo,
neState: item.neState,
neInfoList:item.neInfoList,
neInfoList: item.neInfoList,
neStateMap: item.neStateMap,
}))
}
);
}));
});
/**图节点网元状态数量 */
export const graphNodeStateNum = computed(() => {
@@ -72,8 +70,12 @@ export const graphNodeStateNum = computed(() => {
export const neStateRequestMap = ref<Map<string, boolean>>(new Map());
/**neStateParse 网元状态 数据解析 */
export function neStateParse(neType: string, data: Record<string, any>,neId: string) {
// console.log('neStateParse',neType, data, neId);
export function neStateParse(
neType: string,
data: Record<string, any>,
neId: string
) {
// console.log('neStateParse',neType, data, neId);
const { combos, edges, nodes } = graphState.data;
@@ -82,25 +84,24 @@ export function neStateParse(neType: string, data: Record<string, any>,neId: str
if (!node) return;
// 初始化状态映射
if (!node.neStateMap) node.neStateMap = {};
// 初始化状态映射
if (!node.neStateMap) node.neStateMap = {};
// 更新网元状态
const newNeState :any = {
...data, // 先展开data对象
refreshTime: parseDateToStr(data.refreshTime, 'HH:mm:ss'),
online: !!data.cpu,
neId: neId
const newNeState: any = {
...data, // 先展开data对象
refreshTime: parseDateToStr(data.refreshTime, 'MM-DD HH:mm:ss'),
neId: neId,
};
// 如果是001，更新节点状态。neInfo为主要的网元信息
if (node.neInfo && node.neInfo.neId === neId) {
Object.assign(node.neState, newNeState);
}
// 如果是001，更新节点状态。neInfo为主要的网元信息
if (node.neInfo && node.neInfo.neId === neId) {
Object.assign(node.neState, newNeState);
}
//console.log(node.neState)
// 无论是否为主要网元，都更新状态映射
node.neStateMap[neId] = {...newNeState};
// 通过 ID 查询节点实例
//console.log(node.neState)
// 无论是否为主要网元，都更新状态映射
node.neStateMap[neId] = { ...newNeState };
// 通过 ID 查询节点实例
const item = graphG6.value.findById(node.id);
if (item) {
// 检查当前节点下所有网元的状态
@@ -109,32 +110,33 @@ export function neStateParse(neType: string, data: Record<string, any>,neId: str
let stateColor = '#52c41a'; // 默认绿色（所有网元都正常）
if (allStates.some((state: any) => !state.online)) {
// 如果有任何一个网元不正常
stateColor = allStates.every((state: any) => !state.online) ? '#f5222d' : '#faad14'; // 红色（全部不正常）或黄色（部分不正常）
stateColor = allStates.every((state: any) => !state.online)
? '#f5222d'
: '#faad14'; // 红色（全部不正常）或黄色（部分不正常）
}
// 图片类型不能填充
if (node.type && node.type.startsWith('image')) {
// 更新节点
if (node.label !== newNeState.neType) {
graphG6.value.updateItem(item, {
label: newNeState.neType,
});
}
// 设置状态
graphG6.value.setItemState(item, 'top-right-dot', stateColor);
} else {
// 更新节点
// 图片类型不能填充
if (node.type && node.type.startsWith('image')) {
// 更新节点
if (node.label !== newNeState.neType) {
graphG6.value.updateItem(item, {
label: newNeState.neType,
style: {
fill: stateColor, // 填充色
stroke: stateColor, // 填充色
},
});
// 设置状态
graphG6.value.setItemState(item, 'stroke', newNeState.online);
}
// 设置状态
graphG6.value.setItemState(item, 'top-right-dot', stateColor);
} else {
// 更新节点
graphG6.value.updateItem(item, {
label: newNeState.neType,
style: {
fill: stateColor, // 填充色
stroke: stateColor, // 填充色
},
});
// 设置状态
graphG6.value.setItemState(item, 'stroke', newNeState.online);
}
}
// 设置边状态