pav
/
pav-fe-kac-pal
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

.

master
김지은 6 months ago
parent
c0d3f22ae8
commit
1504a1f98d
4 changed files with 213 additions and 116 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 27
      src/assets/css/custom.css
  2. 97
      src/components/vertiport/VertiportLeftMenu.js
  3. 178
      src/components/vertiport/VertiportRightMenu.js
  4. 1
      src/views/vertiport/VertiportView.js

27
src/assets/css/custom.css
Unescape View File

@ -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;}

97
src/components/vertiport/VertiportLeftMenu.js
Unescape View File

@ -58,7 +58,7 @@ export const VertiportLeftMenu = ({ setOpenReportList }) => {
<div className='uam-layer'>
<div className='layer-content'>
<div className='layer-ti'>
<h4>드론 상세정보</h4>
<h4>UAM 비행 현황 정보</h4>
<button
className='btn-icon'
color='primary'
@ -68,13 +68,6 @@ export const VertiportLeftMenu = ({ setOpenReportList }) => {
</button>
</div>
<div className='layer-content-box'>
<div className='drone-ti'>
<img src={drone_yellow} width='40' />
{controlDetail?.arcrftModelNm
? controlDetail?.arcrftModelNm
: controlGpDetail?.objectId}
</div>
<div className='drone-img'>
{controlGpDetail?.objectId.includes('UAM') ? (
<img src={uam_img} />
@ -82,31 +75,25 @@ export const VertiportLeftMenu = ({ setOpenReportList }) => {
<img src={drone_img} />
)}
</div>
</div>
<div className='layer-content'>
<div className='layer-ti'>
<h4>UAM 비행 상세 정보</h4>
</div>
<div className='layer-content-box'>
<div className='layer-content-info'>
<dl>
<dt>
<div className='list-left-txt'>제작번호</div>
<div className='list-right-txt'>
{nullMessage(controlDetail?.prdctNum)}
</div>
<div className='list-left-txt'>비행경로</div>
<div className='list-right-txt'>잠실 → 김포</div>
</dt>
<dt>
<div className='list-left-txt'>식별번호</div>
<div className='list-right-txt'>
{controlGpDetail?.objectId}
</div>
<div className='list-left-txt'>출발시간</div>
<div className='list-right-txt'>13:00</div>
</dt>
<dt>
<div className='list-left-txt'>중량</div>
<div className='list-right-txt'>
{GET_WGHT_TYPE_CD(controlDetail?.wghtTypeCd)}
</div>
</dt>
<dt>
<div className='list-left-txt'>종류</div>
<div className='list-right-txt'>
{GET_ARCTFT_TYPE_CD(controlDetail?.arcrftTypeCd)}
</div>
<div className='list-left-txt'>도착시간</div>
<div className='list-right-txt'>13:30</div>
</dt>
</dl>
</div>
@ -114,66 +101,30 @@ export const VertiportLeftMenu = ({ setOpenReportList }) => {
</div>
<div className='layer-content'>
<div className='layer-ti'>
<h4>비행정보</h4>
<h4>UAM 기체 상세 정보</h4>
</div>
<div className='layer-content-box'>
<div className='layer-content-info'>
<dl>
<dt>
<div className='list-left-txt'>시작위치</div>
<div className='list-right-txt'>인천 서구</div>
</dt>
<dt>
<div className='list-left-txt'>시작시간</div>
<div className='list-right-txt'>2021-09-01 10:00:00</div>
</dt>
<dt>
<div className='list-left-txt'>속도</div>
<div className='list-right-txt'>100 m/s</div>
<div className='list-left-txt'>편명</div>
<div className='list-right-txt'>PAL002</div>
</dt>
<dt>
<div className='list-left-txt'>고도</div>
<div className='list-right-txt'>150m</div>
<div className='list-left-txt'>FATO</div>
<div className='list-right-txt'>F2</div>
</dt>
<dt>
<div className='list-left-txt'>좌표(위도/경도)</div>
<div className='list-right-txt'>36.350411 / 127.384548</div>
<div className='list-left-txt'>GATE</div>
<div className='list-right-txt'>G4</div>
</dt>
<dt>
<div className='list-left-txt'>헤딩 방위각</div>
<div className='list-right-txt'>
{nullMessage(controlGpDetail?.heading)}
</div>
</dt>
<dt>
<div className='list-left-txt'>위치정보 수신 시간</div>
<div className='list-right-txt'>
{controlGpDetail?.serverRcvDt
? moment(
controlGpDetail?.serverRcvDt,
'YYYYMMDDHHmmss'
).format('MM-DD HH:mm:ss')
: '-'}
</div>
</dt>
</dl>
</div>
</div>
</div>
<div className='layer-content'>
<div className='layer-ti'>
<h4>운영자 정보</h4>
</div>
<div className='layer-content-box'>
<div className='layer-content-info'>
<dl>
<dt>
<div className='list-left-txt'>담당자 이름</div>
<div className='list-right-txt'>홍길동</div>
<div className='list-left-txt'>탑승객</div>
<div className='list-right-txt'>2명</div>
</dt>
<dt>
<div className='list-left-txt'>담당자 연락처</div>
<div className='list-right-txt'>010-4444-4444</div>
<div className='list-left-txt'>화물</div>
<div className='list-right-txt'>150kg</div>
</dt>
</dl>
</div>

178
src/components/vertiport/VertiportRightMenu.js
Unescape View File

@ -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 }) => {
>
<PiAirTrafficControlBold size={22} />
</button>
<div className='right-layer active'>
<div className='vertiport-tab'>
<Nav fill pills>
<NavItem>
<NavLink
<div className='right-layer active bg-line'>
<div className='tab-btn'>
<ButtonGroup>
<Button
active={active === '1'}
onClick={() => {
toggle('1')
}}
outline
color='primary'
>
스케줄 현황
</NavLink>
</NavItem>
<NavItem>
<NavLink
</Button>
<Button
active={active === '2'}
onClick={() => {
toggle('2')
}}
outline
color='primary'
>
기상
</NavLink>
</NavItem>
<NavItem>
<NavLink
</Button>
<Button
active={active === '3'}
onClick={() => {
toggle('3')
}}
outline
color='primary'
>
NOTAM
</NavLink>
</NavItem>
</Nav>
</Button>
</ButtonGroup>
</div>
<div className='vertiport-tab'>
<TabContent className='py-50' activeTab={active}>
<TabPane tabId='1'>
<p>
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.
</p>
<p>
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.
</p>
<div className='vertiport-table'>
<h5>출발 스케쥴 목록</h5>
<table className='table-st'>
<thead>
<tr>
<th>편명</th>
<th>출발시간</th>
<th>목적지</th>
<th>게이트</th>
<th>버티포트</th>
</tr>
</thead>
<tbody>
<tr>
<td>PAL001</td>
<td>09:00</td>
<td>잠실</td>
<td>G1</td>
<td>F1</td>
</tr>
<tr>
<td>PAL002</td>
<td>09:10</td>
<td>코엑스</td>
<td>G2</td>
<td>F2</td>
</tr>
<tr>
<td>PAL003</td>
<td>09:20</td>
<td>아라뱃길</td>
<td>G3</td>
<td>F1</td>
</tr>
<tr>
<td>PAL004</td>
<td>09:30</td>
<td>잠실</td>
<td>G4</td>
<td>F2</td>
</tr>
</tbody>
</table>
</div>
<div className='vertiport-table'>
<h5>도착 스케쥴 목록</h5>
<table className='table-st'>
<thead>
<tr>
<th>편명</th>
<th>도착시간</th>
<th>출발지</th>
<th>게이트</th>
<th>버티포트</th>
</tr>
</thead>
<tbody>
<tr>
<td>PAL005</td>
<td>09:05</td>
<td>코엑스</td>
<td>G5</td>
<td>F1</td>
</tr>
<tr>
<td>PAL006</td>
<td>09:15</td>
<td>아라뱃길</td>
<td>G12</td>
<td>F2</td>
</tr>
<tr>
<td>PAL007</td>
<td>09:20</td>
<td>잠실</td>
<td>G9</td>
<td>F1</td>
</tr>
<tr>
<td>PAL008</td>
<td>09:35</td>
<td>코엑스</td>
<td>G8</td>
<td>F2</td>
</tr>
</tbody>
</table>
</div>
<div className='vertiport-table'>
<h5>착륙 대기 목록</h5>
<table className='table-st'>
<thead>
<tr>
<th>순번</th>
<th>편명</th>
<th>도착시간</th>
<th>대기시간</th>
<th>배터리 잔량</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>PAL011</td>
<td>09:20</td>
<td>5분</td>
<td>40%</td>
</tr>
<tr>
<td>2</td>
<td>PAL012</td>
<td>09:40</td>
<td>5분</td>
<td>50%</td>
</tr>
<tr>
<td>3</td>
<td>PAL013</td>
<td>09:50</td>
<td>5분</td>
<td>50%</td>
</tr>
<tr>
<td>4</td>
<td>PAL014</td>
<td>09:55</td>
<td>5분</td>
<td>40%</td>
</tr>
</tbody>
</table>
</div>
</TabPane>
<TabPane tabId='2'>
<p>

1
src/views/vertiport/VertiportView.js
Unescape View File

@ -69,6 +69,7 @@ export default function VertiportView() {
<div><span className='map-line'></span></div>
<div><span className='map-line'></span></div>
<div><span className='map-line'></span></div>
</div>
</div>
</CustomMainLayout>

Write Preview
Loading…
Cancel
Save