mcfxkh-Web/src/views/Home/components/DrpSearch/index.js

import React, { useEffect, useMemo, useState } from 'react';
import { DateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
import MomentUtils from '@date-io/moment';
import DpToolComponent from '../../../../layouts/mui/DpToolComponent'
import DpResultComponent from '../../../../layouts/mui/DpResultComponent';
import { normalizeSearchTmRange } from '../../../../utils/tools';
import { drpSearch } from '../../../../models/_/search';
import ReactEcharts from 'echarts-for-react';
import moment from 'moment'
import drpOption from './drpOption';
import DpAlert from '../../../../layouts/mui/DpAlert';

function DrpSearch({ record }) {
   const demoData = [
    {
        "tm": "2025-06-03 09:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 12,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 10:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 9,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 11:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 11,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 12:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 8,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 13:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 12,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 14:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 10,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 15:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 7,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 16:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 11,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 17:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 12,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 18:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 9,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 19:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 11,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 20:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 8,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 21:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 13,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 22:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 10,
        "year": "2025"
    },
    {
        "tm": "2025-06-03 23:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 11,
        "year": "2025"
    },
    {
        "tm": "2025-06-04 00:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 12,
        "year": "2025"
    },
    {
        "tm": "2025-06-04 01:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 9,
        "year": "2025"
    },
    {
        "tm": "2025-06-04 02:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 11,
        "year": "2025"
    },
    {
        "tm": "2025-06-04 03:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 8,
        "year": "2025"
    },
    {
        "tm": "2025-06-04 04:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 13,
        "year": "2025"
    },
    {
        "tm": "2025-06-04 05:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 10,
        "year": "2025"
    },
    {
        "tm": "2025-06-04 06:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 12,
        "year": "2025"
    },
    {
        "tm": "2025-06-04 07:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 12,
        "year": "2025"
    },
    {
        "tm": "2025-06-04 08:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 12,
        "year": "2025"
    },
    {
        "tm": "2025-06-04 09:00",
        "stnm": "桃林河(阎河)",
        "stcd": "61612910",
        "drp": 8,
        "year": "2025"
    }
]
  const [stm, handleDateChange1] = useState(() => moment(record.tm).add(-1, 'd'));
  const [etm, handleDateChange2] = useState(() => moment(record.tm));
  const [data, setData] = useState([]);

  const searchTm = useMemo(() => {
    if (stm.isAfter(etm)) {
      return { error: '开始时间应小于结束时间' };
    }
    if (etm.diff(stm, 'd') > 30) {
      return { error: '查询跨度时间不得超过30天' };
    }
    return { tm: normalizeSearchTmRange([stm, etm], 'h') };
  }, [stm, etm]);

  useEffect(() => {
    if (searchTm.tm) {
      drpSearch(record.type, record.stcd, 'h', searchTm.tm).then((data) => {
        console.log(data,record);
        const newData = record.test ? demoData : data;
      setData(data);
        // setData(data);
      })
    }
  }, [searchTm]);

  const option = useMemo(() => {
    const title = searchTm.tm[0]?.substr(5, 8) + '至' + searchTm.tm[1]?.substr(5, 8) + '降雨';
    return drpOption({ data, title });
  }, [data]);

  return (
    <MuiPickersUtilsProvider utils={MomentUtils}>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <DpToolComponent>
          <DateTimePicker
            label="开始时间"
            value={stm}
            onChange={handleDateChange1}
            cancelLabel="取消"
            okLabel="确定"
          />
          <span style={{ margin: '0 1rem' }}>-</span>
          <DateTimePicker
            label="结束时间"
            value={etm}
            onChange={handleDateChange2}
            cancelLabel="取消"
            okLabel="确定"
          />
        </DpToolComponent>

        {searchTm?.error ? (
          <DpToolComponent>
            <DpAlert style={{ width: '100%' }} severity="error">{searchTm.error}</DpAlert>
          </DpToolComponent>
        ) : (
          <DpResultComponent>
            <ReactEcharts
              option={option}
              style={{ height: '100%' }}
            />
          </DpResultComponent>
        )}
      </div>
    </MuiPickersUtilsProvider>
  )
}

export default DrpSearch