<template>
<div class="asset_column_g6">
<div id="container" class="container"></div>
</div>
</template>
<script>
import G6 from '@antv/g6';
import assetColumnDetail from './assetColumnDetail.js';
import edgeConfig from './edgeConfig'
export default {
data() {
return {
}
},
methods: {
initGraph() {
const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const tooltip = new G6.Tooltip({
offsetX: 0,
offsetY:-240,
getContent(evt) {
const outDiv = document.createElement('div');
let text = evt.target.cfg.name == "expandIcon-shape" ? "展开节点信息" : "收起节点信息";
outDiv.style.width = 'auto';
outDiv.innerHTML = `${text}`
return outDiv
},
shouldBegin(evt) {
return evt.target.cfg.name == "expandIcon-shape" || evt.target.cfg.name == "collapseIcon-shape"
},
itemTypes: ['node']
});
const nodeStateStyles = {};
const edgeStateStyles = { };
const that = this;
G6.registerNode(
'tree-node',
{
draw(cfg, group) {
let rect_common = null;
rect_common = group.addShape('rect', {
attrs: {
stroke: '#333',
x: 0,
y: 0,
width: 150,
height: that.toComputeContainerHeight(cfg),
lineWidth: 1,
cursor: 'pointer',
shadowColor: 'rgb(184, 185, 187)',
shadowBlur: 5,
shadowOffsetX: 2,
shadowOffsetY: 2,
fill: 'rgb(255, 255, 255)',
},
name: 'rect_common-shape',
});
that.renderAssetNameArea(group, cfg);
let columns = cfg.columns || [];
for(let i = 0; i < columns.length; i++) {
that.renderColumnArea(group, cfg, i);
that.renderColumnTxt(group, cfg, i);
};
that.renderAssetNameTitle(group, cfg);
return rect_common
},
}
);
this.graph = new G6.TreeGraph({
container: 'container',
width,
height,
animate: false,
animateCfg: {
duration: 500,
easing: 'linearEasing',
},
modes: {
default: [
'drag-canvas',
'zoom-canvas',
],
},
defaultNode: {
type: 'tree-node',
anchorPoints: [
[0, 0.5],
[1, 0.5],
],
},
defaultEdge: {
type: 'polyline',
style: {
lineWidth: 1,
opacity: 0,
}
},
nodeStateStyles: nodeStateStyles,
edgeStateStyles: edgeStateStyles,
plugins: [tooltip],
layout: {
type: 'compactBox',
direction: 'RL',
getId: function getId(d) {
return d.id;
},
getHeight: function getHeight(cfg) {
let columns = cfg.columns || [];
return 15+15*(columns.length);
},
getWidth: function getWidth() {
return 150;
},
getVGap: function getVGap(cfg, a, b, c) {
return 10;
},
getHGap: function getHGap() {
return 30;
},
},
});
this.graph.node((node) => {
console.log('node', node);
let anchorPoints = [];
let columnNames = node.columns.map(c => c.columnName);
let d = 1 / (node.columns.length+1);
let anchorPointsList = [];
let p = 0;
for (let i = 0; i < node.columns.length+1; i++) {
anchorPointsList.push((p + (d/2)));
p = p + d;
};
let sourcePoints = {};
let targetPoints = {};
anchorPointsList.forEach((point,index) => {
let nameKey = '';
if (index == 0) {
nameKey = node.id;
}else {
nameKey = node.columns[index-1].columnName;
};
let sourceL = [0];
let targetL = [1];
sourceL.push(point);
targetL.push(point);
sourcePoints[nameKey] = sourceL;
targetPoints[nameKey] = targetL;
anchorPoints.push(sourceL,targetL);
});
anchorPoints = [...anchorPoints, [0.5, 0], [0.5, 1]]
return {
anchorPoints,
sourcePoints,
targetPoints,
columnNames
}
});
},
toComputeContainerHeight(cfg) {
let columns = cfg.columns || [];
return 15+15*(columns.length);
},
renderPath(group, cfg, i) {
const child = group.find(function (item) {
let cfg = item.cfg;
if (cfg.name == 'ret-shape-column-area' || cfg.name == 'rect-shape-asset-name') {
console.log('groupItem', cfg.totalMatrix);
}
return item.attr('fill') === 'red';
});
},
renderColumnTxt(group, cfg, i) {
let column = cfg.columns[i];
const columnNameTxt = group.addShape('text', {
attrs: {
text: `字段${i+1}:` + column.columnName,
textAlign: 'left',
textBaseline: 'top',
fill: '#333',
x: 10,
y: 15+((15)*i) + 4,
fontSize: 8,
cursor: 'pointer'
},
name: 'txt-shape-column',
});
return columnNameTxt;
},
renderColumnArea(group, cfg, i) {
const columnArea = group.addShape('rect', {
attrs: {
stroke: '#333',
x: 0,
y: 15+((15)*i),
width: 150,
height: 15,
lineWidth: 1,
cursor: 'pointer',
fill: '#f5f5f5',
},
name: 'ret-shape-column-area',
});
return columnArea;
},
renderAssetNameArea(group, cfg) {
const assetNameArea = group.addShape('rect', {
attrs: {
stroke: '#333',
x: 0,
y: 0,
width: 150,
height: 15,
lineWidth: 1,
cursor: 'pointer',
fill: '#dadada',
},
name: 'rect-shape-asset-name',
});
return assetNameArea;
},
renderAssetNameTitle(group, cfg) {
const assetNameTitle = group.addShape('text', {
attrs: {
text: '表名:' + cfg.id,
textAlign: 'left',
textBaseline: 'top',
fill: '#333',
x: 5,
y: 4,
fontSize: 9,
cursor: 'pointer'
},
name: 'assetNameTitle-shape',
});
return assetNameTitle;
},
findSourceNode(pid) {
let s = '';
let anchorIndexLeft;
let anchorIndexRight;
let nodes = this.graph.getNodes();
let depth;
nodes.forEach(node => {
let cfg = node.get('model');
if (cfg.columnNames.indexOf(pid) != -1 || cfg.id == pid) {
s = cfg.id;
depth = cfg.depth;
let anchorLeft = cfg.sourcePoints[pid];
anchorIndexLeft = cfg.anchorPoints.findIndex(p => p.join() == anchorLeft.join())
let anchorRight = cfg.targetPoints[pid];
anchorIndexRight = cfg.anchorPoints.findIndex(p => p.join() == anchorRight.join())
return;
}
});
return {
s,
anchorIndexLeft,
anchorIndexRight,
depth
}
},
findTargetNode(id) {
let t = '';
let anchorIndexLeft;
let anchorIndexRight;
let nodes = this.graph.getNodes();
let depth;
nodes.forEach(node => {
let cfg = node.get('model');
if (cfg.columnNames.indexOf(id) != -1 || cfg.id == id) {
t = cfg.id;
depth = cfg.depth;
let anchorLeft = cfg.sourcePoints[id];
anchorIndexLeft = cfg.anchorPoints.findIndex(p => p.join() == anchorLeft.join())
let anchorRight = cfg.targetPoints[id];
anchorIndexRight = cfg.anchorPoints.findIndex(p => p.join() == anchorRight.join())
return;
}
});
return {
t,
anchorIndexLeft,
anchorIndexRight,
depth
};
},
getRandomPolyLineNum() {
let randNum = Math.floor(Math.random() * 40);
if (randNum < 10) {
randNum = 10
};
return randNum;
},
},
mounted() {
this.initGraph();
this.graph.data(assetColumnDetail);
this.graph.render();
this.graph.fitView();
let egRequest =
[
{
id: 'NGC_QITF',
pid: 'NGT_CILPI',
},
{
id: 'NGA_CHLM',
pid: 'NGA_CHLW',
},
{
id: 'DGT_CILU',
pid: 'NGC_QITAS',
},
{
id: 'NGC_QITQ',
pid: 'BGA_CBLS',
},
{
id: 'T83_BANK_EAC_INF_S',
pid: 'T83_EAC_INF_S',
},
{
id: 'UIM_DRTB',
pid: 'NGT_CILA',
},
{
id: 'UIM_DRTE',
pid: 'NGC_CKAO',
},
];
egRequest.forEach(eg => {
let newSource = this.findSourceNode(eg.pid);
let newTarget = this.findTargetNode(eg.id);
let newEdge = {
source: newSource.s,
target: newTarget.t,
sourceAnchor: newSource.anchorIndexLeft,
targetAnchor: newTarget.anchorIndexRight,
type: edgeConfig.polylineCustom(this.getRandomPolyLineNum()),
style: {
opacity: 1,
stroke: '#949494',
endArrow: {
path: 'M 0,0 L 4,2 L 3,0 L 4,-2 Z',
fill: '#60A8B7',
stroke: '#949494',
},
}
};
if (newSource.depth == newTarget.depth) {
newEdge.sourceAnchor = newSource.anchorIndexLeft;
newEdge.targetAnchor = newTarget.anchorIndexLeft;
newEdge.type = 'polyline'
};
this.graph.addItem('edge', newEdge);
});
this.graph.on('node:click', (evt) => {
let item = evt.item;
let target = evt.target;
console.log('item', item);
console.log('target', target);
});
}
}
</script>
<style lang="less">
.asset_column_g6{
.container{
width: 100vw;
height: 100vh;
}
}
</style>
let assetColumnDetail =
{
"id": "T83_EAC_INF_S",
"imgType": "402",
"isOrigin": true,
"entityId": "5FE18B81FB250E4DB7847F72F700019C",
"children": [
{
"id": "T83_BANK_EAC_INF_S",
"pid": "T83_EAC_INF_S",
"imgType": "505",
"isOrigin": false,
"entityId": "5FE18B82002B00FB7EBD817F37000163",
"columns": [
{
"id": 'c_01',
"columnName": "NGT_CILA"
},
{
"id": 'c_02',
"columnName": "NGA_CHLB"
},
{
"id": 'c_03',
"columnName": "NGC_CMAC"
},
{
"id": 'c_0dsdsd3',
"columnName": "NGC_CKAD"
},
{
"id": 'c_0feferter3',
"columnName": "NGC_LMOE"
},
{
"id": 'c_03fghghghfgh',
"columnName": "NGC_QITF"
},
],
"children": [
{
"id": "ADS.PPDC_KISO_PLD",
"pid": "T83_BANK_EAC_INF_S",
"imgType": "402",
"entityId": "5FE18B81FB250E4DB7847F72F700019C",
"columns": [
{
"id": 'c_04SDSDSDSA',
"columnName": "UIM_DRTA"
},
{
"id": 'c_0SDSSD4SDSDSDSA',
"columnName": "UIM_DRTB"
},
{
"id": 'c_0ZDSDSA',
"columnName": "UIM_DRTC"
},
]
},
]
},
{
"id": "C83_BANK_EAC_DUI_SO",
"pid": "T83_EAC_INF_S",
"imgType": "505",
"isOrigin": false,
"entityId": "5FE18B82002B00FB7EBD817F37000163",
"columns": [
{
"id": 'c_01',
"columnName": "NGT_CILG"
},
{
"id": 'c_02',
"columnName": "NGA_CHLH"
},
{
"id": 'c_03',
"columnName": "NGC_CMAI"
},
{
"id": 'c_0dsdsd3',
"columnName": "NGC_CKAJ"
},
{
"id": 'c_0feferter3',
"columnName": "NGC_LMOK"
},
{
"id": 'c_03fghghghfgh',
"columnName": "NGC_QITL"
},
{
"id": 'c_02',
"columnName": "NGA_CHLM"
},
{
"id": 'c_03',
"columnName": "NGC_CMAN"
},
{
"id": 'c_0dsdsd3',
"columnName": "NGC_CKAO"
},
{
"id": 'c_0feferter3',
"columnName": "NGC_LMOP"
},
{
"id": 'c_03fghghghfgh',
"columnName": "NGC_QITQ"
},
],
"children": [
{
"id": "BDS.PPDC_KISO_PLD",
"pid": "C83_BANK_EAC_DUI_SO",
"entityId": "5FE18BSD81FB250ES4DB7847F72F700019C",
"columns": [
{
"id": 'c_04SDSDSDSA',
"columnName": "UIM_DRTD"
},
{
"id": 'c_0ZDSDXXXDSA',
"columnName": "UIM_DRTE"
},
]
},
]
},
{
"id": "T83_CARD_EAC_INF_S",
"pid": "T83_EAC_INF_S",
"imgType": "505",
"isOrigin": false,
"entityId": "5FE18B8200C100748364197137000173",
"columns": [
{
"id": 'c_04',
"columnName": "DGT_CILR"
},
{
"id": 'c_05',
"columnName": "BGA_CBLS"
},
{
"id": 'c_06',
"columnName": "TGC_COAT"
},
]
},
{
"id": "G83_SDD_EAFC_INF_SS",
"pid": "T83_EAC_INF_S",
"imgType": "505",
"isOrigin": false,
"entityId": "5FE18B8200C100748364197137000173",
"columns": [
{
"id": 'c_04',
"columnName": "DGT_CILU"
},
]
},
],
"columns": [
{
"id": 'c_01',
"columnName": "NGT_CILPI"
},
{
"id": 'c_02',
"columnName": "NGA_CHLW"
},
{
"id": 'c_03',
"columnName": "NGC_CMAX"
},
{
"id": 'c_0dsdsd3',
"columnName": "NGC_CKAY"
},
{
"id": 'c_0feferter3',
"columnName": "NGC_LMOZ"
},
{
"id": 'c_03fghghghfgh',
"columnName": "NGC_QITAS"
},
]
};
export default assetColumnDetail;
import G6 from '@antv/g6';
function polylineCustom(randomNum=10) {
G6.registerEdge(
'polyline-custom',
{
getPath(points) {
const startPoint = points[0];
const endPoint = points[1];
return [
['M', startPoint.x, startPoint.y],
['L', startPoint.x - randomNum, startPoint.y],
['L', startPoint.x - randomNum, endPoint.y],
['L', endPoint.x, endPoint.y],
];
},
getShapeStyle(cfg) {
const startPoint = cfg.startPoint;
const endPoint = cfg.endPoint;
const controlPoints = this.getControlPoints(cfg);
let points = [startPoint];
if (controlPoints) {
points = points.concat(controlPoints);
}
points.push(endPoint);
const path = this.getPath(points);
const style = Object.assign(
{},
G6.Global.defaultEdge.style,
{
path,
},
cfg.style,
);
return style;
},
afterDraw(cfg, group) {
const startPoint = cfg.startPoint;
const shape = group.get('children')[0];
const length = shape.getTotalLength();
shape.animate(
(ratio) => {
const startLen = ratio * length;
const cfg = {
lineDash: [startLen, length - startLen],
};
return cfg;
},
{
repeat: false,
duration: 1000,
},
);
},
},
'polyline',
);
return 'polyline-custom';
}
const edgeConfig = {
polylineCustom: (randomNum) => {
return polylineCustom(randomNum);
}
};
export default edgeConfig;