feat(dashboard): add overview2 component with images and functionality

- Introduced new images for the dashboard overview (rect.png, title.png).
- Created index.vue for the overview2 component, implementing various features including:
  - User activity tracking and statistics.
  - Network element state retrieval and display.
  - Integration of multiple sub-components (Topology, NeResources, UserActivity, IMSActivity, AlarnTypeBar, UPFFlow).
  - Added dropdowns for selecting UDM and NE resources.
  - Implemented periodic data fetching for network statistics.
  - Enhanced user interface with responsive design and improved styling.

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

@@ -35,20 +35,16 @@ export const graphState = reactive<Record<string, any>>({
 export const graphG6 = ref<any>(null);
 
 /**图点击选择 */
-export const graphNodeClickID = ref<string>('UPF_001');
+export const graphNodeClickID = ref<string>('UPF');
 
 /**图节点网元信息状态 */
-export const graphNodeState = computed(() =>{
- return  graphState.data.nodes.map((item: any) => ({
+export const graphNodeState = computed(() =>
+  graphState.data.nodes.map((item: any) => ({
     id: item.id,
     label: item.label,
     neInfo: item.neInfo,
     neState: item.neState,
-    neInfoList:item.neInfoList,
-    neStateMap: item.neStateMap,
   }))
-}
-
 );
 
 /**图节点网元状态数量 */
@@ -72,69 +68,48 @@ export const graphNodeStateNum = computed(() => {
 export const neStateRequestMap = ref<Map<string, boolean>>(new Map());
 
 /**neStateParse 网元状态 数据解析 */
-export function neStateParse(neType: string, data: Record<string, any>,neId: string) {
- // console.log('neStateParse',neType, data, neId);
-
+export function neStateParse(neType: string, data: Record<string, any>) {
   const { combos, edges, nodes } = graphState.data;
-
   const node = nodes.find((item: Record<string, any>) => item.id === neType);
-  //console.log('neStateParse',node);
-
-  if (!node) return;
-
-    // 初始化状态映射
-    if (!node.neStateMap) node.neStateMap = {};
 
   // 更新网元状态
-  const newNeState :any = {
-    ...data,  // 先展开data对象
+  const newNeState = Object.assign(node.neState, data, {
     refreshTime: parseDateToStr(data.refreshTime, 'HH:mm:ss'),
     online: !!data.cpu,
-    neId: neId
-  };
-    // 如果是001，更新节点状态。neInfo为主要的网元信息
-    if (node.neInfo && node.neInfo.neId === neId) {
-      Object.assign(node.neState, newNeState);
-    }
+  });
 
-    //console.log(node.neState)
-    // 无论是否为主要网元，都更新状态映射
-    node.neStateMap[neId] = {...newNeState};
-      // 通过 ID 查询节点实例
+  // 通过 ID 查询节点实例
   const item = graphG6.value.findById(node.id);
   if (item) {
-    // 检查当前节点下所有网元的状态
-    const allStates = Object.values(node.neStateMap);
-    // 判断状态颜色
-    let stateColor = '#52c41a'; // 默认绿色（所有网元都正常）
-    if (allStates.some((state: any) => !state.online)) {
-      // 如果有任何一个网元不正常
-      stateColor = allStates.every((state: any) => !state.online) ? '#f5222d' : '#faad14'; // 红色（全部不正常）或黄色（部分不正常）
-    }
-
-      // 图片类型不能填充
-      if (node.type && node.type.startsWith('image')) {
-        // 更新节点
-        if (node.label !== newNeState.neType) {
-          graphG6.value.updateItem(item, {
-            label: newNeState.neType,
-          });
-        }
-        // 设置状态
-        graphG6.value.setItemState(item, 'top-right-dot', stateColor);
-      } else {
-        // 更新节点
+    const stateColor = newNeState.online ? '#52c41a' : '#f5222d'; // 状态颜色
+    // 图片类型不能填充
+    if (node.type.startsWith('image')) {
+      // 更新节点
+      if (node.label !== newNeState.neName) {
         graphG6.value.updateItem(item, {
-          label: newNeState.neType,
-          style: {
-            fill: stateColor, // 填充色
-            stroke: stateColor, // 填充色
-          },
+          label: newNeState.neName,
         });
-        // 设置状态
-        graphG6.value.setItemState(item, 'stroke', newNeState.online);
       }
-
+      // 设置状态
+      graphG6.value.setItemState(item, 'top-right-dot', stateColor);
+    } else {
+      // 更新节点
+      graphG6.value.updateItem(item, {
+        label: newNeState.neName,
+        // neState: newNeState,
+        style: {
+          fill: stateColor, // 填充色
+          stroke: stateColor, // 填充色
+        },
+        // labelCfg: {
+        //   style: {
+        //     fill: '#ffffff', // 标签文本色
+        //   },
+        // },
+      });
+      // 设置状态
+      graphG6.value.setItemState(item, 'stroke', newNeState.online);
+    }
   }
 
   // 设置边状态
@@ -192,6 +167,6 @@ export function topologyReset() {
     nodes: [],
   };
   graphG6.value = null;
-  graphNodeClickID.value = 'UPF_001';
+  graphNodeClickID.value = 'UPF';
   neStateRequestMap.value = new Map();
 }

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

@@ -34,6 +34,7 @@ export default function useWS() {
 
   /**接收数据后回调 */
   function wsMessage(res: Record<string, any>) {
+    //console.log(res);
     const { code, requestId, data } = res;
     if (code === RESULT_CODE_ERROR) {
       console.warn(res.msg);
@@ -42,8 +43,7 @@ export default function useWS() {
     // 网元状态
     if (requestId && requestId.startsWith('neState')) {
       const neType = requestId.split('_')[1];
-      const neId = requestId.split('_')[2];
-      neStateParse(neType, data,neId);
+      neStateParse(neType, data);
       return;
     }