feat: 表格使用虚拟列表；表格支持不抽稀

package.json

@@ -176,7 +176,9 @@
     "parseForm": "1.0.0",
     "react-redux": "^8.0.5",
     "react-resizable": "^3.0.4",
-    "sha1": "^1.1.1"
+    "sha1": "^1.1.1",
+    "rc-resize-observer": "1.4.0",
+    "react-window": "1.8.9"
   },
   "size-limit": [
     {

packages/extend-components/EC_HistoryView/src/EC_HistoryView.md

@@ -30,7 +30,7 @@ path: /
 
 ## 单图表-频率
 
-<code src="./demos/indexForFrequency.js"></code>
+[//]: # (<code src="./demos/indexForFrequency.js"></code>)
 
 
 

packages/extend-components/EC_HistoryView/src/VirtualTable.js

+import React, {useRef, useState, useEffect} from 'react';
+import BasicTable from "@wisdom-components/basictable";
+import classNames from 'classnames';
+import ResizeObserver from 'rc-resize-observer';
+import {VariableSizeGrid as Grid} from 'react-window';
+import './VirtualTable.less';
+
+const VirtualTable = (props) => {
+    const TABLE_ROW_HEIGHT = 40;
+    const {columns, scroll} = props;
+    const [tableWidth, setTableWidth] = useState(0);
+    const widthColumnCount = columns.filter(({width}) => !width).length;
+    const totalWidth = columns.reduce((final, curr) => {
+        return final += (curr.width ?? 0)
+    }, 0);
+    const mergedColumns = columns.map((column) => {
+        if (totalWidth < tableWidth) {
+            return {
+                ...column,
+                width: Math.floor(tableWidth / totalWidth * column.width),
+            };
+        }
+        if (column.width) {
+            return column;
+        }
+        return {
+            ...column,
+            width: Math.floor(tableWidth / widthColumnCount),
+        };
+    });
+    const gridRef = useRef();
+    const [connectObject] = useState(() => {
+        const obj = {};
+        Object.defineProperty(obj, 'scrollLeft', {
+            get: () => {
+                if (gridRef.current) {
+                    return gridRef.current?.state?.scrollLeft;
+                }
+                return null;
+            },
+            set: (scrollLeft) => {
+                if (gridRef.current) {
+                    gridRef.current.scrollTo({
+                        scrollLeft,
+                    });
+                }
+            },
+        });
+        return obj;
+    });
+    const resetVirtualGrid = () => {
+        gridRef.current?.resetAfterIndices({
+            columnIndex: 0,
+            shouldForceUpdate: true,
+        });
+    };
+    useEffect(() => resetVirtualGrid, [tableWidth]);
+    const renderVirtualList = (rawData, {scrollbarSize, ref, onScroll}) => {
+        ref.current = connectObject;
+        const totalHeight = rawData.length * TABLE_ROW_HEIGHT;
+
+        return (
+            <Grid
+                ref={gridRef}
+                className="virtual-grid"
+                columnCount={mergedColumns.length}
+                columnWidth={(index) => {
+                    const {width} = mergedColumns[index];
+                    return totalHeight > scroll.y && index === mergedColumns.length - 1
+                        ? width - scrollbarSize - 1
+                        : width;
+                }}
+                height={scroll.y}
+                rowCount={rawData.length}
+                rowHeight={() => TABLE_ROW_HEIGHT}
+                width={tableWidth}
+                // width={'100%'}
+                onScroll={({scrollLeft}) => {
+                    onScroll({
+                        scrollLeft,
+                    });
+                }}
+            >
+                {({columnIndex, rowIndex, style}) => (
+                    <div
+                        className={classNames('virtual-table-cell', {
+                            'virtual-table-cell-last': columnIndex === mergedColumns.length - 1,
+                        })}
+                        style={style}
+                    >
+                        {rawData[rowIndex][mergedColumns[columnIndex].dataIndex]}
+                    </div>
+                )}
+            </Grid>
+        );
+    };
+    return (
+        <ResizeObserver
+            onResize={({width}) => {
+                setTableWidth(width);
+            }}
+        >
+            <BasicTable
+                {...props}
+                size={'small'}
+                // className="virtual-table"
+                columns={mergedColumns}
+                pagination={false}
+                components={{
+                    body: renderVirtualList,
+                }}
+            />
+        </ResizeObserver>
+    );
+};
+export default VirtualTable;
\ No newline at end of file

packages/extend-components/EC_HistoryView/src/VirtualTable.less

+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
+.virtual-table .ant-table-container:before,
+.virtual-table .ant-table-container:after {
+  display: none;
+}
+
+.ant-table-thead > tr > th {
+}
+
+.virtual-table-cell {
+  box-sizing: border-box;
+  padding: 16px;
+  border-bottom: 1px solid rgba(224, 234, 251);
+  background: #FFF;
+  text-align: center;
+  line-height: 1;
+
+  &:nth-child(even) {
+  }
+
+  &:nth-child(odd) {
+  }
+}
+
+[data-theme="dark"] .virtual-table-cell {
+  box-sizing: border-box;
+  padding: 16px;
+  border-bottom: 1px solid #303030;
+  background: #141414;
+  text-align: center;
+}
+

packages/extend-components/EC_HistoryView/src/demos/index.js

@@ -4,19 +4,19 @@ import { MobileHistoryChart } from "../mobile";
 
 const deviceParams = [
     /*10.182*/
-         {
+/*         {
             "deviceCode": "EGBF00000136",
             "sensors": "进水压力,出水压力,出水瞬时流量,今日供水量,1#水箱液位,视频报警",
             // "sensors": "视频报警",
             "deviceType": "二供泵房"
-        },
-       {
+        },*/
+/*        {
             "deviceCode": "EGJZ00000158",
             // "sensors": "进水压力,出水压力,泵1状态",
             "sensors": "进水压力",
             // "sensors": "泵1状态",
             "deviceType": "二供机组"
-        }
+        } */
 /*              {
                     deviceCode: 'EGBF00000141',
                     // sensors: '进水压力,出水瞬时流量,出水累计流量',
@@ -75,12 +75,12 @@ const deviceParams = [
             "deviceCode": "SC00000023",
             "sensors": "瞬时流量",
             "deviceType": "水厂"
-        },*/
-/*        {
+        },
+        {
             "deviceCode": "JFJ00000001",
             "sensors": "沉淀池投矾量瞬时,",
             "deviceType": "加矾间"
-        },
+        }, */
        {
             "deviceCode": "QSBF00000001",
             "sensors": "取水浊度",
@@ -101,11 +101,11 @@ const deviceParams = [
             "sensors": "瞬时流量",
             "deviceType": "流量计"
         },
-        {
+/*         {
             deviceCode: 'EGJZ00000027',
             sensors: '2#变频器运行频率',
             deviceType: '二供机组',
-        },*/
+        }, */
     /*确山*/
     /*泵3状态*/
 /*        {
@@ -127,7 +127,7 @@ const Demo = () => {
         <>
             <div>
                 <div style={{ height: 700 }}>
-                    <HistoryView deviceParams={deviceParams} defaultModel="curve" />
+                    <HistoryView deviceParams={deviceParams} defaultModel="table" />
                 </div>
             </div>
         </>

packages/extend-components/EC_HistoryView/src/index.less

@@ -89,6 +89,7 @@
     display: flex;
     flex-direction: column;
   }
+
 }
 
 .@{history-view}-date {