fix: 拓扑架构图调整
This commit is contained in:
@@ -39,7 +39,20 @@ const graphG6Dom = ref<HTMLElement | undefined>(undefined);
|
|||||||
// });
|
// });
|
||||||
|
|
||||||
/**非网元元素 */
|
/**非网元元素 */
|
||||||
const notNeNodes = ['5GC', 'DN', 'UE', 'Base', "lan"];
|
const notNeNodes = [
|
||||||
|
'5GC',
|
||||||
|
'DN',
|
||||||
|
'UE',
|
||||||
|
'Base',
|
||||||
|
'lan',
|
||||||
|
'lan1',
|
||||||
|
'lan2',
|
||||||
|
'lan3',
|
||||||
|
'lan4',
|
||||||
|
'lan5',
|
||||||
|
'lan6',
|
||||||
|
'lan7',
|
||||||
|
];
|
||||||
|
|
||||||
/**图实例对象 */
|
/**图实例对象 */
|
||||||
const graphG6 = ref<any>(null);
|
const graphG6 = ref<any>(null);
|
||||||
@@ -108,19 +121,6 @@ function fnGraphEvent(graph: Graph) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**注册自定义边或节点 */
|
|
||||||
function registerEdgeNode() {
|
|
||||||
// 边
|
|
||||||
edgeCubicAnimateLineDash();
|
|
||||||
edgeCubicAnimateCircleMove();
|
|
||||||
edgeLineAnimateState();
|
|
||||||
// 节点
|
|
||||||
nodeCircleAnimateShapeR();
|
|
||||||
nodeCircleAnimateShapeStroke();
|
|
||||||
nodeRectAnimateState();
|
|
||||||
nodeImageAnimateState();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**图数据渲染 */
|
/**图数据渲染 */
|
||||||
function handleRanderGraph(
|
function handleRanderGraph(
|
||||||
container: HTMLElement | undefined,
|
container: HTMLElement | undefined,
|
||||||
@@ -129,9 +129,6 @@ function handleRanderGraph(
|
|||||||
if (!container) return;
|
if (!container) return;
|
||||||
const { clientHeight, clientWidth } = container;
|
const { clientHeight, clientWidth } = container;
|
||||||
|
|
||||||
// 注册自定义边或节点
|
|
||||||
registerEdgeNode();
|
|
||||||
|
|
||||||
const graph = new Graph({
|
const graph = new Graph({
|
||||||
container: container,
|
container: container,
|
||||||
width: clientWidth,
|
width: clientWidth,
|
||||||
@@ -141,12 +138,7 @@ function handleRanderGraph(
|
|||||||
fitViewPadding: [40],
|
fitViewPadding: [40],
|
||||||
autoPaint: true,
|
autoPaint: true,
|
||||||
modes: {
|
modes: {
|
||||||
default: [
|
default: ['drag-canvas', 'zoom-canvas'],
|
||||||
'drag-combo',
|
|
||||||
'drag-canvas',
|
|
||||||
'zoom-canvas',
|
|
||||||
'collapse-expand-combo',
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
groupByTypes: false,
|
groupByTypes: false,
|
||||||
nodeStateStyles: {
|
nodeStateStyles: {
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ const graphG6Dom = ref<HTMLElement | undefined>(undefined);
|
|||||||
/**图状态 */
|
/**图状态 */
|
||||||
const graphState = reactive<Record<string, any>>({
|
const graphState = reactive<Record<string, any>>({
|
||||||
/**当前图组名 */
|
/**当前图组名 */
|
||||||
group: '5GC System Architecture3',
|
group: '5GC System Architecture5',
|
||||||
/**图数据 */
|
/**图数据 */
|
||||||
data: {
|
data: {
|
||||||
combos: [],
|
combos: [],
|
||||||
@@ -39,7 +39,7 @@ const graphState = reactive<Record<string, any>>({
|
|||||||
});
|
});
|
||||||
|
|
||||||
/**非网元元素 */
|
/**非网元元素 */
|
||||||
const notNeNodes = ['5GC', 'DN', 'UE', 'Base', "lan"];
|
const notNeNodes = ['5GC', 'DN', 'UE', 'Base', "lan", "lan1", "lan2", "lan3", "lan4", "lan5", "lan6", "lan7"];
|
||||||
|
|
||||||
/**图实例对象 */
|
/**图实例对象 */
|
||||||
const graphG6 = ref<any>(null);
|
const graphG6 = ref<any>(null);
|
||||||
|
|||||||
Reference in New Issue
Block a user