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

vertiport left 추가

master
박상현 6 months ago
parent
acd703a670
commit
9f4bb33b36
1 changed files with 264 additions and 0 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. 264
      src/components/vertiport/VertiportLeftMenu.js

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

@ -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 <CloudRain />;
} else if (skyDetail == 4) {
return <CloudSnow />;
} else if (skyDetail == 0 || wheatherDetail[5].fcstValue == 1) {
return <Sun />;
} else return <Cloud />;
}
};
// 상세정보에 내역이 없으면 -로 표출
const nullMessage = val => {
if (val) {
return val;
} else {
return '-';
}
};
return (
<div className='right-menu active' style={{ left: 0 }}>
<div className='left-meun'>
<div className='left-layer' style={{ left: 0 }}>
<div className='layer-content'>
<div className='layer-ti'>
<h4>드론 상세정보</h4>
<button
className='btn-icon'
color='primary'
onClick={() => setOpenReportList(false)}
>
<X size={20} />
</button>
</div>
<div className='layer-content-box mb-1'>
<button
type='button'
className='history-btn'
onClick={() => setHistoryModal(!historyModal)}
>
비정상상황 알림내역
</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} />
) : (
<img src={drone_img} />
)}
</div>
<div className='layer-content-info'>
<dl>
<dt>
<div className='list-left-txt'>제작번호</div>
<div className='list-right-txt'>
{nullMessage(controlDetail?.prdctNum)}
</div>
</dt>
<dt>
<div className='list-left-txt'>식별번호</div>
<div className='list-right-txt'>
{controlGpDetail?.objectId}
</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>
</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>
<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>
</dt>
<dt>
<div className='list-left-txt'>고도</div>
<div className='list-right-txt'>150m</div>
</dt>
<dt>
<div className='list-left-txt'>좌표(위도/경도)</div>
<div className='list-right-txt'>36.350411 / 127.384548</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>
<div className='list-left-txt'>담당자 연락처</div>
<div className='list-right-txt'>010-4444-4444</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'>
<div className='layer-weather-table'>
<div className='layer-weather-address'>
현재위치의 날씨 정보입니다.
<span className='mt-0'>
<Compass size={20} />
{controlDetail?.stAreaNm}
</span>
</div>
<Table responsive>
<thead>
<tr>
<th>시각</th>
<th>날씨</th>
<th>기온</th>
<th>풍향</th>
<th>풍속</th>
</tr>
</thead>
<tbody>
<tr>
<td>
{controlDetail?.items.item[0].baseTime.substring(
0,
2
)}
시
</td>
<td>{weathericon()}</td>
<td>{controlDetail?.items.item[12].fcstValue}℃</td>
<td>
<Navigation2
style={{
transform: `rotate(${controlDetail?.items.item[3].fcstValue}deg)`
}}
/>
</td>
<td>{controlDetail?.items.item[4].fcstValue} m/s</td>
</tr>
</tbody>
</Table>
</div>
</div>
</div>
</div>
<ControlAlarmDetail
historyModal={historyModal}
setHistoryModal={setHistoryModal}
controlGpWarnLog={controlGpWarnLog}
/>
</div>
</div>
</div>
);
};
Write Preview
Loading…
Cancel
Save