fix: 看板拓扑网元状态数量统计

src/views/dashboard/overview/css/index.css

@@ -87,6 +87,21 @@
   min-height: 27.8rem;
   height: 56%;
 }
+.topology .inner h3 {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: baseline;
+}
+.topology .inner h3 .normal {
+  color: #52c41a;
+  font-size: 1.1rem;
+  margin-right: 8px;
+}
+.topology .inner h3 .abnormal {
+  color: #f5222d;
+  font-size: 1.1rem;
+}
 .topology .inner .chart {
   width: 100%;
   height: 100%;
@@ -131,12 +146,12 @@
   margin-top: 1rem;
 }
 
-/* cdr会话监控 */
+/* 用户行为 */
-.cdrEvent {
+.userActivity {
   min-height: 22rem;
-  height: 56%;
+  height: 82%;
 }
-.cdrEvent .inner .chart {
+.userActivity .inner .chart {
   width: 100%;
   height: 100%;
   margin-top: 1rem;
@@ -198,17 +213,6 @@
   margin-top: 1rem;
 }
 
-/* ue会话监控 */
-.ueEvent {
-  min-height: 22rem;
-  height: 58%;
-}
-.ueEvent .inner .chart {
-  width: 100%;
-  height: 100%;
-  margin-top: 1rem;
-}
-
 /* 监控 */
 .monitor {
   height: 20rem;

src/views/dashboard/overview/hooks/useTopology.ts

@@ -45,6 +45,23 @@ export const graphNodeState = computed(() =>
   }))
 );
 
+/**图节点网元状态数量 */
+export const graphNodeStateNum = computed(() => {
+  let normal = 0;
+  let abnormal = 0;
+  for (const item of graphState.data.nodes) {
+    const neId = item.neState.neId;
+    if (neId) {
+      if (item.neState.online) {
+        normal += 1;
+      } else {
+        abnormal += 1;
+      }
+    }
+  }
+  return [normal, abnormal];
+});
+
 /**neStateParse 网元状态 数据解析 */
 export function neStateParse(neType: string, data: Record<string, any>) {
   const { combos, edges, nodes } = graphState.data;

src/views/dashboard/overview/index.vue

@@ -12,7 +12,12 @@ import { listSub } from '@/api/neUser/sub';
 import { listUENum } from '@/api/neUser/ue';
 import { listBase5G } from '@/api/neUser/base5G';
 
-import { graphNodeClickID, graphState, notNeNodes } from './hooks/useTopology';
+import {
+  graphNodeClickID,
+  graphState,
+  notNeNodes,
+  graphNodeStateNum,
+} from './hooks/useTopology';
 import { upfTotalFlow, upfTFActive } from './hooks/useUPFTotalFlow';
 import { useFullscreen } from '@vueuse/core';
 import useWS from './hooks/useWS';
@@ -227,8 +232,16 @@ onBeforeUnmount(() => {
       <div class="topology panel">
         <div class="inner">
           <h3>
-            <ApartmentOutlined style="color: #68d8fe" />&nbsp;&nbsp;
+            <span>
-            {{ t('views.dashboard.overview.topology.title') }}
+              <ApartmentOutlined style="color: #68d8fe" />&nbsp;&nbsp;
+              {{ t('views.dashboard.overview.topology.title') }}
+            </span>
+            <span>
+              normal:
+              <span class="normal"> {{ graphNodeStateNum[0] }} </span>
+              abnormal:
+              <span class="abnormal"> {{ graphNodeStateNum[1] }} </span>
+            </span>
           </h3>
           <div class="chart">
             <Topology />