tsg-web/src/views/gxsl/gstjfx/index.js

import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import { Table, Card,Modal,Form,Input,Button,Row,Col,message } from 'antd';
import ToolBar from './toolbar';
import { useSelector } from 'react-redux';
import TjToolBar from './toolbar1';
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 ReactEcharts from 'echarts-for-react';
import gsOption from './gsOption';
import tjOption from './tjOption';
import "./index.less"
const Page = () => {
  const role = useSelector(state => state.auth.role);
  const columns = [
    { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
    { title: '时间', key: 'tm', dataIndex: 'tm', width: 200, ellipsis: true, align:"center" },
    {
      title: '发电灌溉',
      align: "center",
      children: [
        {
          title: '流量(m³/s)',
          key: "ecologyQ",
          dataIndex:"ecologyQ",
          align: "center",
        },
        {
          title: '水量(万m³)',
          key: "ecologyV",
          dataIndex:"ecologyV",
          align: "center",
        }
      ]
    },
    {
      title: '水厂取水',
      align: "center",
      children: [
        {
          title: '流量(m³/s)',
          key: "lifeQ",
          dataIndex:"lifeQ",
          align: "center",
        },
        {
          title: '水量(万m³)',
          key: "lifeV",
          dataIndex:"lifeV",
          align: "center",
        }
      ]},  
    {
      title: '小计(万m³)', key: 'sumV', dataIndex: 'sumV',ellipsis: true, align: "center",
      render: (rec, record) => <span style={{color:"#ffa171"}}>{rec}</span>
     },
  ];

  const tjColumns = [
    { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
    { title: '时间', key: 'tm', dataIndex: 'tm', width: 100, ellipsis: true, align:"center" },
    {
      title: '发电灌溉',
      align: "center",
      children: [
        {
          title: '年度占比',
          key: "ecologyYearRateV",
          dataIndex:"ecologyYearRateV",
          align: "center",
        },
   
        {
          title: '水量(万m³)',
          key: "ecologyV",
          dataIndex:"ecologyV",
          align: "center",
          width:100
        },
        {
          title: '同比',
          key: "ecologyYoyV",
          dataIndex:"ecologyYoyV",
          align: "center",
          render: (rec, record) => <span style={{
            color: rec.includes("↑") ? "#38fb45" :
            rec.includes("↓") ? "#e4766b" : "#000"
            
          }}>{rec}</span>
        },
        {
          title: '环比',
          key: "ecologyQoqV",
          dataIndex:"ecologyQoqV",
          align: "center",
          render: (rec, record) => <span style={{
            color: rec.includes("↑") ? "#38fb45" :
            rec.includes("↓") ? "#e4766b" : "#000"
            
          }}>{rec}</span>
        }
      ]
    },
    {
      title: '水厂取水',
      align: "center",
      children: [
        {
          title: '年度占比',
          key: "lifeYearRateV",
          dataIndex:"lifeYearRateV",
          align: "center",
        },
   
        {
          title: '水量(万m³)',
          key: "lifeV",
          dataIndex:"lifeV",
          align: "center",
          width: 100,
          
        },
        {
          title: '同比',
          key: "lifeYoyV",
          dataIndex:"lifeYoyV",
          align: "center",
          render: (rec, record) => <span style={{
            color: rec.includes("↑") ? "#38fb45" :
            rec.includes("↓") ? "#e4766b" : "#000"
            
          }}>{rec}</span>
        },
        {
          title: '环比',
          key: "lifeQoqV",
          dataIndex:"lifeQoqV",
          align: "center",
          render: (rec, record) => <span style={{
            color: rec.includes("↑") ? "#38fb45" :
            rec.includes("↓") ? "#e4766b" : "#000"
            
          }}>{rec}</span>
        }
      ]},  
  ];
  const [searchVal, setSearchVal] = useState(false)
  const [tjSearchVal, setTjSearchVal] = useState()
  const [mode, setMode] = useState('')
  const [krlist, setkrList] = useState([]) //供水图表数据
  const [tjlist, setTjList] = useState([]) //统计分析表格和图表数据
  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.gsxl.gstjfx.gspage).find_noCode);
  
  const exportExcel = () => {
    let pageSo = {
      pageNumber: tableProps.pagination.current,
      pageSize:tableProps.pagination.pageSize
    }
    let params = {
      ...searchVal,
      searchType:mode,
      pageSo
    }
    httppost5(apiurl.gsxl.gstjfx.gsexport, params).then(res => {
      exportFile(`供水水方统计表.xlsx`,res.data)
  })
  }

  const tjExportExcel = () => {
    httppost5(`${apiurl.gsxl.gstjfx.tjexport}?year=${tjSearchVal.year}`).then(res => {
      exportFile(`统计分析表.xlsx`,res.data)
  })
  }
  const getGsChartData = async (parmas) => {
    try {
      const res =await httppost2(apiurl.gsxl.gstjfx.gschartList, parmas)
      setkrList(res.data)
    } catch (error) {
      console.log(error);
    }
  }

  const getTjData = async (parmas) => {
    try {
      const res = await httppost2(`${apiurl.gsxl.gstjfx.tjlist}?year=${parmas.year}`)
      setTjList(res.data.map((item,i) => ({...item,inx:i + 1})))
    } catch (error) {
      console.log(error);
    }
  }
  const gsoptions = useMemo(() => {
    if (krlist.length > 0) {
        return gsOption(krlist)
    } else {
        return []
    }
  }, [krlist])
  const sumObj = useMemo(() => {
    let obj = {};
    if (tableProps.dataSource.length > 0) {
      obj.stgs = tableProps.dataSource.reduce((total, cur) => (cur.ecologyV) + total, 0)
      obj.shgs = tableProps.dataSource.reduce((total, cur) => (cur.lifeV) + total, 0)
      obj.zj = tableProps.dataSource.reduce((total, cur) => (cur.sumV) + total, 0)
      return obj
    } else {
      return "1"
    }
  }, [tableProps])

    // 统计饼形图
  const tjOptions = useMemo(() => {
    let obj = {};
    if (tjlist.length > 0) {
      obj.stgs = tjlist.reduce((total, cur) => Number((cur.ecologyV)) + total, 0)
      obj.shgs = tjlist.reduce((total, cur) => Number((cur.lifeV)) + total, 0)
      obj.zj = obj.stgs + obj.shgs
      return tjOption(obj)
    } else {
      return ""
    }
  }, [tjlist])
  useEffect(() => {
    const params = {
      search: {
        ...searchVal,
        searchType: mode,
        isAsc: false,
        orderField:"tm"
      }
    };
    search(params)
    getGsChartData({...params?.search, isAsc: true, })
  }, [searchVal, mode])

  useEffect(() => {
    if (tjSearchVal) {
      getTjData(tjSearchVal)
    }
  }, [tjSearchVal])
  
  return (
    <>
      <div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
        <div className='lf CrudAdcdTreeTableBox' style={{ width: "100%" }}>
          <div className='gsTitle' style={{display:"flex",alignItems:"center",columnGap:15,marginBottom:20}}>
            <img
              alt=''
              src={`${process.env.PUBLIC_URL}/assets/gs.png`}
              style={{width:30}}
            /> 
            <span style={{fontSize:18}}>供水水方</span>
          </div>
            <ToolBar
              setSearchVal={setSearchVal}
              exportFile={exportExcel}
              setMode={(e)=>setMode(String(e))}
              role={role}
            />
          <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
            <div className='gs-content' style={{display:"flex",columnGap:30}}>
                <div style={{width:800}}>
                  <Table columns={columns} rowKey="inx" {...tableProps} scroll={{ y: "calc( 100vh - 400px )"}}/> 
              </div>
              <div style={{flex:1}}>
                <div style={{color:"#ffa87c",display:"flex",columnGap:20}}>
                    <div className='des-title'>
                    <div>发电灌溉总合计(万m³)：</div>
                    <div style={{margin:"10px 0"}}>水厂取水总合计(万m³)：</div>
                    <div>供水总合计(万m³)：</div>
                  </div>
                  <div className='des-title'>
                    <div>{sumObj?.stgs?.toFixed(2)}</div>
                    <div style={{margin:"10px 0"}}>{sumObj?.shgs?.toFixed(2)}</div>
                    <div>{sumObj?.zj?.toFixed(2)}</div>
                    </div>
                </div>
                <div className='gs-charts'>
              {
                  krlist.length > 0 ?
                    <ReactEcharts
                      option={gsoptions}
                      style={{width: "100%", height: 360}}
                      notMerge={true}
                    /> : <div style={{textAlign: "center", margin: "10%"}}>
                      <img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/>
                    </div>
                }
              </div>
              </div>
             
            </div>
            <div className='tj-box' style={{ marginTop: 20 }}>
                <div className='tj-title' style={{display:"flex",alignItems:"center",columnGap:15,marginBottom:20}}>
                <img
                  alt=''
                  src={`${process.env.PUBLIC_URL}/assets/tj.png`}
                  style={{width:30}}
                /> 
                <span style={{fontSize:18}}>统计分析</span>
              </div>
                <TjToolBar
                  setSearchVal={setTjSearchVal}
                  exportFile={tjExportExcel}
                  role={role}
              />
              <div className='gs-content' style={{ display: "flex", columnGap: 30, margin: "10px 0" }}>
              <div style={{width:800}}>
                <Table
                  columns={tjColumns}
                  rowKey="inx"
                  dataSource={tjlist}
                  pagination={false}
                  scroll={{ y: "calc( 100vh - 400px )" }} /> 
              </div>
                <div style={{ flex: 1 }}>
                {
                  tjlist.length > 0 ?
                    <ReactEcharts
                      option={tjOptions}
                      style={{width: "100%", height: 460}}
                      notMerge={true}
                    /> : <div style={{textAlign: "center", margin: "10%"}}>
                      <img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/>
                    </div>
                }
              </div>
               </div>
              </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default Page;