资产地图

src/model/map.js

@@ -8,3 +8,11 @@ export function* getAllTopics() {
 export function* getTableModelByDirIid(payload) {
   return yield call(service.getTableModelByDirId, payload);
 }
+
+export function* getTreeTotalLevel(payload) {
+  return yield call(service.getTreeTotalLevel, payload);
+}
+
+export function* queryAllDirectoryAsTreeByDirLevel(payload) {
+  return yield call(service.queryAllDirectoryAsTreeByDirLevel, payload);
+}

src/service/map.js

-import { GetJSON } from "../util/axios"
+import { GetJSON, Get } from "../util/axios"
 
 export function getAllTopics() {
   return GetJSON("/dataassetmanager/countApi/queryAllTopics");
@@ -7,3 +7,11 @@ export function getAllTopics() {
 export function getTableModelByDirId(payload) {
   return GetJSON("/dataassetmanager/countApi/getTableModelInfoByDirIdAnotherType", payload);
 }
+
+export function getTreeTotalLevel(payload) {
+  return Get("/dataassetmanager/countApi/getTreeTotalLevel", payload);
+}
+
+export function queryAllDirectoryAsTreeByDirLevel(payload) {
+  return GetJSON("/dataassetmanager/countApi/queryAllDirectoryAsTreeByDirLevel", payload);
+}

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

@@ -4,6 +4,18 @@ import { FolderAddOutlined, FileOutlined } from '@ant-design/icons';
 
 import './SquareItem.less';
 
+const colors = [
+  '#BDD2FD',
+  '#C2C8D5',
+  '#FBE5A2',
+  '#F6C3B7',
+  '#B6E3F5',
+  '#D3C6EA',
+  '#FFD8B8',
+  '#AAD8D8',
+  '#FFD6E7',
+];
+
 class SquareItem extends React.Component {
 
   onItemClick = () => {
@@ -19,7 +31,7 @@ class SquareItem extends React.Component {
   }
 
   render() {
-    const { item } = this.props;
+    const { item, index } = this.props;
 
     let assetName = '', assetCnName = '';
     if (item && item.dbType === 'Table') {
@@ -37,22 +49,26 @@ class SquareItem extends React.Component {
       <div className='map-square-item'>
       {
         item && (
-          item.dbType==='Dir' ? <Card title={
-            <div className='d-flex pointer' style={{ alignItems: 'center' }} onClick={this.onItemClick}>
-              <FolderAddOutlined className='mr-1' />
-              <span>{item.dirName||''}</span>
-            </div>
-          }>
-            <p>{`数据资产: ${item.tableModelCount}`}</p>
-            <p>{`资产编目: ${item.subDirCount}`}</p>
-          </Card> : <Card title={
-            <div className='d-flex pointer' style={{ alignItems: 'center' }} onClick={this.onItemClick}>
-              <FileOutlined className='mr-1' />
-              <span>{assetName||''}</span>
-            </div>
-          }>
-            <p>{`中文名称: ${assetCnName||''}`}</p>
-            <p>{`英文名称: ${assetName||''}`}</p>
+          item.dbType==='Dir' ? <Card 
+            title={
+              <div className='d-flex pointer' style={{ justifyContent: 'center', alignItems: 'center' }} onClick={this.onItemClick}>
+                <FolderAddOutlined className='mr-3' />
+                <span className='textOverflow' title={item.dirName||''}>{item.dirName||''}</span>
+              </div>
+            }
+            headStyle={{ backgroundColor: colors[index % colors.length] }}
+          >
+            <div className='text-center textOverflow' title={item.tableModelCount}>{item.tableModelCount}</div>
+          </Card> : <Card 
+            title={
+              <div className='d-flex pointer' style={{ justifyContent: 'center', alignItems: 'center' }} onClick={this.onItemClick}>
+                <FileOutlined className='mr-3' />
+                <span>{assetCnName||''}</span>
+              </div>
+            }
+            headStyle={{ backgroundColor: colors[index % colors.length] }}
+          >
+            <div className='text-center textOverflow' title={assetName||''}>{assetName||''}</div>
           </Card>
         )
       }

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

 .map-square-item {
-  .yy-card-head {
-    background-color: #f4856f !important;
 
-    .yy-card-head-title {
-      color: #fff !important;
-      font-size: 20px !important;
-      font-weight: bold !important;
+  .yy-card-head-title {
+    color: #fff !important;
+    font-size: 20px !important;
+    font-weight: bold !important;
 
-      :hover {
-        color: #1890ff;
-      }
+    :hover {
+      color: #1890ff;
     }
   }
 
   .yy-card-body {
-    p {
-      color: #1890ff !important;
-      font-size: 18px !important;
-    }
+    color: #1890ff !important;
+    font-size: 18px !important;
+    height: 76!important;
   }
 }
\ No newline at end of file

src/view/Manage/Map/MapContent.jsx

 import React from 'react';
-import { Row, Col, Breadcrumb, Spin, Slider } from 'antd';
+import { Row, Col, Breadcrumb, Slider } 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';
+import { dispatch, dispatchLatest } from '../../../model';
 
 const column = 3;
 
@@ -16,7 +16,6 @@ class MapContent extends React.Component {
     super(props);
     this.state = {
       loading: false,
-      // tableModelData: null,
       curTableModelData: null,
       orgModelData: null,
       orgChildData: null,
@@ -25,23 +24,54 @@ class MapContent extends React.Component {
       relationModelData: null,
       relationChildData: null,
       parentNodeId: null,
-      breadcrumbContents: null
+      breadcrumbContents: null,
+      currentLevel: 1,
+      totalLevel: 1,
     };
   }
 
   componentDidMount() {
+    this.getTreeTotalLevelThenQueryAllDirectoryAsTreeByDirLevel();
+  }
+
+  componentDidUpdate(prevProps, prevState){
+    const { type } = this.props;
+
+    if (type !== prevProps.type) {
+      this.setState({ parentNodeId: '' });
+    }
+  }
+
+  getTreeTotalLevelThenQueryAllDirectoryAsTreeByDirLevel = () => {
+    const { topic } = this.props;
+
+    dispatch({
+      type: 'map.getTreeTotalLevel',
+      payload: { dirId: topic.id },
+      callback: data => {
+
+        const _totalLevel = Number(data);
+        const _currentLevel = (_totalLevel<3?_totalLevel:3);
+
+        this.setState({ totalLevel: _totalLevel, currentLevel: _currentLevel }, () => {
+          this.queryAllDirectoryAsTreeByDirLevel(_currentLevel-1);
+        });
+      }
+    })
+  }
+
+  queryAllDirectoryAsTreeByDirLevel = (level) => {
     const { topic } = this.props;
 
     this.setState({ loading: true }, () => {
       dispatchLatest({
-        type: 'map.getTableModelByDirIid',
-        payload: { dirId: topic.id },
+        type: 'map.queryAllDirectoryAsTreeByDirLevel',
+        payload: { dirId: topic.id, dirLevel: level },
         callback: data => {
 
           this.convertRemoteData(data);
           this.setState({
             loading: false,
-            // tableModelData: data||[],
             curTableModelData: data||[],
             breadcrumbContents: [{ data: data||[] }]
           }, () => {
@@ -61,14 +91,6 @@ class MapContent extends React.Component {
     })
   }
 
-  componentDidUpdate(prevProps, prevState){
-    const { type } = this.props;
-
-    if (type !== prevProps.type) {
-      this.setState({ parentNodeId: '' });
-    }
-  }
-
   convertRemoteData = (data) => {
     data.forEach((item, index) => {
       if (item.dbType==='Dir') {
@@ -86,6 +108,10 @@ class MapContent extends React.Component {
         item.text = assetCnName||'';
         item.id = `t${item.id||''}`;
       }
+
+      if (item.children) {
+        this.convertRemoteData(item.children);
+      }
     })
   }
 
@@ -152,9 +178,15 @@ class MapContent extends React.Component {
     })
   }
 
+  onLevelChange = (value) => {
+    this.setState({ currentLevel: value }, () => {
+      this.queryAllDirectoryAsTreeByDirLevel(value-1);
+    });
+  }
+
   render() {
     const { type, topic } = this.props;
-    const { curTableModelData, breadcrumbContents, orgModelData , treeModelData, relationModelData, loading, orgChildData, treeChildData, relationChildData, parentNodeId } = this.state;
+    const { curTableModelData, breadcrumbContents, orgModelData , treeModelData, relationModelData, orgChildData, treeChildData, relationChildData, parentNodeId, currentLevel, totalLevel } = this.state;
 
     let groups = [];
     if (curTableModelData) {
@@ -164,9 +196,7 @@ class MapContent extends React.Component {
     }
 
     return (
-      <>
-      {
-        loading ? <Spin /> : <div className='position-relative' style={{ height: '100%' }}>
+      <div className='position-relative' style={{ height: '100%' }}>
         {
           type==='square' && <>
           {
@@ -195,7 +225,7 @@ class MapContent extends React.Component {
                     group && group.map((item, _index) => {
                       return (
                         <Col key={_index} span={24/column}>
-                          <SquareItem item={item} onClick={this.onSquareItemClick} {...this.props} />
+                          <SquareItem item={item} index={_index} onClick={this.onSquareItemClick} {...this.props} />
                         </Col>
                       )
                     })
@@ -247,12 +277,10 @@ class MapContent extends React.Component {
             }}
           >
             <span>层数</span>
-            <Slider vertical min={1} max={20} />
-           </div>
+            <Slider vertical min={1} max={totalLevel} value={currentLevel} onChange={this.onLevelChange} />
+          </div>
         }
-        </div>
-      }
-      </>  
+        </div> 
     );
   }
 }