tsg-web/src/views/gcaqjc/sjtjcx/ndwytjb/table.js

import { Table } from 'antd';
import classNames from 'classnames';
import ResizeObserver from 'rc-resize-observer';
import React, { useEffect, useRef, useState } from 'react';
import { VariableSizeGrid as Grid } from 'react-window';
const VirtualTable = (props) => {
  const { columns, scroll, table2Data } = props;
  debugger
  const [tableWidth, setTableWidth] = useState(0);
  const widthColumnCount = columns.filter(({ width }) => !width).length;
  const mergedColumns = columns.map((column) => {
    if (column.width) {
      return column;
    }
    return {
      ...column,
      width: Math.floor(tableWidth / widthColumnCount),
    };
  });
  console.log("mergedColumns", mergedColumns);
  console.log("props",{...props});
  
  
  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 * 54;
    return (
      <Grid
        ref={gridRef}
        className="virtual-grid"
        columnCount={mergedColumns.length}
        columnWidth={(index) => {
          const { width } = mergedColumns[index];
          let myWidth = width
          if(mergedColumns[index]?.children?.length>0){
            myWidth = width*(mergedColumns[index]?.children?.length)
          }
          return totalHeight > scroll.y && index === mergedColumns.length - 1
            ? myWidth - scrollbarSize - 1
            : myWidth;
        }}
        height={scroll.y}
        rowCount={rawData.length}
        rowHeight={() => 54}
        width={tableWidth}
        onScroll={({ scrollLeft }) => {
          onScroll({
            scrollLeft,
          });
        }}
      >
        {({ columnIndex, rowIndex, style }) => {
          return (
            <div
              className={classNames('virtual-table-cell', {
                'virtual-table-cell-last': columnIndex === mergedColumns.length - 1,
              })}
              style={{...style,textAlign:'center'}}
            >
              {rawData[rowIndex][mergedColumns[columnIndex].dataIndex]}
            </div>
          )
        }}
      </Grid>
    );
  };
  return (
    <ResizeObserver
      onResize={({ width }) => {
        setTableWidth(width);
      }}
    >
      <Table
        {...props}
        className="virtual-table"
        columns={mergedColumns}
        pagination={false}
        components={{
          body: renderVirtualList,
        }}
        summary={(pageData) => {
          return(
            <Table.Summary fixed>
              <Table.Summary.Row>
                <Table.Summary.Cell index={0}  align='center' ></Table.Summary.Cell>
                <Table.Summary.Cell  index={1} align='center'>最大值</Table.Summary.Cell>
                {table2Data?.length > 0 && table2Data.map((item,i) =>
                  <Table.Summary.Cell index={i +1} align='center'>{item?.maxValue ?? "-"}</Table.Summary.Cell>)}
              </Table.Summary.Row>
              <Table.Summary.Row>
                <Table.Summary.Cell index={0} align='center' ></Table.Summary.Cell>
                <Table.Summary.Cell index={1} align='center'>日期</Table.Summary.Cell>
                {table2Data?.length > 0 && table2Data.map((item,i) =>
                  <Table.Summary.Cell index={i +1} align='center'>{item?.maxTm?? "-"}</Table.Summary.Cell>)}
              </Table.Summary.Row>
              <Table.Summary.Row >
                <Table.Summary.Cell index={0} align='center' className='total-col'>全年度特征值统计</Table.Summary.Cell>
                <Table.Summary.Cell  index={1} align='center'>最小值</Table.Summary.Cell>
                {table2Data?.length > 0 && table2Data.map((item,i) =>
                  <Table.Summary.Cell index={i +1} align='center'>{item?.minValue ?? "-"}</Table.Summary.Cell>)}
              </Table.Summary.Row>
              <Table.Summary.Row>
                <Table.Summary.Cell index={0} align='center' ></Table.Summary.Cell>
                <Table.Summary.Cell index={1} align='center'>日期</Table.Summary.Cell>
                {table2Data?.length > 0 && table2Data.map((item,i) =>
                  <Table.Summary.Cell index={i +1} align='center'>{item?.minTm?? "-"}</Table.Summary.Cell>)}
              </Table.Summary.Row>
              <Table.Summary.Row>
                <Table.Summary.Cell index={0} align='center' ></Table.Summary.Cell>
                <Table.Summary.Cell index={1} align='center'>年变幅</Table.Summary.Cell>
                {table2Data?.length > 0 && table2Data.map((item,i) =>
                  <Table.Summary.Cell index={i +1} align='center'>{item?.diff?? "-"}</Table.Summary.Cell>)}
              </Table.Summary.Row>
            </Table.Summary>
          )
        }}
      />
    </ResizeObserver>
  );
};

const App = ({columns,dataSource,width,loading,table2Data}) => (
  <VirtualTable
    columns={columns}
    dataSource={dataSource}
    rowKey="inx"
    loading={loading}
    table2Data={table2Data}
    pagination={false}
    scroll={{
      y: 450,
      x: 8000,
    }}
  />
);
export default App;