From 1504a1f98d50f4b33d7268ddec40a5eeb8b1da70 Mon Sep 17 00:00:00 2001 From: geun <1416geun@naver.com> Date: Fri, 29 Mar 2024 10:55:01 +0900 Subject: [PATCH] . --- src/assets/css/custom.css | 27 ++- src/components/vertiport/VertiportLeftMenu.js | 99 +++------ .../vertiport/VertiportRightMenu.js | 202 ++++++++++++++---- src/views/vertiport/VertiportView.js | 1 + 4 files changed, 213 insertions(+), 116 deletions(-) diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index 3f8bf5d..ac64663 100644 --- a/src/assets/css/custom.css +++ b/src/assets/css/custom.css @@ -86,6 +86,7 @@ button{border:0;background:transparent;} .right-menu{position: absolute;right:0;top:0;height: 100vh;} .dark-layout .left-layer{background:#10163A;} .dark-layout .right-layer{background:#10163A;} +.dark-layout .right-layer-btn{background:#7367f0} html .content{min-height:100%;} /*버튼 기본css*/ @@ -161,11 +162,12 @@ html .content{min-height:100%;} .layer-content-list dl dt .list-right-txt{text-align: right;} /*레이어 상세정보-드론상세정보*/ -.layer-content-box{background:#fff;border-radius: 5px;color:#bbb; border: 1px solid #ddd;} -.dark-layout .layer-content-box{background:#283046;border: 1px solid #404656;} +.layer-content-box{background:#fff;border-radius: 5px; border: 1px solid #ddd;} +.dark-layout .layer-content-box{background:#283046;border: 1px solid #404656;color:#bbb; } .layer-content-box .drone-ti{display:flex;align-items: center;font-weight:500; color: #f8c023;padding:10px;} .layer-content-box .drone-ti img{margin-right:6px;} .layer-content-box .drone-img img{width:100%;} +.drone-img img{width:100%;} .layer-content-box .layer-content-info{padding:10px;} .layer-content-box dl dt{display:flex;} .layer-content-box dl dt + dt{margin-top:14px;} @@ -1196,7 +1198,24 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;} .map-line{display:block;width:200px;height:200px;border-radius:12px;background:#fff;border:1px solid #ccc} .map-line::after{content:'';display:block;width:82px;height:1px;background:#ccc;;position: absolute;top:50%;right:-40px;transform: translateY(-50%);} .gate-map .gate-box:last-child .map-line::after{display:none} - +.table-st{width:100%} +.table-st thead tr th{font-weight:500;text-align:center;border:1px solid #ddd;padding:10px 6px;background:#f4f4f4} +.table-st tbody tr td{border:1px solid #ddd;padding:6px} +.vertiport-table *{font-size:0.825rem} +.vertiport-table .table-st tbody tr td{text-align:center;} +.tab-btn .btn-group{display:flex;width:100%} +.tab-btn button{flex:1;} +.tab-btn button{background:#fff;color:#333} +.tab-btn .btn.active{background:#8a1c05!important;color:#fff!important} +.vertiport-table h5{font-size:0.875rem;font-weight:500;margin-bottom:0.5rem} +.vertiport-table{margin-top:1rem} +.bg-line{border-left:1px solid #ddd;} + +.dark-layout .tab-btn .btn.active{background:#7367f0!important} +.dark-layout .tab-btn .btn{color:#d0d2d6!important;} + +.dark-layout .table-st thead tr th{border:1px solid #3b4253;background:#283046;color:#b4b7bd} +.dark-layout .table-st tbody tr td{border:1px solid #3b4253;color:#b4b7bd} /*dark-layout*/ .dark-layout .main-menu .navbar-header .navbar-brand .brand-text{color:#fff} .dark-layout .color-wh .text-primary{color:#fff!important} @@ -1244,3 +1263,5 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;} box-shadow: -5px 0 0 #283046, 5px 0 0 #283046!important; } .dark-layout .data-list{background:#7367f0;border-color:#7367f0} .dark-layout .fsm-ti{border-color:#404656} +.dark-layout .uam-layer{background:#161d31} +.dark-layout .bg-line{border-left:1px solid #404656;} \ No newline at end of file diff --git a/src/components/vertiport/VertiportLeftMenu.js b/src/components/vertiport/VertiportLeftMenu.js index 1045df1..ba6c46a 100644 --- a/src/components/vertiport/VertiportLeftMenu.js +++ b/src/components/vertiport/VertiportLeftMenu.js @@ -58,7 +58,7 @@ export const VertiportLeftMenu = ({ setOpenReportList }) => {
-

드론 상세정보

+

UAM 비행 현황 정보

-
-
- - {controlDetail?.arcrftModelNm - ? controlDetail?.arcrftModelNm - : controlGpDetail?.objectId} -
-
+
{controlGpDetail?.objectId.includes('UAM') ? ( ) : ( )}
+
+
+
+

UAM 비행 상세 정보

+
+
-
제작번호
-
- {nullMessage(controlDetail?.prdctNum)} -
+
비행경로
+
잠실 → 김포
-
식별번호
-
- {controlGpDetail?.objectId} -
+
출발시간
+
13:00
-
중량
-
- {GET_WGHT_TYPE_CD(controlDetail?.wghtTypeCd)} -
-
-
-
종류
-
- {GET_ARCTFT_TYPE_CD(controlDetail?.arcrftTypeCd)} -
+
도착시간
+
13:30
@@ -114,66 +101,30 @@ export const VertiportLeftMenu = ({ setOpenReportList }) => {
-

비행정보

+

UAM 기체 상세 정보

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

운영자 정보

-
-
-
-
-
-
담당자 이름
-
홍길동
+
탑승객
+
2명
-
담당자 연락처
-
010-4444-4444
+
화물
+
150kg
diff --git a/src/components/vertiport/VertiportRightMenu.js b/src/components/vertiport/VertiportRightMenu.js index a865316..a8ef808 100644 --- a/src/components/vertiport/VertiportRightMenu.js +++ b/src/components/vertiport/VertiportRightMenu.js @@ -1,7 +1,7 @@ import { Map } from 'react-feather'; import { PiAirTrafficControlBold } from "react-icons/pi"; import { useState } from 'react'; -import { TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap' +import { TabContent, TabPane, Nav, NavItem, NavLink, ButtonGroup, Button } from 'reactstrap' export const VertiportRightMenu = ({ setOpenSetting, openSetting }) => { const [active, setActive] = useState('1') @@ -21,52 +21,176 @@ export const VertiportRightMenu = ({ setOpenSetting, openSetting }) => { > -
-
- + + +
+
-

- Chocolate cake sweet roll lemon drops marzipan chocolate cake cupcake cotton candy. Dragée ice cream dragée - biscuit chupa chups bear claw cupcake brownie cotton candy. Sesame snaps topping cupcake cake. Macaroon - lemon drops gummies danish marzipan donut. -

-

- Chocolate bar soufflé tiramisu tiramisu jelly-o carrot cake gummi bears cake. Candy canes wafer croissant - donut bonbon dragée bear claw jelly sugar plum. Sweet lemon drops caramels croissant cheesecake jujubes - carrot cake fruitcake. Halvah biscuit lemon drops fruitcake tart. -

+
+
출발 스케쥴 목록
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
편명출발시간목적지게이트버티포트
PAL00109:00잠실G1F1
PAL00209:10코엑스G2F2
PAL00309:20아라뱃길G3F1
PAL00409:30잠실G4F2
+
+
+
도착 스케쥴 목록
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
편명도착시간출발지게이트버티포트
PAL00509:05코엑스G5F1
PAL00609:15아라뱃길G12F2
PAL00709:20잠실G9F1
PAL00809:35코엑스G8F2
+
+
+
착륙 대기 목록
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
순번편명도착시간대기시간배터리 잔량
1PAL01109:205분40%
2PAL01209:405분50%
3PAL01309:505분50%
4PAL01409:555분40%
+

diff --git a/src/views/vertiport/VertiportView.js b/src/views/vertiport/VertiportView.js index 261b95e..7d5cf39 100644 --- a/src/views/vertiport/VertiportView.js +++ b/src/views/vertiport/VertiportView.js @@ -69,6 +69,7 @@ export default function VertiportView() {

+