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