From 432666b1ab63ea63ba93ffaccbc9af505807d84d Mon Sep 17 00:00:00 2001 From: TsMask <340112800@qq.com> Date: Wed, 17 Apr 2024 10:48:53 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E7=9C=8B=E6=9D=BFHooks=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E5=A4=8D=E4=BD=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../overview/components/Topology/index.vue | 5 ++- .../dashboard/overview/hooks/useTopology.ts | 12 ++++++ .../overview/hooks/useUPFTotalFlow.ts | 37 +++++++++++++++++-- .../overview/hooks/useUserActivity.ts | 25 ++++--------- src/views/dashboard/overview/hooks/useWS.ts | 13 ++++++- 5 files changed, 68 insertions(+), 24 deletions(-) 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 {