From 9f4bb33b367232e180393ab04c198aca49c3a1fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=83=81=ED=98=84?= Date: Wed, 20 Mar 2024 17:19:26 +0900 Subject: [PATCH 1/2] =?UTF-8?q?vertiport=20left=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/vertiport/VertiportLeftMenu.js | 264 ++++++++++++++++++ 1 file changed, 264 insertions(+) create mode 100644 src/components/vertiport/VertiportLeftMenu.js diff --git a/src/components/vertiport/VertiportLeftMenu.js b/src/components/vertiport/VertiportLeftMenu.js new file mode 100644 index 0000000..9833ce8 --- /dev/null +++ b/src/components/vertiport/VertiportLeftMenu.js @@ -0,0 +1,264 @@ +import moment from 'moment'; +import { useState, useEffect } from 'react'; +import { X } from 'react-feather'; +import { useDispatch, useSelector } from 'react-redux'; +import drone_img from '../../assets/images/drone.jpg'; +import uam_img from '../../assets/images/uam_img.jpg'; +import drone_yellow from '../../assets/images/drone_yellow.png'; +import { GET_ARCTFT_TYPE_CD, GET_WGHT_TYPE_CD } from '../../utility/CondeUtil'; +import { controlGpLogAction } from '../../modules/control/gp'; +import ControlAlarmDetail from '../../views/control/alarm/ControlAlarmDetail'; +import { + Navigation2, + Compass, + Sun, + Cloud, + CloudRain, + CloudSnow +} from 'react-feather'; +import { Table } from 'reactstrap'; + +export const VertiportLeftMenu = ({ setOpenReportList }) => { + const dispatch = useDispatch(); + + // 비정상상황 모달 + const [historyModal, setHistoryModal] = useState(false); + + // 기체 상세정보 + const { controlGpDetail, controlDetail } = useSelector( + state => state.controlGpDtlState + ); + + // 비정상상황 히스토리 내역 + const { controlGpWarnLog } = useSelector(state => state.controlGpLogState); + + // 해당 드론의 비정상상황 알림내역 불러옴 + useEffect(() => { + if (historyModal) { + if (controlGpDetail) { + dispatch(controlGpLogAction.request({ id: controlGpDetail.controlId })); + } + } + }, [historyModal]); + + // 날씨 아이콘 표출 + const weathericon = () => { + if (controlDetail) { + let wheatherDetail = controlDetail.items.item; + let skyDetail = wheatherDetail[6].fcstValue; + if (skyDetail == 1 || skyDetail == 2 || skyDetail == 4) { + return ; + } else if (skyDetail == 4) { + return ; + } else if (skyDetail == 0 || wheatherDetail[5].fcstValue == 1) { + return ; + } else return ; + } + }; + + // 상세정보에 내역이 없으면 -로 표출 + const nullMessage = val => { + if (val) { + return val; + } else { + return '-'; + } + }; + + return ( +
+
+
+
+
+

드론 상세정보

+ +
+ +
+ +
+ +
+
+ + {controlDetail?.arcrftModelNm + ? controlDetail?.arcrftModelNm + : controlGpDetail?.objectId} +
+
+ {controlGpDetail?.objectId.includes('UAM') ? ( + + ) : ( + + )} +
+
+
+
+
제작번호
+
+ {nullMessage(controlDetail?.prdctNum)} +
+
+
+
식별번호
+
+ {controlGpDetail?.objectId} +
+
+
+
중량
+
+ {GET_WGHT_TYPE_CD(controlDetail?.wghtTypeCd)} +
+
+
+
종류
+
+ {GET_ARCTFT_TYPE_CD(controlDetail?.arcrftTypeCd)} +
+
+
+
+
+
+
+
+

비행정보

+
+
+
+
+
+
시작위치
+
인천 서구
+
+
+
시작시간
+
2021-09-01 10:00:00
+
+
+
속도
+
100 m/s
+
+
+
고도
+
150m
+
+
+
좌표(위도/경도)
+
36.350411 / 127.384548
+
+
+
헤딩 방위각
+
+ {nullMessage(controlGpDetail?.heading)} +
+
+
+
위치정보 수신 시간
+
+ {controlGpDetail?.serverRcvDt + ? moment( + controlGpDetail?.serverRcvDt, + 'YYYYMMDDHHmmss' + ).format('MM-DD HH:mm:ss') + : '-'} +
+
+
+
+
+
+
+
+

운영자 정보

+
+
+
+
+
+
담당자 이름
+
홍길동
+
+
+
담당자 연락처
+
010-4444-4444
+
+
+
+
+
+
+
+

날씨 정보

+
+
+
+
+
+ 현재위치의 날씨 정보입니다. + + + {controlDetail?.stAreaNm} + +
+ + + + + + + + + + + + + + + + + + + +
시각날씨기온풍향풍속
+ {controlDetail?.items.item[0].baseTime.substring( + 0, + 2 + )} + 시 + {weathericon()}{controlDetail?.items.item[12].fcstValue}℃ + + {controlDetail?.items.item[4].fcstValue} m/s
+
+
+
+
+ +
+
+
+ ); +}; From 540e44edde449d08721aa7f80acb60ee26d39b51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=83=81=ED=98=84?= Date: Wed, 20 Mar 2024 17:21:47 +0900 Subject: [PATCH 2/2] =?UTF-8?q?left=20menu=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/vertiport/VertiportView.js | 29 +++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/src/views/vertiport/VertiportView.js b/src/views/vertiport/VertiportView.js index e37c59c..09295e0 100644 --- a/src/views/vertiport/VertiportView.js +++ b/src/views/vertiport/VertiportView.js @@ -8,13 +8,40 @@ import { CustomMainLayout } from '../../components/layout/CustomMainLayout'; import { createPortal } from 'react-dom'; import { VertiportRightMenu } from '../../components/vertiport/VertiportRightMenu'; +import { VertiportLeftMenu } from '../../components/vertiport/VertiportLeftMenu'; +import { Button } from 'reactstrap'; export default function VertiportView() { // 오른쪽 사이드 메뉴 표출 여부 const [openSetting, setOpenSetting] = useState(true); + + const [oepnReportList, setOpenReportList] = useState(false); + const titleName = '지상관제(버티포트) 현황'; return ( <> - test + + test + + + {oepnReportList && ( + <> + {createPortal( + , + + document.getElementById('app-content') + )} + + )} + {createPortal(