김장현
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