73 lines
2.4 KiB
JavaScript
73 lines
2.4 KiB
JavaScript
import { useEffect, useState, useMemo } from "react"
|
|
import {useDispatch, useSelector} from "react-redux";
|
|
import {Descriptions} from "antd";
|
|
import ReactEcharts from 'echarts-for-react';
|
|
import drpOption from './drpOption'
|
|
import { httpget2, httppost2 } from "../../../../utils/request";
|
|
import apiurl from "../../../../service/apiurl";
|
|
import moment from "moment";
|
|
|
|
|
|
|
|
const Page = ({record}) => {
|
|
const [data,setData] = useState([])
|
|
const [count ,setCount] = useState({})
|
|
const option = useMemo(() => {
|
|
return drpOption({data});
|
|
}, [data])
|
|
|
|
useEffect(()=>{
|
|
if(record?.stcd){
|
|
getData(record.stcd)
|
|
getCount(record.stcd)
|
|
}
|
|
},[record])
|
|
|
|
|
|
const getData = async(stcd)=>{
|
|
const pam = {
|
|
dateSo:{
|
|
start:moment().add(-1,'month').format('YYYY-MM-DD HH:mm:ss'),
|
|
end:moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
},
|
|
stcd
|
|
}
|
|
const { code, data } = await httppost2(apiurl.home.yihongList,pam)
|
|
if(code!==200){
|
|
return
|
|
}
|
|
setData(data)
|
|
}
|
|
|
|
const getCount = async(stcd)=>{
|
|
const { code, data } = await httpget2(apiurl.home.yihongCount24+stcd)
|
|
if(code!==200){
|
|
return
|
|
}
|
|
setCount(data)
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
<>
|
|
<div style={{width:'100%',height:'240px'}}>
|
|
<ReactEcharts
|
|
option={option}
|
|
style={{width: "100%", height: '100%'}}
|
|
/>
|
|
</div>
|
|
<div style={{padding:'15px 0px 10px 15px'}}>
|
|
<Descriptions column={2}>
|
|
<Descriptions.Item labelStyle={{color:"#8c8c8c"}} label="实时水位">{count.currWaterLevel}m</Descriptions.Item>
|
|
<Descriptions.Item labelStyle={{color:"#70B603"}} label="转换溢洪流量">{count.flowNum}m³/s</Descriptions.Item>
|
|
<Descriptions.Item labelStyle={{color:"#8c8c8c"}} label="近24h溢洪量"><span style={{letterSpacing:'-1px'}}>{count.sum24}万 m³</span></Descriptions.Item>
|
|
<Descriptions.Item labelStyle={{color:"#8c8c8c"}} label="采集时间"><span style={{letterSpacing:'-1px'}}>{count.createTime?.slice(5,16)}</span></Descriptions.Item>
|
|
</Descriptions>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Page
|