feat:综合仪表盘修改迁移以及版本兼容修复

2025-07-18 17:27:12 +08:00
parent 8b6805fdb0
commit 96c1f54b71
11 changed files with 584 additions and 276 deletions
--- a/src/views/dashboard/overview2/components/AlarnTypeBar/index.vue
+++ b/src/views/dashboard/overview2/components/AlarnTypeBar/index.vue
@@ -78,9 +78,9 @@ const alarmTypeType = ref<any>([

 /**告警类型Top数据 */
 const alarmTypeTypeTop = ref<any>([
-  { neType: 'AMF', total: 0 },
-  { neType: 'UDM', total: 0 },
-  { neType: 'SMF', total: 0 },
+  { name: 'AMF', value: 0 },
+  { name: 'UDM', value: 0 },
+  { name: 'SMF', value: 0 },
 ]);

 //
@@ -92,7 +92,7 @@ function initPicture() {
        if (res0.code === RESULT_CODE_SUCCESS && Array.isArray(res0.data)) {
          for (const item of res0.data) {
            let index = 0;
-            switch (item.severity) {
+            switch (item.name) {
              case 'Critical':
                index = 0;
                break;
@@ -109,7 +109,7 @@ function initPicture() {
              //   index = 4;
              //   break;
            }
-            alarmTypeType.value[index].value = Number(item.total);
+            alarmTypeType.value[index].value = Number(item.value);
          }
        }
      }
@@ -119,7 +119,7 @@ function initPicture() {
          alarmTypeTypeTop.value = alarmTypeTypeTop.value
            .concat(res1.data)
            .sort((a: any, b: any) => {
-              return b.total - a.total;
+              return b.value - a.value;
            })
            .slice(0, 3);
        }
@@ -129,79 +129,123 @@ function initPicture() {
      const optionData: EChartsOption = {
        title: [
          {
-            show: false,
-          },
-          {
-            text: t('views.dashboard.overview.alarmTypeBar.topTitle'),
+            text: 'Top3',
+            left: 'center',
+            top: '36%',
            textStyle: {
              color: '#fff',
-              fontSize: '14',
-              fontWeight: 400,
+              fontSize: 16,
+              fontWeight: 'bold',
            },
-            top: '50%',
-            left: '0%',
          },
        ],
+        grid: [
+          { // 主图
+            top: '5%',
+            left: '20%',
+            right: '10%',
+            height: '35%'
+          },
+          { // Top3
+            top: '50%',
+            left: '20%',
+            right: '10%',
+            height: '30%'
+          }
+        ],
        tooltip: {
-          trigger: 'item',
+
+          axisPointer: { type: 'shadow' },
          formatter: '{b} : {c}',
        },
        legend: {
-          orient: 'vertical',
-          right: '2%',
-          top: '12%',
-          data: alarmTypeType.value.map((item: any) => item.name), //label数组
-          textStyle: {
-            color: '#A7D6F4', // 设置图例文字颜色
-          },
+          show: false
        },
-        grid: [
+        xAxis: [
          {
-            top: '60%',
-            left: '15%',
-            right: '25%',
-            bottom: '10%',
+            type: 'value',
+            gridIndex: 0,
+            show: false,
          },
+          {
+            type: 'value',
+            gridIndex: 1,
+            show: false,
+          }
+        ],
+        yAxis: [
+          {
+            type: 'category',
+            gridIndex: 0,
+            data: alarmTypeType.value.map((item: any) => item.name),
+            axisLabel: { color: '#fff', fontSize: 14,fontWeight: 'bold' },
+            axisLine: { show: false },
+            axisTick: { show: false },
+            inverse: true
+          },
+          {
+            type: 'category',
+            gridIndex: 1,
+            data: alarmTypeTypeTop.value.map((item: any) => item.name),
+            axisLabel: { color: '#fff', fontSize: 14,fontWeight: 'bold' },
+            axisLine: { show: false },
+            axisTick: { show: false },
+            inverse: true
+          }
        ],
        series: [
-          //饼图:
+          // 四类型告警横向柱状图
          {
-            type: 'pie',
-            radius: '35%',
-            color: ['#f5222d', '#fa8c16', '#fadb14', '#1677ff', '#13c2c2'],
+            type: 'bar',
+            xAxisIndex: 0,
+            yAxisIndex: 0,
+            barWidth: 18,
+            itemStyle: {
+              borderRadius: [0, 8, 8, 0],
+              color: function (params: any) {
+                // 渐变色
+                const colorArr = [
+                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                    { offset: 0, color: '#f5222d' },
+                    { offset: 1, color: '#fa8c16' }
+                  ]),
+                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                    { offset: 0, color: '#fa8c16' },
+                    { offset: 1, color: '#fadb14' }
+                  ]),
+                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                    { offset: 0, color: '#fadb14' },
+                    { offset: 1, color: '#1677ff' }
+                  ]),
+                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                    { offset: 0, color: '#1677ff' },
+                    { offset: 1, color: '#00fcff' }
+                  ])
+                ];
+                return colorArr[params.dataIndex] || colorArr[3];
+              }
+            },
            label: {
              show: true,
-              position: 'inner',
+              position: 'right',
+              color: '#fff', //淡蓝色
+              fontWeight: 'bold',
+              fontSize: 16,
              formatter: (params: any) => {
                if (!params.value) return '';
                return `${params.value}`;
              },
            },
-            labelLine: {
-              show: false,
-            },
-            center: ['35%', '25%'],
-            data: alarmTypeType.value,
-            zlevel: 2, // 设置zlevel为1，使得柱状图在下层显示
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.5)',
-            },
+            data: alarmTypeType.value.map((item: any) => item.value),
+            zlevel: 2
          },
-          //柱状
+          // Top3横向柱状图
          {
+            name: 'Top3',
            type: 'bar',
-            barWidth: 12, // 柱子宽度
-            barCategoryGap: '30%', // 控制同一系列的柱间距离
-            label: {
-              show: true,
-              position: 'right', // 位置
-              color: '#A7D6F4', //淡蓝色
-              fontSize: 14,
-              distance: 14, // label与柱子距离
-              formatter: '{c}',
-            },
+            xAxisIndex: 1,
+            yAxisIndex: 1,
+            barWidth: 18,
            itemStyle: {
              borderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
@@ -210,42 +254,19 @@ function initPicture() {
                { offset: 1, color: '#2f54eb' },
              ]), // 渐变
            },
-            data: alarmTypeTypeTop.value.map((item: any) => item.total),
-          },
-        ],
-        // 柱状图设置
-        xAxis: [
-          {
-            splitLine: {
-              show: false,
+            label: {
+              show: true,
+              position: 'right',
+              color: '#fff', //淡蓝色
+              fontWeight: 'bold',
+              fontSize: 16,
+              formatter: '{c}'
            },
-            type: 'value',
-            show: false,
-          },
-        ],
-        yAxis: [
-          {
-            splitLine: {
-              show: false,
-            },
-            axisLine: {
-              //y轴
-              show: false,
-            },
-            type: 'category',
-            axisTick: {
-              show: false,
-            },
-            inverse: true,
-            data: alarmTypeTypeTop.value.map((item: any) => item.neType),
-            axisLabel: {
-              color: '#A7D6F4',
-              fontSize: 14,
-            },
-          },
-        ],
+            data: alarmTypeTypeTop.value.map((item: any) => item.value),
+            zlevel: 1
+          }
+        ]
      };
-
      fnDesign(alarmTypeBar.value, optionData);
    });
 }
--- a/src/views/dashboard/overview2/components/NeResources/index.vue
+++ b/src/views/dashboard/overview2/components/NeResources/index.vue
@@ -7,7 +7,7 @@ import { graphNodeClickID, graphNodeState } from '../../hooks/useTopology';
 import useI18n from '@/hooks/useI18n';
 import { markRaw } from 'vue';
 // 引入液体填充图表
-// import 'echarts-liquidfill';
+import 'echarts-liquidfill';

 const { t } = useI18n();

--- a/src/views/dashboard/overview2/components/Topology/index.vue
+++ b/src/views/dashboard/overview2/components/Topology/index.vue
@@ -50,10 +50,10 @@ const graphNodeTooltip = new Tooltip({
        >
        <div><strong>${t('views.monitor.topology.state')}：</strong><span>
        ${
-          neState.online
-            ? t('views.monitor.topology.normalcy')
-            : t('views.monitor.topology.exceptions')
-        }
+        neState.online
+          ? t('views.monitor.topology.normalcy')
+          : t('views.monitor.topology.exceptions')
+      }
        </span></div>
        <div><strong>${t('views.monitor.topology.refreshTime')}：</strong><span>
        ${neState.refreshTime ?? '--'}
@@ -88,10 +88,10 @@ const graphNodeTooltip = new Tooltip({
      >
      <div><strong>${t('views.monitor.topology.state')}：</strong><span>
      ${
-        neState.online
-          ? t('views.monitor.topology.normalcy')
-          : t('views.monitor.topology.exceptions')
-      }
+      neState.online
+        ? t('views.monitor.topology.normalcy')
+        : t('views.monitor.topology.exceptions')
+    }
      </span></div>
      <div><strong>${t('views.monitor.topology.refreshTime')}：</strong><span>
      ${neState.refreshTime ?? '--'}
@@ -102,7 +102,7 @@ const graphNodeTooltip = new Tooltip({
    sameTypeNes.forEach((ne: any, index: number) => {
      // 获取该网元的状态信息
      const neStateInfo = neStateMap?.[ne.neId] ||
-                         (ne.neId === neState.neId ? neState : {});
+        (ne.neId === neState.neId ? neState : {});

      content += `
      <div style="margin-top: 8px;"><strong>${t('views.monitor.topology.name')}：${ne.neName || id + '_' + ne.neId}</strong></div>
@@ -121,8 +121,8 @@ const graphNodeTooltip = new Tooltip({
      ${
        neStateInfo.online !== undefined
          ? (neStateInfo.online
-              ? t('views.monitor.topology.normalcy')
-              : t('views.monitor.topology.exceptions'))
+            ? t('views.monitor.topology.normalcy')
+            : t('views.monitor.topology.exceptions'))
          : 'undefined'
      }
      </span></div>
@@ -203,14 +203,14 @@ function handleRanderGraph(
 * 获取图组数据渲染到画布
 * @param reload 是否重载数据
 */
- function fnGraphDataLoad(reload: boolean = false) {
+function fnGraphDataLoad(reload: boolean = false) {
  Promise.all([
    getGraphData(graphState.group),
    listAllNeInfo({
      bandStatus: false,
    }),
  ])
-  .then(resArr => {
+    .then(resArr => {
      const graphRes = resArr[0];
      const neRes = resArr[1];
      if (
@@ -265,7 +265,7 @@ function handleRanderGraph(
          if (notNeNodes.includes(nodeID)) {
            return true;
          }
-        //(neTypeMap.get(nodeID),nodeID,node.neState)
+          //(neTypeMap.get(nodeID),nodeID,node.neState)
          // 处理网元节点
          if (neTypeMap.has(nodeID)) {
            // all NeInfo
--- a/src/views/dashboard/overview2/index.vue
+++ b/src/views/dashboard/overview2/index.vue
@@ -10,25 +10,33 @@ import UserActivity from './components/UserActivity/index.vue';
 import IMSActivity from './components/IMSActivity/index.vue';
 import AlarnTypeBar from './components/AlarnTypeBar/index.vue';
 import UPFFlow from './components/UPFFlow/index.vue';
-import { listIMSSessionNum } from '@/api/neData/ims';
 import { listUDMSub } from '@/api/neData/udm_sub';
-import { listAMFNblist } from '@/api/neData/amf';
-import { listMMENblist } from '@/api/neData/mme';
-import { listSMFSubNum } from '@/api/neData/smf';
-import { graphNodeClickID, graphState, notNeNodes } from './hooks/useTopology';
+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 './hooks/useTopology';
 import { upfTotalFlow, upfTFActive } from './hooks/useUPFTotalFlow';
 import { useFullscreen } from '@vueuse/core';
 import useWS from './hooks/useWS';
 import useAppStore from '@/store/modules/app';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { useRouter } from 'vue-router';
-import useNeListStore from '@/store/modules/ne_list';
+import useNeInfoStore from '@/store/modules/neinfo';
 import { message } from 'ant-design-vue';
 import { upfWhoId } from './hooks/useWS';
-import { listAMFNbStatelist } from '@/api/neData/amf';
+import {
+  listAMFNbStatelist,
+} from '@/api/neData/amf';
 import { listMMENbStatelist } from '@/api/neData/mme';

-const neInfoStore = useNeListStore();
+
+const neInfoStore = useNeInfoStore();
 const router = useRouter();
 const appStore = useAppStore();
 const { t } = useI18n();
@@ -66,6 +74,7 @@ let skimState: SkimStateType = reactive({
  enbUeNum: 0,
  gNbSumNum: 0,
  eNbSumNum: 0,
+
 });

 /**网元参数 */
@@ -88,10 +97,13 @@ function fnGetNeState() {
  for (const node of graphState.data.nodes) {
    if (notNeNodes.includes(node.id)) continue;

+
    const neInfoList = node.neInfoList || [];
    if (neInfoList.length === 0) continue;

+
    for (const neInfo of neInfoList) {
+
      if (!neInfo.neType || !neInfo.neId) continue;

      wsSend({
@@ -108,6 +120,7 @@ function fnGetNeState() {

 /**获取概览信息 */
 async function fnGetSkim() {
+
  let tempGnbSumNum = 0;
  let tempEnbSumNum = 0;

@@ -122,10 +135,18 @@ async function fnGetSkim() {
    //       (skimState.udmSubNum += res.total),
    //   },
    // ],
+    [
+      'UDM',
+      {
+        request: (neId: string) => listUDMSub({ neId: neId, pageNum: 1, pageSize: 1 }),
+        process: (res: any) =>
+          res.code === RESULT_CODE_SUCCESS && (skimState.udmSubNum = res.total),
+      },
+    ],
    [
      'SMF',
      {
-        request: (neId: string) => listSMFSubNum(neId),
+        request: (neId: string) => listUENumBySMF(neId),
        process: (res: any) =>
          res.code === RESULT_CODE_SUCCESS && (skimState.smfUeNum += res.data),
      },
@@ -133,7 +154,7 @@ async function fnGetSkim() {
    [
      'IMS',
      {
-        request: (neId: string) => listIMSSessionNum(neId),
+        request: (neId: string) => listUENumByIMS(neId),
        process: (res: any) =>
          res.code === RESULT_CODE_SUCCESS && (skimState.imsUeNum += res.data),
      },
@@ -141,7 +162,7 @@ async function fnGetSkim() {
    [
      'AMF',
      {
-        request: (neId: string) => listAMFNblist({ neId }),
+        request: (neId: string) => listBase5G({ neType: 'AMF', neId }),
        process: async (res: any, neId: any) => {
          if (res.code === RESULT_CODE_SUCCESS) {
            skimState.gnbNum += res.total;
@@ -150,12 +171,10 @@ async function fnGetSkim() {
              0
            );
            const amfNbRes = await listAMFNbStatelist({ neId });
-            if (
-              amfNbRes.code === RESULT_CODE_SUCCESS &&
-              Array.isArray(amfNbRes.data)
-            ) {
+            if (amfNbRes.code === RESULT_CODE_SUCCESS && Array.isArray(amfNbRes.data)) {
              // skimState.gNbSumNum += amfNbRes.data.length;
              tempGnbSumNum += amfNbRes.data.length;
+
            }
          }
        },
@@ -164,7 +183,7 @@ async function fnGetSkim() {
    [
      'MME',
      {
-        request: (neId: string) => listMMENblist({ neId }),
+        request: (neId: string) => listBase5G({ neType: 'MME', neId }),
        process: async (res: any, neId: any) => {
          if (res.code === RESULT_CODE_SUCCESS) {
            skimState.enbNum += res.total;
@@ -174,13 +193,11 @@ async function fnGetSkim() {
            );

            const mmeNbRes = await listMMENbStatelist({ neId });
-            if (
-              mmeNbRes.code === RESULT_CODE_SUCCESS &&
-              Array.isArray(mmeNbRes.data)
-            ) {
+            if (mmeNbRes.code === RESULT_CODE_SUCCESS && Array.isArray(mmeNbRes.data)) {
              //  skimState.eNbSumNum += mmeNbRes.data.length;
              tempEnbSumNum += mmeNbRes.data.length;
            }
+
          }
        },
      },
@@ -194,10 +211,10 @@ async function fnGetSkim() {
          const handler = neHandlers.get(child.neType);
          return handler
            ? {
-                promise: handler.request(child.neId),
-                process: handler.process,
-                neId: child.neId, // 这里加上neId
-              }
+              promise: handler.request(child.neId),
+              process: handler.process,
+              neId: child.neId, // 这里加上neId
+            }
            : null;
        })
        .filter(Boolean) || []
@@ -207,7 +224,7 @@ async function fnGetSkim() {

  // 重置
  Object.assign(skimState, {
-    // udmSubNum: 0,
+    udmSubNum: 0,
    smfUeNum: 0,
    imsUeNum: 0,
    gnbNum: 0,
@@ -231,13 +248,31 @@ async function fnGetSkim() {
  skimState.eNbSumNum = tempEnbSumNum;

  // UDM
-  listUDMSub({ neId: udmNeId.value, pageNum: 1, pageSize: 1 }).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS) {
-      skimState.udmSubNum = res.total;
-    }
-  });
+  // UDM - 使用await确保同步处理
+  // try {
+  //   const udmRes = await listUDMSub({ neId: udmNeId.value, pageNum: 1, pageSize: 1 });
+  //   if (udmRes.code === RESULT_CODE_SUCCESS) {
+  //     skimState.udmSubNum = udmRes.total;
+  //   } else {
+  //     skimState.udmSubNum = 0;
+  //   }
+  // } catch (error) {
+  //   skimState.udmSubNum = 0;
+  // }
+  // UDM
+  // listUDMSub({ neId: udmNeId.value, pageNum: 1, pageSize: 1 }).then(res => {
+  //   if (res.code === RESULT_CODE_SUCCESS) {
+  //     skimState.udmSubNum = res.total;
+  //   } else {
+  //     skimState.udmSubNum = 0;
+  //   }
+  //  }).catch(() => {
+  //   skimState.udmSubNum = 0;
+  // });
 }

+
+
 /**初始数据函数 */
 function loadData() {
  fnGetNeState(); // 获取网元状态
@@ -306,13 +341,22 @@ let udmOtions = ref<Record<string, any>[]>([]);
 let onlineOtions = ref<Record<string, any>[]>([]);

 /**用户数量-选择UDM */
-function fnSelectUDM(e: any) {
+async function fnSelectUDM(e: any) {
  udmNeId.value = e.key;
-  listUDMSub({ neId: udmNeId.value, pageNum: 1, pageSize: 1 }).then(res => {
+  try {
+    const res = await listUDMSub({ neId: udmNeId.value, pageNum: 1, pageSize: 1 });
+  // listUDMSub({ neId: udmNeId.value, pageNum: 1, pageSize: 1 }).then(res => {
    if (res.code === RESULT_CODE_SUCCESS) {
      skimState.udmSubNum = res.total;
+    }else{
+      skimState.udmSubNum = 0;
    }
-  });
+  // }).catch(() => {
+  //   skimState.udmSubNum = 0;
+  // });
+  } catch (error) {
+    skimState.udmSubNum = 0;
+  }
 }
 /**资源控制-选择NE */
 function fnSelectNeRe(e: any) {
@@ -351,26 +395,8 @@ onMounted(() => {
          // UDM
          let arr1: Record<string, any>[] = [];
          res.data.forEach((v: any) => {
-            if (
-              v.status &&
-              [
-                'UDM',
-                'UPF',
-                'AUSF',
-                'PCF',
-                'SMF',
-                'AMF',
-                'OMC',
-                'SMSC',
-                'IMS',
-                'MME',
-              ].includes(v.neType)
-            ) {
-              onlineArr.push({
-                value: v.neType + '_' + v.neId,
-                label: v.neName,
-                rmUid: v.rmUid,
-              });
+            if (v.status && ['UDM', 'UPF', 'AUSF', 'PCF', 'SMF', 'AMF', 'OMC', 'SMSC', 'IMS', 'MME'].includes(v.neType)) {
+              onlineArr.push({ value: v.neType + '_' + v.neId, label: v.neName, rmUid: v.rmUid });
            }
            if (v.neType === 'UDM') {
              arr1.push({ value: v.neId, label: v.neName, rmUid: v.rmUid });
@@ -378,9 +404,17 @@ onMounted(() => {
          });
          udmOtions.value = arr1;
          onlineOtions.value = onlineArr;
+          // if (arr1.length > 0) {
+          //   fnSelectUDM({ key: arr1[0].value });
+          // }
+          // 确保设置正确的udmNeId
          if (arr1.length > 0) {
-            fnSelectUDM({ key: arr1[0].value });
+            udmNeId.value = arr1[0].value;
          }
+          // 移除单独的fnSelectUDM调用，让fnGetSkim统一处理
+          // if (arr1.length > 0) {
+          //   fnSelectUDM({ key: arr1[0].value });
+          // }

          if (onlineArr.length > 0) {
            fnSelectNeRe({ key: onlineArr[0].value });
@@ -427,11 +461,7 @@ onBeforeUnmount(() => {
 <template>
  <div class="viewport" ref="viewportDom">
    <div class="brand">
-      <div
-        class="brand-title"
-        @click="toggle"
-        :title="t('views.dashboard.overview.fullscreen')"
-      >
+      <div class="brand-title" @click="toggle" :title="t('views.dashboard.overview.fullscreen')">
        {{ t('views.dashboard.overview.title') }}
        <FullscreenExitOutlined v-if="isFullscreen" />
        <FullscreenOutlined v-else />
@@ -440,6 +470,7 @@ onBeforeUnmount(() => {
    </div>

    <div class="column">
+
      <div class="skim panel">
        <div class="inner">
          <h3 class="leftright">
@@ -449,32 +480,20 @@ onBeforeUnmount(() => {
            </span>
          </h3>
          <div class="data">
-            <div
-              class="item toRouter"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
+            <div class="item toRouter" :title="t('views.dashboard.overview.toRouter')">
              <div @click="fnToRouter('Sub_2010')">
-                <UserOutlined
-                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
-                />
+                <UserOutlined style="color: #4096ff; margin-right: 8px; font-size: 1.1rem" />
                {{ skimState.udmSubNum }}
              </div>
              <span>
-                <a-dropdown
-                  :trigger="['click']"
-                  :get-Popup-Container="getPopupContainer"
-                >
+                <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"
-                      >
+                      <a-menu-item v-for="v in udmOtions" :key="v.value" :disabled="udmNeId === v.value">
                        {{ v.label }}
                      </a-menu-item>
                    </a-menu>
@@ -482,13 +501,8 @@ onBeforeUnmount(() => {
                </a-dropdown>
              </span>
            </div>
-            <div
-              class="item toRouter"
-              @click="fnToRouter('Ims_2080')"
-              :title="t('views.dashboard.overview.toRouter')"
-              style="margin: 0 12px"
-              v-perms:has="['dashboard:overview:imsUeNum']"
-            >
+            <div class="item toRouter" @click="fnToRouter('Ims_2080')" :title="t('views.dashboard.overview.toRouter')"
+                 style="margin: 0 12px" v-perms:has="['dashboard:overview:imsUeNum']">
              <div>
                <img :src="svgUserIMS" style="width: 18px; margin-right: 8px" />
                {{ skimState.imsUeNum }}
@@ -497,12 +511,8 @@ onBeforeUnmount(() => {
                {{ t('views.dashboard.overview.skim.imsUeNum') }}
              </span>
            </div>
-            <div
-              class="item toRouter"
-              @click="fnToRouter('Ue_2081')"
-              :title="t('views.dashboard.overview.toRouter')"
-              v-perms:has="['dashboard:overview:smfUeNum']"
-            >
+            <div class="item toRouter" @click="fnToRouter('Ue_2081')" :title="t('views.dashboard.overview.toRouter')"
+                 v-perms:has="['dashboard:overview:smfUeNum']">
              <div>
                <img :src="svgUserSMF" style="width: 18px; margin-right: 8px" />
                {{ skimState.smfUeNum }}
@@ -515,13 +525,11 @@ onBeforeUnmount(() => {
        </div>
      </div>

+
      <!--告警统计-->
      <div class="alarmType panel">
        <div class="inner">
-          <h3
-            class="toRouter leftright"
-            :title="t('views.dashboard.overview.toRouter')"
-          >
+          <h3 class="toRouter leftright" :title="t('views.dashboard.overview.toRouter')">
            <span class="title" @click="fnToRouter('HistoryAlarm_2097')">
              <PieChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
              {{ t('views.dashboard.overview.alarmTypeBar.alarmSum') }}
@@ -550,6 +558,7 @@ onBeforeUnmount(() => {
    </div>

    <div class="column" style="flex: 4; margin: 1.333rem 0.833rem 0">
+
      <!-- 实时流量 -->
      <div class="upfFlow panel">
        <div class="inner">
@@ -557,9 +566,10 @@ onBeforeUnmount(() => {
            <span class="title">
              <div class="toRouter" @click="fnToRouter('GoldTarget_2104')" :title="t('views.dashboard.overview.toRouter')">
                <AreaChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
-                {{ t('views.dashboard.overview.upfFlow.title') }}
-              </div>
-              &nbsp;&nbsp;&nbsp;&nbsp;
+                {{
+                  t('views.dashboard.overview.upfFlow.title')
+                }}
+              </div>&nbsp;&nbsp;&nbsp;&nbsp;
              <a-dropdown
                :trigger="['click']"
                :get-Popup-Container="getPopupContainer"
@@ -576,7 +586,11 @@ onBeforeUnmount(() => {
                  </a-menu>
                </template>
              </a-dropdown>
+
            </span>
+
+
+
          </h3>

          <div class="chart">
@@ -588,11 +602,8 @@ onBeforeUnmount(() => {
      <!-- 网络拓扑 -->
      <div class="topology panel">
        <div class="inner">
-          <h3
-            class="toRouter centerStyle"
-            @click="fnToRouter('TopologyArchitecture_2128')"
-            :title="t('views.dashboard.overview.toRouter')"
-          >
+          <h3 class="toRouter centerStyle" @click="fnToRouter('TopologyArchitecture_2128')"
+              :title="t('views.dashboard.overview.toRouter')">
            <span class="title">
              <ApartmentOutlined style="color: #68d8fe" />&nbsp;&nbsp;
              {{ t('views.dashboard.overview.topology.title') }}
@@ -612,47 +623,30 @@ onBeforeUnmount(() => {
          <h3 class="leftright">
            <span class="title">
              <GlobalOutlined style="color: #68d8fe" />&nbsp;&nbsp;
-              {{ t('views.dashboard.overview.skim.nodeBInfo') }}
+              {{t('views.dashboard.overview.skim.nodeBInfo')}}
            </span>
          </h3>
-          <div class="data" style="margin-top: 20px">
-            <div
-              class="item toRouter"
-              @click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
+          <div class="data" style="margin-top: 20px;">
+            <div class="item toRouter" @click="fnToRouter('BaseStation_2096', { 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"
-                />
+                <img :src="svgBase" style="width: 18px; margin-right: 8px; height: 2rem" />
                {{ skimState.gNbSumNum }}
              </div>
              <span>{{ t('views.dashboard.overview.skim.gnbSumBase') }}</span>
            </div>
-            <div
-              class="item toRouter"
-              @click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
+            <div class="item toRouter" @click="fnToRouter('BaseStation_2096', { 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"
-                />
+                <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('BaseStation_2096', { neType: 'AMF' })"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
+            <div class="item toRouter" @click="fnToRouter('BaseStation_2096', { 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"
-                />
+                <UserOutlined style="color: #4096ff; margin-right: 8px; font-size: 1.1rem" />
                {{ skimState.gnbUeNum }}
              </div>
              <span>{{ t('views.dashboard.overview.skim.gnbUeNum') }}</span>
@@ -663,45 +657,29 @@ onBeforeUnmount(() => {

      <div class="skim panel base" v-perms:has="['dashboard:overview:enbBase']">
        <div class="inner">
-          <h3></h3>
-          <div class="data" style="margin-top: 40px">
-            <div
-              class="item toRouter"
-              @click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
+          <h3>
+          </h3>
+          <div class="data" style="margin-top: 40px;">
+            <div class="item toRouter" @click="fnToRouter('BaseStation_2096', { 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"
-                />
+                <img :src="svgBase" style="width: 18px; margin-right: 8px; height: 2rem" />
                {{ skimState.eNbSumNum }}
              </div>
              <span>{{ t('views.dashboard.overview.skim.enbSumBase') }}</span>
            </div>
-            <div
-              class="item toRouter"
-              @click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
+            <div class="item toRouter" @click="fnToRouter('BaseStation_2096', { 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"
-                />
+                <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('BaseStation_2096', { neType: 'MME' })"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
+            <div class="item toRouter" @click="fnToRouter('BaseStation_2096', { 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"
-                />
+                <UserOutlined style="color: #4096ff; margin-right: 8px; font-size: 1.1rem" />
                {{ skimState.enbUeNum }}
              </div>
              <span>{{ t('views.dashboard.overview.skim.enbUeNum') }}</span>
@@ -710,21 +688,17 @@ onBeforeUnmount(() => {
        </div>
      </div>

+
+
+
      <!-- 资源情况 -->
      <div class="resources panel">
        <div class="inner">
          <h3 class="resources leftright">
            <span class="title">
-              <DashboardOutlined
-                style="color: #68d8fe; font-size: 20px"
-              />&nbsp;&nbsp;
-              <div style="margin-left: -3px">
-                {{ t('views.dashboard.overview.resources.title') }}：
-              </div>
-              <a-dropdown
-                :trigger="['click']"
-                :get-Popup-Container="getPopupContainer"
-              >
+              <DashboardOutlined style="color: #68d8fe;font-size: 20px;" />&nbsp;&nbsp;
+              <div style="margin-left: -3px"> {{ t('views.dashboard.overview.resources.title') }}：</div>
+              <a-dropdown :trigger="['click']" :get-Popup-Container="getPopupContainer">
                <div class="toDeep-text">
                  {{ graphNodeClickID }}
                  <DownOutlined style="margin-left: -2px; font-size: 12px" />
@@ -750,10 +724,8 @@ onBeforeUnmount(() => {
        <div class="inner">
          <h3 class="leftright">
            <span class="title">
-              <WhatsAppOutlined
-                style="color: #68d8fe; font-size: 20px"
-              />&nbsp;&nbsp;
-              {{ t('views.dashboard.overview.userActivity.imsTitle') }}
+              <WhatsAppOutlined style="color: #68d8fe;font-size: 20px;" />&nbsp;&nbsp; {{
+                t('views.dashboard.overview.userActivity.imsTitle') }}
            </span>
          </h3>
          <div class="chart">
@@ -773,7 +745,7 @@ onBeforeUnmount(() => {
 }

 .toDeep :deep(.ant-select-selector) {
-  background-color: #050f23;
+  background-color: #050F23;
  border: none;
 }