Skip to content

S
szse
Commit a06a1b59 by zhaochengxiang
Options

数据地图刷新问题

parent c9863677
Showing with 203 additions and 141 deletions
src/view/Manage/Map/Component/Org.jsx
...@@ -219,16 +219,46 @@ class Org extends React.Component { ...@@ -219,16 +219,46 @@ class Org extends React.Component {
}, },
}); });
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),
};
});
this.layoutGraph(); this.layoutGraph();
graph.on('node:click', function (e) { graph.on('node:click', function (e) {
const node = e.item; const node = e.item;
const nodeId = node.get('id');
const model = node.getModel(); const model = node.getModel();
if (model.dbType==='Dir') { if (model.dbType==='Dir') {
const children = model.children; const children = model.children;
if (!children && loadMoreData) { if (!children && loadMoreData) {
loadMoreData(model.dirId||''); loadMoreData(model.dirId||'', nodeId);
} }
} else { } else {
//通过资产id跳转到资产详情页 //通过资产id跳转到资产详情页
...@@ -252,49 +282,36 @@ class Org extends React.Component { ...@@ -252,49 +282,36 @@ 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||'', maxTextWidth, globalFontSize),
};
});
graph.data(data); graph.data(data);
graph.render(); graph.render();
graph.fitView(); graph.fitView();
} }
} }
componentDidUpdate(prevProps, prevState){ componentDidUpdate(prevProps, prevState) {
this.layoutGraph(); const { childData, parentNodeId } = this.props;
if (parentNodeId && parentNodeId!== prevProps.parentNodeId) {
const parentData = graph.findDataById(parentNodeId);
if (!parentData.children) {
parentData.children = [];
}
parentData.children = childData;
graph.changeData();
graph.updateItem(graph.findById(parentNodeId), {
collapsed: false,
});
} else {
this.layoutGraph();
}
} }
render() { render() {
const { type } = this.props; const { type } = this.props;
return ( return (
<div id={`container${type||''}`} style={{ width: '100%', height: '100%' }}></div> <div id={`container${type||''}`} style={{ width: '100%', height: '100%' }} ></div>
); );
} }
} }
......
src/view/Manage/Map/Component/Relation.jsx
...@@ -60,7 +60,7 @@ class Relation extends React.Component { ...@@ -60,7 +60,7 @@ class Relation extends React.Component {
x: 0, x: 0,
y: 0, y: 0,
r: cfg.size/2, r: cfg.size/2,
fill: colors[cfg.cluster % colors.length], fill: colors[cfg.depth % colors.length],
}, },
}); });
...@@ -195,16 +195,45 @@ class Relation extends React.Component { ...@@ -195,16 +195,45 @@ class Relation extends React.Component {
}, },
}); });
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||'', node.size-32, globalFontSize),
};
});
this.layoutGraph(); this.layoutGraph();
graph.on('node:click', function (e) { graph.on('node:click', function (e) {
const node = e.item; const node = e.item;
const nodeId = node.get('id');
const model = node.getModel(); const model = node.getModel();
if (model.dbType==='Dir') { if (model.dbType==='Dir') {
const children = model.children; const children = model.children;
if (!children && loadMoreData) { if (!children && loadMoreData) {
loadMoreData(model.dirId||''); loadMoreData(model.dirId||'', nodeId);
} }
} else { } else {
//通过资产id跳转到资产详情页 //通过资产id跳转到资产详情页
...@@ -228,56 +257,22 @@ class Relation extends React.Component { ...@@ -228,56 +257,22 @@ class Relation extends React.Component {
const { data } = this.props; const { data } = this.props;
if(graph && data){ if(graph && data){
const fittingString = (str, maxWidth, fontSize) => {
const ellipsis = '...'; function recursionTreeData(treeData, depth) {
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;
};
function recursionTreeData(treeData, depth, cluster = '') {
if ((treeData||[]).length === 0) return; if ((treeData||[]).length === 0) return;
(treeData||[]).forEach((item, index) => { (treeData||[]).forEach((item, index) => {
let _cluster = 0;
if (depth === 1) {
_cluster = (index + 1);
} else {
_cluster = cluster;
}
item.size = (100-depth*20)>60?(100-depth*20):60; item.size = (100-depth*20)>60?(100-depth*20):60;
item.cluster = _cluster; item.depth = depth;
recursionTreeData(item.children||[], depth+1, _cluster); recursionTreeData(item.children||[], depth+1);
}) })
} }
data.size = 100; data.size = 100;
data.cluster = 0; data.depth = 0;
recursionTreeData(data.children||[], 1); recursionTreeData(data.children||[], 1);
graph.node(function (node) {
return {
label: fittingString(node.text||'', node.size-32, globalFontSize),
};
});
graph.data(data); graph.data(data);
graph.render(); graph.render();
graph.fitView(); graph.fitView();
...@@ -286,7 +281,31 @@ class Relation extends React.Component { ...@@ -286,7 +281,31 @@ class Relation extends React.Component {
} }
componentDidUpdate(prevProps, prevState){ componentDidUpdate(prevProps, prevState){
this.layoutGraph(); const { childData, parentNodeId } = this.props;
if (parentNodeId && parentNodeId!== prevProps.parentNodeId) {
const parentData = graph.findDataById(parentNodeId);
if (!parentData.children) {
parentData.children = [];
}
let depth = childData.depth+1;
(childData||[]).forEach((item, index) => {
item.size = (100-depth*20)>60?(100-depth*20):60;
item.depth = depth;
})
parentData.children = childData;
graph.changeData();
graph.updateItem(graph.findById(parentNodeId), {
collapsed: false,
});
} else {
this.layoutGraph();
}
} }
render() { render() {
......
src/view/Manage/Map/Component/Tree.jsx
...@@ -180,16 +180,46 @@ class Tree extends React.Component { ...@@ -180,16 +180,46 @@ class Tree extends React.Component {
}, },
}); });
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),
};
});
this.layoutGraph(); this.layoutGraph();
graph.on('node:click', function (e) { graph.on('node:click', function (e) {
const node = e.item; const node = e.item;
const nodeId = node.get('id');
const model = node.getModel(); const model = node.getModel();
if (model.dbType==='Dir') { if (model.dbType==='Dir') {
const children = model.children; const children = model.children;
if (!children && loadMoreData) { if (!children && loadMoreData) {
loadMoreData(model.dirId||''); loadMoreData(model.dirId||'', nodeId);
} }
} else { } else {
//通过资产id跳转到资产详情页 //通过资产id跳转到资产详情页
...@@ -213,35 +243,6 @@ class Tree extends React.Component { ...@@ -213,35 +243,6 @@ 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),
};
});
graph.data(data); graph.data(data);
graph.render(); graph.render();
graph.fitView(); graph.fitView();
...@@ -249,7 +250,23 @@ class Tree extends React.Component { ...@@ -249,7 +250,23 @@ class Tree extends React.Component {
} }
componentDidUpdate(prevProps, prevState){ componentDidUpdate(prevProps, prevState){
this.layoutGraph(); const { childData, parentNodeId } = this.props;
if (parentNodeId && parentNodeId!== prevProps.parentNodeId) {
const parentData = graph.findDataById(parentNodeId);
if (!parentData.children) {
parentData.children = [];
}
parentData.children = childData;
graph.changeData();
graph.updateItem(graph.findById(parentNodeId), {
collapsed: false,
});
} else {
this.layoutGraph();
}
} }
render() { render() {
......
src/view/Manage/Map/MapContent.jsx
...@@ -19,8 +19,12 @@ class MapContent extends React.Component { ...@@ -19,8 +19,12 @@ class MapContent extends React.Component {
tableModelData: null, tableModelData: null,
curTableModelData: null, curTableModelData: null,
orgModelData: null, orgModelData: null,
orgChildData: null,
treeModelData: null, treeModelData: null,
treeChildData: null,
relationModelData: null, relationModelData: null,
relationChildData: null,
parentNodeId: null,
breadcrumbContents: null breadcrumbContents: null
}; };
} }
...@@ -41,7 +45,13 @@ class MapContent extends React.Component { ...@@ -41,7 +45,13 @@ class MapContent extends React.Component {
curTableModelData: data||[], curTableModelData: data||[],
breadcrumbContents: [{ data: data||[] }] breadcrumbContents: [{ data: data||[] }]
}, () => { }, () => {
this.setAllTreeGraphState(data||[]); const _treeData = this.convertTreeModelData(data||[]);
this.setState({
//深拷贝
orgModelData: JSON.parse(JSON.stringify(_treeData)),
treeModelData: JSON.parse(JSON.stringify(_treeData)),
relationModelData: JSON.parse(JSON.stringify(_treeData))
});
}); });
}, },
error: () => { error: () => {
...@@ -69,6 +79,7 @@ class MapContent extends React.Component { ...@@ -69,6 +79,7 @@ class MapContent extends React.Component {
return { return {
text: topic.name||'', text: topic.name||'',
id: `t${topic.id}`, id: `t${topic.id}`,
dbType: 'Dir',
children: data children: data
}; };
} }
...@@ -111,48 +122,27 @@ class MapContent extends React.Component { ...@@ -111,48 +122,27 @@ class MapContent extends React.Component {
}) })
} }
loadMoreData = (id) => { loadMoreData = (dirId, nodeId) => {
const { tableModelData } = this.state;
dispatchLatest({ dispatchLatest({
type: 'map.getTableModelByDirIid', type: 'map.getTableModelByDirIid',
payload: { dirId: id }, payload: { dirId },
callback: data => { callback: data => {
this.convertRemoteData(data||[]); this.convertRemoteData(data||[]);
this.setState({
function recursionData(_data) { parentNodeId: nodeId,
if ((_data||[]).length === 0) orgChildData: JSON.parse(JSON.stringify(data||[])),
return; treeChildData: JSON.parse(JSON.stringify(data||[])),
relationChildData: JSON.parse(JSON.stringify(data)),
_data.forEach((item, index) => { });
if (item.dirId === id) {
item.children = data;
} else {
recursionData(item.children||[]);
}
})
}
recursionData(tableModelData);
this.setAllTreeGraphState(tableModelData);
} }
}) })
} }
setAllTreeGraphState = (tableModelData) => {
const _treeData = this.convertTreeModelData(tableModelData);
this.setState({
orgModelData: JSON.parse(JSON.stringify(_treeData)),
treeModelData: JSON.parse(JSON.stringify(_treeData)),
relationModelData: JSON.parse(JSON.stringify(_treeData))
});
}
render() { render() {
const { diagram, topic } = this.props; const { diagram, topic } = this.props;
const { curTableModelData, breadcrumbContents, orgModelData , treeModelData, relationModelData, loading } = this.state; const { curTableModelData, breadcrumbContents, orgModelData , treeModelData, relationModelData, loading, orgChildData, treeChildData, relationChildData, parentNodeId } = this.state;
let groups = []; let groups = [];
if (curTableModelData) { if (curTableModelData) {
...@@ -204,13 +194,32 @@ class MapContent extends React.Component { ...@@ -204,13 +194,32 @@ class MapContent extends React.Component {
</> </>
} }
{ {
diagram==='org' && <Org data={orgModelData} type={`${topic.id||''}${diagram}`} {...this.props} loadMoreData={this.loadMoreData} /> diagram==='org' && <Org
data={orgModelData}
parentNodeId={parentNodeId}
childData={orgChildData}
type={`${topic.id||''}${diagram}`}
{...this.props}
loadMoreData={this.loadMoreData}
/>
} }
{ {
diagram==='tree' && <Tree data={treeModelData} type={`${topic.id||''}${diagram}`} {...this.props} loadMoreData={this.loadMoreData} /> diagram==='tree' && <Tree
data={treeModelData}
parentNodeId={parentNodeId}
childData={treeChildData}
type={`${topic.id||''}${diagram}`}
{...this.props}
loadMoreData={this.loadMoreData} />
} }
{ {
diagram==='relation' && <Relation data={relationModelData} type={`${topic.id||''}${diagram}`} {...this.props} loadMoreData={this.loadMoreData} /> diagram==='relation' && <Relation
data={relationModelData}
parentNodeId={parentNodeId}
childData={relationChildData}
type={`${topic.id||''}${diagram}`}
{...this.props}
loadMoreData={this.loadMoreData} />
} }
</> </>
} }
......
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