박상현
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