|
|
|
@ -37,8 +37,13 @@ import {
|
|
|
|
|
ModalFooter, |
|
|
|
|
Table |
|
|
|
|
} from '@component/ui'; |
|
|
|
|
import { FiUsers, FiFileText, FiRotateCw, FiCornerUpLeft } from 'react-icons/fi'; |
|
|
|
|
import { X } from 'react-feather' |
|
|
|
|
import { |
|
|
|
|
FiUsers, |
|
|
|
|
FiFileText, |
|
|
|
|
FiRotateCw, |
|
|
|
|
FiCornerUpLeft |
|
|
|
|
} from 'react-icons/fi'; |
|
|
|
|
import { X } from 'react-feather'; |
|
|
|
|
|
|
|
|
|
import mapboxgl from 'mapbox-gl'; |
|
|
|
|
import * as turf from '@turf/turf'; |
|
|
|
@ -47,7 +52,12 @@ export default function OperationApprovalsContainer({ mode }) {
|
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
const history = useHistory(); |
|
|
|
|
|
|
|
|
|
// 현재 선택한 데이터 구분
|
|
|
|
|
const [selected, setSelected] = useState(null); |
|
|
|
|
const [selectedPlanSno, setSelectedPlanSno] = useState(null); |
|
|
|
|
// 다른 더보기에서 단건 조회 시 포커스를 위한 zoneNo 저장
|
|
|
|
|
const [diffRowZoneNo, setDiffRowZoneNo] = useState(0); |
|
|
|
|
|
|
|
|
|
const [isMapLoading, setIsMapLoading] = useState(false); |
|
|
|
|
// 비행구역 그리기
|
|
|
|
|
const [drawObj, setDrawObj] = useState(); |
|
|
|
@ -69,8 +79,6 @@ export default function OperationApprovalsContainer({ mode }) {
|
|
|
|
|
|
|
|
|
|
// 시군구
|
|
|
|
|
const [district, setDistrict] = useState('전체'); |
|
|
|
|
// 미니맵 레이어
|
|
|
|
|
// const [previewLayer, setPreviewLayer] = useState();
|
|
|
|
|
|
|
|
|
|
const { map, mapType } = useSelector(state => state.mapState); |
|
|
|
|
|
|
|
|
@ -105,6 +113,8 @@ export default function OperationApprovalsContainer({ mode }) {
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (areaCoordList.length !== 0) { |
|
|
|
|
handlerAreaDraw(); |
|
|
|
|
} else { |
|
|
|
|
handlerRemoveArea(); |
|
|
|
|
} |
|
|
|
|
}, [areaCoordList]); |
|
|
|
|
|
|
|
|
@ -115,7 +125,9 @@ export default function OperationApprovalsContainer({ mode }) {
|
|
|
|
|
.queryRenderedFeatures(e.point) |
|
|
|
|
.find(feature => feature.source === 'operationLayer'); |
|
|
|
|
|
|
|
|
|
if (features) setSelected(features.properties.key); |
|
|
|
|
if (features) { |
|
|
|
|
setSelected([features.properties.key]); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
window._mapbox = map; |
|
|
|
@ -212,6 +224,14 @@ export default function OperationApprovalsContainer({ mode }) {
|
|
|
|
|
}; |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
// 다른 더보기의 단건 조회 시
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (diffRowZoneNo > 0) { |
|
|
|
|
const area = areaCoordList.filter(k => k.zoneNo === diffRowZoneNo); |
|
|
|
|
handlerDetail(area); |
|
|
|
|
} |
|
|
|
|
}, [diffRowZoneNo]); |
|
|
|
|
|
|
|
|
|
const handleDragEnd = e => { |
|
|
|
|
setIsPopup(true); |
|
|
|
|
const el = document.querySelector('.flight-approval-layer'); |
|
|
|
@ -292,11 +312,22 @@ export default function OperationApprovalsContainer({ mode }) {
|
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handlerDetail = area => { |
|
|
|
|
if (area.length === 1) { |
|
|
|
|
setSelected(area[0].planAreaSno); |
|
|
|
|
//현재 선택한 sno 및 areacoordList 저장
|
|
|
|
|
const handlerDetail = async area => { |
|
|
|
|
if (area.length > 0) { |
|
|
|
|
if (area.length > 1) { |
|
|
|
|
const planAreaSno = []; |
|
|
|
|
area.map(data => { |
|
|
|
|
planAreaSno.push(data.planAreaSno); |
|
|
|
|
}); |
|
|
|
|
setSelected(planAreaSno); |
|
|
|
|
} else { |
|
|
|
|
setSelected([area[0].planAreaSno]); |
|
|
|
|
} |
|
|
|
|
setSelectedPlanSno(area[0].planSno); |
|
|
|
|
} else { |
|
|
|
|
setSelected(null); |
|
|
|
|
setSelected([]); |
|
|
|
|
setSelectedPlanSno([]); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
dispatch(clientSaveAreaCoordinateList(area)); |
|
|
|
@ -304,6 +335,7 @@ export default function OperationApprovalsContainer({ mode }) {
|
|
|
|
|
handlerMapInit(); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 지도 레이어 초기화
|
|
|
|
|
const handlerMapInit = () => { |
|
|
|
|
let mapInstance = mode === 'container' ? map : window.opener._mapbox; |
|
|
|
|
|
|
|
|
@ -320,9 +352,6 @@ export default function OperationApprovalsContainer({ mode }) {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
dispatch(clientSetIsMapLoading(true)); |
|
|
|
|
// const preview = mapInstance.getSource('operationLayer');
|
|
|
|
|
|
|
|
|
|
// if (preview) setPreviewLayer(preview);
|
|
|
|
|
|
|
|
|
|
setIsMapLoading(true); |
|
|
|
|
|
|
|
|
@ -331,9 +360,7 @@ export default function OperationApprovalsContainer({ mode }) {
|
|
|
|
|
dispatch(clientMapInit(mapInstance)); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 더보기 펼친게 두개(A,B)인 상황에서
|
|
|
|
|
// A의 1번에 포커스 잡혀있다가 B의 1을 클릭하면
|
|
|
|
|
// B구역이 안그려지고(A구역은 그대로) 포커스만 잡히는 에러 고치기
|
|
|
|
|
// 비행구역 생성 및 화면 포커스
|
|
|
|
|
const handlerAreaDraw = () => { |
|
|
|
|
if (areaCoordList.length > 0) { |
|
|
|
|
operationLayer.features = []; |
|
|
|
@ -367,12 +394,28 @@ export default function OperationApprovalsContainer({ mode }) {
|
|
|
|
|
handlerFitBounds(mapObject, fitZoomPaths, 400, 'POLYGON', 'flight'); |
|
|
|
|
|
|
|
|
|
if (areaCoordList.length !== 1 || !areaCoordList[0]?.key) { |
|
|
|
|
if (diffRowZoneNo > 0) { |
|
|
|
|
setDiffRowZoneNo(0); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
handlerInfoWindow(areaCoordList); |
|
|
|
|
mapObject?.getSource('operationLayer')?.setData(operationLayer); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 비행구역 초기화
|
|
|
|
|
const handlerRemoveArea = () => { |
|
|
|
|
if (dataBlocks.length > 0) { |
|
|
|
|
dataBlocks?.map(block => { |
|
|
|
|
block.remove(); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
operationLayer.features = []; |
|
|
|
|
mapObject?.getSource('operationLayer')?.setData(operationLayer); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 데이터블록 표출 이벤트
|
|
|
|
|
const handlerInfoWindow = areaList => { |
|
|
|
|
if (dataBlocks.length > 0) { |
|
|
|
@ -731,13 +774,25 @@ export default function OperationApprovalsContainer({ mode }) {
|
|
|
|
|
<h4>측정</h4> |
|
|
|
|
<div className='distance-check'> |
|
|
|
|
<div class='btn-box'> |
|
|
|
|
<Button className='btn-icon rounded-circle' color='primary' size='sm'> |
|
|
|
|
<Button |
|
|
|
|
className='btn-icon rounded-circle' |
|
|
|
|
color='primary' |
|
|
|
|
size='sm' |
|
|
|
|
> |
|
|
|
|
<FiRotateCw size={16} /> |
|
|
|
|
</Button> |
|
|
|
|
<Button className='btn-icon rounded-circle' color='primary' size='sm'> |
|
|
|
|
<FiCornerUpLeft size={16} /> |
|
|
|
|
<Button |
|
|
|
|
className='btn-icon rounded-circle' |
|
|
|
|
color='primary' |
|
|
|
|
size='sm' |
|
|
|
|
> |
|
|
|
|
<FiCornerUpLeft size={16} /> |
|
|
|
|
</Button> |
|
|
|
|
<Button className='btn-icon rounded-circle' color='dark' size='sm'> |
|
|
|
|
<Button |
|
|
|
|
className='btn-icon rounded-circle' |
|
|
|
|
color='dark' |
|
|
|
|
size='sm' |
|
|
|
|
> |
|
|
|
|
<X size={16} /> |
|
|
|
|
</Button> |
|
|
|
|
</div> |
|
|
|
@ -796,7 +851,9 @@ export default function OperationApprovalsContainer({ mode }) {
|
|
|
|
|
startDate={startDate} |
|
|
|
|
endDate={endDate} |
|
|
|
|
selected={selected} |
|
|
|
|
selectedPlanSno={selectedPlanSno} |
|
|
|
|
handlerDetail={handlerDetail} |
|
|
|
|
setDiffRowZoneNo={setDiffRowZoneNo} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|