From 2b69b8d72b692be228d92c42ca293ec49de62d08 Mon Sep 17 00:00:00 2001 From: lai <10633968+laiyujun1@user.noreply.gitee.com> Date: Fri, 20 Dec 2024 15:47:17 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BB=AA=E8=A1=A8=E7=9B=98?= =?UTF-8?q?=E7=B4=AF=E5=8A=A0=E5=8F=8AUPF=E4=B8=8B=E6=8B=89=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/dashboard/overview/css/index.css | 2 +- src/views/dashboard/overview/hooks/useWS.ts | 34 +- src/views/dashboard/overview/index.vue | 396 +++++++++++++------- 3 files changed, 284 insertions(+), 148 deletions(-) diff --git a/src/views/dashboard/overview/css/index.css b/src/views/dashboard/overview/css/index.css index 9b053c7c..7f7e7018 100644 --- a/src/views/dashboard/overview/css/index.css +++ b/src/views/dashboard/overview/css/index.css @@ -79,7 +79,7 @@ .upfFlow .inner .chart { width: 100%; height: 100%; - margin-top: 1rem; + margin-top: 0rem; } /* 网络拓扑 */ diff --git a/src/views/dashboard/overview/hooks/useWS.ts b/src/views/dashboard/overview/hooks/useWS.ts index df85c983..bd3e5f4f 100644 --- a/src/views/dashboard/overview/hooks/useWS.ts +++ b/src/views/dashboard/overview/hooks/useWS.ts @@ -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(''); + +/**UPF-的RmUid */ +export const upfWhoRmUid = ref(''); + /**websocket连接 */ export default function useWS() { const ws = new WS(); @@ -27,13 +33,12 @@ export default function useWS() { /**接收数据后回调 */ function wsMessage(res: Record) { - // 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, }; } diff --git a/src/views/dashboard/overview/index.vue b/src/views/dashboard/overview/index.vue index 231d0588..94c8e8de 100644 --- a/src/views/dashboard/overview/index.vue +++ b/src/views/dashboard/overview/index.vue @@ -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[]>([]); + /**总览节点 */ const viewportDom = ref(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[]>([]); + +/**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[] = []; + 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(() => {