From 1cbce9ad0376660bcaf85ef939e8f9c016a06926 Mon Sep 17 00:00:00 2001 From: TsMask <340112800@qq.com> Date: Fri, 27 Dec 2024 19:08:58 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20UE=E6=95=B0=E6=8D=AE=E5=88=97=E8=A1=A8?= =?UTF-8?q?=E7=BB=9F=E4=B8=80=E6=A0=BC=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/dashboard/amfUE/index.vue | 234 ++++++++++++++++++---------- src/views/dashboard/mmeUE/index.vue | 110 +++++++++---- 2 files changed, 224 insertions(+), 120 deletions(-) diff --git a/src/views/dashboard/amfUE/index.vue b/src/views/dashboard/amfUE/index.vue index 83e061e6..aff168bf 100644 --- a/src/views/dashboard/amfUE/index.vue +++ b/src/views/dashboard/amfUE/index.vue @@ -11,14 +11,21 @@ import { RESULT_CODE_SUCCESS, } from '@/constants/result-constants'; import useDictStore from '@/store/modules/dict'; +import useNeInfoStore from '@/store/modules/neinfo'; import { listAMFDataUE, delAMFDataUE, exportAMFDataUE } from '@/api/neData/amf'; +import { parseDateToStr } from '@/utils/date-utils'; import { OptionsType, WS } from '@/plugins/ws-websocket'; +import dayjs, { Dayjs } from 'dayjs'; import saveAs from 'file-saver'; import PQueue from 'p-queue'; +import { useClipboard } from '@vueuse/core'; +const { copy } = useClipboard({ legacy: true }); const { t } = useI18n(); const { getDict } = useDictStore(); const ws = new WS(); const queue = new PQueue({ concurrency: 1, autoStart: true }); +/**网元可选 */ +let neOtions = ref[]>([]); /**字典数据 */ let dict: { @@ -35,7 +42,10 @@ let dict: { }); /**开始结束时间 */ -let queryRangePicker = ref<[string, string]>(['', '']); +let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>([ + dayjs().startOf('hour'), + dayjs().endOf('hour'), +]); /**查询参数 */ let queryParams = reactive({ @@ -47,9 +57,9 @@ let queryParams = reactive({ sortField: 'timestamp', sortOrder: 'desc', /**开始时间 */ - startTime: '', + startTime: undefined as undefined | number, /**结束时间 */ - endTime: '', + endTime: undefined as undefined | number, /**当前页数 */ pageNum: 1, /**每页条数 */ @@ -67,7 +77,7 @@ function fnQueryReset() { pageNum: 1, pageSize: 20, }); - queryRangePicker.value = ['', '']; + queryRangePicker.value = [dayjs().startOf('hour'), dayjs().endOf('hour')]; tablePagination.current = 1; tablePagination.pageSize = 20; fnGetList(); @@ -141,9 +151,15 @@ let tableColumns: ColumnsType = [ { title: t('views.dashboard.ue.time'), dataIndex: 'eventJSON', - key: 'time', align: 'left', width: 150, + customRender(opt) { + const record = opt.value; + if (record?.time) { + return record.time; + } + return parseDateToStr(+record.timestamp * 1000); + }, }, { title: t('common.operate'), @@ -252,11 +268,19 @@ function fnGetList(pageNum?: number) { if (pageNum) { queryParams.pageNum = pageNum; } - if (!queryRangePicker.value) { - queryRangePicker.value = ['', '']; + + // 时间范围 + if ( + Array.isArray(queryRangePicker.value) && + queryRangePicker.value.length > 0 + ) { + queryParams.startTime = queryRangePicker.value[0].valueOf(); + queryParams.endTime = queryRangePicker.value[1].valueOf(); + } else { + queryParams.startTime = undefined; + queryParams.endTime = undefined; } - queryParams.startTime = queryRangePicker.value[0]; - queryParams.endTime = queryRangePicker.value[1]; + listAMFDataUE(toRaw(queryParams)).then(res => { if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) { // 取消勾选 @@ -324,6 +348,18 @@ function fnExportList() { }); } +/** + * 复制CDR + * @param jsonStr JSON字符串 + */ +function fnRecordCopy(jsonStr: string) { + if (!jsonStr) return; + const text = JSON.stringify(jsonStr, null, 2); + copy(text).then(() => { + message.success(t('common.copyOk'), 3); + }); +} + /**实时数据开关 */ const realTimeData = ref(false); @@ -333,31 +369,30 @@ const realTimeData = ref(false); function fnRealTime() { realTimeData.value = !realTimeData.value; if (realTimeData.value) { + tableState.seached = false; // 建立链接 const options: OptionsType = { url: '/ws', params: { /**订阅通道组 * - * AMF_UE会话事件(GroupID:1010) + * AMF_UE会话事件(GroupID:1010_neId) */ - subGroupID: '1010', + subGroupID: `1010_${queryParams.neId}`, }, onmessage: wsMessage, - onerror: wsError, + onerror: (ev: any) => { + console.error(ev); + }, }; ws.connect(options); } else { ws.close(); + tableState.seached = true; + fnGetList(1); } } -/**接收数据后回调 */ -function wsError(ev: any) { - // 接收数据后回调 - console.error(ev); -} - /**接收数据后回调 */ function wsMessage(res: Record) { const { code, requestId, data } = res; @@ -371,7 +406,7 @@ function wsMessage(res: Record) { return; } // ueEvent AMF_UE会话事件 - if (data.groupId === '1010') { + if (data.groupId === `1010_${queryParams.neId}`) { const ueEvent = data.data; queue.add(async () => { modalState.maxId += 1; @@ -399,16 +434,40 @@ onMounted(() => { getDict('ue_auth_code'), getDict('ue_event_type'), getDict('ue_event_cm_state'), - ]) - .then(resArr => { - if (resArr[0].status === 'fulfilled') { - dict.ueAauthCode = resArr[0].value; - } - if (resArr[1].status === 'fulfilled') { - dict.ueEventType = resArr[1].value; - } - if (resArr[2].status === 'fulfilled') { - dict.ueEventCmState = resArr[2].value; + ]).then(resArr => { + if (resArr[0].status === 'fulfilled') { + dict.ueAauthCode = resArr[0].value; + } + if (resArr[1].status === 'fulfilled') { + dict.ueEventType = resArr[1].value; + } + if (resArr[2].status === 'fulfilled') { + dict.ueEventCmState = resArr[2].value; + } + }); + + // 获取网元网元列表 + useNeInfoStore() + .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 === 'AMF') { + arr.push({ value: i.neId, label: i.neName }); + } + }); + neOtions.value = arr; + if (arr.length > 0) { + queryParams.neId = arr[0].value; + } + } + } else { + message.warning({ + content: t('common.noData'), + duration: 2, + }); } }) .finally(() => { @@ -434,6 +493,16 @@ onBeforeUnmount(() => { + + + + + { > - + { > + + + + + + {{ t('common.search') }} + + + + {{ t('common.reset') }} + + + + { > - - - - - - {{ t('common.search') }} - - - - {{ t('common.reset') }} - - - - @@ -545,6 +614,7 @@ onBeforeUnmount(() => { :checked-children="t('common.switch.show')" :un-checked-children="t('common.switch.hide')" size="small" + :disabled="realTimeData" /> @@ -605,7 +675,7 @@ onBeforeUnmount(() => { @@ -614,32 +684,23 @@ onBeforeUnmount(() => { -