调整租户首页

src/views/index/css/module.css

@@ -1,6 +1,6 @@
 .cardClass {
     width: 100%;
-    height:170px;
+    height:220px;
     border-radius: 10px;
 }
 
@@ -10,13 +10,13 @@
 
 .visual {
     width: 80px;
-    height: 80px;
+    height: 120px;
     display: block;
     float: left;
-    padding-top: 2px;
+    padding-top: 32px;
     padding-left: -30px;
     margin-bottom: 15px;
-    font-size: 100px;
+    font-size: 120px;
     line-height: 55px;
     background-size: contain;
     opacity: 0.2; /* 调整透明度以使其成为背景 */
@@ -43,13 +43,13 @@
     position: absolute;
     right: 15px;
     padding-right: 15px;
-    top: 50%;
+    top: 60%;
 }
 .detailsLeft {
     position: absolute;
     left: 15px;
     padding-left: 15px;
-    top: 50%;
+    top: 60%;
 }
 /* 
 .details {

src/views/index/moduleInfo.vue

@@ -7,6 +7,10 @@ import { listUENumBySMF, listUEInfoBySMF } from '@/api/neUser/smf';
 import svgBasefff from '@/assets/svg/basefff.svg';
 import { listBase5G } from '@/api/neUser/base5G';
 import { useRouter } from 'vue-router';
+import { listUENumByIMS } from '@/api/neUser/ims';
+import { listSMFDataCDR } from '@/api/neData/smf';
+import { listIMSDataCDR } from '@/api/neData/ims';
+import { listSysLogOperate } from '@/api/system/log/operate';
 const router = useRouter();
 const { t } = useI18n();
 
@@ -24,6 +28,14 @@ type SkimStateType = {
   enbNum: number;
   /**4G在线用户数量 */
   enbUeNum: number;
+  /**IMS在线用户数量 */
+  imsUeNum: number;
+  /**SMF CDR数量 */
+  smfCdrNum: number;
+  /**IMS CDR数量 */
+  imsCdrNum: number;
+  /**操作日志数量 */
+  operNum: number;
 };
 
 /**概览状态信息 */
@@ -34,6 +46,10 @@ let skimState: SkimStateType = reactive({
   gnbUeNum: 0,
   enbNum: 0,
   enbUeNum: 0,
+  imsUeNum: 0,
+  smfCdrNum: 0,
+  imsCdrNum: 0,
+  operNum: 0,
 });
 
 /**获取概览信息 */
@@ -57,6 +73,23 @@ async function fnGetSkim() {
       neType: 'MME',
       neId: '001',
     }),
+    listUENumByIMS('001'),
+    listSMFDataCDR({
+      neType: 'SMF',
+      neId: '001',
+      pageNum: 1,
+      pageSize: 20,
+    }),
+    listIMSDataCDR({
+      neType: 'IMS',
+      neId: '001',
+      pageNum: 1,
+      pageSize: 20,
+    }),
+    listSysLogOperate({
+      pageNum: 1,
+      pageSize: 20,
+    }),
   ]);
 
   if (resArr[0].status === 'fulfilled') {
@@ -92,6 +125,31 @@ async function fnGetSkim() {
       });
     }
   }
+  if (resArr[4].status === 'fulfilled') {
+    const res4 = resArr[4].value;
+    if (res4.code === RESULT_CODE_SUCCESS) {
+      skimState.imsUeNum = res4.data;
+    }
+  }
+  if (resArr[5].status === 'fulfilled') {
+    const res5 = resArr[5].value;
+    if (res5.code === RESULT_CODE_SUCCESS) {
+      skimState.smfCdrNum = res5.total;
+    }
+  }
+
+  if (resArr[6].status === 'fulfilled') {
+    const res6 = resArr[6].value;
+    if (res6.code === RESULT_CODE_SUCCESS) {
+      skimState.imsCdrNum = res6.total;
+    }
+  }
+  if (resArr[7].status === 'fulfilled') {
+    const res7 = resArr[7].value;
+    if (res7.code === RESULT_CODE_SUCCESS) {
+      skimState.operNum = res7.total;
+    }
+  }
 }
 
 /**栏目信息跳转 */
@@ -105,8 +163,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-row :gutter="[8, 8]" justify="space-between">
+  <a-row :gutter="[16, 16]" justify="space-between">
-    <a-col :lg="6" :md="24" :xs="24">
+    <!-- UDM 签约用户 -->
+    <a-col :lg="8" :md="24" :xs="24">
       <a-card
         :bordered="false"
         style="background: linear-gradient(135deg, #abdcff, #0396ff)"
@@ -131,31 +190,8 @@ onMounted(() => {
       </a-card>
     </a-col>
 
-    <a-col :lg="6" :md="24" :xs="24">
+    <!-- 5G基站-AMF -->
-      <a-card
+    <a-col :lg="8" :md="24" :xs="24">
-        :bordered="false"
-        style="background: linear-gradient(135deg, #1d976c, #93f9b9)"
-        :hoverable="true"
-        class="cardClass"
-      >
-        <div style="text-align: center">
-          <span style="font-size: 24px; font-weight: bold; color: #fff">
-            {{ t('views.dashboard.overview.skim.smfUeNum') }}
-          </span>
-        </div>
-        <div class="visual">
-          <bar-chart-outlined />
-        </div>
-        <div class="details">
-          <div class="number" @click="fnToRouter('Ue_10011')">
-            <database-outlined class="spaceButton" />
-            {{ skimState.smfUeNum }}
-          </div>
-        </div>
-      </a-card>
-    </a-col>
-
-    <a-col :lg="6" :md="24" :xs="24">
       <a-card
         :bordered="false"
         style="background: linear-gradient(135deg, #3c8ce7, #00eaff)"
@@ -193,16 +229,17 @@ onMounted(() => {
       </a-card>
     </a-col>
 
-    <a-col :lg="6" :md="24" :xs="24">
+    <!-- 4G基站-MME -->
+    <a-col :lg="8" :md="24" :xs="24">
       <a-card
         :bordered="false"
-        style="background: linear-gradient(135deg, #42e695, #3bb2b8)"
+        style="background: linear-gradient(135deg, #00eaff, #3c8ce7)"
         :hoverable="true"
         class="cardClass"
       >
         <div style="text-align: center">
           <span style="font-size: 24px; font-weight: bold; color: #fff">
-           {{ t('views.neUser.base5G.enb') }} 
+            {{ t('views.neUser.base5G.enb') }}
           </span>
         </div>
 
@@ -229,31 +266,90 @@ onMounted(() => {
         </div>
       </a-card>
     </a-col>
-  </a-row>
 
-  <!-- <a-card style="width: 300px">
+    <!-- 在线信息 SMF以及IMS -->
-    <a-row>
+    <a-col :lg="8" :md="24" :xs="24">
-      <a-col :span="8"
+      <a-card
-        ><a-avatar :size="48">
+        :bordered="false"
-          <template #icon><UserOutlined /></template>
+        style="background: linear-gradient(135deg, #93f9b9, #1d976c)"
-        </a-avatar>
+        :hoverable="true"
-      </a-col>
+        class="cardClass"
-      <a-col :span="8">
+      >
-        <a-statistic
+        <div style="text-align: center">
-          title="Active Users"
+          <span style="font-size: 24px; font-weight: bold; color: #fff">
-          :value="112893"
+            Online Sessions
-          style="margin-right: 50px"
+          </span>
-        />
+        </div>
-      </a-col>
+        <div class="detailsLeft">
-      <a-col :span="8">
+          <div class="number" @click="fnToRouter('Ims_10020')">
-        <a-statistic
+            <PhoneOutlined />
-          title="Active Users"
+            {{ skimState.imsUeNum }}
-          :value="112893"
+          </div>
-          style="margin-right: 50px"
+        </div>
-        />
+        <div class="details">
-      </a-col>
+          <div class="number" @click="fnToRouter('Ue_10011')">
-    </a-row>
+            <database-outlined class="spaceButton" />
-  </a-card> -->
+            {{ skimState.smfUeNum }}
+          </div>
+        </div>
+      </a-card>
+    </a-col>
+
+    <!-- CDR SMF以及IMS -->
+    <a-col :lg="8" :md="24" :xs="24">
+      <a-card
+        :bordered="false"
+        style="background: linear-gradient(135deg, #1d976c, #93f9b9)"
+        :hoverable="true"
+        class="cardClass"
+      >
+        <div style="text-align: center">
+          <span style="font-size: 24px; font-weight: bold; color: #fff">
+            CDR
+          </span>
+        </div>
+
+        <div class="detailsLeft">
+          <div class="number" @click="fnToRouter('ImsCDR_10013')">
+            <PhoneOutlined />
+            {{ skimState.imsCdrNum }}
+          </div>
+        </div>
+        <div class="details">
+          <div class="number" @click="fnToRouter('SmfCDR_10014')">
+            <database-outlined class="spaceButton" />
+            {{ skimState.smfCdrNum }}
+          </div>
+        </div>
+      </a-card>
+    </a-col>
+
+    <!-- 操作日志 -->
+    <a-col :lg="8" :md="24" :xs="24">
+      <a-card
+        :bordered="false"
+        style="background: linear-gradient(135deg, #93f9b9, #1d976c)"
+        :hoverable="true"
+        class="cardClass"
+      >
+        <div style="text-align: center">
+          <span style="font-size: 24px; font-weight: bold; color: #fff">
+            Operate Logs
+          </span>
+        </div>
+
+        <div class="visual">
+          <BarChartOutlined />
+        </div>
+
+        <div class="details">
+          <div class="number" @click="fnToRouter('Operate_10018')">
+            <FileTextOutlined class="spaceButton" /> {{ skimState.operNum }}
+          </div>
+        </div>
+      </a-card>
+    </a-col>
+  </a-row>
 </template>
 
 <style lang="less" scoped>