diff --git a/src/views/configManage/neManage/index.vue b/src/views/configManage/neManage/index.vue index 1b998ee2..cef04e56 100644 --- a/src/views/configManage/neManage/index.vue +++ b/src/views/configManage/neManage/index.vue @@ -26,6 +26,8 @@ import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { NE_TYPE_LIST } from '@/constants/ne-constants'; import useNeInfoStore from '@/store/modules/neinfo'; +import useLockedStore from '@/store/modules/locked'; +const lockedStore = useLockedStore(); const { t } = useI18n(); /**表格所需option */ @@ -546,6 +548,11 @@ function fnRecordRestart(row: Record) { restartNf(row) .then(res => { if (res.code === RESULT_CODE_SUCCESS) { + // OMC自升级 + if (row.neType.toLowerCase() === 'omc') { + lockedStore.fnLock('reload'); + return; + } message.success({ content: t('common.msgSuccess', { msg: t('views.configManage.neManage.restart'), @@ -927,11 +934,17 @@ onMounted(() => { {{ t('views.configManage.neManage.import') }} - + {{ t('views.configManage.neManage.start') }} - + {{ t('views.configManage.neManage.stop') }} diff --git a/src/views/dashboard/amfUE/index.vue b/src/views/dashboard/amfUE/index.vue index 7903d76e..03674474 100644 --- a/src/views/dashboard/amfUE/index.vue +++ b/src/views/dashboard/amfUE/index.vue @@ -1,5 +1,5 @@ diff --git a/src/views/dashboard/imsCDR/index.vue b/src/views/dashboard/imsCDR/index.vue index 2087fad5..621b645f 100644 --- a/src/views/dashboard/imsCDR/index.vue +++ b/src/views/dashboard/imsCDR/index.vue @@ -1,5 +1,5 @@ diff --git a/src/views/dashboard/overview/components/Topology/index.vue b/src/views/dashboard/overview/components/Topology/index.vue index ff0bf6d3..8c2116e1 100644 --- a/src/views/dashboard/overview/components/Topology/index.vue +++ b/src/views/dashboard/overview/components/Topology/index.vue @@ -76,7 +76,7 @@ function fnGraphEvent(graph: Graph) { // 节点点击 graph.on('node:click', evt => { // 获得鼠标当前目标节点 - const node = evt.item?.getModel(); + const node = evt.item?.getModel(); if (node && node.id && !notNeNodes.includes(node.id)) { graphNodeClickID.value = node.id; } @@ -129,6 +129,9 @@ function handleRanderGraph( var observer = new ResizeObserver(function (entries) { // 当元素大小发生变化时触发回调函数 entries.forEach(function (entry) { + if (!graphG6.value) { + return; + } graphG6.value.changeSize( entry.contentRect.width, entry.contentRect.height - 30 diff --git a/src/views/dashboard/overview/hooks/useTopology.ts b/src/views/dashboard/overview/hooks/useTopology.ts index b165fb83..ce173e88 100644 --- a/src/views/dashboard/overview/hooks/useTopology.ts +++ b/src/views/dashboard/overview/hooks/useTopology.ts @@ -158,3 +158,15 @@ export function neStateParse(neType: string, data: Record) { // 请求标记复位 neStateRequestMap.value.set(neType, false); } + +/**属性复位 */ +export function topologyReset() { + graphState.data = { + combos: [], + edges: [], + nodes: [], + }; + graphG6.value = null; + graphNodeClickID.value = 'UPF'; + neStateRequestMap.value = new Map(); +} diff --git a/src/views/dashboard/overview/hooks/useUPFTotalFlow.ts b/src/views/dashboard/overview/hooks/useUPFTotalFlow.ts index 611ed92a..27b19c8a 100644 --- a/src/views/dashboard/overview/hooks/useUPFTotalFlow.ts +++ b/src/views/dashboard/overview/hooks/useUPFTotalFlow.ts @@ -1,8 +1,7 @@ import { parseSizeFromBits, parseSizeFromKbs } from '@/utils/parse-utils'; import { ref } from 'vue'; -/**UPF-流量数据 */ -export const upfFlowData = ref<{ +type FDType = { /**时间 */ lineXTime: string[]; /**上行 N3 */ @@ -11,7 +10,10 @@ export const upfFlowData = ref<{ lineYDown: number[]; /**容量 */ cap: number; -}>({ +}; + +/**UPF-流量数据 */ +export const upfFlowData = ref({ lineXTime: [], lineYUp: [], lineYDown: [], @@ -74,3 +76,32 @@ export function upfTFParse(data: Record) { /**UPF-总流量数 选中 */ export const upfTFActive = ref(0); + +/**属性复位 */ +export function upfTotalFlowReset() { + upfFlowData.value = { + lineXTime: [], + lineYUp: [], + lineYDown: [], + cap: 0, + }; + upfTotalFlow.value = [ + // 0天 当天24小时 + { + up: '0 B', + down: '0 B', + requestFlag: false, + }, + { + up: '0 B', + down: '0 B', + requestFlag: false, + }, + { + up: '0 B', + down: '0 B', + requestFlag: false, + }, + ]; + upfTFActive.value = 0; +} diff --git a/src/views/dashboard/overview/hooks/useUserActivity.ts b/src/views/dashboard/overview/hooks/useUserActivity.ts index 404bcee1..adbf7f27 100644 --- a/src/views/dashboard/overview/hooks/useUserActivity.ts +++ b/src/views/dashboard/overview/hooks/useUserActivity.ts @@ -1,14 +1,5 @@ import { ref } from 'vue'; -/**UE事件数据 */ -export const ueEventData = ref[]>([]); - -/**UE事件总量 */ -export const ueEventTotal = ref(0); - -/**UE事件推送id */ -export const ueEventId = ref(''); - /**ueEvent UE会话事件 数据解析 */ export function ueEventParse(item: Record) { let evData: Record = item.eventJSON; @@ -29,15 +20,6 @@ export function ueEventParse(item: Record) { }; } -/**CDR事件数据 */ -export const cdrEventData = ref[]>([]); - -/**CDR事件总量 */ -export const cdrEventTotal = ref(0); - -/**CDR事件推送id */ -export const cdrEventId = ref(''); - /**cdrEvent CDR会话事件 数据解析 */ export function cdrEventParse(item: Record) { let evData: Record = item.cdrJSON || item.CDR; @@ -69,3 +51,10 @@ export const eventData = ref[]>([]); export const eventTotal = ref(0); /**CDR/UE事件推送id */ export const eventId = ref(''); + +/**属性复位 */ +export function userActivityReset() { + eventData.value = []; + eventTotal.value = 0; + eventId.value = ''; +} diff --git a/src/views/dashboard/overview/hooks/useWS.ts b/src/views/dashboard/overview/hooks/useWS.ts index 84b02dda..bc2e9a66 100644 --- a/src/views/dashboard/overview/hooks/useWS.ts +++ b/src/views/dashboard/overview/hooks/useWS.ts @@ -7,9 +7,15 @@ import { eventData, eventTotal, eventId, + userActivityReset, } from './useUserActivity'; -import { upfTotalFlow, upfTFParse, upfFlowParse } from './useUPFTotalFlow'; -import { neStateParse } from './useTopology'; +import { + upfTotalFlow, + upfTFParse, + upfFlowParse, + upfTotalFlowReset, +} from './useUPFTotalFlow'; +import { topologyReset, neStateParse } from './useTopology'; import PQueue from 'p-queue'; /**websocket连接 */ @@ -225,6 +231,9 @@ export default function useWS() { onBeforeUnmount(() => { ws.close(); + userActivityReset(); + upfTotalFlowReset(); + topologyReset(); }); return { diff --git a/src/views/monitor/topologyArchitecture/index.vue b/src/views/monitor/topologyArchitecture/index.vue index cbc33109..551bdc8c 100644 --- a/src/views/monitor/topologyArchitecture/index.vue +++ b/src/views/monitor/topologyArchitecture/index.vue @@ -230,6 +230,23 @@ function handleRanderGraph( graphG6.value = graph; + // 创建 ResizeObserver 实例 + var observer = new ResizeObserver(function (entries) { + // 当元素大小发生变化时触发回调函数 + entries.forEach(function (entry) { + if (!graphG6.value) { + return; + } + graphG6.value.changeSize( + entry.contentRect.width, + entry.contentRect.height - 30 + ); + graphG6.value.fitCenter(); + }); + }); + // 监听元素大小变化 + observer.observe(container); + return graph; } @@ -328,10 +345,13 @@ function fnGraphDataLoad(reload: boolean = false) { } else { handleRanderGraph(graphG6Dom.value, graphState.data); } - fnGetState(); - interval10s.value = setInterval(() => { - fnGetState(); // 获取网元状态 - }, 10_000); + clearInterval(interval10s.value); + interval10s.value = null; + fnGetState().finally(() => { + interval10s.value = setInterval(() => { + fnGetState(); // 获取网元状态 + }, 10_000); + }); }); } @@ -473,6 +493,7 @@ onMounted(() => { onBeforeUnmount(() => { ws.close(); clearInterval(interval10s.value); + interval10s.value = null; }); diff --git a/src/views/monitor/topologyBuild/hooks/useGraph.ts b/src/views/monitor/topologyBuild/hooks/useGraph.ts index 7db5fece..751ccdc9 100644 --- a/src/views/monitor/topologyBuild/hooks/useGraph.ts +++ b/src/views/monitor/topologyBuild/hooks/useGraph.ts @@ -8,7 +8,7 @@ import { Menu, Tooltip, } from '@antv/g6'; -import { ref } from 'vue'; +import { onBeforeUnmount, ref } from 'vue'; import { edgeCubicAnimateCircleMove, edgeCubicAnimateLineDash, @@ -29,7 +29,7 @@ export const graphEvent = ref<{ type: string; target: HTMLElement | (IShapeBase & ICanvas); item: Item | null; -}>(); +} | null>(null); /**图元素选择开始结束点 */ export const selectSourceTargetOptions = ref[]>([]); @@ -592,6 +592,23 @@ export default function useGraph() { graphG6.value = graph; + // 创建 ResizeObserver 实例 + var observer = new ResizeObserver(function (entries) { + // 当元素大小发生变化时触发回调函数 + entries.forEach(function (entry) { + if (!graphG6.value) { + return; + } + graphG6.value.changeSize( + entry.contentRect.width, + entry.contentRect.height - 30 + ); + graphG6.value.fitCenter(); + }); + }); + // 监听元素大小变化 + observer.observe(container); + // 图元素选择开始结束点数据 fnSelectSourceTargetOptionsData(); @@ -605,6 +622,13 @@ export default function useGraph() { graphMode.value = graphG6.value.getCurrentMode(); } + onBeforeUnmount(() => { + graphG6.value = null; + graphEvent.value = null; + selectSourceTargetOptions.value = []; + selectComboOptions.value = []; + }); + return { graphMode, graphModeOptions, diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue index 58bf6afb..69bd54be 100644 --- a/src/views/system/post/index.vue +++ b/src/views/system/post/index.vue @@ -406,7 +406,11 @@ function fnGetList(pageNum?: number) { } tablePagination.total = res.total; tableState.data = res.rows; - if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) { + if ( + tablePagination.total <= + (queryParams.pageNum - 1) * tablePagination.pageSize && + queryParams.pageNum !== 1 + ) { tableState.loading = false; fnGetList(queryParams.pageNum - 1); } @@ -439,22 +443,22 @@ onMounted(() => {