|
|
@ -11,7 +11,6 @@ import { |
|
|
|
Cloud, |
|
|
|
Cloud, |
|
|
|
CloudRain, |
|
|
|
CloudRain, |
|
|
|
CloudSnow, |
|
|
|
CloudSnow, |
|
|
|
Moon, |
|
|
|
|
|
|
|
Grid |
|
|
|
Grid |
|
|
|
} from 'react-feather'; |
|
|
|
} from 'react-feather'; |
|
|
|
|
|
|
|
|
|
|
@ -19,7 +18,6 @@ import { AiOutlinePoweroff } from 'react-icons/ai'; |
|
|
|
import { IoAlertOutline } from 'react-icons/io5'; |
|
|
|
import { IoAlertOutline } from 'react-icons/io5'; |
|
|
|
import { ReactComponent as DroneMenuIcon } from '../../../assets/images/drone_menu_icon.svg'; |
|
|
|
import { ReactComponent as DroneMenuIcon } from '../../../assets/images/drone_menu_icon.svg'; |
|
|
|
import { Card } from 'reactstrap'; |
|
|
|
import { Card } from 'reactstrap'; |
|
|
|
import ControlAlarmNotice from '../alarm/ControlAlarmNotice'; |
|
|
|
|
|
|
|
import ControlReportList from '../report/ControlReportList'; |
|
|
|
import ControlReportList from '../report/ControlReportList'; |
|
|
|
import ControlReportDetail from '../report/ControlReportDetail'; |
|
|
|
import ControlReportDetail from '../report/ControlReportDetail'; |
|
|
|
import ControlAlarmList from '../alarm/ControlAlarmList'; |
|
|
|
import ControlAlarmList from '../alarm/ControlAlarmList'; |
|
|
@ -28,71 +26,51 @@ import WebsocketClient from '../../../components/websocket/WebsocketClient'; |
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
import { controlweatherAction } from '../../../modules/control/gp/actions/controlGpAction'; |
|
|
|
import { controlweatherAction } from '../../../modules/control/gp/actions/controlGpAction'; |
|
|
|
import * as Actions from '../../../modules/account/login/actions/authAction'; |
|
|
|
import * as Actions from '../../../modules/account/login/actions/authAction'; |
|
|
|
import { |
|
|
|
import { objectUnClickAction } from '../../../modules/control/map/actions/controlMapActions'; |
|
|
|
ctrlDrawTypeChangeAction, |
|
|
|
|
|
|
|
objectUnClickAction |
|
|
|
|
|
|
|
} from '../../../modules/control/map/actions/controlMapActions'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const ControlMain = () => { |
|
|
|
const ControlMain = () => { |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
|
|
|
const history = useHistory(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 비행중인 기체 클릭 여부
|
|
|
|
const { isClickObject } = useSelector(state => state.controlMapReducer); |
|
|
|
const { isClickObject } = useSelector(state => state.controlMapReducer); |
|
|
|
const { controlGpList, controlGroupAuthInfo } = useSelector( |
|
|
|
|
|
|
|
state => state.controlGpState |
|
|
|
// 비행중인 기체 정보
|
|
|
|
); |
|
|
|
const { controlGpList } = useSelector(state => state.controlGpState); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 기체 상세 정보
|
|
|
|
const { controlDetail, controlWheather } = useSelector( |
|
|
|
const { controlDetail, controlWheather } = useSelector( |
|
|
|
state => state.controlGpDtlState |
|
|
|
state => state.controlGpDtlState |
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 드론 기체 갯수 (드론 + uam)
|
|
|
|
const { controlGpCountDrone, controlGpCountFlight } = useSelector( |
|
|
|
const { controlGpCountDrone, controlGpCountFlight } = useSelector( |
|
|
|
state => state.controlGpCountState |
|
|
|
state => state.controlGpCountState |
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
// pav박람회 -> uam, 드론 구별을 위한 임시 코드
|
|
|
|
// 드론, uam 기체 갯수
|
|
|
|
// (이 작업으로 고도화 하려면 추후에 서버에서 uam타입을 새로 더 받아 작업해야 함)
|
|
|
|
|
|
|
|
const [droneCount, setDroneCount] = useState(0); |
|
|
|
const [droneCount, setDroneCount] = useState(0); |
|
|
|
const [uamCount, setUamCount] = useState(0); |
|
|
|
const [uamCount, setUamCount] = useState(0); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 비정상상황 여부
|
|
|
|
const [alarm, setAlarm] = useState(false); |
|
|
|
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);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [openAlarmList, setOpenAlarmList] = useState(false); |
|
|
|
// 오른쪽 사이드 메뉴 표출 여부
|
|
|
|
const [openSetting, setOpenSetting] = useState(true); |
|
|
|
const [openSetting, setOpenSetting] = useState(true); |
|
|
|
const history = useHistory(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const openMenu = val => { |
|
|
|
|
|
|
|
if (val === 'reportList') { |
|
|
|
|
|
|
|
setOpenReportList(true); |
|
|
|
|
|
|
|
// setOpenReportDetail(false);
|
|
|
|
|
|
|
|
// setOpenWeatherList(false);
|
|
|
|
|
|
|
|
setOpenAlarmList(false); |
|
|
|
|
|
|
|
} else if (val === 'weatherList') { |
|
|
|
|
|
|
|
setOpenReportList(false); |
|
|
|
|
|
|
|
// setOpenReportDetail(false);
|
|
|
|
|
|
|
|
// setOpenWeatherList(true);
|
|
|
|
|
|
|
|
setOpenAlarmList(false); |
|
|
|
|
|
|
|
} else if (val === 'alarmList') { |
|
|
|
|
|
|
|
dispatch(objectUnClickAction()); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setOpenReportList(false); |
|
|
|
|
|
|
|
// setOpenReportDetail(false);
|
|
|
|
|
|
|
|
// setOpenWeatherList(false);
|
|
|
|
|
|
|
|
setOpenAlarmList(true); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setAlarm(false); |
|
|
|
// 왼쪽 드론 정보 사이드 메뉴 표출 여부
|
|
|
|
} |
|
|
|
const [oepnReportList, setOpenReportList] = useState(false); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// const openReportDetailParam = val => {
|
|
|
|
// 왼쪽 드론 비정상상황 알림 사이드 메뉴 표출 여부
|
|
|
|
// setOpenReportDetail(true);
|
|
|
|
const [openAlarmList, setOpenAlarmList] = useState(false); |
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handlerLogout = () => { |
|
|
|
// 김포공항 좌표
|
|
|
|
dispatch(Actions.logout.request()); |
|
|
|
const rq = { |
|
|
|
|
|
|
|
nx: 37.558522, |
|
|
|
|
|
|
|
ny: 126.793722 |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 드론 비정상상황일 시 왼쪽 사이드 메뉴 알람 표시 아이콘 변경
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (controlGpList) { |
|
|
|
if (controlGpList) { |
|
|
|
const warnGps = controlGpList.find(gps => { |
|
|
|
const warnGps = controlGpList.find(gps => { |
|
|
@ -105,6 +83,7 @@ const ControlMain = () => { |
|
|
|
} |
|
|
|
} |
|
|
|
}, [controlGpList]); |
|
|
|
}, [controlGpList]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 비행중인 기체 클릭 시 열려있는 사이드 메뉴 닫기
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (isClickObject) { |
|
|
|
if (isClickObject) { |
|
|
|
setOpenReportList(false); |
|
|
|
setOpenReportList(false); |
|
|
@ -112,6 +91,7 @@ const ControlMain = () => { |
|
|
|
} |
|
|
|
} |
|
|
|
}, [isClickObject]); |
|
|
|
}, [isClickObject]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 드론, uam 기체 갯수 계산
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (controlGpCountDrone) { |
|
|
|
if (controlGpCountDrone) { |
|
|
|
const uamCnt = controlGpCountDrone.filter(i => |
|
|
|
const uamCnt = controlGpCountDrone.filter(i => |
|
|
@ -126,19 +106,43 @@ const ControlMain = () => { |
|
|
|
} |
|
|
|
} |
|
|
|
}, [controlGpCountDrone]); |
|
|
|
}, [controlGpCountDrone]); |
|
|
|
|
|
|
|
|
|
|
|
const handlerClose = () => { |
|
|
|
// 김포공항 날씨 API호출
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
dispatch(controlweatherAction.request(rq)); |
|
|
|
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 화면 왼쪽 사이드 메뉴 오픈 시 다른 메뉴 닫기
|
|
|
|
|
|
|
|
const openMenu = val => { |
|
|
|
|
|
|
|
console.log(val, '--'); |
|
|
|
|
|
|
|
if (val === 'reportList') { |
|
|
|
setOpenReportList(true); |
|
|
|
setOpenReportList(true); |
|
|
|
|
|
|
|
setOpenAlarmList(false); |
|
|
|
|
|
|
|
} else if (val === 'weatherList') { |
|
|
|
|
|
|
|
setOpenReportList(false); |
|
|
|
|
|
|
|
setOpenAlarmList(false); |
|
|
|
|
|
|
|
} else if (val === 'alarmList') { |
|
|
|
dispatch(objectUnClickAction()); |
|
|
|
dispatch(objectUnClickAction()); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setOpenReportList(false); |
|
|
|
|
|
|
|
setOpenAlarmList(true); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setAlarm(false); |
|
|
|
|
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
//날씨 API
|
|
|
|
|
|
|
|
const rq = { |
|
|
|
// 로그아웃
|
|
|
|
nx: 37.558522, |
|
|
|
const handlerLogout = () => { |
|
|
|
ny: 126.793722 |
|
|
|
dispatch(Actions.logout.request()); |
|
|
|
}; |
|
|
|
}; |
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
dispatch(controlweatherAction.request(rq)); |
|
|
|
// 드론 상세정보 창 닫기
|
|
|
|
}, []); |
|
|
|
const handlerClose = () => { |
|
|
|
function weathericon() { |
|
|
|
setOpenReportList(true); |
|
|
|
|
|
|
|
dispatch(objectUnClickAction()); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 김포공항 날씨 아이콘 설정
|
|
|
|
|
|
|
|
const weathericon = () => { |
|
|
|
if (controlWheather) { |
|
|
|
if (controlWheather) { |
|
|
|
let wheatherDetail = controlWheather.items.item; |
|
|
|
let wheatherDetail = controlWheather.items.item; |
|
|
|
let skyDetail = wheatherDetail[6].fcstValue; |
|
|
|
let skyDetail = wheatherDetail[6].fcstValue; |
|
|
@ -150,24 +154,10 @@ const ControlMain = () => { |
|
|
|
return <Sun size={20} />; |
|
|
|
return <Sun size={20} />; |
|
|
|
} else return <Cloud size={20} />; |
|
|
|
} else return <Cloud size={20} />; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handlerDrawType = val => { |
|
|
|
|
|
|
|
dispatch(ctrlDrawTypeChangeAction(val)); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const ThemeToggler = () => { |
|
|
|
|
|
|
|
if (skin === 'dark') { |
|
|
|
|
|
|
|
return <Sun className='ficon' onClick={() => setSkin('light')} />; |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
return <Moon className='ficon' onClick={() => setSkin('dark')} />; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
<ControlAlarmNotice /> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div className='left-menu'> |
|
|
|
<div className='left-menu'> |
|
|
|
<h1 className='logo'> |
|
|
|
<h1 className='logo'> |
|
|
|
<img src={logo} width='80' /> |
|
|
|
<img src={logo} width='80' /> |
|
|
@ -283,12 +273,6 @@ const ControlMain = () => { |
|
|
|
<div className='data-list-box'> |
|
|
|
<div className='data-list-box'> |
|
|
|
<div className='data-list'> |
|
|
|
<div className='data-list'> |
|
|
|
<span>드론</span> |
|
|
|
<span>드론</span> |
|
|
|
{/* <span>{controlGpList ? controlGpList.length : 0}</span> */} |
|
|
|
|
|
|
|
{/* <span> |
|
|
|
|
|
|
|
{controlGpCountDrone?.length > 0 |
|
|
|
|
|
|
|
? controlGpCountDrone?.length |
|
|
|
|
|
|
|
: 0} |
|
|
|
|
|
|
|
</span> */} |
|
|
|
|
|
|
|
<span>{droneCount}</span> |
|
|
|
<span>{droneCount}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className='data-list'> |
|
|
|
<div className='data-list'> |
|
|
@ -297,7 +281,6 @@ const ControlMain = () => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className='data-list'> |
|
|
|
<div className='data-list'> |
|
|
|
<span>항공기</span> |
|
|
|
<span>항공기</span> |
|
|
|
{/* <span>2147대</span> */} |
|
|
|
|
|
|
|
<span> |
|
|
|
<span> |
|
|
|
{controlGpCountFlight?.length > 0 |
|
|
|
{controlGpCountFlight?.length > 0 |
|
|
|
? controlGpCountFlight?.length |
|
|
|
? controlGpCountFlight?.length |
|
|
@ -307,30 +290,10 @@ const ControlMain = () => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</Card> |
|
|
|
</Card> |
|
|
|
</div> |
|
|
|
</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' style={{ cursor: 'pointer' }}> |
|
|
|
|
|
|
|
<span onClick={() => handlerDrawType('CIRCLE')}> |
|
|
|
|
|
|
|
화재구역설정 |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div className='data-list' style={{ cursor: 'pointer' }}> |
|
|
|
|
|
|
|
<span onClick={() => handlerDrawType('RESET')}>초기화</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</Card> |
|
|
|
|
|
|
|
</div> */} |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
{oepnReportList ? ( |
|
|
|
{oepnReportList ? ( |
|
|
|
<ControlReportList |
|
|
|
<ControlReportList setOpenReportList={setOpenReportList} /> |
|
|
|
// openReportDetailParam={openReportDetailParam}
|
|
|
|
|
|
|
|
setOpenReportList={setOpenReportList} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
) : ( |
|
|
|
) : ( |
|
|
|
<div /> |
|
|
|
<div /> |
|
|
|
)} |
|
|
|
)} |
|
|
@ -339,11 +302,6 @@ const ControlMain = () => { |
|
|
|
) : ( |
|
|
|
) : ( |
|
|
|
<div /> |
|
|
|
<div /> |
|
|
|
)} |
|
|
|
)} |
|
|
|
{/* {openWeatherList ? ( |
|
|
|
|
|
|
|
<WeatherList setOpenWeatherList={setOpenWeatherList} /> |
|
|
|
|
|
|
|
) : ( |
|
|
|
|
|
|
|
<div /> |
|
|
|
|
|
|
|
)} */} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{openAlarmList ? ( |
|
|
|
{openAlarmList ? ( |
|
|
|
<ControlAlarmList setOpenAlarmList={setOpenAlarmList} /> |
|
|
|
<ControlAlarmList setOpenAlarmList={setOpenAlarmList} /> |
|
|
|