80 lines
2.5 KiB
JavaScript
80 lines
2.5 KiB
JavaScript
|
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 [stm, handleDateChange1] = useState(() => moment().add(-1, 'd'));
|
||
|
|
const [etm, handleDateChange2] = useState(() => moment());
|
||
|
|
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) => {
|
||
|
|
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
|