+ {!results ? (
+ <>
+
{EMPTY_MESSAGE}
+ {loading && (
+
+
+ Loading...
+
+ )}
+ >
+ ) : (
+ <>
+ return (
+
+
비행승인 신청 결과 목록
+
+ 총 {results.length}건 결과
+
+
+ {results.map(data => (
+
{
+ props.handlerDetail(data.cntrlId);
+ }}
+ key={Math.random()}
+ >
+
+ -
+
민원번호
+ {data.complaint}
+
+ -
+
위도/경도
+ {data.coord}
+
+ -
+
반경
+ {data.radius}m
+
+ -
+
고도
+ {data.elev}m
+
+ -
+
승인 결과
+ {data.approval}
+
+ -
+
사유
+ {data.reason}
+
+ -
+
담당 관할기관
+ {data.Representative}
+
+
+
+ ))}
+ )
+ {false && (
+
+
+ Loading...
+
+ )}
+ {/*
*/}
+ >
+ )}
+
+ );
+}
diff --git a/src/components/flight/FlightApprovalsList.js b/src/components/flight/FlightApprovalsList.js
new file mode 100644
index 00000000..4ce08163
--- /dev/null
+++ b/src/components/flight/FlightApprovalsList.js
@@ -0,0 +1,253 @@
+import {
+ useEffect,
+ useState,
+ lazy,
+ useRef,
+ useCallback,
+ Suspense
+} from 'react';
+import FlightApprovalsInfo from './FlightApprovalsInfo.js';
+import FlightApprovalsReport from './FlightApprovalsReport.js';
+import mapboxgl from 'mapbox-gl';
+import { MAPBOX_TOKEN } from '../../configs/constants';
+const FeatureAirZone = lazy(() =>
+ import('../map/mapbox/feature/FeatureAirZone.js')
+);
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import {
+ CircleMode,
+ DragCircleMode,
+ DirectMode,
+ SimpleSelectMode
+} from 'mapbox-gl-draw-circle';
+import MapboxLanguage from '@mapbox/mapbox-gl-language';
+import threebox from 'threebox-plugin';
+
+export default function FlightApprovalsList() {
+ const [data, setData] = useState([
+ {
+ cntrlId: '580d97c7-a7f8-4378-90bc-6dbc42d85bd4',
+ complaint: '15000',
+ radius: '100',
+ coord: '37.33395/126.59298',
+ elev: '100',
+ approval: '승인',
+ reason: '관제권 내 허용 고도(50m/80m)',
+ Representative: '김포항공관리사무소',
+ stArea: ' 인천광역시 부평구 청천동 372',
+ cntrlStDt: '2023-11-22 13:14:12',
+ cntrlEndDt: '2023-11-22 13:16:29'
+ },
+ {
+ cntrlId: '580d97c7-a7f8-4378-90bc-6dbc42d85bd5',
+ complaint: '15000',
+ radius: '100',
+ coord: '37.33395/126.59298',
+ elev: '100',
+ approval: '승인',
+ reason: '관제권 내 허용 고도(50m/80m)',
+ Representative: '김포항공관리사무소',
+ stArea: ' 인천광역시 부평구 청천동 372',
+ cntrlStDt: '2023-11-22 13:14:12',
+ cntrlEndDt: '2023-11-22 13:16:29'
+ },
+ {
+ cntrlId: '580d97c7-a7f8-4378-90bc-6dbc42d85bd6',
+ complaint: '15000',
+ radius: '100',
+ elev: '100',
+ coord: '37.33395/126.59298',
+ approval: '승인',
+ reason: '관제권 내 허용 고도(50m/80m)',
+ Representative: '김포항공관리사무소',
+ stArea: ' 인천광역시 부평구 청천동 372',
+ cntrlStDt: '2023-11-22 13:14:12',
+ cntrlEndDt: '2023-11-22 13:16:29'
+ },
+ {
+ cntrlId: '580d97c7-a7f8-4378-90bc-6dbc42d85bd7',
+ complaint: '15000',
+ radius: '100',
+ coord: '37.33395/126.59298',
+ elev: '100',
+ approval: '승인',
+ reason: '관제권 내 허용 고도(50m/80m)',
+ Representative: '김포항공관리사무소',
+ stArea: ' 인천광역시 부평구 청천동 372',
+ cntrlStDt: '2023-11-22 13:14:12',
+ cntrlEndDt: '2023-11-22 13:16:29'
+ },
+ {
+ cntrlId: '580d97c7-a7f8-4378-90bc-6dbc42d85bd8',
+ complaint: '15000',
+ radius: '100',
+ coord: '37.33395/126.59298',
+ elev: '100',
+ approval: '승인',
+ reason: '관제권 내 허용 고도(50m/80m)',
+ Representative: '김포항공관리사무소',
+ stArea: ' 인천광역시 부평구 청천동 372',
+ cntrlStDt: '2023-11-22 13:14:12',
+ cntrlEndDt: '2023-11-22 13:16:29'
+ }
+ ]);
+ const [selected, setSelected] = useState(null);
+ const [isMapLoading, setIsMapLoading] = useState(false);
+ // 비행구역 그리기
+ const [drawObj, setDrawObj] = useState();
+
+ const [filter, setFilter] = useState('');
+ // 지도
+ const [mapObject, setMapObject] = useState();
+ const handlerSearch = search => {
+ setFilter(search);
+
+ // setParams({ ...params, search1 });
+ // dispatch(
+ // getSmltList({
+ // searchParams: { ...params, search1 },
+ // page: 1
+ // })
+ // );
+ };
+
+ // 상세보기
+ const handlerDetail = id => {
+ setSelected(id);
+ };
+
+ useEffect(() => {
+ // handlerMapInit();
+ }, []);
+
+ const handlerMapInit = () => {
+ mapboxgl.accessToken = MAPBOX_TOKEN;
+ const map = new mapboxgl.Map({
+ container: 'map',
+ style: 'mapbox://styles/mapbox/streets-v12'
+ });
+
+ // 비행구역 상세맵 draw 정보 셋팅
+ const draw = new MapboxDraw({
+ displayControlsDefault: false,
+ userProperties: true,
+ boxSelect: false,
+ modes: {
+ ...MapboxDraw.modes,
+ draw_circle: CircleMode,
+ drag_circle: DragCircleMode,
+ direct_select: DirectMode,
+ simple_select: SimpleSelectMode
+ },
+ styles: [
+ {
+ // polyline
+ id: 'gl-draw-line',
+ type: 'line',
+ filter: [
+ 'all',
+ ['==', '$type', 'LineString'],
+ ['!=', 'mode', 'static']
+ ],
+ layout: {
+ 'line-cap': 'round',
+ 'line-join': 'round'
+ },
+ paint: {
+ 'line-color': '#8a1c05',
+ 'line-dasharray': [0.2, 2],
+ 'line-width': 2
+ }
+ },
+ {
+ // polygon fill
+ id: 'gl-draw-polygon-fill',
+ type: 'fill',
+ filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
+ paint: {
+ 'fill-color': '#8a1c05',
+ 'fill-outline-color': '#8a1c05',
+ 'fill-opacity': 0.1
+ }
+ },
+ // polygon outline
+ {
+ id: 'gl-draw-polygon-stroke-active',
+ type: 'line',
+ filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
+ layout: {
+ 'line-cap': 'round',
+ 'line-join': 'round'
+ },
+ paint: {
+ 'line-color': '#8a1c05',
+ 'line-dasharray': [0.2, 2],
+ 'line-width': 2
+ }
+ },
+ {
+ // vertex point halos
+ id: 'gl-draw-polygon-and-line-vertex-halo-active',
+ type: 'circle',
+ filter: [
+ 'all',
+ ['==', 'meta', 'vertex'],
+ ['==', '$type', 'Point'],
+ ['!=', 'mode', 'static']
+ ],
+ paint: {
+ 'circle-radius': 8,
+ 'circle-color': '#ffffff'
+ }
+ },
+ {
+ // vertex points
+ id: 'gl-draw-polygon-and-line-vertex-active',
+ type: 'circle',
+ filter: [
+ 'all',
+ ['==', 'meta', 'vertex'],
+ ['==', '$type', 'Point'],
+ ['!=', 'mode', 'static']
+ ],
+ paint: {
+ 'circle-radius': 6,
+ 'circle-color': '#8a1c05'
+ }
+ }
+ ]
+ });
+
+ setDrawObj(draw);
+ map.dragRotate.disable();
+
+ const language = new MapboxLanguage();
+ map.addControl(language);
+
+ const tb = (window.tb = new threebox.Threebox(
+ map,
+ map.getCanvas().getContext('webgl'),
+ {
+ enableSelectingObjects: true,
+ enableTooltips: true
+ }
+ ));
+
+ setMapObject(map);
+ // dispatch(clientMapInit(map));
+ };
+
+ return (
+