Skip to content

S
szse
Commit 39444b1a by zhaochengxiang
Options

数据地图完成tag1

parent 35aa3780
Showing with 232 additions and 94 deletions
src/view/Manage/Map/Component/Org.jsx
...@@ -5,6 +5,10 @@ import { ContextPath } from '../../../../util'; ...@@ -5,6 +5,10 @@ import { ContextPath } from '../../../../util';
let graph = null; let graph = null;
const rectWidth = 120;
const rectHeight = 40;
const globalFontSize = 20;
class Org extends React.Component { class Org extends React.Component {
componentDidMount() { componentDidMount() {
...@@ -15,17 +19,144 @@ class Org extends React.Component { ...@@ -15,17 +19,144 @@ class Org extends React.Component {
const width = container.scrollWidth; const width = container.scrollWidth;
const height = container.scrollHeight || 500; const height = container.scrollHeight || 500;
G6.registerNode(
'org-node',
{
draw(cfg, group) {
const styles = this.getShapeStyle(cfg);
const { labelCfg = {} } = cfg;
const w = styles.width;
const h = styles.height;
group.addShape('rect', {
attrs: {
...styles,
x: 0,
y: 0,
width: w,
height: h
},
});
if (cfg.label) {
group.addShape('text', {
attrs: {
...labelCfg.style,
x: w/2,
y: h/2,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.label,
}
});
}
return group;
},
update: undefined,
},
'rect',
);
G6.registerEdge(
'flow-line',
{
getPath(points) {
const startPoint = points[0];
const endPoint = points[1];
return [
['M', startPoint.x, startPoint.y],
['L', startPoint.x, (startPoint.y + endPoint.y) / 2],
['L', endPoint.x, (startPoint.y + endPoint.y) / 2],
['L', endPoint.x, endPoint.y],
];
},
getShapeStyle(cfg) {
const startPoint = cfg.startPoint;
const endPoint = cfg.endPoint;
const controlPoints = this.getControlPoints(cfg);
let points = [startPoint]; // the start point
// the control points
if (controlPoints) {
points = points.concat(controlPoints);
}
// the end point
points.push(endPoint);
const path = this.getPath(points);
const style = Object.assign(
{},
G6.Global.defaultEdge.style,
{
path,
},
cfg.style,
);
return style;
},
},
'line'
);
const tooltip = new G6.Tooltip({
offsetX: 10,
offsetY: 10,
// the types of items that allow the tooltip show up
// 允许出现 tooltip 的 item 类型
itemTypes: ['node'],
// custom the tooltip's content
// 自定义 tooltip 内容
getContent: (e) => {
const outDiv = document.createElement('div');
outDiv.style.width = 'fit-content';
//outDiv.style.padding = '0px 0px 20px 0px';
outDiv.innerHTML = `
<h4>${e.item.getModel().text||''}</h4>
`;
return outDiv;
},
});
const defaultNodeStyle = {
fill: '#91d5ff',
stroke: '#40a9ff',
radius: 5,
};
const defaultLabelCfg = {
style: {
fill: '#000',
fontSize: globalFontSize,
},
};
const defaultEdgeStyle = {
stroke: '#91d5ff',
endArrow: {
path: 'M 0,0 L 12, 6 L 9,0 L 12, -6 Z',
fill: '#91d5ff',
d: -20,
},
};
graph = new G6.TreeGraph({ graph = new G6.TreeGraph({
container: `container${type||''}`, container: `container${type||''}`,
width, width,
height, height,
linkCenter: true, linkCenter: true,
fitCenter: true,
maxZoom: 1,
plugins: [tooltip],
modes: { modes: {
default: [ default: [
{ {
type: 'collapse-expand', type: 'collapse-expand',
onChange: function onChange(item, collapsed) { onChange: function onChange(item, collapsed) {
const data = item.get('model'); const data = item.get('model');
graph.updateItem(item, {
collapsed,
});
data.collapsed = collapsed; data.collapsed = collapsed;
return true; return true;
}, },
...@@ -35,14 +166,14 @@ class Org extends React.Component { ...@@ -35,14 +166,14 @@ class Org extends React.Component {
], ],
}, },
defaultNode: { defaultNode: {
size: 9, type: 'org-node',
anchorPoints: [ size: [rectWidth, rectHeight],
[0, 0.5], style: defaultNodeStyle,
[1, 0.5], labelCfg: defaultLabelCfg,
],
}, },
defaultEdge: { defaultEdge: {
type: 'cubic-horizontal', type: 'flow-line',
style: defaultEdgeStyle,
}, },
layout: { layout: {
type: 'compactBox', type: 'compactBox',
...@@ -57,32 +188,12 @@ class Org extends React.Component { ...@@ -57,32 +188,12 @@ class Org extends React.Component {
return 16; return 16;
}, },
getVGap: function getVGap() { getVGap: function getVGap() {
return 80; return 40;
}, },
getHGap: function getHGap() { getHGap: function getHGap() {
return 20; return 70;
},
},
});
graph.node(function (node) {
let position = 'right';
let rotate = 0;
if (!node.children) {
position = 'bottom';
rotate = Math.PI / 2;
}
return {
label: node.text||'',
labelCfg: {
position,
offset: 5,
style: {
rotate,
textAlign: 'start',
}, },
}, },
};
}); });
this.layoutGraph(); this.layoutGraph();
...@@ -118,6 +229,34 @@ class Org extends React.Component { ...@@ -118,6 +229,34 @@ class Org extends React.Component {
const { data } = this.props; const { data } = this.props;
if(graph && data){ if(graph && data){
const fittingString = (str, maxWidth, fontSize) => {
const ellipsis = '...';
const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
let currentWidth = 0;
let res = str;
const pattern = new RegExp('[\u4E00-\u9FA5]+'); // distinguish the Chinese charactors and letters
str.split('').forEach((letter, i) => {
if (currentWidth > maxWidth - ellipsisLength) return;
if (pattern.test(letter)) {
// Chinese charactors
currentWidth += fontSize;
} else {
// get the width of single letter according to the fontSize
currentWidth += G6.Util.getLetterWidth(letter, fontSize);
}
if (currentWidth > maxWidth - ellipsisLength) {
res = `${str.substr(0, i)}${ellipsis}`;
}
});
return res;
};
graph.node(function (node) {
return {
label: fittingString(node.text||'', rectWidth-4, globalFontSize),
};
});
graph.data(data); graph.data(data);
graph.render(); graph.render();
graph.fitView(); graph.fitView();
......
src/view/Manage/Map/Component/Tree.jsx
...@@ -4,6 +4,8 @@ import G6 from '@antv/g6'; ...@@ -4,6 +4,8 @@ import G6 from '@antv/g6';
import { ContextPath } from '../../../../util'; import { ContextPath } from '../../../../util';
let graph = null; let graph = null;
const maxTextWidth = 116;
const globalFontSize = 20;
class Tree extends React.Component { class Tree extends React.Component {
...@@ -15,10 +17,32 @@ class Tree extends React.Component { ...@@ -15,10 +17,32 @@ class Tree extends React.Component {
const width = container.scrollWidth; const width = container.scrollWidth;
const height = container.scrollHeight || 500; const height = container.scrollHeight || 500;
const tooltip = new G6.Tooltip({
offsetX: 10,
offsetY: 10,
// the types of items that allow the tooltip show up
// 允许出现 tooltip 的 item 类型
itemTypes: ['node'],
// custom the tooltip's content
// 自定义 tooltip 内容
getContent: (e) => {
const outDiv = document.createElement('div');
outDiv.style.width = 'fit-content';
//outDiv.style.padding = '0px 0px 20px 0px';
outDiv.innerHTML = `
<h4>${e.item.getModel().text||''}</h4>
`;
return outDiv;
},
});
graph = new G6.TreeGraph({ graph = new G6.TreeGraph({
container: `container${type||''}`, container: `container${type||''}`,
width, width,
height, height,
maxZoom: 1,
plugins: [tooltip],
modes: { modes: {
default: [ default: [
{ {
...@@ -34,11 +58,16 @@ class Tree extends React.Component { ...@@ -34,11 +58,16 @@ class Tree extends React.Component {
], ],
}, },
defaultNode: { defaultNode: {
size: 9,
anchorPoints: [ anchorPoints: [
[0, 0.5], [0, 0.5],
[1, 0.5], [1, 0.5],
], ],
labelCfg: {
style: {
fill: '#000',
fontSize: globalFontSize,
},
}
}, },
defaultEdge: { defaultEdge: {
type: 'cubic-horizontal', type: 'cubic-horizontal',
...@@ -51,16 +80,6 @@ class Tree extends React.Component { ...@@ -51,16 +80,6 @@ class Tree extends React.Component {
}, },
}); });
graph.node(function (node) {
return {
label: node.text||'',
labelCfg: {
position: node.children && node.children.length > 0 ? 'left' : 'right',
offset: 5,
},
};
});
this.layoutGraph(); this.layoutGraph();
graph.on('node:click', function (e) { graph.on('node:click', function (e) {
...@@ -94,6 +113,38 @@ class Tree extends React.Component { ...@@ -94,6 +113,38 @@ class Tree extends React.Component {
const { data } = this.props; const { data } = this.props;
if(graph && data){ if(graph && data){
const fittingString = (str, maxWidth, fontSize) => {
const ellipsis = '...';
const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
let currentWidth = 0;
let res = str;
const pattern = new RegExp('[\u4E00-\u9FA5]+'); // distinguish the Chinese charactors and letters
str.split('').forEach((letter, i) => {
if (currentWidth > maxWidth - ellipsisLength) return;
if (pattern.test(letter)) {
// Chinese charactors
currentWidth += fontSize;
} else {
// get the width of single letter according to the fontSize
currentWidth += G6.Util.getLetterWidth(letter, fontSize);
}
if (currentWidth > maxWidth - ellipsisLength) {
res = `${str.substr(0, i)}${ellipsis}`;
}
});
return res;
};
graph.node(function (node) {
return {
label: fittingString(node.text||'', maxTextWidth, globalFontSize),
labelCfg: {
position: node.children && node.children.length > 0 ? 'left' : 'right',
offset: 5,
},
};
});
graph.data(data); graph.data(data);
graph.render(); graph.render();
graph.fitView(); graph.fitView();
......
src/view/Manage/Map/MapContent.jsx
...@@ -127,26 +127,6 @@ class MapContent extends React.Component { ...@@ -127,26 +127,6 @@ class MapContent extends React.Component {
} }
}) })
return; return;
// item.children = [
// {
// "subDirCount": 0,
// "dbType": "Dir",
// "dirId": "5f2a63e89cfac536601fb2a6",
// "tableModelCount": 0,
// "dirName": "公司"
// },
// {
// "tableModelId": "1",
// "name": "table",
// "system": "8月5",
// "remarks": "对外"
// }
// ]
// this.convertRemoteData(item.children);
// this.setSquareGraphState(item);
// this.setTreeAndRelationState(tableModelData);
// return;
} }
this.setSquareGraphState(item); this.setSquareGraphState(item);
...@@ -169,10 +149,12 @@ class MapContent extends React.Component { ...@@ -169,10 +149,12 @@ class MapContent extends React.Component {
type: 'map.getTableModelByDirIid', type: 'map.getTableModelByDirIid',
payload: { dirId: id }, payload: { dirId: id },
callback: data => { callback: data => {
this.convertRemoteData(data||[]); this.convertRemoteData(data||[]);
function recursionData(_data) { function recursionData(_data) {
if ((_data||[]).length === 0) return; if ((_data||[]).length === 0)
return;
_data.forEach((item, index) => { _data.forEach((item, index) => {
if (item.dirId === id) { if (item.dirId === id) {
...@@ -188,40 +170,6 @@ class MapContent extends React.Component { ...@@ -188,40 +170,6 @@ class MapContent extends React.Component {
this.setTreeAndRelationState(tableModelData); this.setTreeAndRelationState(tableModelData);
} }
}) })
// const data = [
// {
// "subDirCount": 0,
// "dbType": "Dir",
// "dirId": "5f2a63e89cfac536601fb2a6",
// "tableModelCount": 0,
// "dirName": "公司"
// },
// {
// "tableModelId": "1",
// "name": "table",
// "system": "8月5",
// "remarks": "对外"
// }
// ]
// this.convertRemoteData(data);
// function recursionData(_data) {
// if ((_data||[]).length === 0) return;
// _data.forEach((item, index) => {
// if (item.dirId === id) {
// item.children = data;
// } else {
// recursionData(item.children||[]);
// }
// })
// }
// recursionData(tableModelData);
// this.setTreeAndRelationState(tableModelData);
} }
setTreeAndRelationState = (tableModelData) => { setTreeAndRelationState = (tableModelData) => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment