240 lines
8.9 KiB
JavaScript
240 lines
8.9 KiB
JavaScript
import React, { useMemo, useState } from 'react';
|
|
import useRequest from '../../../../utils/useRequest';
|
|
import PanelBox from '../../components/PanelBox';
|
|
|
|
import Table from '@material-ui/core/Table';
|
|
import TableContainer from '@material-ui/core/TableContainer';
|
|
import TableBody from '@material-ui/core/TableBody';
|
|
import TableHead from '@material-ui/core/TableHead';
|
|
import TableRow from '@material-ui/core/TableRow';
|
|
import DpTableCell from '../../../../layouts/mui/DpTableCell';
|
|
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import useRefresh from '../../../../utils/useRefresh';
|
|
import { HDRealPromise } from '../../../../models/_/real';
|
|
import clsx from 'clsx';
|
|
import { renderHDRz } from '../../../../utils/renutils';
|
|
import Setting from './Setting';
|
|
import { InfoPopNames } from '../../InfoPops';
|
|
import config from '../../../../config';
|
|
import moment from 'moment';
|
|
import {Empty} from 'antd'
|
|
// import showData from './constant'
|
|
function rzRender(rz, base) {
|
|
return (
|
|
<DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
|
|
{typeof base === 'number' ? base.toFixed(2) : ''}
|
|
</DpTableCell>
|
|
);
|
|
}
|
|
|
|
function HDReal({ style }) {
|
|
const dispatch = useDispatch();
|
|
const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
|
|
const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
|
|
const yyRes = useSelector(s => s.runtime.yyObj);
|
|
const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
|
|
const [show,setShow] = useState(false)
|
|
// let { data } = useRequest(HDRealPromise.get, t);
|
|
const [setting, showSetting] = useState(false);
|
|
|
|
// const showData = useMemo(() => {
|
|
// if (!data) {
|
|
// return [];
|
|
// }
|
|
// let ret = [];
|
|
// data.forEach(o => {
|
|
// if (!tableRzFilter[o.type]) {
|
|
// return;
|
|
// }
|
|
// o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
|
|
// o.kd = (Math.random() * 100).toFixed(2);
|
|
// o.ll = (Math.random() * 100).toFixed(1);
|
|
// ret.push(o);
|
|
// });
|
|
// return ret;
|
|
// }, [data, tableRzFilter]);
|
|
const randomMinutes = Math.floor(Math.random() * 60) + 1;
|
|
const format = 'YYYY-MM-DD HH:mm';
|
|
|
|
const showData = [
|
|
{
|
|
stnm: '尼尔基坝上',
|
|
rz: '215.74',
|
|
maxF: '7170',
|
|
cxTime: '08-17 08时',
|
|
ffTime:'08-23 20时'
|
|
},
|
|
{
|
|
stnm: '同盟',
|
|
rz: '170.30',
|
|
maxF: '10300',
|
|
cxTime: '08-20 20时',
|
|
ffTime:'08-20 20时'
|
|
}
|
|
]
|
|
const resData = [
|
|
{
|
|
stnm: '福田河镇',
|
|
area:"200",
|
|
rz: '215.74',
|
|
maxF: '7170',
|
|
cxTime: '08-17 08时',
|
|
ffTime:'08-23 20时'
|
|
},
|
|
{
|
|
stnm: '顺河镇',
|
|
area: '300',
|
|
maxF: '10300',
|
|
cxTime: '08-20 20时',
|
|
ffTime:'08-20 20时'
|
|
}
|
|
]
|
|
const flyTo = (record) => {
|
|
const { lgtd, lttd } = record;
|
|
if (lgtd && lttd) {
|
|
dispatch.runtime.setFeaturePop({ type: '墒情站', properties: record, coordinates: [lgtd, lttd] });
|
|
dispatch.runtime.setCameraTarget({
|
|
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
|
|
zoom: config.poiPositionZoom.hd,
|
|
pitch: config.poiPitch,
|
|
});
|
|
}
|
|
}
|
|
|
|
const toggleStType = (type) => {
|
|
const visible = !tableRzFilter[type];
|
|
dispatch.realview.setTableRzFilter({ [type]: visible });
|
|
}
|
|
|
|
const toggleAutoRefresh = () => {
|
|
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
<PanelBox
|
|
style={style}
|
|
title="预演结果"
|
|
color="green"
|
|
// tabs={
|
|
// <span className="button-group">
|
|
// <span className={clsx({ active: tableRzFilter.sh })} onClick={() => toggleStType('sh')}>山洪</span>
|
|
// <span className={clsx({ active: tableRzFilter.sw })} onClick={() => toggleStType('sw')}>水文</span>
|
|
// </span>
|
|
// }
|
|
extra={
|
|
<>
|
|
{/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
|
|
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
|
|
</>
|
|
}
|
|
>
|
|
{
|
|
yyRes.yy ? <>
|
|
<TableContainer style={{ height: '100%' }}>
|
|
<div style={{color:'#ffffff',padding:'5px',background:'#313f65',width:"7rem",textAlign:"center",margin:'5px',borderRadius:'3px',fontSize:'14px'}}>水库洪水演进</div>
|
|
<Table size="small" stickyHeader>
|
|
<TableHead>
|
|
<TableRow>
|
|
<DpTableCell style={{ width: '20%' }} align="center">水库名称</DpTableCell>
|
|
<DpTableCell style={{ minWidth: '4rem' }} align="center">最大入库流量(m³/s)</DpTableCell>
|
|
<DpTableCell align="center" style={{ width: '20%' }}>总入库水量(万m³)</DpTableCell>
|
|
<DpTableCell align="center" style={{ minWidth: '4rem' }}>最大出库流量(m³/s)</DpTableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
<DpTableRow onClick={() => {
|
|
setShow(true)
|
|
}}>
|
|
<DpTableCell align="center">
|
|
<div className="table-ellipsis cursor-pointer">明山水库</div>
|
|
</DpTableCell>
|
|
<DpTableCell align="center">
|
|
<div>12.32</div>
|
|
<div>(03-23 14:32)</div>
|
|
</DpTableCell>
|
|
<DpTableCell align="center">17.98</DpTableCell>
|
|
<DpTableCell align="center">
|
|
<div>12.32</div>
|
|
<div>(03-23 14:32)</div>
|
|
</DpTableCell>
|
|
</DpTableRow>
|
|
</TableBody>
|
|
</Table>
|
|
|
|
</TableContainer>
|
|
<div style={{color:'#ffffff',padding:'5px',background:'#313f65',width:"7rem",textAlign:"center",margin:'5px',marginBottom:"10px",borderRadius:'3px',fontSize:'14px'}}>水库洪水演进</div>
|
|
<div style={{borderBottom:'1px solid rgba(36, 136, 223, 0.6)'}}></div>
|
|
<div className='foot-content' style={{display:'flex',justifyContent:'space-around',color:"#fff",marginTop:30,marginBottom:20}}>
|
|
<div className='fxdj' style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
|
|
<div style={{color:'#41cbf1',fontSize:20}}>风险等级</div>
|
|
<div style={{color:'#41cbf1',fontSize:16,marginTop:10}}>一般</div>
|
|
</div>
|
|
<div className='ymyx' style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
|
|
<div style={{color:'#41cbf1',fontSize:20}}>淹没影响</div>
|
|
<div style={{display:'flex',justifyContent:'space-around',columnGap:10}}>
|
|
<div style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
|
|
<div style={{color:'#41cbf1',fontSize:16}}>2个</div>
|
|
<div style={{fontSize:14}}>淹没乡镇数</div>
|
|
</div>
|
|
<div style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
|
|
<div style={{color:'#41cbf1',fontSize:16}}>500k㎡</div>
|
|
<div style={{fontSize:14}}>淹没总面积</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<TableContainer style={{ height: '100%' }}>
|
|
<Table size="small" stickyHeader>
|
|
<TableHead>
|
|
<TableRow>
|
|
<DpTableCell style={{ width: '25%' }} align="center">乡镇名称</DpTableCell>
|
|
<DpTableCell style={{ width: '25%' }} align="center">影响户数</DpTableCell>
|
|
<DpTableCell style={{ width: '25%' }} align="center">影响人口</DpTableCell>
|
|
<DpTableCell style={{ width: '25%' }} align="center">影响面积/K㎡</DpTableCell>
|
|
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{resData.map((row) => (
|
|
<DpTableRow key={row.id} onClick={() => flyTo(row)}>
|
|
<DpTableCell align="center">
|
|
<div
|
|
className="table-ellipsis cursor-pointer"
|
|
>{row.stnm}</div>
|
|
</DpTableCell>
|
|
<DpTableCell align="center">221</DpTableCell>
|
|
<DpTableCell align="center">640</DpTableCell>
|
|
<DpTableCell align="center">
|
|
<div
|
|
className="table-ellipsis cursor-pointer"
|
|
>{row.area}</div>
|
|
</DpTableCell>
|
|
|
|
</DpTableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
|
|
</TableContainer>
|
|
</> :
|
|
<Empty description={<span style={{color:"#fff"}}>暂无数据</span>}/>
|
|
}
|
|
{
|
|
setting && <Setting onClose={() => showSetting(false)} />
|
|
}
|
|
{
|
|
show?
|
|
<div style={{position:'absolute',top:'-45px',left:'-380px', width:'364px', height:'220px',padding:'10px',background:'rgb(2, 12, 43)'}}>
|
|
<img width={'100%'} height={'100%'} src='/assets/ce.png' />
|
|
</div>
|
|
:null
|
|
}
|
|
</PanelBox>
|
|
)
|
|
}
|
|
|
|
export default HDReal;
|