Skip to content

S
szse
Commit 90accdb2 by zhaochengxiang
Options

数据地图增加接口

parent 9d285bda
Showing with 331 additions and 404 deletions
package.json
...@@ -49,6 +49,6 @@ ...@@ -49,6 +49,6 @@
"last 1 safari version" "last 1 safari version"
] ]
}, },
"proxy": "http://139.198.126.96:9011", "proxy": "http://139.198.127.28:18762",
"homepage": "http://myhost/data-govern" "homepage": "http://myhost/data-govern"
} }
src/model/index.js
...@@ -9,8 +9,9 @@ import { reducers } from './reducer'; ...@@ -9,8 +9,9 @@ import { reducers } from './reducer';
import * as user from './user'; import * as user from './user';
import * as assets from './assets'; import * as assets from './assets';
import * as metadata from './metadata'; import * as metadata from './metadata';
import * as map from './map';
const funcs = Connect({ user, assets, metadata }) const funcs = Connect({ user, assets, metadata, map })
function* request(args) { function* request(args) {
const { type, payload, callback, error } = args.args; const { type, payload, callback, error } = args.args;
......
src/model/map.js 0 → 100644
import * as service from '../service/map';
import { call } from 'redux-saga/effects';
export function* getAllTopics() {
return yield call(service.getAllTopics);
}
export function* getTableAndTreeModelByTid(payload) {
const tables = yield call(service.getTableModelByTid, payload);
const trees = yield call(service.getTreeModel);
return {tables: tables||[], trees: ((trees||[]).length>0)?trees[0]:{}};
}
src/service/map.js 0 → 100644
import { GetJSON } from "../util/axios"
export function getAllTopics() {
return GetJSON("/datacatalog/countCtrl/queryAllTopics");
}
export function getTableModelByTid(payload) {
return GetJSON("/datacatalog/countCtrl/getTableModelInfoByDirId", payload);
}
export function getTreeModel() {
return GetJSON("/datacatalog/countCtrl/queryAllDirAsTree");
}
\ No newline at end of file
src/view/Manage/Map/Component/Relation.jsx
...@@ -23,140 +23,143 @@ class Relation extends React.Component { ...@@ -23,140 +23,143 @@ class Relation extends React.Component {
componentDidMount() { componentDidMount() {
const { data, type, history } = this.props; const { data, type, history } = this.props;
const container = document.getElementById(`container${type||''}`); setTimeout(() => {
const width = container.scrollWidth; const container = document.getElementById(`container${type||''}`);
const height = container.scrollHeight || 500; const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const fittingString = (str, maxWidth, fontSize) => {
const ellipsis = '...'; const fittingString = (str, maxWidth, fontSize) => {
const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0]; const ellipsis = '...';
let currentWidth = 0; const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
let res = str; let currentWidth = 0;
const pattern = new RegExp('[\u4E00-\u9FA5]+'); // distinguish the Chinese charactors and letters let res = str;
str.split('').forEach((letter, i) => { const pattern = new RegExp('[\u4E00-\u9FA5]+'); // distinguish the Chinese charactors and letters
if (currentWidth > maxWidth - ellipsisLength) return; str.split('').forEach((letter, i) => {
if (pattern.test(letter)) { if (currentWidth > maxWidth - ellipsisLength) return;
// Chinese charactors if (pattern.test(letter)) {
currentWidth += fontSize; // Chinese charactors
} else { currentWidth += fontSize;
// get the width of single letter according to the fontSize } else {
currentWidth += G6.Util.getLetterWidth(letter, fontSize); // 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}`; if (currentWidth > maxWidth - ellipsisLength) {
} res = `${str.substr(0, i)}${ellipsis}`;
}
});
return res;
};
function refreshDragedNodePosition(e) {
const model = e.item.get('model');
model.fx = e.x;
model.fy = e.y;
}
const tooltip = new G6.Tooltip({
offsetX: 10,
offsetY: 10,
// the types of items that allow the tooltip show up
// 允许出现 tooltip 的 item 类型
itemTypes: ['node'],
// custom the tooltip's content
// 自定义 tooltip 内容
getContent: (e) => {
const outDiv = document.createElement('div');
outDiv.style.width = 'fit-content';
//outDiv.style.padding = '0px 0px 20px 0px';
outDiv.innerHTML = `
<h4>${e.item.getModel().text||''}</h4>
`;
return outDiv;
},
}); });
return res;
}; const graph = new G6.Graph({
container: `container${type||''}`,
function refreshDragedNodePosition(e) { width,
const model = e.item.get('model'); height,
model.fx = e.x; plugins: [tooltip],
model.fy = e.y; layout: {
} type: 'force',
preventOverlap: true,
const tooltip = new G6.Tooltip({ linkDistance: (d) => {
offsetX: 10, return 200;
offsetY: 10, },
// the types of items that allow the tooltip show up nodeStrength: (d) => {
// 允许出现 tooltip 的 item 类型 if (d.isLeaf) {
itemTypes: ['node'], return -50;
// custom the tooltip's content }
// 自定义 tooltip 内容 return -10;
getContent: (e) => { },
const outDiv = document.createElement('div'); edgeStrength: (d) => {
outDiv.style.width = 'fit-content'; return 0.7;
//outDiv.style.padding = '0px 0px 20px 0px'; },
outDiv.innerHTML = `
<h4>${e.item.getModel().name||''}</h4>
`;
return outDiv;
},
});
const graph = new G6.Graph({
container: `container${type||''}`,
width,
height,
plugins: [tooltip],
layout: {
type: 'force',
preventOverlap: true,
linkDistance: (d) => {
return 200;
}, },
nodeStrength: (d) => { defaultNode: {
if (d.isLeaf) { color: '#5B8FF9',
return -50;
}
return -10;
}, },
edgeStrength: (d) => { modes: {
return 0.7; default: ['drag-canvas'],
}, },
}, });
defaultNode: {
color: '#5B8FF9', const nodes = data.nodes;
}, const clusterMap = new Map();
modes: { let clusterId = 0;
default: ['drag-canvas'], nodes.forEach(function (node) {
}, // cluster
}); if (node.cluster && clusterMap.get(node.cluster) === undefined) {
clusterMap.set(node.cluster, clusterId);
const nodes = data.nodes; clusterId++;
const clusterMap = new Map(); }
let clusterId = 0; const cid = clusterMap.get(node.cluster);
nodes.forEach(function (node) { if (!node.style) {
// cluster node.style = {};
if (node.cluster && clusterMap.get(node.cluster) === undefined) { }
clusterMap.set(node.cluster, clusterId); node.style.fill = colors[cid % colors.length];
clusterId++; });
}
const cid = clusterMap.get(node.cluster); data.nodes.forEach(function (node) {
if (!node.style) { node.label = fittingString(node.label, node.size, globalFontSize);
node.style = {}; });
graph.data({
nodes,
edges: data.edges.map(function (edge, i) {
edge.id = 'edge' + i;
return Object.assign({}, edge);
}),
});
graph.render();
graph.on('node:dragstart', function (e) {
graph.layout();
refreshDragedNodePosition(e);
});
graph.on('node:drag', function (e) {
refreshDragedNodePosition(e);
});
graph.on('node:dragend', function (e) {
e.item.get('model').fx = null;
e.item.get('model').fy = null;
});
graph.on('node:click', function (e) {
// const node = e.item;
// const model = node.getModel();
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);
};
} }
node.style.fill = colors[cid % colors.length]; }, 100);
});
data.nodes.forEach(function (node) {
node.label = fittingString(node.label, node.size, globalFontSize);
});
graph.data({
nodes,
edges: data.edges.map(function (edge, i) {
edge.id = 'edge' + i;
return Object.assign({}, edge);
}),
});
graph.render();
graph.on('node:dragstart', function (e) {
graph.layout();
refreshDragedNodePosition(e);
});
graph.on('node:drag', function (e) {
refreshDragedNodePosition(e);
});
graph.on('node:dragend', function (e) {
e.item.get('model').fx = null;
e.item.get('model').fy = null;
});
graph.on('node:click', function (e) {
const node = e.item;
const model = node.getModel();
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);
};
}
} }
render() { render() {
......
src/view/Manage/Map/Component/SquareItem.jsx
...@@ -4,7 +4,7 @@ import { Card } from 'antd'; ...@@ -4,7 +4,7 @@ import { Card } from 'antd';
class SquareItem extends React.Component { class SquareItem extends React.Component {
onItemClick = () => { onItemClick = () => {
const { item, onClick, history } = this.props; const { item, onClick } = this.props;
if (onClick) { if (onClick) {
onClick(item); onClick(item);
} }
...@@ -15,11 +15,11 @@ class SquareItem extends React.Component { ...@@ -15,11 +15,11 @@ class SquareItem extends React.Component {
return ( return (
<Card title={ <Card title={
<div className='pointer' onClick={this.onItemClick}> <div className='pointer' onClick={this.onItemClick}>
{item.title||''} {item.dirName||''}
</div> </div>
}> }>
<p>{`数据资产: ${item.assetCount||''}`}</p> <p>{`数据资产: ${item.tableModelCount}`}</p>
<p>{`资产编目: ${item.assetDirCount||''}`}</p> <p>{`资产编目: ${item.subDirCount}`}</p>
</Card> </Card>
); );
} }
......
src/view/Manage/Map/Component/Tree.jsx
...@@ -49,7 +49,7 @@ class Tree extends React.Component { ...@@ -49,7 +49,7 @@ class Tree extends React.Component {
graph.node(function (node) { graph.node(function (node) {
return { return {
label: node.title||'', label: node.text||'',
labelCfg: { labelCfg: {
position: node.children && node.children.length > 0 ? 'left' : 'right', position: node.children && node.children.length > 0 ? 'left' : 'right',
offset: 5, offset: 5,
...@@ -62,8 +62,8 @@ class Tree extends React.Component { ...@@ -62,8 +62,8 @@ class Tree extends React.Component {
graph.fitView(); graph.fitView();
graph.on('node:click', function (e) { graph.on('node:click', function (e) {
const node = e.item; // const node = e.item;
const model = node.getModel(); // const model = node.getModel();
history && history.push(`${ContextPath}/home`); history && history.push(`${ContextPath}/home`);
}); });
......
src/view/Manage/Map/MapContent.jsx
import React from 'react'; import React from 'react';
import { Row, Col, Breadcrumb, Card } from 'antd'; import { Row, Col, Breadcrumb } from 'antd';
import { HomeOutlined } from '@ant-design/icons'; import { HomeOutlined } from '@ant-design/icons';
import Bar from './Component/Bar';
import HorizontalBar from './Component/HorizontalBar';
import SquareItem from './Component/SquareItem'; import SquareItem from './Component/SquareItem';
import Tree from './Component/Tree'; import Tree from './Component/Tree';
import Relation from './Component/Relation'; import Relation from './Component/Relation';
import { dispatchLatest } from '../../../model';
const barData = [ const column = 3;
{ name: '主体', value: 38 },
{ name: '品种', value: 52 },
{ name: '批量', value: 61 },
{ name: '融资', value: 145 },
{ name: '资讯', value: 48 },
{ name: '账户', value: 38 },
{ name: '财务', value: 38 },
{ name: '交易', value: 38 },
];
const horizontalBarData = [ class MapContent extends React.Component {
{ name: '资产1', value: 38 },
{ name: '资产2', value: 52 },
{ name: '资产3', value: 61 },
{ name: '资产4', value: 145 },
{ name: '资产5', value: 48 },
{ name: '资产6', value: 38 },
{ name: '资产7', value: 38 },
{ name: '资产8', value: 38 },
{ name: '资产9', value: 38 },
{ name: '资产10', value: 38 },
];
const data = [ constructor(props) {
{ super(props);
title: '公司业务与监管', this.state = {
assetCount: 3223, loading: false,
assetDirCount: 20, tableModelData: null,
children: [ curTableModelData: null,
{ treeModelData: null,
title: '公司资料', relationModelData: null,
assetCount: 3223, breadcrumbContents: null
assetDirCount: 20, };
children: [
{
title: '公司监管',
assetCount: 3223,
assetDirCount: 20,
},
{
title: '信息披露',
assetCount: 3223,
assetDirCount: 20,
},
]
},
{
title: '公司活动',
assetCount: 3223,
assetDirCount: 20,
}
]
},
{
title: '市场交易',
assetCount: 3223,
assetDirCount: 20,
},
{
title: '清算交收',
assetCount: 3223,
assetDirCount: 20,
},
{
title: '固收业务与监管',
assetCount: 3223,
assetDirCount: 20,
},
{
title: '基金业务与监管',
assetCount: 3223,
assetDirCount: 20,
},
{
title: '会员业务与监管',
assetCount: 3223,
assetDirCount: 20,
} }
];
const treeData = { componentDidMount() {
title: '深交所', const { tid } = this.props;
children: [
{ this.setState({ loadingTableModel: true }, () => {
title: '公司业务与监管', dispatchLatest({
assetCount: 3223, type: 'map.getTableAndTreeModelByTid',
assetDirCount: 20, payload: { dirId: tid },
children: [ callback: data => {
{ this.setState({
title: '公司资料', loadingTableModel: false,
assetCount: 3223, tableModelData: data.tables||[],
assetDirCount: 20, curTableModelData: data.tables||[],
children: [ treeModelData: data.trees||{},
{ relationModelData: this.convertRelationModelData(data.trees||{}),
title: '公司监管', breadcrumbContents: [{ data: data.tables||[] }]
assetCount: 3223, });
assetDirCount: 20,
},
{
title: '信息披露',
assetCount: 3223,
assetDirCount: 20,
},
]
},
{
title: '公司活动',
assetCount: 3223,
assetDirCount: 20,
} }
] })
}, })
{ }
title: '市场交易',
assetCount: 3223, convertRelationModelData = (data) => {
assetDirCount: 20, const _relationData = {
}, nodes: [],
{ edges: []
title: '清算交收',
assetCount: 3223,
assetDirCount: 20,
},
{
title: '固收业务与监管',
assetCount: 3223,
assetDirCount: 20,
},
{
title: '基金业务与监管',
assetCount: 3223,
assetDirCount: 20,
},
{
title: '会员业务与监管',
assetCount: 3223,
assetDirCount: 20,
} }
]
};
const relationData = { function recursionTreeData(treeData, sid, depth, cluster = '') {
nodes: [ if ((treeData||[]).length === 0) return;
{ id: 'node0', name: '深交所', label: '深交所', size: 80, cluster: 'a' },
{ id: 'node1', name: '公司业务与监管', label: '公司业务与监管', size: 60, cluster: 'b' },
{ id: 'node2', name: '市场交易', label: '市场交易', size: 60, cluster: 'c' },
{ id: 'node3', name: '清算交收', label: '清算交收', size: 60, cluster: 'd' },
{ id: 'node4', name: '固定业务与监管', label: '固定业务与监管', size: 60, isLeaf: true, cluster: 'e' },
{ id: 'node5', name: '基金业务与监管', label: '基金业务与监管', size: 60, isLeaf: true, cluster: 'f' },
{ id: 'node6', name: '会员页面与监管', label: '会员页面与监管', size: 60, isLeaf: true, cluster: 'g' },
{ id: 'node7', name: '公司资料', label: '公司资料', size: 40, isLeaf: true, cluster: 'b' },
{ id: 'node8', name: '公司活动', label: '公司活动', size: 40, isLeaf: true, cluster: 'b' },
{ id: 'node9', name: '公司监管', label: '公司监管', size: 40, isLeaf: true, cluster: 'b' },
{ id: 'node10', name: '信息批露', label: '信息批露', size: 40, isLeaf: true, cluster: 'b' },
],
edges: [
{ source: 'node0', target: 'node1' },
{ source: 'node0', target: 'node2' },
{ source: 'node0', target: 'node3' },
{ source: 'node0', target: 'node4' },
{ source: 'node0', target: 'node5' },
{ source: 'node0', target: 'node6' },
{ source: 'node1', target: 'node7' },
{ source: 'node1', target: 'node8' },
{ source: 'node7', target: 'node9' },
{ source: 'node7', target: 'node10' },
],
};
const column = 3; (treeData||[]).forEach((item, index) => {
class MapContent extends React.Component { let _cluster = '';
if (depth === 1) {
_cluster = (index + 1).toString();
} else {
_cluster = cluster;
}
constructor(props) { _relationData.nodes.push({ id: item.nodeId, text: item.text||'', label: item.text||'', size: (80-depth*20)>20?(80-depth*20):20, cluster: _cluster, isLeaf: (item.childSize===null || item.childSize===0) });
super(props); _relationData.edges.push({ source: sid, target: item.nodeId });
this.state = { recursionTreeData(item.children||[], item.nodeId, depth+1, _cluster);
curData: data||[], })
breadcrumbContents: [{ data }] }
};
if (data && data.nodeId) {
_relationData.nodes.push({ id: data.nodeId, text: data.text||'', label: data.text||'', size: 80, cluster: '0', isLeaf: (data.childSize===null || data.childSize===0) });
recursionTreeData(data.children||[], data.nodeId, 1);
}
return _relationData;
} }
onSquareItemClick = (item) => { onSquareItemClick = (item) => {
...@@ -195,8 +83,8 @@ class MapContent extends React.Component { ...@@ -195,8 +83,8 @@ class MapContent extends React.Component {
if ((item.children||[]).length===0) return; if ((item.children||[]).length===0) return;
this.setState({ this.setState({
breadcrumbContents: [...breadcrumbContents, { name: item.title||'', data: item.children||[] }], breadcrumbContents: [...breadcrumbContents, { name: item.dirName||'', data: item.children||[] }],
curData: item.children||[], curTableModelData: item.children||[],
}); });
} }
...@@ -205,78 +93,68 @@ class MapContent extends React.Component { ...@@ -205,78 +93,68 @@ class MapContent extends React.Component {
this.setState({ this.setState({
breadcrumbContents: breadcrumbContents.splice(0, index===0?1:(index+1)), breadcrumbContents: breadcrumbContents.splice(0, index===0?1:(index+1)),
curData: content.data||[], curTableModelData: content.data||[],
}) })
} }
render() { render() {
const { diagram, type } = this.props; const { diagram, type } = this.props;
const { curData, breadcrumbContents } = this.state; const { curTableModelData, breadcrumbContents, treeModelData, relationModelData } = this.state;
let groups = []; let groups = [];
if (curData) { if (curTableModelData) {
for(var i=0;i<data.length;i+=column){ for(var i=0;i<curTableModelData.length;i+=column){
groups.push(curData.slice(i,i+column)); groups.push(curTableModelData.slice(i,i+column));
} }
} }
return ( return (
<Row gutter={10}> <>
<Col span={8}> {
<Card title='数据资产数量'> diagram==='square' && <>
<Bar data={barData} /> {
</Card> breadcrumbContents && breadcrumbContents.length>1 && <Breadcrumb className='mb-3'>
<Card title='数据资产访问TOP10' className='mt-3'>
<HorizontalBar data={horizontalBarData} />
</Card>
</Col>
<Col span={16}>
{ {
diagram==='square' && <> breadcrumbContents.map((content, index) => {
{ return (
breadcrumbContents && breadcrumbContents.length>1 && <Breadcrumb className='mb-3'> <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) => {
return (
<Row gutter={10} key={index} className={index===0?'':'mt-3'}>
{ {
breadcrumbContents.map((content, index) => { group && group.map((item, _index) => {
return ( return (
<Breadcrumb.Item key={index}> <Col key={_index} span={24/column}>
{ <SquareItem item={item} onClick={this.onSquareItemClick} {...this.props} />
index===0 ? <HomeOutlined onClick={() => { this.onBreadcrumbItemClick(content, index); }} /> : ((index===breadcrumbContents.length-1) ? <span>{content.name||''}</span> : <span className='pointer' onClick={() => { this.onBreadcrumbItemClick(content, index); }}> </Col>
{content.name||''}
</span>)
}
</Breadcrumb.Item>
) )
}) })
} }
</Breadcrumb> </Row>
} )
{ })
groups && groups.map((group, index) => {
return (
<Row gutter={10} key={index} className={index===0?'':'mt-3'}>
{
group && group.map((item, _index) => {
return (
<Col key={_index} span={24/column}>
<SquareItem item={item} onClick={this.onSquareItemClick} {...this.props} />
</Col>
)
})
}
</Row>
)
})
}
</>
}
{
diagram==='tree' && <Tree data={treeData} type={type} {...this.props} />
}
{
diagram==='relation' && <Relation data={relationData} type={type} {...this.props} />
} }
</Col> </>
</Row> }
{
diagram==='tree' && <Tree data={treeModelData} type={type} {...this.props} />
}
{
diagram==='relation' && <Relation data={relationModelData} type={type} {...this.props} />
}
</>
); );
} }
} }
......
src/view/Manage/Map/index.jsx
...@@ -2,6 +2,7 @@ import React from 'react'; ...@@ -2,6 +2,7 @@ import React from 'react';
import { Tabs, Radio } from 'antd'; import { Tabs, Radio } from 'antd';
import MapContent from './MapContent'; import MapContent from './MapContent';
import { dispatchLatest } from '../../../model';
const { TabPane } = Tabs; const { TabPane } = Tabs;
...@@ -10,10 +11,28 @@ class Map extends React.Component { ...@@ -10,10 +11,28 @@ class Map extends React.Component {
super(props); super(props);
this.state = { this.state = {
diagram: 'square', diagram: 'square',
tabKey: '1' tabKey: '0',
loadingTopics: false,
topics: null
}; };
} }
componentDidMount() {
this.setState({ loadingTopics: true }, () => {
dispatchLatest({
type: 'map.getAllTopics',
payload: null,
callback: data => {
this.setState({
loadingTopics: false,
topics: data
});
}
})
})
}
onRadioChange = e => { onRadioChange = e => {
this.setState({ diagram: e.target.value }); this.setState({ diagram: e.target.value });
}; };
...@@ -23,34 +42,36 @@ class Map extends React.Component { ...@@ -23,34 +42,36 @@ class Map extends React.Component {
} }
render() { render() {
const { diagram, tabKey } = this.state; const { diagram, tabKey, topics } = this.state;
return ( return (
<div style={{ backgroundColor: '#fff', height: '100%' }}> <div style={{ backgroundColor: '#fff', height: '100%' }}>
<Tabs {
activeKey={tabKey} topics && topics.length>0 && <Tabs
size='large' activeKey={tabKey}
centered size='large'
style={{ height: '100%' }} centered
tabBarExtraContent={{ style={{ height: '100%' }}
left: <Radio.Group className='m-3' size='small' value={diagram} onChange={this.onRadioChange} > tabBarExtraContent={{
<Radio.Button value='square'>方块图</Radio.Button> left: <Radio.Group className='m-3' size='small' value={diagram} onChange={this.onRadioChange} >
<Radio.Button value='tree'>树形图</Radio.Button> <Radio.Button value='square'>方块图</Radio.Button>
<Radio.Button value='relation'>关系图</Radio.Button> <Radio.Button value='tree'>树形图</Radio.Button>
</Radio.Group>, <Radio.Button value='relation'>关系图</Radio.Button>
right: <div style={{ width: 172 }}></div> </Radio.Group>,
}} right: <div style={{ width: 172 }}></div>
onChange={this.onTabChange} }}
> onChange={this.onTabChange}
<TabPane tab='业务' key='1' className='p-3' style={{ height: '100%' }}> >
{ tabKey==='1' && <MapContent diagram={diagram} type='business' {...this.props} /> } {
</TabPane> topics && topics.map((topic, index) => {
<TabPane tab='主题' key='2' className='p-3' style={{ height: '100%' }}> return (
{ tabKey==='2' && <MapContent diagram={diagram} type='theme' {...this.props} /> } <TabPane tab='业务' key={index.toString()} className='p-3' style={{ height: '100%' }}>
</TabPane> { tabKey===index.toString() && <MapContent diagram={diagram} tid={topic.id||''} type='business' {...this.props} /> }
<TabPane tab='来源' key='3' className='p-3' style={{ height: '100%' }}> </TabPane>
{ tabKey==='3' && <MapContent diagram={diagram} type='source' {...this.props} /> } );
</TabPane> })
</Tabs> }
</Tabs>
}
</div> </div>
); );
} }
......
src/view/Manage/index.jsx
...@@ -24,16 +24,13 @@ class Manage extends Component { ...@@ -24,16 +24,13 @@ class Manage extends Component {
<ManageLayout <ManageLayout
{...this.props} {...this.props}
content={ content={
<Switch> session && session.userId ? (
<Route path={`${match.path}/map`} component={Map} {...this.props} /> <Switch>
</Switch> <Route path={`${match.path}/map`} component={Map} />
// session && session.userId ? ( </Switch>
// <Switch> ) : (
// <Route path={`${match.path}/map`} component={Map} /> <GetSession {...this.props} />
// </Switch> )
// ) : (
// <GetSession {...this.props} />
// )
} }
/> />
</React.Fragment> </React.Fragment>
......
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