ykzz-web/src/views/Gcyx/InformationSearch/StaticTable/index.js

import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import { Table, Card, Modal, Form, Input, Button, Row,Col, Timeline, message, Tabs,Image } from 'antd';
import ToolBar from './toolbar';
import apiurl from '../../../../service/apiurl';
import usePageTable from '../../../../components/crud/usePageTable2';
import { createCrudService } from '../../../../components/crud/_';
import { httppost5 } from '../../../../utils/request';
import { exportFile } from '../../../../utils/tools.js';

const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
const Page = () => {

  const [searchVal, setSearchVal] = useState(false)
  const timeColumns = [
    { title: '日期', key: 'date', dataIndex: 'date', width: 120, align: "center", fixed: "left" },
    ...Array(16).fill(0).map((item,index) => ({
      title: `${index+9}时`,
      key: `drpH${index+9}`,
      dataIndex: `drpH${index+9}`,
      width: 80,
      align: "center",
      sorter:  (a, b) => a[`drpH${index+9}`] - b[`drpH${index+9}`]
    })),
    ...Array(8).fill(0).map((item,index) => ({
      title: `${index+1}时`,
      key: `drpH${index+1}`,
      dataIndex: `drpH${index+1}`,
      width: 80,
      align: "center",
      sorter:  (a, b) => a[`drpH${index+1}`] - b[`drpH${index+1}`]
    })),
    { title: '日累计', key: 'drpD', dataIndex: 'drpD', width: 100, align: "center",sorter: (a, b) => a.drpD - b.drpD, },

  ];

  const dayColumns = [
    { title: '日期', key: 'date', dataIndex: 'date', width: 120, align: "center", fixed: "left" },
    ...Array(30).fill(0).map((item,index) => ({
      title: `${index+1}天`,
      key: `drpM${index+1}`,
      dataIndex: `drpM${index+1}`,
      width: 100,
      align: "center",
    }))
  ];
  const yearColumns = [
    { title: '日期', key: 'date', dataIndex: 'date', width: 120, align: "center", fixed: "left" },
    ...Array(12).fill(0).map((item,index) => ({
      title: `${index+1}月`,
      key: `drpM${index+1}`,
      dataIndex: `drpM${index+1}`,
      width: 100,
      align: "center",
    }))
  ];
  
  const width = useMemo(() => {
    let columns = searchVal.type1 == 0 ? timeColumns : searchVal.type1 == 1 ? dayColumns : yearColumns;
    return columns.reduce((total, cur) => total + (cur.width), 0)
  }, [searchVal.type1]); 
  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sbwh.whfabz.page).find_noCode);
    // 导出
    const exportExcel = () => {
      let params = {
        ...searchVal,
      }
      httppost5(apiurl.pxjh.export, params).then(res => {
        exportFile(`统计报表.xlsx`,res.data)
    })
    }
  useEffect(()=>{
    const params = {
      search: {
        ...searchVal,
      }
    };
    search(params)
  }, [searchVal])
  
  
  return (
    <>
      <div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
        <div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
          <Card className='nonebox'>
            <ToolBar
              setSearchVal={setSearchVal}
              exportFile1={exportExcel}
            />
          </Card>
          <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
            <Table
              title={() => (
                <>
                  <h2 style={{ textAlign: "center" }}>{searchVal?.year}闸后流量报表</h2>
                  <div style={{ textAlign: "right" }}>单位：m³/s</div>
                </>
              )}
              columns={searchVal.type1 == 0 ? timeColumns : searchVal.type1 == 1 ? dayColumns :yearColumns}
              rowKey="inx"
              {...tableProps}
              scroll={{ x: width, y: "calc( 100vh - 400px )" }} />
          </div>
        </div>
      </div>
    </>
  );
}

export default Page;