diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts index 50a0a3d0..de0a77b4 100644 --- a/src/i18n/locales/en-US.ts +++ b/src/i18n/locales/en-US.ts @@ -492,12 +492,13 @@ export default { overview:{ title: "Core Network Dashboard", fullscreen: "Click on the full-screen display", + toRouter: "Click to jump to the detail page", skim: { users: "Users", userTitle:'User Information', - session: "Sessions", - ims: "VoNR/VoLTE", - base: "5G Base Stations", + imsUeNum: "VoNR/VoLTE", + smfUeNum: "Data Sessions", + gnbBase: "5G Base Stations", enbBase: "4G Base Stations", gnbUeNum:'5G Users', enbUeNum:'4G Users', diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts index 3c13fb26..d4c090a2 100644 --- a/src/i18n/locales/zh-CN.ts +++ b/src/i18n/locales/zh-CN.ts @@ -492,14 +492,15 @@ export default { overview:{ title: "核心网系统看板", fullscreen: "点击全屏显示", + toRouter: "点击跳转详情页面", skim: { users: "用户数", userTitle:'用户信息', - ims: "VoNR/VoLTE", - session: "会话数", - base: "5G 基站数", - enbBase: "4G 基站数", + imsUeNum: "IMS 会话数", + smfUeNum: "Data 会话数", + gnbBase: "5G 基站数", gnbUeNum:'5G 用户数', + enbBase: "4G 基站数", enbUeNum:'4G 用户数', baseTitle:'基站信息', }, diff --git a/src/views/dashboard/overview/css/index.css b/src/views/dashboard/overview/css/index.css index 33311d53..fcb6d4c2 100644 --- a/src/views/dashboard/overview/css/index.css +++ b/src/views/dashboard/overview/css/index.css @@ -157,10 +157,28 @@ border-radius: 4px; } +/* 概览区域 衍生基站信息 */ +.skim.base { + height: 20.6%; +} + +.skim.base .inner .data { + display: flex; + flex-direction: row; + align-items: center; + height: 45%; +} +.skim.base .inner .data .item { + display: flex; + flex-direction: column; + align-items: baseline; + width: 50%; +} + /* 用户行为 */ .userActivity { /* min-height: 35.8rem; */ - height: 66%; + height: 60%; } .userActivity .inner .chart { width: 100%; @@ -247,3 +265,13 @@ height: 100%; margin-top: 1rem; } + +/* 跳转鼠标悬浮 */ +.toRouter:hover { + cursor: pointer; + color: #fff !important; +} +.toRouter:hover > *, +.toRouter:hover > * > * { + color: #fff !important; +} diff --git a/src/views/dashboard/overview/index.vue b/src/views/dashboard/overview/index.vue index c63b8e9d..8305ee93 100644 --- a/src/views/dashboard/overview/index.vue +++ b/src/views/dashboard/overview/index.vue @@ -13,8 +13,6 @@ import { listSub } from '@/api/neUser/sub'; import { listUENumBySMF } from '@/api/neUser/smf'; import { listUENumByIMS } from '@/api/neUser/ims'; import { listBase5G } from '@/api/neUser/base5G'; -import { useRouter } from 'vue-router'; - import { graphNodeClickID, graphState, @@ -27,11 +25,11 @@ import { useFullscreen } from '@vueuse/core'; import useWS from './hooks/useWS'; import useAppStore from '@/store/modules/app'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; - +import { useRouter } from 'vue-router'; +const router = useRouter(); const appStore = useAppStore(); const { t } = useI18n(); const { wsSend, cdrEventSend, ueEventSend, upfTFSend } = useWS(); -const router = useRouter(); /**概览状态类型 */ type SkimStateType = { @@ -42,11 +40,11 @@ type SkimStateType = { /**IMS在线用户数 */ imsUeNum: number; /**5G基站数量 */ - nbNum: number; - /**4G基站数量 */ - enbNum: number; + gnbNum: number; /**5G在线用户数量 */ gnbUeNum: number; + /**4G基站数量 */ + enbNum: number; /**4G在线用户数量 */ enbUeNum: number; }; @@ -56,9 +54,9 @@ let skimState: SkimStateType = reactive({ udmSubNum: 0, smfUeNum: 0, imsUeNum: 0, - nbNum: 0, - enbNum: 0, + gnbNum: 0, gnbUeNum: 0, + enbNum: 0, enbUeNum: 0, }); @@ -108,23 +106,15 @@ async function fnGetSkim() { pageNum: 1, pageSize: 1, }), - listBase5G({ - neType: 'AMF', - neId: '001', - id: '', - pageNum: 1, - /**每页条数 */ - pageSize: 20, - }), listUENumBySMF('001'), listUENumByIMS('001'), + listBase5G({ + neType: 'AMF', + neId: '001', + }), listBase5G({ neType: 'MME', neId: '001', - id: '', - pageNum: 1, - /**每页条数 */ - pageSize: 20, }), ]); @@ -137,23 +127,23 @@ async function fnGetSkim() { if (resArr[1].status === 'fulfilled') { const res1 = resArr[1].value; if (res1.code === RESULT_CODE_SUCCESS) { - skimState.nbNum = res1.total; - skimState.gnbUeNum = 0; - res1.rows.map((item: any) => { - skimState.gnbUeNum += item.ueNum; - }); + skimState.smfUeNum = res1.data; } } if (resArr[2].status === 'fulfilled') { const res2 = resArr[2].value; if (res2.code === RESULT_CODE_SUCCESS) { - skimState.smfUeNum = res2.data; + skimState.imsUeNum = res2.data; } } if (resArr[3].status === 'fulfilled') { const res3 = resArr[3].value; if (res3.code === RESULT_CODE_SUCCESS) { - skimState.imsUeNum = res3.data; + skimState.gnbNum = res3.total; + skimState.gnbUeNum = 0; + res3.rows.map((item: any) => { + skimState.gnbUeNum += item.ueNum; + }); } } if (resArr[4].status === 'fulfilled') { @@ -189,8 +179,9 @@ function loadData() { }, 10_000); } -function goToAlarmPage() { - router.push({ name: 'ActiveAlarm_2088' }); +/**栏目信息跳转 */ +function fnToRouter(name: string, query?: any) { + router.push({ name, query }); } onMounted(() => { @@ -229,7 +220,11 @@ onBeforeUnmount(() => { {{ t('views.dashboard.overview.skim.userTitle') }}
-
+
{ {{ skimState.imsUeNum }}
- {{ t('views.dashboard.overview.skim.ims') }} + {{ t('views.dashboard.overview.skim.imsUeNum') }}
@@ -255,32 +250,54 @@ onBeforeUnmount(() => { {{ skimState.smfUeNum }}
- Data {{ t('views.dashboard.overview.skim.session') }} + {{ t('views.dashboard.overview.skim.smfUeNum') }}
-
+

   {{ t('views.dashboard.overview.skim.baseTitle') }}

-
+
- {{ skimState.nbNum }} + {{ skimState.gnbNum }}
- - {{ t('views.dashboard.overview.skim.base') }} - + {{ t('views.dashboard.overview.skim.gnbBase') }}
-
+
+
+ + {{ skimState.gnbUeNum }} +
+ {{ t('views.dashboard.overview.skim.gnbUeNum') }} +
+
+
+
{ /> {{ skimState.enbNum }}
- - {{ t('views.dashboard.overview.skim.base') }} - + {{ t('views.dashboard.overview.skim.enbBase') }}
-
-
- +
+ - {{ skimState.gnbUeNum }} + {{ skimState.enbUeNum }}
- - {{ t('views.dashboard.overview.skim.users') }} - + {{ t('views.dashboard.overview.skim.enbUeNum') }}
@@ -324,7 +342,11 @@ onBeforeUnmount(() => {
-

+

   {{ t('views.dashboard.overview.upfFlow.title') }}

@@ -336,7 +358,11 @@ onBeforeUnmount(() => {
-

+

   {{ t('views.dashboard.overview.topology.title') }} @@ -405,11 +431,15 @@ onBeforeUnmount(() => {

-
+
-

+

   {{ t('views.dashboard.overview.alarmTypeBar.alarmSum') }}

diff --git a/src/views/neUser/base5G/index.vue b/src/views/neUser/base5G/index.vue index 76ccf7a7..788d95e6 100644 --- a/src/views/neUser/base5G/index.vue +++ b/src/views/neUser/base5G/index.vue @@ -9,8 +9,9 @@ import { listBase5G } from '@/api/neUser/base5G'; import useI18n from '@/hooks/useI18n'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import useNeInfoStore from '@/store/modules/neinfo'; +import { useRoute } from 'vue-router'; const neInfoStore = useNeInfoStore(); - +const route = useRoute(); const { t } = useI18n(); /**网元参数 */ @@ -172,7 +173,6 @@ function fnGetList(pageNum?: number) { onMounted(() => { // 获取网元网元列表 - neInfoStore .fnNelist() .then(res => { @@ -191,8 +191,11 @@ onMounted(() => { }); return; } - // 默认选择UPF - const item = neCascaderOptions.value.find(s => s.value === 'AMF'); + // 无查询参数neType时 默认选择AMF + const queryNeType = (route.query.neType as string) || 'AMF'; + const item = neCascaderOptions.value.find( + s => s.value === queryNeType + ); if (item && item.children) { const info = item.children[0]; queryParams.neType = [info.neType, info.neId]; @@ -200,7 +203,6 @@ onMounted(() => { const info = neCascaderOptions.value[0].children[0]; queryParams.neType = [info.neType, info.neId]; } - console.log(neCascaderOptions.value); } } else { message.warning({