diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts index 6f31cb19..06744bba 100644 --- a/src/i18n/locales/en-US.ts +++ b/src/i18n/locales/en-US.ts @@ -490,14 +490,47 @@ export default { }, dashboard: { overview:{ - UPFFlow:{ + title: "Core Network Dashboard", + fullscreen: "Click on the full-screen display", + skim: { + users: "Users", + session: "Sessions", + base: "Bases", + }, + upfFlow:{ + title: "UPF Real-Time Flow", up:'Uplink Rate', down:'Downlink Rate' }, - AlarmTypeBar:{ - alarmTotal:'Total:' + upfFlowTotal:{ + up:'Uplink', + down:'Downlink' + }, + alarmType: { + title: "Alarm Statistics", + }, + resources: { + title: "Resource Situation", + sysMem: "Mem", + sysCpu: "CPU", + neCpu: "NE CPU", + }, + topology: { + title: "Network Topology", + }, + cdrEvent: { + title: "CDR Session", + id: "Serial", + type: "Type", + msg: "Info", + }, + ueEvent: { + title: "UE Session", + id: "IMSI", + type: "Type", + msg: "Info", } - } + }, }, neUser: { auth: { diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts index c2b0160c..e02fc21a 100644 --- a/src/i18n/locales/zh-CN.ts +++ b/src/i18n/locales/zh-CN.ts @@ -490,12 +490,45 @@ export default { }, dashboard: { overview:{ - UPFFlow:{ - up:'上行', - down:'下行', + title: "核心网系统看板", + fullscreen: "点击全屏显示", + skim: { + users: "用户数", + session: "会话数", + base: "基站数", }, - AlarmTypeBar:{ - alarmTotal:'告警总数:' + upfFlow:{ + title: "UPF实时流量", + up:'上行率', + down:'下行率' + }, + upfFlowTotal:{ + up:'上行', + down:'下行' + }, + alarmType: { + title: "告警统计", + }, + resources: { + title: "资源情况", + sysMem: "系统内存", + sysCpu: "系统CPU", + neCpu: "网元CPU", + }, + topology: { + title: "网络拓扑", + }, + cdrEvent: { + title: "CDR会话", + id: "编号", + type: "类型", + msg: "信息", + }, + ueEvent: { + title: "UE会话", + id: "IMSI", + type: "类型", + msg: "信息", } } }, diff --git a/src/views/dashboard/overview/css/index.css b/src/views/dashboard/overview/css/index.css index 8ecd4a9b..e04ea06f 100644 --- a/src/views/dashboard/overview/css/index.css +++ b/src/views/dashboard/overview/css/index.css @@ -62,7 +62,6 @@ .brand .brand-title { color: #ffffff; font-size: 1.4rem; - letter-spacing: 10px; font-weight: 600; padding-top: 1rem; padding-bottom: 0.5rem; @@ -95,22 +94,28 @@ } /* 概览区域 */ -.overview { +.skim { min-height: 6.167rem; - height: 12%; + height: 14%; } -.overview .inner { +.skim .inner { display: flex; - justify-content: space-between; + flex-wrap: wrap; align-items: center; } -.overview .inner h4 { +.skim .inner .item { + width: 50%; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.skim .inner .item h4 { font-size: 1.167rem; padding-left: 0.2rem; color: #fff; margin-bottom: 0.333rem; } -.overview .inner span { +.skim .inner .item span { font-size: 0.667rem; color: #4c9bfd; } @@ -129,7 +134,7 @@ /* cdr会话监控 */ .cdrEvent { min-height: 22rem; - height: 58%; + height: 56%; } .cdrEvent .inner .chart { width: 100%; @@ -138,14 +143,14 @@ } /* 总流量 */ -.totalFlow { +.upfFlowTotal { min-height: 6.167rem; height: 12%; } -.totalFlow .inner .filter { +.upfFlowTotal .inner .filter { display: flex; } -.totalFlow .inner .filter span { +.upfFlowTotal .inner .filter span { display: block; height: 0.75rem; line-height: 1; @@ -153,30 +158,31 @@ color: #1950c4; font-size: 0.75rem; border-right: 0.083rem solid #00f2f1; + cursor: pointer; } -.totalFlow .inner .filter span:first-child { +.upfFlowTotal .inner .filter span:first-child { padding-left: 0; } -.totalFlow .inner .filter span:last-child { +.upfFlowTotal .inner .filter span:last-child { border-right: none; } -.totalFlow .inner .filter span.active { +.upfFlowTotal .inner .filter span.active { color: #fff; font-size: 0.833rem; } -.totalFlow .data { +.upfFlowTotal .data { display: flex; margin-top: 0.833rem; } -.totalFlow .item { +.upfFlowTotal .item { width: 50%; } -.totalFlow h4 { +.upfFlowTotal h4 { font-size: 1.167rem; color: #fff; margin-bottom: 0.417rem; } -.totalFlow span { +.upfFlowTotal span { color: #4c9bfd; font-size: 0.667rem; } diff --git a/src/views/dashboard/overview/index.vue b/src/views/dashboard/overview/index.vue index 8867dc84..cbd179c8 100644 --- a/src/views/dashboard/overview/index.vue +++ b/src/views/dashboard/overview/index.vue @@ -10,16 +10,14 @@ import AlarnTypeBar from './components/AlarnTypeBar/index.vue'; import UPFFlow from './components/UPFFlow/index.vue'; import { listSub } from '@/api/neUser/sub'; import { listUENum } from '@/api/neUser/ue'; -import { listUPFIndex } from '@/api/perfManage/goldTarget'; -import { listBase5G } from '@/api/neUser/base5G'; -import { formatBytes } from '@/utils/parse-utils'; import { graphNodeClickID } from './hooks/useTopology'; +import { upfTotalFlow, upfTFActive } from './hooks/useUPFTotalFlow'; import { useFullscreen } from '@vueuse/core'; import useWS from './hooks/useWS'; import useAppStore from '@/store/modules/app'; const appStore = useAppStore(); const { t } = useI18n(); -const { wsSend, wsInitData } = useWS(); +const { wsSend, cdrEventSend, ueEventSend, upfTFSend } = useWS(); /**用户在线信息 */ let onlineInfo: { @@ -38,17 +36,6 @@ let onlineInfo: { activeAlarmSeverity: [], }); -/**用户在线信息 */ -let upfFlowInfo: { - /**上行字节数 */ - up: number; - /**下行字节数 */ - down: any; -} = reactive({ - up: 0, - down: 0, -}); - /**总览节点 */ const viewportDom = ref(null); const { isFullscreen, toggle } = useFullscreen(viewportDom); @@ -62,7 +49,6 @@ onMounted(() => { pageNum: '1', pageSize: '20', }), - listUPFIndex(), listUENum('001'), ]) .then(resArr => { @@ -70,23 +56,19 @@ onMounted(() => { onlineInfo.subNum = resArr[0].value.total; } if (resArr[1].status === 'fulfilled') { - resArr[1].value['data'].map((item: any) => { - switch (item.kpiId) { - case 'UPF.03': - upfFlowInfo.up = item.Total; - break; - case 'UPF.06': - upfFlowInfo.down = item.Total; - } - }); - } - - if (resArr[2].status === 'fulfilled') { console.log(resArr); } }) .finally(() => { - wsInitData(); + cdrEventSend(); + ueEventSend(); + upfTFSend(0); + upfTFSend(7); + upfTFSend(30); + + setTimeout(() => { + upfTFActive.value = upfTFActive.value >= 2 ? 0 : upfTFActive.value + 1; + }, 1_000); }); }); @@ -94,8 +76,12 @@ onMounted(() => {