数据地图

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,50 +111,54 @@ class MapContent extends React.Component {
     return (
       <>
       {
-        diagram==='square' && <>
+        loading ? <Spin /> : <>
         {
-          breadcrumbContents && breadcrumbContents.length>1 && <Breadcrumb className='mb-3'>
+          diagram==='square' && <>
           {
-            breadcrumbContents.map((content, index) => {
+            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 (
-                <Breadcrumb.Item key={index}>
+                <Row gutter={10} key={index} className={index===0?'':'mt-3'}>
                 {
-                  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>)
+                  group && group.map((item, _index) => {
+                    return (
+                      <Col key={_index} span={24/column}>
+                        <SquareItem item={item} onClick={this.onSquareItemClick} {...this.props} />
+                      </Col>
+                    )
+                  })
                 }
-                </Breadcrumb.Item>
+                </Row>
               )
             })
-          }  
-          </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} {...this.props} />
-                    </Col>
-                  )
-                })
-              }
-              </Row>
-            )
-          })
+          diagram==='tree' && <Tree data={treeModelData} type={type} {...this.props} />
         }
-      </>
-      }
-      {
-        diagram==='tree' && <Tree data={treeModelData} type={type} {...this.props} />
-      }
-      {
-        diagram==='relation' && <Relation data={relationModelData} type={type} {...this.props} />
+        {
+          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,9 +42,11 @@ 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}
@@ -72,6 +74,8 @@ class Map extends React.Component {
           }
           </Tabs>
         }
+        </>
+      }
       </div>
     );
   }