一、案例效果
二、案例代码及组件抽离
- 父组件 BloodTopology.vue
<template><div><TopologyCompact><template #main-board-box><TopologyDependent domId="featureBloodContainer" :nodeData="originalNodeData" /></template><template #right-drawer-box><RightDrawer :width="350"><template #rightContent> rightContent </template></RightDrawer></template></TopologyCompact></div>
</template><script lang="ts" setup>
import RightDrawer from '@/common/components/topologyToolKit/RightDrawer.vue';
import TopologyCompact from '@/common/components/topologyToolKit/TopologyCompact.vue';
import TopologyDependent from '@/common/components/topologyToolKit/TopologyDependent.vue';
import { onMounted, ref } from 'vue';const originalNodeData = ref<any>({nodes: [],edges: [],
});const edges = [['1', '2'],['2', '3'],['2', '4'],['4', '5'],['4', '6'],['4', '7'],['4', '8'],['5', '9'],['6', '10'],['7', '11'],['8', '12'],
];
const initNodeData = () => {for (let i = 1; i <= 12; i++) {originalNodeData.value.nodes!.push({id: `${i}`,shape: 'vue-shape',width: 32,height: 32,label: i,attrs: {body: {fill: '#5F95FF',stroke: 'transparent',},label: {fill: '#ffffff',},},});}edges.forEach((edge: [string, string]) => {originalNodeData.value.edges!.push({source: edge[0],target: edge[1],attrs: {line: {stroke: '#A2B1C3',strokeWidth: 2,},},});});
};
onMounted(() => {initNodeData();
});
</script>- 子组件 TopologyDependent.vue
<template><div :id="domId" class="w-full h-[95%]"></div>
</template>
<script setup lang="ts">
import { registerOption } from '@/views/featureManage/featureList/topologyToolKit/attrConfig';
import { DagreLayout, DagreLayoutOptions } from '@antv/layout';
import { Graph } from '@antv/x6';
import { register } from '@antv/x6-vue-shape';
import { nextTick, onMounted, ref } from 'vue';
import { initDependOption } from './initDependConfig';const props = defineProps({domId: {type: String,default: '',},nodeData: {type: Object,},targetIdData: {type: Array as () => number[],required: false,},
});const container = ref<any>();register({ ...registerOption });
const initGraph = (data: any) => {console.log('-8888---data', data);container.value = document.getElementById(props.domId);const width = container.value?.scrollWidth;const height = container.value?.scrollHeight || 800;const graph = new Graph({container: container.value,width, // 设置图形的宽度height, // 设置图形的高度...initDependOption.option,});const dagreLayout = new DagreLayout({ ...(initDependOption.layout as DagreLayoutOptions) });const model = dagreLayout.layout(data);console.log('111==data', data, model);graph.fromJSON(model);graph.on('node:click', ({ e, x, y, node, view }) => {console.log('---115-e, x, y, node, view', e, x, y, node, view);});
};onMounted(() => {nextTick(() => {if (props.domId && document.getElementById(props.domId)) {initGraph(props.nodeData);}});
});
</script>- 自定义节点展示 NodeHtml.vue
<template><div class="status-node"><div class="content" @click="handleClick">这是一段文字</div></div>
</template><script lang="ts" setup>
const handleClick = () => {console.log('---handleClick');
};
</script>
<style lang="less" scoped>
.status-node {background-color: purple;height: 50px;width: 100px;border-radius: 10px;display: flex;justify-content: center;align-items: center;
}.content {color: white;font-size: 14px;
}
</style>- 相关常量信息
initDependConfig.ts
/*** x6初始化配置option*/
export const initDependOption = {option: {panning: true, // 启用画布平移功能autoResize: true, // 启用自动调整画布大小功能interacting: {nodeMovable: false, // 禁止节点移动},mousewheel: {enabled: true, // 启用鼠标滚轮缩放功能factor: 1.1, // 缩放因子，每次滚动时缩放的比例maxScale: 1.5, // 最大缩放比例minScale: 0.5, // 最小缩放比例},background: {color: '#F2F7FA',},},layout: {type: 'dagre',rankdir: 'TB',align: 'UR',ranksep: 50,nodesep: 48,},
};attrConfig.ts
import NodeElement from '@/views/featureManage/featureList/topologyToolKit/NodeHtml.vue';
/*** 自定义注册节点配置*/
export const registerOption = {shape: 'vue-shape',width: 100,height: 100,component: NodeElement,
};三、控制台打印效果
