79 lines
2.9 KiB
JavaScript
79 lines
2.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 { DrpRealPromise } from '../../../../models/_/real';
|
|
import useRefresh from '../../../../utils/useRefresh';
|
|
import clsx from 'clsx';
|
|
import { renderDrp } from '../../../../utils/renutils';
|
|
import { TableSortLabel } from '@material-ui/core';
|
|
import { InfoPopNames } from '../../InfoPops';
|
|
// import AreaDrpChart from './chart';
|
|
import config from '../../../../config';
|
|
import TablePage from './table.js'
|
|
|
|
function DrpReal({ style }) {
|
|
const dispatch = useDispatch();
|
|
const [ tab, setTab ] = useState('1')
|
|
const [ tab2, setTab2 ] = useState('1')
|
|
const data = [
|
|
{ name:'余家河', dm:'华光潭二级...', hfsw:'224.1', hfll:'30.25', tm:'05-29 14:00' },
|
|
{ name:'朱家河', dm:'龙岗假山头', hfsw:'130.55', hfll:'55.65', tm:'05-29 14:30' },
|
|
{ name:'举水', dm:'昌化', hfsw:'103.22', hfll:'75.61', tm:'05-29 15:00' },
|
|
{ name:'巴水', dm:'河桥', hfsw:'85.86', hfll:'15.72', tm:'05-30 02:00' },
|
|
{ name:'沙河', dm:'於潜', hfsw:'69.09', hfll:'15.11', tm:'05-29 14:00' },
|
|
]
|
|
|
|
const flyTo = (record) => {
|
|
const { lgtd, lttd } = record;
|
|
if (lgtd && lttd) {
|
|
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealDrpPop, properties: record, coordinates: [lgtd, lttd] });
|
|
dispatch.runtime.setCameraTarget({
|
|
center: [lgtd, lttd + config.poiPositionOffsetY.drp],
|
|
zoom: config.poiPositionZoom.drp,
|
|
pitch: config.poiPitch,
|
|
bearing: 0
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
return (
|
|
<PanelBox
|
|
style={style}
|
|
title="重点关注水情"
|
|
color="green"
|
|
tabs={
|
|
<>
|
|
</>
|
|
}
|
|
extra={
|
|
<>
|
|
<span className="button-group">
|
|
<span className={clsx({ active: tab==='1' })} onClick={() => setTab('1')}>河道</span>
|
|
<span className={clsx({ active: tab==='2' })} onClick={() => setTab('1')}>水库</span>
|
|
</span>
|
|
</>
|
|
}
|
|
>
|
|
<div className='tabStyle' style={{padding:'5px',paddingBottom:'15px'}}>
|
|
<span className="card-group">
|
|
<span className={clsx({ active: tab2==='1'})} style={{marginRight:'0.3rem'}} onClick={() => setTab2('1')}>政区</span>
|
|
<span className={clsx({ active: tab2==='2'})} style={{marginRight:'0.3rem'}} onClick={() => setTab2('2')}>流域</span>
|
|
</span>
|
|
</div>
|
|
{ tab==='1'?<TablePage tab={tab2}/>:null }
|
|
</PanelBox>
|
|
)
|
|
}
|
|
|
|
export default DrpReal;
|