code init
This commit is contained in:
chenxiaoxi
@@ -0,0 +1,299 @@
|
||||
<template>
|
||||
<div ref="wrap">
|
||||
<div id="container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import G6 from '@antv/g6';
|
||||
export default {
|
||||
name: 'knowledgeGraph',
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
graphData: {},
|
||||
graph: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// data:{
|
||||
// immediate: true,
|
||||
// handler: (val, newVal) => {
|
||||
// }
|
||||
// }
|
||||
data(val, newVal) {
|
||||
this.graphData = val
|
||||
this.changeGraphData(val)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
renderGraph() {
|
||||
G6.registerNode(
|
||||
'tree-node',
|
||||
{
|
||||
drawShape: function drawShape(cfg, group) {
|
||||
const level = parseInt(cfg.level)
|
||||
const nodeType = cfg.nodeType
|
||||
if (nodeType === 'ROOT') {
|
||||
const circle = group.addShape('circle', {
|
||||
attrs: {
|
||||
fill: '#CD7326'
|
||||
// stroke: '#666',
|
||||
},
|
||||
name: 'circle-shape',
|
||||
});
|
||||
const content = cfg.name ? cfg.name.replace(/(.{19})/g, '$1\n') : ''
|
||||
const text = group.addShape('text', {
|
||||
attrs: {
|
||||
text: content,
|
||||
x: 0,
|
||||
y: 0,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
fill: '#fff',
|
||||
},
|
||||
name: 'text-shape',
|
||||
});
|
||||
const bbox = text.getBBox();
|
||||
const hasChildren = cfg.children && cfg.children.length > 0;
|
||||
let marker
|
||||
if (hasChildren) {
|
||||
marker = group.addShape('marker', {
|
||||
attrs: {
|
||||
x: bbox.maxX + 16,
|
||||
y: 0,
|
||||
r: 6,
|
||||
symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
|
||||
stroke: '#666',
|
||||
lineWidth: 2,
|
||||
},
|
||||
name: 'collapse-icon',
|
||||
});
|
||||
}
|
||||
circle.attr({
|
||||
x: 0,
|
||||
y: 0,
|
||||
r: (bbox.width + 12) / 2,
|
||||
});
|
||||
} else {
|
||||
const rect = group.addShape('rect', {
|
||||
attrs: {
|
||||
fill: '#fff',
|
||||
// stroke: '#666',
|
||||
},
|
||||
name: 'rect-shape',
|
||||
});
|
||||
const content = cfg.name ? cfg.name.replace(/(.{19})/g, '$1\n') : ''
|
||||
const text = group.addShape('text', {
|
||||
attrs: {
|
||||
text: content,
|
||||
x: 0,
|
||||
y: 0,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
fill: '#fff',
|
||||
},
|
||||
name: 'text-shape',
|
||||
});
|
||||
const bbox = text.getBBox();
|
||||
const hasChildren = cfg.children && cfg.children.length > 0;
|
||||
let marker
|
||||
if (hasChildren) {
|
||||
marker = group.addShape('marker', {
|
||||
attrs: {
|
||||
x: bbox.maxX + 16,
|
||||
y: 0,
|
||||
r: 6,
|
||||
symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
|
||||
stroke: '#666',
|
||||
lineWidth: 2,
|
||||
},
|
||||
name: 'collapse-icon',
|
||||
nodeStateStyles: {
|
||||
selected: {
|
||||
fill: 'steelblue'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
rect.attr({
|
||||
x: bbox.minX - 6,
|
||||
y: bbox.minY - 6,
|
||||
width: bbox.width + 12,
|
||||
height: bbox.height + 12,
|
||||
radius: (bbox.height + 12) / 2
|
||||
});
|
||||
// 自定义层级颜色
|
||||
if (nodeType === 'BWH') {
|
||||
rect.attr({
|
||||
fill: '#1C98B8'
|
||||
});
|
||||
} else if (nodeType === 'FBW') {
|
||||
rect.attr({
|
||||
fill: '#5165D4'
|
||||
});
|
||||
} else if (nodeType === 'GROUP') {
|
||||
rect.attr({
|
||||
fill: '#E23335'
|
||||
});
|
||||
} else if (nodeType === 'STAND') {
|
||||
rect.attr({
|
||||
fill: '#ADAAA1'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return group;
|
||||
},
|
||||
},
|
||||
'single-node',
|
||||
);
|
||||
|
||||
this.graph = new G6.TreeGraph({
|
||||
container: 'container',
|
||||
width: this.$refs['wrap'].scrollWidth,
|
||||
height: this.$refs['wrap'].scrollHeight,
|
||||
modes: {
|
||||
default: [
|
||||
{
|
||||
type: 'collapse-expand',
|
||||
onChange: function onChange(item, collapsed) {
|
||||
const data = item.get('model');
|
||||
const icon = item.get('group').find((element) => element.get('name') === 'collapse-icon');
|
||||
if (collapsed) {
|
||||
icon.attr('symbol', G6.Marker.expand);
|
||||
} else {
|
||||
icon.attr('symbol', G6.Marker.collapse);
|
||||
}
|
||||
data.collapsed = collapsed;
|
||||
return true;
|
||||
},
|
||||
shouldBegin: (e) => {
|
||||
const target = e.target
|
||||
const nodeType = target.cfg.name
|
||||
if (nodeType === 'collapse-icon') return true;
|
||||
return false;
|
||||
}
|
||||
},
|
||||
'drag-canvas',
|
||||
'zoom-canvas',
|
||||
],
|
||||
},
|
||||
defaultNode: {
|
||||
type: 'tree-node',
|
||||
anchorPoints: [
|
||||
[0, 0.5],
|
||||
[1, 0.5],
|
||||
],
|
||||
},
|
||||
defaultEdge: {
|
||||
type: 'cubic-horizontal',
|
||||
style: {
|
||||
stroke: '#A3B1BF',
|
||||
},
|
||||
},
|
||||
layout: {
|
||||
type: 'compactBox',
|
||||
direction: 'LR',
|
||||
getId: function getId(d) {
|
||||
return d.id;
|
||||
},
|
||||
getHeight: function getHeight() {
|
||||
return 16;
|
||||
},
|
||||
getWidth: function getWidth() {
|
||||
return 16;
|
||||
},
|
||||
getVGap: function getVGap() {
|
||||
return 20;
|
||||
},
|
||||
getHGap: function getHGap() {
|
||||
return 80;
|
||||
},
|
||||
},
|
||||
});
|
||||
let graphData = this.graphData
|
||||
G6.Util.traverseTree(graphData, function(item) {
|
||||
// console.log(item)
|
||||
const data = item.data || {}
|
||||
item.id = item.nodeId;
|
||||
item.name = item.nodeName
|
||||
item.nodeType = data.menuType
|
||||
});
|
||||
this.graph.data(graphData);
|
||||
this.graph.render();
|
||||
this.graph.fitView();
|
||||
this.handleGraphNodeClickEvent(this.graph)
|
||||
this.handleGraphEdgeClickEvent(this.graph)
|
||||
this.handleGraphDraw(this.graph)
|
||||
},
|
||||
changeGraphData(val) {
|
||||
let graphData = val
|
||||
G6.Util.traverseTree(graphData, function(item) {
|
||||
const data = item.data || {}
|
||||
item.id = item.nodeId;
|
||||
item.name = item.nodeName
|
||||
item.nodeType = data.menuType
|
||||
});
|
||||
this.graph.changeData(graphData)
|
||||
this.graph.fitView();
|
||||
},
|
||||
handleGraphNodeClickEvent(graph) {
|
||||
// 点击节点
|
||||
graph.on('node:click', (e) => {
|
||||
// 先将所有当前是 click 状态的节点置为非 click 状态
|
||||
const clickNodes = graph.findAllByState('node', 'click');
|
||||
clickNodes.forEach((cn) => {
|
||||
graph.setItemState(cn, 'click', false);
|
||||
});
|
||||
const nodeItem = e.item; // 获取被点击的节点元素对象
|
||||
this.$emit('nodeClick', nodeItem)
|
||||
|
||||
graph.setItemState(nodeItem, 'click', true); // 设置当前节点的 click 状态为 true
|
||||
});
|
||||
},
|
||||
handleGraphDraw(graph) {
|
||||
// graph.on('beforelayout', (cfg, group) => {
|
||||
// this.$nextTick(() => {
|
||||
// this.graph.zoom(0.5);
|
||||
// })
|
||||
// })
|
||||
},
|
||||
handleGraphEdgeClickEvent(graph) {
|
||||
// 点击边
|
||||
graph.on('edge:click', (e) => {
|
||||
// 先将所有当前是 click 状态的边置为非 click 状态
|
||||
const clickEdges = graph.findAllByState('edge', 'click');
|
||||
clickEdges.forEach((ce) => {
|
||||
graph.setItemState(ce, 'click', false);
|
||||
});
|
||||
const edgeItem = e.item; // 获取被点击的边元素对象
|
||||
console.log('EdgeClick', edgeItem)
|
||||
graph.setItemState(edgeItem, 'click', true); // 设置当前边的 click 状态为 true
|
||||
this.$emit('edgeClick', edgeItem)
|
||||
});
|
||||
},
|
||||
destoryGraph() {
|
||||
this.graph.destroy()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderGraph()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.destoryGraph()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user