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

增加仪表盘累加及UPF下拉框

Browse Source
This commit is contained in:
lai
2024-12-20 15:47:17 +08:00
parent 71f2e596fe
commit 2b69b8d72b
3 changed files with 284 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/dashboard/overview/css/index.css
View File

@@ -79,7 +79,7 @@
.upfFlow .inner .chart {
width: 100%;
height: 100%;
margin-top: 1rem;
margin-top: 0rem;
}
/* 网络拓扑 */

34
src/views/dashboard/overview/hooks/useWS.ts
View File

@@ -1,6 +1,6 @@
import { RESULT_CODE_ERROR } from '@/constants/result-constants';
import { OptionsType, WS } from '@/plugins/ws-websocket';
import { onBeforeUnmount, onMounted } from 'vue';
import { onBeforeUnmount, onMounted, ref } from 'vue';
import {
eventListParse,
eventItemParseAndPush,
@@ -12,9 +12,15 @@ import {
upfFlowParse,
upfTotalFlowReset,
} from './useUPFTotalFlow';
import { topologyReset, neStateParse } from './useTopology';
import { topologyReset, neStateParse, neStateRequestMap } from './useTopology';
import PQueue from 'p-queue';
/**UPF-的Id */
export const upfWhoId = ref<any>('');
/**UPF-的RmUid */
export const upfWhoRmUid = ref<any>('');
/**websocket连接 */
export default function useWS() {
const ws = new WS();
@@ -27,13 +33,12 @@ export default function useWS() {
/**接收数据后回调 */
function wsMessage(res: Record<string, any>) {
// console.log(res);
//console.log(res);
const { code, requestId, data } = res;
if (code === RESULT_CODE_ERROR) {
console.warn(res.msg);
return;
}
// 网元状态
if (requestId && requestId.startsWith('neState')) {
const neType = requestId.split('_')[1];
@@ -72,14 +77,13 @@ export default function useWS() {
upfTFParse('30', data);
break;
}
// 订阅组信息
if (!data?.groupId) {
return;
}
switch (data.groupId) {
// kpiEvent 指标UPF
case '12_001':
case '12_' + upfWhoRmUid.value:
if (data.data) {
upfFlowParse(data.data);
}
@@ -168,7 +172,17 @@ export default function useWS() {
});
}
onMounted(() => {
/**重新发送至UPF 12_rmUid */
function reSendUPF(rmUid: string) {
upfWhoRmUid.value = rmUid;
//初始时时无需还原全部属性以及关闭
if (ws.state() === WebSocket.OPEN) {
ws.close();
userActivityReset();
upfTotalFlowReset();
neStateRequestMap.value = new Map();
//topologyReset();
}
const options: OptionsType = {
url: '/ws',
params: {
@@ -179,7 +193,7 @@ export default function useWS() {
* MME_UE会话事件(GroupID:1011_neId)
* IMS_CDR会话事件(GroupID:1005_neId)
*/
subGroupID: '12_001,1010,1011_001,1005_001',
subGroupID: '12_' + rmUid + ',1010,1011_001,1005_001',
},
onmessage: wsMessage,
onerror: (ev: any) => {
@@ -187,18 +201,20 @@ export default function useWS() {
},
};
ws.connect(options);
});
}
onBeforeUnmount(() => {
ws.close();
userActivityReset();
upfTotalFlowReset();
topologyReset();
upfWhoRmUid.value = '';
});
return {
wsSend,
userActivitySend,
upfTFSend,
reSendUPF,
};
}

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

@@ -26,10 +26,15 @@ import useWS from './hooks/useWS';
import useAppStore from '@/store/modules/app';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { useRouter } from 'vue-router';
import useNeInfoStore from '@/store/modules/neinfo';
import { message } from 'ant-design-vue';
import { upfWhoId } from './hooks/useWS';
const neInfoStore = useNeInfoStore();
const router = useRouter();
const appStore = useAppStore();
const { t } = useI18n();
const { wsSend, userActivitySend, upfTFSend } = useWS();
const { wsSend, userActivitySend, upfTFSend, reSendUPF } = useWS();
/**概览状态类型 */
type SkimStateType = {
@@ -60,6 +65,9 @@ let skimState: SkimStateType = reactive({
enbUeNum: 0,
});
/**网元参数 */
let neCascaderOptions = ref<Record<string, any>[]>([]);
/**总览节点 */
const viewportDom = ref<HTMLElement | null>(null);
const { isFullscreen, toggle } = useFullscreen(viewportDom);
@@ -94,62 +102,126 @@ function fnGetNeState() {
/**获取概览信息 */
async function fnGetSkim() {
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',
}),
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([
['UDM', {
request: (neId: string) => listUDMSub({ neid: neId, pageNum: 1, pageSize: 1 }),
process: (res: any) => res.code === RESULT_CODE_SUCCESS && (skimState.udmSubNum += res.total)
}],
['SMF', {
request: (neId: string) => listUENumBySMF(neId),
process: (res: any) => res.code === RESULT_CODE_SUCCESS && (skimState.smfUeNum += res.data)
}],
['IMS', {
request: (neId: string) => listUENumByIMS(neId),
process: (res: any) => res.code === RESULT_CODE_SUCCESS && (skimState.imsUeNum += res.data)
}],
['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);
}
}
}]
]);
if (resArr[0].status === 'fulfilled') {
const res0 = resArr[0].value;
if (res0.code === RESULT_CODE_SUCCESS) {
skimState.udmSubNum = res0.total;
const requests = neCascaderOptions.value.flatMap((ne: any) =>
ne.children?.map((child: any) => {
const handler = neHandlers.get(child.neType);
return handler ? {
promise: handler.request(child.neId),
process: handler.process
} : null;
}).filter(Boolean) || []
);
const results = await Promise.allSettled(requests.map(r => r.promise));
// 重置
Object.assign(skimState, {
udmSubNum: 0,
smfUeNum: 0,
imsUeNum: 0,
gnbNum: 0,
gnbUeNum: 0,
enbNum: 0,
enbUeNum: 0
});
results.forEach((result, index) => {
if (result.status === 'fulfilled') {
requests[index].process(result.value);
}
}
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;
});
}
}
});
}
/**初始数据函数 */
@@ -188,10 +260,85 @@ function fnToRouter(name: string, query?: any) {
router.push({ name, query });
}
/**网元参数 */
let neOtions = ref<Record<string, any>[]>([]);
/**UPF网元Id */
let queryParams = reactive({
/**45G类型 */
neRealId: '',
});
// UPF实时流量下拉框选择
function fnSelectNe(value: any, option: any) {
queryParams.neRealId = value;
upfWhoId.value = value;
reSendUPF(option.rmUid);
// upfTotalFlow.value.map((item: any) => {
// item.requestFlag = false;
// });
for (var key in upfTotalFlow.value) {
upfTotalFlow.value[key].requestFlag = false;
}
loadData();
}
// 定义一个方法返回 views 容器
const getPopupContainer = () => {
// 使用 ref 或其他方式来引用你的 views 容器
// 如果 views 容器直接在这个组件内部，你可以使用 ref
// 但在这个例子中，我们假设它是通过类名来获取的
return document.querySelector('.viewport');
};
onMounted(() => {
fnGetSkim().then(() => {
loadData();
});
neInfoStore.fnNelist().then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
if (res.data.length > 0) {
let arr: Record<string, any>[] = [];
res.data.forEach(i => {
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;
}
}
} else {
message.warning({
content: t('common.noData'),
duration: 2,
});
}
})
.finally(() => {
fnGetSkim().then(() => {
loadData();
})
})
});
onBeforeUnmount(() => {
@@ -205,11 +352,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 />
@@ -226,27 +369,17 @@ onBeforeUnmount(() => {
{{ t('views.dashboard.overview.skim.userTitle') }}
</h3>
<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>
<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>
{{ t('views.dashboard.overview.skim.users') }}
</span>
</div>
<div
class="item toRouter"
@click="fnToRouter('Ims_2080')"
:title="t('views.dashboard.overview.toRouter')"
style="margin: 0 12px"
>
<div class="item toRouter" @click="fnToRouter('Ims_2080')" :title="t('views.dashboard.overview.toRouter')"
style="margin: 0 12px">
<div>
<img :src="svgUserIMS" style="width: 18px; margin-right: 8px" />
{{ skimState.imsUeNum }}
@@ -255,11 +388,7 @@ onBeforeUnmount(() => {
{{ t('views.dashboard.overview.skim.imsUeNum') }}
</span>
</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>
<img :src="svgUserSMF" style="width: 18px; margin-right: 8px" />
{{ skimState.smfUeNum }}
@@ -278,29 +407,18 @@ onBeforeUnmount(() => {
{{ t('views.dashboard.overview.skim.baseTitle') }}
</h3>
<div class="data">
<div
class="item toRouter"
@click="fnToRouter('Base5G_2082', { neType: 'AMF' })"
:title="t('views.dashboard.overview.toRouter')"
>
<div class="item toRouter" @click="fnToRouter('Base5G_2082', { 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('Base5G_2082', { neType: 'AMF' })"
:title="t('views.dashboard.overview.toRouter')"
>
<div class="item toRouter" @click="fnToRouter('Base5G_2082', { 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>
@@ -315,29 +433,18 @@ onBeforeUnmount(() => {
{{ t('views.dashboard.overview.skim.baseTitle') }}
</h3>
<div class="data">
<div
class="item toRouter"
@click="fnToRouter('Base5G_2082', { neType: 'MME' })"
:title="t('views.dashboard.overview.toRouter')"
>
<div class="item toRouter" @click="fnToRouter('Base5G_2082', { 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('Base5G_2082', { neType: 'MME' })"
:title="t('views.dashboard.overview.toRouter')"
>
<div class="item toRouter" @click="fnToRouter('Base5G_2082', { 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>
@@ -365,12 +472,23 @@ onBeforeUnmount(() => {
<div class="inner">
<h3
class="toRouter"
@click="fnToRouter('GoldTarget_2104')"
:title="t('views.dashboard.overview.toRouter')"
style="display: flex; align-items: center"
>
<AreaChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
{{ t('views.dashboard.overview.upfFlow.title') }}
<span @click="fnToRouter('GoldTarget_2104')">{{
t('views.dashboard.overview.upfFlow.title')
}}</span>
<a-select
v-model:value="queryParams.neRealId"
:options="neOtions"
:get-Popup-Container="getPopupContainer"
class="toDeep"
style="width: 100px; color: #fff; margin-left: auto"
@change="fnSelectNe"
/>
</h3>
<div class="chart">
<UPFFlow />
</div>
@@ -379,11 +497,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') }}
@@ -413,17 +528,10 @@ 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')
@@ -456,11 +564,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>
@@ -488,4 +592,20 @@ onBeforeUnmount(() => {
<style lang="less" scoped>
@import url('./css/index.css');
.toDeep {
--editor-background-color: blue;
}
.toDeep :deep(.ant-select-selector) {
background-color: #101129;
border: none;
}
.toDeep :deep(.ant-select-arrow) {
color: #fff;
}
.toDeep :deep(.ant-select-selection-item) {
color: #fff;
}
</style>