210 lines
7.6 KiB
JavaScript
210 lines
7.6 KiB
JavaScript
import React, { useMemo, useState } from 'react';
|
||
import useRequest from '../../../../utils/useRequest';
|
||
import { useDispatch, useSelector } from 'react-redux';
|
||
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';
|
||
import XcCard from './xcCard'
|
||
import config from '../../../../config';
|
||
|
||
const data = [
|
||
{
|
||
"guid": "42118120003",
|
||
"code": "1",
|
||
"name": "浮桥河水库-汛前检查",
|
||
"resRegCode": "42000020030-A4",
|
||
"adName": "白果镇",
|
||
"engScal": "大（2）型",
|
||
"place": "湖北省-黄冈市-麻城市-白果镇",
|
||
"lgtd": "114.88169",
|
||
"lttd": "31.171967",
|
||
'username': '熊杰',
|
||
taskType: '日常巡查',
|
||
tm: '2025-06-02 00:08:00',
|
||
status: '进行中'
|
||
},
|
||
{
|
||
"guid": "42118120003",
|
||
"code": "",
|
||
"name": "浮桥河水库-特别巡查",
|
||
"resRegCode": "42000020030-A4",
|
||
"adName": "白果镇",
|
||
"engScal": "大（2）型",
|
||
"place": "湖北省-黄冈市-麻城市-白果镇",
|
||
"lgtd": "115.068090",
|
||
"lttd": "31.026170",
|
||
'username': '白斌',
|
||
taskType: '汛前巡查',
|
||
tm: '2025-06-02 00:09:00',
|
||
status: '已完成'
|
||
},
|
||
|
||
{
|
||
"guid": "42118120003",
|
||
"code": "",
|
||
"name": "浮桥河水库-日常管理",
|
||
"resRegCode": "42000020030-A4",
|
||
"adName": "白果镇",
|
||
"engScal": "大（2）型",
|
||
"place": "湖北省-黄冈市-麻城市-白果镇",
|
||
"lgtd": "115.120278",
|
||
"lttd": "31.183611",
|
||
'username': '周真',
|
||
taskType: '特别巡查',
|
||
tm: '2025-06-02 00:10:00',
|
||
status: '未完成'
|
||
},
|
||
{
|
||
"guid": "42118120003",
|
||
"code": "",
|
||
"name": "浮桥河水库-汛前检查",
|
||
"resRegCode": "42000020030-A4",
|
||
"adName": "白果镇",
|
||
"engScal": "大（2）型",
|
||
"place": "湖北省-黄冈市-麻城市-白果镇",
|
||
"lgtd": "115.057222",
|
||
"lttd": "31.110833",
|
||
'username': '陈发',
|
||
taskType: '特别巡查',
|
||
tm: '2025-06-02 00:10:00',
|
||
status: '未完成'
|
||
},
|
||
]
|
||
|
||
function DrpReal({ style }) {
|
||
const [tab, setTab] = useState('1')
|
||
const dispatch = useDispatch();
|
||
const flyTo = () => {
|
||
dispatch?.runtime.setInfoDlg({ layerId: 'XunchachaoshiLayer', properties: {} })
|
||
}
|
||
const setSkLayer1 = ()=>{
|
||
const map = window.__mapref;
|
||
const layer = map.getLayer('临时线')
|
||
if(layer){
|
||
map.removeLayer('临时线');
|
||
map.removeSource('临时线');
|
||
}
|
||
map.addLayer({
|
||
'id': '临时线',
|
||
'type': 'line',
|
||
'source': {
|
||
'type': 'geojson',
|
||
'data': `${window.location.origin}/data3/line2.geojson`
|
||
},
|
||
'layout': {
|
||
'line-join': 'round'
|
||
},
|
||
'paint': {
|
||
'line-color': 'red',
|
||
'line-width': 10
|
||
// [
|
||
// 'case',
|
||
// ['==', ['get', 'LEVEL'], 1], 2.2,
|
||
// ['==', ['get', 'LEVEL'], 2], 2.2,
|
||
// ['==', ['get', 'LEVEL'], 3], 2.2,
|
||
// ['==', ['get', 'LEVEL'], 4], 1.6,
|
||
// ['==', ['get', 'LEVEL'], 5], 1.3,
|
||
// 10
|
||
// ]
|
||
},
|
||
'visibility': 'visible',
|
||
});
|
||
}
|
||
const jumpTo = (record) => {
|
||
const { lgtd, lttd } = record;
|
||
const lgtdNum = Number(lgtd);
|
||
const lttdNum = Number(lttd)
|
||
if (record.code == 1) {
|
||
setSkLayer1()
|
||
if (lgtdNum && lttdNum) {
|
||
dispatch.runtime.setCameraTarget({
|
||
center: [lgtdNum, lttdNum],
|
||
zoom: 17,
|
||
pitch: config.poiPitch,
|
||
});
|
||
}
|
||
}
|
||
}
|
||
return (
|
||
<PanelBox
|
||
style={style}
|
||
title="巡查任务总览"
|
||
color="green"
|
||
extra={
|
||
<span className="button-group">
|
||
<span className={clsx({ active: tab === '1' })} onClick={() => setTab('1')}>本月</span>
|
||
<span className={clsx({ active: tab === '2' })} onClick={() => setTab('2')}>本年</span>
|
||
</span>
|
||
}
|
||
>
|
||
<div className='skyb-box'>
|
||
<div className='rain-yb'>
|
||
<div className='title-yb'>巡查任务</div>
|
||
</div>
|
||
</div>
|
||
<div style={{ padding: 10 }}>
|
||
<XcCard />
|
||
</div>
|
||
<TableContainer>
|
||
<Table size="small" stickyHeader>
|
||
<TableHead>
|
||
<TableRow>
|
||
<DpTableCell style={{ width: '20%' }} align="center">任务标题</DpTableCell>
|
||
<DpTableCell style={{ width: '20%' }} align="center">任务类型</DpTableCell>
|
||
<DpTableCell style={{ width: '20%' }} align="center">巡查人</DpTableCell>
|
||
<DpTableCell style={{ width: '20%' }} align="center">巡查时间</DpTableCell>
|
||
<DpTableCell style={{ width: '20%' }} align="center">状态</DpTableCell>
|
||
</TableRow>
|
||
</TableHead>
|
||
<TableBody>
|
||
{data.map((row, index) => (
|
||
<DpTableRow key={row.stcd}
|
||
onClick={() => jumpTo(row)}
|
||
>
|
||
<DpTableCell align="center">
|
||
<div
|
||
className="table-ellipsis cursor-pointer"
|
||
>{row.name}</div>
|
||
</DpTableCell>
|
||
<DpTableCell align="center">{row.taskType}</DpTableCell>
|
||
<DpTableCell align="center">{row.username}</DpTableCell>
|
||
<DpTableCell align="center">
|
||
<div
|
||
className="table-ellipsis cursor-pointer"
|
||
> {row.tm}</div>
|
||
</DpTableCell>
|
||
<DpTableCell align="center">{row.status}</DpTableCell>
|
||
</DpTableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</TableContainer>
|
||
<div className='skyb-box' style={{ marginTop: 10 }}>
|
||
<div className='rain-yb'>
|
||
<div className='title-yb'>数据统计</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<img src={`${process.env.PUBLIC_URL}/assets/sjtj1.jpg`} alt="" style={{ width: 420 }} />
|
||
<div style={{ position: 'relative' }}>
|
||
<img src={`${process.env.PUBLIC_URL}/assets/sjti2.png`} alt="" style={{ width: 205, height: 72 }} />
|
||
<img src={`${process.env.PUBLIC_URL}/assets/gantanh.png`} alt=""
|
||
style={{ width: 20, position: 'absolute', top: 12, left: 145, cursor: 'pointer' }}
|
||
onClick={flyTo}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</PanelBox>
|
||
)
|
||
}
|
||
|
||
export default DrpReal;
|