217 lines
7.0 KiB
JavaScript
217 lines
7.0 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 clsx from 'clsx';
|
|
import { renderDrp } from '../../../../utils/renutils';
|
|
|
|
const data = [
|
|
{
|
|
"city_cd": "421100000000",
|
|
"city_nm": "黄冈市",
|
|
"county_cd": "421181000000",
|
|
"county_nm": "麻城市",
|
|
"town_cd": "421181105000",
|
|
"town_nm": "阎家河镇",
|
|
"res_cd": "42118140028",
|
|
"res_nm": "红心水库",
|
|
"res_lon": 115.18962,
|
|
"res_lat": 31.23425,
|
|
"video_guid": "00032e3e6d984f0eb32c807e5769ec3a",
|
|
"video_name": "红心水库坝脚球机",
|
|
"online": "1",
|
|
"sys_resource": 2
|
|
},
|
|
{
|
|
"city_cd": "421100000000",
|
|
"city_nm": "黄冈市",
|
|
"county_cd": "421181000000",
|
|
"county_nm": "麻城市",
|
|
"town_cd": "421181001000",
|
|
"town_nm": "龙池办事处",
|
|
"res_cd": "42118150152",
|
|
"res_nm": "戴家冲水库",
|
|
"res_lon": 115.0241,
|
|
"res_lat": 31.23237,
|
|
"video_guid": "0037a5cb2caf44e49c012e3fdfa01238",
|
|
"video_name": "戴家冲水库_坝顶_枪机_龙池",
|
|
"online": "1",
|
|
"sys_resource": 2
|
|
},
|
|
{
|
|
"city_cd": "421100000000",
|
|
"city_nm": "黄冈市",
|
|
"county_cd": "421181000000",
|
|
"county_nm": "麻城市",
|
|
"town_cd": "421181101000",
|
|
"town_nm": "宋埠镇",
|
|
"res_cd": "42118140008",
|
|
"res_nm": "管山水库",
|
|
"res_lon": 114.78397,
|
|
"res_lat": 31.19451,
|
|
"video_guid": "0243e9726e244b728618741f248e0577",
|
|
"video_name": "管山水库坝脚球机",
|
|
"online": "1",
|
|
"sys_resource": 2
|
|
},
|
|
{
|
|
"city_cd": "421100000000",
|
|
"city_nm": "黄冈市",
|
|
"county_cd": "421181000000",
|
|
"county_nm": "麻城市",
|
|
"town_cd": "421181100000",
|
|
"town_nm": "中馆驿镇",
|
|
"res_cd": "42118140005",
|
|
"res_nm": "响鼓墩水库",
|
|
"res_lon": 114.91971,
|
|
"res_lat": 31.17985,
|
|
"video_guid": "024eaf5578464d9192559ad2288ba764",
|
|
"video_name": "响鼓墩水库",
|
|
"online": "1",
|
|
"sys_resource": 2
|
|
},
|
|
{
|
|
"city_cd": "421100000000",
|
|
"city_nm": "黄冈市",
|
|
"county_cd": "421181000000",
|
|
"county_nm": "麻城市",
|
|
"town_cd": "421181112000",
|
|
"town_nm": "福田河镇",
|
|
"res_cd": "42118150147",
|
|
"res_nm": "张家河水库",
|
|
"res_lon": 115.17869,
|
|
"res_lat": 31.48587,
|
|
"video_guid": "02d77364354a4f8982ad3d949e0d32ab",
|
|
"video_name": "张家河水库_坝脚_球机",
|
|
"online": "1",
|
|
"sys_resource": 2
|
|
},
|
|
{
|
|
"city_cd": "421100000000",
|
|
"city_nm": "黄冈市",
|
|
"county_cd": "421181000000",
|
|
"county_nm": "麻城市",
|
|
"town_cd": "421181114000",
|
|
"town_nm": "顺河镇",
|
|
"res_cd": "42118150048",
|
|
"res_nm": "孙家榜水库",
|
|
"res_lon": 114.91758,
|
|
"res_lat": 31.26933,
|
|
"video_guid": "03059577c270432bb7338e7f714b9a01",
|
|
"video_name": "孙家塝水库",
|
|
"online": "1",
|
|
"sys_resource": 2
|
|
},
|
|
{
|
|
"city_cd": "421100000000",
|
|
"city_nm": "黄冈市",
|
|
"county_cd": "421181000000",
|
|
"county_nm": "麻城市",
|
|
"town_cd": "421181110000",
|
|
"town_nm": "三河口镇",
|
|
"res_cd": "42118150145",
|
|
"res_nm": "袁家冲水库",
|
|
"res_lon": 115.28076,
|
|
"res_lat": 31.28639,
|
|
"video_guid": "031ac395df964414a17f9dc996e13d57",
|
|
"video_name": "袁家冲水库视频站",
|
|
"online": "1",
|
|
"sys_resource": 2
|
|
},
|
|
{
|
|
"city_cd": "421100000000",
|
|
"city_nm": "黄冈市",
|
|
"county_cd": "421181000000",
|
|
"county_nm": "麻城市",
|
|
"town_cd": "421181003000",
|
|
"town_nm": "南湖办事处",
|
|
"res_cd": "42118140003",
|
|
"res_nm": "毛家冲水库",
|
|
"res_lon": 114.98531,
|
|
"res_lat": 31.20469,
|
|
"video_guid": "036b290ac8e547a79f5835754e02772c",
|
|
"video_name": "毛家冲水库溢洪道",
|
|
"online": "1",
|
|
"sys_resource": 2
|
|
},
|
|
{
|
|
"city_cd": "421100000000",
|
|
"city_nm": "黄冈市",
|
|
"county_cd": "421181000000",
|
|
"county_nm": "麻城市",
|
|
"town_cd": "421181102000",
|
|
"town_nm": "歧亭镇",
|
|
"res_cd": "42118150224",
|
|
"res_nm": "兴隆寺水库",
|
|
"res_lon": 114.69534,
|
|
"res_lat": 31.01031,
|
|
"video_guid": "0385335df9c64c1f8972cf3ed17b4854",
|
|
"video_name": "兴隆寺水库_坝脚_球机",
|
|
"online": "1",
|
|
"sys_resource": 2
|
|
},
|
|
{
|
|
"city_cd": "421100000000",
|
|
"city_nm": "黄冈市",
|
|
"county_cd": "421181000000",
|
|
"county_nm": "麻城市",
|
|
"town_cd": "421181100000",
|
|
"town_nm": "中馆驿镇",
|
|
"res_cd": "42118150094",
|
|
"res_nm": "西冲水库",
|
|
"res_lon": 114.94118,
|
|
"res_lat": 31.06765,
|
|
"video_guid": "046336873b8a4eefbc321bd2e6e4359c",
|
|
"video_name": "西冲水库",
|
|
"online": "1",
|
|
"sys_resource": 2
|
|
},
|
|
]
|
|
|
|
function DrpReal({ style }) {
|
|
const [tab,setTab] = useState('1')
|
|
|
|
return (
|
|
<PanelBox
|
|
style={style}
|
|
title="视频监测"
|
|
color="green"
|
|
>
|
|
<TableContainer style={{ height: '100%' }}>
|
|
<Table size="small" stickyHeader>
|
|
<TableHead>
|
|
<TableRow>
|
|
<DpTableCell style={{ maxWidth: '20%' }} align="center">序号</DpTableCell>
|
|
<DpTableCell style={{ maxWidth: '20%' }} align="center">水库名称</DpTableCell>
|
|
<DpTableCell style={{ maxWidth: '20%' }} align="center">行政区</DpTableCell>
|
|
<DpTableCell style={{ maxWidth: '20%' }} align="center">状态</DpTableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{data.map((row,index) => (
|
|
<DpTableRow key={row.stcd}>
|
|
<DpTableCell align="center">{index+1}</DpTableCell>
|
|
<DpTableCell align="center">{row.res_nm}</DpTableCell>
|
|
<DpTableCell align="center">{row.town_nm}</DpTableCell>
|
|
<DpTableCell align="center">{row.online==='1'?
|
|
<span style={{color:'#3af6cd',display:'flex',alignItems:'center',justifyContent:'center'}}><div style={{width:'10px',height:'10px',borderRadius:'10px',marginRight:'7px',background:'#3af6cd'}}></div>在线</span>
|
|
:<span style={{color:'#eeeeee',display:'flex',alignItems:'center',justifyContent:'center'}}><div style={{width:'10px',height:'10px',borderRadius:'10px',marginRight:'7px',background:'#eeeeee'}}></div>离线</span>
|
|
}</DpTableCell>
|
|
</DpTableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
</PanelBox>
|
|
)
|
|
}
|
|
|
|
export default DrpReal;
|