tsg-web/src/views/gcaqjc/sjtjcx/ndsltjb/index.js

import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import { Table, Card,Modal,Form,Input,Button,Row,Col,message } from 'antd';
import { useSelector } from 'react-redux';
import ToolBar from './toolbar';
import apiurl from '../../../../service/apiurl';
import { exportFile } from '../../../../utils/tools.js';
import { httppost2,httppost5 } from '../../../../utils/request';
import "./index.less"
const Page = () => {
  const role = useSelector(state => state.auth.role);

  const [searchVal, setSearchVal] = useState(false)
  const [dataSource, setDataSource] = useState([])
  const [dmName, setDmName] = useState("")
  const [trData, setTrData] = useState([])
  const [table2Data, setTable2Data] = useState([])
  const [loading, setLoading] = useState(false)
  const columns1 = [
    { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
  ];
  const columns2 = [
    { title: '监测日期', key: 'tm', dataIndex: 'tm', width: 150, align:"center" },
  ];
  const columns3 = [
    {
      title: '库水位(m)', key: 'rz', dataIndex: 'rz', width: 100, align: "center",
      render: (rec, record) => <span>{ rec ?? "-"}</span>
     },
  ];
  const columns4 = [
    {
      title: '降雨量(mm)', key: 'drp', dataIndex: 'drp', width: 120, align: "center",
      render: (rec, record) => <span>{ rec ?? "-"}</span>
    },
  ];
 
  const getDmTree = async() => {
    try {
      const res = await httppost2(apiurl.gcaqjc.sjtjcx.ndsltjb.list)
      setTrData(res.data)
    } catch (error) {
      console.log(error);
    }
  }
  const newCols = useMemo(() => {
    if (trData.length > 0) {
      let dm = {
        title: `渗流量(L/s)`,
        width: 100,
        align: "center",
        children: trData?.map(item => ({
          title: item.stationCode,
          key: item.stationCode,
          dataIndex: item.stationCode,
          width: 100,
          align: "center",
          render: (rec, record) => <span>{rec?? "-"}</span>
        }))
      }
      return [...columns1,...columns2, dm,...columns3, ...columns4]
    }
    
  }, [dmName,trData])
  
  const getTableData = async (params) => {
    setLoading(true)
    try {
      const res = await httppost2(apiurl.gcaqjc.sjtjcx.ndsytjb.page, params)
      setLoading(false)
      let newArr = [];
      let newData = res.data?.map((s, i) => {
       newArr.push(s.list?.map(c => ({
         [c.stationCode]: c.value || '-',
         tm:c.tm
        })))
        return {
          tm: s.tm,
          rz: s.rz,
          inx:i+1
        }
      })
      let filterData = newArr?.filter(s => s.length > 0).flat()
      let result = newData?.map(s => {
        let tm1 = s.tm;
        let r = filterData.filter(t => {
         return t.tm == tm1
        })
        let obj = {};
        r.forEach(s1 => {
         obj = {...s1,...obj}
        })
        return {
          ...s,
          ...obj,
        }
      })
      setDataSource(result)
    } catch (error) {
      console.log(error);
    }
  }
  const width = useMemo(() => {
    return  newCols?.reduce((total, cur) => total + (cur.width), 0)
  }, [newCols]);
  const exportExcel = () => {
    let params = {
      ...searchVal,
      stationCodes: trData.map(s => s.stationCode),
      type:2,
      id:1
    }
    httppost5(apiurl.gcaqjc.sjtjcx.ndsytjb.export, params).then(res => {
      exportFile(`年度渗流量统计表.xlsx`,res.data)
  })
  }
  const getTable2Data = async (params) => {
    try {
      const res = await httppost2(apiurl.gcaqjc.sjtjcx.ndsytjb.list1, params)
      setTable2Data(res.data)
    } catch (error) {
      console.log(error);
    }
  }
  useEffect(() => {
    if (trData && trData.length > 0) {
      const params = {
        ...searchVal,
        stationCodes: trData.map(s => s.stationCode),
        type:2
      };
      getTableData(params)
      
    }
  }, [searchVal,trData])
  
  useEffect(() => {
    if (trData && trData?.length > 0) { 
      let params = {
        ...searchVal,
        stationCodes:trData.map(s => s.stationCode),
        type:2
      }
      getTable2Data(params)
    }
  }, [trData])
  
  useEffect(() => {
    getDmTree()
  }, [])
  
  return (
    <>
      <div className='content-root clearFloat xybm' style={{paddingRight:"10px",paddingBottom:"0"}}>
        <div className='lf CrudAdcdTreeTableBox' style={{ width: "100%" }}>
          <Card className='nonebox'>
            <ToolBar
              setSearchVal={setSearchVal}
              exportFile={exportExcel}
              role={role}
            />
          </Card>
          <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
            <Table
              columns={newCols}
              rowKey="inx"
              loading={loading}
              scroll={{ x: width, y: "calc( 100vh - 500px )" }}
              dataSource={dataSource}
              pagination={false}
              summary={(pageData) => {
                return(
                  <Table.Summary fixed>
                    <Table.Summary.Row>
                      <Table.Summary.Cell index={0}  align='center' ></Table.Summary.Cell>
                      <Table.Summary.Cell  index={1} align='center'>最大值</Table.Summary.Cell>
                      {table2Data?.length > 0 && table2Data.map((item,i) =>
                        <Table.Summary.Cell index={i +1} align='center'>{item?.maxValue ?? "-"}</Table.Summary.Cell>)}
                    </Table.Summary.Row>
                    <Table.Summary.Row>
                      <Table.Summary.Cell index={0} align='center' ></Table.Summary.Cell>
                      <Table.Summary.Cell index={1} align='center'>日期</Table.Summary.Cell>
                      {table2Data?.length > 0 && table2Data.map((item,i) =>
                        <Table.Summary.Cell index={i +1} align='center'>{item?.maxTm?? "-"}</Table.Summary.Cell>)}
                    </Table.Summary.Row>
                    <Table.Summary.Row >
                      <Table.Summary.Cell index={0} align='center' className='total-col'>全年度特征值统计</Table.Summary.Cell>
                      <Table.Summary.Cell  index={1} align='center'>最小值</Table.Summary.Cell>
                      {table2Data?.length > 0 && table2Data.map((item,i) =>
                        <Table.Summary.Cell index={i +1} align='center'>{item?.minValue ?? "-"}</Table.Summary.Cell>)}
                    </Table.Summary.Row>
                    <Table.Summary.Row>
                      <Table.Summary.Cell index={0} align='center' ></Table.Summary.Cell>
                      <Table.Summary.Cell index={1} align='center'>日期</Table.Summary.Cell>
                      {table2Data?.length > 0 && table2Data.map((item,i) =>
                        <Table.Summary.Cell index={i +1} align='center'>{item?.minTm?? "-"}</Table.Summary.Cell>)}
                    </Table.Summary.Row>
                    <Table.Summary.Row>
                      <Table.Summary.Cell index={0} align='center' ></Table.Summary.Cell>
                      <Table.Summary.Cell index={1} align='center'>年变幅</Table.Summary.Cell>
                      {table2Data?.length > 0 && table2Data.map((item,i) =>
                        <Table.Summary.Cell index={i +1} align='center'>{item?.diff?? "-"}</Table.Summary.Cell>)}
                    </Table.Summary.Row>
                  </Table.Summary>
                )
              }}
            />
          </div>
        </div>
      </div>
    </>
  );
}

export default Page;