Skip to content

S
szse
Commit ade5d152 by zhaochengxiang
Options

去掉系统总图

parent fee4193e
Showing with 0 additions and 1006 deletions
package.json
...@@ -7,8 +7,6 @@ ...@@ -7,8 +7,6 @@
"@antv/chart-node-g6": "^0.0.4", "@antv/chart-node-g6": "^0.0.4",
"@antv/g2": "^4.1.12", "@antv/g2": "^4.1.12",
"@antv/g6": "^4.2.1", "@antv/g6": "^4.2.1",
"@antv/x6": "1.30.1",
"@antv/x6-react-shape": "^1.6.0",
"@craco/craco": "^6.4.3", "@craco/craco": "^6.4.3",
"@testing-library/jest-dom": "^5.11.4", "@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0", "@testing-library/react": "^11.1.0",
......
src/App.js
...@@ -27,7 +27,6 @@ const ImportAction = loadable(()=> import('./view/Manage/Model/Component/ImportA ...@@ -27,7 +27,6 @@ const ImportAction = loadable(()=> import('./view/Manage/Model/Component/ImportA
const EditModel = loadable(()=> import('./view/Manage/Model/Component/EditModel')); const EditModel = loadable(()=> import('./view/Manage/Model/Component/EditModel'));
const EditTemplate = loadable(()=> import('./view/Manage/ModelConfig/Component/EditTemplate')); const EditTemplate = loadable(()=> import('./view/Manage/ModelConfig/Component/EditTemplate'));
const AssetTree = loadable(()=> import('./view/Manage/AssetManage/Component/AssetManageTree')); const AssetTree = loadable(()=> import('./view/Manage/AssetManage/Component/AssetManageTree'));
const SystemRoot = loadable(()=> import('./view/Manage/SystemGraph'));
export class App extends React.Component { export class App extends React.Component {
constructor() { constructor() {
...@@ -152,7 +151,6 @@ export class App extends React.Component { ...@@ -152,7 +151,6 @@ export class App extends React.Component {
<Route path={'/center-home/menu/asset-recycle'} component={AssetRecycle} exact /> <Route path={'/center-home/menu/asset-recycle'} component={AssetRecycle} exact />
<Route path={'/center-home/data-model-action'} component={EditModel} exact /> <Route path={'/center-home/data-model-action'} component={EditModel} exact />
<Route path={'/center-home/asset-detail'} component={AssetDetailPage} exact /> <Route path={'/center-home/asset-detail'} component={AssetDetailPage} exact />
<Route path={'/center-home/system-graph'} component={SystemRoot} exact />
</Switch> </Switch>
</Router> </Router>
</AppContext.Provider> </AppContext.Provider>
......
src/routes.js
...@@ -38,10 +38,6 @@ export const routes = [ ...@@ -38,10 +38,6 @@ export const routes = [
{ {
name: 'asset-recycle', name: 'asset-recycle',
text: '未挂载资产', text: '未挂载资产',
},
{
name: 'system-graph',
text: '系统总图',
} }
] ]
} }
......
src/view/Manage/SystemGraph/AllSystemGraph.jsx deleted 100644 → 0
import React from 'react';
import { Graph, Cell, Shape } from '@antv/x6';
import SystemDetailModal from './SystemDetailModal';
Graph.registerNode(
'inside-rect',
{
inherit: 'rect',
markup: [
{
tagName: 'rect',
selector: 'body',
},
],
attrs: {
rect: {
strokeWidth: 1,
stroke: '#D8D8D8',
fill: '#D8D8D8',
},
},
},
true,
);
export default class AllSystemGraph extends React.Component {
constructor() {
super();
this.container = null;
this.graph = null;
}
componentDidMount() {
const { data, onClick } = this.props;
if (!data) return;
const containerWidth = this.container.scrollWidth;
const containerHeight = this.container.scrollHeight;
this.graph = new Graph({
container: this.container,
width: containerWidth,
height: containerHeight,
grid: false,
interacting: false,
})
const cells = []
const rectWidth = 150, rectHeight = 60, paddingX = 20, paddingY = 50, insidePaddingX = 30, insidePaddingY = 30, rowTotal = 7, colTotal = 5;
const xInterval = (containerWidth-2*paddingX-colTotal*rectWidth)/(colTotal-1);
const yInterval = (containerHeight-2*paddingY-rowTotal*rectHeight)/(rowTotal-1);
cells.push(this.graph.createNode({
shape: 'inside-rect',
x: (paddingX + rectWidth + xInterval - insidePaddingX),
y: (paddingY + rectHeight + yInterval - insidePaddingY),
width: rectWidth +(colTotal - 3)*(rectWidth + xInterval) + 2*insidePaddingX,
height: rectHeight +(rowTotal - 3)*(rectHeight + yInterval) + 2*insidePaddingY
}))
let systemData = [], relationData = [];
let systemMap = {};
(data.nodes||[]).forEach(node => {
if (node.attributeMaps && (node.attributeMaps['行']||'')!=='' && (node.attributeMaps['列']||'')!=='') {
node.row = Number(node.attributeMaps['行']);
node.col = Number(node.attributeMaps['列']);
if (node.attributeMaps['内外部系统'] === '内部系统') {
node.position = 'inside';
} else {
node.position = 'outside';
}
systemData.push(node);
systemMap[node.id] = node;
}
});
(data.edges||[]).forEach(edge => {
edge.id = edge.edgeId;
edge.source = edge.fromId;
edge.sourceName = systemMap[edge.fromId]?.name;
edge.target = edge.toId;
edge.targetName = systemMap[edge.toId]?.name;
edge.form = edge.type;
if (data.colorMap && data.colorMap[edge.form]) {
edge.color = data.colorMap[edge.form];
}
if (edge.attributeMaps) {
edge.category = edge.attributeMaps['业务类别']||'';
edge.service = edge.attributeMaps['协议']||'';
edge.desc = edge.attributeMaps['业务说明']||'';
edge.structure = edge.attributeMaps['数据结构']||'';
}
relationData.push(edge);
});
systemData.map(
(system) => {
const { id, name, row, col } = system
const nodeData = {
x: paddingX+(col-1)*(xInterval+rectWidth),
y: paddingY+(row-1)*(yInterval+rectHeight),
width: rectWidth,
height: rectHeight,
id,
label: name,
data: system,
attrs: {
body: {
cursor: 'pointer',
fill: (system.position==='outside'?'#5F95FF':'#F6CBAE'),
strokeWidth: 0,
},
label: {
cursor: 'pointer',
}
},
}
cells.push(this.graph.createNode(nodeData))
},
);
let newRelationData = [];
//关系去重
//jump 与外部系统关联的关系跳线
//bothway 关系双向箭头
relationData.forEach((relation) => {
const { source, target } = relation;
let exsit = false;
newRelationData.forEach((_relation) => {
if (source===_relation.source && target===_relation.target) {
exsit = true;
}
if (source===_relation.target && target===_relation.source) {
exsit = true;
_relation.bothway = true;
}
});
if (!exsit) {
if (systemMap[source].position==='outside'||systemMap[target].position==='outside') {
relation.jump = true;
}
newRelationData.push(relation);
}
});
//关系增加端口(port) 避免线条重复
newRelationData.forEach(relation => {
const { source, target } = relation;
const sourceRow = systemMap[source].row;
const sourceCol = systemMap[source].col;
const targetRow = systemMap[target].row;
const targetCol = systemMap[target].col;
if (sourceCol !== targetCol) {
relation.sourcePort = {};
relation.targetPort = {};
let sourceIndex = 1, sourceTotal = 1, targetIndex = 1, targetTotal = 1;
newRelationData.forEach(_relation => {
if (source===_relation.source && target===_relation.target) return;
if (source===_relation.source || source===_relation.target) {
let compareRow, compareCol;
if (source===_relation.source) {
compareRow = systemMap[_relation.target].row;
compareCol = systemMap[_relation.target].col;
} else {
compareRow = systemMap[_relation.source].row;
compareCol = systemMap[_relation.source].col;
}
if (targetCol > sourceCol) {
if (compareCol > sourceCol) {
sourceTotal = sourceTotal + 1;
if (compareRow<targetRow || (compareRow===targetRow&&compareCol>targetCol)) {
sourceIndex = sourceIndex + 1;
}
}
} else {
if (compareCol < sourceCol) {
sourceTotal = sourceTotal + 1;
if (compareRow<targetRow || (compareRow===targetRow&&compareCol<targetCol)) {
sourceIndex = sourceIndex + 1;
}
}
}
}
if (target===_relation.source || target===_relation.source) {
let compareRow, compareCol;
if (target===_relation.source) {
compareRow = systemMap[_relation.target].row;
compareCol = systemMap[_relation.target].col;
} else {
compareRow = systemMap[_relation.source].row;
compareCol = systemMap[_relation.source].col;
}
if (targetCol > sourceCol) {
if (compareCol < targetCol) {
targetTotal = targetTotal + 1;
if (compareRow<sourceRow || (compareRow===sourceRow&&compareCol>sourceCol)) {
targetIndex = targetIndex + 1;
}
}
} else {
if (compareCol > targetCol) {
targetTotal = targetTotal + 1;
if (compareRow<sourceRow || (compareRow===sourceRow&&compareCol<sourceCol)) {
targetIndex = targetIndex + 1;
}
}
}
}
})
relation.sourcePort = {
index: sourceIndex,
total: sourceTotal
};
relation.targetPort = {
index: targetIndex,
total: targetTotal
};
}
});
newRelationData.map(
(relation, index) => {
const { id, source, target, sourcePort, targetPort, bothway, jump } = relation;
let step = 40, stepInterval = 5, newStep = 40;
const sourceAnchor = {
cell: source,
anchor: {
name: 'center',
args: {
dy: '0%'
},
},
};
const targetAnchor = {
cell: target,
anchor: {
name: 'center',
args: {
dy: '0%'
},
},
};
if (sourcePort && sourcePort.total!==1) {
const halfTotal = parseInt(sourcePort.total/2);
if (sourcePort.total%2===0) {
if (sourcePort.index < halfTotal + 1) {
newStep = step - (halfTotal-sourcePort.index+1)*stepInterval+stepInterval/2;
sourceAnchor.anchor.args.dy = `-${(7.5+(halfTotal-sourcePort.index)*15)}%`;
} else {
newStep = step + (sourcePort.index - halfTotal)*stepInterval-stepInterval/2;
sourceAnchor.anchor.args.dy = `${(7.5+(sourcePort.index-halfTotal-1)*15)}%`;
}
} else if (sourcePort.index!==halfTotal+1) {
if (sourcePort.index < halfTotal + 1) {
newStep = step - (halfTotal-sourcePort.index+1)*stepInterval;
sourceAnchor.anchor.args.dy = `-${(halfTotal-sourcePort.index+1)*15}%`;
} else {
newStep = step + (sourcePort.index-halfTotal-1)*stepInterval;
sourceAnchor.anchor.args.dy = `${(sourcePort.index-halfTotal-1)*15}%`;
}
}
}
const sourceSystem = systemMap[source];
const targetSystem = systemMap[target];
if (targetPort && targetPort.total!==1) {
const halfTotal = parseInt(targetPort.total/2);
if (targetPort.total%2===0) {
if (targetPort.index < halfTotal + 1) {
if (sourceSystem.position==='outside'|| targetSystem.col<sourceSystem.col) {
newStep = step - (halfTotal-targetPort.index+1)*stepInterval+stepInterval/2;
}
targetAnchor.anchor.args.dy = `-${(7.5+(halfTotal-targetPort.index)*15)}%`;
} else {
if (sourceSystem.position==='outside'|| targetSystem.col<sourceSystem.col) {
newStep = step + (targetPort.index - halfTotal)*stepInterval-stepInterval/2;
}
targetAnchor.anchor.args.dy = `${(7.5+(targetPort.index-halfTotal-1)*15)}%`;
}
} else if (targetPort.index!==halfTotal+1) {
if (targetPort.index < halfTotal + 1) {
if (sourceSystem.position==='outside' || targetSystem.col<sourceSystem.col) {
newStep = step - (halfTotal-targetPort.index+1)*stepInterval;
}
targetAnchor.anchor.args.dy = `-${(halfTotal-targetPort.index+1)*15}%`;
} else {
if (sourceSystem.position==='outside'|| targetSystem.col<sourceSystem.col) {
newStep = step + (targetPort.index-halfTotal-1)*stepInterval;
}
targetAnchor.anchor.args.dy = `${(targetPort.index-halfTotal-1)*15}%`;
}
}
}
let line = {
targetMarker: {
size: 6,
name: 'block',
},
strokeWidth: 1,
};
if (bothway) {
line = {
sourceMarker: {
size: 6,
name: 'block',
},
targetMarker: {
size: 6,
name: 'block',
},
strokeWidth: 1,
}
}
const newEdge = this.graph.createEdge({
id,
data: relation,
source: sourceAnchor,
target: targetAnchor,
connector: 'normal',
router: {
name: 'manhattan',
args: {
step: newStep,
excludeShapes: ['inside-rect']
},
},
attrs: {
line,
},
});
if (jump) {
newEdge.setConnector('jumpover');
}
cells.push(newEdge);
},
);
this.graph.resetCells(cells)
this.graph.on('edge:mouseenter', ({ edge }) => {
const relation = JSON.parse(JSON.stringify(edge.data));
const { source, target } = relation;
const edges = this.graph.getEdges();
this.reset();
edges.forEach((_edge) => {
const _relation = _edge.data;
if (_relation.source!==relation.source
|| _relation.target!==relation.target
|| _relation.service!==relation.service ) {
_edge.attr('line/opacity', 0.2);
} else {
_edge.attr('line/opacity', 1);
_edge.attr('line/stroke', 'red');
_edge.attr('line/strokeWidth', 3);
}
})
})
this.graph.on('edge:mouseleave', ({ edge }) => {
this.reset();
});
this.graph.on('edge:click', ({ edge }) => {
const relation = JSON.parse(JSON.stringify(edge.data));
const sourceSystem = systemMap[relation.source];
const targetSystem = systemMap[relation.target];
sourceSystem.label = sourceSystem.name;
sourceSystem.isCenter = true;
sourceSystem.style = {
fill: '#996CFB'
};
targetSystem.label = targetSystem.name;
targetSystem.style = {
fill: '#5B8FF9'
};
let filterRelationData = relationData.filter(_relation => ((relation.source===_relation.source&&relation.target===_relation.target) || (relation.source===_relation.target&&relation.target===_relation.source)));
onClick && onClick({
nodes: [sourceSystem, targetSystem],
edges: filterRelationData,
forms: data.colorMap||{}
});
})
this.graph.on('node:mouseenter', ({ node }) => {
const system = node.data;
if (!system) return;
const edges = this.graph.getEdges();
this.reset();
edges.forEach((_edge) => {
const _relation = _edge.data;
if (_relation.source!==system.id && _relation.target!==system.id) {
_edge.attr('line/opacity', 0.2);
} else {
_edge.attr('line/opacity', 1);
_edge.attr('line/stroke', 'red');
_edge.attr('line/strokeWidth', 3);
}
})
})
this.graph.on('node:mouseleave', ({ edge }) => {
this.reset();
});
this.graph.on('node:click', ({ node }) => {
const system = node.data;
if (!system) return;
let filterRelationData = relationData.filter(relation => relation.source===system.id || relation.target===system.id);
filterRelationData = JSON.parse(JSON.stringify(filterRelationData));
const filterSystemData = [];
filterRelationData.forEach((relation, index) => {
const sourceSystem = systemMap[relation.source];
const targetSystem = systemMap[relation.target];
sourceSystem.label = sourceSystem.name;
sourceSystem.style = {
fill: '#5B8FF9'
};
sourceSystem.isCenter = false;
if (sourceSystem.name === system.name) {
sourceSystem.isCenter = true;
sourceSystem.style = {
fill: '#996CFB'
};
}
targetSystem.label = targetSystem.name;
targetSystem.isCenter = false;
targetSystem.style = {
fill: '#5B8FF9'
};
if (targetSystem.name === system.name) {
targetSystem.isCenter = true;
targetSystem.style = {
fill: '#996CFB'
};
}
if (filterSystemData.filter(item => item.name===sourceSystem.name).length === 0) {
filterSystemData.push(sourceSystem);
}
if (filterSystemData.filter(item => item.name===targetSystem.name).length === 0) {
filterSystemData.push(targetSystem);
}
});
onClick && onClick({
nodes: filterSystemData,
edges: filterRelationData,
forms: data.colorMap||{}
});
})
}
reset = () => {
const edges = this.graph.getEdges();
edges.forEach((edge) => {
edge.attr("line/opacity", 1);
edge.attr("line/stroke", "black");
edge.attr('line/strokeWidth', 1);
});
}
onModalCancel = () => {
this.setState({ visible: false });
}
refContainer = (container: HTMLDivElement) => {
this.container = container
}
render() {
return (
<div ref={this.refContainer} style={{ height: '100%' }} />
)
}
}
src/view/Manage/SystemGraph/SystemDetailGraph.jsx deleted 100644 → 0
import React from 'react';
import G6 from '@antv/g6';
import { Modal, Row, Col, Table } from 'antd';
export default class SystemDetailGraph extends React.Component {
constructor() {
super();
this.container = null;
}
componentDidMount() {
const { data } = this.props;
if (data) {
this.graph = this.initGraph();
}
}
componentDidUpdate(prevProps, prevState) {
const { data } = this.props;
if (data !== prevProps.data) {
this.graph?.destroy();
setTimeout(() => {
this.graph = this.initGraph();
}, 300)
}
}
initGraph = () => {
const { data, onEdgeClick, onNodeClick } = this.props;
const width = this.container?.scrollWidth;
const height = this.container?.scrollHeight;
const nodeRadius = 40;
const temp = (width>height)?height: width;
const circleRadius = temp/2 - nodeRadius - 40;
let passCenterNode = false;
if ((data?.nodes||[]).length > 2) {
(data?.nodes||[]).forEach((node, index) => {
if (node.isCenter) {
node.x = width/2 - nodeRadius;
node.y = height/2 - nodeRadius;
passCenterNode = true;
} else {
let degress = 0;
if (passCenterNode) {
degress = 2 * Math.PI * (index-1)/(data?.nodes.length-1);
} else {
degress = 2 * Math.PI * index/(data?.nodes.length-1);
}
node.x = width/2 - Math.cos(degress)*circleRadius - nodeRadius;
node.y = height/2 + Math.sin(degress)*circleRadius - nodeRadius;
}
})
} else {
(data?.nodes||[]).forEach((node, index) => {
node.x = width/(data?.nodes.length+1)*(index+1);
node.y = height/2 - nodeRadius;
});
}
const newEdges = [];
(data.edges||[]).forEach(edge => {
let exsit = false;
const newEdge = {...edge};
newEdge.style = {
cursor: 'pointer',
lineAppendWidth: 20,
endArrow: {
path: G6.Arrow.vee(5, 5, nodeRadius+5),
d: nodeRadius+5
},
};
newEdges.forEach(_edge => {
if (edge.source===_edge.source&&edge.targetEntityId===_edge.target&&edge.form===_edge.form) {
exsit = true;
}
if (edge.source===_edge.target&&edge.target===_edge.source&&edge.form===_edge.form) {
exsit = true;
_edge.style = {
cursor: 'pointer',
lineAppendWidth: 20,
startArrow: {
path: G6.Arrow.vee(5, 5, nodeRadius+5),
d: nodeRadius+5
},
endArrow: {
path: G6.Arrow.vee(5, 5, nodeRadius+5),
d: nodeRadius+5
},
};
}
})
if (!exsit) {
newEdges.push(newEdge);
}
})
G6.Util.processParallelEdges(newEdges);
const graph = new G6.Graph({
container: this.container,
width,
height,
// translate the graph to align the canvas's center, support by v3.5.1
fitCenter: true,
// the edges are linked to the center of source and target ndoes
linkCenter: true,
defaultNode: {
type: 'circle',
size: [nodeRadius*2],
style: {
cursor: 'pointer',
fill: '#9EC9FF',
},
labelCfg: {
style: {
cursor: 'pointer',
fill: '#000',
fontSize: 10,
},
},
},
defaultEdge: {
type: 'quadratic',
},
modes: {
default: ['drag-canvas', 'drag-node'],
},
});
graph.data({
nodes: data.nodes,
edges: newEdges
});
graph.render();
graph.on('edge:click', function (e) {
const item = e.item;
const model = item?.getModel();
onEdgeClick && onEdgeClick(model);
});
graph.on('node:click', function (e) {
const item = e.item;
const model = item?.getModel();
onNodeClick && onNodeClick(model);
});
return graph;
}
refContainer = (container) => {
this.container = container
}
render() {
return (
<div ref={this.refContainer} style={{ width: '100%', height: '100%' }} />
);
}
}
\ No newline at end of file
src/view/Manage/SystemGraph/SystemDetailModal.jsx deleted 100644 → 0
import React from 'react';
import G6 from '@antv/g6';
import { Modal, Row, Col, Table, Tooltip } from 'antd';
import SystemDetailGraph from './SystemDetailGraph';
import './SystemDetailModal.less';
const ArrowSvg = (props) => (
<svg
className="icon"
width={200}
height={200}
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M972.8 512 768 358.4v102.4H51.2v102.4H768v102.4L972.8 512z"
/>
</svg>
);
export default class SystemDetailModal extends React.Component {
constructor() {
super();
this.columns = [
{
title: '序号',
dataIndex: 'index',
key: 'index',
render: (_, __, index) => {
return (index+1).toString();
},
ellipsis: true,
width: 50
},
{
title: '业务类别',
dataIndex: 'category',
key: 'service',
ellipsis: true,
width: 80
},
{
title: '发起方',
dataIndex: 'sourceName',
key: 'sourceName',
ellipsis: true,
width: 120
},
{
title: '接收方',
dataIndex: 'targetName',
key: 'targetName',
ellipsis: true,
width: 120
},
{
title: '形式',
dataIndex: 'form',
key: 'form',
ellipsis: true,
width: 80
},
{
title: '协议',
dataIndex: 'service',
key: 'service',
ellipsis: true,
width: 80
},
{
title: '数据结构',
dataIndex: 'structure',
key: 'structure',
ellipsis: true,
width: 80
},
{
title: '业务说明',
dataIndex: 'desc',
key: 'desc',
ellipsis: true,
width: 150,
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<span>{text||''}</span>
</Tooltip>
)
}
},
];
this.state = {
selectIds: [],
};
}
componentDidUpdate(prevProps, prevState) {
const { visible, data } = this.props;
if (visible && data !== prevProps.data) {
this.setState({ selectIds: [] });
}
}
onEdgeClick = (model) => {
const { data } = this.props;
const ids = [];
data.edges.forEach(edge => {
if (edge.source===model.source&&edge.target===model.target&&edge.form===model.form) {
ids.push(edge.id);
}
if (edge.source===model.target&&edge.target===model.source&&edge.form===model.form) {
ids.push(edge.id);
}
});
this.setState({ selectIds: ids });
}
onNodeClick = (model) => {
const { data } = this.props;
const ids = [];
data.edges.forEach(edge => {
if (edge.source===model.id
||edge.target===model.id) {
ids.push(edge.id);
}
})
this.setState({ selectIds: ids });
}
handleCancel = () => {
const { cancelCB } = this.props;
cancelCB && cancelCB();
};
render() {
const { visible, data } = this.props;
const { selectIds } = this.state;
return (
<Modal
className='er-modal'
width='90%'
visible={visible}
onOk={this.handleCancel}
onCancel={this.handleCancel}
footer={null}
centered
>
<Row style={{ height: '100%' }}>
<Col span={12} style={{ position: 'relative', height: '100%' }}>
<SystemDetailGraph data={data} onEdgeClick={this.onEdgeClick} onNodeClick={this.onNodeClick} />
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
left: 10,
right: 10,
bottom: 0,
}}
>
{
Object.keys(data?.forms||{}).map((name, index) => {
return (
<React.Fragment key={index}>
<ArrowSvg fill={data.forms[name]} width={30} height={30} />
<span style={{ marginRight: 5 }}>{name}</span>
</React.Fragment>
)
})
}
</div>
</Col>
<Col span={11} style={{ height: '100%' }}>
<Table
rowKey='index'
dataSource={data?.edges||[]}
columns={this.columns}
size='small'
scroll={{
y: 'calc(80vh - 50px)'
}}
rowClassName={(record, index) => {
if (selectIds.indexOf(record.id) !== -1) {
return 'table-select-row';
}
return '';
}}
pagination={false}
/>
</Col>
</Row>
</Modal>
);
}
}
\ No newline at end of file
src/view/Manage/SystemGraph/SystemDetailModal.less deleted 100644 → 0
.er-modal {
height: 90%;
.yy-modal-content, .yy-modal-body {
height: 100%;
}
.table-select-row {
background-color: #d3ebff;
}
}
\ No newline at end of file
src/view/Manage/SystemGraph/index.jsx deleted 100644 → 0
import React from 'react';
import { Spin } from 'antd';
import AllSystemGraph from './AllSystemGraph';
import SystemDetailModal from './SystemDetailModal';
import { dispatch } from '../../../model';
import './index.less';
export default class SystemRoot extends React.Component {
constructor() {
super();
this.container = null;
this.graph = null;
this.state = {
loading: true,
data: null,
visible: false,
systemDetailData: null
};
}
componentDidMount() {
this.setState({ loading: true });
dispatch({
type: 'datamodel.getSystemAllGraph',
callback: data => {
this.setState({
loading: false,
data: data
});
},
error: () => {
this.setState({ loading: false });
}
});
}
onGraphClick = (value) => {
this.setState({
visible: true,
systemDetailData: value
})
}
onModalCancel = () => {
this.setState({ visible: false });
}
render() {
const { loading, data, visible, systemDetailData } = this.state;
return (
<Spin spinning={loading} wrapperClassName='system-spin'>
{
!loading && <AllSystemGraph data={data} onClick={this.onGraphClick} />
}
<SystemDetailModal visible={visible} data={systemDetailData} cancelCB={this.onModalCancel} />
</Spin>
)
}
}
src/view/Manage/SystemGraph/index.less deleted 100644 → 0
.system-spin, .yy-spin-container {
background-color: #fff;
width: 100%;
height: 100%;
}
\ No newline at end of file
src/view/Manage/index.jsx
...@@ -12,7 +12,6 @@ import AssetManage from './AssetManage'; ...@@ -12,7 +12,6 @@ import AssetManage from './AssetManage';
import AssetResourceBrowse from './AssetResourceBrowse'; import AssetResourceBrowse from './AssetResourceBrowse';
import AssetBrowse from './AssetBrowse'; import AssetBrowse from './AssetBrowse';
import AssetRecycle from './AssetRecycle'; import AssetRecycle from './AssetRecycle';
import SystemRoot from "./SystemGraph";
class Manage extends Component { class Manage extends Component {
...@@ -34,7 +33,6 @@ class Manage extends Component { ...@@ -34,7 +33,6 @@ class Manage extends Component {
<Route path={`${match.path}/asset-resource-browse`} component={AssetResourceBrowse} /> <Route path={`${match.path}/asset-resource-browse`} component={AssetResourceBrowse} />
<Route path={`${match.path}/asset-browse`} component={AssetBrowse} /> <Route path={`${match.path}/asset-browse`} component={AssetBrowse} />
<Route path={`${match.path}/asset-recycle`} component={AssetRecycle} /> <Route path={`${match.path}/asset-recycle`} component={AssetRecycle} />
<Route path={`${match.path}/system-graph`} component={SystemRoot} />
</Switch> </Switch>
) : ( ) : (
<GetSession {...this.props} /> <GetSession {...this.props} />
......
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