commit
This commit is contained in:
zhutianqi
@@ -0,0 +1,298 @@
|
|||||||
|
<template>
|
||||||
|
<div class="workingGroup1" ref="wrap">
|
||||||
|
<div id="container"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import G6 from '@antv/g6'
|
||||||
|
export default {
|
||||||
|
name: "workingGroup1",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeName: 'workingGroup1',
|
||||||
|
graphData: {},
|
||||||
|
graph: null,
|
||||||
|
currentNode: '',
|
||||||
|
currentNodeData: {},
|
||||||
|
addForm: {
|
||||||
|
pMenuName: '',
|
||||||
|
menuType: '',
|
||||||
|
sarGroupMenuEO: {
|
||||||
|
pid: '',
|
||||||
|
menuType: '',
|
||||||
|
menuLevel: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pMenuName: '',
|
||||||
|
menuType: '',
|
||||||
|
detailData: {
|
||||||
|
menuId: '',
|
||||||
|
nodeType: '',
|
||||||
|
nodeName: '',
|
||||||
|
parentId: '',
|
||||||
|
standFlag: '',
|
||||||
|
data: ''
|
||||||
|
},
|
||||||
|
delData: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData () {
|
||||||
|
this.$http.get('wg_work_group/researchData', {
|
||||||
|
type: '0'
|
||||||
|
}, {
|
||||||
|
_this: this
|
||||||
|
}, res => {
|
||||||
|
if (res.ok) {
|
||||||
|
this.renderGraph(res.data)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleNodeClick (node) {
|
||||||
|
},
|
||||||
|
handleEdgeClick (node) {},
|
||||||
|
renderGraph(row) {
|
||||||
|
this.graphData = row
|
||||||
|
G6.registerNode(
|
||||||
|
'tree-node',
|
||||||
|
{
|
||||||
|
drawShape: function drawShape(cfg, group) {
|
||||||
|
const level = cfg.level
|
||||||
|
const nodeType = cfg.nature
|
||||||
|
if (nodeType === '0') {
|
||||||
|
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 === '1') {
|
||||||
|
rect.attr({
|
||||||
|
fill: '#1C98B8'
|
||||||
|
});
|
||||||
|
} else if (nodeType === '2') {
|
||||||
|
rect.attr({
|
||||||
|
fill: '#5165D4'
|
||||||
|
});
|
||||||
|
} else if (nodeType === '3') {
|
||||||
|
rect.attr({
|
||||||
|
fill: '#E23335'
|
||||||
|
});
|
||||||
|
} else if (nodeType === '4') {
|
||||||
|
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) {
|
||||||
|
console.log(1);
|
||||||
|
const data = item.get('model');
|
||||||
|
const icon = item.get('group').find((element) => element.get('name') === 'collapse-icon');
|
||||||
|
console.log(data);
|
||||||
|
console.log(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.nature
|
||||||
|
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
|
||||||
|
this.graph.data(graphData);
|
||||||
|
this.graph.render();
|
||||||
|
this.graph.fitView();
|
||||||
|
this.handleGraphNodeClickEvent(this.graph)
|
||||||
|
this.handleGraphEdgeClickEvent(this.graph)
|
||||||
|
this.handleGraphDraw(this.graph)
|
||||||
|
},
|
||||||
|
destoryGraph() {
|
||||||
|
this.graph.destroy()
|
||||||
|
},
|
||||||
|
handleGraphDraw () {},
|
||||||
|
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.handleNodeClick(nodeItem)
|
||||||
|
graph.setItemState(nodeItem, 'click', true); // 设置当前节点的 click 状态为 true
|
||||||
|
});
|
||||||
|
},
|
||||||
|
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.handleEdgeClick (edgeItem)
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// this.getData();
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.destoryGraph()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.workingGroup1{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user