数据地图

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

+import React from 'react';
+import G6 from '@antv/g6';
+
+import { ContextPath } from '../../../../util';
+
+let graph = null;
+
+class Org extends React.Component {
+
+  componentDidMount() {
+    const { type, loadMoreData, history } = this.props;
+
+    const container = document.getElementById(`container${type||''}`);
+    if (!container) return;
+
+    const width = container.scrollWidth;
+    const height = container.scrollHeight || 500;
+    graph = new G6.TreeGraph({
+      container: `container${type||''}`,
+      width,
+      height,
+      linkCenter: true,
+      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: 9,
+        anchorPoints: [
+          [0, 0.5],
+          [1, 0.5],
+        ],
+      },
+      defaultEdge: {
+        type: 'cubic-horizontal',
+      },
+      layout: {
+        type: 'compactBox',
+        direction: 'TB',
+        getId: function getId(d) {
+          return d.id;
+        },
+        getHeight: function getHeight() {
+          return 16;
+        },
+        getWidth: function getWidth() {
+          return 16;
+        },
+        getVGap: function getVGap() {
+          return 80;
+        },
+        getHGap: function getHGap() {
+          return 20;
+        },
+      },
+    });
+
+    graph.node(function (node) {
+      let position = 'right';
+      let rotate = 0;
+      if (!node.children) {
+        position = 'bottom';
+        rotate = Math.PI / 2;
+      }
+      return {
+        label: node.text||'',
+        labelCfg: {
+          position,
+          offset: 5,
+          style: {
+            rotate,
+            textAlign: 'start',
+          },
+        },
+      };
+    });
+
+    this.layoutGraph();
+
+    graph.on('node:click', function (e) {
+      const node = e.item;
+      const model = node.getModel();
+
+      if (model.dbType==='Dir') {
+        const children = model.children;
+        if (!children && loadMoreData) {
+          loadMoreData(model.dirId||'');
+        }
+      } else {
+        //通过资产id跳转到资产详情页
+        // model.tableModelId
+        // 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);
+      };
+    }
+  }
+
+  layoutGraph = () => {
+    const { data } = this.props;
+
+    if(graph && data){
+      graph.data(data);
+      graph.render();
+      graph.fitView();
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState){
+    this.layoutGraph();
+  }
+
+  render() {
+    const { type } = this.props;
+    return (
+      <div id={`container${type||''}`} style={{ width: '100%', height: '100%' }}></div>
+    );
+  }
+}
+
+export default Org;
\ No newline at end of file

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

@@ -5,7 +5,6 @@ import { ContextPath } from '../../../../util';
 
 const colors = [
   '#BDD2FD',
-  '#BDEFDB',
   '#C2C8D5',
   '#FBE5A2',
   '#F6C3B7',
@@ -27,7 +26,9 @@ class Relation extends React.Component {
 
     setTimeout(() => {
       const container = document.getElementById(`container${type||''}`);
-      const width = container.scrollWidth;
+      if (!container) return;
+      
+      const width = container.scrollWidth || 500;
       const height = container.scrollHeight || 500;
 
       function refreshDragedNodePosition(e) {
@@ -128,7 +129,7 @@ class Relation extends React.Component {
   layoutGraph = () => {
     const { data } = this.props;
 
-    if(graph){
+    if(graph && data){
       const fittingString = (str, maxWidth, fontSize) => {
         const ellipsis = '...';
         const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];

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

@@ -11,6 +11,8 @@ class Tree extends React.Component {
     const { type, loadMoreData, history } = this.props;
 
     const container = document.getElementById(`container${type||''}`);
+    if (!container) return;
+
     const width = container.scrollWidth;
     const height = container.scrollHeight || 500;
     graph = new G6.TreeGraph({
@@ -91,7 +93,7 @@ class Tree extends React.Component {
   layoutGraph = () => {
     const { data } = this.props;
 
-    if(graph){
+    if(graph && data){
       graph.data(data);
       graph.render();
       graph.fitView();

src/view/Manage/Map/MapContent.jsx

@@ -3,6 +3,7 @@ import { Row, Col, Breadcrumb, Spin } from 'antd';
 import { HomeOutlined } from '@ant-design/icons';
 
 import SquareItem from './Component/SquareItem';
+import Org from './Component/Org';
 import Tree from './Component/Tree';
 import Relation from './Component/Relation';
 import { dispatchLatest } from '../../../model';
@@ -18,6 +19,7 @@ class MapContent extends React.Component {
       loading: false,
       tableModelData: null,
       curTableModelData: null,
+      orgModelData: null,
       treeModelData: null,
       relationModelData: null,
       breadcrumbContents: null
@@ -114,37 +116,37 @@ class MapContent extends React.Component {
   onSquareItemClick = (item) => {
     const { tableModelData } = this.state;
     if (!item.children) {
-      // dispatchLatest({
-      //   type: 'map.getTableModelByDirIid',
-      //   payload: { dirId: item.dirId },
-      //   callback: data => {
-      //     this.convertRemoteData(data||[]);
-      //     item.children = (data||[]);
-      //     this.setSquareGraphState(item);
-      //     this.setTreeAndRelationState(tableModelData);
-      //   }
-      // })
-      // return;
-
-      item.children = [
-        {
-          "subDirCount": 0,
-          "dbType": "Dir",
-          "dirId": "5f2a63e89cfac536601fb2a6",
-          "tableModelCount": 0,
-          "dirName": "公司"
-        },
-        {
-          "tableModelId": "1",
-          "name": "table",
-          "system": "8月5",
-          "remarks": "对外"
-        }
-      ]
-      this.convertRemoteData(item.children);
+      dispatchLatest({
+        type: 'map.getTableModelByDirIid',
+        payload: { dirId: item.dirId },
+        callback: data => {
+          this.convertRemoteData(data||[]);
+          item.children = (data||[]);
           this.setSquareGraphState(item);
           this.setTreeAndRelationState(tableModelData);
+        }
+      })
       return;
+
+      // item.children = [
+      //   {
+      //     "subDirCount": 0,
+      //     "dbType": "Dir",
+      //     "dirId": "5f2a63e89cfac536601fb2a6",
+      //     "tableModelCount": 0,
+      //     "dirName": "公司"
+      //   },
+      //   {
+      //     "tableModelId": "1",
+      //     "name": "table",
+      //     "system": "8月5",
+      //     "remarks": "对外"
+      //   }
+      // ]
+      // this.convertRemoteData(item.children);
+      // this.setSquareGraphState(item);
+      // this.setTreeAndRelationState(tableModelData);
+      // return;
     }
 
     this.setSquareGraphState(item);
@@ -163,47 +165,11 @@ class MapContent extends React.Component {
   loadMoreData = (id) => {
     const { tableModelData } = this.state;
 
-    // dispatchLatest({
-    //   type: 'map.getTableModelByDirIid',
-    //   payload: { dirId: id },
-    //   callback: data => {
-    //     this.convertRemoteData(data||[]);
-
-    //     function recursionData(_data) {
-    //       if ((_data||[]).length === 0) return;
-
-    //       _data.forEach((item, index) => {
-    //         if (item.dirId === id) {
-    //           item.children = data;
-    //         } else {
-    //           recursionData(item.children||[]);
-    //         }
-    //       })
-    //     }
-
-    //     recursionData(tableModelData);
-
-    //     this.setTreeAndRelationState(tableModelData);
-    //   }
-    // })
-
-    const data = [
-      {
-        "subDirCount": 0,
-        "dbType": "Dir",
-        "dirId": "5f2a63e89cfac536601fb2a6",
-        "tableModelCount": 0,
-        "dirName": "公司"
-      },
-      {
-        "tableModelId": "1",
-        "name": "table",
-        "system": "8月5",
-        "remarks": "对外"
-      }
-    ]
-
-    this.convertRemoteData(data);
+    dispatchLatest({
+      type: 'map.getTableModelByDirIid',
+      payload: { dirId: id },
+      callback: data => {
+        this.convertRemoteData(data||[]);
 
         function recursionData(_data) {
           if ((_data||[]).length === 0) return;
@@ -221,18 +187,55 @@ class MapContent extends React.Component {
 
         this.setTreeAndRelationState(tableModelData);
       }
+    })
+
+    // const data = [
+    //   {
+    //     "subDirCount": 0,
+    //     "dbType": "Dir",
+    //     "dirId": "5f2a63e89cfac536601fb2a6",
+    //     "tableModelCount": 0,
+    //     "dirName": "公司"
+    //   },
+    //   {
+    //     "tableModelId": "1",
+    //     "name": "table",
+    //     "system": "8月5",
+    //     "remarks": "对外"
+    //   }
+    // ]
+
+    // this.convertRemoteData(data);
+
+    // function recursionData(_data) {
+    //   if ((_data||[]).length === 0) return;
+
+    //   _data.forEach((item, index) => {
+    //     if (item.dirId === id) {
+    //       item.children = data;
+    //     } else {
+    //       recursionData(item.children||[]);
+    //     }
+    //   })
+    // }
+
+    // recursionData(tableModelData);
+
+    // this.setTreeAndRelationState(tableModelData);
+  }
 
   setTreeAndRelationState = (tableModelData) => {
     const _treeData = this.convertTreeModelData(tableModelData);
     this.setState({ 
+      orgModelData: lodash.cloneDeep(_treeData),
       treeModelData: lodash.cloneDeep(_treeData),
       relationModelData: this.convertRelationModelData(lodash.cloneDeep(_treeData))
     });
   }
 
   render() {
-    const { diagram, type } = this.props;
-    const { curTableModelData, breadcrumbContents, treeModelData, relationModelData, loading } = this.state;
+    const { diagram, topic } = this.props;
+    const { curTableModelData, breadcrumbContents, orgModelData , treeModelData, relationModelData, loading } = this.state;
 
     let groups = [];
     if (curTableModelData) {
@@ -284,10 +287,13 @@ class MapContent extends React.Component {
         </>
         }
         {
-          diagram==='tree' && <Tree data={treeModelData} type={type} {...this.props} loadMoreData={this.loadMoreData} />
+          diagram==='org' && <Org data={orgModelData} type={`${topic.id||''}${diagram}`} {...this.props} loadMoreData={this.loadMoreData} />
+        }
+        {
+          diagram==='tree' && <Tree data={treeModelData} type={`${topic.id||''}${diagram}`} {...this.props} loadMoreData={this.loadMoreData} />
         }
         {
-          diagram==='relation' && <Relation data={relationModelData} type={type} {...this.props} loadMoreData={this.loadMoreData} />
+          diagram==='relation' && <Relation data={relationModelData} type={`${topic.id||''}${diagram}`} {...this.props} loadMoreData={this.loadMoreData} />
         }
         </>
       }

src/view/Manage/Map/index.jsx

@@ -56,6 +56,7 @@ class Map extends React.Component {
             tabBarExtraContent={{
               left: <Radio.Group className='m-3' size='small' value={diagram} onChange={this.onRadioChange} >
                 <Radio.Button value='square'>方块图</Radio.Button>
+                <Radio.Button value='org'>组织图</Radio.Button>
                 <Radio.Button value='tree'>树形图</Radio.Button>
                 <Radio.Button value='relation'>关系图</Radio.Button>
               </Radio.Group>,
@@ -67,7 +68,7 @@ class Map extends React.Component {
             topics && topics.map((topic, index) => {
               return (
                 <TabPane tab={topic.name||''} key={index.toString()} className='p-3' style={{ height: '100%' }}>
-                { tabKey===index.toString() && <MapContent diagram={diagram} topic={topic} type='business' {...this.props} /> }
+                { tabKey===index.toString() && <MapContent diagram={diagram} topic={topic} {...this.props} /> }
                 </TabPane>
               );
             })