diff --git a/src/views/dashboard/overview/css/index.css b/src/views/dashboard/overview/css/index.css index e04ea06f..8d91e093 100644 --- a/src/views/dashboard/overview/css/index.css +++ b/src/views/dashboard/overview/css/index.css @@ -87,6 +87,21 @@ min-height: 27.8rem; height: 56%; } +.topology .inner h3 { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: baseline; +} +.topology .inner h3 .normal { + color: #52c41a; + font-size: 1.1rem; + margin-right: 8px; +} +.topology .inner h3 .abnormal { + color: #f5222d; + font-size: 1.1rem; +} .topology .inner .chart { width: 100%; height: 100%; @@ -131,12 +146,12 @@ margin-top: 1rem; } -/* cdr会话监控 */ -.cdrEvent { +/* 用户行为 */ +.userActivity { min-height: 22rem; - height: 56%; + height: 82%; } -.cdrEvent .inner .chart { +.userActivity .inner .chart { width: 100%; height: 100%; margin-top: 1rem; @@ -198,17 +213,6 @@ margin-top: 1rem; } -/* ue会话监控 */ -.ueEvent { - min-height: 22rem; - height: 58%; -} -.ueEvent .inner .chart { - width: 100%; - height: 100%; - margin-top: 1rem; -} - /* 监控 */ .monitor { height: 20rem; diff --git a/src/views/dashboard/overview/hooks/useTopology.ts b/src/views/dashboard/overview/hooks/useTopology.ts index 2ef3fecc..4e57723a 100644 --- a/src/views/dashboard/overview/hooks/useTopology.ts +++ b/src/views/dashboard/overview/hooks/useTopology.ts @@ -45,6 +45,23 @@ export const graphNodeState = computed(() => })) ); +/**图节点网元状态数量 */ +export const graphNodeStateNum = computed(() => { + let normal = 0; + let abnormal = 0; + for (const item of graphState.data.nodes) { + const neId = item.neState.neId; + if (neId) { + if (item.neState.online) { + normal += 1; + } else { + abnormal += 1; + } + } + } + return [normal, abnormal]; +}); + /**neStateParse 网元状态 数据解析 */ export function neStateParse(neType: string, data: Record) { const { combos, edges, nodes } = graphState.data; diff --git a/src/views/dashboard/overview/index.vue b/src/views/dashboard/overview/index.vue index a3a3d467..910f68a2 100644 --- a/src/views/dashboard/overview/index.vue +++ b/src/views/dashboard/overview/index.vue @@ -12,7 +12,12 @@ import { listSub } from '@/api/neUser/sub'; import { listUENum } from '@/api/neUser/ue'; import { listBase5G } from '@/api/neUser/base5G'; -import { graphNodeClickID, graphState, notNeNodes } from './hooks/useTopology'; +import { + graphNodeClickID, + graphState, + notNeNodes, + graphNodeStateNum, +} from './hooks/useTopology'; import { upfTotalFlow, upfTFActive } from './hooks/useUPFTotalFlow'; import { useFullscreen } from '@vueuse/core'; import useWS from './hooks/useWS'; @@ -227,8 +232,16 @@ onBeforeUnmount(() => {

-    - {{ t('views.dashboard.overview.topology.title') }} + +    + {{ t('views.dashboard.overview.topology.title') }} + + + normal: + {{ graphNodeStateNum[0] }} + abnormal: + {{ graphNodeStateNum[1] }} +