Skip to content

S
szse
Commit 35aa3780 by zhaochengxiang
Options

数据地图

parent e1ac798f
Showing with 237 additions and 87 deletions
src/view/Manage/Map/Component/Org.jsx 0 → 100644
import React from 'react';
import G6 from '@antv/g6';
import { ContextPath } from '../../../../util';
let graph = null;
class Org extends React.Component {
componentDidMount() {
const { type, loadMoreData, history } = this.props;
const container = document.getElementById(`container${type||''}`);
if (!container) return;
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
graph = new G6.TreeGraph({
container: `container${type||''}`,
width,
height,
linkCenter: true,
modes: {
default: [
{
type: 'collapse-expand',
onChange: function onChange(item, collapsed) {
const data = item.get('model');
data.collapsed = collapsed;
return true;
},
},
'drag-canvas',
'zoom-canvas',
],
},
defaultNode: {
size: 9,
anchorPoints: [
[0, 0.5],
[1, 0.5],
],
},
defaultEdge: {
type: 'cubic-horizontal',
},
layout: {
type: 'compactBox',
direction: 'TB',
getId: function getId(d) {
return d.id;
},
getHeight: function getHeight() {
return 16;
},
getWidth: function getWidth() {
return 16;
},
getVGap: function getVGap() {
return 80;
},
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',
},
},
};
});
this.layoutGraph();
graph.on('node:click', function (e) {
const node = e.item;
const model = node.getModel();
if (model.dbType==='Dir') {
const children = model.children;
if (!children && loadMoreData) {
loadMoreData(model.dirId||'');
}
} else {
//通过资产id跳转到资产详情页
// model.tableModelId
// history && history.push(`${ContextPath}/home`);
}
});
if (typeof window !== 'undefined') {
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};
}
}
layoutGraph = () => {
const { data } = this.props;
if(graph && data){
graph.data(data);
graph.render();
graph.fitView();
}
}
componentDidUpdate(prevProps, prevState){
this.layoutGraph();
}
render() {
const { type } = this.props;
return (
<div id={`container${type||''}`} style={{ width: '100%', height: '100%' }}></div>
);
}
}
export default Org;
\ No newline at end of file
src/view/Manage/Map/Component/Relation.jsx
......@@ -5,7 +5,6 @@ import { ContextPath } from '../../../../util';
const colors = [
'#BDD2FD',
'#BDEFDB',
'#C2C8D5',
'#FBE5A2',
'#F6C3B7',
......@@ -27,7 +26,9 @@ class Relation extends React.Component {
setTimeout(() => {
const container = document.getElementById(`container${type||''}`);
const width = container.scrollWidth;
if (!container) return;
const width = container.scrollWidth || 500;
const height = container.scrollHeight || 500;
function refreshDragedNodePosition(e) {
......@@ -128,7 +129,7 @@ class Relation extends React.Component {
layoutGraph = () => {
const { data } = this.props;
if(graph){
if(graph && data){
const fittingString = (str, maxWidth, fontSize) => {
const ellipsis = '...';
const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
......
src/view/Manage/Map/Component/Tree.jsx
......@@ -11,6 +11,8 @@ class Tree extends React.Component {
const { type, loadMoreData, history } = this.props;
const container = document.getElementById(`container${type||''}`);
if (!container) return;
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
graph = new G6.TreeGraph({
......@@ -91,7 +93,7 @@ class Tree extends React.Component {
layoutGraph = () => {
const { data } = this.props;
if(graph){
if(graph && data){
graph.data(data);
graph.render();
graph.fitView();
......
src/view/Manage/Map/MapContent.jsx
......@@ -3,6 +3,7 @@ import { Row, Col, Breadcrumb, Spin } from 'antd';
import { HomeOutlined } from '@ant-design/icons';
import SquareItem from './Component/SquareItem';
import Org from './Component/Org';
import Tree from './Component/Tree';
import Relation from './Component/Relation';
import { dispatchLatest } from '../../../model';
......@@ -18,6 +19,7 @@ class MapContent extends React.Component {
loading: false,
tableModelData: null,
curTableModelData: null,
orgModelData: null,
treeModelData: null,
relationModelData: null,
breadcrumbContents: null
......@@ -114,37 +116,37 @@ class MapContent extends React.Component {
onSquareItemClick = (item) => {
const { tableModelData } = this.state;
if (!item.children) {
// dispatchLatest({
// type: 'map.getTableModelByDirIid',
// payload: { dirId: item.dirId },
// callback: data => {
// this.convertRemoteData(data||[]);
// item.children = (data||[]);
// this.setSquareGraphState(item);
// this.setTreeAndRelationState(tableModelData);
// }
// })
// return;
item.children = [
{
"subDirCount": 0,
"dbType": "Dir",
"dirId": "5f2a63e89cfac536601fb2a6",
"tableModelCount": 0,
"dirName": "公司"
},
{
"tableModelId": "1",
"name": "table",
"system": "8月5",
"remarks": "对外"
dispatchLatest({
type: 'map.getTableModelByDirIid',
payload: { dirId: item.dirId },
callback: data => {
this.convertRemoteData(data||[]);
item.children = (data||[]);
this.setSquareGraphState(item);
this.setTreeAndRelationState(tableModelData);
}
]
this.convertRemoteData(item.children);
this.setSquareGraphState(item);
this.setTreeAndRelationState(tableModelData);
})
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);
......@@ -163,76 +165,77 @@ class MapContent extends React.Component {
loadMoreData = (id) => {
const { tableModelData } = this.state;
// dispatchLatest({
// type: 'map.getTableModelByDirIid',
// payload: { dirId: id },
// callback: data => {
// 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||[]);
// }
// })
// }
dispatchLatest({
type: 'map.getTableModelByDirIid',
payload: { dirId: id },
callback: data => {
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);
recursionData(tableModelData);
// this.setTreeAndRelationState(tableModelData);
// }
// })
const data = [
{
"subDirCount": 0,
"dbType": "Dir",
"dirId": "5f2a63e89cfac536601fb2a6",
"tableModelCount": 0,
"dirName": "公司"
},
{
"tableModelId": "1",
"name": "table",
"system": "8月5",
"remarks": "对外"
this.setTreeAndRelationState(tableModelData);
}
]
})
this.convertRemoteData(data);
// const data = [
// {
// "subDirCount": 0,
// "dbType": "Dir",
// "dirId": "5f2a63e89cfac536601fb2a6",
// "tableModelCount": 0,
// "dirName": "公司"
// },
// {
// "tableModelId": "1",
// "name": "table",
// "system": "8月5",
// "remarks": "对外"
// }
// ]
function recursionData(_data) {
if ((_data||[]).length === 0) return;
// this.convertRemoteData(data);
_data.forEach((item, index) => {
if (item.dirId === id) {
item.children = data;
} else {
recursionData(item.children||[]);
}
})
}
// function recursionData(_data) {
// if ((_data||[]).length === 0) return;
recursionData(tableModelData);
// _data.forEach((item, index) => {
// if (item.dirId === id) {
// item.children = data;
// } else {
// recursionData(item.children||[]);
// }
// })
// }
this.setTreeAndRelationState(tableModelData);
// recursionData(tableModelData);
// this.setTreeAndRelationState(tableModelData);
}
setTreeAndRelationState = (tableModelData) => {
const _treeData = this.convertTreeModelData(tableModelData);
this.setState({
orgModelData: lodash.cloneDeep(_treeData),
treeModelData: lodash.cloneDeep(_treeData),
relationModelData: this.convertRelationModelData(lodash.cloneDeep(_treeData))
});
}
render() {
const { diagram, type } = this.props;
const { curTableModelData, breadcrumbContents, treeModelData, relationModelData, loading } = this.state;
const { diagram, topic } = this.props;
const { curTableModelData, breadcrumbContents, orgModelData , treeModelData, relationModelData, loading } = this.state;
let groups = [];
if (curTableModelData) {
......@@ -284,10 +287,13 @@ class MapContent extends React.Component {
</>
}
{
diagram==='tree' && <Tree data={treeModelData} type={type} {...this.props} loadMoreData={this.loadMoreData} />
diagram==='org' && <Org data={orgModelData} type={`${topic.id||''}${diagram}`} {...this.props} loadMoreData={this.loadMoreData} />
}
{
diagram==='tree' && <Tree data={treeModelData} type={`${topic.id||''}${diagram}`} {...this.props} loadMoreData={this.loadMoreData} />
}
{
diagram==='relation' && <Relation data={relationModelData} type={type} {...this.props} loadMoreData={this.loadMoreData} />
diagram==='relation' && <Relation data={relationModelData} type={`${topic.id||''}${diagram}`} {...this.props} loadMoreData={this.loadMoreData} />
}
</>
}
......
src/view/Manage/Map/index.jsx
......@@ -56,6 +56,7 @@ class Map extends React.Component {
tabBarExtraContent={{
left: <Radio.Group className='m-3' size='small' value={diagram} onChange={this.onRadioChange} >
<Radio.Button value='square'>方块图</Radio.Button>
<Radio.Button value='org'>组织图</Radio.Button>
<Radio.Button value='tree'>树形图</Radio.Button>
<Radio.Button value='relation'>关系图</Radio.Button>
</Radio.Group>,
......@@ -67,7 +68,7 @@ class Map extends React.Component {
topics && topics.map((topic, index) => {
return (
<TabPane tab={topic.name||''} key={index.toString()} className='p-3' style={{ height: '100%' }}>
{ tabKey===index.toString() && <MapContent diagram={diagram} topic={topic} type='business' {...this.props} /> }
{ tabKey===index.toString() && <MapContent diagram={diagram} topic={topic} {...this.props} /> }
</TabPane>
);
})
......
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