Merge branch 'master' of http://10.0.41.100:3000/lishenfeng/tsg-web
commit
3f6bacdc63
Binary file not shown.
|
After Width: | Height: | Size: 942 KiB |
|
|
@ -6,10 +6,10 @@ import moment from 'moment'
|
||||||
const Tabledata = ({data}) => {
|
const Tabledata = ({data}) => {
|
||||||
const columns = [
|
const columns = [
|
||||||
{title: '时间', key: '', dataIndex: '', align: 'center',render:(rec)=>moment(rec.tm).format('MM-DD HH:mm')},
|
{title: '时间', key: '', dataIndex: '', align: 'center',render:(rec)=>moment(rec.tm).format('MM-DD HH:mm')},
|
||||||
{
|
// {
|
||||||
title: '雨量(mm)', key: 'drp', dataIndex: 'drp', align: 'center',
|
// title: '雨量(mm)', key: 'drp', dataIndex: 'drp', align: 'center',
|
||||||
render: (rec) => <span>{rec ?? "-"}</span>
|
// render: (rec) => <span>{rec ?? "-"}</span>
|
||||||
},
|
// },
|
||||||
{
|
{
|
||||||
title: '水位(m)', key: 'z', dataIndex: 'z', align: 'center',
|
title: '水位(m)', key: 'z', dataIndex: 'z', align: 'center',
|
||||||
render: (rec) => <span>{rec ? rec.toFixed(2) : "-"}</span>
|
render: (rec) => <span>{rec ? rec.toFixed(2) : "-"}</span>
|
||||||
|
|
|
||||||
|
|
@ -1,43 +1,43 @@
|
||||||
import React, {useEffect, useMemo, useState,useRef} from 'react';
|
import React, { useEffect, useMemo, useState, useRef } from 'react';
|
||||||
import {Button, DatePicker, Form, Descriptions} from 'antd';
|
import { Button, DatePicker, Form, Descriptions } from 'antd';
|
||||||
import {normalizeSearchTmRange} from '../../../../../utils/tools';
|
import { normalizeSearchTmRange } from '../../../../../utils/tools';
|
||||||
import ReactEcharts from 'echarts-for-react';
|
import ReactEcharts from 'echarts-for-react';
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
import './index.less'
|
import './index.less'
|
||||||
import TableData from './TableData'
|
import TableData from './TableData'
|
||||||
import drpOption from './drpOption';
|
import drpOption from './drpOption';
|
||||||
import {monitor,getDetail} from '../../../../../service/sssq'
|
import { monitor, getDetail } from '../../../../../service/sssq'
|
||||||
|
|
||||||
|
|
||||||
const {RangePicker} = DatePicker;
|
const { RangePicker } = DatePicker;
|
||||||
|
|
||||||
function DrpSearch({record}) {
|
function DrpSearch({ record, update = false }) {
|
||||||
const [data, setData] = useState([]);
|
const [data, setData] = useState([]);
|
||||||
const [params, setParams] = useState({})
|
const [params, setParams] = useState({})
|
||||||
const [detail, setDetail] = useState({});
|
const [detail, setDetail] = useState({});
|
||||||
const rangePickerRef = useRef();
|
const rangePickerRef = useRef();
|
||||||
const [initialDateRange , setInitialDateRange] = useState({})
|
const [initialDateRange, setInitialDateRange] = useState({})
|
||||||
const option = useMemo(() => {
|
const option = useMemo(() => {
|
||||||
if (data && data.length) {
|
if (data && data.length) {
|
||||||
return drpOption({data,wrz:record.wrz,grz:record.grz});
|
return drpOption({ data, wrz: record.wrz, grz: record.grz });
|
||||||
}
|
}
|
||||||
}, [data])
|
}, [data])
|
||||||
|
|
||||||
// 获取当前时间
|
// 获取当前时间
|
||||||
const currentTime = moment();
|
const currentTime = moment();
|
||||||
// 设置早上八点的时间
|
// 设置早上八点的时间
|
||||||
const eightAM = moment().set({hour: 8, minute: 0, second: 0, millisecond: 0});
|
const eightAM = moment().set({ hour: 8, minute: 0, second: 0, millisecond: 0 });
|
||||||
const searchTm = (e) => {
|
const searchTm = (e) => {
|
||||||
if (!e) {
|
if (!e) {
|
||||||
setParams({...params, tm: "" })
|
setParams({ ...params, tm: "" })
|
||||||
} else {
|
} else {
|
||||||
setParams({
|
setParams({
|
||||||
...params,
|
...params,
|
||||||
stm: e[0].format("YYYY-MM-DD HH:mm"),
|
stm: e[0].format("YYYY-MM-DD HH:mm"),
|
||||||
etm: e[1].format("YYYY-MM-DD HH:mm"),
|
etm: e[1].format("YYYY-MM-DD HH:mm"),
|
||||||
tm:e,
|
tm: e,
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const doSearch = () => {
|
const doSearch = () => {
|
||||||
|
|
@ -46,10 +46,10 @@ function DrpSearch({record}) {
|
||||||
}
|
}
|
||||||
const getData = async (params) => {
|
const getData = async (params) => {
|
||||||
setData(await monitor(params));
|
setData(await monitor(params));
|
||||||
setDetail(await getDetail({stcd:record.stcd,source:record.source,type:1}))
|
setDetail(await getDetail({ stcd: record.stcd, source: record.source, type: 1 }))
|
||||||
}
|
}
|
||||||
const handleReset = () => {
|
const handleReset = () => {
|
||||||
setParams({...params,tm:initialDateRange?.tm,stm:initialDateRange.stm,etm:initialDateRange.etm})
|
setParams({ ...params, tm: initialDateRange?.tm, stm: initialDateRange.stm, etm: initialDateRange.etm })
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -57,8 +57,8 @@ function DrpSearch({record}) {
|
||||||
option = {
|
option = {
|
||||||
stcd: record.stcd,
|
stcd: record.stcd,
|
||||||
source: record.source,
|
source: record.source,
|
||||||
etm: moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
|
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"),
|
stm: moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm"),
|
||||||
tm: [
|
tm: [
|
||||||
moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
|
moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
|
||||||
moment().add(1, 'hour').set({ minute: 0, second: 0 }),
|
moment().add(1, 'hour').set({ minute: 0, second: 0 }),
|
||||||
|
|
@ -68,102 +68,116 @@ function DrpSearch({record}) {
|
||||||
setParams(option)
|
setParams(option)
|
||||||
setInitialDateRange(option)
|
setInitialDateRange(option)
|
||||||
getData(option)
|
getData(option)
|
||||||
|
|
||||||
}
|
}
|
||||||
}, [record])
|
}, [record])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{width: "98%", height: '65vh'}} className="jcsj-sq">
|
<div style={{ width: "98%", height: '65vh' }} className="jcsj-sq">
|
||||||
<div className="top">
|
<div className="top">
|
||||||
<div className="top-left" style={record?.height?{height:"65vh"}:{}}>
|
<div className="top-left" style={record?.height ? { height: "65vh" } : {}}>
|
||||||
<div className="top-toobar">
|
<div className="top-toobar">
|
||||||
<RangePicker showTime allowClear style={{width: "320px"}}
|
<RangePicker showTime allowClear style={{ width: "320px" }}
|
||||||
onChange={searchTm}
|
onChange={searchTm}
|
||||||
format="YYYY-MM-DD HH:mm"
|
format="YYYY-MM-DD HH:mm"
|
||||||
value={params.tm}
|
value={params.tm}
|
||||||
ref={rangePickerRef}
|
ref={rangePickerRef}
|
||||||
/>
|
/>
|
||||||
<Button type="primary" onClick={doSearch} style={{ marginLeft: "10px" }}>查询</Button>
|
<Button type="primary" onClick={doSearch} style={{ marginLeft: "10px" }}>查询</Button>
|
||||||
<Button style={{ marginLeft: "10px" }} onClick={() => { handleReset()}}>重置</Button>
|
<Button style={{ marginLeft: "10px" }} onClick={() => { handleReset() }}>重置</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className="top-left-table" style={record?.height?{height:"60vh"}:{}}>
|
<div className="top-left-table" style={record?.height ? { height: "60vh" } : {}}>
|
||||||
<TableData data={data} />
|
<TableData data={data} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="top-right" style={record?.height?{height:"65vh"}:{}}>
|
<div className="top-right" style={record?.height ? { height: "65vh" } : {}}>
|
||||||
{
|
{
|
||||||
data.length > 0 ?
|
data.length > 0 ?
|
||||||
<ReactEcharts
|
<ReactEcharts
|
||||||
option={option}
|
option={option}
|
||||||
style={{width: "100%", height: '100%'}}
|
style={{ width: "100%", height: '100%' }}
|
||||||
/> : <div style={{textAlign: "center", margin: "10%"}}>
|
/> : <div style={{ textAlign: "center", margin: "10%" }}>
|
||||||
<img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/>
|
<img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt="" />
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="footer" style={record?.height?{fontSize:15}:{}}>
|
{!update ?
|
||||||
<div className="footer-row">
|
<div className="footer" style={record?.height ? { fontSize: 15 } : {}}>
|
||||||
<div className="footer-item">
|
<div className="footer-row">
|
||||||
<div className="footer-name">近1h雨量(mm)</div>
|
<div className="footer-item">
|
||||||
<div className="footer-num">{detail.h1||0}</div>
|
<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>
|
||||||
<div className="footer-item">
|
<div className="footer-row">
|
||||||
<div className="footer-name">近3h雨量(mm)</div>
|
<div className="footer-item">
|
||||||
<div className="footer-num">{detail.h3||0}</div>
|
<div className="footer-name">近48h雨量(mm)</div>
|
||||||
</div>
|
<div className="footer-num">{detail.h48 || 0}</div>
|
||||||
<div className="footer-item">
|
</div>
|
||||||
<div className="footer-name">近6h雨量(mm)</div>
|
<div className="footer-item">
|
||||||
<div className="footer-num">{detail.h6||0}</div>
|
<div className="footer-name">今日雨量(mm)</div>
|
||||||
</div>
|
<div className="footer-num">{detail.today || 0}</div>
|
||||||
<div className="footer-item">
|
</div>
|
||||||
<div className="footer-name">近12h雨量(mm)</div>
|
<div className="footer-item">
|
||||||
<div className="footer-num">{detail.h12||0}</div>
|
<div className="footer-name">昨日雨量(mm)</div>
|
||||||
</div>
|
<div className="footer-num">{detail.yesterdayDrp || 0}</div>
|
||||||
<div className="footer-item">
|
</div>
|
||||||
<div className="footer-name">近24h雨量(mm)</div>
|
<div className="footer-item">
|
||||||
<div className="footer-num">{detail.h24||0}</div>
|
<div className="footer-name">本月雨量(mm)</div>
|
||||||
</div>
|
<div className="footer-num">{detail.monthDrp || 0}</div>
|
||||||
<div className="footer-item">
|
</div>
|
||||||
<div className="footer-name">本年降雨天数</div>
|
<div className="footer-item">
|
||||||
<div className="footer-num">{detail.yearDrpDay||0}</div>
|
<div className="footer-name">本年雨量(mm)</div>
|
||||||
</div>
|
<div className="footer-num">{detail.yearDrp || 0}</div>
|
||||||
<div className="footer-item">
|
</div>
|
||||||
<div className="footer-name">24h水位变幅(m)</div>
|
<div className="footer-item">
|
||||||
<div className="footer-num">{detail.rzDiff > 0 ? "+" :"" }{detail.rzDiff?detail.rzDiff.toFixed(2) : 0}</div>
|
<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>
|
</div>
|
||||||
<div className="footer-row">
|
: <div className="footer" style={record?.height ? { fontSize: 15 } : {}}>
|
||||||
|
<div className="footer-row">
|
||||||
<div className="footer-item">
|
<div className="footer-item">
|
||||||
<div className="footer-name">近48h雨量(mm)</div>
|
<div className="footer-name">24h水位变幅(m)</div>
|
||||||
<div className="footer-num">{detail.h48||0}</div>
|
<div className="footer-num">{detail.rzDiff > 0 ? "+" : ""}{detail.rzDiff ? detail.rzDiff.toFixed(2) : 0}</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="footer-item">
|
<div className="footer-item">
|
||||||
<div className="footer-name">今日雨量(mm)</div>
|
<div className="footer-name">本年最高水位(mm)</div>
|
||||||
<div className="footer-num">{detail.today||0}</div>
|
<div className="footer-num">{detail.maxRz ? detail.maxRz.toFixed(2) : 0}</div>
|
||||||
</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>
|
||||||
</div>
|
}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -67,6 +67,15 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
|
||||||
setSearchVal({...values, dateTimeRangeSo:dateSo});
|
setSearchVal({...values, dateTimeRangeSo:dateSo});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let time = [moment().subtract(1,"weeks"),moment()]
|
||||||
|
let dateSo = {
|
||||||
|
start:moment(time[0]).format('YYYY-MM-DD 00:00:00'),
|
||||||
|
end:moment(time[1]).format('YYYY-MM-DD 23:59:59'),
|
||||||
|
}
|
||||||
|
form.setFieldValue("tm",time)
|
||||||
|
setSearchVal({dateTimeRangeSo:dateSo})
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -93,7 +93,16 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
|
||||||
getDmList()
|
getDmList()
|
||||||
getStationCode()
|
getStationCode()
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let time = [moment().subtract(1,"weeks"),moment()]
|
||||||
|
let dateSo = {
|
||||||
|
start:moment(time[0]).format('YYYY-MM-DD 00:00:00'),
|
||||||
|
end:moment(time[1]).format('YYYY-MM-DD 23:59:59'),
|
||||||
|
}
|
||||||
|
form.setFieldValue("tm",time)
|
||||||
|
setSearchVal({dateTimeRangeSo:dateSo})
|
||||||
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
|
||||||
|
|
@ -83,7 +83,15 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
|
||||||
getStationCode()
|
getStationCode()
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let time = [moment().subtract(1,"weeks"),moment()]
|
||||||
|
let dateSo = {
|
||||||
|
start:moment(time[0]).format('YYYY-MM-DD 00:00:00'),
|
||||||
|
end:moment(time[1]).format('YYYY-MM-DD 23:59:59'),
|
||||||
|
}
|
||||||
|
form.setFieldValue("tm",time)
|
||||||
|
setSearchVal({dateTimeRangeSo:dateSo})
|
||||||
|
}, [])
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div style={{display:'flex',justifyContent:'space-between'}}>
|
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
import { Image } from "antd"
|
import { Image } from "antd"
|
||||||
// import zd from '../../../assets/img/u0.png'
|
// import zd from '../../../assets/img/u0.png'
|
||||||
import zd from '../../../assets/img/wait.png'
|
import zd from '../../../assets/img/djz.jpg'
|
||||||
const Page = () => {
|
const Page = () => {
|
||||||
return (
|
return (
|
||||||
<div style={{display:'flex',justifyContent:'center',alignItems:'center',backgroundColor:'#fff',height:'100%',padding:'20px'}}>
|
<div style={{display:'flex',justifyContent:'center',alignItems:'center',backgroundColor:'#fff',height:'100%',padding:'20px'}}>
|
||||||
<Image src={zd} style={{margin:'auto',margin:'20px',height:'130px'}} preview={false}/>
|
<Image src={zd} style={{margin:'auto',margin:'20px',height:'630px'}} preview={false}/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -61,7 +61,7 @@ export default function Sksq() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='sjcx-content'>
|
<div className='sjcx-content'>
|
||||||
<Sjcx record={{...tableData[0],height:true} || {}}/>
|
<Sjcx record={{ ...tableData[0], height: true } || {}} update={true} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue