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

add allNe Tooltip

Browse Source
This commit is contained in:
lai
2025-05-23 17:08:04 +08:00
parent af513ba157
commit f2018eca30
5 changed files with 124 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -236,8 +236,11 @@ function handleRanderChart(
}
function fnChangeData(data: any[], itemID: string) {
let info = data.find((item: any) => item.id === itemID);
if (!info || !info.neState.online) return;
const neType=itemID.split('_')[0];
const neID=itemID.split('_')[1];
let info = data.find((item: any) => item.id === neType);
if (!info || !info.neStateMap[neID]?.online) return;
// if (!info.neState.online) {
// info = data.find((item: any) => item.id === itemID);
// graphNodeClickID.value = itemID;
@@ -249,16 +252,16 @@ function fnChangeData(data: any[], itemID: string) {
// 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);
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.neState.cpu.sysCpuUsage;
let sysCpu = +(info.neState.cpu.sysCpuUsage / 100);
sysCpuUsage = info.neStateMap[neID].cpu.sysCpuUsage;
let sysCpu = +(info.neStateMap[neID].cpu.sysCpuUsage / 100);
sysCpuUsage = +sysCpu.toFixed(2);
if (sysCpuUsage > 100) {
sysCpuUsage = 100;
@@ -266,8 +269,8 @@ function fnChangeData(data: any[], itemID: string) {
}
let sysMemUsage = 0;
if (info.neState.mem) {
const men = info.neState.mem.sysMemUsage;
if (info.neStateMap[neID].mem) {
const men = info.neStateMap[neID].mem.sysMemUsage;
sysMemUsage = +(men / 100).toFixed(2);
if (sysMemUsage > 100) {
sysMemUsage = 100;
@@ -275,8 +278,8 @@ function fnChangeData(data: any[], itemID: string) {
}
let sysDiskUsage = 0;
if (info.neState.disk && Array.isArray(info.neState.disk.partitionInfo)) {
let disks: any[] = info.neState.disk.partitionInfo;
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];

9
src/views/dashboard/overview/components/Topology/index.vue
View File

@@ -27,6 +27,7 @@ const graphNodeTooltip = new Tooltip({
getContent(evt) {
if (!evt) return t('views.monitor.topologyBuild.graphNotInfo');
const { id, label, neState, neInfoList, neStateMap }: any = evt.item?.getModel();
//console.log(neInfoList,neState,neInfoList);
if (notNeNodes.includes(id)) {
return `<div><span>${label || id}</span></div>`;
}
@@ -122,7 +123,7 @@ const graphNodeTooltip = new Tooltip({
? (neStateInfo.online
? t('views.monitor.topology.normalcy')
: t('views.monitor.topology.exceptions'))
: '未知'
: 'undefined'
}
</span></div>
${index < sameTypeNes.length - 1 ? '<div>------------------------</div>' : ''}
@@ -253,8 +254,9 @@ function handleRanderGraph(
// 图片路径处理
if (node.img) node.img = parseBasePath(node.img);
if (node.icon && node.icon.show && node.icon?.img)
if (node.icon.show && node.icon?.img){
node.icon.img = parseBasePath(node.icon.img);
}
// 遍历是否有网元数据
const nodeID: string = node.id;
@@ -263,11 +265,12 @@ function handleRanderGraph(
if (notNeNodes.includes(nodeID)) {
return true;
}
//(neTypeMap.get(nodeID),nodeID,node.neState)
// 处理网元节点
if (neTypeMap.has(nodeID)) {
// all NeInfo
Reflect.set(node, 'neInfoList', neTypeMap.get(nodeID));
Reflect.set(node, 'neInfo', neTypeMap.get(nodeID)[0] || {});
return true;
}

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

@@ -35,16 +35,20 @@ export const graphState = reactive<Record<string, any>>({
export const graphG6 = ref<any>(null);
/**图点击选择 */
export const graphNodeClickID = ref<string>('UPF');
export const graphNodeClickID = ref<string>('UPF_001');
/**图节点网元信息状态 */
export const graphNodeState = computed(() =>
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,
neStateMap: item.neStateMap,
}))
}
);
/**图节点网元状态数量 */
@@ -69,8 +73,13 @@ 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);
const { combos, edges, nodes } = graphState.data;
const node = nodes.find((item: Record<string, any>) => item.id === neType);
//console.log('neStateParse',node);
if (!node) return;
// 初始化状态映射
@@ -83,28 +92,32 @@ export function neStateParse(neType: string, data: Record<string, any>,neId: str
online: !!data.cpu,
neId: neId
};
// 如果是主要网元，更新节点状态
// 如果是001，更新节点状态。neInfo为主要的网元信息
if (node.neInfo && node.neInfo.neId === neId) {
// 使用Object.assign更新状态，确保所有字段都被正确复制
Object.assign(node.neState, newNeState);
}
//console.log(node.neState)
// 无论是否为主要网元，都更新状态映射
node.neStateMap[neId] = {...newNeState}; // 创建副本存储
// 通过 ID 查询节点实例
node.neStateMap[neId] = {...newNeState};
// 通过 ID 查询节点实例
const item = graphG6.value.findById(node.id);
if (item) {
// 如果是主要网元，更新节点显示状态
if (node.neInfo && node.neInfo.neId === neId) {
const stateColor = newNeState.online ? '#52c41a' : '#f5222d'; // 状态颜色
// 检查当前节点下所有网元的状态
const allStates = Object.values(node.neStateMap);
// 判断状态颜色
let stateColor = '#52c41a'; // 默认绿色（所有网元都正常）
if (allStates.some((state: any) => !state.online)) {
// 如果有任何一个网元不正常
stateColor = allStates.every((state: any) => !state.online) ? '#f5222d' : '#faad14'; // 红色（全部不正常）或黄色（部分不正常）
}
// 图片类型不能填充
if (node.type && node.type.startsWith('image')) {
// 更新节点
if (node.label !== newNeState.neName) {
if (node.label !== newNeState.neType) {
graphG6.value.updateItem(item, {
label: newNeState.neName,
label: newNeState.neType,
});
}
// 设置状态
@@ -112,7 +125,7 @@ export function neStateParse(neType: string, data: Record<string, any>,neId: str
} else {
// 更新节点
graphG6.value.updateItem(item, {
label: newNeState.neName,
label: newNeState.neType,
style: {
fill: stateColor, // 填充色
stroke: stateColor, // 填充色
@@ -121,7 +134,7 @@ export function neStateParse(neType: string, data: Record<string, any>,neId: str
// 设置状态
graphG6.value.setItemState(item, 'stroke', newNeState.online);
}
}
}
// 设置边状态
@@ -179,6 +192,6 @@ export function topologyReset() {
nodes: [],
};
graphG6.value = null;
graphNodeClickID.value = 'UPF';
graphNodeClickID.value = 'UPF_001';
neStateRequestMap.value = new Map();
}

179
src/views/dashboard/overview/index.vue
View File

@@ -91,6 +91,7 @@ function fnGetNeState() {
for (const neInfo of neInfoList) {
if (!neInfo.neType || !neInfo.neId) continue;
wsSend({
@@ -173,9 +174,9 @@ async function fnGetSkim() {
const handler = neHandlers.get(child.neType);
return handler
? {
promise: handler.request(child.neId),
process: handler.process,
}
promise: handler.request(child.neId),
process: handler.process,
}
: null;
})
.filter(Boolean) || []
@@ -209,6 +210,8 @@ async function fnGetSkim() {
});
}
/**初始数据函数 */
function loadData() {
fnGetNeState(); // 获取网元状态
@@ -237,7 +240,7 @@ function loadData() {
if (!interval5s.value || !initFlag) return;
fnGetSkim(); // 获取概览信息
fnGetNeState(); // 获取网元状态
}, 5_000);
}, 10_000);
}
/**栏目信息跳转 */
@@ -264,6 +267,8 @@ function fnSelectNe(value: any, option: any) {
let udmNeId = ref<string>('001');
let udmOtions = ref<Record<string, any>[]>([]);
let onlineOtions = ref<Record<string, any>[]>([]);
/**用户数量-选择UDM */
function fnSelectUDM(e: any) {
udmNeId.value = e.key;
@@ -273,7 +278,11 @@ function fnSelectUDM(e: any) {
}
});
}
/**资源控制-选择NE */
function fnSelectNeRe(e: any) {
graphNodeClickID.value = e.key;
}
//
// 定义一个方法返回 views 容器
const getPopupContainer = () => {
// 使用 ref 或其他方式来引用你的 views 容器
@@ -300,19 +309,29 @@ onMounted(() => {
//queryParams.neRealId = arr[0].value;
fnSelectNe(arr[0].value, arr[0]);
}
//online Ne
let onlineArr: Record<string, any>[] = [];
// UDM
let arr1: Record<string, any>[] = [];
res.data.forEach((v: any) => {
if (v.status && ['UDM', 'UPF', 'AUSF', 'PCF', 'SMF', 'AMF', 'OMC', 'SMSC', 'IMS', 'MME'].includes(v.neType)) {
onlineArr.push({ value: v.neType + '_' + v.neId, label: v.neName, rmUid: v.rmUid });
}
if (v.neType === 'UDM') {
arr1.push({ value: v.neId, label: v.neName, rmUid: v.rmUid });
}
});
udmOtions.value = arr1;
onlineOtions.value = onlineArr;
if (arr1.length > 0) {
fnSelectUDM({ key: arr1[0].value });
}
if (onlineArr.length > 0) {
fnSelectNeRe({ key: onlineArr[0].value });
}
// 过滤不可用的网元
neCascaderOptions.value = neInfoStore.getNeCascaderOptions.filter(
(item: any) => {
@@ -354,11 +373,7 @@ onBeforeUnmount(() => {
<template>
<div class="viewport" ref="viewportDom">
<div class="brand">
<div
class="brand-title"
@click="toggle"
:title="t('views.dashboard.overview.fullscreen')"
>
<div class="brand-title" @click="toggle" :title="t('views.dashboard.overview.fullscreen')">
{{ t('views.dashboard.overview.title') }}
<FullscreenExitOutlined v-if="isFullscreen" />
<FullscreenOutlined v-else />
@@ -375,29 +390,20 @@ onBeforeUnmount(() => {
{{ t('views.dashboard.overview.skim.userTitle') }}
</h3>
<div class="data">
<div
class="item toRouter"
:title="t('views.dashboard.overview.toRouter')"
>
<div class="item toRouter" :title="t('views.dashboard.overview.toRouter')">
<div @click="fnToRouter('Sub_2010')">
<UserOutlined
style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
/>
<UserOutlined style="color: #4096ff; margin-right: 8px; font-size: 1.1rem" />
{{ skimState.udmSubNum }}
</div>
<span>
<a-dropdown :trigger="['click']">
<a-dropdown :trigger="['click']" :get-Popup-Container="getPopupContainer">
<div class="toDeep-text">
{{ t('views.dashboard.overview.skim.users') }}
<DownOutlined style="margin-left: 12px; font-size: 12px" />
</div>
<template #overlay>
<a-menu @click="fnSelectUDM">
<a-menu-item
v-for="v in udmOtions"
:key="v.value"
:disabled="udmNeId === v.value"
>
<a-menu-item v-for="v in udmOtions" :key="v.value" :disabled="udmNeId === v.value">
{{ v.label }}
</a-menu-item>
</a-menu>
@@ -405,13 +411,8 @@ onBeforeUnmount(() => {
</a-dropdown>
</span>
</div>
<div
class="item toRouter"
@click="fnToRouter('Ims_2080')"
:title="t('views.dashboard.overview.toRouter')"
style="margin: 0 12px"
v-perms:has="['dashboard:overview:imsUeNum']"
>
<div class="item toRouter" @click="fnToRouter('Ims_2080')" :title="t('views.dashboard.overview.toRouter')"
style="margin: 0 12px" v-perms:has="['dashboard:overview:imsUeNum']">
<div>
<img :src="svgUserIMS" style="width: 18px; margin-right: 8px" />
{{ skimState.imsUeNum }}
@@ -420,12 +421,8 @@ onBeforeUnmount(() => {
{{ t('views.dashboard.overview.skim.imsUeNum') }}
</span>
</div>
<div
class="item toRouter"
@click="fnToRouter('Ue_2081')"
:title="t('views.dashboard.overview.toRouter')"
v-perms:has="['dashboard:overview:smfUeNum']"
>
<div class="item toRouter" @click="fnToRouter('Ue_2081')" :title="t('views.dashboard.overview.toRouter')"
v-perms:has="['dashboard:overview:smfUeNum']">
<div>
<img :src="svgUserSMF" style="width: 18px; margin-right: 8px" />
{{ skimState.smfUeNum }}
@@ -444,29 +441,18 @@ onBeforeUnmount(() => {
{{ t('views.dashboard.overview.skim.baseTitle') }}
</h3>
<div class="data">
<div
class="item toRouter"
@click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
:title="t('views.dashboard.overview.toRouter')"
>
<div class="item toRouter" @click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
:title="t('views.dashboard.overview.toRouter')">
<div style="align-items: flex-start">
<img
:src="svgBase"
style="width: 18px; margin-right: 8px; height: 2rem"
/>
<img :src="svgBase" style="width: 18px; margin-right: 8px; height: 2rem" />
{{ skimState.gnbNum }}
</div>
<span>{{ t('views.dashboard.overview.skim.gnbBase') }}</span>
</div>
<div
class="item toRouter"
@click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
:title="t('views.dashboard.overview.toRouter')"
>
<div class="item toRouter" @click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
:title="t('views.dashboard.overview.toRouter')">
<div style="align-items: flex-start">
<UserOutlined
style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
/>
<UserOutlined style="color: #4096ff; margin-right: 8px; font-size: 1.1rem" />
{{ skimState.gnbUeNum }}
</div>
<span>{{ t('views.dashboard.overview.skim.gnbUeNum') }}</span>
@@ -481,29 +467,18 @@ onBeforeUnmount(() => {
{{ t('views.dashboard.overview.skim.baseTitle') }}
</h3>
<div class="data">
<div
class="item toRouter"
@click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
:title="t('views.dashboard.overview.toRouter')"
>
<div class="item toRouter" @click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
:title="t('views.dashboard.overview.toRouter')">
<div style="align-items: flex-start">
<img
:src="svgBase"
style="width: 18px; margin-right: 8px; height: 2rem"
/>
<img :src="svgBase" style="width: 18px; margin-right: 8px; height: 2rem" />
{{ skimState.enbNum }}
</div>
<span>{{ t('views.dashboard.overview.skim.enbBase') }}</span>
</div>
<div
class="item toRouter"
@click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
:title="t('views.dashboard.overview.toRouter')"
>
<div class="item toRouter" @click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
:title="t('views.dashboard.overview.toRouter')">
<div style="align-items: flex-start">
<UserOutlined
style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
/>
<UserOutlined style="color: #4096ff; margin-right: 8px; font-size: 1.1rem" />
{{ skimState.enbUeNum }}
</div>
<span>{{ t('views.dashboard.overview.skim.enbUeNum') }}</span>
@@ -529,23 +504,14 @@ onBeforeUnmount(() => {
<!-- 实时流量 -->
<div class="upfFlow panel">
<div class="inner">
<h3
class="toRouter"
:title="t('views.dashboard.overview.toRouter')"
style="display: flex; align-items: center"
>
<h3 class="toRouter" :title="t('views.dashboard.overview.toRouter')"
style="display: flex; align-items: center">
<AreaChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
<span @click="fnToRouter('GoldTarget_2104')">{{
t('views.dashboard.overview.upfFlow.title')
}}</span>
<a-select
v-model:value="upfWhoId"
:options="neOtions"
:get-Popup-Container="getPopupContainer"
class="toDeep"
style="width: 100px; color: #fff; margin-left: auto"
@change="fnSelectNe"
/>
<a-select v-model:value="upfWhoId" :options="neOtions" :get-Popup-Container="getPopupContainer"
class="toDeep" style="width: 100px; color: #fff; margin-left: auto" @change="fnSelectNe" />
</h3>
<div class="chart">
@@ -556,11 +522,8 @@ onBeforeUnmount(() => {
<!-- 网络拓扑 -->
<div class="topology panel">
<div class="inner">
<h3
class="toRouter"
@click="fnToRouter('TopologyArchitecture_2128')"
:title="t('views.dashboard.overview.toRouter')"
>
<h3 class="toRouter" @click="fnToRouter('TopologyArchitecture_2128')"
:title="t('views.dashboard.overview.toRouter')">
<span>
<ApartmentOutlined style="color: #68d8fe" />&nbsp;&nbsp;
{{ t('views.dashboard.overview.topology.title') }}
@@ -590,17 +553,11 @@ onBeforeUnmount(() => {
<!-- 筛选 -->
<div class="filter">
<span
:data-key="v"
:class="{ active: upfTFActive === v }"
v-for="v in ['0', '7', '30']"
:key="v"
@click="
() => {
upfTFActive = v;
}
"
>
<span :data-key="v" :class="{ active: upfTFActive === v }" v-for="v in ['0', '7', '30']" :key="v" @click="
() => {
upfTFActive = v;
}
">
{{
v === '0'
? '24' + t('common.units.hour')
@@ -633,11 +590,7 @@ onBeforeUnmount(() => {
<!-- 告警统计 -->
<div class="alarmType panel">
<div class="inner">
<h3
class="toRouter"
@click="fnToRouter('HistoryAlarm_2097')"
:title="t('views.dashboard.overview.toRouter')"
>
<h3 class="toRouter" @click="fnToRouter('HistoryAlarm_2097')" :title="t('views.dashboard.overview.toRouter')">
<PieChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
{{ t('views.dashboard.overview.alarmTypeBar.alarmSum') }}
</h3>
@@ -649,10 +602,22 @@ onBeforeUnmount(() => {
<!-- 资源情况 -->
<div class="resources panel">
<div class="inner">
<h3>
<h3 style="display: flex; align-items: center;">
<DashboardOutlined style="color: #68d8fe" />&nbsp;&nbsp;
{{ t('views.dashboard.overview.resources.title') }}：
{{ graphNodeClickID }}
<a-dropdown :trigger="['click']" :get-Popup-Container="getPopupContainer">
<div class="toDeep-text">
{{ graphNodeClickID }}
<DownOutlined style="margin-left: 12px; font-size: 12px" />
</div>
<template #overlay>
<a-menu @click="fnSelectNeRe">
<a-menu-item v-for="v in onlineOtions" :key="v.value">
{{ v.label }}
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</h3>
<div class="chart">
<NeResources />
@@ -665,6 +630,7 @@ onBeforeUnmount(() => {
<style lang="less" scoped>
@import url('./css/index.css');
.toDeep {
--editor-background-color: blue;
}
@@ -681,6 +647,7 @@ onBeforeUnmount(() => {
.toDeep :deep(.ant-select-selection-item) {
color: #fff;
}
.toDeep-text {
color: #4c9bfd !important;
font-size: 0.844rem !important;

2
src/views/monitor/topologyArchitecture/index.vue
View File

@@ -539,7 +539,7 @@ function wsMessage(res: Record<string, any>) {
// 图片类型不能填充
if (node.type && node.type.startsWith('image')) {
// 更新节点
if (node.label !== node.neInfo.neName) {
if (node.label !== node.neInfo.neType) {
graphG6.value.updateItem(item, {
label: node.neInfo.neType,
});