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';
import './index.less'
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
const Page = () => {
  const projectType = {
    0: '闸后流量',
    1: '雨量',
    2: '闸前水位',
    3:'闸后水位'
  }

  const bbType = {
    0: '日报表',
    1: '年报表',
  }
  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 < 17) {
          item.sorter = (a,b) => a[`drpH${i + 8}`] - b[`drpH${i + 8}`]
        } else {
          item.sorter = (a,b) => a[`drpH${i - 16}`] - b[`drpH${i - 16}`]
        }
        cols.push({
          ...item,
          key: item.key.replace('rz', 'drp'),
          dataIndex: item.dataIndex.replace('rz', 'drp'),
        })
      }
    })
    return searchVal.type == 1 ? cols : timeColumns
  }, [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 [staData, setStaData] = useState({})
  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 getStaData = async (params) => {
    let obj = {};
     try {
      const res = await httppost2(requsetUrlObjRef.current?.yearSummary, params)
      if (res.code == 200) { 
         res.data.list?.forEach(item => {
           if (!obj[item.date]) {
            let arr = Object.keys(item)
            params.type == 1 ? arr.splice(0,1) :arr.splice(0,2)
            obj[item.date] = arr.map(o => ({[o]:item[o]}))
           } 
         })
         setStaData({...res.data,list:obj})
      }
     } catch (error) {
      console.log(error);
     }
   }
  // 导出
  const exportExcel = () => {
    let params = {
      ...searchVal,
    }
    const fileName =
    (searchVal?.type1 != 1 ?
        `${formatDate(searchVal?.dateRangeSo?.start)} - ${formatDate(searchVal?.dateRangeSo?.end)}` :
         searchVal.year) + projectType[searchVal.type] + bbType[searchVal.type1]
    httppost5(requsetUrlObjRef.current?.export, params).then(res => {

      exportFile(`${fileName}.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,
      yearSummary: type == 1 ? apiurl.gcyx.tjbb.swnbbSummary : ''
    }
    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,
          yearSummary:type == 1 ? apiurl.gcyx.tjbb.jynbbSummary : ''
        }
        break;
      case 2:
        urlObj = obj
        break;
      case 3:
        urlObj = obj
        break;
      default:
        break;
    }
    return urlObj
  }

  const formatDate = (date1) => {
    const date = new Date(date1);
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    
    return year + '年' + month + '月' + day + '日';
  }

  useEffect(() => {
    if (searchVal) {
      const params = { ...searchVal }
      setRequsetUrlObj(getUrl(searchVal.type, searchVal.type1))
      requsetUrlObjRef.current = getUrl(searchVal.type, searchVal.type1)
      getData(params)
    }
    if (searchVal.type1 == 1) {
      getStaData(searchVal)
    }
  }, [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?.type1 != 1 ? `${formatDate(searchVal?.dateRangeSo?.start)} - ${formatDate(searchVal?.dateRangeSo?.end)}` : searchVal.year}{projectType[searchVal.type]}{bbType[searchVal.type1]}</h2>
                  <div style={{ textAlign: "right" }}>单位：{searchVal?.type != 1 ? 'm' : 'mm'}</div>
                </>
              )}
              columns={searchVal.type1 == 0 ? newTimeColumns : searchVal.type1 == 1 ? yearColumns : yearColumns}
              rowKey="date"
              dataSource={data}
              pagination={false}
              scroll={{ x: width, y: "calc( 100vh - 650px )" }}
              summary={(pageData) => {
                return (
                  searchVal.type1 == 1 ?
                  searchVal.type != 1 ?
                  <Table.Summary fixed>
                    <Table.Summary.Row>
                      <Table.Summary.Cell index={100} align='center'  className="xyt-custom-cell">
                        <div className='table-summary-ceil'>
                          <div className='summary-left'></div>
                          <div className='summary-right'>平均</div>
                        </div>
                      </Table.Summary.Cell>
                      {staData?.list?.["平均"]?.map((item, index) => (
                        <Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
                      )
                      )}
                    </Table.Summary.Row>
                    <Table.Summary.Row>
                      <Table.Summary.Cell index={121} align='center' className="xyt-custom-cell">
                        <div className='table-summary-ceil'>
                          <div className='summary-left'></div>
                          <div className='summary-right'>最高</div>
                        </div>
                      </Table.Summary.Cell>
                      {staData?.list?.["最高"]?.map((item, index) => (
                        <Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
                      )
                      )}
                    </Table.Summary.Row>
                    <Table.Summary.Row>
                      <Table.Summary.Cell index={46} align='center' className="xyt-custom-cell">
                        <div className='table-summary-ceil'>
                          <div className='summary-left'>月统计</div>
                          <div className='summary-right'>最高日期</div>
                        </div>
                      </Table.Summary.Cell>
                      {staData?.list?.["最高日期"]?.map((item, index) => (
                        <Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
                      )
                      )}
                    </Table.Summary.Row>
                    <Table.Summary.Row>
                      <Table.Summary.Cell index={156} align='center' className="xyt-custom-cell">
                        <div className='table-summary-ceil'>
                          <div className='summary-left'></div>
                          <div className='summary-right'>最低</div>
                        </div>
                      </Table.Summary.Cell>
                      {staData?.list?.["最低"]?.map((item, index) => (
                        <Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
                      )
                      )}
                    </Table.Summary.Row>
                    <Table.Summary.Row>
                      <Table.Summary.Cell index={155} align='center' className="xyt-custom-cell" >
                        <div className='table-summary-ceil'>
                          <div className='summary-left'></div>
                          <div className='summary-right'>最低日期</div>
                        </div>
                      </Table.Summary.Cell>
                      {staData?.list?.["最低日期"]?.map((item, index) => (
                        <Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
                      )
                      )}
                    </Table.Summary.Row>
                    <Table.Summary.Row>
                        <Table.Summary.Cell index={200} align='center' >年统计</Table.Summary.Cell>
                        <Table.Summary.Cell index={1} align='center' >最高水位</Table.Summary.Cell>
                        <Table.Summary.Cell index={2} align='center' colSpan={3}>{staData?.max}</Table.Summary.Cell>
                        <Table.Summary.Cell index={3} align='center'>最低水位</Table.Summary.Cell>
                        <Table.Summary.Cell index={4} align='center' colSpan={3}>{staData?.min}</Table.Summary.Cell>
                        <Table.Summary.Cell index={3} align='center'>平均水位</Table.Summary.Cell>
                        <Table.Summary.Cell index={4} align='center' colSpan={3}>{staData?.avg}</Table.Summary.Cell>
                    </Table.Summary.Row>
                  </Table.Summary> :
                   <Table.Summary fixed>
                   <Table.Summary.Row>
                     <Table.Summary.Cell index={100} align='center' >月降雨量</Table.Summary.Cell>
                     {staData?.list?.["月降雨量"]?.map((item, index) => (
                       <Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
                     )
                     )}
                   </Table.Summary.Row>
                   <Table.Summary.Row>
                     <Table.Summary.Cell index={21} align='center' >降雨日数</Table.Summary.Cell>
                     {staData?.list?.["降雨日数"]?.map((item, index) => (
                       <Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
                     )
                     )}
                   </Table.Summary.Row>
                   <Table.Summary.Row>
                     <Table.Summary.Cell index={22} align='center' >最大日量</Table.Summary.Cell>
                     {staData?.list?.["最大日量"]?.map((item, index) => (
                       <Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
                     )
                     )}
                   </Table.Summary.Row>
                   <Table.Summary.Row>
                     <Table.Summary.Cell index={12} align='center' >年统计</Table.Summary.Cell>
                       <Table.Summary.Cell index={1} align='center' colSpan={3}>降水量</Table.Summary.Cell>
                       <Table.Summary.Cell index={2} align='center' colSpan={3}>{staData?.drpSum}</Table.Summary.Cell>
                       <Table.Summary.Cell index={3} align='center' colSpan={3}>降雨日数</Table.Summary.Cell>
                       <Table.Summary.Cell index={4} align='center' colSpan={3}>{staData?.dayCount}</Table.Summary.Cell>
                   </Table.Summary.Row>
                 </Table.Summary>
                  : null
                )
              }}
            />
             
          </div>
        </div>
      </div>
    </>
  );
}

export default Page;