Skip to content

S
szse
Commit 12bc56c5 by zhaochengxiang
Options

Merge branch 'dev-2106' into 'master' 

Dev 2106

See merge request !1
parents d8648343 5ce9dced
Showing with 176 additions and 152 deletions
src/view/Manage/Map/Component/Relation.jsx
...@@ -196,6 +196,8 @@ G6.registerNode( ...@@ -196,6 +196,8 @@ G6.registerNode(
visible: false, visible: false,
}); });
} }
width1 = r * 2.5
width2 = r * 4
if (depthCount[cfg.depth] > 10) { if (depthCount[cfg.depth] > 10) {
group.addShape('image', { group.addShape('image', {
......
src/view/Manage/Map/MapContent.jsx
import React from 'react'; import React from 'react';
import { Row, Col, Breadcrumb, Slider } from 'antd'; import { Row, Col, Breadcrumb, Slider, Select, Typography } from 'antd';
import { HomeOutlined } from '@ant-design/icons'; import { HomeOutlined } from '@ant-design/icons';
import SquareItem from './Component/SquareItem'; import SquareItem from './Component/SquareItem';
...@@ -33,7 +33,7 @@ class MapContent extends React.Component { ...@@ -33,7 +33,7 @@ class MapContent extends React.Component {
this.getTreeTotalLevelThenQueryAllDirectoryAsTreeByDirLevel(); this.getTreeTotalLevelThenQueryAllDirectoryAsTreeByDirLevel();
} }
componentDidUpdate(prevProps, prevState){ componentDidUpdate(prevProps, prevState) {
const { type } = this.props; const { type } = this.props;
if (type !== prevProps.type) { if (type !== prevProps.type) {
...@@ -50,10 +50,10 @@ class MapContent extends React.Component { ...@@ -50,10 +50,10 @@ class MapContent extends React.Component {
callback: data => { callback: data => {
const _totalLevel = Number(data); const _totalLevel = Number(data);
const _currentLevel = (_totalLevel<3?_totalLevel:3); const _currentLevel = (_totalLevel < 3 ? _totalLevel : 3);
this.setState({ totalLevel: _totalLevel, currentLevel: _currentLevel }, () => { this.setState({ totalLevel: _totalLevel, currentLevel: _currentLevel }, () => {
this.queryAllDirectoryAsTreeByDirLevel(_currentLevel-1); this.queryAllDirectoryAsTreeByDirLevel(_currentLevel - 1);
}); });
} }
}) })
...@@ -68,11 +68,11 @@ class MapContent extends React.Component { ...@@ -68,11 +68,11 @@ class MapContent extends React.Component {
callback: data => { callback: data => {
this.convertRemoteData(data); this.convertRemoteData(data);
const _treeData = this.convertTreeModelData(data||[]); const _treeData = this.convertTreeModelData(data || []);
this.setState({ this.setState({
curTableModelData: data||[], curTableModelData: data || [],
breadcrumbContents: [{ data: data||[] }], breadcrumbContents: [{ data: data || [] }],
//深拷贝 //深拷贝
orgModelData: JSON.parse(JSON.stringify(_treeData)), orgModelData: JSON.parse(JSON.stringify(_treeData)),
treeModelData: JSON.parse(JSON.stringify(_treeData)), treeModelData: JSON.parse(JSON.stringify(_treeData)),
...@@ -82,26 +82,26 @@ class MapContent extends React.Component { ...@@ -82,26 +82,26 @@ class MapContent extends React.Component {
}) })
} }
convertRemoteData = (data, parentDirId='') => { convertRemoteData = (data, parentDirId = '') => {
data.forEach((item, index) => { data.forEach((item, index) => {
if (item.dbType==='Dir') { if (item.dbType === 'Dir') {
item.text = item.dirName||''; item.text = item.dirName || '';
item.id = `d${parentDirId}${item.dirId||''}${index}`; item.id = `d${parentDirId}${item.dirId || ''}${index}`;
} else { } else {
let assetCnName = ''; let assetCnName = '';
(item.elements||[]).forEach(element => { (item.elements || []).forEach(element => {
if (element.name === '中文名称') { if (element.name === '中文名称') {
assetCnName = element.value; assetCnName = element.value;
} }
}) })
item.text = assetCnName||''; item.text = assetCnName || '';
item.id = `t${parentDirId}${item.id||''}${index}`; item.id = `t${parentDirId}${item.id || ''}${index}`;
} }
if (item.children) { if (item.children) {
this.convertRemoteData(item.children, item.dirId||''); this.convertRemoteData(item.children, item.dirId || '');
} }
}) })
} }
...@@ -110,7 +110,7 @@ class MapContent extends React.Component { ...@@ -110,7 +110,7 @@ class MapContent extends React.Component {
const { topic } = this.props; const { topic } = this.props;
return { return {
text: topic.name||'', text: topic.name || '',
id: `t${topic.id}`, id: `t${topic.id}`,
dbType: 'Root', dbType: 'Root',
children: data children: data
...@@ -121,8 +121,8 @@ class MapContent extends React.Component { ...@@ -121,8 +121,8 @@ class MapContent extends React.Component {
const { breadcrumbContents } = this.state; const { breadcrumbContents } = this.state;
this.setState({ this.setState({
breadcrumbContents: [...breadcrumbContents, { name: item.dirName||'', data: item.children||[] }], breadcrumbContents: [...breadcrumbContents, { name: item.dirName || '', data: item.children || [] }],
curTableModelData: item.children||[], curTableModelData: item.children || [],
}); });
} }
...@@ -133,8 +133,8 @@ class MapContent extends React.Component { ...@@ -133,8 +133,8 @@ class MapContent extends React.Component {
payload: { dirId: item.dirId }, payload: { dirId: item.dirId },
callback: data => { callback: data => {
this.convertRemoteData(data||[], item.dirId); this.convertRemoteData(data || [], item.dirId);
item.children = (data||[]); item.children = (data || []);
this.setSquareGraphState(item); this.setSquareGraphState(item);
} }
}) })
...@@ -148,8 +148,8 @@ class MapContent extends React.Component { ...@@ -148,8 +148,8 @@ class MapContent extends React.Component {
const { breadcrumbContents } = this.state; const { breadcrumbContents } = this.state;
this.setState({ this.setState({
breadcrumbContents: breadcrumbContents.splice(0, index===0?1:(index+1)), breadcrumbContents: breadcrumbContents.splice(0, index === 0 ? 1 : (index + 1)),
curTableModelData: content.data||[], curTableModelData: content.data || [],
}) })
} }
...@@ -158,11 +158,11 @@ class MapContent extends React.Component { ...@@ -158,11 +158,11 @@ class MapContent extends React.Component {
type: 'map.getTableModelByDirIid', type: 'map.getTableModelByDirIid',
payload: { dirId }, payload: { dirId },
callback: data => { callback: data => {
this.convertRemoteData(data||[], dirId); this.convertRemoteData(data || [], dirId);
this.setState({ this.setState({
parentNodeId: nodeId, parentNodeId: nodeId,
orgChildData: JSON.parse(JSON.stringify(data||[])), orgChildData: JSON.parse(JSON.stringify(data || [])),
treeChildData: JSON.parse(JSON.stringify(data||[])), treeChildData: JSON.parse(JSON.stringify(data || [])),
relationChildData: JSON.parse(JSON.stringify(data)), relationChildData: JSON.parse(JSON.stringify(data)),
}); });
} }
...@@ -171,105 +171,124 @@ class MapContent extends React.Component { ...@@ -171,105 +171,124 @@ class MapContent extends React.Component {
onLevelChange = (value) => { onLevelChange = (value) => {
this.setState({ currentLevel: value }, () => { this.setState({ currentLevel: value }, () => {
this.queryAllDirectoryAsTreeByDirLevel(value-1); this.queryAllDirectoryAsTreeByDirLevel(value - 1);
}); });
} }
render() { render() {
const { type, topic } = this.props; const { type, topic, switchMode } = this.props;
const { curTableModelData, breadcrumbContents, orgModelData , treeModelData, relationModelData, orgChildData, treeChildData, relationChildData, parentNodeId, currentLevel, totalLevel } = this.state; const { curTableModelData, breadcrumbContents, orgModelData, treeModelData, relationModelData, orgChildData, treeChildData, relationChildData, parentNodeId, currentLevel, totalLevel } = this.state;
let groups = []; let groups = [];
if (curTableModelData) { if (curTableModelData) {
for(var i=0;i<curTableModelData.length;i+=column){ for (var i = 0; i < curTableModelData.length; i += column) {
groups.push(curTableModelData.slice(i,i+column)); groups.push(curTableModelData.slice(i, i + column));
} }
} }
return ( if (type === 'square') {
<div className='position-relative' style={{ height: '100%' }}> return (
{ <div className='position-relative p-3' style={{ height: '100%' }}>
type==='square' && <>
{
breadcrumbContents && breadcrumbContents.length>1 && <Breadcrumb className='mb-3'>
{
breadcrumbContents.map((content, index) => {
return (
<Breadcrumb.Item key={index}>
{
index===0 ? <HomeOutlined onClick={() => { this.onBreadcrumbItemClick(content, index); }} /> : ((index===breadcrumbContents.length-1) ? <span>{content.name||''}</span> : <span className='pointer' onClick={() => { this.onBreadcrumbItemClick(content, index); }}>
{content.name||''}
</span>)
}
</Breadcrumb.Item>
)
})
}
</Breadcrumb>
}
{ {
groups && groups.map((group, index) => { type === 'square' && <>
return ( <div className="text-right mb-3">{switchMode}</div>
<div key={index}> {
<Row gutter={10} className={index===0?'':'mt-3'}> breadcrumbContents && breadcrumbContents.length > 1 && <Breadcrumb className='mb-3'>
{ {
group && group.map((item, _index) => { breadcrumbContents.map((content, index) => {
return ( return (
<Col key={_index} span={24/column}> <Breadcrumb.Item key={index}>
<SquareItem item={item} index={(index*column+_index)} onClick={this.onSquareItemClick} {...this.props} /> {
</Col> index === 0 ? <HomeOutlined onClick={() => { this.onBreadcrumbItemClick(content, index); }} /> : ((index === breadcrumbContents.length - 1) ? <span>{content.name || ''}</span> : <span className='pointer' onClick={() => { this.onBreadcrumbItemClick(content, index); }}>
{content.name || ''}
</span>)
}
</Breadcrumb.Item>
) )
}) })
} }
</Row> </Breadcrumb>
{ (index===groups.length-1) && <div style={{ height: 10 }} /> } }
</div> {
) groups && groups.map((group, index) => {
}) return (
<div key={index}>
<Row gutter={10} className={index === 0 ? '' : 'mt-3'}>
{
group && group.map((item, _index) => {
return (
<Col key={_index} span={24 / column}>
<SquareItem item={item} index={(index * column + _index)} onClick={this.onSquareItemClick} {...this.props} />
</Col>
)
})
}
</Row>
{ (index === groups.length - 1) && <div style={{ height: 10 }} />}
</div>
)
})
}
</>
} }
</>
} </div>
{ );
type==='org' && <Org } else {
data={orgModelData} return (
parentNodeId={parentNodeId} <div className='position-relative' style={{ height: '100%', overflow: 'hidden', backgroundImage: 'linear-gradient(to bottom left,#2e3b4e,#0d0d13 52%,#0d0d13)' }}>
childData={orgChildData} {
type={`${topic.id||''}${type}`} type === 'org' && <Org
loadMoreData={this.loadMoreData} data={orgModelData}
/> parentNodeId={parentNodeId}
} childData={orgChildData}
{ type={`${topic.id || ''}${type}`}
type==='tree' && <Tree loadMoreData={this.loadMoreData}
data={treeModelData} />
parentNodeId={parentNodeId} }
childData={treeChildData} {
type={`${topic.id||''}${type}`} type === 'tree' && <Tree
loadMoreData={this.loadMoreData} /> data={treeModelData}
} parentNodeId={parentNodeId}
{ childData={treeChildData}
type==='relation' && <Relation type={`${topic.id || ''}${type}`}
data={relationModelData} loadMoreData={this.loadMoreData} />
parentNodeId={parentNodeId} }
childData={relationChildData} {
type={`${topic.id||''}${type}`} type === 'relation' && <Relation
loadMoreData={this.loadMoreData} /> data={relationModelData}
} parentNodeId={parentNodeId}
{ childData={relationChildData}
type!=='square' && <div type={`${topic.id || ''}${type}`}
className='position-absolute' loadMoreData={this.loadMoreData} />
style={{ }
display: 'inline-block', <div
height: 60, className='position-absolute text-right p-3'
right: 15, style={{
top: 15 display: 'block',
right: 0,
top: 0
}} }}
> >
<span>层数</span> {switchMode}
<Slider vertical min={1} max={totalLevel} value={currentLevel} onChange={this.onLevelChange} /> <div className="mt-3">
<Typography.Text className="mr-2" style={{ color: '#fff' }}>层数</Typography.Text>
{/* <Slider vertical min={1} max={totalLevel} value={currentLevel} onChange={this.onLevelChange} /> */}
<Select value={currentLevel} onChange={this.onLevelChange} size="small">
{Array.from(new Array(totalLevel)).map((_, i) => <Select.Option key={i} value={i}>{i}</Select.Option>)}
</Select>
</div>
</div> </div>
}
</div>
); <div id="left-control-container"></div>
<div id="right-control-container"></div>
<div id="bottom-bg-container"></div>
</div>
)
}
} }
} }
......
src/view/Manage/Map/index.jsx
...@@ -30,8 +30,8 @@ const graphModes = [ ...@@ -30,8 +30,8 @@ const graphModes = [
class Map extends React.Component { class Map extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
type: 'square', type: 'square',
tabKey: '', tabKey: '',
loadingTopics: false, loadingTopics: false,
topics: null topics: null
...@@ -46,9 +46,9 @@ class Map extends React.Component { ...@@ -46,9 +46,9 @@ class Map extends React.Component {
payload: null, payload: null,
callback: data => { callback: data => {
this.setState({ this.setState({
loadingTopics: false, loadingTopics: false,
topics: data||[], topics: data || [],
tabKey: (data||[]).length>0?data[0].id:'', tabKey: (data || []).length > 0 ? data[0].id : '',
}); });
}, },
error: () => { error: () => {
...@@ -68,51 +68,53 @@ class Map extends React.Component { ...@@ -68,51 +68,53 @@ class Map extends React.Component {
render() { render() {
const { type, tabKey, topics, loadingTopics } = this.state; const { type, tabKey, topics, loadingTopics } = this.state;
const switchMode = <div className=''>
<Radio.Group
value={type}
onChange={this.onTypeChange} size="small"
>
{
graphModes && graphModes.map((mode, index) => {
return (
<Tooltip key={index} title={mode.title || ''} >
<Radio.Button value={mode.key}>{(mode.title || '').substring(0, 1)}</Radio.Button>
</Tooltip>
);
})
}
</Radio.Group>
</div>
return ( return (
<div className='asset-map' style={{ backgroundColor: '#fff' }}> <div className='asset-map' style={{ backgroundColor: '#fff' }}>
{
loadingTopics ? <Spin /> : <>
{ {
topics && topics.length>0 && <Tabs loadingTopics ? <Spin /> : <>
activeKey={tabKey} {
size='large' topics && topics.length > 0 && <Tabs
centered activeKey={tabKey}
onChange={this.onTabChange} size='large'
> centered
{ onChange={this.onTabChange}
topics && topics.map((topic) => { >
return ( {
<TabPane tab={topic.name||''} key={topic.id||''}> topics && topics.map((topic) => {
<div className='d-flex px-3' style={{ height: 53, alignItems: 'center' }}> return (
<Radio.Group <TabPane tab={topic.name || ''} key={topic.id || ''}>
value={type} {
onChange={this.onTypeChange} tabKey === topic.id && <div className='map-container' >
style={{ marginLeft: 'auto' }} <MapContent type={type} topic={topic} switchMode={switchMode} {...this.props} />
> </div>
{ }
graphModes && graphModes.map((mode, index) => { </TabPane>
return ( );
<Tooltip key={index} title={mode.title||''} > })
<Radio.Button value={mode.key}>{(mode.title||'').substring(0, 1)}</Radio.Button> }
</Tooltip> </Tabs>
); }
}) </>
}
</Radio.Group>
</div>
{
tabKey===topic.id && <div className='map-container' style={{ padding: '0 10px' }}>
<MapContent type={type} topic={topic} {...this.props} />
</div>
}
</TabPane>
);
})
}
</Tabs>
} }
</>
}
</div> </div>
); );
} }
......
src/view/Manage/Map/index.less
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
} }
.map-container { .map-container {
height: calc(100vh - 64px - 30px - 57px - 53px) !important; height: calc(100vh - 64px - 30px - 57px/* - 53px */) !important;
overflow: auto !important; overflow: auto !important;
} }
} }
\ No newline at end of file
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