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

fix: 看板UDM签约数据获取x2问题

Browse Source
This commit is contained in:
TsMask
2024-12-23 20:05:13 +08:00
parent 41e37766b7
commit b7da976819
1 changed files with 187 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -102,111 +102,82 @@ function fnGetNeState() {
/**获取概览信息 */ /**获取概览信息 */
async function fnGetSkim() { async function fnGetSkim() {
// console.log(neCascaderOptions.value);
// const resArr = await Promise.allSettled([
// listUDMSub({
// neid: '001',
// pageNum: 1,
// pageSize: 1,
// }),
// listUENumBySMF('001'),
// listUENumByIMS('001'),
// listBase5G({
// neType: 'AMF',
// neId: '001',
// }),
// listBase5G({
// neType: 'MME',
// neId: '001',
// }),
// ]);
// if (resArr[0].status === 'fulfilled') {
// const res0 = resArr[0].value;
// if (res0.code === RESULT_CODE_SUCCESS) {
// skimState.udmSubNum = res0.total;
// }
// }
// if (resArr[1].status === 'fulfilled') {
// const res1 = resArr[1].value;
// if (res1.code === RESULT_CODE_SUCCESS) {
// skimState.smfUeNum = res1.data;
// }
// }
// if (resArr[2].status === 'fulfilled') {
// const res2 = resArr[2].value;
// if (res2.code === RESULT_CODE_SUCCESS) {
// skimState.imsUeNum = res2.data;
// }
// }
// if (resArr[3].status === 'fulfilled') {
// const res3 = resArr[3].value;
// if (res3.code === RESULT_CODE_SUCCESS) {
// skimState.gnbNum = res3.total;
// skimState.gnbUeNum = 0;
// res3.rows.map((item: any) => {
// skimState.gnbUeNum += item.ueNum;
// });
// }
// }
// if (resArr[4].status === 'fulfilled') {
// const res4 = resArr[4].value;
// if (res4.code === RESULT_CODE_SUCCESS) {
// skimState.enbNum = res4.total;
// skimState.enbUeNum = 0;
// res4.rows.map((item: any) => {
// skimState.enbUeNum += item.ueNum;
// });
// }
// }
const neHandlers = new Map([ const neHandlers = new Map([
['UDM', { [
request: (neId: string) => listUDMSub({ neid: neId, pageNum: 1, pageSize: 1 }), 'UDM',
process: (res: any) => res.code === RESULT_CODE_SUCCESS && (skimState.udmSubNum += res.total) {
}], request: (neId: string) =>
['SMF', { listUDMSub({ neId: neId, pageNum: 1, pageSize: 1 }),
request: (neId: string) => listUENumBySMF(neId), process: (res: any) =>
process: (res: any) => res.code === RESULT_CODE_SUCCESS && (skimState.smfUeNum += res.data) res.code === RESULT_CODE_SUCCESS &&
}], (skimState.udmSubNum += res.total),
['IMS', { },
request: (neId: string) => listUENumByIMS(neId), ],
process: (res: any) => res.code === RESULT_CODE_SUCCESS && (skimState.imsUeNum += res.data) [
}], 'SMF',
['AMF', { {
request: (neId: string) => listBase5G({ neType: 'AMF', neId }), request: (neId: string) => listUENumBySMF(neId),
process: (res: any) => { process: (res: any) =>
if (res.code === RESULT_CODE_SUCCESS) { res.code === RESULT_CODE_SUCCESS && (skimState.smfUeNum += res.data),
skimState.gnbNum += res.total; },
skimState.gnbUeNum += res.rows.reduce((sum: number, item: any) => sum + item.ueNum, 0); ],
} [
} 'IMS',
}], {
['MME', { request: (neId: string) => listUENumByIMS(neId),
request: (neId: string) => listBase5G({ neType: 'MME', neId }), process: (res: any) =>
process: (res: any) => { res.code === RESULT_CODE_SUCCESS && (skimState.imsUeNum += res.data),
if (res.code === RESULT_CODE_SUCCESS) { },
skimState.enbNum += res.total; ],
skimState.enbUeNum += res.rows.reduce((sum: number, item: any) => sum + item.ueNum, 0); [
} 'AMF',
} {
}] request: (neId: string) => listBase5G({ neType: 'AMF', neId }),
process: (res: any) => {
if (res.code === RESULT_CODE_SUCCESS) {
skimState.gnbNum += res.total;
skimState.gnbUeNum += res.rows.reduce(
(sum: number, item: any) => sum + item.ueNum,
0
);
}
},
},
],
[
'MME',
{
request: (neId: string) => listBase5G({ neType: 'MME', neId }),
process: (res: any) => {
if (res.code === RESULT_CODE_SUCCESS) {
skimState.enbNum += res.total;
skimState.enbUeNum += res.rows.reduce(
(sum: number, item: any) => sum + item.ueNum,
0
);
}
},
},
],
]); ]);
const requests = neCascaderOptions.value.flatMap((ne: any) => const requests = neCascaderOptions.value.flatMap(
ne.children?.map((child: any) => { (ne: any) =>
const handler = neHandlers.get(child.neType); ne.children
return handler ? { ?.map((child: any) => {
promise: handler.request(child.neId), const handler = neHandlers.get(child.neType);
process: handler.process return handler
} : null; ? {
}).filter(Boolean) || [] promise: handler.request(child.neId),
process: handler.process,
}
: null;
})
.filter(Boolean) || []
); );
const results = await Promise.allSettled(requests.map(r => r.promise)); const results = await Promise.allSettled(requests.map(r => r.promise));
// 重置 // 重置
Object.assign(skimState, { Object.assign(skimState, {
udmSubNum: 0, udmSubNum: 0,
@@ -215,7 +186,7 @@ async function fnGetSkim() {
gnbNum: 0, gnbNum: 0,
gnbUeNum: 0, gnbUeNum: 0,
enbNum: 0, enbNum: 0,
enbUeNum: 0 enbUeNum: 0,
}); });
results.forEach((result, index) => { results.forEach((result, index) => {
if (result.status === 'fulfilled') { if (result.status === 'fulfilled') {
@@ -293,52 +264,50 @@ const getPopupContainer = () => {
}; };
onMounted(() => { onMounted(() => {
neInfoStore
neInfoStore.fnNelist().then(res => { .fnNelist()
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) { .then(res => {
if (res.data.length > 0) { if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
let arr: Record<string, any>[] = []; if (res.data.length > 0) {
res.data.forEach(i => { let arr: Record<string, any>[] = [];
if (i.neType === 'UPF') { res.data.forEach(i => {
arr.push({ value: i.neId, label: i.neName, rmUid: i.rmUid }); if (i.neType === 'UPF') {
} arr.push({ value: i.neId, label: i.neName, rmUid: i.rmUid });
}); }
neOtions.value = arr;
if (arr.length > 0) {
//queryParams.neRealId = arr[0].value;
fnSelectNe(arr[0].value, arr[0]);
}
// 过滤不可用的网元
neCascaderOptions.value = neInfoStore.getNeCascaderOptions.filter(
(item: any) => {
return ['UDM', 'SMF', 'IMS', 'AMF', 'MME'].includes(
item.value
);
}
);
if (neCascaderOptions.value.length === 0) {
message.warning({
content: t('common.noData'),
duration: 2,
}); });
return;
neOtions.value = arr;
if (arr.length > 0) {
//queryParams.neRealId = arr[0].value;
fnSelectNe(arr[0].value, arr[0]);
}
// 过滤不可用的网元
neCascaderOptions.value = neInfoStore.getNeCascaderOptions.filter(
(item: any) => {
return ['UDM', 'SMF', 'IMS', 'AMF', 'MME'].includes(item.value);
}
);
if (neCascaderOptions.value.length === 0) {
message.warning({
content: t('common.noData'),
duration: 2,
});
return;
}
} }
} else {
message.warning({
content: t('common.noData'),
duration: 2,
});
} }
} else { })
message.warning({
content: t('common.noData'),
duration: 2,
});
}
})
.finally(() => { .finally(() => {
fnGetSkim().then(() => { fnGetSkim().then(() => {
loadData(); loadData();
}) });
}) });
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
@@ -352,7 +321,11 @@ onBeforeUnmount(() => {
<template> <template>
<div class="viewport" ref="viewportDom"> <div class="viewport" ref="viewportDom">
<div class="brand"> <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') }} {{ t('views.dashboard.overview.title') }}
<FullscreenExitOutlined v-if="isFullscreen" /> <FullscreenExitOutlined v-if="isFullscreen" />
<FullscreenOutlined v-else /> <FullscreenOutlined v-else />
@@ -369,17 +342,27 @@ onBeforeUnmount(() => {
{{ t('views.dashboard.overview.skim.userTitle') }} {{ t('views.dashboard.overview.skim.userTitle') }}
</h3> </h3>
<div class="data"> <div class="data">
<div class="item toRouter" @click="fnToRouter('Sub_2010')" :title="t('views.dashboard.overview.toRouter')"> <div
class="item toRouter"
@click="fnToRouter('Sub_2010')"
:title="t('views.dashboard.overview.toRouter')"
>
<div> <div>
<UserOutlined style="color: #4096ff; margin-right: 8px; font-size: 1.1rem" /> <UserOutlined
style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
/>
{{ skimState.udmSubNum }} {{ skimState.udmSubNum }}
</div> </div>
<span> <span>
{{ t('views.dashboard.overview.skim.users') }} {{ t('views.dashboard.overview.skim.users') }}
</span> </span>
</div> </div>
<div class="item toRouter" @click="fnToRouter('Ims_2080')" :title="t('views.dashboard.overview.toRouter')" <div
style="margin: 0 12px"> class="item toRouter"
@click="fnToRouter('Ims_2080')"
:title="t('views.dashboard.overview.toRouter')"
style="margin: 0 12px"
>
<div> <div>
<img :src="svgUserIMS" style="width: 18px; margin-right: 8px" /> <img :src="svgUserIMS" style="width: 18px; margin-right: 8px" />
{{ skimState.imsUeNum }} {{ skimState.imsUeNum }}
@@ -388,7 +371,11 @@ onBeforeUnmount(() => {
{{ t('views.dashboard.overview.skim.imsUeNum') }} {{ t('views.dashboard.overview.skim.imsUeNum') }}
</span> </span>
</div> </div>
<div class="item toRouter" @click="fnToRouter('Ue_2081')" :title="t('views.dashboard.overview.toRouter')"> <div
class="item toRouter"
@click="fnToRouter('Ue_2081')"
:title="t('views.dashboard.overview.toRouter')"
>
<div> <div>
<img :src="svgUserSMF" style="width: 18px; margin-right: 8px" /> <img :src="svgUserSMF" style="width: 18px; margin-right: 8px" />
{{ skimState.smfUeNum }} {{ skimState.smfUeNum }}
@@ -407,18 +394,29 @@ onBeforeUnmount(() => {
{{ t('views.dashboard.overview.skim.baseTitle') }} {{ t('views.dashboard.overview.skim.baseTitle') }}
</h3> </h3>
<div class="data"> <div class="data">
<div class="item toRouter" @click="fnToRouter('Base5G_2082', { neType: 'AMF' })" <div
:title="t('views.dashboard.overview.toRouter')"> class="item toRouter"
@click="fnToRouter('Base5G_2082', { neType: 'AMF' })"
:title="t('views.dashboard.overview.toRouter')"
>
<div style="align-items: flex-start"> <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 }} {{ skimState.gnbNum }}
</div> </div>
<span>{{ t('views.dashboard.overview.skim.gnbBase') }}</span> <span>{{ t('views.dashboard.overview.skim.gnbBase') }}</span>
</div> </div>
<div class="item toRouter" @click="fnToRouter('Base5G_2082', { neType: 'AMF' })" <div
:title="t('views.dashboard.overview.toRouter')"> class="item toRouter"
@click="fnToRouter('Base5G_2082', { neType: 'AMF' })"
:title="t('views.dashboard.overview.toRouter')"
>
<div style="align-items: flex-start"> <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 }} {{ skimState.gnbUeNum }}
</div> </div>
<span>{{ t('views.dashboard.overview.skim.gnbUeNum') }}</span> <span>{{ t('views.dashboard.overview.skim.gnbUeNum') }}</span>
@@ -433,18 +431,29 @@ onBeforeUnmount(() => {
{{ t('views.dashboard.overview.skim.baseTitle') }} {{ t('views.dashboard.overview.skim.baseTitle') }}
</h3> </h3>
<div class="data"> <div class="data">
<div class="item toRouter" @click="fnToRouter('Base5G_2082', { neType: 'MME' })" <div
:title="t('views.dashboard.overview.toRouter')"> class="item toRouter"
@click="fnToRouter('Base5G_2082', { neType: 'MME' })"
:title="t('views.dashboard.overview.toRouter')"
>
<div style="align-items: flex-start"> <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 }} {{ skimState.enbNum }}
</div> </div>
<span>{{ t('views.dashboard.overview.skim.enbBase') }}</span> <span>{{ t('views.dashboard.overview.skim.enbBase') }}</span>
</div> </div>
<div class="item toRouter" @click="fnToRouter('Base5G_2082', { neType: 'MME' })" <div
:title="t('views.dashboard.overview.toRouter')"> class="item toRouter"
@click="fnToRouter('Base5G_2082', { neType: 'MME' })"
:title="t('views.dashboard.overview.toRouter')"
>
<div style="align-items: flex-start"> <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 }} {{ skimState.enbUeNum }}
</div> </div>
<span>{{ t('views.dashboard.overview.skim.enbUeNum') }}</span> <span>{{ t('views.dashboard.overview.skim.enbUeNum') }}</span>
@@ -497,8 +506,11 @@ onBeforeUnmount(() => {
<!-- 网络拓扑 --> <!-- 网络拓扑 -->
<div class="topology panel"> <div class="topology panel">
<div class="inner"> <div class="inner">
<h3 class="toRouter" @click="fnToRouter('TopologyArchitecture_2128')" <h3
:title="t('views.dashboard.overview.toRouter')"> class="toRouter"
@click="fnToRouter('TopologyArchitecture_2128')"
:title="t('views.dashboard.overview.toRouter')"
>
<span> <span>
<ApartmentOutlined style="color: #68d8fe" />&nbsp;&nbsp; <ApartmentOutlined style="color: #68d8fe" />&nbsp;&nbsp;
{{ t('views.dashboard.overview.topology.title') }} {{ t('views.dashboard.overview.topology.title') }}
@@ -528,10 +540,17 @@ onBeforeUnmount(() => {
<!-- 筛选 --> <!-- 筛选 -->
<div class="filter"> <div class="filter">
<span :data-key="v" :class="{ active: upfTFActive === v }" v-for="v in ['0', '7', '30']" :key="v" @click="() => { <span
upfTFActive = v; :data-key="v"
} :class="{ active: upfTFActive === v }"
"> v-for="v in ['0', '7', '30']"
:key="v"
@click="
() => {
upfTFActive = v;
}
"
>
{{ {{
v === '0' v === '0'
? '24' + t('common.units.hour') ? '24' + t('common.units.hour')
@@ -564,7 +583,11 @@ onBeforeUnmount(() => {
<!-- 告警统计 --> <!-- 告警统计 -->
<div class="alarmType panel"> <div class="alarmType panel">
<div class="inner"> <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; <PieChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
{{ t('views.dashboard.overview.alarmTypeBar.alarmSum') }} {{ t('views.dashboard.overview.alarmTypeBar.alarmSum') }}
</h3> </h3>