fe.ems.vue3/src/views/index/moduleInfo.vue

<script setup lang="ts">
import { ref, onMounted, markRaw, reactive } from 'vue';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { listSub } from '@/api/neUser/sub';
import { listUENumBySMF } from '@/api/neUser/smf';
import { listBase5G } from '@/api/neUser/base5G';
import { useRouter } from 'vue-router';
const router = useRouter();
const { t } = useI18n();

/**概览状态类型 */
type SkimStateType = {
  /**UDM签约用户数量 */
  udmSubNum: number;
  /**SMF在线用户数 */
  smfUeNum: number;
  /**5G基站数量 */
  gnbNum: number;
  /**5G在线用户数量 */
  gnbUeNum: number;
  /**4G基站数量 */
  enbNum: number;
  /**4G在线用户数量 */
  enbUeNum: number;
};

/**概览状态信息 */
let skimState: SkimStateType = reactive({
  udmSubNum: 0,
  smfUeNum: 0,
  gnbNum: 0,
  gnbUeNum: 0,
  enbNum: 0,
  enbUeNum: 0,
});

/**获取概览信息 */
async function fnGetSkim() {
  const resArr = await Promise.allSettled([
    listSub({
      neid: '001',
      pageNum: 1,
      pageSize: 1,
    }),
    listUENumBySMF('001'),
    listBase5G({
      neType: 'AMF',
      neId: '001',
    }),
    listBase5G({
      neType: 'MME',
      neId: '001',
    }),
  ]);

  if (resArr[0].status === 'fulfilled') {
    const res0 = resArr[0].value;
    if (res0.code === RESULT_CODE_SUCCESS) {
      skimState.udmSubNum = res0.total;
    }
  }
  if (resArr[1].status === 'fulfilled') {
    const res1 = resArr[1].value;
    if (res1.code === RESULT_CODE_SUCCESS) {
      skimState.smfUeNum = res1.data;
    }
  }

  if (resArr[2].status === 'fulfilled') {
    const res2 = resArr[2].value;
    if (res2.code === RESULT_CODE_SUCCESS) {
      skimState.gnbNum = res2.total;
      skimState.gnbUeNum = 0;
      res2.rows.map((item: any) => {
        skimState.gnbUeNum += item.ueNum;
      });
    }
  }
  if (resArr[3].status === 'fulfilled') {
    const res3 = resArr[3].value;
    if (res3.code === RESULT_CODE_SUCCESS) {
      skimState.enbNum = res3.total;
      skimState.enbUeNum = 0;
      res3.rows.map((item: any) => {
        skimState.enbUeNum += item.ueNum;
      });
    }
  }
}

/**栏目信息跳转 */
function fnToRouter(name: string, query?: any) {
  router.push({ name, query });
}

onMounted(() => {
  fnGetSkim();
});
</script>

<template>
  <a-row :gutter="[8, 8]" justify="space-between">
    <a-col :lg="6" :md="24" :xs="24">
      <a-card
        :bordered="false"
        style="background: linear-gradient(135deg, #abdcff, #0396ff)"
        :hoverable="true"
        class="cardClass"
      >
        <div class="visual">
          <rise-outlined />
        </div>
        <div class="details">
          <div class="number" @click="fnToRouter('Sub_2158')">
            <UserOutlined class="spaceButton" />
            {{ skimState.udmSubNum }}
          </div>
          <div class="desc">
            <span class="flexibleSpan gNodeBSpan">
              {{ t('views.dashboard.overview.skim.users') }}
            </span>
          </div>
        </div>
      </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 class="visual">
          <bar-chart-outlined />
        </div>
        <div class="details">
          <div class="number" @click="fnToRouter('Ue_2162')">
            <database-outlined class="spaceButton" />
            {{ skimState.smfUeNum }}
          </div>
          <div class="desc">
            <span class="flexibleSpan dataSpan">
              {{ t('views.dashboard.overview.skim.smfUeNum') }}
            </span>
          </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)"
        :hoverable="true"
        class="cardClass"
      >
        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :xs="24">
            <div class="visual45G">
              <bar-chart-outlined />
            </div>
            <div class="details">
              <div class="number" @click="fnToRouter('Base5G_2161',{ neType: 'AMF' })">
                <wifi-outlined class="spaceButton" />
                {{ skimState.gnbNum }}
              </div>
              <div class="desc">
                <span class="flexibleSpan gNodeBSpan">{{
                  t('views.dashboard.overview.skim.gnbBase')
                }}</span>
              </div>
            </div>
          </a-col>
          <a-col :lg="12" :md="12" :xs="24">
            <div class="visual45G">
              <bar-chart-outlined />
            </div>
            <div class="details">
              <div class="number" @click="fnToRouter('Base5G_2161',{ neType: 'AMF' })">
                <UserOutlined class="spaceButton" />
                {{ skimState.gnbUeNum }}
              </div>
              <div class="desc">
                <span class="flexibleSpan gUserSpan">{{
                  t('views.dashboard.overview.skim.gnbUeNum')
                }}</span>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </a-col>

    <a-col :lg="6" :md="24" :xs="24">
      <a-card
        :bordered="false"
        style="background: linear-gradient(135deg, #42e695, #3bb2b8)"
        :hoverable="true"
        class="cardClass"
      >
        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :xs="24">
            <div class="visual45G">
              <bar-chart-outlined />
            </div>
            <div class="details">
              <div class="number" @click="fnToRouter('Base5G_2161',{ neType: 'MME' })">
                <wifi-outlined class="spaceButton" />
                {{ skimState.enbNum }}
              </div>
              <div class="desc">
                <span class="flexibleSpan eNodeBSpan">{{
                  t('views.dashboard.overview.skim.enbBase')
                }}</span>
              </div>
            </div>
          </a-col>
          <a-col :lg="12" :md="12" :xs="24">
            <div class="visual45G">
              <bar-chart-outlined />
            </div>
            <div class="details">
              <div class="number" @click="fnToRouter('Base5G_2161',{ neType: 'MME' })">
                <UserOutlined class="spaceButton" /> {{ skimState.enbUeNum }}
              </div>
              <div class="desc">
                <span class="flexibleSpan eUserSpan">{{
                  t('views.dashboard.overview.skim.enbUeNum')
                }}</span>
              </div>
            </div>
          </a-col>
        </a-row>
      </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> -->
</template>

<style lang="less" scoped>
@import url('./css/module.css');
</style>