feat:仪表盘增加volte、voip显示

src/i18n/locales/en-US.ts

@@ -371,7 +371,7 @@ export default {
         Alarmjump:"Click to jump to the Active Alarms",
 
         skim: {
-          users: "Users",
+          users: "Subscriber",
           userTitle:'User Information',
           imsUeNum: "VoNR/VoLTE",
           smfUeNum: "User Sessions",
@@ -383,6 +383,9 @@ export default {
           enbUeNum:'4G Active Users',
           baseTitle:'Online Information',
           nodeBInfo: 'NodeB Information',
+          onlineinfo:'Online Information',
+          ims:'IMS',
+          voip:'VoIP'
         },
         upfFlow:{
           title: "UPF Throughput",

src/views/dashboard/overview/index.vue

@@ -13,6 +13,8 @@ import { listUDMSub } from '@/api/neData/udm_sub';
 import { listUENumBySMF } from '@/api/neUser/smf';
 import { listUENumByIMS } from '@/api/neUser/ims';
 import { listBase5G } from '@/api/neUser/base5G';
+import { listIMSSub } from '@/api/neData/ims_sub';
+import { listUDMAuth } from '@/api/neData/voip_auth';
 import {
   graphNodeClickID,
   graphState,
@@ -52,6 +54,10 @@ type SkimStateType = {
   enbNum: number;
   /**4G在线用户数量 */
   enbUeNum: number;
+  /**IMS用户数量 */
+  imsUserNum: number;
+  /**VOIP用户数量 */
+  voipUserNum: number;
 };
 
 /**概览状态信息 */
@@ -63,6 +69,8 @@ let skimState: SkimStateType = reactive({
   gnbUeNum: 0,
   enbNum: 0,
   enbUeNum: 0,
+  imsUserNum: 0,
+  voipUserNum: 0,
 });
 
 /**网元参数 */
@@ -171,9 +179,9 @@ async function fnGetSkim() {
           const handler = neHandlers.get(child.neType);
           return handler
             ? {
-                promise: handler.request(child.neId),
-                process: handler.process,
-              }
+              promise: handler.request(child.neId),
+              process: handler.process,
+            }
             : null;
         })
         .filter(Boolean) || []
@@ -190,6 +198,8 @@ async function fnGetSkim() {
     gnbUeNum: 0,
     enbNum: 0,
     enbUeNum: 0,
+    imsUserNum: 0,
+    voipUserNum: 0,
   });
   results.forEach((result: any, index: any) => {
     if (result.status === 'fulfilled') {
@@ -205,6 +215,20 @@ async function fnGetSkim() {
       skimState.udmSubNum = res.total;
     }
   });
+
+  // IMS用户数
+  listIMSSub({ neId: udmNeId.value, pageNum: 1, pageSize: 1 }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      skimState.imsUserNum = res.total;
+    }
+  });
+
+  // VOIP用户数
+  listUDMAuth({ neId: udmNeId.value, pageNum: 1, pageSize: 1 }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      skimState.voipUserNum = res.total;
+    }
+  });
 }
 
 /**初始数据函数 */
@@ -272,6 +296,20 @@ function fnSelectUDM(e: any) {
       skimState.udmSubNum = res.total;
     }
   });
+
+  // 更新IMS用户数
+  listIMSSub({ neId: udmNeId.value, pageNum: 1, pageSize: 1 }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      skimState.imsUserNum = res.total;
+    }
+  });
+
+  // 更新VOIP用户数
+  listUDMAuth({ neId: udmNeId.value, pageNum: 1, pageSize: 1 }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      skimState.voipUserNum = res.total;
+    }
+  });
 }
 /**资源控制-选择NE */
 function fnSelectNeRe(e: any) {
@@ -401,10 +439,33 @@ onBeforeUnmount(() => {
     <div class="column">
       <!--概览-->
       <div class="skim panel">
-        <div class="inner">
-          <h3>
+        <div class="inner" style="padding: 0.8rem 1.5rem">
+          <h3 style="display: flex; align-items: center; justify-content: space-between; margin: 0 0 0.3rem 0; padding: 0; line-height: 1; height: 20px; font-size: 0.833rem">
+            <span style="display: flex; align-items: center">
             <IdcardOutlined style="color: #68d8fe" />&nbsp;&nbsp;
             {{ t('views.dashboard.overview.skim.userTitle') }}
+            </span>
+            <a-dropdown
+              :trigger="['click']"
+              :get-Popup-Container="getPopupContainer"
+              style="margin-left: 8px"
+            >
+              <div class="toDeep-text" style="padding: 2px 6px; font-size: 0.7rem; line-height: 1; height: 16px; display: inline-flex; align-items: center">
+                {{ udmOtions.find(item => item.value === udmNeId)?.label || 'UDM' }}
+                <DownOutlined style="margin-left: 4px; font-size: 9px" />
+              </div>
+              <template #overlay>
+                <a-menu @click="fnSelectUDM">
+                  <a-menu-item
+                    v-for="v in udmOtions"
+                    :key="v.value"
+                    :disabled="udmNeId === v.value"
+                  >
+                    {{ v.label }}
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
           </h3>
           <div class="data">
             <div
@@ -417,61 +478,64 @@ onBeforeUnmount(() => {
                 />
                 {{ skimState.udmSubNum }}
               </div>
-              <span>
-                <a-dropdown
-                  :trigger="['click']"
-                  :get-Popup-Container="getPopupContainer"
-                >
-                  <div class="toDeep-text">
-                    {{ t('views.dashboard.overview.skim.users') }}
-                    <DownOutlined style="margin-left: 12px; font-size: 12px" />
-                  </div>
-                  <template #overlay>
-                    <a-menu @click="fnSelectUDM">
-                      <a-menu-item
-                        v-for="v in udmOtions"
-                        :key="v.value"
-                        :disabled="udmNeId === v.value"
-                      >
-                        {{ v.label }}
-                      </a-menu-item>
-                    </a-menu>
-                  </template>
-                </a-dropdown>
+              <span>{{ t('views.dashboard.overview.skim.users') }}
+<!--                <a-dropdown-->
+<!--                  :trigger="['click']"-->
+<!--                  :get-Popup-Container="getPopupContainer"-->
+<!--                >-->
+<!--                  <div class="toDeep-text">-->
+<!--                    {{ t('views.dashboard.overview.skim.users') }}-->
+<!--                    <DownOutlined style="margin-left: 12px; font-size: 12px" />-->
+<!--                  </div>-->
+<!--                  <template #overlay>-->
+<!--                    <a-menu @click="fnSelectUDM">-->
+<!--                      <a-menu-item-->
+<!--                        v-for="v in udmOtions"-->
+<!--                        :key="v.value"-->
+<!--                        :disabled="udmNeId === v.value"-->
+<!--                      >-->
+<!--                        {{ v.label }}-->
+<!--                      </a-menu-item>-->
+<!--                    </a-menu>-->
+<!--                  </template>-->
+<!--                </a-dropdown>-->
               </span>
             </div>
             <div
               class="item toRouter"
-              @click="fnToRouter('Ims_2080')"
-              :title="t('views.dashboard.overview.VoNR')"
+              @click="fnToRouter('ImsUDM_2050')"
+              :title="t('views.dashboard.overview.IMSUsers')"
               style="margin: 0 12px"
-              v-perms:has="['dashboard:overview:imsUeNum']"
             >
               <div>
-                <img :src="svgUserIMS" style="width: 18px; margin-right: 8px" />
-                {{ skimState.imsUeNum }}
+                <UserOutlined
+                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
+                />
+                {{ skimState.imsUserNum }}
               </div>
               <span>
-                {{ t('views.dashboard.overview.skim.imsUeNum') }}
+                IMS
               </span>
             </div>
             <div
               class="item toRouter"
-              @click="fnToRouter('Ue_2081')"
-              :title="t('views.dashboard.overview.sessions')"
-              v-perms:has="['dashboard:overview:smfUeNum']"
+              @click="fnToRouter('Voip_2051')"
+              :title="t('views.dashboard.overview.VoIPUsers')"
             >
               <div>
-                <img :src="svgUserSMF" style="width: 18px; margin-right: 8px" />
-                {{ skimState.smfUeNum }}
+                <UserOutlined
+                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
+                />
+                {{ skimState.voipUserNum }}
               </div>
               <span>
-                {{ t('views.dashboard.overview.skim.smfUeNum') }}
+                VoIP
               </span>
             </div>
           </div>
         </div>
       </div>
+
       <div class="skim panel base" v-perms:has="['dashboard:overview:gnbBase']">
         <div class="inner">
           <h3>
@@ -547,6 +611,40 @@ onBeforeUnmount(() => {
         </div>
       </div>
 
+      <!-- Online Information -->
+      <div class="skim panel base" v-perms:has="['dashboard:overview:onlineInfo']">
+        <div class="inner">
+          <h3>
+            <IdcardOutlined style="color: #68d8fe" />&nbsp;&nbsp; {{ t('views.dashboard.overview.skim.onlineinfo') }}
+          </h3>
+          <div class="data">
+            <div
+              class="item toRouter"
+              @click="fnToRouter('Ims_2080')"
+              :title="t('views.dashboard.overview.VoNR')"
+            >
+              <div style="align-items: flex-start">
+                <img :src="svgUserIMS" style="width: 18px; margin-right: 8px; height: 2rem" />
+                {{ skimState.imsUeNum }}
+              </div>
+              <span>{{ t('views.dashboard.overview.skim.imsUeNum') }}</span>
+            </div>
+            <div
+              class="item toRouter"
+              @click="fnToRouter('Ue_2081')"
+              :title="t('views.dashboard.overview.sessions')"
+              v-perms:has="['dashboard:overview:smfUeNum']"
+            >
+              <div style="align-items: flex-start">
+                <img :src="svgUserSMF" style="width: 18px; margin-right: 8px; height: 2rem" />
+                {{ skimState.smfUeNum }}
+              </div>
+              <span>{{ t('views.dashboard.overview.skim.smfUeNum') }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <!-- 用户行为 -->
       <div class="userActivity panel">
         <div class="inner">
@@ -571,8 +669,8 @@ onBeforeUnmount(() => {
           >
             <AreaChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
             <span @click="fnToRouter('GoldTarget_2104')">{{
-              t('views.dashboard.overview.upfFlow.title')
-            }}</span>
+                t('views.dashboard.overview.upfFlow.title')
+              }}</span>
             <a-select
               v-model:value="upfWhoId"
               :options="neOtions"