数据地图

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

@@ -30,7 +30,7 @@ class Tree extends React.Component {
         ],
       },
       defaultNode: {
-        size: 26,
+        size: 9,
         anchorPoints: [
           [0, 0.5],
           [1, 0.5],
@@ -65,7 +65,7 @@ class Tree extends React.Component {
       // const node = e.item;
       // const model = node.getModel();
       
-      history && history.push(`${ContextPath}/home`);
+      // history && history.push(`${ContextPath}/home`);
     });
 
     if (typeof window !== 'undefined') {

src/view/Manage/Map/MapContent.jsx

 import React from 'react';
-import { Row, Col, Breadcrumb } from 'antd';
+import { Row, Col, Breadcrumb, Spin } from 'antd';
 import { HomeOutlined } from '@ant-design/icons';
 
 import SquareItem from './Component/SquareItem';
@@ -26,13 +26,13 @@ class MapContent extends React.Component {
   componentDidMount() {
     const { tid } = this.props;
 
-    this.setState({ loadingTableModel: true }, () => {
+    this.setState({ loading: true }, () => {
       dispatchLatest({
         type: 'map.getTableAndTreeModelByTid',
         payload: { dirId: tid },
         callback: data => {
           this.setState({
-            loadingTableModel: false,
+            loading: false,
             tableModelData: data.tables||[], 
             curTableModelData: data.tables||[],
             treeModelData: data.trees||{},
@@ -99,7 +99,7 @@ class MapContent extends React.Component {
 
   render() {
     const { diagram, type } = this.props;
-    const { curTableModelData, breadcrumbContents, treeModelData, relationModelData } = this.state;
+    const { curTableModelData, breadcrumbContents, treeModelData, relationModelData, loading } = this.state;
 
     let groups = [];
     if (curTableModelData) {
@@ -111,6 +111,8 @@ class MapContent extends React.Component {
     return (
       <>
       {
+        loading ? <Spin /> : <>
+        {
           diagram==='square' && <>
           {
             breadcrumbContents && breadcrumbContents.length>1 && <Breadcrumb className='mb-3'>
@@ -155,6 +157,8 @@ class MapContent extends React.Component {
           diagram==='relation' && <Relation data={relationModelData} type={type} {...this.props} />
         }
         </>
+      }
+      </>  
     );
   }
 }

src/view/Manage/Map/index.jsx

 import React from 'react';
-import { Tabs, Radio } from 'antd';
+import { Tabs, Radio, Spin } from 'antd';
 
 import MapContent from './MapContent';
 import { dispatchLatest } from '../../../model';
@@ -42,10 +42,12 @@ class Map extends React.Component {
   }
 
   render() {
-    const { diagram, tabKey, topics } = this.state;
+    const { diagram, tabKey, topics, loadingTopics } = this.state;
     return (
       <div style={{ backgroundColor: '#fff', height: '100%' }}>
       {
+        loadingTopics ? <Spin /> : <>
+        {
           topics && topics.length>0 && <Tabs 
             activeKey={tabKey}
             size='large' 
@@ -72,6 +74,8 @@ class Map extends React.Component {
           }
           </Tabs>
         }
+        </>
+      }
       </div>
     );
   }