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,
 });
 
 /**网元参数 */
@@ -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,30 +439,20 @@ onBeforeUnmount(() => {
     <div class="column">
       <!--概览-->
       <div class="skim panel">
-        <div class="inner">
+        <div class="inner" style="padding: 0.8rem 1.5rem">
-          <h3>
+          <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') }}
-          </h3>
+            </span>
-          <div class="data">
-            <div
-              class="item toRouter"
-              :title="t('views.dashboard.overview.Users')"
-            >
-              <div @click="fnToRouter('Sub_2010')">
-                <UserOutlined
-                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
-                />
-                {{ skimState.udmSubNum }}
-              </div>
-              <span>
             <a-dropdown
               :trigger="['click']"
               :get-Popup-Container="getPopupContainer"
+              style="margin-left: 8px"
             >
-                  <div class="toDeep-text">
+              <div class="toDeep-text" style="padding: 2px 6px; font-size: 0.7rem; line-height: 1; height: 16px; display: inline-flex; align-items: center">
-                    {{ t('views.dashboard.overview.skim.users') }}
+                {{ udmOtions.find(item => item.value === udmNeId)?.label || 'UDM' }}
-                    <DownOutlined style="margin-left: 12px; font-size: 12px" />
+                <DownOutlined style="margin-left: 4px; font-size: 9px" />
               </div>
               <template #overlay>
                 <a-menu @click="fnSelectUDM">
@@ -438,40 +466,76 @@ onBeforeUnmount(() => {
                 </a-menu>
               </template>
             </a-dropdown>
+          </h3>
+          <div class="data">
+            <div
+              class="item toRouter"
+              :title="t('views.dashboard.overview.Users')"
+            >
+              <div @click="fnToRouter('Sub_2010')">
+                <UserOutlined
+                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
+                />
+                {{ skimState.udmSubNum }}
+              </div>
+              <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')"
+              @click="fnToRouter('ImsUDM_2050')"
-              :title="t('views.dashboard.overview.VoNR')"
+              :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" />
+                <UserOutlined
-                {{ skimState.imsUeNum }}
+                  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')"
+              @click="fnToRouter('Voip_2051')"
-              :title="t('views.dashboard.overview.sessions')"
+              :title="t('views.dashboard.overview.VoIPUsers')"
-              v-perms:has="['dashboard:overview:smfUeNum']"
             >
               <div>
-                <img :src="svgUserSMF" style="width: 18px; margin-right: 8px" />
+                <UserOutlined
-                {{ skimState.smfUeNum }}
+                  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">