|
|
|
@ -1,14 +1,8 @@
|
|
|
|
|
import { useEffect, useRef, useState, lazy, Suspense } from 'react'; |
|
|
|
|
import { useDispatch, useSelector } from '@src/redux/store'; |
|
|
|
|
import { Map } from 'react-feather'; |
|
|
|
|
import FlightApprovalsReport from '../../components/flight/FlightApprovalsReport'; |
|
|
|
|
import { |
|
|
|
|
getLaancDetail, |
|
|
|
|
AreaBufferList |
|
|
|
|
} from '@src/redux/features/laanc/laancThunk'; |
|
|
|
|
import { |
|
|
|
|
InitFeature, |
|
|
|
|
handlerCreatePoint, |
|
|
|
|
handlerFitBounds, |
|
|
|
|
handlerGetCircleCoord, |
|
|
|
|
flightlayerWayPoint, |
|
|
|
@ -24,159 +18,11 @@ import { clientMapInit } from '@src/redux/features/control/map/mapSlice';
|
|
|
|
|
import FlightApprovalsTable from '@src/components/flight/FlightApprovalsTable'; |
|
|
|
|
import { getLaancAprvList } from '@src/redux/features/laanc/laancThunk'; |
|
|
|
|
import dayjs from 'dayjs'; |
|
|
|
|
import { X } from 'react-feather'; |
|
|
|
|
|
|
|
|
|
export default function FlightApprovalsContainer() { |
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
|
|
|
|
|
const [res, setRes] = useState( |
|
|
|
|
[ |
|
|
|
|
{ |
|
|
|
|
planSno: '364', |
|
|
|
|
complaint: '15000', |
|
|
|
|
radius: '1000', |
|
|
|
|
coord: '37.55529/126.68347', |
|
|
|
|
elev: '100', |
|
|
|
|
approval: '미승인', |
|
|
|
|
Representative: '김포항공관리사무소', |
|
|
|
|
reason: |
|
|
|
|
'신청하신 비행구역이 비 가시권 입니다. 특별비행신청 부탁드립니다.', |
|
|
|
|
stArea: ' 인천광역시 부평구 청천동 372', |
|
|
|
|
cntrlStDt: '2024-04-05 08:50:00', |
|
|
|
|
cntrlEndDt: '2023-11-22 13:16:29' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
planSno: '363', |
|
|
|
|
complaint: '15000', |
|
|
|
|
radius: '100', |
|
|
|
|
coord: '37.53058/126.71821', |
|
|
|
|
elev: '100', |
|
|
|
|
approval: '승인', |
|
|
|
|
reason: '관제권 내 허용 고도(신청고도 100m/허용고도 120m) 입니다.', |
|
|
|
|
Representative: '김포항공관리사무소', |
|
|
|
|
stArea: ' 인천광역시 부평구 청천동 372', |
|
|
|
|
cntrlStDt: '2024-04-05 13:14:12', |
|
|
|
|
cntrlEndDt: '2023-11-22 13:16:29' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
planSno: '362', |
|
|
|
|
complaint: '15000', |
|
|
|
|
radius: '100', |
|
|
|
|
coord: '37.48783/126.73621', |
|
|
|
|
elev: '110', |
|
|
|
|
approval: '승인', |
|
|
|
|
reason: '관제권 내 허용 고도(신청고도 110m/허용고도 120m) 입니다.', |
|
|
|
|
Representative: '김포항공관리사무소', |
|
|
|
|
stArea: ' 인천광역시 부평구 청천동 372', |
|
|
|
|
cntrlStDt: '2024-04-05 12:14:12', |
|
|
|
|
cntrlEndDt: '2023-11-22 13:16:29' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
planSno: '361', |
|
|
|
|
complaint: '15000', |
|
|
|
|
radius: '376', |
|
|
|
|
elev: '140', |
|
|
|
|
coord: '37.49127/126.72556', |
|
|
|
|
approval: '미승인', |
|
|
|
|
reason: '관제권 내 제한 고도(신청고도 140m/허용고도 120m) 입니다.', |
|
|
|
|
Representative: '김포항공관리사무소', |
|
|
|
|
stArea: ' 인천광역시 부평구 청천동 372', |
|
|
|
|
cntrlStDt: '2024-04-05 12:01:00', |
|
|
|
|
cntrlEndDt: '2023-11-22 13:16:29' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
planSno: '360', |
|
|
|
|
complaint: '15000', |
|
|
|
|
radius: '100', |
|
|
|
|
coord: '37.54417/126.72024', |
|
|
|
|
elev: '120', |
|
|
|
|
approval: '미승인', |
|
|
|
|
reason: '관제권 내 제한 고도(신청고도 120m/허용고도 120m) 입니다.', |
|
|
|
|
Representative: '김포항공관리사무소', |
|
|
|
|
stArea: ' 인천광역시 부평구 청천동 372', |
|
|
|
|
cntrlStDt: '2024-04-05 11:50:12', |
|
|
|
|
cntrlEndDt: '2023-11-22 13:16:29' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
planSno: '359', |
|
|
|
|
complaint: '15000', |
|
|
|
|
radius: '100', |
|
|
|
|
coord: '37.50211/126.78935', |
|
|
|
|
elev: '50', |
|
|
|
|
approval: '승인', |
|
|
|
|
reason: '관제권 내 허용 고도(신청고도 50m/허용고도 80m) 입니다.', |
|
|
|
|
Representative: '김포항공관리사무소', |
|
|
|
|
stArea: ' 인천광역시 부평구 청천동 372', |
|
|
|
|
cntrlStDt: '2024-04-05 11:10:00', |
|
|
|
|
cntrlEndDt: '2023-11-22 13:16:29' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
planSno: '358', |
|
|
|
|
complaint: '15000', |
|
|
|
|
radius: '274', |
|
|
|
|
coord: '37.50748/126.79796', |
|
|
|
|
elev: '30', |
|
|
|
|
approval: '승인', |
|
|
|
|
reason: '관제권 내 허용 고도(신청고도 30m/허용고도 40m) 입니다.', |
|
|
|
|
Representative: '김포항공관리사무소', |
|
|
|
|
stArea: ' 인천광역시 부평구 청천동 372', |
|
|
|
|
cntrlStDt: '2024-04-05 10:40:00', |
|
|
|
|
cntrlEndDt: '2023-11-22 13:16:29' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
planSno: '357', |
|
|
|
|
complaint: '15000', |
|
|
|
|
radius: '200', |
|
|
|
|
coord: '37.51063/126.77923', |
|
|
|
|
elev: '100', |
|
|
|
|
approval: '미승인', |
|
|
|
|
reason: '관제권 내 제한 고도(신청고도 100m/80m) 입니다.', |
|
|
|
|
Representative: '김포항공관리사무소', |
|
|
|
|
stArea: ' 인천광역시 부평구 청천동 372', |
|
|
|
|
cntrlStDt: '2024-04-05 10:14:00', |
|
|
|
|
cntrlEndDt: '2023-11-22 13:16:29' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
planSno: '356', |
|
|
|
|
complaint: '15000', |
|
|
|
|
radius: '200', |
|
|
|
|
coord: '37.50753/126.77283', |
|
|
|
|
elev: '110', |
|
|
|
|
approval: '미승인', |
|
|
|
|
reason: '관제권 내 제한 고도(신청고도 110m/허용고도 100m) 입니다.', |
|
|
|
|
Representative: '김포항공관리사무소', |
|
|
|
|
stArea: ' 인천광역시 부평구 청천동 372', |
|
|
|
|
cntrlStDt: '2024-04-05 09:50:00', |
|
|
|
|
cntrlEndDt: '2023-11-22 13:16:29' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
planSno: '355', |
|
|
|
|
complaint: '15000', |
|
|
|
|
radius: '430', |
|
|
|
|
coord: '37.46752/126.70865', |
|
|
|
|
elev: '130', |
|
|
|
|
approval: '비대상', |
|
|
|
|
reason: '해당 구역은 비 대상(신청고도 130m/허용고도 150m) 지역입니다.', |
|
|
|
|
Representative: '김포항공관리사무소', |
|
|
|
|
stArea: ' 인천광역시 부평구 청천동 372', |
|
|
|
|
cntrlStDt: '2024-04-05 09:14:00', |
|
|
|
|
cntrlEndDt: '2023-11-22 13:16:29' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
planSno: '354', |
|
|
|
|
complaint: '15000', |
|
|
|
|
radius: '300', |
|
|
|
|
coord: '37.45467/126.73687', |
|
|
|
|
elev: '160', |
|
|
|
|
approval: '미승인', |
|
|
|
|
reason: '해당 구역은 비 대상(신청고도 160m/허용고도 150m) 지역입니다.', |
|
|
|
|
Representative: '김포항공관리사무소', |
|
|
|
|
stArea: ' 인천광역시 부평구 청천동 372', |
|
|
|
|
cntrlStDt: '2024-04-05 08:50:00', |
|
|
|
|
cntrlEndDt: '2023-11-22 13:16:29' |
|
|
|
|
} |
|
|
|
|
].reverse() |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
const [selected, setSelected] = useState(null); |
|
|
|
|
const [isMapLoading, setIsMapLoading] = useState(false); |
|
|
|
|
// 비행구역 그리기
|
|
|
|
@ -187,12 +33,13 @@ export default function FlightApprovalsContainer() {
|
|
|
|
|
|
|
|
|
|
const { areaCoordList, isOpenModal } = useSelector(state => state.laancState); |
|
|
|
|
|
|
|
|
|
//
|
|
|
|
|
const [startDate, setStartDate] = useState(dayjs().format('YYYY-MM-DD')); |
|
|
|
|
// 미니맵 레이어
|
|
|
|
|
const [previewLayer, setPreviewLayer] = useState(); |
|
|
|
|
|
|
|
|
|
const { laancAprvList } = useSelector(state => state.laancState); |
|
|
|
|
|
|
|
|
|
const { laancDetail } = useSelector(state => state.laancState); |
|
|
|
|
const map = useSelector(state => state.mapState.map); |
|
|
|
|
|
|
|
|
|
const previewGeo2 = { |
|
|
|
@ -201,7 +48,7 @@ export default function FlightApprovalsContainer() {
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
const searchStDt = dayjs().subtract(1, 'months').format('YYYY-MM-DD'); |
|
|
|
|
const searchStDt = dayjs().format('YYYY-MM-DD'); |
|
|
|
|
const searchEndDt = dayjs().format('YYYY-MM-DD'); |
|
|
|
|
dispatch( |
|
|
|
|
getLaancAprvList({ |
|
|
|
@ -213,54 +60,64 @@ export default function FlightApprovalsContainer() {
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (areaCoordList.length != 0) { |
|
|
|
|
const area = areaCoordList[0]; |
|
|
|
|
if (area.areaType && area.areaType !== '') { |
|
|
|
|
handlerPreviewDraw(); |
|
|
|
|
} |
|
|
|
|
handlerPreviewDraw(); |
|
|
|
|
} |
|
|
|
|
}, [areaCoordList]); |
|
|
|
|
|
|
|
|
|
const handlerSearch = search => { |
|
|
|
|
setFilter(search); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handlerDetail = id => { |
|
|
|
|
if (id === '364') { |
|
|
|
|
setSelected(id); |
|
|
|
|
// dispatch(getLaancDetail(365));
|
|
|
|
|
} else { |
|
|
|
|
setSelected(id); |
|
|
|
|
// dispatch(getLaancDetail(id));
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
handlerMapInit(); |
|
|
|
|
// setAreaCoordList(res.payload.areaList);
|
|
|
|
|
// if (areaCoordList.areaType === 'LINE') {
|
|
|
|
|
// const val = await dispatch(AreaBufferList(areaCoordList));
|
|
|
|
|
// setAreaBufferList(val.payload[0].bufferCoordList);
|
|
|
|
|
// }
|
|
|
|
|
// if (areaCoordList.length > 0) handlerMapInit();
|
|
|
|
|
}; |
|
|
|
|
useEffect(() => { |
|
|
|
|
if (map) { |
|
|
|
|
setMapObject(map); |
|
|
|
|
} |
|
|
|
|
}, [map]); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (laancDetail.planSno) { |
|
|
|
|
dispatch(AreaBufferList(laancDetail?.areaList)); |
|
|
|
|
dispatch(clientSaveAreaCoordinateList(laancDetail?.areaList)); |
|
|
|
|
} |
|
|
|
|
}, [laancDetail]); |
|
|
|
|
|
|
|
|
|
useEffect(async () => { |
|
|
|
|
if (areaCoordList.length === 0) return; |
|
|
|
|
}, [areaCoordList]); |
|
|
|
|
|
|
|
|
|
const handlerSearch = (search, searchDate) => { |
|
|
|
|
setStartDate(searchDate.startDate); |
|
|
|
|
|
|
|
|
|
if ( |
|
|
|
|
search != '' && |
|
|
|
|
(search === '승인' || search === '미승인' || search === '비대상') |
|
|
|
|
) { |
|
|
|
|
dispatch( |
|
|
|
|
getLaancAprvList({ |
|
|
|
|
searchStDt: searchDate.startDate, |
|
|
|
|
searchEndDt: searchDate.endDate, |
|
|
|
|
approvalCd: search |
|
|
|
|
}) |
|
|
|
|
); |
|
|
|
|
} else if (search != '') { |
|
|
|
|
dispatch( |
|
|
|
|
getLaancAprvList({ |
|
|
|
|
searchStDt: searchDate.startDate, |
|
|
|
|
searchEndDt: searchDate.endDate, |
|
|
|
|
applyNo: search |
|
|
|
|
}) |
|
|
|
|
); |
|
|
|
|
} else { |
|
|
|
|
dispatch( |
|
|
|
|
getLaancAprvList({ |
|
|
|
|
searchStDt: searchDate.startDate, |
|
|
|
|
searchEndDt: searchDate.endDate |
|
|
|
|
}) |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
// );
|
|
|
|
|
setFilter(search); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handlerDetail = area => { |
|
|
|
|
setSelected(area.planAreaSno); |
|
|
|
|
|
|
|
|
|
dispatch(clientSaveAreaCoordinateList([area])); |
|
|
|
|
|
|
|
|
|
handlerMapInit(); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handlerMapInit = () => { |
|
|
|
|
if (map.getSource('preview')) { |
|
|
|
|
// map.removeSource('preview');
|
|
|
|
|
} else { |
|
|
|
|
map.addSource('preview', { |
|
|
|
|
type: 'geojson', |
|
|
|
@ -285,76 +142,30 @@ export default function FlightApprovalsContainer() {
|
|
|
|
|
const handlerPreviewDraw = () => { |
|
|
|
|
if (areaCoordList.length > 0) { |
|
|
|
|
const areas = areaCoordList[0]; |
|
|
|
|
const paths = []; |
|
|
|
|
areas.coordList.forEach(coord => paths.push([coord.lon, coord.lat])); |
|
|
|
|
|
|
|
|
|
previewGeo2.features = []; |
|
|
|
|
|
|
|
|
|
let fitZoomPaths = []; |
|
|
|
|
if (areas.areaType) { |
|
|
|
|
if (areas.areaType === 'CIRCLE') { |
|
|
|
|
const radius = areas.bufferZone; |
|
|
|
|
const circleCoords = handlerGetCircleCoord(paths[0], radius); |
|
|
|
|
|
|
|
|
|
const circle = InitFeature('Polygon', 'CIRCLE'); |
|
|
|
|
circle.properties.center = paths[0]; |
|
|
|
|
circle.geometry.coordinates = circleCoords; |
|
|
|
|
|
|
|
|
|
previewGeo2.features.push(circle); |
|
|
|
|
|
|
|
|
|
mapObject.setCenter(circle.properties.center); |
|
|
|
|
|
|
|
|
|
fitZoomPaths = circleCoords[0]; |
|
|
|
|
} |
|
|
|
|
// else {
|
|
|
|
|
// const lineString = InitFeature('LineString', 'LINE');
|
|
|
|
|
// const bufferPolyline = InitFeature('LineString', 'buffer');
|
|
|
|
|
// const polygon = InitFeature('Polygon', 'POLYGON');
|
|
|
|
|
// const point = [];
|
|
|
|
|
// if (areas.areaType === 'LINE') {
|
|
|
|
|
// lineString.geometry.coordinates = paths;
|
|
|
|
|
// previewGeo2.features.push(lineString);
|
|
|
|
|
const radius = areas.bufferZone; |
|
|
|
|
const circleCoords = handlerGetCircleCoord( |
|
|
|
|
[areas.lon, areas.lat], |
|
|
|
|
radius |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
// //버퍼 생성
|
|
|
|
|
// if (areas.bufferCoordList) {
|
|
|
|
|
// const bufferPaths = [];
|
|
|
|
|
const circle = InitFeature('Polygon', 'CIRCLE'); |
|
|
|
|
circle.properties.center = [areas.lon, areas.lat]; |
|
|
|
|
circle.geometry.coordinates = circleCoords; |
|
|
|
|
|
|
|
|
|
// areas.bufferCoordList.forEach(bfCoord =>
|
|
|
|
|
// bufferPaths.push([bfCoord.lon, bfCoord.lat])
|
|
|
|
|
// );
|
|
|
|
|
previewGeo2.features.push(circle); |
|
|
|
|
|
|
|
|
|
// bufferPolyline.geometry.coordinates = bufferPaths;
|
|
|
|
|
// previewGeo2.features.push(bufferPolyline);
|
|
|
|
|
// }
|
|
|
|
|
// } else if (areas.areaType === 'POLYGON') {
|
|
|
|
|
// polygon.geometry.coordinates = [paths];
|
|
|
|
|
// previewGeo2.features.push(polygon);
|
|
|
|
|
// }
|
|
|
|
|
// // 포인트 생성
|
|
|
|
|
// paths.forEach((p, i) => {
|
|
|
|
|
// const wayPoint = handlerCreatePoint(p, i, areas.areaType);
|
|
|
|
|
// point.push(wayPoint);
|
|
|
|
|
// });
|
|
|
|
|
// previewGeo2.features = previewGeo2.features.filter(
|
|
|
|
|
// geo => geo.properties.id !== 'point'
|
|
|
|
|
// );
|
|
|
|
|
// point.forEach(p => previewGeo2.features.push(p));
|
|
|
|
|
mapObject.setCenter(circle.properties.center); |
|
|
|
|
|
|
|
|
|
// //지도 줌 좌표 설정
|
|
|
|
|
// fitZoomPaths = paths.concat();
|
|
|
|
|
// }
|
|
|
|
|
fitZoomPaths = circleCoords[0]; |
|
|
|
|
|
|
|
|
|
handlerFitBounds( |
|
|
|
|
mapObject, |
|
|
|
|
fitZoomPaths, |
|
|
|
|
400, |
|
|
|
|
areas.areaType, |
|
|
|
|
'flight' |
|
|
|
|
); |
|
|
|
|
handlerFitBounds(mapObject, fitZoomPaths, 400, 'CIRCLE', 'flight'); |
|
|
|
|
|
|
|
|
|
// mapObject.setPaintProperty('waypoint', 'circle-radius', 10);
|
|
|
|
|
mapObject.getSource('preview').setData(previewGeo2); |
|
|
|
|
} |
|
|
|
|
// mapObject.setPaintProperty('waypoint', 'circle-radius', 10);
|
|
|
|
|
mapObject.getSource('preview').setData(previewGeo2); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
@ -364,14 +175,12 @@ export default function FlightApprovalsContainer() {
|
|
|
|
|
<MapControl /> |
|
|
|
|
</div> |
|
|
|
|
<div className='right-menu active'> |
|
|
|
|
<div |
|
|
|
|
className='right-layer active flight-approval-layer' |
|
|
|
|
> |
|
|
|
|
<div className='right-layer active flight-approval-layer'> |
|
|
|
|
<div className='layer-content'> |
|
|
|
|
<FlightApprovalsReport handlerSearch={handlerSearch} /> |
|
|
|
|
<FlightApprovalsTable |
|
|
|
|
data={res} |
|
|
|
|
filter={filter} |
|
|
|
|
startDate={startDate} |
|
|
|
|
selected={selected} |
|
|
|
|
handlerDetail={handlerDetail} |
|
|
|
|
/> |
|
|
|
|