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, httppost2 } 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 [requsetUrlObj, setRequsetUrlObj] = useState({})
  const requsetUrlObjRef = useRef(null)
  requsetUrlObjRef.current = requsetUrlObj;
  const timeColumns = [
    { title: '日期', key: 'date', dataIndex: 'date', width: 120, align: "center", fixed: "left" },
    ...Array(16).fill(0).map((item, index) => ({
      title: `${index + 9}时`,
      key: `rzH${index + 9}`,
      dataIndex: `rzH${index + 9}`,
      width: 80,
      align: "center",
      sorter: (a, b) => a[`rzH${index + 9}`] - b[`rzH${index + 9}`]
    })),
    ...Array(8).fill(0).map((item, index) => ({
      title: `${index + 1}时`,
      key: `rzH${index + 1}`,
      dataIndex: `rzH${index + 1}`,
      width: 80,
      align: "center",
      sorter: (a, b) => a[`rzH${index + 1}`] - b[`rzH${index + 1}`]
    })),
    { title: '平均', key: 'rzAvg	', dataIndex: 'rzAvg', width: 100, align: "center", sorter: (a, b) => a.rzAvg	 - b.rzAvg},
  ];

  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 newTimeColumns = useMemo(() => {
    const changeColumns = JSON.parse(JSON.stringify(timeColumns));
    changeColumns[changeColumns.length - 1] = {
      title: '日累计',
      key: 'drpD',
      dataIndex: 'drpD',
      width: 100,
      align: 'center',
      sorter: (a, b) => a.drpD	 - b.drpD
    }
    const cols = [changeColumns[0]];
    changeColumns.forEach((item, i) => {
      if (i > 0) {
        if (i < 16) {
          item.sorter = (a,b) => a[`drpH${i + 9}`] - b[`drpH${i + 9}`]
        } else {
          item.sorter = (a,b) => a[`drpH${i + 1}`] - b[`drpH${i + 1}`]
        }
        cols.push({
          ...item,
          key: item.key.replace('rz', 'drp'),
           dataIndex: item.dataIndex.replace('rz', 'drp'),
          })
      }
    })
    return searchVal.type == 1 ? cols :timeColumns
  }, [searchVal])

  // const newYearColumns = useMemo(() => {
  //   return searchVal.type == 1 ? yearColumns.map(item => ({ ...item, key: item.key.replace('rz', 'drp'), dataIndex: item.dataIndex.replace('rz', 'drp') })) : yearColumns
  // }, [searchVal])

  const width = useMemo(() => {
    let columns = searchVal.type1 == 0 ? timeColumns : searchVal.type1 == 1 ? yearColumns : yearColumns;
    return columns.reduce((total, cur) => total + (cur.width), 0)
  }, [searchVal]);


  const [data, setData] = useState([])
  const getData = async (params) => {
    try {
      const res = await httppost2(requsetUrlObjRef.current?.page, params)
      if (res.code == 200) {
        setData(res.data)
      }
    } catch (error) {
      console.log(error);

    }
  }
  // 导出
  const exportExcel = () => {
    let params = {
      ...searchVal,
    }
    httppost5(requsetUrlObjRef.current?.export, params).then(res => {
      exportFile(`统计报表.xlsx`, res.data)
    })
  }

  const getUrl = (name, type) => {
    let urlObj;
    let obj = {
      page: type == 0 ? apiurl.gcyx.tjbb.swrbb : apiurl.gcyx.tjbb.swnbb,
      export: type == 0 ? apiurl.gcyx.tjbb.swrbbExport : apiurl.gcyx.tjbb.swnbbExport
    }
    switch (name) {
      case 0:
        urlObj = obj
        break;
      case 1:
        urlObj = {
          page: type == 0 ? apiurl.gcyx.tjbb.jyrbb : apiurl.gcyx.tjbb.jynbb,
          export: type == 0 ? apiurl.gcyx.tjbb.jyrbbExport : apiurl.gcyx.tjbb.jynbbExport
        }
        break;
      case 2:
        urlObj = obj
        break;
      case 3:
        urlObj = obj
        break;
      default:
        break;
    }
    return urlObj
  }
  useEffect(() => {
    if (searchVal) {
      // const params = searchVal.type != 1 ? searchVal : { start: searchVal.dateRangeSo.start, end: searchVal.dateRangeSo.end };
      const params = { ...searchVal }
      setRequsetUrlObj(getUrl(searchVal.type, searchVal.type1))
      requsetUrlObjRef.current = getUrl(searchVal.type, searchVal.type1)
      getData(params)
    }
  }, [searchVal])


  return (
    <>
      <div className='content-root clearFloat xybm' style={{ 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 ? newTimeColumns : searchVal.type1 == 1 ? yearColumns : yearColumns}
              rowKey="date"
              dataSource={data}
              pagination={false}
              scroll={{ x: width, y: "calc( 100vh - 400px )" }} />
          </div>
        </div>
      </div>
    </>
  );
}

export default Page;