78 lines
4.8 KiB
JavaScript
78 lines
4.8 KiB
JavaScript
import React, { useEffect, useState, useRef } from 'react';
|
||
import { Form, Input, Button, Table, Radio, Tabs } 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 './index.less'
|
||
import { httpget2, httppost2 } from '../../../../utils/request';
|
||
import apiurl from '../../../../service/apiurl';
|
||
|
||
const Page = ({data}) => {
|
||
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)},
|
||
];
|
||
|
||
return (
|
||
<>
|
||
<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>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default Page; |