fe.ems.vue3/src/views/dashboard/overview/hooks/useTopology.ts

import { parseDateToStr } from '@/utils/date-utils';
import { computed, reactive, ref } from 'vue';

/**非网元元素 */
export const notNeNodes = [
  '5GC',
  'DN',
  'UE',
  'Base',
  'lan',
  'lan1',
  'lan2',
  'lan3',
  'lan4',
  'lan5',
  'lan6',
  'lan7',
  'LAN',
  'NR',
];

/**图状态 */
export const graphState = reactive<Record<string, any>>({
  /**当前图组名 */
  group: '5GC System Architecture',
  /**图数据 */
  data: {
    combos: [],
    edges: [],
    nodes: [],
  },
});

/**图实例对象 */
export const graphG6 = ref<any>(null);

/**图点击选择 */
export const graphNodeClickID = ref<string>('UPF');

/**图节点网元信息状态 */
export const graphNodeState = computed(() =>
  graphState.data.nodes.map((item: any) => ({
    id: item.id,
    label: item.label,
    neInfo: item.neInfo,
    neState: item.neState,
  }))
);

/**图节点网元状态数量 */
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];
});

/**网元状态请求标记 */
export const neStateRequestMap = ref<Map<string, boolean>>(new Map());

/**neStateParse 网元状态 数据解析 */
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);

  // 更新网元状态
  const newNeState = Object.assign(node.neState, data, {
    refreshTime: parseDateToStr(data.refreshTime, 'HH:mm:ss'),
    online: !!data.cpu,
  });

  // 通过 ID 查询节点实例
  const item = graphG6.value.findById(node.id);
  if (item) {
    const stateColor = newNeState.online ? '#52c41a' : '#f5222d'; // 状态颜色
    // 图片类型不能填充
    if (node.type.startsWith('image')) {
      // 更新节点
      if (node.label !== newNeState.neName) {
        graphG6.value.updateItem(item, {
          label: newNeState.neName,
        });
      }
      // 设置状态
      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);
    }
  }

  // 设置边状态
  for (const edge of edges) {
    const edgeSource: string = edge.source;
    const edgeTarget: string = edge.target;
    const neS = nodes.find((n: any) => n.id === edgeSource);
    const neT = nodes.find((n: any) => n.id === edgeTarget);
    // console.log(neS, edgeSource, neT, edgeTarget);

    if (neS && neT) {
      // 通过 ID 查询节点实例
      // const item = graphG6.value.findById(edge.id);
      // console.log(
      //   `${edgeSource} - ${edgeTarget}`,
      //   neS.neState.online && neT.neState.online
      // );
      // const stateColor = neS.neState.online && neT.neState.online ? '#000000' : '#ff4d4f'; // 状态颜色
      // 更新边
      // graphG6.value.updateItem(item, {
      //   label: `${edgeSource} - ${edgeTarget}`,
      //   style: {
      //     stroke: stateColor, // 填充色
      //   },
      //   labelCfg: {
      //     style: {
      //       fill: '#ffffff', // 标签文本色
      //     },
      //   },
      // });
      // 设置状态
      graphG6.value.setItemState(
        edge.id,
        'circle-move',
        neS.neState.online && neT.neState.online
      );
    }
    if (neS && notNeNodes.includes(edgeTarget)) {
      graphG6.value.setItemState(edge.id, 'line-dash', neS.neState.online);
    }
    if (neT && notNeNodes.includes(edgeSource)) {
      graphG6.value.setItemState(edge.id, 'line-dash', neT.neState.online);
    }
  }

  // 请求标记复位
  neStateRequestMap.value.set(neType, false);
}

/**属性复位 */
export function topologyReset() {
  graphState.data = {
    combos: [],
    edges: [],
    nodes: [],
  };
  graphG6.value = null;
  graphNodeClickID.value = 'UPF';
  neStateRequestMap.value = new Map();
}