tsg-web/src/views/gcaqjc/sjtjcx/ndwytjb/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 [trData, setTrData] = useState([])
  const [table2Data, setTable2Data] = useState([])
  const [loading, setLoading] = useState(false)
  const wyList = ["X","Y","H"]
  const columns1 = [
    { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
  ];
  const columns2 = [
    { title: '监测日期', key: 'tm', dataIndex: 'tm', width: 150, align:"center" },
  ];
 
 
  const getDmTree = async() => {
    try {
      const res = await httppost2(apiurl.gcaqjc.sjtjcx.ndwytjb.list)
      setTrData(res.data)
    } catch (error) {
      console.log(error);
    }
  }
  const newCols = useMemo(() => {
    if (trData.length > 0) {
      let dm = trData?.map(item => (
        {
          title: item.stationCode,
          width: 100,
          align: "center",
          children: wyList?.map(s => ({
            title: s,
            key: `${s}_${item.stationCode}`,
            dataIndex: `${s}_${item.stationCode}`,
            width: 100,
            align: "center",
            render: (rec, record) => <span>{rec?? "-"}</span>
          }))
        }
      ))
      return [...columns1,...columns2, ...dm]
    }
    
  }, [trData])
  
  const getTableData = async (params) => {
    setLoading(true)
    try {
      const res = await httppost2(apiurl.gcaqjc.sjtjcx.ndwytjb.page, params)
      setLoading(false)
      let newArr = [];
      let newData = res.data?.map((s, i) => {
        newArr.push(s.list?.map((c, i) => ({
          [c.stationCode]: c.value || '-',
           [`X_${c.stationCode}`]:c.x || '-',
           [`Y_${c.stationCode}`]:c.y || '-',
           [`H_${c.stationCode}`]:c.h || '-',
         tm: c.tm,
        })))
        return {
          tm: s.tm,
          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(() => {
    if (newCols?.length > 0) {
      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.ndwytjb.export, params).then(res => {
      exportFile(`年度位移统计表.xlsx`,res.data)
  })
  }
  const getTable2Data = async (params) => {
    try {
      const res = await httppost2(apiurl.gcaqjc.sjtjcx.ndwytjb.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),
      };
      getTableData(params)
      
    }
  }, [searchVal,trData])
  
  useEffect(() => {
    if (trData && trData?.length > 0) { 
      let params = {
        ...searchVal,
        stationCodes:trData.map(s => s.stationCode),
      }
      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;