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

2024-02-21 17:15:39 +08:00
parent 51b3388cdc
commit 3b4b085499
5 changed files with 130 additions and 68 deletions
--- 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',
--- 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:'基站信息',
        },
--- 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;
+}
--- 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') }}
          </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>
-                {{ t('views.dashboard.overview.skim.base') }}
-              </span>
+              <span>{{ t('views.dashboard.overview.skim.gnbBase') }}</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>
-                {{ t('views.dashboard.overview.skim.base') }}
-              </span>
+              <span>{{ t('views.dashboard.overview.skim.enbBase') }}</span>
            </div>
-            <div class="item">
-              <div>
-                <UserOutlined
-                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
+            <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"
+                  style="width: 18px; margin-right: 8px; height: 2rem"
                />
-                {{ skimState.gnbUeNum }}
+                {{ skimState.enbUeNum }}
              </div>
-              <span>
-                {{ t('views.dashboard.overview.skim.users') }}
-              </span>
+              <span>{{ t('views.dashboard.overview.skim.enbUeNum') }}</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') }}
@@ -405,11 +431,15 @@ onBeforeUnmount(() => {
            </div>
          </div>
        </div>
-      </div> 
+      </div>
      <!-- 告警统计 -->
      <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>
--- 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({