地图性能优化

src/App.js

@@ -62,7 +62,7 @@ export default class App extends React.Component {
             <Route path={'/center-home/view/asset-map'} component={Map} exact />
             <Route path={'/center-home/view/asset-manage'} component={AssetManage} exact />
             <Route path={'/center-home/view/asset-browse'} component={AssetBrowse} exact />
-            <Route path={'/center-home/view/asset-recycle'} component={AssetRecycle} exact />
+            <Route path={'/center-home/view/asset-recycle'} component={AssetRecycle} exact />            
           </Switch>
         </Router>
       </React.Fragment>

src/model/map.js

@@ -16,3 +16,7 @@ export function* getTreeTotalLevel(payload) {
 export function* queryAllDirectoryAsTreeByDirLevel(payload) {
   return yield call(service.queryAllDirectoryAsTreeByDirLevel, payload);
 }
+
+export function* getTableModelInfoByDirIdAndBeginIndex(payload) {
+  return yield call(service.getTableModelInfoByDirIdAndBeginIndex, payload);
+}

src/service/map.js

@@ -15,3 +15,7 @@ export function getTreeTotalLevel(payload) {
 export function queryAllDirectoryAsTreeByDirLevel(payload) {
   return GetJSON("/dataassetmanager/countApi/queryAllDirectoryAsTreeByDirLevel", payload);
 }
+
+export function getTableModelInfoByDirIdAndBeginIndex(payload) {
+  return GetJSON("/dataassetmanager/countApi/getTableModelInfoByDirIdAndBeginIndex", payload);
+}

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

 import React from 'react';
 import G6 from '@antv/g6';
 
-// import { ContextPath } from '../../../../util';
-
 let graph = null;
 
 const globalFontSize = 20;
@@ -32,7 +30,7 @@ const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
 class Org extends React.Component {
 
   componentDidMount() {
-    const { type, loadMoreData } = this.props;
+    const { type, loadSubLeafData, loadMoreLeafData, onAssetClick } = this.props;
 
     const container = document.getElementById(`container${type||''}`);
     if (!container) return;
@@ -68,7 +66,7 @@ class Org extends React.Component {
 
           const bbox = text.getBBox();
 
-          if (cfg.dbType==='Root' || cfg.dbType==='Dir') {
+          if (cfg.dbType==='Dir') {
             if (!cfg.children) {
               group.addShape('marker', {
                 attrs: {
@@ -99,7 +97,7 @@ class Org extends React.Component {
           rect.attr({
             x: bbox.minX - 10,
             y: bbox.minY - 10,
-            width: bbox.width + ((cfg.dbType==='Root'||cfg.dbType==='Dir')&&(!cfg.children||((cfg.children||[]).length>0)) ? 38 : 20),
+            width: bbox.width + (cfg.dbType==='Dir'&&(!cfg.children||((cfg.children||[]).length>0)) ? 38 : 20),
             height: bbox.height + 20,
           });
     
@@ -258,13 +256,21 @@ class Org extends React.Component {
 
       const model = node.getModel();
 
-      if (model.dbType==='Root' || model.dbType==='Dir') {
+      if (model.dbType==='Dir') {
+
         const children = model.children;
-        if (!children && loadMoreData) {
-          loadMoreData(model.dirId||'', nodeId);
+        if (!children && loadSubLeafData) {
+          loadSubLeafData(model.dirId||'', nodeId);
         }
+
       } else if (model.dbType === 'Table') {
         
+        onAssetClick && onAssetClick(model.tid);
+      
+      } else if (model.dbType === 'More') {
+      
+        loadMoreLeafData && loadMoreLeafData(model.pDirId, model.pid, model.index);
+      
       }
 
     });
@@ -297,7 +303,9 @@ class Org extends React.Component {
       if (!parentData.children) {
         parentData.children = [];
       }
-      parentData.children = childData;
+
+      parentData.children = parentData.children.filter(item => item.dbType!=='More');
+      parentData.children = [...parentData.children, ...childData];
       graph.changeData();
 
       graph.updateItem(graph.findById(parentNodeId), {

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

@@ -29,13 +29,15 @@ class Relation extends React.Component {
   }
 
   componentDidUpdate(prevProps, _prevState) {
-    const { childData, parentNodeId, data } = this.props;
+    const { childData, parentNodeId } = this.props;
     if (parentNodeId && parentNodeId !== prevProps.parentNodeId) {
       const parentData = this.graph?.findDataById(parentNodeId);
       if (!parentData.children) {
         parentData.children = [];
       }
-      parentData.children = childData;
+
+      parentData.children = parentData.children.filter(item => item.dbType!=='More');
+      parentData.children = [...parentData.children, ...childData];     
       this.graph?.changeData();
       this.graph?.fitView(); 
     } else if (this.props.data) {
@@ -63,7 +65,7 @@ class Relation extends React.Component {
 export default Relation;
 
 
-let root = null, depthCount = {}
+let depthCount = {}
 
 function countDepth(node, _depth = 0) {
   // node.text = "测试123567890"
@@ -173,31 +175,30 @@ const init = (ctx) => function (container, data) {
     focusNodes.forEach((fnode) => {
       graph.setItemState(fnode, 'focus', false); // false
     });
-    const { item, target } = evt;
+    const { item } = evt;
     graph.setItemState(item, 'focus', true);
     graph.setItemState(item, 'hover', false);
 
-    const targetType = target.get('type');
-    const name = target.get('name');
-    if (targetType === 'marker') { // 响应展开按钮
-      const model = item.getModel();
-      if (name === 'add-item') {
-        const nodeId = item.get('id');
-        if (model.dbType === 'Dir') {
-          const children = model.children;
-          if (!children) {
-            ctx.props?.loadMoreData(model.dirId || '', nodeId);
-          }
-        } else if (model.dbType !== 'Root') {
-          //通过资产id跳转到资产详情页
-          // history && history.push(`${ContextPath}/home`);
-        }
+    const model = item.getModel();
+    const nodeId = item.get('id');
+
+    if (model.dbType==='Dir') {
+
+      const children = model.children;
+      if (!children) {
+        ctx.props?.loadSubLeafData(model.dirId||'', nodeId);
       }
-    } else { // 展示 node 详情
 
+    } else if (model.dbType === 'Table') {
+      
+      ctx.props?.onAssetClick(model.tid);
+    
+    } else if (model.dbType === 'More') {
+    
+      ctx.props?.loadMoreLeafData(model.pDirId, model.pid, model.index);
+    
     }
 
-
   });
 
   if (typeof window !== 'undefined')
@@ -224,9 +225,9 @@ G6.registerNode(
       width1 = r * 2.5
       width2 = r * 4
 
-      if (cfg.depth === 0) {
-        root = cfg
-      }
+      // if (cfg.depth === 0) {
+      //   root = cfg
+      // }
 
       // if (depthCount[cfg.depth] > 10) {
       group.addShape('image', {
@@ -304,7 +305,7 @@ G6.registerNode(
       }
 
       const bbox = keyShape.getBBox() 
-      if (cfg.dbType === 'Root' || cfg.dbType === 'Dir') {
+      if (cfg.dbType === 'Dir') {
         if (!cfg.children) {
           const marker = group.addShape('marker', {
             attrs: {
@@ -399,7 +400,7 @@ G6.registerNode(
   'aggregated-node',
 ); // 这样可以继承 aggregated-node 的 setState
 
-const lineDash = [4, 2, 1, 2];
+// const lineDash = [4, 2, 1, 2];
 G6.registerEdge(
   'custom-line',
   {
@@ -546,19 +547,19 @@ const formatText = (text, length = 5, elipsis = '...') => {
   }
   return text;
 };
-function textXY(root, cfg) {
-  const txtWidth = cfg.label.length > 5 ? 24 : cfg.label.length * 4
-  const { x, y } = cfg
-  const _y = y - root.y, _x = x - root.x
-  const angle = Math.atan2(_y, _x)
-  const sinAngle = Math.sin(angle), cosAngle = Math.cos(angle)
-
-  const radX = 4 + txtWidth
-  const radY = Math.abs(Math.pow(sinAngle, Math.abs(Math.round(sinAngle * 50)))) * 10 //Math.pow(Math.E, 80 * Math.log(Math.abs(sinAngle))) * 40
-
-  return [
-    // 右侧文字(中间向右侧15px,上下部向左靠20px) : 左侧
-    radX * cosAngle,
-    radY * sinAngle + (sinAngle > 0 ? sinAngle * 20 : sinAngle * 10)
-  ];
-}
+// function textXY(root, cfg) {
+//   const txtWidth = cfg.label.length > 5 ? 24 : cfg.label.length * 4
+//   const { x, y } = cfg
+//   const _y = y - root.y, _x = x - root.x
+//   const angle = Math.atan2(_y, _x)
+//   const sinAngle = Math.sin(angle), cosAngle = Math.cos(angle)
+
+//   const radX = 4 + txtWidth
+//   const radY = Math.abs(Math.pow(sinAngle, Math.abs(Math.round(sinAngle * 50)))) * 10 //Math.pow(Math.E, 80 * Math.log(Math.abs(sinAngle))) * 40
+
+//   return [
+//     // 右侧文字(中间向右侧15px,上下部向左靠20px) : 左侧
+//     radX * cosAngle,
+//     radY * sinAngle + (sinAngle > 0 ? sinAngle * 20 : sinAngle * 10)
+//   ];
+// }

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

 import React from 'react';
 import G6 from '@antv/g6';
 
-// import { ContextPath } from '../../../../util';
-
 let graph = null;
 const globalFontSize = 20;
 const maxTextWidth = 160;
@@ -31,7 +29,7 @@ const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
 class Tree extends React.Component {
 
   componentDidMount() {
-    const { type, loadMoreData } = this.props;
+    const { type, loadSubLeafData, loadMoreLeafData, onAssetClick } = this.props;
 
     const container = document.getElementById(`container${type||''}`);
     if (!container) return;
@@ -68,7 +66,7 @@ class Tree extends React.Component {
 
           const bbox = text.getBBox();
 
-          if (cfg.dbType==='Root' || cfg.dbType==='Dir') {
+          if (cfg.dbType==='Dir') {
             if (!cfg.children) {
               group.addShape('marker', {
                 attrs: {
@@ -97,7 +95,7 @@ class Tree extends React.Component {
           rect.attr({
             x: bbox.minX - 10,
             y: bbox.minY - 10,
-            width: bbox.width + ((cfg.dbType==='Root'||cfg.dbType==='Dir')&&(!cfg.children||((cfg.children||[]).length>0)) ? 38 : 20),
+            width: bbox.width + (cfg.dbType==='Dir'&&(!cfg.children||((cfg.children||[]).length>0)) ? 38 : 20),
             height: bbox.height + 20,
           });
     
@@ -217,13 +215,20 @@ class Tree extends React.Component {
       const model = node.getModel();
 
       if (model.dbType==='Dir') {
+
         const children = model.children;
-        if (!children && loadMoreData) {
-          loadMoreData(model.dirId||'', nodeId);
+        if (!children && loadSubLeafData) {
+          loadSubLeafData(model.dirId||'', nodeId);
         }
-      } else if (model.dbType !== 'Root') {
-        //通过资产id跳转到资产详情页
-        // history && history.push(`${ContextPath}/home`);
+
+      } else if (model.dbType === 'Table') {
+        
+        onAssetClick && onAssetClick(model.tid);
+      
+      } else if (model.dbType === 'More') {
+      
+        loadMoreLeafData && loadMoreLeafData(model.pDirId, model.pid, model.index);
+      
       }
 
     });
@@ -256,7 +261,9 @@ class Tree extends React.Component {
       if (!parentData.children) {
         parentData.children = [];
       }
-      parentData.children = childData;
+      
+      parentData.children = parentData.children.filter(item => item.dbType!=='More');
+      parentData.children = [...parentData.children, ...childData];
       graph.changeData();
 
       graph.updateItem(graph.findById(parentNodeId), {

src/view/Manage/Map/MapContent.jsx

@@ -8,7 +8,8 @@ import Tree from './Component/Tree';
 import Relation from './Component/Relation';
 import { dispatch, dispatchLatest } from '../../../model';
 
-const column = 4;
+// const column = 4;
+const defaultLoadCount = 10;
 
 class MapContent extends React.Component {
 
@@ -64,11 +65,22 @@ class MapContent extends React.Component {
 
     dispatchLatest({
       type: 'map.queryAllDirectoryAsTreeByDirLevel',
-      payload: { dirId: topic.id, dirLevel: level },
+      payload: { 
+        dirId: topic.id, 
+        dirLevel: level,
+        topNum: defaultLoadCount 
+      },
       callback: data => {
 
-        this.convertRemoteData(data);
-        const _treeData = this.convertTreeModelData(data || []);
+        const _treeData = {
+          text: topic.name || '',
+          dirId: topic.id,
+          id: `d${topic.id}`,
+          dbType: 'dir',
+          children: (data||[]).length===0 ? null : data
+        };
+
+        this.convertRemoteData(_treeData.children||[], _treeData.id, _treeData.dirId);
 
         this.setState({
           curTableModelData: data || [],
@@ -82,38 +94,33 @@ class MapContent extends React.Component {
     })
   }
 
-  convertRemoteData = (data, parentDirId = '') => {
+  convertRemoteData = (data, pid, pDirId, start=0) => {
     data.forEach((item, index) => {
+
+      item.pid = pid||'';
+      item.pDirId = pDirId||'';
+      item.index = (index+start);
+
       if (item.dbType === 'Dir') {
         item.text = item.dirName || '';
-        item.id = `d${parentDirId}${item.dirId || ''}${index}`;
-      } else {
+        item.id = `d${pDirId}${item.dirId || ''}${index}`;
+      } else if (item.dbType === 'Table') {
         item.text = item.cnName || '';
-        item.id = `t${parentDirId}${item.id || ''}${index}`;
+        item.tid = item.id||'';
+        item.id = `t${pDirId}${item.id || ''}${index}`;
       }
 
-      if (index === 10) {
+      if (index === defaultLoadCount) {
         item.text = '点击加载更多';
+        item.dbType = 'More';
       }
 
       if (item.children) {
-        this.convertRemoteData(item.children, item.dirId || '');
+        this.convertRemoteData(item.children, item.id, item.dirId);
       }
     })
   }
 
-  convertTreeModelData = (data) => {
-    const { topic } = this.props;
-
-    return {
-      text: topic.name || '',
-      dirId: topic.id,
-      id: `t${topic.id}`,
-      dbType: 'Root',
-      children: (data||[]).length===0 ? null : data
-    };
-  }
-
   setSquareGraphState = (item) => {
     const { breadcrumbContents } = this.state;
 
@@ -150,19 +157,43 @@ class MapContent extends React.Component {
     })
   }
 
-  loadMoreData = (dirId, nodeId) => {
-    dispatchLatest({
-      type: 'map.getTableModelByDirIid',
-      payload: { dirId },
-      callback: data => {
-        this.convertRemoteData(data || [], dirId);
-        this.setState({
-          parentNodeId: nodeId,
-          orgChildData: JSON.parse(JSON.stringify(data || [])),
-          treeChildData: JSON.parse(JSON.stringify(data || [])),
-          relationChildData: JSON.parse(JSON.stringify(data)),
-        });
-      }
+  loadSubLeafData = (dirId, nodeId) => {
+    this.setState({ parentNodeId: '' }, () => {
+      dispatchLatest({
+        type: 'map.getTableModelByDirIid',
+        payload: { dirId },
+        callback: data => {
+          this.convertRemoteData(data||[], nodeId, dirId);
+          this.setState({
+            parentNodeId: nodeId,
+            orgChildData: JSON.parse(JSON.stringify(data || [])),
+            treeChildData: JSON.parse(JSON.stringify(data || [])),
+            relationChildData: JSON.parse(JSON.stringify(data)),
+          });
+        }
+      })
+    })
+  }
+
+  loadMoreLeafData = (dirId, nodeId, start) => {
+    this.setState({ parentNodeId: '' }, () => {
+      dispatchLatest({
+        type: 'map.getTableModelInfoByDirIdAndBeginIndex',
+        payload: { 
+          dirId,
+          beginIndex: Number(start)+1,
+          topNum: defaultLoadCount 
+        },
+        callback: data => {
+          this.convertRemoteData(data||[], nodeId, dirId, start);
+          this.setState({
+            parentNodeId: nodeId,
+            orgChildData: JSON.parse(JSON.stringify(data || [])),
+            treeChildData: JSON.parse(JSON.stringify(data || [])),
+            relationChildData: JSON.parse(JSON.stringify(data)),
+          });
+        }
+      })
     })
   }
 
@@ -172,6 +203,10 @@ class MapContent extends React.Component {
     });
   }
 
+  onAssetClick = (id) => {
+
+  }
+
   render() {
     const { type, topic, switchMode } = this.props;
     const { curTableModelData, breadcrumbContents, orgModelData, treeModelData, relationModelData, orgChildData, treeChildData, relationChildData, parentNodeId, currentLevel, totalLevel } = this.state;
@@ -230,7 +265,9 @@ class MapContent extends React.Component {
               parentNodeId={parentNodeId}
               childData={orgChildData}
               type={`${topic.id || ''}${type}`}
-              loadMoreData={this.loadMoreData}
+              loadMoreLeafData={this.loadMoreLeafData}
+              loadSubLeafData={this.loadSubLeafData}
+              onAssetClick={this.onAssetClick}
             />
           }
           {
@@ -239,7 +276,10 @@ class MapContent extends React.Component {
               parentNodeId={parentNodeId}
               childData={treeChildData}
               type={`${topic.id || ''}${type}`}
-              loadMoreData={this.loadMoreData} />
+              loadMoreLeafData={this.loadMoreLeafData}
+              loadSubLeafData={this.loadSubLeafData}
+              onAssetClick={this.onAssetClick}
+            />
           }
           {
             type === 'relation' && <Relation
@@ -247,7 +287,10 @@ class MapContent extends React.Component {
               parentNodeId={parentNodeId}
               childData={relationChildData}
               type={`${topic.id || ''}${type}`}
-              loadMoreData={this.loadMoreData} />
+              loadMoreLeafData={this.loadMoreLeafData}
+              loadSubLeafData={this.loadSubLeafData}
+              onAssetClick={this.onAssetClick}
+            />
           }
           <div
             className='position-absolute text-right p-3'