Skip to content

S
szse
Commit ade5d152 by zhaochengxiang
Options

去掉系统总图

parent fee4193e
Showing with 0 additions and 473 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/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