数据地图

package.json

@@ -3,24 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@antv/g6": "^4.2.1",
     "@craco/craco": "^6.1.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "antd": "^4.14.0",
+    "axios": "^0.19.0",
+    "core-js": "^3.4.2",
     "craco-less": "^1.17.1",
+    "crypto-js": "^4.0.0",
     "less": "^4.1.1",
     "less-loader": "^8.0.0",
-    "core-js": "^3.4.2",
-    "react-redux": "^7.1.0",
-    "redux": "^4.0.1",
-    "redux-saga": "^1.0.5",
-    "axios": "^0.19.0",
-    "crypto-js": "^4.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-redux": "^7.1.0",
     "react-router-dom": "^5.0.1",
     "react-scripts": "4.0.3",
+    "redux": "^4.0.1",
+    "redux-saga": "^1.0.5",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

src/layout/index.js

@@ -105,7 +105,7 @@ export const ManageLayout = function ({ content, location }) {
           </Menu>
         </Sider>
 
-        <Content className="m-4" style={{ backgroundColor: '#eee' }}>
+        <Content className="m-3" style={{ backgroundColor: '#eee' }}>
           {content}
         </Content>
 

src/view/Manage/Map/Business.jsx

+import React from 'react';
+import { Row, Col, Breadcrumb } from 'antd';
+import { HomeOutlined } from '@ant-design/icons';
+
+import SquareItem from './Component/SquareItem';
+import Tree from './Component/Tree';
+
+const data = [
+  {
+    title: '公司业务与监管',
+    assetCount: 3223,
+    assetDirCount: 20,
+    children: [
+      {
+        title: '公司资料',
+        assetCount: 3223,
+        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 = {
+  title: '深交所',
+  children: [
+    {
+      title: '公司业务与监管',
+      assetCount: 3223,
+      assetDirCount: 20,
+      children: [
+        {
+          title: '公司资料',
+          assetCount: 3223,
+          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 column = 3;
+
+class Business extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      curData: data||[],
+      breadcrumbContents: [{ data }]
+    };
+  }
+
+  onSquareItemClick = (item) => {
+    const { breadcrumbContents } = this.state;
+
+    if ((item.children||[]).length===0) return;
+
+    this.setState({
+      breadcrumbContents: [...breadcrumbContents, { name: item.title||'', data: item.children||[] }],
+      curData: item.children||[],
+    });
+  }
+
+  onBreadcrumbItemClick = (content, index) => {
+    const {  breadcrumbContents } = this.state;
+
+    this.setState({
+      breadcrumbContents: breadcrumbContents.splice(0, index===0?1:(index+1)),
+      curData: content.data||[],
+    })
+  }
+
+  render() {
+    const { diagram } = this.props;
+    const { curData, breadcrumbContents } = this.state;
+
+    let groups = [];
+    if (curData) {
+      for(var i=0;i<data.length;i+=column){
+        groups.push(curData.slice(i,i+column));
+      }
+    }
+
+    return (
+      <>
+        {
+          diagram==='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) => {
+              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} />
+                      </Col>
+                    )
+                  })
+                }
+                </Row>
+              )
+            })
+          }
+        </>
+      }
+      {
+        diagram==='tree' && <Tree data={treeData} />
+      }
+      </>
+    );
+  }
+}
+
+export default Business;
\ No newline at end of file

src/view/Manage/Map/Component/Relation.jsx

+import React from 'react';
+
+class Relation extends React.Component {
+
+  render() {
+    return (
+      <>
+      relation
+      </>
+    );
+  }
+}
+
+export default Relation; 
\ No newline at end of file

src/view/Manage/Map/Component/SquareItem.jsx

+import React from 'react';
+import { Card } from 'antd'; 
+
+class SquareItem extends React.Component {
+
+  onItemClick = () => {
+    const { item, onClick } = this.props;
+    if (onClick) {
+      onClick(item);
+    }
+  }
+
+  render() {
+    const { item } = this.props;
+    return (
+      <Card title={
+        <div className='pointer' onClick={this.onItemClick}>
+        {item.title||''}
+        </div>
+      }>
+        <p>{`数据资产: ${item.assetCount||''}`}</p>
+        <p>{`资产编目: ${item.assetDirCount||''}`}</p>
+      </Card>
+    );
+  }
+}
+
+export default SquareItem;
\ No newline at end of file

src/view/Manage/Map/Component/Tree.jsx

+import React from 'react';
+import G6 from '@antv/g6';
+
+class Tree extends React.Component {
+
+  componentDidMount() {
+    const { data } = this.props;
+
+    const container = document.getElementById('mountNode');
+    const width = container.scrollWidth;
+    const height = container.scrollHeight || 500;
+    const graph = new G6.TreeGraph({
+      container: 'mountNode',
+      width,
+      height,
+      modes: {
+        default: [
+          {
+            type: 'collapse-expand',
+            onChange: function onChange(item, collapsed) {
+              const data = item.get('model');
+              data.collapsed = collapsed;
+              return true;
+            },
+          },
+          'drag-canvas',
+          'zoom-canvas',
+        ],
+      },
+      defaultNode: {
+        size: 26,
+        anchorPoints: [
+          [0, 0.5],
+          [1, 0.5],
+        ],
+      },
+      defaultEdge: {
+        type: 'cubic-horizontal',
+      },
+      layout: {
+        type: 'dendrogram',
+        direction: 'LR', // H / V / LR / RL / TB / BT
+        nodeSep: 30,
+        rankSep: 100,
+      },
+    });
+
+    graph.node(function (node) {
+      return {
+        label: node.title||'',
+        labelCfg: {
+          position: node.children && node.children.length > 0 ? 'left' : 'right',
+          offset: 5,
+        },
+      };
+    });
+
+    graph.data(data);
+    graph.render();
+    graph.fitView();
+
+    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() {
+    return (
+      <div id="mountNode"></div>
+    );
+  }
+}
+
+export default Tree;
\ No newline at end of file

src/view/Manage/Map/index.jsx

 import React from 'react';
+import { Tabs, Radio } from 'antd';
+
+import Business from './Business';
+
+const { TabPane } = Tabs;
 
 class Map extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { diagram: "square" };
+  }
+
+  onChange = e => {
+    this.setState({ diagram: e.target.value });
+  };
+
   render() {
+    const { diagram } = this.state;
     return (
-      <>
-      map
-      </>
+      <div style={{ backgroundColor: '#fff', height: '100%' }}>
+        <Tabs 
+          defaultActiveKey='1'
+          size='large' 
+          centered
+          tabBarExtraContent={{
+            left: <Radio.Group className='m-3' size='small' value={diagram} onChange={this.onChange} >
+              <Radio.Button value='square'>方块图</Radio.Button>
+              <Radio.Button value='tree'>树形图</Radio.Button>
+              <Radio.Button value='relation'>关系图</Radio.Button>
+            </Radio.Group>,
+            right: <div style={{ width: 172 }}></div>
+          }}
+        >
+          <TabPane tab='业务' key='1' className='p-3'>
+            <Business diagram={diagram} />
+          </TabPane>
+          <TabPane tab='主题' key='2' className='p-3'>
+            Content of Tab Pane 2
+          </TabPane>
+          <TabPane tab='来源' key='3' className='p-3'>
+            Content of Tab Pane 3
+          </TabPane>
+        </Tabs>
+      </div>
     );
   }
 }

src/view/Manage/index.jsx

@@ -8,9 +8,9 @@ import { ManageLayout } from "../../layout";
 import Map from './Map';
 
 class Manage extends Component {
-  constructor() {
-    super()
-    this.state = {}
+  constructor(props) {
+    super(props);
+    this.state = {};
   }
 
   componentDidMount() {}