135 lines
3.6 KiB
TypeScript
135 lines
3.6 KiB
TypeScript
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',
|
|
];
|
|
|
|
/**图状态 */
|
|
export const graphState = reactive<Record<string, any>>({
|
|
/**当前图组名 */
|
|
group: '5GC System Architecture5',
|
|
/**图数据 */
|
|
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,
|
|
}))
|
|
);
|
|
|
|
/**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);
|
|
// 通过 ID 查询节点实例
|
|
const item = graphG6.value.findById(edge.id);
|
|
if (neS && neT && item) {
|
|
// 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(
|
|
item,
|
|
'line-dash',
|
|
neS.neState.online && neT.neState.online
|
|
);
|
|
}
|
|
if (neS && notNeNodes.includes(edgeTarget)) {
|
|
graphG6.value.setItemState(item, 'line-dash', neT.neState.online);
|
|
}
|
|
if (neT && notNeNodes.includes(edgeSource)) {
|
|
graphG6.value.setItemState(item, 'line-dash', neT.neState.online);
|
|
}
|
|
}
|
|
}
|