From 75ef99ef19046d3461ccdd2301af5f91a9b2f7b0 Mon Sep 17 00:00:00 2001 From: sanguu516 Date: Wed, 8 May 2024 16:08:12 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=20=EC=8A=B9=EC=9D=B8=20?= =?UTF-8?q?=EC=8B=A0=EC=B2=AD=20=EA=B2=B0=EA=B3=BC=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/crud/grid/GridDatatable.js | 10 +- .../flight/FlightApprovalsReport.js | 64 +- src/components/flight/FlightApprovalsTable.js | 366 ++--- .../flight/flightApprovalsContainer.js | 317 +---- src/redux/features/laanc/laancState.ts | 1 + src/views/design/tempCodeRunnerFile.js | 1257 +++++++++++++++++ 6 files changed, 1444 insertions(+), 571 deletions(-) create mode 100644 src/views/design/tempCodeRunnerFile.js diff --git a/src/components/crud/grid/GridDatatable.js b/src/components/crud/grid/GridDatatable.js index 4706e6aa..8fd13868 100644 --- a/src/components/crud/grid/GridDatatable.js +++ b/src/components/crud/grid/GridDatatable.js @@ -1,20 +1,17 @@ import DataTable from 'react-data-table-component'; import { ChevronDown } from 'react-feather'; -import { useLayoutEffect } from 'react'; +import { useEffect } from 'react'; import { EMPTY_MESSAGE } from '@src/configs/msgConst'; // DataTable lib 참고 // https://react-data-table-component.netlify.app/?path=/docs/api-props--page export const GridDatabase = props => { - useLayoutEffect(() => { + useEffect(() => { const el = document.querySelectorAll('.sc-AxhCb.sc-AxmLO'); - console.log('@?@?@?'); - console.log(el); for (let i = 0; i < el.length; i++) { - console.log(el); el[i].id = 'expandableRows'; } - }, []); + }, [props.data]); return props[`${props.handlerPageChange ? 'total' : 'count'}`] <= 0 ? (
@@ -35,7 +32,6 @@ export const GridDatabase = props => { responsive={true} sortIcon={} className='react-dataTable pal-dateTable' - onRowClicked={props.handleRowClick} paginationDefaultPage={props.page || 1} // defaultSortField='invoiceId' // paginationDefaultPage={currentPage} diff --git a/src/components/flight/FlightApprovalsReport.js b/src/components/flight/FlightApprovalsReport.js index 7ae43b7c..300e23e9 100644 --- a/src/components/flight/FlightApprovalsReport.js +++ b/src/components/flight/FlightApprovalsReport.js @@ -2,79 +2,57 @@ import { useState } from 'react'; import Flatpickr from 'react-flatpickr'; import { Button, Input, InputGroup, Col } from '@component/ui'; import { Search, Calendar } from 'react-feather'; - +import dayjs from 'dayjs'; export default function FlightApprovalsReport(props) { // 식별번호 const [filterId, setFilterId] = useState(''); - - // 키보드 enter 입력시 검색 - const handlerKeyPress = e => { - if (e.key === 'Enter') { - props.handlerSearch(filterId); - } - }; + // 달력 + const [searchDate, setSearchDate] = useState({ + startDate: dayjs().format('YYYY-MM-DD'), + endDate: dayjs().format('YYYY-MM-DD') + }); return (

비행승인 신청 검토결과 현황

-
- 검색일자 또는 민원번호/검토결과를 입력해주세요. +
+ 검색일자 또는 민원번호/검토결과를 입력해주세요.
-
+
{ + setSearchDate({ + startDate: dayjs(date[0]).format('YYYY-MM-DD'), + endDate: dayjs(date[1]).format('YYYY-MM-DD') + }); }} className='form-control flat-picker bg-transparent border-0 shadow-none' /> - +
setFilterId(`${e.target.value}`)} />
- {/* -
- setFilterId(`${e.target.value}`)} - /> - props.handlerSearch(filterId)} - size={21} - /> -
- */}
- {/* {dayjs(item.cntrlStDt).format('HH:mm')} - - {dayjs(item.cntrlEndDt).format('HH:mm')} */} -
- - -
-
{ - // props.handlerDetail(item.cntrlId); - // }} - key={Math.random()} - > -
-
-
비행구역 2번
-
-
-
중심좌표(위/경도)
-
36.45467/126.73687
-
-
-
반경(m)
-
- 100 {/* {dayjs(item.cntrlStDt).format('YYYY년 MM월 DD일')} */} -
-
-
-
고도(m)
-
180
-
-
-
검토결과
-
- 승인 - {/* {dayjs(item.cntrlStDt).format('HH:mm')} - - {dayjs(item.cntrlEndDt).format('HH:mm')} */} -
-
-
-
사유보기
-
- - {/* {dayjs(item.cntrlStDt).format('HH:mm')} - - {dayjs(item.cntrlEndDt).format('HH:mm')} */} -
-
-
-
-
{ - // props.handlerDetail(item.cntrlId); - // }} - key={Math.random()} - > -
-
-
비행구역 3번
-
-
-
중심좌표(위/경도)
-
39.45467/126.73687
-
-
-
반경(m)
-
- 140 {/* {dayjs(item.cntrlStDt).format('YYYY년 MM월 DD일')} */} -
-
-
-
고도(m)
-
120
-
-
-
검토결과
-
- 승인 - {/* {dayjs(item.cntrlStDt).format('HH:mm')} - - {dayjs(item.cntrlEndDt).format('HH:mm')} */} -
-
-
-
사유보기
-
- - {/* {dayjs(item.cntrlStDt).format('HH:mm')} - - {dayjs(item.cntrlEndDt).format('HH:mm')} */} -
-
-
-
+ {data.areaList?.map((area, index) => ( +
{ + props.handlerDetail(area); + }} + key={Math.random()} + > +
+
+
+ 비행구역 {index}번 +
+
+
+
중심좌표(위/경도)
+
+ {' '} + {area.lat}/{area.lon} +
+
+
+
반경(m)
+
{area.bufferZone}
+
+
+
고도(m)
+
{area.fltElev}
+
+
+
검토결과
+
+ {area.approvalCd === 'O' + ? '비대상' + : area.approvalCd === 'A' + ? '승인' + : '미승인'} +
+
+
+
사유보기
+
+ +
+
+
+
+ ))} ); }; - const customStyles = { - rows: { - style: { - minHeight: '70px' - } - }, - header: { - style: { - height: '100px' - } - }, - cells: { - style: { - minHeight: '76px' - } - } - }; - return (

비행승인 신청 검토결과 목록

- {dayjs().format('YYYY년 MM월 DD일')} 총 {results?.length} 건 결과 + {props.startDate} 총 {laancAprvList?.length} 건 결과
@@ -315,16 +145,18 @@ export default function FlightApprovalsTable(props) { - ) : null} + ) : ( +
+

비행승인 신청 건수가 없습니다.

+
+ )}
diff --git a/src/containers/flight/flightApprovalsContainer.js b/src/containers/flight/flightApprovalsContainer.js index 00685d24..3f7f6b9f 100644 --- a/src/containers/flight/flightApprovalsContainer.js +++ b/src/containers/flight/flightApprovalsContainer.js @@ -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() {
-
+
diff --git a/src/redux/features/laanc/laancState.ts b/src/redux/features/laanc/laancState.ts index ad5a1cb5..067e8999 100644 --- a/src/redux/features/laanc/laancState.ts +++ b/src/redux/features/laanc/laancState.ts @@ -629,6 +629,7 @@ export interface ILaancAprvListRq { applyNo: string; searchStDt: string; searchEndDt: string; + approvalCd: string; } export interface ILaancAprvListRs { diff --git a/src/views/design/tempCodeRunnerFile.js b/src/views/design/tempCodeRunnerFile.js new file mode 100644 index 00000000..cda983bf --- /dev/null +++ b/src/views/design/tempCodeRunnerFile.js @@ -0,0 +1,1257 @@ +import React, { useEffect, useState } from 'react'; +import { MapControl } from '../../components/map/MapControl'; +import '../../assets/css/custom.css'; +import drone_yellow from '../../assets/images/drone_yellow.png'; +import drone_black from '../../assets/images/drone_black.png'; +import drone_img from '../../assets/images/drone.jpg'; +import logo from '../../assets/images/pal_logo.png'; +import { + Button, + ButtonGroup, + InputGroupAddon, + InputGroup, + Input, + FormGroup, + Row, + Col, + InputGroupText, + CardText, + Badge, + Table, + CustomInput, + UncontrolledTooltip, + Card +} from 'reactstrap'; +import { + Search, + X, + ChevronDown, + Link, + Compass, + Sun, + CloudLightning, + Cloud, + CloudRain, + CloudDrizzle, + CloudSnow, + Navigation2, + Map, + Bell, + ChevronUp +} from 'react-feather'; +import { BiGridAlt, BiBuildings } from 'react-icons/bi'; +import { AiOutlinePoweroff } from 'react-icons/ai'; +import { VscRadioTower, VscCompareChanges, VscLoading } from 'react-icons/vsc'; +import { CgTrees } from 'react-icons/cg'; +import { ReactComponent as DroneMenuIcon } from '../../assets/images/drone_menu_icon.svg'; +import DroneIcon from '../../assets/images/drone-marker-icon.png'; +import DroneIconRed from '../../assets/images/drone-marker-icon-red.png'; +import DroneIconYellow from '../../assets/images/drone-marker-icon-yellow.png'; +import DroneIconSkyblue from '../../assets/images/drone-marker-icon-skyblue.png'; +import DroneIconPulple from '../../assets/images/drone-marker-icon-pulple.png'; +import AirplaneIconSkyblue from '../../assets/images/airplane-skyblue.png'; +//드론 현황 리스트 페이지=================================F================== +const DronFlightList = props => { + return ( +
+
+
+

드론 비행 현황 정보

+ +
+
+ + + + + + +
+
+
+
+

드론 현황

+ + 102대 비행중 + +
+
props.setOpenDronFlightDetail(true)} + > +
+
+
식별번호
+
GJRY2454
+
+
+
이륙 위치
+
+ 인천광역시 서구 로봇랜드로 155-11 +
+
+
+
이륙 시간
+
15:75
+
+
+
속도/고도
+
5.2m/s / 130.5m
+
+
+
+
+
+
+
식별번호
+
GJRY2454
+
+
+
이륙 위치
+
+ 인천광역시 서구 로봇랜드로 155-11 +
+
+
+
이륙 시간
+
15:75
+
+
+
속도/고도
+
5.2m/s / 130.5m
+
+
+
+
+
+
+
식별번호
+
GJRY2454
+
+
+
이륙 위치
+
+ 인천광역시 서구 로봇랜드로 155-11 +
+
+
+
이륙 시간
+
15:75
+
+
+
속도/고도
+
5.2m/s / 130.5m
+
+
+
+
+
+
+
식별번호
+
GJRY2454
+
+
+
이륙 위치
+
+ 인천광역시 서구 로봇랜드로 155-11 +
+
+
+
이륙 시간
+
15:75
+
+
+
속도/고도
+
5.2m/s / 130.5m
+
+
+
+
+
+
+
식별번호
+
GJRY2454
+
+
+
이륙 위치
+
+ 인천광역시 서구 로봇랜드로 155-11 +
+
+
+
이륙 시간
+
15:75
+
+
+
속도/고도
+
5.2m/s / 130.5m
+
+
+
+
+ {/* */} +
+ ); +}; + +//드론 상세 페이지 +//지은이 화면 구현! +const DronFlightDetail = props => { + return ( +
+
+
+

드론 상세정보

+ +
+
+
+ + MAVIC AIR +
+
+ +
+
+
+
+
기종
+
MAVIC AIR
+
+
+
식별번호
+
GRJVO453
+
+
+
중량
+
5KG
+
+
+
종류
+
쿼드콥터
+
+
+
배터리 잔량
+
50%
+
+
+
배터리 전압
+
50 volt
+
+
+
+
+
+
+
+

비행정보

+
+
+
+
+
+
이륙위치
+
+ 인천광역시 서구 로봇랜드로 155-11 +
+
+
+
이륙시간
+
13:53:29
+
+
+
현재위치
+
+ 인천광역시 부평구 안남로 272 +
+
+
+
속도
+
5.12m/s
+
+
+
고도
+
117.05m
+
+
+
좌표
+
35.232.600,127.650225
+
+
+
비행거리
+
67.05m
+
+
+
헤딩 방위각
+
270
+
+
+
상태
+
TAKEOFF(이륙)
+
+
+
위치정보 수신 시간
+
2021년6월30일 15:30:49
+
+
+
+
+
+
+
+

운영자 정보

+
+
+
+
+
+
소속기관
+
팔네트웍스
+
+
+
담당자 이름
+
홍길동
+
+
+
담당자 연락처
+
010-1234-1234
+
+
+
+
+
+ {/*
+
+

날씨 정보

+
+
+
+
+
+ 현재위치의 날씨 정보입니다. + 인천광역시 부평구 안남로 272 +
+ + + + + + + + + + + + + + + + + + + +
시각날씨기온풍향풍속
15시27℃2m/s
+
+
+
+
*/} +
+ ); +}; + +//날씨 페이지 +const WeatherList = props => { + return ( +
+
+
+

날씨 상세정보

+ +
+
+ + + + + + +
+
+
+
+
+
+
+ 검색하신 지역의 날씨 정보입니다. + + 인천광역시 부평구 안남로 272 + +
+ {/* 탭메뉴or탭내용 활성화 active */} +
+
    +
  • 오늘
    • +
  • 주간
    • +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
시각날씨기온풍향풍속
10시 + + 27℃ + + 2m/s
12시 + + 30℃ + + 3m/s
14시 + + 28℃ + + 4m/s
16시 + + 27℃ + + 7m/s
18시 + + 25℃ + + 2m/s
20시 + + 26℃ + + 2m/s
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
날짜날씨기온
06.19.(토) 오전 + + 최저 27℃
06.19.(토) 오후 + + 30℃
06.20.(일) 오전 + + 30℃
06.20.(일) 오후 + + 30℃
06.21.(월) 오전 + + 30℃
06.21.(월) 오후 + + 30℃
06.22.(화) 오전 + + 30℃
06.2.(화) 오후 + + 30℃
+
+
+
+
+
+
+ ); +}; + +//알림 페이지 + +//날씨 페이지 +const NoticeList = props => { + return ( +
+
+
+

알림 상세정보

+ +
+
+
+
+
+
전체 2000건
+
오늘 120건
+
+
+
+
+
+
+
+

알림 목록

+
+
+
+
+
+
통신 장애 알림
+
6월 17일
+
+
+ 통신장애 통신장애 통신장애 통신장애 통신장애 통신장애 통신장애 + 통신장애 통신장애{' '} +
+
+
+
+
+
+
+
+
비행 경로 이탈
+
6월 17일
+
+
+ 비행경로이탈 비행경로이탈 비행경로이탈 비행경로이탈 비행경로이탈 + 비행경로이탈 비행경로이탈 비행경로이탈 비행경로이탈 비행경로이탈 +
+
+
+
+
+
+ ); +}; + +//지역 검색 및 지도 필터 처리 + +const RightLayer = props => { + return ( +
+
+
+

지도유형

+ {/* */} +
+
+ + + + + +
+
+
+
+

지역검색

+ {/* */} +
+
+ + + + + + +
+
+
+
+

드론 중량

+
+
+
+
+
+
전체
+
+ +
+
+
+
250g 이하
+
+ +
+
+
+
250g 초과~2kg 이하
+
+ +
+
+
+
2kg 초과~7kg 이하
+
+ +
+
+
+
7kg 초과~25kg 이하
+
+ +
+
+
+
25kg 초과~150kg 이하
+
+ +
+
+
+
+
+
+
+
+

드론 상태

+
+
+
+
+
+
전체
+
+ +
+
+
+
Arming
+
+ +
+
+
+
Landing
+
+ +
+
+
+
Take off
+
+ +
+
+
+
Flight
+
+ +
+
+
+
+
+
+
+
+

공역 표출 정보

+
+
+
+
+
+
+ 비행금지구역 +
+
+ +
+
+
+
+ 비행제한구역 +
+
+ +
+
+
+
+ 관제권(공항) +
+
+ +
+
+
+
+ 비행장(군사) +
+
+ +
+
+
+
+ 이착륙장 +
+
+ +
+
+
+
+ 초경량비행장치공역 +
+
+ +
+
+
+
+
+
+
+
+

장애물 표출 정보

+
+
+
+
+
+
+ + 전체장애물 +
+
+ +
+
+
+
+ + 고층 건물 +
+
+ +
+
+
+
+ + 송전탑 +
+
+ +
+
+
+
+ + 국립공원 +
+
+ +
+
+
+
+
+
+
+
+

NOTAM 정보

+
+
+
+
+
+
NOTAM
+
+ +
+
+
+
+
+
+
+ ); +}; +//========================================= 지은이 화면 구현 ================================================================= +const DesignMain = () => { + const [openDronFlightList, setOpenDronFlightList] = useState(false); + const [openDronFlightDetail, setOpenDronFlightDetail] = useState(false); + const [openWeather, setOpenWeather] = useState(false); + const [openNoticeList, setOpenNoticeList] = useState(false); + + const [openRightLayer, setOpenRightLayer] = useState(false); + + return ( +
+
+
+ +
+ 인천광역시 + +
+
+
+ 기온 + 11℃ +
+
+ 풍향 + +
+
+ 풍속 + 1.2 m/s +
+
+ +
+
+ +
+ 비행중인 기체 +
+
+
+ 드론 + 165대 +
+
+ 항공기 + 2147대 +
+
+ +
+
+
+ + + + 1 + + + + 2 + + + + 3 + + + + 4 + + + + 5 + + + + + + + + + + + + +
+
+
+ KAL1154 +
+
+
+ 2667.4M(고도) + 450km(속도) + 123.121.123123(좌표) +
+
+
+ {/*
+
로봇타워로봇타워로봇타워로봇타워로봇타워로봇타워로봇타워
+
+
+ KAL1154 + 2667.4M37.123456123.121.123123 + 123.121.123123 +
+
+ 좌표정보 + 35.232600, 127.650225 +
+
+ +
*/} +
+
+ +
+
+ +
+
+
+
+ 2021-06-17 12:00:00AVSF123 장애물 + 지역에 접근하였습니다. +
+
+ 2021-06-30 13:00:00AVSF123 + 비행금지구역에 접근하였습니다. +
+
+ 2021-08-20 14:00:00AVSF123 + 국립공원구역에 접근하였습니다. +
+
+
+
+ + +
+
+
+

+ + PAL +

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
    +
  • + +
    • +
  • + + + +
    • + {/* socket_off = 클래스명 변경시 빨간색! 접속이 원할하지않을때 */} +
+
+ + {openDronFlightList ? ( + + ) : ( +
+ )} + {openWeather ? :
} + + {openNoticeList ? ( + + ) : ( +
+ )} + + {openDronFlightDetail ? ( + + ) : ( +
+ )} + + {openRightLayer ? ( +
+ +
+ +
+
+ ) : ( +
+ +
+
+ )} +
+ ); +}; + +export default DesignMain;