109 lines
6.1 KiB
JavaScript
109 lines
6.1 KiB
JavaScript
import React, { useEffect, useState, useRef } from 'react';
|
||
import { Form, Input, Button, Table, Radio } from 'antd';
|
||
import {CloseOutlined} from '@ant-design/icons';
|
||
import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
|
||
import ReactEcharts from 'echarts-for-react';
|
||
import drpOption from './drpOption';
|
||
import moment from 'moment';
|
||
import './index.less'
|
||
import ModalForm1 from './table1'
|
||
import { httpget2, httppost2 } from '../../../../utils/request';
|
||
import apiurl from '../../../../service/apiurl';
|
||
|
||
const Page = ({projectId,onCancel}) => {
|
||
const [data,setData] = useState({data:[],tms:{}})
|
||
const [tab,setTab] = useState('1')
|
||
const columns = [
|
||
{ title: '序号', key: 'inx', dataIndex: 'inx', align:"center",render: (text, rec, index) => index + 1 },
|
||
{ title: '时间', key: 'tm', dataIndex: 'tm', align:"center", width:180,render:v=>v.slice(0, 16)},
|
||
{ title: '降雨量(mm)', key: 'drp', dataIndex: 'drp', align:"center", width:100,render:(v,row)=>{
|
||
const val = v===null?'-':Number(v).toFixed(2)
|
||
return <div style={{display:'flex',alignItems:'center',justifyContent:'center'}}>{val}{row.ispreDrp==='1'?<div style={{marginLeft:'5px',width:'20px',height:'20px',borderRadius:"10px",border:'1px solid rgb(245, 154, 35)',color:'rgb(245, 154, 35)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'12px'}}>预</div>:null}</div>
|
||
}},
|
||
{ title: '实测水位(m)', key: 'realSwHValue', dataIndex: 'realSwHValue', align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||
{ title: '预报水位(m)', key: 'ycSwHValue', dataIndex: 'ycSwHValue', align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||
{ title: '入库流量(m³/s)', key: 'realRkQValue', dataIndex: 'realRkQValue', width:120, align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||
{ title: '预报入库流量(m³/s)', key: 'ycRkQValue', dataIndex: 'ycRkQValue', width:160, align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||
{ title: '实际出库流量(m³/s)', key: 'realCkQValue', dataIndex: 'realCkQValue', width:160, align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||
{ title: '预报出库流量(m³/s)', key: 'ycCkQValue', dataIndex: 'ycCkQValue', width:160, align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||
];
|
||
|
||
|
||
useEffect(()=>{
|
||
(async()=>{
|
||
const {code , data} = await httpget2(apiurl.fxdd_xyt.hsyb.ybfagl.getData+'?projectId='+projectId)
|
||
if(code!==200){
|
||
return
|
||
}
|
||
setData({data:[...data.voList],tms:{
|
||
forecastTime: data.forecastTm,
|
||
projectTm: data.projectTm,
|
||
startTime: data.startTm,
|
||
endTime: data.endTm,
|
||
forecastPeriod: data.forecastPeriod,
|
||
forecastWarm: data.forecastWarm,
|
||
type:data.type,
|
||
ycMaxSwH:data.ycMaxSwH,
|
||
ycMaxRkQ:data.ycMaxRkQ,
|
||
ycMaxCkQ:data.ycMaxCkQ,
|
||
ycSumFlood:data.ycSumFlood,
|
||
}})
|
||
})()
|
||
},[])
|
||
return (
|
||
<div className='normalModalStyle homeModal2' style={{paddingBottom:'20px'}}>
|
||
<div className="normalModalStyle_title">
|
||
<div className="normalModalStyle_title_icon"></div>
|
||
预报成果详情
|
||
<div className="normalModalStyle_title_cancel">
|
||
<CloseOutlined onClick={onCancel} style={{color:"#333"}}/>
|
||
</div>
|
||
</div>
|
||
<div className='fxdd_hsybjs_content_item2_toolbar'>
|
||
预见期(小时)：
|
||
<span style={{marginRight:'55px'}}>{data?.tms?.forecastPeriod}</span>
|
||
预热期(天)：
|
||
<span style={{marginRight:'55px'}}>{data?.tms?.forecastWarm}</span>
|
||
预报时间：
|
||
<span style={{marginRight:'55px'}}>{data?.tms?.forecastTime}</span>
|
||
开始时间：
|
||
<span style={{marginRight:'55px'}}>{data?.tms?.startTime}</span>
|
||
结束时间：
|
||
<span style={{marginRight:'55px'}}>{data?.tms?.endTime}</span>
|
||
<div className='fxdd_hsybjs_content_item2_toolbar_tab'>
|
||
<Radio.Group onChange={(e)=>{setTab(e.target.value)}} defaultValue="1">
|
||
<Radio.Button value="1">数据图</Radio.Button>
|
||
<Radio.Button value="2">数据表</Radio.Button>
|
||
</Radio.Group>
|
||
</div>
|
||
</div>
|
||
<div className='fxdd_hsybjs_content_item2_toolbar2'>
|
||
<div className='fxdd_hsybjs_content_item2_toolbar_content'>预报最高调洪水位(m):<span>{data?.tms?.ycMaxSwH?.toFixed(2)}</span></div>
|
||
<div className='fxdd_hsybjs_content_item2_toolbar_content'>预报最大入库流量(m³/s):<span>{data?.tms?.ycMaxRkQ?.toFixed(2)}</span></div>
|
||
<div className='fxdd_hsybjs_content_item2_toolbar_content'>预报最大下泄流量(m³/s):<span>{data?.tms?.ycMaxCkQ?.toFixed(2)}</span></div>
|
||
<div className='fxdd_hsybjs_content_item2_toolbar_content'>预报洪水总量(万m³):<span>{data?.tms?.ycSumFlood?.toFixed(2)}</span></div>
|
||
</div>
|
||
<div className='fxdd_hsybjs_content_item2_content'>
|
||
{
|
||
tab==='1'?
|
||
<ReactEcharts option={drpOption(data)} style={{width: "1500px", height: '600px'}}/>
|
||
:null //<div style={{textAlign: "center", margin: "10%"}}><img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/></div>
|
||
}
|
||
{
|
||
tab==='2'?
|
||
<div className="colorTable" style={{padding:"10px 30px",height:'600px'}}>
|
||
<Table rowKey="id"
|
||
sticky
|
||
columns={columns}
|
||
pagination={false}
|
||
dataSource={data.data}
|
||
scroll={{ y: "540px"}}
|
||
/>
|
||
</div>:null
|
||
}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default Page; |