tsg-web/src/views/Home/MapCtrl/components/Jcsj/index.js

import React, {useEffect, useMemo, useState} from 'react';
import {Button, DatePicker, Form, Descriptions} from 'antd';
import ReactEcharts from 'echarts-for-react';
import moment from 'moment'
import clsx from "clsx";
import './index.less'
import TableData from './TableData'
import drpOption from './drpOption';
import {StcdAndStartTimeAndEndTime,StcdAndStartTimeAndEndTimeHour,queryStPptnDetails,queryStStbprpPerDayChart,queryStStbprpPerHourChart} from '../../../../../service/ssyq'

const {RangePicker} = DatePicker;

function DrpSearch({record}) {

  // 获取当前时间
  const currentTime = moment();

// 设置早上八点的时间
  const eightAM = moment().set({hour: 8, minute: 0, second: 0, millisecond: 0});
  const [data, setData] = useState([]);
  const [params, setParams] = useState({tm:[]})
  const [echartData, setEchartData] = useState({});
  const [current, setCurrent] = useState(0);
  const [detail, setDetail] = useState({});


  const option = useMemo(() => {
      return drpOption({echartData});
  }, [echartData])

  const searchTm = (e) => {
    setParams({
      ...params,
      startTime: e[0].format("YYYY-MM-DD HH:mm"),
      endTime: e[1].format("YYYY-MM-DD HH:mm"),
      tm:e,
    })
  };
  const doSearch = () => {
    getData(params)
  }


  const getData = async (params) => {
    console.log("params",params);
    if(current==0){
      setData(await StcdAndStartTimeAndEndTimeHour(params));
      setEchartData(await queryStStbprpPerHourChart(params));
    }else{
      setData(await StcdAndStartTimeAndEndTime(params));
      setEchartData(await queryStStbprpPerDayChart(params));
    }
    setDetail(await queryStPptnDetails(record?.stcd))
  }

  //今天日历数
  const days=moment().diff(moment().startOf('year'),'days')+1



  useEffect(() => {
    let option = "";
      option = {
        stcd: record?.stcd,
        startTime: current == 0 ?
        params?.startTime || moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm") :
        params?.startTime || moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
        endTime:
          current == 0 ?
          params?.endTime || moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm") :
          params?.endTime || moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
        tm: [
            params?.tm[0] ||
            moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}),
          params?.tm[1] ||
          moment().add(1, 'hour').set({minute: 0, second: 0})
        ],
      }

    setParams(option)
    getData(option)

  }, [current])


  return (
    <div style={{width: "98%", height: '56vh'}}>
      <div className="top">
        {
          current == 0 ? <RangePicker showTime allowClear style={{width: "330px"}}
            defaultValue={params.tm}
                                      onChange={searchTm}
                                      format="YYYY-MM-DD HH:mm"
                                      value={params.tm}
          /> : <RangePicker allowClear style={{width: "330px"}}
                            onChange={searchTm}
                            format="YYYY-MM-DD"
                            value={params.tm}
          />
        }

        <Button type="primary" onClick={doSearch} style={{marginLeft: "10px"}}>查询</Button>

        <div className="time-type">
          {
            ['小时', '日'].map((item, index) => (
              <div className={clsx({active: index === current})} onClick={() => setCurrent(index)}>{item}</div>
            ))
          }
        </div>
      </div>
      <div className="mid1">
        <div className="mid-left">
          <TableData data={data} current={current}/>
        </div>
        <div className="mid-right">
          {
            data?.length > 0 ?
              <ReactEcharts
                option={option}
                style={{width: "100%", height: '100%'}}
              /> : <div style={{textAlign: "center", margin: "10%"}}>
                <img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/>
              </div>
          }
        </div>
      </div>
      <div className="footer">
        <div className="footer-row">
          <div className="footer-item">
            <div className="footer-name">近1h雨量(mm)</div>
            <div className="footer-num">{detail?.h1||0}</div>
          </div>
          <div className="footer-item">
            <div className="footer-name">近3h雨量(mm)</div>
            <div className="footer-num">{detail?.h3||0}</div>
          </div>
          <div className="footer-item">
            <div className="footer-name">近6h雨量(mm)</div>
            <div className="footer-num">{detail?.h6||0}</div>
          </div>
          <div className="footer-item">
            <div className="footer-name">近12h雨量(mm)</div>
            <div className="footer-num">{detail?.h12||0}</div>
          </div>
          <div className="footer-item">
            <div className="footer-name">近24h雨量(mm)</div>
            <div className="footer-num">{detail?.h24||0}</div>
          </div>
          <div className="footer-item">
            <div className="footer-name">本年降雨天数</div>
            <div className="footer-num"><span style={{color:"#E69224"}}>{detail?.yearDrpDay}</span>/{days}</div>
          </div>
        </div>
        <div className="footer-row">
          <div className="footer-item">
            <div className="footer-name">近48h雨量(mm)</div>
            <div className="footer-num">{detail?.h48||0}</div>
          </div>
          <div className="footer-item">
            <div className="footer-name">今日雨量(mm)</div>
            <div className="footer-num">{detail.today}</div>
          </div>
          <div className="footer-item">
            <div className="footer-name">昨日雨量(mm)</div>
            <div className="footer-num">{detail?.yesterdayDrp}</div>
          </div>
          <div className="footer-item">
            <div className="footer-name">本月雨量(mm)</div>
            <div className="footer-num">{detail?.monthDrp}</div>
          </div>
          <div className="footer-item">
            <div className="footer-name">本年雨量(mm)</div>
            <div className="footer-num">{detail?.yearDrp}</div>
          </div>
          <div className="footer-item">
            <div className="footer-name">本年最大日雨量(mm)</div>
            <div className="footer-num">{detail?.maxDrp}<span style={{color:"#E69224"}}>({moment(detail?.maxDrpTime).format("YYYY-MM-DD")})</span></div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default DrpSearch