-
- -
-
-
드론 현황
-
-
- {total? total.totalDroneCnt: 0}대 비행 중
-
-
-
-
- -
-
-
비정상 알림 전체
-
-
- {total? total.totalWarnCnt : 0}건
-
-
-
-
-
+ return (
+
+
+
+
실시간 비정상 알림 정보
+
+
+
+
+ -
+
+
드론 현황
+
+
+ {total ? total.totalDroneCnt : 0}대 비행 중
+
-
-
-
-
알림 목록
+
+
+
-
+
+
비정상 알림 전체
+
+
+ {total ? total.totalWarnCnt : 0}건
+
- {total?.warnList.map((warn, i) => {
- const warnContent = warn.warnType === 'PLAN' ? '비행 경로 이탈' : '비정상 상황 발생'
+
+
+
+
+
+
+
+
알림 목록
+
+ {total?.warnList.map((warn, i) => {
+ const warnContent =
+ warn.warnType === 'PLAN' ? '비행 경로 이탈' : '비정상 상황 발생';
- return (
-
handleWarnDetail(warn.cntrlId)}>
-
- -
-
-
{warn.idntfNum}
-
{warn.occurDt ? warn.occurDt : '-'}
-
-
-
{warnContent ? warnContent : '-'}
-
{warn.warnCount ? warn.warnCount : '-'}건
-
-
-
-
- )
- })}
- {/*
-
- -
-
-
PAV-001
-
2022. 09. 02 10:00:30
-
-
-
-
-
-
-
- -
-
-
PAV-002
-
2022. 09. 02 11:23:52
-
-
-
-
-
-
*/}
+ return (
+
handleWarnDetail(warn.cntrlId)}
+ >
+
+ -
+
+
{warn.idntfNum}
+
+ {warn.occurDt ? warn.occurDt : '-'}
+
+
+
+
+ {warnContent ? warnContent : '-'}
+
+
+ {warn.warnCount ? warn.warnCount : '-'}건
+
+
+
+
+ );
+ })}
+
-
-
- );
+
+
+ );
};
export default ControlAlarmList;
diff --git a/src/views/control/alarm/ControlAlarmNotice.js b/src/views/control/alarm/ControlAlarmNotice.js
deleted file mode 100644
index 9c01ad4..0000000
--- a/src/views/control/alarm/ControlAlarmNotice.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Bell, ChevronDown, ChevronUp } from "react-feather";
-import { ReactComponent as DroneMenuIcon } from '../../../assets/images/drone_menu_icon.svg';
-
-const ControlAlarmNotice = () => {
- {}
- return(
-
-
- {/*
-
-
-
-
-
- -
- 2021-06-17 12:00:00AVSF123 장애물
- 지역에 접근하였습니다111.
-
- -
- 2021-06-30 13:00:00AVSF123
- 비행금지구역에 접근하였습니다.
-
- -
- 2021-08-20 14:00:00AVSF123
- 국립공원구역에 접근하였습니다.
-
-
-
-
-
-
-
-
*/}
-
-
-
-
- )
-}
-
-export default ControlAlarmNotice;
diff --git a/src/views/control/main/ControlMain.js b/src/views/control/main/ControlMain.js
index 24fd640..4a0fb6f 100644
--- a/src/views/control/main/ControlMain.js
+++ b/src/views/control/main/ControlMain.js
@@ -11,7 +11,6 @@ import {
Cloud,
CloudRain,
CloudSnow,
- Moon,
Grid
} from 'react-feather';
@@ -19,7 +18,6 @@ import { AiOutlinePoweroff } 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';
import ControlAlarmList from '../alarm/ControlAlarmList';
@@ -28,71 +26,51 @@ 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 {
- ctrlDrawTypeChangeAction,
- objectUnClickAction
-} from '../../../modules/control/map/actions/controlMapActions';
+import { objectUnClickAction } from '../../../modules/control/map/actions/controlMapActions';
const ControlMain = () => {
const dispatch = useDispatch();
+ const history = useHistory();
+ // 비행중인 기체 클릭 여부
const { isClickObject } = useSelector(state => state.controlMapReducer);
- const { controlGpList, controlGroupAuthInfo } = useSelector(
- state => state.controlGpState
- );
+
+ // 비행중인 기체 정보
+ const { controlGpList } = useSelector(state => state.controlGpState);
+
+ // 기체 상세 정보
const { controlDetail, controlWheather } = useSelector(
state => state.controlGpDtlState
);
+
+ // 드론 기체 갯수 (드론 + uam)
const { controlGpCountDrone, controlGpCountFlight } = useSelector(
state => state.controlGpCountState
);
- // pav박람회 -> uam, 드론 구별을 위한 임시 코드
- // (이 작업으로 고도화 하려면 추후에 서버에서 uam타입을 새로 더 받아 작업해야 함)
+ // 드론, uam 기체 갯수
const [droneCount, setDroneCount] = useState(0);
const [uamCount, setUamCount] = useState(0);
+ // 비정상상황 여부
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 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(() => {
if (controlGpList) {
const warnGps = controlGpList.find(gps => {
@@ -105,6 +83,7 @@ const ControlMain = () => {
}
}, [controlGpList]);
+ // 비행중인 기체 클릭 시 열려있는 사이드 메뉴 닫기
useEffect(() => {
if (isClickObject) {
setOpenReportList(false);
@@ -112,6 +91,7 @@ const ControlMain = () => {
}
}, [isClickObject]);
+ // 드론, uam 기체 갯수 계산
useEffect(() => {
if (controlGpCountDrone) {
const uamCnt = controlGpCountDrone.filter(i =>
@@ -126,19 +106,43 @@ const ControlMain = () => {
}
}, [controlGpCountDrone]);
+ // 김포공항 날씨 API호출
+ useEffect(() => {
+ dispatch(controlweatherAction.request(rq));
+ }, []);
+
+ // 화면 왼쪽 사이드 메뉴 오픈 시 다른 메뉴 닫기
+ const openMenu = val => {
+ console.log(val, '--');
+ if (val === 'reportList') {
+ setOpenReportList(true);
+ setOpenAlarmList(false);
+ } else if (val === 'weatherList') {
+ setOpenReportList(false);
+ setOpenAlarmList(false);
+ } else if (val === 'alarmList') {
+ dispatch(objectUnClickAction());
+
+ setOpenReportList(false);
+ setOpenAlarmList(true);
+
+ setAlarm(false);
+ }
+ };
+
+ // 로그아웃
+ const handlerLogout = () => {
+ dispatch(Actions.logout.request());
+ };
+
+ // 드론 상세정보 창 닫기
const handlerClose = () => {
setOpenReportList(true);
dispatch(objectUnClickAction());
};
- //날씨 API
- const rq = {
- nx: 37.558522,
- ny: 126.793722
- };
- useEffect(() => {
- dispatch(controlweatherAction.request(rq));
- }, []);
- function weathericon() {
+
+ // 김포공항 날씨 아이콘 설정
+ const weathericon = () => {
if (controlWheather) {
let wheatherDetail = controlWheather.items.item;
let skyDetail = wheatherDetail[6].fcstValue;
@@ -150,24 +154,10 @@ const ControlMain = () => {
return
;
} else return
;
}
- }
-
- const handlerDrawType = val => {
- dispatch(ctrlDrawTypeChangeAction(val));
- };
-
- const ThemeToggler = () => {
- if (skin === 'dark') {
- return
setSkin('light')} />;
- } else {
- return setSkin('dark')} />;
- }
};
return (
<>
-
-
@@ -283,12 +273,6 @@ const ControlMain = () => {
드론
- {/* {controlGpList ? controlGpList.length : 0} */}
- {/*
- {controlGpCountDrone?.length > 0
- ? controlGpCountDrone?.length
- : 0}
- */}
{droneCount}
@@ -297,7 +281,6 @@ const ControlMain = () => {
항공기
- {/* 2147대 */}
{controlGpCountFlight?.length > 0
? controlGpCountFlight?.length
@@ -307,30 +290,10 @@ const ControlMain = () => {
- {/*
-
-
- 화재경보
-
-
-
- handlerDrawType('CIRCLE')}>
- 화재구역설정
-
-
-
- handlerDrawType('RESET')}>초기화
-
-
-
-
*/}
{oepnReportList ? (
-
+
) : (
)}
@@ -339,11 +302,6 @@ const ControlMain = () => {
) : (
)}
- {/* {openWeatherList ? (
-
- ) : (
-
- )} */}
{openAlarmList ? (
diff --git a/src/views/control/report/ControlReportDetail.js b/src/views/control/report/ControlReportDetail.js
index 7ce80f7..732c48f 100644
--- a/src/views/control/report/ControlReportDetail.js
+++ b/src/views/control/report/ControlReportDetail.js
@@ -1,45 +1,51 @@
import moment from 'moment';
-import React, { useMemo } from 'react';
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 { IMG_PATH } from '../../../configs/constants';
-import { objectUnClickAction } from '../../../modules/control/map/actions/controlMapActions';
import {
GET_ARCTFT_TYPE_CD,
GET_WGHT_TYPE_CD
} from '../../../utility/CondeUtil';
-import {
- controlGpLogAction,
- controlweatherAction
-} from '../../../modules/control/gp';
+import { controlGpLogAction } from '../../../modules/control/gp';
import ControlAlarmDetail from '../alarm/ControlAlarmDetail';
-import axios from '../../../modules/utils/customAxiosUtil';
import {
Navigation2,
- Search,
Compass,
Sun,
Cloud,
CloudRain,
CloudSnow
} from 'react-feather';
-import { WHEATHER_KEY } from '../../../configs/constants';
import { Table } from 'reactstrap';
+
const ControlReportDetail = props => {
const dispatch = useDispatch();
+
+ // 비정상상황 모달
const [historyModal, setHistoryModal] = useState(false);
+ // 기체 상세정보
const { controlGpDetail, controlDetail } = useSelector(
state => state.controlGpDtlState
);
- //const { controlWheather } = useSelector(state => state.ControlGpWeatherState);
+
+ // 비정상상황 히스토리 내역
const { controlGpWarnLog } = useSelector(state => state.controlGpLogState);
- function weathericon() {
+ // 해당 드론의 비정상상황 알림내역 불러옴
+ 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;
@@ -51,16 +57,9 @@ const ControlReportDetail = props => {
return ;
} else return ;
}
- }
-
- useEffect(() => {
- if (historyModal) {
- if (controlGpDetail) {
- dispatch(controlGpLogAction.request({ id: controlGpDetail.controlId }));
- }
- }
- }, [historyModal]);
+ };
+ // 상세정보에 내역이 없으면 -로 표출
const nullMessage = val => {
if (val) {
return val;
@@ -68,6 +67,7 @@ const ControlReportDetail = props => {
return '-';
}
};
+
return (
@@ -76,7 +76,6 @@ const ControlReportDetail = props => {
- {/* {controlDetail?.imageUrl ? (
-
- ) : (
-
- )} */}
{controlGpDetail?.objectId.includes('UAM') ? (
) : (
@@ -138,18 +132,6 @@ const ControlReportDetail = props => {
{GET_ARCTFT_TYPE_CD(controlDetail?.arcrftTypeCd)}
- {/*
- 배터리 잔량
-
- {controlGpDetail?.betteryLevel} %
-
-
-
- 배터리 전압
-
- {controlGpDetail?.betteryVoltage} volt
-
- */}
@@ -177,12 +159,6 @@ const ControlReportDetail = props => {
: '-'}