地图性能优化

package.json

@@ -24,6 +24,7 @@
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",
     "react-dom": "^17.0.1",
+    "react-infinite-scroller": "^1.2.4",
     "react-redux": "^7.1.0",
     "react-router-dom": "^5.0.1",
     "react-scripts": "4.0.3",

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

@@ -4,14 +4,14 @@ import { FolderAddOutlined, FileOutlined } from '@ant-design/icons';
 
 import './SquareItem.less';
 
-const colors = [
-  'from-orange-400 to-pink-600',
-  'from-fuchsia-500 to-purple-600',
-  'from-purple-500 to-indigo-500',
-  'from-cyan-400 to-lightBlue-500',
-  'from-green-400 to-cyan-500',
-  'from-yellow-400 to-orange-500',
-];
+// const colors = [
+//   'from-orange-400 to-pink-600',
+//   'from-fuchsia-500 to-purple-600',
+//   'from-purple-500 to-indigo-500',
+//   'from-cyan-400 to-lightBlue-500',
+//   'from-green-400 to-cyan-500',
+//   'from-yellow-400 to-orange-500',
+// ];
 
 class SquareItem extends React.Component {
 
@@ -21,14 +21,13 @@ class SquareItem extends React.Component {
       if (item.dbType === 'Dir') {
         onClick(item);
       } else {
-        //通过资产id跳转到资产详情页
-        // item.tableModelId
+        
       }
     }
   }
 
   render() {
-    const { item, index } = this.props;
+    const { item } = this.props;
 
     const title = (item.dbType==='Dir') ? (item.dirName||'') : (item.cnName||'');
     const content = (item.dbType==='Dir') ? item.tableModelCount : (item.enName||'');

src/view/Manage/Map/MapContent.jsx

 import React from 'react';
-import { Row, Col, Breadcrumb, Select, Typography } from 'antd';
+import { Row, Col, Breadcrumb, Select, Typography, List } from 'antd';
 import { HomeOutlined } from '@ant-design/icons';
+import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
+import VList from 'react-virtualized/dist/commonjs/List';
+import InfiniteLoader from 'react-virtualized/dist/commonjs/InfiniteLoader';
 
 import SquareItem from './Component/SquareItem';
 import Org from './Component/Org';
@@ -8,8 +11,8 @@ import Tree from './Component/Tree';
 import Relation from './Component/Relation';
 import { dispatch, dispatchLatest } from '../../../model';
 
-// const column = 4;
-const defaultLoadCount = 10;
+const column = 4;
+const defaultLoadCount = column*3;
 
 class MapContent extends React.Component {
 
@@ -27,9 +30,12 @@ class MapContent extends React.Component {
       breadcrumbContents: null,
       currentLevel: 1,
       totalLevel: 1,
+      haveMoreData: false,
     };
   }
 
+  loadedRowsMap = {};
+
   componentDidMount() {
     this.getTreeTotalLevelThenQueryAllDirectoryAsTreeByDirLevel();
   }
@@ -82,9 +88,12 @@ class MapContent extends React.Component {
 
         this.convertRemoteData(_treeData.children||[], _treeData.id, _treeData.dirId);
 
+        const _curTableModelData = (_treeData.children||[]).filter(item => item.dbType!=='More');
+
         this.setState({
-          curTableModelData: data || [],
-          breadcrumbContents: [{ data: data || [] }],
+          curTableModelData: _curTableModelData,
+          breadcrumbContents: [{ data: _treeData }],
+          haveMoreData: (_curTableModelData||[]).length===defaultLoadCount,
           //深拷贝 
           orgModelData: JSON.parse(JSON.stringify(_treeData)),
           treeModelData: JSON.parse(JSON.stringify(_treeData)),
@@ -124,28 +133,57 @@ class MapContent extends React.Component {
   setSquareGraphState = (item) => {
     const { breadcrumbContents } = this.state;
 
+    this.loadedRowsMap = {};
     this.setState({
-      breadcrumbContents: [...breadcrumbContents, { name: item.dirName || '', data: item.children || [] }],
+      breadcrumbContents: [...breadcrumbContents, { name: item.dirName || '', data: item }],
       curTableModelData: item.children || [],
     });
   }
 
-  onSquareItemClick = (item) => {
-    if (!item.children) {
+  handleInfiniteOnLoad = ({ startIndex, stopIndex }) => {
+    const { haveMoreData, curTableModelData } = this.state;
+    
+    for (let i = startIndex; i <= stopIndex; i++) {
+      this.loadedRowsMap[i] = 1;
+    }
+
+    if (haveMoreData) {
+
+      const lastItem = curTableModelData[curTableModelData.length-1];
+
       dispatchLatest({
-        type: 'map.getTableModelByDirIid',
-        payload: { dirId: item.dirId },
+        type: 'map.getTableModelInfoByDirIdAndBeginIndex',
+        payload: { 
+          dirId: lastItem.pDirId,
+          beginIndex: Number(lastItem.index)+2,
+          topNum: defaultLoadCount 
+        },
         callback: data => {
+          this.convertRemoteData(data||[], '', lastItem.pDirId, Number(lastItem.index)+1);
+          const _data = (data||[]).filter(item => item.dbType!=='More');
 
-          this.convertRemoteData(data || [], item.dirId);
-          item.children = (data || []);
-          this.setSquareGraphState(item);
+          this.setState({ 
+            curTableModelData: [...curTableModelData, ...(_data||[])],
+            haveMoreData: (_data||[]).length===defaultLoadCount,
+          });
         }
       })
-      return;
     }
+  };
 
-    this.setSquareGraphState(item);
+  isRowLoaded = ({ index }) => !!this.loadedRowsMap[index];
+
+  onSquareItemClick = (item) => {
+    dispatchLatest({
+      type: 'map.getTableModelByDirIid',
+      payload: { dirId: item.dirId },
+      callback: data => {
+
+        this.convertRemoteData(data || [], item.id, item.dirId);
+        item.children = (data || []).filter(item => item.dbType!=='More');
+        this.setSquareGraphState(item);
+      }
+    })
   }
 
   onBreadcrumbItemClick = (content, index) => {
@@ -153,7 +191,21 @@ class MapContent extends React.Component {
 
     this.setState({
       breadcrumbContents: breadcrumbContents.splice(0, index === 0 ? 1 : (index + 1)),
-      curTableModelData: content.data || [],
+    }, () => {
+      const item = content.data;
+      dispatchLatest({
+        type: 'map.getTableModelByDirIid',
+        payload: { dirId: item.dirId },
+        callback: data => {
+  
+          this.convertRemoteData(data || [], item.id, item.dirId);
+          item.children = (data || []).filter(item => item.dbType!=='More');
+          this.loadedRowsMap = {};
+          this.setState({
+            curTableModelData: item.children || [],
+          });
+        }
+      })
     })
   }
 
@@ -207,10 +259,38 @@ class MapContent extends React.Component {
 
   }
 
+  renderItem = ({ index, key, style }) => {
+    const { curTableModelData } = this.state;
+    const group = curTableModelData.slice(index*column, index*column+column);
+    return (
+      <List.Item key={key} style={style}>
+        <Row gutter={10} style={{ width: '100%' }}>
+          {
+            group && group.map((item, index) => {
+              return (
+                <Col key={index} span={24 / column}
+                >
+                  <SquareItem item={item} onClick={this.onSquareItemClick} {...this.props} />
+                </Col>
+              )
+            })
+          }
+        </Row>
+      </List.Item>
+    );
+  };
+
   render() {
     const { type, topic, switchMode } = this.props;
     const { curTableModelData, breadcrumbContents, orgModelData, treeModelData, relationModelData, orgChildData, treeChildData, relationChildData, parentNodeId, currentLevel, totalLevel } = this.state;
 
+    let groups = [];
+    if (curTableModelData) {
+      for (var i = 0; i < curTableModelData.length; i += column) {
+        groups.push(curTableModelData.slice(i, i + column));
+      }
+    }
+
     if (type === 'square') {
       return (
         <div className='position-relative p-3 from-blueGray-200 bg-gradient-to-b' style={{ height: '100%' }}>
@@ -240,25 +320,35 @@ class MapContent extends React.Component {
                   {switchMode}
                 </div>
               </div>
-              <Row gutter={10}>
               {
-                curTableModelData && curTableModelData.map((item, index) => {
-                  return (
-                    <Col className='mt-3' key={index} xs={24} md={8} lg={6}>
-                      <SquareItem item={item} index={index} onClick={this.onSquareItemClick} {...this.props} />
-                    </Col>
-                  )
-                })
+                (curTableModelData||[]).length>0 && <InfiniteLoader
+                  isRowLoaded={this.isRowLoaded}
+                  loadMoreRows={this.handleInfiniteOnLoad}
+                  rowCount={groups.length}>
+                  {({onRowsRendered, registerChild}) => (
+                    <AutoSizer>
+                      {({width, height}) => (
+                        <VList
+                          ref={registerChild}
+                          height={height}
+                          onRowsRendered={onRowsRendered}
+                          rowCount={groups.length}
+                          rowHeight={134}
+                          rowRenderer={this.renderItem}
+                          width={width}
+                        />
+                      )}
+                    </AutoSizer>
+                  )}
+                </InfiniteLoader>
               }
-              </Row>
-              <div style={{ height: 10 }} />
             </>
           }
         </div>
       );
     } else {
       return (
-        <div className='position-relative' style={{ height: '100%', overflow: 'hidden', 
+        <div className='position-relative from-blueGray-200 bg-gradient-to-b' style={{ height: '100%', overflow: 'hidden', 
         //backgroundImage: 'linear-gradient(to bottom left,#2e3b4e,#0d0d13 52%,#0d0d13)' 
         }}>
           {
@@ -304,7 +394,7 @@ class MapContent extends React.Component {
           >
             {switchMode}
             <div className="mt-3">
-              <Typography.Text className="mr-2" style={{ color: '#fff' }}>层数</Typography.Text>
+              <Typography.Text className="mr-2" style={{ color: '#000' }}>层数</Typography.Text>
               {/* <Slider vertical min={1} max={totalLevel} value={currentLevel} onChange={this.onLevelChange} /> */}
               <Select value={currentLevel} onChange={this.onLevelChange} size="small">
                 {Array.from(new Array(totalLevel)).map((_, i) => <Select.Option key={(i+1)} value={(i+1)}>{(i+1)}</Select.Option>)}