195 lines
7.6 KiB
JavaScript
195 lines
7.6 KiB
JavaScript
|
import React, { useMemo, useState,useEffect } 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 { showData,bzData} from './constatData'
|
|||
|
|
import './index.less'
|
|||
|
|
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 t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
|
|||
|
|
// let { data } = useRequest(HDRealPromise.get, t);
|
|||
|
|
const [setting, showSetting] = useState(false);
|
|||
|
|
|
|||
|
|
const flyTo = (record, type) => {
|
|||
|
|
toggleStType(type)
|
|||
|
|
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 wgData = [
|
|||
|
|
{
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
const [type, setType] = useState('fx')
|
|||
|
|
|
|||
|
|
const toggleStType = (type) => {
|
|||
|
|
|
|||
|
|
setType(type)
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const toggleAutoRefresh = () => {
|
|||
|
|
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
|
|||
|
|
}
|
|||
|
|
useEffect(() => {
|
|||
|
|
return () => {
|
|||
|
|
dispatch.runtime.setShksh(undefined)
|
|||
|
|
}
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<PanelBox
|
|||
|
|
style={style}
|
|||
|
|
title=""
|
|||
|
|
color="green"
|
|||
|
|
tabs={
|
|||
|
|
<span className="button-group">
|
|||
|
|
<span className={clsx({ active: type == 'fx' })} onClick={() => toggleStType('fx')}>风险网格</span>
|
|||
|
|
<span className={clsx({ active: type == 'jg' })} onClick={() => toggleStType('jg')}>结构化预案</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> */}
|
|||
|
|
</>
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
{type == 'fx' ? <div style={{color:'#fff',margin:'5px 10px'}}>山洪灾害防治区及重点防治区内需转移人员基本情况</div> : null}
|
|||
|
|
{
|
|||
|
|
type == 'fx' ?
|
|||
|
|
<>
|
|||
|
|
<TableContainer style={{ height: '50%' }}>
|
|||
|
|
<Table size="small" stickyHeader>
|
|||
|
|
<TableHead>
|
|||
|
|
<TableRow>
|
|||
|
|
<DpTableCell style={{ width: '25%' }} align="center">户主</DpTableCell>
|
|||
|
|
<DpTableCell style={{ width: '25%' }} align="center">家庭人口</DpTableCell>
|
|||
|
|
<DpTableCell align="center" style={{ width: '25%' }}>宅基高程(m)</DpTableCell>
|
|||
|
|
<DpTableCell align="center" style={{ width: '25%' }}>房屋面积(m²)</DpTableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
</TableHead>
|
|||
|
|
<TableBody>
|
|||
|
|
{[].map((row) => (
|
|||
|
|
<DpTableRow key={row.id} onClick={() => flyTo(row, 'bz')}>
|
|||
|
|
<DpTableCell align="center">
|
|||
|
|
{row.pustName}
|
|||
|
|
</DpTableCell>
|
|||
|
|
<DpTableCell align="center">
|
|||
|
|
{row.pustType}
|
|||
|
|
</DpTableCell>
|
|||
|
|
<DpTableCell align="center">{row.irrCode_dictText}</DpTableCell>
|
|||
|
|
</DpTableRow>
|
|||
|
|
))}
|
|||
|
|
</TableBody>
|
|||
|
|
</Table>
|
|||
|
|
</TableContainer>
|
|||
|
|
<div style={{ color: '#fff', margin: '5px 10px' }}>风险统计</div>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', columnGap: 40 }}>
|
|||
|
|
<div style={{ padding: 10, width: 130, background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
|||
|
|
<div className="value" style={{ color: '#5ecd45' }}>35</div>
|
|||
|
|
<div className="key" style={{ color: '#fff', fontSize: 16 }}>危险区面积</div>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ padding: 10, width: 130, background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
|||
|
|
<div className="value" style={{ color: '#5ecd45' }}>35</div>
|
|||
|
|
<div className="key" style={{ color: '#fff', fontSize: 16 }}>危险区户数</div>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ padding: 10, width: 130, background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
|||
|
|
<div className="value" style={{ color: '#5ecd45' }}>35</div>
|
|||
|
|
<div className="key" style={{ color: '#fff', fontSize: 16 }}>风险点(个)</div>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ padding: 10, width: 130, background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
|||
|
|
<div
|
|||
|
|
className="value"
|
|||
|
|
style={{ cursor: 'pointer', color: '#5ecd45' }}
|
|||
|
|
>
|
|||
|
|
15
|
|||
|
|
</div>
|
|||
|
|
<div className="key" style={{ color: '#fff', fontSize: 16 }}>危险区人口(人)</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
: <div className="basic-info">
|
|||
|
|
<div className="section-title">基本情况</div>
|
|||
|
|
<div className="info-content">
|
|||
|
|
<div className="info-row">
|
|||
|
|
<div className="info-item">
|
|||
|
|
<span className="label">威胁对象：</span>
|
|||
|
|
<span className="value">18</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="info-item">
|
|||
|
|
<span className="label">威胁人口：</span>
|
|||
|
|
<span className="value">75</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="info-item">
|
|||
|
|
<span className="label">安置点：</span>
|
|||
|
|
<span className="value">2组,3组</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="divider"></div>
|
|||
|
|
|
|||
|
|
<div className="section-title">预警指标</div>
|
|||
|
|
<div className="warning-item">
|
|||
|
|
<span className="label">准备转移：</span>
|
|||
|
|
<span className="value">1小时-mm; 3小时-mm; 6小时-mm</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="warning-item">
|
|||
|
|
<span className="label">立即转移：</span>
|
|||
|
|
<span className="value">1小时-mm; 3小时-mm; 6小时-mm</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="divider"></div>
|
|||
|
|
|
|||
|
|
<div className="section-title">防汛值班电话</div>
|
|||
|
|
<div className="phone-item">
|
|||
|
|
<div className="label">市汛期值班电话：</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="phone-item" style={{display:'flex'}}>
|
|||
|
|
<div className="label">县汛期值班电话：</div>
|
|||
|
|
<a href="tel:0718-3225026" className="phone-number">0718-3225026</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
{/* {
|
|||
|
|
setting && <Setting onClose={() => showSetting(false)} />
|
|||
|
|
} */}
|
|||
|
|
</PanelBox>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default HDReal;
|