优化地图样式

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

@@ -52,9 +52,11 @@ class Relation extends React.Component {
 
   render() {
 
+    const { styles } = this.props;
+
     return (
       <React.Fragment>
-        <div ref={ref => this.elem = ref} style={{ width: '100%', height: '100%', }}>
+        <div ref={ref => this.elem = ref} style={styles}>
         </div>
       </React.Fragment>
 
@@ -267,7 +269,7 @@ G6.registerNode(
           fill: colors[cfg.depth % colors.length],
           stroke: highlight,
           lineWidth,
-          cursor: (cfg.dbType==='Dir')?'pointer':'default',
+          cursor: (cfg.dbType==='Dir'||cfg.dbType==='More')?'pointer':'default',
         },
         name: 'aggregated-node-keyShape',
       });

src/view/Manage/Map/MapContent.jsx

@@ -28,7 +28,7 @@ class MapContent extends React.Component {
       relationChildData: null,
       parentNodeId: null,
       breadcrumbContents: null,
-      currentLevel: 1,
+      currentLevel: -1,
       totalLevel: 1,
       haveMoreData: false,
     };
@@ -42,13 +42,18 @@ class MapContent extends React.Component {
 
   componentDidUpdate(prevProps, prevState) {
     const { type } = this.props;
+    const { currentLevel } = this.state;
 
     if (type !== prevProps.type) {
-      this.setState({ parentNodeId: '' });
+      this.setState({ parentNodeId: null, orgModelData: null, treeModelData: null, relationModelData: null }, () => {
+        if (type !== 'square') {
+          this.getTreeTotalLevelThenQueryAllDirectoryAsTreeByDirLevel(false, currentLevel);
+        }
+      });
     }
   }
 
-  getTreeTotalLevelThenQueryAllDirectoryAsTreeByDirLevel = () => {
+  getTreeTotalLevelThenQueryAllDirectoryAsTreeByDirLevel = (first=true, defaultCurrentLevel=-1) => {
     const { topic } = this.props;
 
     dispatch({
@@ -57,16 +62,16 @@ class MapContent extends React.Component {
       callback: data => {
 
         const _totalLevel = Number(data);
-        const _currentLevel = (_totalLevel < 3 ? _totalLevel : 3);
+        const _currentLevel = (defaultCurrentLevel===-1) ? (_totalLevel < 3 ? _totalLevel : 3) : defaultCurrentLevel;
 
         this.setState({ totalLevel: _totalLevel, currentLevel: _currentLevel }, () => {
-          this.queryAllDirectoryAsTreeByDirLevel(_currentLevel - 1);
+          this.queryAllDirectoryAsTreeByDirLevel(first, _currentLevel - 1);
         });
       }
     })
   }
 
-  queryAllDirectoryAsTreeByDirLevel = (level) => {
+  queryAllDirectoryAsTreeByDirLevel = (first, level) => {
     const { topic } = this.props;
 
     dispatchLatest({
@@ -90,15 +95,23 @@ class MapContent extends React.Component {
 
         const _curTableModelData = (_treeData.children||[]).filter(item => item.dbType!=='More');
 
-        this.setState({
-          curTableModelData: _curTableModelData,
-          breadcrumbContents: [{ data: _treeData }],
-          haveMoreData: (_curTableModelData||[]).length===defaultLoadCount,
-          //深拷贝 
-          orgModelData: JSON.parse(JSON.stringify(_treeData)),
-          treeModelData: JSON.parse(JSON.stringify(_treeData)),
-          relationModelData: JSON.parse(JSON.stringify(_treeData))
-        });
+        if (first) {
+          this.setState({
+            curTableModelData: _curTableModelData,
+            breadcrumbContents: [{ data: _treeData }],
+            haveMoreData: (_curTableModelData||[]).length===defaultLoadCount,
+            //深拷贝 
+            orgModelData: JSON.parse(JSON.stringify(_treeData)),
+            treeModelData: JSON.parse(JSON.stringify(_treeData)),
+            relationModelData: JSON.parse(JSON.stringify(_treeData))
+          });
+        } else {
+          this.setState({
+            orgModelData: JSON.parse(JSON.stringify(_treeData)),
+            treeModelData: JSON.parse(JSON.stringify(_treeData)),
+            relationModelData: JSON.parse(JSON.stringify(_treeData))
+          });
+        }
       }
     })
   }
@@ -365,10 +378,10 @@ class MapContent extends React.Component {
               data={orgModelData}
               parentNodeId={parentNodeId}
               childData={orgChildData}
-              type={`${topic.id || ''}${type}`}
               loadMoreLeafData={this.loadMoreLeafData}
               loadSubLeafData={this.loadSubLeafData}
               onAssetClick={this.onAssetClick}
+              styles={{ width: '100%', height: '100%' }}
             />
           }
           {
@@ -376,10 +389,10 @@ class MapContent extends React.Component {
               data={treeModelData}
               parentNodeId={parentNodeId}
               childData={treeChildData}
-              type={`${topic.id || ''}${type}`}
               loadMoreLeafData={this.loadMoreLeafData}
               loadSubLeafData={this.loadSubLeafData}
               onAssetClick={this.onAssetClick}
+              styles={{ width: '100%', height: '100%' }}
             />
           }
           {
@@ -387,10 +400,10 @@ class MapContent extends React.Component {
               data={relationModelData}
               parentNodeId={parentNodeId}
               childData={relationChildData}
-              type={`${topic.id || ''}${type}`}
               loadMoreLeafData={this.loadMoreLeafData}
               loadSubLeafData={this.loadSubLeafData}
               onAssetClick={this.onAssetClick}
+              styles={{ width: '100%', height: '100%' }}
             />
           }
           <div

src/view/Manage/Map/index.jsx

@@ -13,10 +13,10 @@ const graphModes = [
     title: '方块图',
     key: 'square'
   },
-  {
-    title: '组织图',
-    key: 'org',
-  },
+  // {
+  //   title: '组织图',
+  //   key: 'org',
+  // },
   {
     title: '树形图',
     key: 'tree',