From 3970797d5b4d3a73628a708da45be730b683b8f0 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 11 Apr 2024 11:58:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20BA=E9=9C=80=E8=A6=81=E7=9A=84mocn?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mocn/components/AlarnTypeBar/index.vue    | 202 +++++++
 .../dashboard/mocn/components/setting.vue     |  90 +++
 src/views/dashboard/mocn/index.vue            | 567 ++++++++++++++++++
 3 files changed, 859 insertions(+)
 create mode 100644 src/views/dashboard/mocn/components/AlarnTypeBar/index.vue
 create mode 100644 src/views/dashboard/mocn/components/setting.vue
 create mode 100644 src/views/dashboard/mocn/index.vue

diff --git a/src/views/dashboard/mocn/components/AlarnTypeBar/index.vue b/src/views/dashboard/mocn/components/AlarnTypeBar/index.vue
new file mode 100644
index 00000000..cbfaa1cd
--- /dev/null
+++ b/src/views/dashboard/mocn/components/AlarnTypeBar/index.vue
@@ -0,0 +1,202 @@
+<script setup lang="ts">
+import * as echarts from 'echarts/core';
+import {
+  TitleComponent,
+  TitleComponentOption,
+  TooltipComponent,
+  TooltipComponentOption,
+  GridComponent,
+  GridComponentOption,
+  LegendComponent,
+  LegendComponentOption,
+} from 'echarts/components';
+import {
+  PieChart,
+  PieSeriesOption,
+  BarChart,
+  BarSeriesOption,
+} from 'echarts/charts';
+import { LabelLayout } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+
+import { markRaw, onMounted, ref } from 'vue';
+import { origGet, top3Sel } from '@/api/faultManage/actAlarm';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+
+const { t } = useI18n();
+
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  PieChart,
+  BarChart,
+  CanvasRenderer,
+  LabelLayout,
+]);
+
+type EChartsOption = echarts.ComposeOption<
+  | TitleComponentOption
+  | TooltipComponentOption
+  | GridComponentOption
+  | LegendComponentOption
+  | PieSeriesOption
+  | BarSeriesOption
+>;
+
+/**图DOM节点实例对象 */
+const alarmTypeBar = ref<HTMLElement | undefined>(undefined);
+
+/**图实例对象 */
+const alarmTypeBarChart = ref<any>(null);
+
+/**告警类型数据 */
+const alarmTypeType = ref<any>([
+  {
+    value: 0,
+    name: t('views.index.Critical'),
+  },
+  {
+    value: 0,
+    name: t('views.index.Major'),
+  },
+  {
+    value: 0,
+    name: t('views.index.Minor'),
+  },
+  {
+    value: 0,
+    name: t('views.index.Warning'),
+  },
+  {
+    value: 0,
+    name: t('views.index.Event'),
+  },
+]);
+
+//
+function initPicture() {
+  Promise.allSettled([origGet()])
+    .then(resArr => {
+      if (resArr[0].status === 'fulfilled') {
+        const res0 = resArr[0].value;
+        if (res0.code === RESULT_CODE_SUCCESS && Array.isArray(res0.data)) {
+          for (const item of res0.data) {
+            let index = 0;
+            switch (item.name) {
+              case 'Critical':
+                index = 0;
+                break;
+              case 'Major':
+                index = 1;
+                break;
+              case 'Minor':
+                index = 2;
+                break;
+              case 'Warning':
+                index = 3;
+                break;
+              case 'Event':
+                index = 4;
+                break;
+            }
+            alarmTypeType.value[index].value = Number(item.value);
+          }
+        }
+      }
+    })
+    .then(() => {
+      const optionData: EChartsOption = {
+        title: [
+          {
+            show: false,
+          },
+        ],
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b} : {c}',
+        },
+        legend: {
+          orient: 'vertical',
+          right: '2%',
+          top: '10%',
+          data: alarmTypeType.value.map((item: any) => item.name), //label数组
+          textStyle: {
+            color: '#A7D6F4', // 设置图例文字颜色
+          },
+        },
+        grid: [
+          {
+            top: '60%',
+            left: '15%',
+            right: '25%',
+            bottom: '10%',
+          },
+        ],
+        series: [
+          //饼图:
+          {
+            type: 'pie',
+            radius: '60%',
+            color: ['#f5222d', '#fa8c16', '#fadb14', '#1677ff', '#13c2c2'],
+            label: {
+              show: true,
+              position: 'inner',
+              formatter: (params: any) => {
+                if (!params.value) return '';
+                return `${params.value}`;
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            center: ['30%', '40%'],
+            data: alarmTypeType.value,
+            zlevel: 2, // 设置zlevel为1，使得柱状图在下层显示
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)',
+            },
+          },
+        ],
+      };
+
+      fnDesign(alarmTypeBar.value, optionData);
+    });
+}
+
+function fnDesign(container: HTMLElement | undefined, option: any) {
+  if (!container) return;
+
+  alarmTypeBarChart.value = markRaw(echarts.init(container, 'light'));
+  option && alarmTypeBarChart.value.setOption(option);
+
+  // 创建 ResizeObserver 实例
+  var observer = new ResizeObserver(entries => {
+    if (alarmTypeBarChart.value) {
+      alarmTypeBarChart.value.resize();
+    }
+  });
+  // 监听元素大小变化
+  observer.observe(container);
+}
+
+onMounted(() => {
+  initPicture();
+});
+</script>
+
+<template>
+  <div ref="alarmTypeBar" class="chart-container"></div>
+</template>
+
+<style lang="less" scoped>
+.chart-container {
+  /* 设置图表容器大小和位置 */
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/dashboard/mocn/components/setting.vue b/src/views/dashboard/mocn/components/setting.vue
new file mode 100644
index 00000000..24a70087
--- /dev/null
+++ b/src/views/dashboard/mocn/components/setting.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { reactive, toRaw, watch } from 'vue';
+import { dbGetJSON, dbSetJSON } from '@/utils/cache-db-utils';
+const emit = defineEmits(['ok', 'cancel', 'update:visible']);
+const props = defineProps({
+  title: {
+    type: String,
+    default: '标题',
+  },
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+/**数据参数 */
+let dataState = reactive({
+  /**基站数 */
+  baseNum: 0,
+  /**核心网数 */
+  coreNetNum: 0,
+  /**在线用户数 */
+  onlineUserNum: 0,
+});
+
+/**弹框取消按钮事件 */
+function fnModalOk() {
+  dbSetJSON('tbl_mocn', `tmp`, toRaw(dataState));
+  emit('ok');
+  emit('update:visible', false);
+}
+
+/**弹框取消按钮事件 */
+function fnModalCancel() {
+  emit('cancel');
+  emit('update:visible', false);
+}
+
+/**显示弹框时初始数据 */
+function init() {
+  // 读取数据
+  dbGetJSON('tbl_mocn', `tmp`).then(data => {
+    if (data) {
+      Object.assign(dataState, data);
+    }
+  });
+}
+
+/**监听是否显示，初始数据 */
+watch(
+  () => props.visible,
+  val => {
+    if (val) init();
+  }
+);
+</script>
+
+<template>
+  <a-modal
+    width="800px"
+    :title="props.title"
+    :visible="props.visible"
+    :keyboard="false"
+    :mask-closable="false"
+    @cancel="fnModalCancel"
+    @ok="fnModalOk"
+  >
+    <a-form
+      name="dataState"
+      layout="horizontal"
+      :label-col="{ span: 6 }"
+      :labelWrap="true"
+    >
+      <a-form-item label="baseNum" name="baseNum">
+        <a-input-number v-model:value="dataState.baseNum"> </a-input-number>
+      </a-form-item>
+      <a-form-item label="coreNetNum" name="coreNetNum">
+        <a-input-number v-model:value="dataState.coreNetNum"> </a-input-number>
+      </a-form-item>
+      <a-form-item label="onlineUserNum" name="onlineUserNum">
+        <a-input-number v-model:value="dataState.onlineUserNum">
+        </a-input-number>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<style lang="less" scoped></style>
+
+<style lang="less" scoped></style>
diff --git a/src/views/dashboard/mocn/index.vue b/src/views/dashboard/mocn/index.vue
new file mode 100644
index 00000000..0ac90dda
--- /dev/null
+++ b/src/views/dashboard/mocn/index.vue
@@ -0,0 +1,567 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
+import svgBase from '@/assets/svg/base.svg';
+import svgUserIMS from '@/assets/svg/userIMS.svg';
+import svgUserSMF from '@/assets/svg/userSMF.svg';
+import useI18n from '@/hooks/useI18n';
+import Topology from '../overview/components/Topology/index.vue';
+import NeResources from '../overview/components/NeResources/index.vue';
+import UserActivity from '../overview/components/UserActivity/index.vue';
+import AlarnTypeBar from './components/AlarnTypeBar/index.vue';
+import setting from './components/setting.vue';
+import UPFFlow from '../overview/components/UPFFlow/index.vue';
+import { listSub } from '@/api/neUser/sub';
+import { listUENumBySMF } from '@/api/neUser/smf';
+import { listUENumByIMS } from '@/api/neUser/ims';
+import { listBase5G } from '@/api/neUser/base5G';
+import {
+  graphNodeClickID,
+  graphState,
+  notNeNodes,
+  graphNodeStateNum,
+  neStateRequestMap,
+} from '../overview/hooks/useTopology';
+import { upfTotalFlow, upfTFActive } from '../overview/hooks/useUPFTotalFlow';
+import { useFullscreen } from '@vueuse/core';
+import useWS from '../overview/hooks/useWS';
+import useAppStore from '@/store/modules/app';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { useRouter } from 'vue-router';
+import { dbGetJSON } from '@/utils/cache-db-utils';
+const router = useRouter();
+const appStore = useAppStore();
+const { t } = useI18n();
+const { wsSend, cdrEventSend, ueEventSend, upfTFSend } = useWS();
+
+/**概览状态类型 */
+type SkimStateType = {
+  /**UDM签约用户数量 */
+  udmSubNum: number;
+  /**SMF在线用户数 */
+  smfUeNum: number;
+  /**IMS在线用户数 */
+  imsUeNum: number;
+  /**5G基站数量 */
+  gnbNum: number;
+  /**5G在线用户数量 */
+  gnbUeNum: number;
+  /**4G基站数量 */
+  enbNum: number;
+  /**4G在线用户数量 */
+  enbUeNum: number;
+};
+
+/**概览状态信息 */
+let skimState: SkimStateType = reactive({
+  udmSubNum: 0,
+  smfUeNum: 0,
+  imsUeNum: 0,
+  gnbNum: 0,
+  gnbUeNum: 0,
+  enbNum: 0,
+  enbUeNum: 0,
+});
+
+/**总览节点 */
+const viewportDom = ref<HTMLElement | null>(null);
+const { isFullscreen, toggle } = useFullscreen(viewportDom);
+
+/**10s调度器 */
+const interval10s = ref<any>(null);
+
+/**5s调度器 */
+const interval5s = ref<any>(null);
+
+/**查询网元状态 */
+function fnGetNeState() {
+  // 获取节点状态
+  for (const node of graphState.data.nodes) {
+    if (notNeNodes.includes(node.id)) continue;
+    const { neType, neId } = node.neInfo;
+    if (!neType || !neId) continue;
+    // 请求标记检查避免重复发送
+    if (neStateRequestMap.value.get(neType)) continue;
+    neStateRequestMap.value.set(neType, true);
+
+    wsSend({
+      requestId: `neState_${neType}_${neId}`,
+      type: 'ne_state',
+      data: {
+        neType: neType,
+        neId: neId,
+      },
+    });
+  }
+}
+
+/**获取概览信息 */
+async function fnGetSkim() {
+  const resArr = await Promise.allSettled([
+    listSub({
+      neid: '001',
+      pageNum: 1,
+      pageSize: 1,
+    }),
+    listUENumBySMF('001'),
+    listUENumByIMS('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.imsUeNum = res2.data;
+    }
+  }
+  if (resArr[3].status === 'fulfilled') {
+    const res3 = resArr[3].value;
+    if (res3.code === RESULT_CODE_SUCCESS) {
+      skimState.gnbNum = res3.total;
+      skimState.gnbUeNum = 0;
+      res3.rows.map((item: any) => {
+        skimState.gnbUeNum += item.ueNum;
+      });
+    }
+  }
+  if (resArr[4].status === 'fulfilled') {
+    const res4 = resArr[4].value;
+    if (res4.code === RESULT_CODE_SUCCESS) {
+      skimState.enbNum = res4.total;
+      skimState.enbUeNum = 0;
+      res4.rows.map((item: any) => {
+        skimState.enbUeNum += item.ueNum;
+      });
+    }
+  }
+}
+
+/**初始数据函数 */
+function loadData() {
+  fnGetNeState(); // 获取网元状态
+  cdrEventSend();
+  ueEventSend();
+  upfTFSend(0);
+  upfTFSend(7);
+  upfTFSend(30);
+
+  interval10s.value = setInterval(() => {
+    upfTFActive.value = upfTFActive.value >= 2 ? 0 : upfTFActive.value + 1;
+    if (upfTFActive.value === 0) {
+      upfTFSend(7);
+    } else if (upfTFActive.value === 1) {
+      upfTFSend(30);
+    } else if (upfTFActive.value === 2) {
+      upfTFSend(0);
+    }
+  }, 10_000);
+
+  interval5s.value = setInterval(() => {
+    fnGetSkim(); // 获取概览信息
+    fnGetNeState(); // 获取网元状态
+  }, 5_000);
+}
+
+/**栏目信息跳转 */
+function fnToRouter(name: string, query?: any) {
+  router.push({ name, query });
+}
+
+onMounted(() => {
+  fnGetSkim().then(() => {
+    loadData();
+  });
+  // 读取数据
+  dbGetJSON('tbl_mocn', `tmp`).then(data => {
+    if (data) {
+      Object.assign(mocnState.data, data);
+    }
+  });
+});
+
+onBeforeUnmount(() => {
+  clearInterval(interval10s.value);
+  clearInterval(interval5s.value);
+});
+
+/**MOCN状态 */
+const mocnState = reactive({
+  title: 'Set MOCN Data',
+  visible: false,
+  data: {
+    /**基站数 */
+    baseNum: 0,
+    /**核心网数 */
+    coreNetNum: 0,
+    /**在线用户数 */
+    onlineUserNum: 0,
+  },
+});
+/**MOCN 右击设置 */
+function fnRightClick() {
+  mocnState.visible = true;
+}
+</script>
+
+<template>
+  <div class="viewport" ref="viewportDom">
+    <div class="brand">
+      <div
+        class="brand-title"
+        @click="toggle"
+        :title="t('views.dashboard.overview.fullscreen')"
+      >
+        {{ t('views.dashboard.overview.title') }}
+        <FullscreenExitOutlined v-if="isFullscreen" />
+        <FullscreenOutlined v-else />
+      </div>
+      <div class="brand-desc">{{ appStore.appName }}</div>
+    </div>
+
+    <div class="column">
+      <!--概览-->
+      <div class="skim panel">
+        <div class="inner">
+          <h3>
+            <IdcardOutlined style="color: #68d8fe" />&nbsp;&nbsp;
+            {{ t('views.dashboard.overview.skim.userTitle') }}
+          </h3>
+          <div class="data">
+            <div
+              class="item toRouter"
+              @click="fnToRouter('Sub_2010')"
+              :title="t('views.dashboard.overview.toRouter')"
+            >
+              <div>
+                <UserOutlined
+                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
+                />
+                {{ skimState.udmSubNum }}
+              </div>
+              <span>
+                {{ t('views.dashboard.overview.skim.users') }}
+              </span>
+            </div>
+            <div
+              class="item toRouter"
+              @click="fnToRouter('Ims_2080')"
+              :title="t('views.dashboard.overview.toRouter')"
+              style="margin: 0 12px"
+            >
+              <div>
+                <img :src="svgUserIMS" style="width: 18px; margin-right: 8px" />
+                {{ 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.toRouter')"
+            >
+              <div>
+                <img :src="svgUserSMF" style="width: 18px; margin-right: 8px" />
+                {{ skimState.smfUeNum }}
+              </div>
+              <span>
+                {{ t('views.dashboard.overview.skim.smfUeNum') }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="skim panel base">
+        <div class="inner">
+          <h3>
+            <GlobalOutlined style="color: #68d8fe" />&nbsp;&nbsp;
+            {{ t('views.dashboard.overview.skim.baseTitle') }}
+          </h3>
+          <div class="data">
+            <div
+              class="item toRouter"
+              @click="fnToRouter('Base5G_2082', { neType: 'AMF' })"
+              :title="t('views.dashboard.overview.toRouter')"
+            >
+              <div style="align-items: flex-start">
+                <img
+                  :src="svgBase"
+                  style="width: 18px; margin-right: 8px; height: 2rem"
+                />
+                {{ skimState.gnbNum }}
+              </div>
+              <span>{{ t('views.dashboard.overview.skim.gnbBase') }}</span>
+            </div>
+            <div
+              class="item toRouter"
+              @click="fnToRouter('Base5G_2082', { neType: 'AMF' })"
+              :title="t('views.dashboard.overview.toRouter')"
+            >
+              <div style="align-items: flex-start">
+                <UserOutlined
+                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
+                />
+                {{ skimState.gnbUeNum }}
+              </div>
+              <span>{{ t('views.dashboard.overview.skim.gnbUeNum') }}</span>
+            </div>
+          </div>
+          <div class="data">
+            <div
+              class="item toRouter"
+              @click="fnToRouter('Base5G_2082', { neType: 'MME' })"
+              :title="t('views.dashboard.overview.toRouter')"
+            >
+              <div style="align-items: flex-start">
+                <img
+                  :src="svgBase"
+                  style="width: 18px; margin-right: 8px; height: 2rem"
+                />
+                {{ skimState.enbNum }}
+              </div>
+              <span>{{ t('views.dashboard.overview.skim.enbBase') }}</span>
+            </div>
+            <div
+              class="item toRouter"
+              @click="fnToRouter('Base5G_2082', { neType: 'MME' })"
+              :title="t('views.dashboard.overview.toRouter')"
+            >
+              <div style="align-items: flex-start">
+                <UserOutlined
+                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
+                />
+                {{ skimState.enbUeNum }}
+              </div>
+              <span>{{ t('views.dashboard.overview.skim.enbUeNum') }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 用户行为 -->
+      <div class="userActivity panel">
+        <div class="inner">
+          <h3>
+            <WhatsAppOutlined style="color: #68d8fe" />&nbsp;&nbsp;
+            {{ t('views.dashboard.overview.userActivity.title') }}
+          </h3>
+          <div class="chart">
+            <UserActivity />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="column" style="flex: 4; margin: 1.333rem 0.833rem 0">
+      <!-- 实时流量 -->
+      <div class="upfFlow panel">
+        <div class="inner">
+          <h3
+            class="toRouter"
+            @click="fnToRouter('GoldTarget_2104')"
+            :title="t('views.dashboard.overview.toRouter')"
+          >
+            <AreaChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
+            {{ t('views.dashboard.overview.upfFlow.title') }}
+          </h3>
+          <div class="chart">
+            <UPFFlow />
+          </div>
+        </div>
+      </div>
+      <!-- 网络拓扑 -->
+      <div class="topology panel">
+        <div class="inner">
+          <h3
+            class="toRouter"
+            @click="fnToRouter('TopologyArchitecture_2128')"
+            :title="t('views.dashboard.overview.toRouter')"
+          >
+            <span>
+              <ApartmentOutlined style="color: #68d8fe" />&nbsp;&nbsp;
+              {{ t('views.dashboard.overview.topology.title') }}
+            </span>
+            <span>
+              {{ t('views.dashboard.overview.topology.normal') }}:
+              <span class="normal"> {{ graphNodeStateNum[0] }} </span>
+              {{ t('views.dashboard.overview.topology.abnormal') }}:
+              <span class="abnormal"> {{ graphNodeStateNum[1] }} </span>
+            </span>
+          </h3>
+          <div class="chart">
+            <Topology />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="column">
+      <!-- 流量统计 -->
+      <div class="upfFlowTotal panel">
+        <div class="inner">
+          <h3>
+            <span>
+              <SwapOutlined style="color: #68d8fe" />&nbsp;&nbsp;
+              {{ t('views.dashboard.overview.upfFlowTotal.title') }}
+            </span>
+
+            <!-- 筛选 -->
+            <div class="filter">
+              <span
+                :data-key="v"
+                :class="{ active: upfTFActive === i }"
+                v-for="(v, i) in ['0', '7', '30']"
+                :key="v"
+                @click="
+                  () => {
+                    upfTFActive = i;
+                  }
+                "
+              >
+                {{
+                  v === '0'
+                    ? '24' + t('common.units.hour')
+                    : v + t('common.units.day')
+                }}
+              </span>
+            </div>
+          </h3>
+          <div class="chart">
+            <!-- 数据 -->
+            <div class="data">
+              <div class="item">
+                <span>
+                  <ArrowUpOutlined style="color: #597ef7" />
+                  {{ t('views.dashboard.overview.upfFlowTotal.up') }}
+                </span>
+                <h4>{{ upfTotalFlow[upfTFActive].up }}</h4>
+              </div>
+              <div class="item">
+                <span>
+                  <ArrowDownOutlined style="color: #52c41a" />
+                  {{ t('views.dashboard.overview.upfFlowTotal.down') }}
+                </span>
+                <h4>{{ upfTotalFlow[upfTFActive].down }}</h4>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- MOCN -->
+      <div class="skim panel mocn">
+        <div class="inner">
+          <h3
+            class="toRouter"
+            @contextmenu.prevent="fnRightClick()"
+            @click="fnToRouter('GoldTarget_2104', { neType: 'MOCNGW' })"
+            :title="t('views.dashboard.overview.toRouter')"
+          >
+            <PieChartOutlined style="color: #68d8fe" />&nbsp;&nbsp; MOCN
+            Information
+          </h3>
+          <div class="chart">
+            <div class="data">
+              <div class="item" title="NodeB">
+                <div>
+                  <img :src="svgBase" style="width: 18px; margin-right: 8px" />
+                  {{ mocnState.data.baseNum }}
+                </div>
+                <span> NodeB </span>
+              </div>
+              <div class="item" title="CoreNet">
+                <div>
+                  <img
+                    :src="svgUserSMF"
+                    style="width: 18px; margin-right: 8px"
+                  />
+                  {{ mocnState.data.coreNetNum }}
+                </div>
+                <span> CoreNet </span>
+              </div>
+            </div>
+            <div class="data">
+              <div class="item" title="OnlineUser">
+                <div>
+                  <UserOutlined
+                    style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
+                  />
+                  {{ mocnState.data.onlineUserNum }}
+                </div>
+                <span> OnlineUser </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 告警统计 -->
+      <div class="alarmType panel">
+        <div class="inner">
+          <h3
+            class="toRouter"
+            @click="fnToRouter('HistoryAlarm_2097')"
+            :title="t('views.dashboard.overview.toRouter')"
+          >
+            <PieChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
+            {{ t('views.dashboard.overview.alarmTypeBar.alarmSum') }}
+          </h3>
+          <div class="chart">
+            <AlarnTypeBar />
+          </div>
+        </div>
+      </div>
+      <!-- 资源情况 -->
+      <div class="resources panel">
+        <div class="inner">
+          <h3>
+            <DashboardOutlined style="color: #68d8fe" />&nbsp;&nbsp;
+            {{ t('views.dashboard.overview.resources.title') }}：
+            {{ graphNodeClickID }}
+          </h3>
+          <div class="chart">
+            <NeResources />
+          </div>
+        </div>
+      </div>
+    </div>
+    <setting
+      :title="mocnState.title"
+      v-model:visible="mocnState.visible"
+    ></setting>
+  </div>
+</template>
+
+<style lang="less" scoped>
+@import url('../overview/css/index.css');
+
+.mocn {
+  height: 20.6%;
+}
+.mocn .inner .chart .data {
+  height: unset;
+}
+
+.mocn .inner .chart .data .item {
+  width: 50%;
+}
+
+.alarmType {
+  height: 24.4%;
+}
+</style>