박상현
6 months ago
1 changed files with 264 additions and 0 deletions
@ -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> |
||||
); |
||||
}; |
Loading…
Reference in new issue