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: '年报表',
    2:'月报表'
  }
  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", render: (v, r, i) => <span>{v ? `${v}号`: ''}</span>},
    {title: '监测值', key: 'data', dataIndex: 'data', width: 120, 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 == 0 ?
        `${formatDate(searchVal?.dateRangeSo?.start)} - ${formatDate(searchVal?.dateRangeSo?.end)}` :
        searchVal?.type1 == 1 ?formatDate(searchVal.year):
        formatDate(searchVal.yearMonth)) + 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 : type == 1 ?apiurl.gcyx.tjbb.swnbbExport: apiurl.gcyx.tjbb.swybbExport,
      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 :type == 1 ? apiurl.gcyx.tjbb.jynbbExport: apiurl.gcyx.tjbb.swybbExport,
          yearSummary: type == 1 ? apiurl.gcyx.tjbb.jynbbSummary : ''
        }
        break;
      case 2:
        urlObj = obj
        break;
      case 3:
        urlObj = obj
        break;
      default:
        break;
    }
    return urlObj
  }

   const [monthData, setMonthData] = useState([])
  const getMonthData = async (params) => {
    try {
      const res = await httppost2(apiurl.gcyx.tjbb.swybb, params)
      if (res.code == 200) {
        const silceData = res.data.slice(-3)
        setData(res.data.slice(0,-3))
        setMonthData(silceData)
      }
    } catch (error) {
      console.log(error);
    }
  }
  const formatDate = (date1) => {
    const date = new Date(date1);
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const res = searchVal.type1 == 0 ? year + '年' + month + '月' + day + '日' :
      searchVal.type1 == 1 ? year + '年' :
        year + '年' + month + '月'
    return res;
  }

  useEffect(() => {
    setRequsetUrlObj(getUrl(searchVal.type, searchVal.type1))
    requsetUrlObjRef.current = getUrl(searchVal.type, searchVal.type1)
    if (searchVal && searchVal.type1 != 1 && searchVal.type1 != 2) {
      const params = { ...searchVal }
   
      getData(params)
    }
    if (searchVal.type1 == 1) {
      getStaData(searchVal)
    }

    if (searchVal.type1 == 2) {
      getMonthData(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 == 0 ?
                      `${formatDate(searchVal?.dateRangeSo?.start)} - ${formatDate(searchVal?.dateRangeSo?.end)}` :
                      searchVal?.type1 == 1 ?
                      formatDate(searchVal.year):formatDate(searchVal.yearMonth)
                    }
                    {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 : dayColumns}
              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>
                    :
                    searchVal.type1 == 2 ?<Table.Summary fixed>
                      <Table.Summary.Row>
                      <Table.Summary.Cell index={12} align='center' >月平均</Table.Summary.Cell>
                        <Table.Summary.Cell index={12} align='center' >{monthData[0]?.data}</Table.Summary.Cell>
                      </Table.Summary.Row>
                      <Table.Summary.Row>
                      <Table.Summary.Cell index={12} align='center' >月最大</Table.Summary.Cell>
                      <Table.Summary.Cell index={12} align='center' >{monthData[1]?.data}</Table.Summary.Cell>
                      </Table.Summary.Row>
                      <Table.Summary.Row>
                      <Table.Summary.Cell index={12} align='center' >月最小</Table.Summary.Cell>
                      <Table.Summary.Cell index={12} align='center' >{monthData[2]?.data}</Table.Summary.Cell>
                      </Table.Summary.Row>
                    </Table.Summary>:null
                )
              }}
            />

          </div>
        </div>
      </div>
    </>
  );
}

export default Page;