304 lines
9.7 KiB
JavaScript
304 lines
9.7 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 {Typography,makeStyles} from '@material-ui/core';
|
||
import './index.less'
|
||
const useStyles = makeStyles((theme) => ({
|
||
root: {
|
||
width: '100%',
|
||
backgroundColor: 'transparent',
|
||
color: '#fff'
|
||
},
|
||
tabs: {
|
||
borderBottom: '1px solid rgba(255, 255, 255, 0.12)',
|
||
'& .MuiTab-root': {
|
||
color: '#fff',
|
||
'&.Mui-selected': {
|
||
color: '#2196f3'
|
||
}
|
||
},
|
||
'& .MuiTabs-indicator': {
|
||
backgroundColor: '#2196f3'
|
||
}
|
||
},
|
||
table: {
|
||
backgroundColor: 'transparent',
|
||
'& .MuiTableCell-root': {
|
||
color: '#fff',
|
||
borderColor: 'rgba(255, 255, 255, 0.12)'
|
||
}
|
||
},
|
||
statsContainer: {
|
||
marginTop: theme.spacing(2),
|
||
backgroundColor: 'rgba(0, 0, 0, 0.2)',
|
||
borderRadius: theme.shape.borderRadius,
|
||
padding: theme.spacing(2)
|
||
},
|
||
statsRow: {
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
marginBottom: theme.spacing(1)
|
||
},
|
||
warningCell: {
|
||
backgroundColor: 'rgba(156, 39, 176, 0.3)'
|
||
},
|
||
yearLabel: {
|
||
backgroundColor: '#1976d2',
|
||
padding: '2px 2px',
|
||
borderRadius: 12,
|
||
fontSize: '0.75rem'
|
||
},
|
||
title: {
|
||
color: '#1976d2',
|
||
marginBottom: theme.spacing(2),
|
||
marginTop: 10,
|
||
marginLeft:20,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
'&::before': {
|
||
content: '""',
|
||
width: 4,
|
||
height: 16,
|
||
backgroundColor: '#1976d2',
|
||
marginRight: theme.spacing(1),
|
||
},
|
||
},
|
||
}));
|
||
|
||
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 classes = useStyles();
|
||
|
||
const [type, setType] = useState('fx')
|
||
|
||
const toggleStType = (type) => {
|
||
|
||
setType(type)
|
||
|
||
}
|
||
const householdData = [
|
||
{
|
||
owner: '张时',
|
||
population: 4,
|
||
elevation: 125.6,
|
||
area: 86.5
|
||
},
|
||
{
|
||
owner: '李自才',
|
||
population: 3,
|
||
elevation: 126.2,
|
||
area: 92.3
|
||
},
|
||
{
|
||
owner: '王德军',
|
||
population: 5,
|
||
elevation: 124.8,
|
||
area: 110.5
|
||
},
|
||
{
|
||
owner: '赵小明',
|
||
population: 2,
|
||
elevation: 125.9,
|
||
area: 75.8
|
||
},
|
||
{
|
||
owner: '陈龙',
|
||
population: 6,
|
||
elevation: 126.5,
|
||
area: 135.2
|
||
},
|
||
{
|
||
owner: '刘包',
|
||
population: 4,
|
||
elevation: 125.3,
|
||
area: 95.6
|
||
},
|
||
{
|
||
owner: '孙有才',
|
||
population: 3,
|
||
elevation: 124.5,
|
||
area: 82.4
|
||
},
|
||
{
|
||
owner: '周德佩',
|
||
population: 5,
|
||
elevation: 126.8,
|
||
area: 115.7
|
||
}
|
||
];
|
||
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' ? <Typography variant="h7" className={classes.title}>
|
||
山洪灾害防治区及重点防治区内需转移人员基本情况
|
||
</Typography> : 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>
|
||
{householdData.map((row) => (
|
||
<DpTableRow key={row.id} onClick={() => flyTo(row, 'bz')}>
|
||
<DpTableCell align="center">
|
||
{row.owner}
|
||
</DpTableCell>
|
||
<DpTableCell align="center">
|
||
{row.population}
|
||
</DpTableCell>
|
||
<DpTableCell align="center">
|
||
{row.elevation}
|
||
</DpTableCell>
|
||
<DpTableCell align="center">{row.area}</DpTableCell>
|
||
</DpTableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</TableContainer>
|
||
<Typography variant="h7" className={classes.title}>
|
||
风险统计
|
||
</Typography>
|
||
<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;
|