|
|
|
@ -3,13 +3,14 @@ import React, { useEffect, useState } from 'react';
|
|
|
|
|
import '../../../assets/css/custom.css'; |
|
|
|
|
import logo from '../../../assets/images/pal_logo.png'; |
|
|
|
|
|
|
|
|
|
import { Sun, Map, Bell } from 'react-feather'; |
|
|
|
|
import { Sun, Map, Bell, Navigation2 } from 'react-feather'; |
|
|
|
|
|
|
|
|
|
import { AiOutlinePoweroff, AiOutlineExclamation } from 'react-icons/ai'; |
|
|
|
|
import { IoAlertOutline } from 'react-icons/io5'; |
|
|
|
|
|
|
|
|
|
import { ReactComponent as DroneMenuIcon } from '../../../assets/images/drone_menu_icon.svg'; |
|
|
|
|
|
|
|
|
|
import { |
|
|
|
|
Card |
|
|
|
|
} from 'reactstrap'; |
|
|
|
|
import ControlAlarmNotice from '../alarm/ControlAlarmNotice'; |
|
|
|
|
import ControlReportList from '../report/ControlReportList'; |
|
|
|
|
import ControlReportDetail from '../report/ControlReportDetail'; |
|
|
|
@ -18,7 +19,7 @@ import ControlAlarmList from '../alarm/ControlAlarmList';
|
|
|
|
|
import ControlSetting from '../setting/ControlSetting'; |
|
|
|
|
import WebsocketClient from '../../../components/websocket/WebsocketClient'; |
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
|
|
|
|
|
|
import { controlweatherAction } from '../../../modules/control/gp/actions/controlGpAction' |
|
|
|
|
import * as Actions from '../../../modules/account/login/actions/authAction'; |
|
|
|
|
import { objectUnClickAction } from '../../../modules/control/map/actions/controlMapActions'; |
|
|
|
|
|
|
|
|
@ -26,10 +27,12 @@ const ControlMain = () => {
|
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
|
|
|
|
|
const { isClickObject } = useSelector(state => state.controlMapReducer); |
|
|
|
|
const { controlGpList } = useSelector(state => state.controlGpState); |
|
|
|
|
|
|
|
|
|
const { controlGpList, controlGroupAuthInfo } = useSelector(state => state.controlGpState); |
|
|
|
|
const { controlDetail, controlWheather } = useSelector( |
|
|
|
|
state => state.controlGpDtlState |
|
|
|
|
); |
|
|
|
|
const [alarm, setAlarm] = useState(false); |
|
|
|
|
|
|
|
|
|
const { user } = useSelector(state => state.authState); |
|
|
|
|
const [oepnReportList, setOpenReportList] = useState(false); |
|
|
|
|
// const [openReportDetail, setOpenReportDetail] = useState(false);
|
|
|
|
|
// const [openWeatherList, setOpenWeatherList] = useState(false);
|
|
|
|
@ -92,7 +95,27 @@ const ControlMain = () => {
|
|
|
|
|
setOpenReportList(true); |
|
|
|
|
dispatch(objectUnClickAction()); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
//날씨 API
|
|
|
|
|
const rq = { |
|
|
|
|
nx: 37.4562557, |
|
|
|
|
ny: 126.7052062 |
|
|
|
|
} |
|
|
|
|
useEffect(() => { |
|
|
|
|
dispatch(controlweatherAction.request(rq)); |
|
|
|
|
}, []) |
|
|
|
|
function 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 == 4) { |
|
|
|
|
return <CloudSnow size={20} />; |
|
|
|
|
} else if (skyDetail == 0 || wheatherDetail[5].fcstValue == 1) { |
|
|
|
|
return <Sun size={20} />; |
|
|
|
|
} else return <Cloud size={20} />; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
<ControlAlarmNotice /> |
|
|
|
@ -140,7 +163,49 @@ const ControlMain = () => {
|
|
|
|
|
{/* socket_off = 클래스명 변경시 빨간색! 접속이 원할하지않을때 */} |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div className={(!oepnReportList && !openAlarmList && !isClickObject) ? "main-data" : "main-data main-data-test"}> |
|
|
|
|
<div className='main-data-box wather-data'> |
|
|
|
|
<Card> |
|
|
|
|
<div className='data-box-header'> |
|
|
|
|
<span className='box-ti'>{!isClickObject ? "인천광역시" : 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>{controlGpList ? controlGpList.length : 0}</span> |
|
|
|
|
</div> |
|
|
|
|
<div className='data-list'> |
|
|
|
|
<span>항공기</span> |
|
|
|
|
<span>2147대</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</Card> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
{oepnReportList ? ( |
|
|
|
|
<ControlReportList |
|
|
|
|
// openReportDetailParam={openReportDetailParam}
|
|
|
|
|