调整租户首页

2024-07-11 19:36:05 +08:00
parent 1f6a13951f
commit c36f402528
2 changed files with 157 additions and 61 deletions
--- a/src/views/index/css/module.css
+++ b/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 {
--- a/src/views/index/moduleInfo.vue
+++ b/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-col :lg="6" :md="24" :xs="24">
+  <a-row :gutter="[16, 16]" justify="space-between">
+    <!-- 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">
-      <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">
-            {{ 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">
+    <!-- 5G基站-AMF -->
+    <a-col :lg="8" :md="24" :xs="24">
      <a-card
        :bordered="false"
        style="background: linear-gradient(135deg, #3c8ce7, #00eaff)"
@@ -164,7 +200,7 @@ onMounted(() => {
      >
        <div style="text-align: center">
          <span style="font-size: 24px; font-weight: bold; color: #fff">
-            {{ t('views.neUser.base5G.gnb') }} 
+            {{ t('views.neUser.base5G.gnb') }}
          </span>
        </div>

@@ -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">
-    <a-row>
-      <a-col :span="8"
-        ><a-avatar :size="48">
-          <template #icon><UserOutlined /></template>
-        </a-avatar>
-      </a-col>
-      <a-col :span="8">
-        <a-statistic
-          title="Active Users"
-          :value="112893"
-          style="margin-right: 50px"
-        />
-      </a-col>
-      <a-col :span="8">
-        <a-statistic
-          title="Active Users"
-          :value="112893"
-          style="margin-right: 50px"
-        />
-      </a-col>
-    </a-row>
-  </a-card> -->
+    <!-- 在线信息 SMF以及IMS -->
+    <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">
+            Online Sessions
+          </span>
+        </div>
+        <div class="detailsLeft">
+          <div class="number" @click="fnToRouter('Ims_10020')">
+            <PhoneOutlined />
+            {{ skimState.imsUeNum }}
+          </div>
+        </div>
+        <div class="details">
+          <div class="number" @click="fnToRouter('Ue_10011')">
+            <database-outlined class="spaceButton" />
+            {{ 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>