Skip to content

S
szse
Commit 247742eb by zhaochengxiang
Options

地图性能优化

parent 346fee25
Showing with 168 additions and 101 deletions
src/App.js
......@@ -62,7 +62,7 @@ export default class App extends React.Component {
<Route path={'/center-home/view/asset-map'} component={Map} exact />
<Route path={'/center-home/view/asset-manage'} component={AssetManage} exact />
<Route path={'/center-home/view/asset-browse'} component={AssetBrowse} exact />
<Route path={'/center-home/view/asset-recycle'} component={AssetRecycle} exact />
<Route path={'/center-home/view/asset-recycle'} component={AssetRecycle} exact />
</Switch>
</Router>
</React.Fragment>
......
src/model/map.js
......@@ -16,3 +16,7 @@ export function* getTreeTotalLevel(payload) {
export function* queryAllDirectoryAsTreeByDirLevel(payload) {
return yield call(service.queryAllDirectoryAsTreeByDirLevel, payload);
}
export function* getTableModelInfoByDirIdAndBeginIndex(payload) {
return yield call(service.getTableModelInfoByDirIdAndBeginIndex, payload);
}
src/service/map.js
......@@ -15,3 +15,7 @@ export function getTreeTotalLevel(payload) {
export function queryAllDirectoryAsTreeByDirLevel(payload) {
return GetJSON("/dataassetmanager/countApi/queryAllDirectoryAsTreeByDirLevel", payload);
}
export function getTableModelInfoByDirIdAndBeginIndex(payload) {
return GetJSON("/dataassetmanager/countApi/getTableModelInfoByDirIdAndBeginIndex", payload);
}
src/view/Manage/Map/Component/Org.jsx
import React from 'react';
import G6 from '@antv/g6';
// import { ContextPath } from '../../../../util';
let graph = null;
const globalFontSize = 20;
......@@ -32,7 +30,7 @@ const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
class Org extends React.Component {
componentDidMount() {
const { type, loadMoreData } = this.props;
const { type, loadSubLeafData, loadMoreLeafData, onAssetClick } = this.props;
const container = document.getElementById(`container${type||''}`);
if (!container) return;
......@@ -68,7 +66,7 @@ class Org extends React.Component {
const bbox = text.getBBox();
if (cfg.dbType==='Root' || cfg.dbType==='Dir') {
if (cfg.dbType==='Dir') {
if (!cfg.children) {
group.addShape('marker', {
attrs: {
......@@ -99,7 +97,7 @@ class Org extends React.Component {
rect.attr({
x: bbox.minX - 10,
y: bbox.minY - 10,
width: bbox.width + ((cfg.dbType==='Root'||cfg.dbType==='Dir')&&(!cfg.children||((cfg.children||[]).length>0)) ? 38 : 20),
width: bbox.width + (cfg.dbType==='Dir'&&(!cfg.children||((cfg.children||[]).length>0)) ? 38 : 20),
height: bbox.height + 20,
});
......@@ -258,13 +256,21 @@ class Org extends React.Component {
const model = node.getModel();
if (model.dbType==='Root' || model.dbType==='Dir') {
if (model.dbType==='Dir') {
const children = model.children;
if (!children && loadMoreData) {
loadMoreData(model.dirId||'', nodeId);
if (!children && loadSubLeafData) {
loadSubLeafData(model.dirId||'', nodeId);
}
} else if (model.dbType === 'Table') {
onAssetClick && onAssetClick(model.tid);
} else if (model.dbType === 'More') {
loadMoreLeafData && loadMoreLeafData(model.pDirId, model.pid, model.index);
}
});
......@@ -297,7 +303,9 @@ class Org extends React.Component {
if (!parentData.children) {
parentData.children = [];
}
parentData.children = childData;
parentData.children = parentData.children.filter(item => item.dbType!=='More');
parentData.children = [...parentData.children, ...childData];
graph.changeData();
graph.updateItem(graph.findById(parentNodeId), {
......
src/view/Manage/Map/Component/Relation.jsx
......@@ -29,13 +29,15 @@ class Relation extends React.Component {
}
componentDidUpdate(prevProps, _prevState) {
const { childData, parentNodeId, data } = this.props;
const { childData, parentNodeId } = this.props;
if (parentNodeId && parentNodeId !== prevProps.parentNodeId) {
const parentData = this.graph?.findDataById(parentNodeId);
if (!parentData.children) {
parentData.children = [];
}
parentData.children = childData;
parentData.children = parentData.children.filter(item => item.dbType!=='More');
parentData.children = [...parentData.children, ...childData];
this.graph?.changeData();
this.graph?.fitView();
} else if (this.props.data) {
......@@ -63,7 +65,7 @@ class Relation extends React.Component {
export default Relation;
let root = null, depthCount = {}
let depthCount = {}
function countDepth(node, _depth = 0) {
// node.text = "测试123567890"
......@@ -173,31 +175,30 @@ const init = (ctx) => function (container, data) {
focusNodes.forEach((fnode) => {
graph.setItemState(fnode, 'focus', false); // false
});
const { item, target } = evt;
const { item } = evt;
graph.setItemState(item, 'focus', true);
graph.setItemState(item, 'hover', false);
const targetType = target.get('type');
const name = target.get('name');
if (targetType === 'marker') { // 响应展开按钮
const model = item.getModel();
if (name === 'add-item') {
const nodeId = item.get('id');
if (model.dbType === 'Dir') {
const children = model.children;
if (!children) {
ctx.props?.loadMoreData(model.dirId || '', nodeId);
}
} else if (model.dbType !== 'Root') {
//通过资产id跳转到资产详情页
// history && history.push(`${ContextPath}/home`);
}
const model = item.getModel();
const nodeId = item.get('id');
if (model.dbType==='Dir') {
const children = model.children;
if (!children) {
ctx.props?.loadSubLeafData(model.dirId||'', nodeId);
}
} else { // 展示 node 详情
} else if (model.dbType === 'Table') {
ctx.props?.onAssetClick(model.tid);
} else if (model.dbType === 'More') {
ctx.props?.loadMoreLeafData(model.pDirId, model.pid, model.index);
}
});
if (typeof window !== 'undefined')
......@@ -224,9 +225,9 @@ G6.registerNode(
width1 = r * 2.5
width2 = r * 4
if (cfg.depth === 0) {
root = cfg
}
// if (cfg.depth === 0) {
// root = cfg
// }
// if (depthCount[cfg.depth] > 10) {
group.addShape('image', {
......@@ -304,7 +305,7 @@ G6.registerNode(
}
const bbox = keyShape.getBBox()
if (cfg.dbType === 'Root' || cfg.dbType === 'Dir') {
if (cfg.dbType === 'Dir') {
if (!cfg.children) {
const marker = group.addShape('marker', {
attrs: {
......@@ -399,7 +400,7 @@ G6.registerNode(
'aggregated-node',
); // 这样可以继承 aggregated-node 的 setState
const lineDash = [4, 2, 1, 2];
// const lineDash = [4, 2, 1, 2];
G6.registerEdge(
'custom-line',
{
......@@ -546,19 +547,19 @@ const formatText = (text, length = 5, elipsis = '...') => {
}
return text;
};
function textXY(root, cfg) {
const txtWidth = cfg.label.length > 5 ? 24 : cfg.label.length * 4
const { x, y } = cfg
const _y = y - root.y, _x = x - root.x
const angle = Math.atan2(_y, _x)
const sinAngle = Math.sin(angle), cosAngle = Math.cos(angle)
const radX = 4 + txtWidth
const radY = Math.abs(Math.pow(sinAngle, Math.abs(Math.round(sinAngle * 50)))) * 10 //Math.pow(Math.E, 80 * Math.log(Math.abs(sinAngle))) * 40
return [
// 右侧文字(中间向右侧15px,上下部向左靠20px) : 左侧
radX * cosAngle,
radY * sinAngle + (sinAngle > 0 ? sinAngle * 20 : sinAngle * 10)
];
}
// function textXY(root, cfg) {
// const txtWidth = cfg.label.length > 5 ? 24 : cfg.label.length * 4
// const { x, y } = cfg
// const _y = y - root.y, _x = x - root.x
// const angle = Math.atan2(_y, _x)
// const sinAngle = Math.sin(angle), cosAngle = Math.cos(angle)
// const radX = 4 + txtWidth
// const radY = Math.abs(Math.pow(sinAngle, Math.abs(Math.round(sinAngle * 50)))) * 10 //Math.pow(Math.E, 80 * Math.log(Math.abs(sinAngle))) * 40
// return [
// // 右侧文字(中间向右侧15px,上下部向左靠20px) : 左侧
// radX * cosAngle,
// radY * sinAngle + (sinAngle > 0 ? sinAngle * 20 : sinAngle * 10)
// ];
// }
src/view/Manage/Map/Component/Tree.jsx
import React from 'react';
import G6 from '@antv/g6';
// import { ContextPath } from '../../../../util';
let graph = null;
const globalFontSize = 20;
const maxTextWidth = 160;
......@@ -31,7 +29,7 @@ const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
class Tree extends React.Component {
componentDidMount() {
const { type, loadMoreData } = this.props;
const { type, loadSubLeafData, loadMoreLeafData, onAssetClick } = this.props;
const container = document.getElementById(`container${type||''}`);
if (!container) return;
......@@ -68,7 +66,7 @@ class Tree extends React.Component {
const bbox = text.getBBox();
if (cfg.dbType==='Root' || cfg.dbType==='Dir') {
if (cfg.dbType==='Dir') {
if (!cfg.children) {
group.addShape('marker', {
attrs: {
......@@ -97,7 +95,7 @@ class Tree extends React.Component {
rect.attr({
x: bbox.minX - 10,
y: bbox.minY - 10,
width: bbox.width + ((cfg.dbType==='Root'||cfg.dbType==='Dir')&&(!cfg.children||((cfg.children||[]).length>0)) ? 38 : 20),
width: bbox.width + (cfg.dbType==='Dir'&&(!cfg.children||((cfg.children||[]).length>0)) ? 38 : 20),
height: bbox.height + 20,
});
......@@ -217,13 +215,20 @@ class Tree extends React.Component {
const model = node.getModel();
if (model.dbType==='Dir') {
const children = model.children;
if (!children && loadMoreData) {
loadMoreData(model.dirId||'', nodeId);
if (!children && loadSubLeafData) {
loadSubLeafData(model.dirId||'', nodeId);
}
} else if (model.dbType !== 'Root') {
//通过资产id跳转到资产详情页
// history && history.push(`${ContextPath}/home`);
} else if (model.dbType === 'Table') {
onAssetClick && onAssetClick(model.tid);
} else if (model.dbType === 'More') {
loadMoreLeafData && loadMoreLeafData(model.pDirId, model.pid, model.index);
}
});
......@@ -256,7 +261,9 @@ class Tree extends React.Component {
if (!parentData.children) {
parentData.children = [];
}
parentData.children = childData;
parentData.children = parentData.children.filter(item => item.dbType!=='More');
parentData.children = [...parentData.children, ...childData];
graph.changeData();
graph.updateItem(graph.findById(parentNodeId), {
......
src/view/Manage/Map/MapContent.jsx
......@@ -8,7 +8,8 @@ import Tree from './Component/Tree';
import Relation from './Component/Relation';
import { dispatch, dispatchLatest } from '../../../model';
const column = 4;
// const column = 4;
const defaultLoadCount = 10;
class MapContent extends React.Component {
......@@ -64,11 +65,22 @@ class MapContent extends React.Component {
dispatchLatest({
type: 'map.queryAllDirectoryAsTreeByDirLevel',
payload: { dirId: topic.id, dirLevel: level },
payload: {
dirId: topic.id,
dirLevel: level,
topNum: defaultLoadCount
},
callback: data => {
this.convertRemoteData(data);
const _treeData = this.convertTreeModelData(data || []);
const _treeData = {
text: topic.name || '',
dirId: topic.id,
id: `d${topic.id}`,
dbType: 'dir',
children: (data||[]).length===0 ? null : data
};
this.convertRemoteData(_treeData.children||[], _treeData.id, _treeData.dirId);
this.setState({
curTableModelData: data || [],
......@@ -82,38 +94,33 @@ class MapContent extends React.Component {
})
}
convertRemoteData = (data, parentDirId = '') => {
convertRemoteData = (data, pid, pDirId, start=0) => {
data.forEach((item, index) => {
item.pid = pid||'';
item.pDirId = pDirId||'';
item.index = (index+start);
if (item.dbType === 'Dir') {
item.text = item.dirName || '';
item.id = `d${parentDirId}${item.dirId || ''}${index}`;
} else {
item.id = `d${pDirId}${item.dirId || ''}${index}`;
} else if (item.dbType === 'Table') {
item.text = item.cnName || '';
item.id = `t${parentDirId}${item.id || ''}${index}`;
item.tid = item.id||'';
item.id = `t${pDirId}${item.id || ''}${index}`;
}
if (index === 10) {
if (index === defaultLoadCount) {
item.text = '点击加载更多';
item.dbType = 'More';
}
if (item.children) {
this.convertRemoteData(item.children, item.dirId || '');
this.convertRemoteData(item.children, item.id, item.dirId);
}
})
}
convertTreeModelData = (data) => {
const { topic } = this.props;
return {
text: topic.name || '',
dirId: topic.id,
id: `t${topic.id}`,
dbType: 'Root',
children: (data||[]).length===0 ? null : data
};
}
setSquareGraphState = (item) => {
const { breadcrumbContents } = this.state;
......@@ -150,19 +157,43 @@ class MapContent extends React.Component {
})
}
loadMoreData = (dirId, nodeId) => {
dispatchLatest({
type: 'map.getTableModelByDirIid',
payload: { dirId },
callback: data => {
this.convertRemoteData(data || [], dirId);
this.setState({
parentNodeId: nodeId,
orgChildData: JSON.parse(JSON.stringify(data || [])),
treeChildData: JSON.parse(JSON.stringify(data || [])),
relationChildData: JSON.parse(JSON.stringify(data)),
});
}
loadSubLeafData = (dirId, nodeId) => {
this.setState({ parentNodeId: '' }, () => {
dispatchLatest({
type: 'map.getTableModelByDirIid',
payload: { dirId },
callback: data => {
this.convertRemoteData(data||[], nodeId, dirId);
this.setState({
parentNodeId: nodeId,
orgChildData: JSON.parse(JSON.stringify(data || [])),
treeChildData: JSON.parse(JSON.stringify(data || [])),
relationChildData: JSON.parse(JSON.stringify(data)),
});
}
})
})
}
loadMoreLeafData = (dirId, nodeId, start) => {
this.setState({ parentNodeId: '' }, () => {
dispatchLatest({
type: 'map.getTableModelInfoByDirIdAndBeginIndex',
payload: {
dirId,
beginIndex: Number(start)+1,
topNum: defaultLoadCount
},
callback: data => {
this.convertRemoteData(data||[], nodeId, dirId, start);
this.setState({
parentNodeId: nodeId,
orgChildData: JSON.parse(JSON.stringify(data || [])),
treeChildData: JSON.parse(JSON.stringify(data || [])),
relationChildData: JSON.parse(JSON.stringify(data)),
});
}
})
})
}
......@@ -172,6 +203,10 @@ class MapContent extends React.Component {
});
}
onAssetClick = (id) => {
}
render() {
const { type, topic, switchMode } = this.props;
const { curTableModelData, breadcrumbContents, orgModelData, treeModelData, relationModelData, orgChildData, treeChildData, relationChildData, parentNodeId, currentLevel, totalLevel } = this.state;
......@@ -230,7 +265,9 @@ class MapContent extends React.Component {
parentNodeId={parentNodeId}
childData={orgChildData}
type={`${topic.id || ''}${type}`}
loadMoreData={this.loadMoreData}
loadMoreLeafData={this.loadMoreLeafData}
loadSubLeafData={this.loadSubLeafData}
onAssetClick={this.onAssetClick}
/>
}
{
......@@ -239,7 +276,10 @@ class MapContent extends React.Component {
parentNodeId={parentNodeId}
childData={treeChildData}
type={`${topic.id || ''}${type}`}
loadMoreData={this.loadMoreData} />
loadMoreLeafData={this.loadMoreLeafData}
loadSubLeafData={this.loadSubLeafData}
onAssetClick={this.onAssetClick}
/>
}
{
type === 'relation' && <Relation
......@@ -247,7 +287,10 @@ class MapContent extends React.Component {
parentNodeId={parentNodeId}
childData={relationChildData}
type={`${topic.id || ''}${type}`}
loadMoreData={this.loadMoreData} />
loadMoreLeafData={this.loadMoreLeafData}
loadSubLeafData={this.loadSubLeafData}
onAssetClick={this.onAssetClick}
/>
}
<div
className='position-absolute text-right p-3'
......
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