tsg-web/src/views/rcgl/btbb/rjswnbb/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 { useSelector } from 'react-redux';
import ToolBar from './toolbar';
import apiurl from '../../../../service/apiurl';
import usePageTable from '../../../../components/crud/usePageTable2';
import { createCrudService } from '../../../../components/crud/_';
import { exportFile } from '../../../../utils/tools.js';
import { httppost2, httppost5 } from '../../../../utils/request';
import { ylFontColor } from '../../../../utils/dictType'
import "./index.less"
const url = "http://223.75.53.141:9100/gs-tsg"
const Page = () => {
  const role = useSelector(state => state.auth.role);
  const [searchVal, setSearchVal] = useState(false)
  const columns = [
    { title: '日期', key: 'date', dataIndex: 'date', width: 200, align: "center", fixed: "left" },
    ...Array(12).fill(0).map((item,index) => ({
      title: `${index+1}月`,
      key: `drpM${index+1}`,
      dataIndex: `drpM${index+1}`,
      width: 90,
      align: "center",
      render: (text, record) => <span>{text ?? '-'}</span>

    }))
  ];
  const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
  const [data, setData] = useState([])
  const [staData, setStaData] = useState({})
  const getData = async (params) => {
    try {
      const res = await httppost2(apiurl.rcgl.btbb.rjswnbb.page, params)
      if (res.code == 200) { 
        setData(res.data)
      }
    } catch (error) {
      console.log(error);
      
    }
  }

  const exportExcel = () => {
    let params = {
      ...searchVal,
    }
    httppost5(apiurl.rcgl.btbb.rjswnbb.export, params).then(res => {
      exportFile(`日均水位年报表.xlsx`,res.data)
  })
  }

  const getStaData = async (params) => {
    let obj = {};
     try {
      const res = await httppost2(apiurl.rcgl.btbb.rjswnbb.sta, params)
      if (res.code == 200) { 
         res.data.list?.forEach(item => {
           if (!obj[item.date]) {
            let arr = Object.keys(item)
            arr.splice(0,2)
            obj[item.date] = arr.map(o => ({[o]:item[o]}))
           } 
         })
         setStaData({...res.data,list:obj})
      }
     } catch (error) {
      console.log(error);
     }
   }


  useEffect(() => {
    if (searchVal) {
      const params = {
          ...searchVal,
      }; 
      getData(params)
      getStaData(params)
    }
  }, [searchVal])
  
  
  return (
    <>
      <div className='content-root clearFloat xybm' style={{paddingRight:"10px",paddingBottom:"0"}}>
        <div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
          <Card className='nonebox'>
            <ToolBar
              setSearchVal={setSearchVal}
              exportFile={exportExcel}
              role={role}
            />
          </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</div>
                </>
              )}
              columns={columns}
              rowKey="date"
              dataSource={data}
              pagination={false}
              scroll={{ x: width, y: "calc( 100vh - 600px )" }}
              summary={(pageData) => {
                return(
                  <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>
                )
              }}
            />
          </div>
        </div>
      </div>
    </>
  );
}

export default Page;