김장현
1 year ago
2 changed files with 124 additions and 117 deletions
@ -0,0 +1,111 @@ |
|||||||
|
import { useDispatch, useSelector } from 'react-redux'; |
||||||
|
import { Sun, Navigation2, Cloud, CloudRain, CloudSnow } from 'react-feather'; |
||||||
|
import { Card } from 'reactstrap'; |
||||||
|
|
||||||
|
function ControlTopPackage({ dronCnt, uamCnt, flightCnt = 0, handlerLaanc }) { |
||||||
|
const { controlDetail, controlWheather } = useSelector( |
||||||
|
state => state.controlGpDtlState |
||||||
|
); |
||||||
|
const { isClickObject } = useSelector(state => state.controlMapReducer); |
||||||
|
|
||||||
|
const weatherIcon = () => { |
||||||
|
if (controlWheather) { |
||||||
|
let wheatherDetail = controlWheather.items.item; |
||||||
|
let skyDetail = wheatherDetail[6].fcstValue; |
||||||
|
if (skyDetail == 1 || skyDetail == 2 || skyDetail == 4) { |
||||||
|
return <CloudRain size={20} />; |
||||||
|
} else if (skyDetail == 3) { |
||||||
|
return <CloudSnow size={20} />; |
||||||
|
} else if (wheatherDetail[5].fcstValue == 1) { |
||||||
|
return <Sun size={20} />; |
||||||
|
} else return <Cloud size={20} />; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div className='main-data-box wather-data'> |
||||||
|
<Card> |
||||||
|
<div className='data-box-header'> |
||||||
|
<span className='box-ti'> |
||||||
|
{!isClickObject |
||||||
|
? '김포공항' |
||||||
|
: !controlDetail?.stAreaNm |
||||||
|
? `${controlDetail?.res.area1} ${controlDetail?.res.area2} ${controlDetail?.res.area3} ${controlDetail?.res.landNm} ${controlDetail?.res.landNum} ` |
||||||
|
: controlDetail?.stAreaNm} |
||||||
|
</span> |
||||||
|
<span className=''> {weatherIcon()}</span> |
||||||
|
</div> |
||||||
|
<div className='data-list-box'> |
||||||
|
<div className='data-list'> |
||||||
|
<span>기온</span> |
||||||
|
<span> |
||||||
|
{!isClickObject |
||||||
|
? controlWheather?.items.item[12].fcstValue |
||||||
|
: controlDetail?.items.item[12].fcstValue} |
||||||
|
℃ |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div className='data-list'> |
||||||
|
<span>풍향</span> |
||||||
|
<span> |
||||||
|
<Navigation2 |
||||||
|
className='navigation-icon' |
||||||
|
style={{ |
||||||
|
transform: !isClickObject |
||||||
|
? `rotate(${controlWheather?.items.item[3].fcstValue}deg)` |
||||||
|
: `rotate(${controlDetail?.items.item[3].fcstValue}deg)` |
||||||
|
}} |
||||||
|
/> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div className='data-list'> |
||||||
|
<span>풍속</span> |
||||||
|
<span> |
||||||
|
{!isClickObject |
||||||
|
? controlWheather?.items.item[4].fcstValue |
||||||
|
: controlDetail?.items.item[4].fcstValue}{' '} |
||||||
|
m/s |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Card> |
||||||
|
</div> |
||||||
|
<div className='main-data-box flight-data'> |
||||||
|
<Card> |
||||||
|
<div className='data-box-header'> |
||||||
|
<span className='box-ti'>비행중인 기체</span> |
||||||
|
</div> |
||||||
|
<div className='data-list-box'> |
||||||
|
<div className='data-list'> |
||||||
|
<span>드론</span> |
||||||
|
<span>{dronCnt}</span> |
||||||
|
</div> |
||||||
|
<div className='data-list'> |
||||||
|
<span>UAM</span> |
||||||
|
<span>{uamCnt}</span> |
||||||
|
</div> |
||||||
|
<div className='data-list'> |
||||||
|
<span>항공기</span> |
||||||
|
<span>{flightCnt}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Card> |
||||||
|
</div> |
||||||
|
<div className='main-data-box flight-data'> |
||||||
|
<Card> |
||||||
|
<div className='data-box-header'> |
||||||
|
<span className='box-ti'>LAANC 시스템</span> |
||||||
|
</div> |
||||||
|
<div className='data-list-box'> |
||||||
|
<div className='data-list' style={{ cursor: 'pointer' }}> |
||||||
|
<span onClick={handlerLaanc}>승인요청 바로가기</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Card> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default ControlTopPackage; |
Loading…
Reference in new issue