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';
let graph = null;
const rectWidth = 120;
const rectHeight = 40;
const globalFontSize = 20;
class Org extends React.Component {
componentDidMount() {
......@@ -15,17 +19,144 @@ class Org extends React.Component {
const width = container.scrollWidth;
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({
container: `container${type||''}`,
width,
height,
linkCenter: true,
fitCenter: true,
maxZoom: 1,
plugins: [tooltip],
modes: {
default: [
{
type: 'collapse-expand',
onChange: function onChange(item, collapsed) {
const data = item.get('model');
graph.updateItem(item, {
collapsed,
});
data.collapsed = collapsed;
return true;
},
......@@ -35,14 +166,14 @@ class Org extends React.Component {
],
},
defaultNode: {
size: 9,
anchorPoints: [
[0, 0.5],
[1, 0.5],
],
type: 'org-node',
size: [rectWidth, rectHeight],
style: defaultNodeStyle,
labelCfg: defaultLabelCfg,
},
defaultEdge: {
type: 'cubic-horizontal',
type: 'flow-line',
style: defaultEdgeStyle,
},
layout: {
type: 'compactBox',
......@@ -57,32 +188,12 @@ class Org extends React.Component {
return 16;
},
getVGap: function getVGap() {
return 80;
return 40;
},
getHGap: function getHGap() {
return 20;
},
},
});
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',
return 70;
},
},
};
});
this.layoutGraph();
......@@ -118,6 +229,34 @@ class Org extends React.Component {
const { data } = this.props;
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.render();
graph.fitView();
......
src/view/Manage/Map/Component/Tree.jsx
......@@ -4,6 +4,8 @@ import G6 from '@antv/g6';
import { ContextPath } from '../../../../util';
let graph = null;
const maxTextWidth = 116;
const globalFontSize = 20;
class Tree extends React.Component {
......@@ -15,10 +17,32 @@ class Tree extends React.Component {
const width = container.scrollWidth;
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({
container: `container${type||''}`,
width,
height,
maxZoom: 1,
plugins: [tooltip],
modes: {
default: [
{
......@@ -34,11 +58,16 @@ class Tree extends React.Component {
],
},
defaultNode: {
size: 9,
anchorPoints: [
[0, 0.5],
[1, 0.5],
],
labelCfg: {
style: {
fill: '#000',
fontSize: globalFontSize,
},
}
},
defaultEdge: {
type: 'cubic-horizontal',
......@@ -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();
graph.on('node:click', function (e) {
......@@ -94,6 +113,38 @@ class Tree extends React.Component {
const { data } = this.props;
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.render();
graph.fitView();
......
src/view/Manage/Map/MapContent.jsx
......@@ -127,26 +127,6 @@ class MapContent extends React.Component {
}
})
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);
......@@ -169,10 +149,12 @@ class MapContent extends React.Component {
type: 'map.getTableModelByDirIid',
payload: { dirId: id },
callback: data => {
this.convertRemoteData(data||[]);
function recursionData(_data) {
if ((_data||[]).length === 0) return;
if ((_data||[]).length === 0)
return;
_data.forEach((item, index) => {
if (item.dirId === id) {
......@@ -188,40 +170,6 @@ class MapContent extends React.Component {
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) => {
......
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