系统总图

package.json

@@ -7,6 +7,8 @@
     "@antv/chart-node-g6": "^0.0.4",
     "@antv/g2": "^4.1.12",
     "@antv/g6": "^4.2.1",
+    "@antv/x6": "1.30.1",
+    "@antv/x6-react-shape": "^1.6.0",
     "@craco/craco": "^6.4.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",

src/App.js

@@ -27,6 +27,7 @@ const ImportAction = loadable(()=> import('./view/Manage/Model/Component/ImportA
 const EditModel = loadable(()=> import('./view/Manage/Model/Component/EditModel'));
 const EditTemplate = loadable(()=> import('./view/Manage/ModelConfig/Component/EditTemplate'));
 const AssetTree = loadable(()=> import('./view/Manage/AssetManage/Component/AssetManageTree'));
+const SystemRoot = loadable(()=> import('./view/Manage/SystemGraph'));
 
 export class App extends React.Component {
   constructor() {
@@ -151,6 +152,7 @@ export class App extends React.Component {
             <Route path={'/center-home/menu/asset-recycle'} component={AssetRecycle} exact />  
             <Route path={'/center-home/data-model-action'} component={EditModel} exact />
             <Route path={'/center-home/asset-detail'} component={AssetDetailPage} exact />
+            <Route path={'/center-home/system-graph'} component={SystemRoot} exact />
           </Switch>
         </Router>
       </AppContext.Provider>

src/model/datamodel.js

@@ -296,4 +296,8 @@ export function* setRootDomainId(payload) {
 
 export function* getMaintenanceRecords(payload) {
   return yield call(datamodelerService.getMaintenanceRecords, payload);
+}
+
+export function* getSystemAllGraph(payload) {
+  return yield call(metadataService.getSystemAllGraph, payload);
 }
\ No newline at end of file

src/routes.js

@@ -38,6 +38,10 @@ export const routes = [
       {
         name: 'asset-recycle',
         text: '未挂载资产',
+      },
+      {
+        name: 'system-graph',
+        text: '系统总图',
       }
     ]
   }

src/service/metadata.js

@@ -14,4 +14,8 @@ export function queryAllDataTable(payload) {
 
 export function queryAllFields(payload) {
   return GetJSON("/metadatarepo/rest/metadata/getChild", payload);
+}
+
+export function getSystemAllGraph(payload) {
+  return GetJSON("/metadatarelation/getSystemAllGraph", payload);
 }
\ No newline at end of file

src/view/Manage/SystemGraph/SystemDetailGraph.jsx

+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

+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

+.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

+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

+.system-spin, .yy-spin-container {
+  background-color: #fff;
+  width: 100%;
+  height: 100%;
+}
\ No newline at end of file

src/view/Manage/index.jsx

@@ -12,6 +12,7 @@ import AssetManage from './AssetManage';
 import AssetResourceBrowse from './AssetResourceBrowse';
 import AssetBrowse from './AssetBrowse';
 import AssetRecycle from './AssetRecycle';
+import SystemRoot from "./SystemGraph";
 
 class Manage extends Component {
 
@@ -33,6 +34,7 @@ class Manage extends Component {
                 <Route path={`${match.path}/asset-resource-browse`} component={AssetResourceBrowse} />
                 <Route path={`${match.path}/asset-browse`} component={AssetBrowse} />
                 <Route path={`${match.path}/asset-recycle`} component={AssetRecycle} />
+                <Route path={`${match.path}/system-graph`} component={SystemRoot} />
               </Switch>
             ) : (
               <GetSession {...this.props} />