fix: 看病栏目添加跳转事件

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",
+          imsUeNum: "VoNR/VoLTE",
-          ims: "VoNR/VoLTE",
+          smfUeNum: "Data Sessions",
-          base: "5G Base Stations",
+          gnbBase: "5G Base Stations",
           enbBase: "4G Base Stations",
           gnbUeNum:'5G Users',
           enbUeNum:'4G Users',

src/i18n/locales/zh-CN.ts

@@ -492,14 +492,15 @@ export default {
       overview:{
         title: "核心网系统看板",
         fullscreen: "点击全屏显示",
+        toRouter: "点击跳转详情页面",
         skim: {
           users: "用户数",
           userTitle:'用户信息',
-          ims: "VoNR/VoLTE",
+          imsUeNum: "IMS 会话数",
-          session: "会话数",
+          smfUeNum: "Data 会话数",
-          base: "5G 基站数",
+          gnbBase: "5G 基站数",
-          enbBase: "4G 基站数",
           gnbUeNum:'5G 用户数',
+          enbBase: "4G 基站数",
           enbUeNum:'4G 用户数',
           baseTitle:'基站信息',
         },

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;
+}

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;
+  gnbNum: number;
-  /**4G基站数量 */
-  enbNum: 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,
+  gnbNum: 0,
-  enbNum: 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.smfUeNum = res1.data;
-      skimState.gnbUeNum = 0;
-      res1.rows.map((item: any) => {
-        skimState.gnbUeNum += item.ueNum;
-      });
     }
   }
   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') }}
           </h3>
           <div class="data">
-            <div class="item">
+            <div
+              class="item toRouter"
+              @click="fnToRouter('Sub_2010')"
+              :title="t('views.dashboard.overview.toRouter')"
+            >
               <div>
                 <UserOutlined
                   style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
@@ -246,7 +241,7 @@ onBeforeUnmount(() => {
                 {{ skimState.imsUeNum }}
               </div>
               <span>
-                {{ t('views.dashboard.overview.skim.ims') }}
+                {{ t('views.dashboard.overview.skim.imsUeNum') }}
               </span>
             </div>
             <div class="item">
@@ -255,32 +250,54 @@ onBeforeUnmount(() => {
                 {{ skimState.smfUeNum }}
               </div>
               <span>
-                Data {{ t('views.dashboard.overview.skim.session') }}
+                {{ t('views.dashboard.overview.skim.smfUeNum') }}
               </span>
             </div>
           </div>
         </div>
       </div>
-      <div class="skim panel">
+      <div class="skim panel base">
         <div class="inner">
           <h3>
             <GlobalOutlined style="color: #68d8fe" />&nbsp;&nbsp;
             {{ t('views.dashboard.overview.skim.baseTitle') }}
           </h3>
           <div class="data">
-            <div class="item">
+            <div
+              class="item toRouter"
+              @click="fnToRouter('Base5G_2082', { neType: 'AMF' })"
+              :title="t('views.dashboard.overview.toRouter')"
+            >
               <div style="align-items: flex-start">
                 <img
                   :src="svgBase"
                   style="width: 18px; margin-right: 8px; height: 2rem"
                 />
-                {{ skimState.nbNum }}
+                {{ skimState.gnbNum }}
               </div>
-              <span>
+              <span>{{ t('views.dashboard.overview.skim.gnbBase') }}</span>
-                {{ t('views.dashboard.overview.skim.base') }}
-              </span>
             </div>
-            <div class="item">
+            <div
+              class="item toRouter"
+              @click="fnToRouter('Base5G_2082', { neType: 'AMF' })"
+              :title="t('views.dashboard.overview.toRouter')"
+            >
+              <div style="align-items: flex-start">
+                <img
+                  :src="svgBase"
+                  style="width: 18px; margin-right: 8px; height: 2rem"
+                />
+                {{ skimState.gnbUeNum }}
+              </div>
+              <span>{{ t('views.dashboard.overview.skim.gnbUeNum') }}</span>
+            </div>
+          </div>
+          <div class="data">
+            <div
+              class="item toRouter"
+              @click="fnToRouter('Base5G_2082', { neType: 'MME' })"
+              :title="t('views.dashboard.overview.toRouter')"
+            >
               <div style="align-items: flex-start">
                 <img
                   :src="svgBase"
@@ -288,20 +305,21 @@ onBeforeUnmount(() => {
                 />
                 {{ skimState.enbNum }}
               </div>
-              <span>
+              <span>{{ t('views.dashboard.overview.skim.enbBase') }}</span>
-                {{ t('views.dashboard.overview.skim.base') }}
-              </span>
             </div>
-            <div class="item">
+            <div
-              <div>
+              class="item toRouter"
-                <UserOutlined
+              @click="fnToRouter('Base5G_2082', { neType: 'MME' })"
-                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
+              :title="t('views.dashboard.overview.toRouter')"
+            >
+              <div style="align-items: flex-start">
+                <img
+                  :src="svgBase"
+                  style="width: 18px; margin-right: 8px; height: 2rem"
                 />
-                {{ skimState.gnbUeNum }}
+                {{ skimState.enbUeNum }}
               </div>
-              <span>
+              <span>{{ t('views.dashboard.overview.skim.enbUeNum') }}</span>
-                {{ t('views.dashboard.overview.skim.users') }}
-              </span>
             </div>
           </div>
         </div>
@@ -324,7 +342,11 @@ onBeforeUnmount(() => {
       <!-- 实时流量 -->
       <div class="upfFlow panel">
         <div class="inner">
-          <h3>
+          <h3
+            class="toRouter"
+            @click="fnToRouter('GoldTarget_2104')"
+            :title="t('views.dashboard.overview.toRouter')"
+          >
             <AreaChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
             {{ t('views.dashboard.overview.upfFlow.title') }}
           </h3>
@@ -336,7 +358,11 @@ onBeforeUnmount(() => {
       <!-- 网络拓扑 -->
       <div class="topology panel">
         <div class="inner">
-          <h3>
+          <h3
+            class="toRouter"
+            @click="fnToRouter('TopologyArchitecture_2128')"
+            :title="t('views.dashboard.overview.toRouter')"
+          >
             <span>
               <ApartmentOutlined style="color: #68d8fe" />&nbsp;&nbsp;
               {{ t('views.dashboard.overview.topology.title') }}
@@ -409,7 +435,11 @@ onBeforeUnmount(() => {
       <!-- 告警统计 -->
       <div class="alarmType panel">
         <div class="inner">
-          <h3 >
+          <h3
+            class="toRouter"
+            @click="fnToRouter('HistoryAlarm_2097')"
+            :title="t('views.dashboard.overview.toRouter')"
+          >
             <PieChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
             {{ t('views.dashboard.overview.alarmTypeBar.alarmSum') }}
           </h3>

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
+          // 无查询参数neType时 默认选择AMF
-          const item = neCascaderOptions.value.find(s => s.value === '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({