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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 27
      src/assets/css/custom.css
  2. 99
      src/components/vertiport/VertiportLeftMenu.js
  3. 202
      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;} .right-menu{position: absolute;right:0;top:0;height: 100vh;}
.dark-layout .left-layer{background:#10163A;} .dark-layout .left-layer{background:#10163A;}
.dark-layout .right-layer{background:#10163A;} .dark-layout .right-layer{background:#10163A;}
.dark-layout .right-layer-btn{background:#7367f0}
html .content{min-height:100%;} html .content{min-height:100%;}
/*버튼 기본css*/ /*버튼 기본css*/
@ -161,11 +162,12 @@ html .content{min-height:100%;}
.layer-content-list dl dt .list-right-txt{text-align: right;} .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;} .layer-content-box{background:#fff;border-radius: 5px; border: 1px solid #ddd;}
.dark-layout .layer-content-box{background:#283046;border: 1px solid #404656;} .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{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-ti img{margin-right:6px;}
.layer-content-box .drone-img img{width:100%;} .layer-content-box .drone-img img{width:100%;}
.drone-img img{width:100%;}
.layer-content-box .layer-content-info{padding:10px;} .layer-content-box .layer-content-info{padding:10px;}
.layer-content-box dl dt{display:flex;} .layer-content-box dl dt{display:flex;}
.layer-content-box dl dt + dt{margin-top:14px;} .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{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%);} .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} .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*/
.dark-layout .main-menu .navbar-header .navbar-brand .brand-text{color:#fff} .dark-layout .main-menu .navbar-header .navbar-brand .brand-text{color:#fff}
.dark-layout .color-wh .text-primary{color:#fff!important} .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; } box-shadow: -5px 0 0 #283046, 5px 0 0 #283046!important; }
.dark-layout .data-list{background:#7367f0;border-color:#7367f0} .dark-layout .data-list{background:#7367f0;border-color:#7367f0}
.dark-layout .fsm-ti{border-color:#404656} .dark-layout .fsm-ti{border-color:#404656}
.dark-layout .uam-layer{background:#161d31}
.dark-layout .bg-line{border-left:1px solid #404656;}

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

@ -58,7 +58,7 @@ export const VertiportLeftMenu = ({ setOpenReportList }) => {
<div className='uam-layer'> <div className='uam-layer'>
<div className='layer-content'> <div className='layer-content'>
<div className='layer-ti'> <div className='layer-ti'>
<h4>드론 상세정보</h4> <h4>UAM 비행 현황 정보</h4>
<button <button
className='btn-icon' className='btn-icon'
color='primary' color='primary'
@ -68,45 +68,32 @@ export const VertiportLeftMenu = ({ setOpenReportList }) => {
</button> </button>
</div> </div>
<div className='layer-content-box'> <div className='drone-img'>
<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') ? ( {controlGpDetail?.objectId.includes('UAM') ? (
<img src={uam_img} /> <img src={uam_img} />
) : ( ) : (
<img src={drone_img} /> <img src={drone_img} />
)} )}
</div> </div>
</div>
<div className='layer-content'>
<div className='layer-ti'>
<h4>UAM 비행 상세 정보</h4>
</div>
<div className='layer-content-box'>
<div className='layer-content-info'> <div className='layer-content-info'>
<dl> <dl>
<dt> <dt>
<div className='list-left-txt'>제작번호</div> <div className='list-left-txt'>비행경로</div>
<div className='list-right-txt'> <div className='list-right-txt'>잠실 → 김포</div>
{nullMessage(controlDetail?.prdctNum)}
</div>
</dt> </dt>
<dt> <dt>
<div className='list-left-txt'>식별번호</div> <div className='list-left-txt'>출발시간</div>
<div className='list-right-txt'> <div className='list-right-txt'>13:00</div>
{controlGpDetail?.objectId}
</div>
</dt> </dt>
<dt> <dt>
<div className='list-left-txt'>중량</div> <div className='list-left-txt'>도착시간</div>
<div className='list-right-txt'> <div className='list-right-txt'>13:30</div>
{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>
</dt> </dt>
</dl> </dl>
</div> </div>
@ -114,66 +101,30 @@ export const VertiportLeftMenu = ({ setOpenReportList }) => {
</div> </div>
<div className='layer-content'> <div className='layer-content'>
<div className='layer-ti'> <div className='layer-ti'>
<h4>비행정보</h4> <h4>UAM 기체 상세 정보</h4>
</div> </div>
<div className='layer-content-box'> <div className='layer-content-box'>
<div className='layer-content-info'> <div className='layer-content-info'>
<dl> <dl>
<dt> <dt>
<div className='list-left-txt'>시작위치</div> <div className='list-left-txt'>편명</div>
<div className='list-right-txt'>인천 서구</div> <div className='list-right-txt'>PAL002</div>
</dt>
<dt>
<div className='list-left-txt'>시작시간</div>
<div className='list-right-txt'>2021-09-01 10:00:00</div>
</dt> </dt>
<dt> <dt>
<div className='list-left-txt'>속도</div> <div className='list-left-txt'>FATO</div>
<div className='list-right-txt'>100 m/s</div> <div className='list-right-txt'>F2</div>
</dt> </dt>
<dt> <dt>
<div className='list-left-txt'>고도</div> <div className='list-left-txt'>GATE</div>
<div className='list-right-txt'>150m</div> <div className='list-right-txt'>G4</div>
</dt> </dt>
<dt> <dt>
<div className='list-left-txt'>좌표(위도/경도)</div> <div className='list-left-txt'>탑승객</div>
<div className='list-right-txt'>36.350411 / 127.384548</div> <div className='list-right-txt'>2명</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>
</dt> </dt>
<dt> <dt>
<div className='list-left-txt'>담당자 연락처</div> <div className='list-left-txt'>화물</div>
<div className='list-right-txt'>010-4444-4444</div> <div className='list-right-txt'>150kg</div>
</dt> </dt>
</dl> </dl>
</div> </div>

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

@ -1,7 +1,7 @@
import { Map } from 'react-feather'; import { Map } from 'react-feather';
import { PiAirTrafficControlBold } from "react-icons/pi"; import { PiAirTrafficControlBold } from "react-icons/pi";
import { useState } from 'react'; 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 }) => { export const VertiportRightMenu = ({ setOpenSetting, openSetting }) => {
const [active, setActive] = useState('1') const [active, setActive] = useState('1')
@ -21,52 +21,176 @@ export const VertiportRightMenu = ({ setOpenSetting, openSetting }) => {
> >
<PiAirTrafficControlBold size={22} /> <PiAirTrafficControlBold size={22} />
</button> </button>
<div className='right-layer active'> <div className='right-layer active bg-line'>
<div className='vertiport-tab'> <div className='tab-btn'>
<Nav fill pills> <ButtonGroup>
<NavItem> <Button
<NavLink active={active === '1'}
active={active === '1'} onClick={() => {
onClick={() => { toggle('1')
toggle('1') }}
}} outline
color='primary'
> >
스케줄 현황 스케줄 현황
</NavLink> </Button>
</NavItem> <Button
<NavItem> active={active === '2'}
<NavLink onClick={() => {
active={active === '2'} toggle('2')
onClick={() => { }}
toggle('2') outline
}} color='primary'
> >
기상 기상
</NavLink> </Button>
</NavItem> <Button
<NavItem> active={active === '3'}
<NavLink onClick={() => {
active={active === '3'} toggle('3')
onClick={() => { }}
toggle('3') outline
}} color='primary'
> >
NOTAM NOTAM
</NavLink> </Button>
</NavItem> </ButtonGroup>
</Nav> </div>
<div className='vertiport-tab'>
<TabContent className='py-50' activeTab={active}> <TabContent className='py-50' activeTab={active}>
<TabPane tabId='1'> <TabPane tabId='1'>
<p> <div className='vertiport-table'>
Chocolate cake sweet roll lemon drops marzipan chocolate cake cupcake cotton candy. Dragée ice cream dragée <h5>출발 스케쥴 목록</h5>
biscuit chupa chups bear claw cupcake brownie cotton candy. Sesame snaps topping cupcake cake. Macaroon <table className='table-st'>
lemon drops gummies danish marzipan donut. <thead>
</p> <tr>
<p> <th>편명</th>
Chocolate bar soufflé tiramisu tiramisu jelly-o carrot cake gummi bears cake. Candy canes wafer croissant <th>출발시간</th>
donut bonbon dragée bear claw jelly sugar plum. Sweet lemon drops caramels croissant cheesecake jujubes <th>목적지</th>
carrot cake fruitcake. Halvah biscuit lemon drops fruitcake tart. <th>게이트</th>
</p> <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>
<TabPane tabId='2'> <TabPane tabId='2'>
<p> <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><span className='map-line'></span></div>
<div><span className='map-line'></span></div> <div><span className='map-line'></span></div>
</div> </div>
</div> </div>
</CustomMainLayout> </CustomMainLayout>

Write Preview
Loading…
Cancel
Save