Skip to content

S
szse
Commit 4dd9d709 by zhaochengxiang
Options

数据地图tag2

parent 6a058b83
Showing with 154 additions and 100 deletions
package.json
...@@ -16,7 +16,6 @@ ...@@ -16,7 +16,6 @@
"crypto-js": "^4.0.0", "crypto-js": "^4.0.0",
"less": "^4.1.1", "less": "^4.1.1",
"less-loader": "^8.0.0", "less-loader": "^8.0.0",
"lodash": "^4.17.21",
"react": "^17.0.1", "react": "^17.0.1",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
"react-redux": "^7.1.0", "react-redux": "^7.1.0",
......
src/view/Manage/Map/Component/Org.jsx
...@@ -169,7 +169,6 @@ class Org extends React.Component { ...@@ -169,7 +169,6 @@ class Org extends React.Component {
width, width,
height, height,
linkCenter: true, linkCenter: true,
fitCenter: true,
maxZoom: 1, maxZoom: 1,
plugins: [tooltip], plugins: [tooltip],
modes: { modes: {
......
src/view/Manage/Map/Component/Relation.jsx
...@@ -15,6 +15,27 @@ const colors = [ ...@@ -15,6 +15,27 @@ const colors = [
'#FFD6E7', '#FFD6E7',
]; ];
const COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
return [
['M', x - r, y - r],
['a', r, r, 0, 1, 0, r * 2, 0],
['a', r, r, 0, 1, 0, -r * 2, 0],
['M', x + 2 - r, y - r],
['L', x + r - 2, y - r],
];
};
const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
return [
['M', x - r, y - r],
['a', r, r, 0, 1, 0, r * 2, 0],
['a', r, r, 0, 1, 0, -r * 2, 0],
['M', x + 2 - r, y - r],
['L', x + r - 2, y - r],
['M', x, y - 2 * r + 2],
['L', x, y - 2],
];
};
const globalFontSize = 12; const globalFontSize = 12;
let graph = null; let graph = null;
...@@ -31,11 +52,63 @@ class Relation extends React.Component { ...@@ -31,11 +52,63 @@ class Relation extends React.Component {
const width = container.scrollWidth || 500; const width = container.scrollWidth || 500;
const height = container.scrollHeight || 500; const height = container.scrollHeight || 500;
function refreshDragedNodePosition(e) { G6.registerNode(
const model = e.item.get('model'); 'relation-node',
model.fx = e.x; {
model.fy = e.y; draw(cfg, group) {
} group.addShape('circle', {
attrs: {
x: 0,
y: 0,
r: cfg.size/2,
fill: colors[cfg.cluster % colors.length],
},
});
const text = group.addShape('text', {
attrs: {
x: 0,
y: 0,
fill: '#000',
fontSize: globalFontSize,
textAlign: 'center',
textBaseline: 'middle',
text: (cfg.label||''),
}
});
const bbox = text.getBBox();
if (!cfg.children) {
group.addShape('marker', {
attrs: {
x: bbox.maxX + 8,
y: bbox.height/2,
r: 6,
symbol: EXPAND_ICON,
stroke: '#73d13d',
lineWidth: 2,
}
});
} else if ((cfg.children||[]).length>0) {
group.addShape('marker', {
attrs: {
x: bbox.maxX + 8,
y: bbox.height/2,
r: 6,
symbol: cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON,
stroke: cfg.collapsed ? '#73d13d' : '#ff4d4f',
lineWidth: 2,
}
});
}
return group;
},
update: undefined,
},
'single-node'
);
const tooltip = new G6.Tooltip({ const tooltip = new G6.Tooltip({
offsetX: 10, offsetX: 10,
...@@ -56,48 +129,61 @@ class Relation extends React.Component { ...@@ -56,48 +129,61 @@ class Relation extends React.Component {
}, },
}); });
graph = new G6.Graph({ graph = new G6.TreeGraph({
container: `container${type||''}`, container: `container${type||''}`,
width, width,
height, height,
plugins: [tooltip], plugins: [tooltip],
linkCenter: true,
maxZoom: 1,
modes: {
default: [
{
type: 'collapse-expand',
onChange: function onChange(item, collapsed) {
const data = item.get('model');
graph.updateItem(item, {
collapsed,
});
data.collapsed = collapsed;
return true;
},
},
'drag-canvas',
'zoom-canvas',
],
},
layout: { layout: {
type: 'force', type: 'compactBox',
preventOverlap: true, direction: 'RL',
linkDistance: (d) => { getId: function getId(d) {
return 200; return d.id;
}, },
nodeStrength: (d) => { getHeight: () => {
if (d.isLeaf) { return 26;
return -50; },
} getWidth: () => {
return -10; return 26;
}, },
edgeStrength: (d) => { getVGap: () => {
return 0.7; return 20;
}, },
getHGap: () => {
return 30;
},
radial: true,
}, },
defaultNode: { defaultNode: {
color: '#5B8FF9', type: 'relation-node',
}, anchorPoints: [
modes: { [0, 0.5],
default: ['drag-canvas'], [1, 0.5],
],
}, },
}); });
this.layoutGraph(); this.layoutGraph();
graph.on('node:dragstart', function (e) {
graph.layout();
refreshDragedNodePosition(e);
});
graph.on('node:drag', function (e) {
refreshDragedNodePosition(e);
});
graph.on('node:dragend', function (e) {
e.item.get('model').fx = null;
e.item.get('model').fy = null;
});
graph.on('node:click', function (e) { graph.on('node:click', function (e) {
const node = e.item; const node = e.item;
const model = node.getModel(); const model = node.getModel();
...@@ -152,34 +238,38 @@ class Relation extends React.Component { ...@@ -152,34 +238,38 @@ class Relation extends React.Component {
return res; return res;
}; };
const nodes = data.nodes; function recursionTreeData(treeData, depth, cluster = '') {
const clusterMap = new Map(); if ((treeData||[]).length === 0) return;
let clusterId = 0;
nodes.forEach(function (node) { (treeData||[]).forEach((item, index) => {
// cluster
if (node.cluster && clusterMap.get(node.cluster) === undefined) { let _cluster = 0;
clusterMap.set(node.cluster, clusterId); if (depth === 1) {
clusterId++; _cluster = (index + 1);
} } else {
const cid = clusterMap.get(node.cluster); _cluster = cluster;
if (!node.style) { }
node.style = {};
} item.size = (100-depth*20)>60?(100-depth*20):60;
node.style.fill = colors[cid % colors.length]; item.cluster = _cluster;
}); recursionTreeData(item.children||[], depth+1, _cluster);
})
}
data.size = 100;
data.cluster = 0;
recursionTreeData(data.children||[], 1);
data.nodes.forEach(function (node) { graph.node(function (node) {
node.label = fittingString(node.label||'', node.size, globalFontSize); return {
label: fittingString(node.text||'', node.size-32, globalFontSize),
};
}); });
graph.data({ graph.data(data);
nodes,
edges: data.edges.map(function (edge, i) {
edge.id = 'edge' + i;
return Object.assign({}, edge);
}),
});
graph.render(); graph.render();
graph.fitView();
} }
} }
......
src/view/Manage/Map/MapContent.jsx
...@@ -7,7 +7,6 @@ import Org from './Component/Org'; ...@@ -7,7 +7,6 @@ import Org from './Component/Org';
import Tree from './Component/Tree'; import Tree from './Component/Tree';
import Relation from './Component/Relation'; import Relation from './Component/Relation';
import { dispatchLatest } from '../../../model'; import { dispatchLatest } from '../../../model';
import lodash from 'lodash';
const column = 3; const column = 3;
...@@ -42,7 +41,7 @@ class MapContent extends React.Component { ...@@ -42,7 +41,7 @@ class MapContent extends React.Component {
curTableModelData: data||[], curTableModelData: data||[],
breadcrumbContents: [{ data: data||[] }] breadcrumbContents: [{ data: data||[] }]
}, () => { }, () => {
this.setTreeAndRelationState(data||[]); this.setAllTreeGraphState(data||[]);
}); });
} }
}) })
...@@ -71,39 +70,6 @@ class MapContent extends React.Component { ...@@ -71,39 +70,6 @@ class MapContent extends React.Component {
}; };
} }
convertRelationModelData = (data) => {
const _relationData = {
nodes: [],
edges: []
}
function recursionTreeData(treeData, sid, depth, cluster = '') {
if ((treeData||[]).length === 0) return;
(treeData||[]).forEach((item, index) => {
let _cluster = '';
if (depth === 1) {
_cluster = (index + 1).toString();
} else {
_cluster = cluster;
}
_relationData.nodes.push({...item, ...{ label: item.text||'', size: (80-depth*20)>20?(80-depth*20):20, cluster: _cluster, isLeaf: (item.childSize===null || item.childSize===0)}});
_relationData.edges.push({ source: sid, target: item.id });
recursionTreeData(item.children||[], item.id, depth+1, _cluster);
})
}
if (data && data.id) {
_relationData.nodes.push({...data, ...{ label: data.text||'', size: 80, cluster: '0', isLeaf: (data.childSize===null || data.childSize===0)}});
recursionTreeData(data.children||[], data.id, 1);
}
return _relationData;
}
setSquareGraphState = (item) => { setSquareGraphState = (item) => {
const { breadcrumbContents } = this.state; const { breadcrumbContents } = this.state;
...@@ -123,14 +89,14 @@ class MapContent extends React.Component { ...@@ -123,14 +89,14 @@ class MapContent extends React.Component {
this.convertRemoteData(data||[]); this.convertRemoteData(data||[]);
item.children = (data||[]); item.children = (data||[]);
this.setSquareGraphState(item); this.setSquareGraphState(item);
this.setTreeAndRelationState(tableModelData); this.setAllTreeGraphState(tableModelData);
} }
}) })
return; return;
} }
this.setSquareGraphState(item); this.setSquareGraphState(item);
this.setTreeAndRelationState(tableModelData); this.setAllTreeGraphState(tableModelData);
} }
onBreadcrumbItemClick = (content, index) => { onBreadcrumbItemClick = (content, index) => {
...@@ -167,17 +133,17 @@ class MapContent extends React.Component { ...@@ -167,17 +133,17 @@ class MapContent extends React.Component {
recursionData(tableModelData); recursionData(tableModelData);
this.setTreeAndRelationState(tableModelData); this.setAllTreeGraphState(tableModelData);
} }
}) })
} }
setTreeAndRelationState = (tableModelData) => { setAllTreeGraphState = (tableModelData) => {
const _treeData = this.convertTreeModelData(tableModelData); const _treeData = this.convertTreeModelData(tableModelData);
this.setState({ this.setState({
orgModelData: lodash.cloneDeep(_treeData), orgModelData: JSON.parse(JSON.stringify(_treeData)),
treeModelData: lodash.cloneDeep(_treeData), treeModelData: JSON.parse(JSON.stringify(_treeData)),
relationModelData: this.convertRelationModelData(lodash.cloneDeep(_treeData)) relationModelData: JSON.parse(JSON.stringify(_treeData))
}); });
} }
......
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