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

import React, {useEffect, useMemo, useState} 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 {getDetail,  reservoirmonitor} from '../../../../../service/sssq'

const {RangePicker} = DatePicker;

function DrpSearch({ record }) {
  const [data, setData] = useState([]);
  const [params, setParams] = useState({})
  const [detail, setDetail] = useState({});
  const option = useMemo(() => {
    return drpOption({data,afsltdz:record.afsltdz,flLowLimLev:record.flLowLimLev,desFloodLev:record.desFloodLev,calFloodLev:record.calFloodLev});
  }, [data])

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


  useEffect(() => {
    let option = "";
    // 比较当前时间和早上八点
    // if (currentTime.isBefore(eightAM)) {
    //   option = {
    //     stcd: record.stcd,
    //     source: record.source,
    //     stm: moment().subtract(8, 'days').startOf('day').set({hour: 8, minute: 0}).format("YYYY-MM-DD HH:mm"),
    //     etm: moment().subtract(1, 'days').startOf('day').set({hour: 8, minute: 0}).format("YYYY-MM-DD HH:mm"),
    //     tm: [moment().subtract(8, 'days').startOf('day').set({
    //       hour: 8,
    //       minute: 0
    //     }), moment().subtract(1, 'days').startOf('day').set({hour: 8, minute: 0})],
    //   }
    // } else {
    //   option = {
    //     stcd: record.stcd,
    //     source: record.source,
    //     stm: moment().subtract(7, 'days').startOf('day').set({hour: 8, minute: 0}).format("YYYY-MM-DD HH:mm"),
    //     etm: moment().startOf('day').set({hour: 8, minute: 0}).format("YYYY-MM-DD HH:mm"),
    //     tm: [moment().subtract(7, 'days').startOf('day').set({
    //       hour: 8,
    //       minute: 0
    //     }), moment().startOf('day').set({hour: 8, minute: 0})],
    //   }
    // }
    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 }),
      ],
    }
    setParams(option)
    getData(option)
  }, [record])


  return (
    <div style={{width: "98%", height: '65vh'}} className="jcsj-sq">
      <div className="top">
        <div className="top-left">
          <div className="top-toobar">
            <RangePicker showTime allowClear style={{width: "330px"}}
                         onChange={searchTm}
                         format="YYYY-MM-DD HH:mm"
                         value={params.tm}
            />
            <Button type="primary" onClick={doSearch} style={{marginLeft: "10px"}}>查询</Button>
          </div>
          <div className="top-left-table">
            <TableData data={data} />
          </div>
        </div>
        <div className="top-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?? "-"}</div>
          </div>
          <div className="footer-item">
            <div className="footer-name">近3h雨量(mm)</div>
            <div className="footer-num">{detail?.h3?? "-"}</div>
          </div>
          <div className="footer-item">
            <div className="footer-name">近6h雨量(mm)</div>
            <div className="footer-num">{detail?.h6?? "-"}</div>
          </div>
          <div className="footer-item">
            <div className="footer-name">近12h雨量(mm)</div>
            <div className="footer-num">{detail?.h12?? "-"}</div>
          </div>
          <div className="footer-item">
            <div className="footer-name">近24h雨量(mm)</div>
            <div className="footer-num">{detail?.h24?? "-"}</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) : '-'}</div>
          </div>
        </div>
        <div className="footer-row">
          <div className="footer-item">
            <div className="footer-name">近48h雨量(mm)</div>
            <div className="footer-num">{detail?.h48?? "-"}</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?? "-"}({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) :'-'}</div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default DrpSearch