Skip to content

S
szse
Commit a06a1b59 by zhaochengxiang
Options

数据地图刷新问题

parent c9863677
Showing with 198 additions and 136 deletions
src/view/Manage/Map/Component/Org.jsx
......@@ -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();
graph.on('node:click', function (e) {
const node = e.item;
const nodeId = node.get('id');
const model = node.getModel();
if (model.dbType==='Dir') {
const children = model.children;
if (!children && loadMoreData) {
loadMoreData(model.dirId||'');
loadMoreData(model.dirId||'', nodeId);
}
} else {
//通过资产id跳转到资产详情页
......@@ -252,49 +282,36 @@ 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||'', maxTextWidth, globalFontSize),
};
});
graph.data(data);
graph.render();
graph.fitView();
}
}
componentDidUpdate(prevProps, prevState){
componentDidUpdate(prevProps, prevState) {
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() {
const { type } = this.props;
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 {
x: 0,
y: 0,
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 {
},
});
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();
graph.on('node:click', function (e) {
const node = e.item;
const nodeId = node.get('id');
const model = node.getModel();
if (model.dbType==='Dir') {
const children = model.children;
if (!children && loadMoreData) {
loadMoreData(model.dirId||'');
loadMoreData(model.dirId||'', nodeId);
}
} else {
//通过资产id跳转到资产详情页
......@@ -228,56 +257,22 @@ class Relation 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;
};
function recursionTreeData(treeData, depth, cluster = '') {
function recursionTreeData(treeData, depth) {
if ((treeData||[]).length === 0) return;
(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.cluster = _cluster;
recursionTreeData(item.children||[], depth+1, _cluster);
item.depth = depth;
recursionTreeData(item.children||[], depth+1);
})
}
data.size = 100;
data.cluster = 0;
data.depth = 0;
recursionTreeData(data.children||[], 1);
graph.node(function (node) {
return {
label: fittingString(node.text||'', node.size-32, globalFontSize),
};
});
graph.data(data);
graph.render();
graph.fitView();
......@@ -286,8 +281,32 @@ class Relation extends React.Component {
}
componentDidUpdate(prevProps, prevState){
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() {
const { type } = this.props;
......
src/view/Manage/Map/Component/Tree.jsx
......@@ -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();
graph.on('node:click', function (e) {
const node = e.item;
const nodeId = node.get('id');
const model = node.getModel();
if (model.dbType==='Dir') {
const children = model.children;
if (!children && loadMoreData) {
loadMoreData(model.dirId||'');
loadMoreData(model.dirId||'', nodeId);
}
} else {
//通过资产id跳转到资产详情页
......@@ -213,35 +243,6 @@ 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),
};
});
graph.data(data);
graph.render();
graph.fitView();
......@@ -249,8 +250,24 @@ class Tree extends React.Component {
}
componentDidUpdate(prevProps, prevState){
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() {
const { type } = this.props;
......
src/view/Manage/Map/MapContent.jsx
......@@ -19,8 +19,12 @@ class MapContent extends React.Component {
tableModelData: null,
curTableModelData: null,
orgModelData: null,
orgChildData: null,
treeModelData: null,
treeChildData: null,
relationModelData: null,
relationChildData: null,
parentNodeId: null,
breadcrumbContents: null
};
}
......@@ -41,7 +45,13 @@ class MapContent extends React.Component {
curTableModelData: 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: () => {
......@@ -69,6 +79,7 @@ class MapContent extends React.Component {
return {
text: topic.name||'',
id: `t${topic.id}`,
dbType: 'Dir',
children: data
};
}
......@@ -111,48 +122,27 @@ class MapContent extends React.Component {
})
}
loadMoreData = (id) => {
const { tableModelData } = this.state;
loadMoreData = (dirId, nodeId) => {
dispatchLatest({
type: 'map.getTableModelByDirIid',
payload: { dirId: id },
payload: { dirId },
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);
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))
parentNodeId: nodeId,
orgChildData: JSON.parse(JSON.stringify(data||[])),
treeChildData: JSON.parse(JSON.stringify(data||[])),
relationChildData: JSON.parse(JSON.stringify(data)),
});
}
})
}
render() {
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 = [];
if (curTableModelData) {
......@@ -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