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

import React, {useEffect, useMemo, useState,useRef} from 'react';
import {Button, DatePicker, Form, Descriptions} from 'antd';
import {normalizeSearchTmRange} from '../../../../../utils/tools';
import ReactEcharts from 'echarts-for-react';
import moment from 'moment'
import './index.less'
import TableData from './TableData'
import drpOption from './drpOption';
import {monitor,getDetail} from '../../../../../service/sssq'


const {RangePicker} = DatePicker;

function DrpSearch({record}) {
  const [data, setData] = useState([]);
  const [params, setParams] = useState({})
  const [detail, setDetail] = useState({});
  const rangePickerRef = useRef();
  const [initialDateRange , setInitialDateRange] = useState({})
  const option = useMemo(() => {
    if (data && data.length) {
      return drpOption({data,wrz:record.wrz,grz:record.grz});
    }
  }, [data])

  // 获取当前时间
  const currentTime = moment();
  // 设置早上八点的时间
  const eightAM = moment().set({hour: 8, minute: 0, second: 0, millisecond: 0});
  const searchTm = (e) => {
    if (!e) {
      setParams({...params, tm: "" })
    } else {
      setParams({
        ...params,
        stm: e[0].format("YYYY-MM-DD HH:mm"),
        etm: e[1].format("YYYY-MM-DD HH:mm"),
        tm:e,
      })
      
    }
  };
  const doSearch = () => {
    console.log(params);
    getData(params)
  }
  const getData = async (params) => {
    setData(await monitor(params));
    setDetail(await getDetail({stcd:record.stcd,source:record.source,type:1}))
  }
  const handleReset = () => {
   setParams({...params,tm:initialDateRange?.tm,stm:initialDateRange.stm,etm:initialDateRange.etm})
  };

  useEffect(() => {
    let option = "";
    option = {
      stcd: record.stcd,
      source: record.source,
      etm: moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
      stm: moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
      tm: [
        moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
        moment().add(1, 'hour').set({ minute: 0, second: 0 }),
      ],
    }
    if (record.stcd) {
      setParams(option)
      setInitialDateRange(option)
      getData(option)
      
    }
  }, [record])

  return (
    <div style={{width: "98%", height: '65vh'}} className="jcsj-sq">
      <div className="top">
        <div className="top-left" style={record?.height?{height:"65vh"}:{}}>
          <div className="top-toobar">
            <RangePicker showTime allowClear style={{width: "320px"}}
                         onChange={searchTm}
                         format="YYYY-MM-DD HH:mm"
                         value={params.tm}
                         ref={rangePickerRef}
            />
            <Button type="primary" onClick={doSearch} style={{ marginLeft: "10px" }}>查询</Button>
            <Button  style={{ marginLeft: "10px" }} onClick={() => { handleReset()}}>重置</Button>
          </div>
          <div className="top-left-table" style={record?.height?{height:"60vh"}:{}}>
            <TableData data={data} />
          </div>
        </div>
        <div className="top-right" style={record?.height?{height:"65vh"}:{}}>
          {
            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" style={record?.height?{fontSize:15}:{}}>
        <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">{detail.yearDrpDay||0}</div>
          </div>
          <div className="footer-item">
            <div className="footer-name">24h水位变幅(m)</div>
            <div className="footer-num">{detail.rzDiff > 0 ? "+" :"" }{detail.rzDiff?detail.rzDiff.toFixed(2) : 0}</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||0}</div>
          </div>
          <div className="footer-item">
            <div className="footer-name">昨日雨量(mm)</div>
            <div className="footer-num">{detail.yesterdayDrp||0}</div>
          </div>
          <div className="footer-item">
            <div className="footer-name">本月雨量(mm)</div>
            <div className="footer-num">{detail.monthDrp||0}</div>
          </div>
          <div className="footer-item">
            <div className="footer-name">本年雨量(mm)</div>
            <div className="footer-num">{detail.yearDrp||0}</div>
          </div>
          <div className="footer-item">
            <div className="footer-name">本年最大日雨量(mm)</div>
            <div className="footer-num">{detail.maxDrp||0}({moment(detail.maxDrpTime).format('MM-DD')})</div>
          </div>
          <div className="footer-item">
            <div className="footer-name">本年最高水位(mm)</div>
            <div className="footer-num">{detail.maxRz ? detail.maxRz.toFixed(2) :0}</div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default DrpSearch