diff --git a/.env.development b/.env.development index 69e358d..658b376 100644 --- a/.env.development +++ b/.env.development @@ -1,3 +1,3 @@ -REACT_APP_HOST = http://localhost:8080/ -REACT_APP_WS_HOST = ws://localhost:8081/ws +REACT_APP_HOST = http://192.168.0.24:8080/ +REACT_APP_WS_HOST = ws://192.168.0.24:8081/ws REACT_APP_IMAGE_HOST = https://palnet-file.s3.ap-northeast-2.amazonaws.com/ diff --git a/.env.production b/.env.production index aec8d8d..dfd5973 100644 --- a/.env.production +++ b/.env.production @@ -1,3 +1,3 @@ -REACT_APP_HOST = http://control-api.palntour.com/ -REACT_APP_WS_HOST = ws://control-websocket.palntour.com/ws +REACT_APP_HOST = http://pav.palntour.com:8080/ +REACT_APP_WS_HOST = ws://pav.palntour.com:8081/ws REACT_APP_IMAGE_HOST = https://palnet-file.s3.ap-northeast-2.amazonaws.com/ diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index 70639f7..523b597 100644 --- a/src/assets/css/custom.css +++ b/src/assets/css/custom.css @@ -737,4 +737,9 @@ background-size: 75% auto; .m_ft{display:flex;align-items:flex-end; justify-content: space-between;} .m_ft_box{flex:0 0 49%} -.m_ft_box + .m_ft_box{margin-left:1%} \ No newline at end of file +.m_ft_box + .m_ft_box{margin-left:1%} + +.layer-content-box .history-btn{border-radius:4px;display:block;width:100%;height:45px;line-height:45px;text-align:center;font-size: 0.875rem;color:#ddd;font-weight:500;} +.layer-content-box .history-btn:hover{border-radius:4px;background:#00cfe8;border-color:#00cfe8;transition: 0.3s ease;-webkit-transition: 0.3s ease;} +.historyModal .drone-ti span{font-weight:500;margin-top:6px} +.historyModal .drone-name{color:#00cfe8;margin:0 10px 0 0;} \ No newline at end of file diff --git a/src/components/map/naver/NaverMap.js b/src/components/map/naver/NaverMap.js index cd171f4..3faea5b 100644 --- a/src/components/map/naver/NaverMap.js +++ b/src/components/map/naver/NaverMap.js @@ -1,26 +1,18 @@ import React, { useEffect, useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; -import dronicon from '../../../assets/control/icon/drone.png'; import { DronMarker } from './dron/DronMarker'; import { DronHistory } from './dron/DronHistory'; - import NaverMapControl from './NaverMapControl'; import { NaverMapSearch } from './search/NaverMapSearch'; import { FeatureAirZone } from './feature/FeatureAirZone'; import geoJson from '../geojson/airArea.json'; -import SensorZone from "./sensor/SensorZone"; import { controlGroupAuthAction } from '../../../modules/control/gp'; import DronPlan from './dron/DronPlan'; -import DronToast from './dron/DronToast'; -import { toast } from 'react-toastify'; export const NaverCustomMap = () => { const dispatch = useDispatch(); - const naver = window.naver; - - // const { controlGpContains } = useSelector(state => state.controlGpFltPlanState); - - const [isMapLoad, setIsMapLoad] = useState(false); + const naver = window.naver; + const [mapObject, setMapObject] = useState(null); const [arrPolyline, setArrPolyline] = useState([]); @@ -32,16 +24,16 @@ export const NaverCustomMap = () => { NaverMapInit(); dispatch(controlGroupAuthAction.request()); }, []); - - useEffect(() => { - }, [mapObject]); + const NaverMapInit = () => { const mapOptions = { - center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547), - zoom: 10, + center: new naver.maps.LatLng(37.520357, 126.610166), + // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547), + // zoom: 10, + zoom: 14, zoomControl: true, - mapTypeId: naver.maps.MapTypeId.HYBRID, + mapTypeId: naver.maps.MapTypeId.NORMAR, zoomControlOptions: { position: naver.maps.Position.TOP_LEFT, @@ -65,6 +57,7 @@ export const NaverCustomMap = () => { map={mapObject} naver={naver} /> + { /> - - + {/* */} + {/* */} ) : null} diff --git a/src/components/map/naver/draw/FlightPlanDraw.js b/src/components/map/naver/draw/FlightPlanDraw.js index ace5a20..edb5bb6 100644 --- a/src/components/map/naver/draw/FlightPlanDraw.js +++ b/src/components/map/naver/draw/FlightPlanDraw.js @@ -2,7 +2,7 @@ import $ from 'jquery'; import { useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; -import { InfoModal } from '../../../../components/modal/InfoModal'; +import { InfoModal } from '../../../modal/InfoModal'; export const FlightPlanDraw = props => { const dispatch = useDispatch(); @@ -25,7 +25,7 @@ export const FlightPlanDraw = props => { isOpen: false, title: '', desc: '' - }); + }) const naver = props.naver; const map = props.map; @@ -195,11 +195,16 @@ export const FlightPlanDraw = props => { setPolyline(polyline); setAreaInfo(polypaths); } else { - // polyline.setMap(null); + setAlertModal({ + isOpen: true, + title: '우회 여부 확인', + desc: '좌표를 두 개 점으로 이어주세요.' + }) + + polyline.setMap(null); polyline = ''; } - polyline.setMap(null) setFigure(polyline) } else if (polygon) { @@ -212,21 +217,23 @@ export const FlightPlanDraw = props => { lastDistance = guideline.getDistance(); guideline.getPath().push(polygonpaths[0]); var distance = guideline.getDistance(); - addMileStone(polygonpaths[0], fromMetersToText(distance - lastDistance)); + // addMileStone(polygonpaths[0], fromMetersToText(distance - lastDistance)); setMarker(distanceMarker); distanceMarker.forEach(c => c.setMap(null)) - setPolygon(polygon); - setAreaInfo(polygonpaths); + if(polygonpaths.length >= 3) { + setPolygon(polygon); + setAreaInfo(polygonpaths); + } else { + polygon.setMap(null) + polygon = ''; + } - polygon.setMap(null) setFigure(polygon) } } - - const onClickPolyline = (e) => { console.log('onClickPolyline') var coord = e.coord; @@ -246,9 +253,9 @@ export const FlightPlanDraw = props => { polyline = new naver.maps.Polyline({ strokeLineCap: 'round', strokeLineJoin: 'round', - // strokeColor: '#283046', - strokeColor: '#ff0000', - // strokeWeight: 3, + strokeColor: '#283046', + // strokeColor: '#ff0000', + strokeWeight: 1, strokeOpacity: 1, path: [coord], map: map @@ -264,7 +271,8 @@ export const FlightPlanDraw = props => { polyline.getPath().push(coord); var distance = polyline.getDistance(); - addMileStone(coord, fromMetersToText(distance - lastDistance)); + // addMileStone(coord, fromMetersToText(distance - lastDistance)); + addMileStone(polyline.getPath()._array, fromMetersToText(distance - lastDistance)); lastDistance = distance; } } @@ -313,8 +321,13 @@ export const FlightPlanDraw = props => { polygon.getPath().push(coord); guideline.getPath().push(coord); + // console.log(polygon.getPath()._array, 'polygon') + // console.log(guideline.getPath()._array.length, 'guide') + // console.log(polygon.getPath()._array.length) + var distance = guideline.getDistance(); - addMileStone(coord, fromMetersToText(distance - lastDistance)); + // addMileStone(coord, fromMetersToText(distance - lastDistance)); + addMileStone(guideline.getPath()._array, fromMetersToText(distance - lastDistance)); lastDistance = distance; } } @@ -647,8 +660,8 @@ export const FlightPlanDraw = props => { new naver.maps.Marker({ position: paths[i], icon: { - content: '
'+ 'Start' +'
', - anchor: new naver.maps.Point(-5, -5) + content: '
'+ 'Start' +'
', + anchor: new naver.maps.Point(45, 35) }, map: map }) ) @@ -658,12 +671,17 @@ export const FlightPlanDraw = props => { let text = fromMetersToText(r); + let dis1 = paths[i-1] + let dis2 = paths[i] + let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); + distanceMarker.push( new naver.maps.Marker({ - position: paths[i], + // position: paths[i], + position: midPoint, icon: { content: '
'+ text +'
', - anchor: new naver.maps.Point(-5, -5) + anchor: new naver.maps.Point(20, 35) }, map: map }) ) @@ -715,48 +733,58 @@ export const FlightPlanDraw = props => { } for(let i = 0; i < paths.length+1; i++) { + //start if(i == 0) { distanceMarker.push( new naver.maps.Marker({ - position: paths[i], + position: paths[0], icon: { - content: '
'+ 'Start' +'
', - anchor: new naver.maps.Point(-5, -5) + content: '
'+ 'Start' +'
', + anchor: new naver.maps.Point(45, 35) }, map: map }) ) + //첫좌표이자 마지막 좌표 } else if(i == paths.length) { var proj = map.getProjection(), r = proj.getDistance(paths[0], paths[i-1]); let text = fromMetersToText(r); + let dis1 = paths[0] + let dis2 = paths[i-1] + let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); + distanceMarker.push( new naver.maps.Marker({ - position: paths[0], + // position: paths[0], + position: midPoint, icon: { content: '
'+ text +'
', - anchor: new naver.maps.Point(45, 35) + anchor: new naver.maps.Point(0, 35) }, map: map }) ) - } else if(i == paths.length-1) { - // let tt = new naver.maps.EPSG3857.getDistance(paths[i], paths[]) - + //그 외 나머지 } else { var proj = map.getProjection(), r = proj.getDistance(paths[i-1], paths[i]); let text = fromMetersToText(r); + let dis1 = paths[i-1] + let dis2 = paths[i] + let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); + distanceMarker.push( new naver.maps.Marker({ - position: paths[i], + // position: paths[i], + position: midPoint, icon: { content: '
'+ text +'
', - anchor: new naver.maps.Point(-5, -5) + anchor: new naver.maps.Point(20, 35) }, map: map }) @@ -811,17 +839,29 @@ export const FlightPlanDraw = props => { //div로 보여주기 const addMileStone = (coord, text) => { let content; + let midPoint; + let anchor; if(text == 'Start') { - content = '
'+ text +'
' + content = '
'+ text +'
' + midPoint = coord + anchor = new naver.maps.Point(45, 35) } else { content = '
'+ text +'
' + let dis1 = coord[coord.length-2]; + let dis2 = coord[coord.length-1]; + if(circle) { + midPoint = coord + } else { + midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); + } + anchor = new naver.maps.Point(20, 35) } var marker = new naver.maps.Marker({ - position: coord, + position: midPoint, icon: { content: content, - anchor: new naver.maps.Point(-5, -5) + anchor: anchor }, // map: map }); @@ -842,20 +882,19 @@ export const FlightPlanDraw = props => { var km = 1000, text = meters; + + text = parseFloat(meters.toFixed(1)) + 'm'; + - if(meters >= km) { - text = parseFloat((meters / km).toFixed(1)) + 'km'; - } else { - text = parseFloat(meters.toFixed(1)) + 'm'; - } + // if(meters >= km) { + // text = parseFloat((meters / km).toFixed(1)) + 'km'; + // } else { + // text = parseFloat(meters.toFixed(1)) + 'm'; + // } return text; } - - - -return( - + return( + ) -}; -export default FlightPlanDraw; \ No newline at end of file +}; \ No newline at end of file diff --git a/src/components/map/naver/dron/DronHistory.js b/src/components/map/naver/dron/DronHistory.js index 3a46316..ca5a102 100644 --- a/src/components/map/naver/dron/DronHistory.js +++ b/src/components/map/naver/dron/DronHistory.js @@ -14,9 +14,7 @@ export const DronHistory = props => { const dispatch = useDispatch(); - useEffect(() => { - // console.log('>>>', controlGpHistory); - // polylineRemove(); + useEffect(() => { polylineInit(); }, [controlGpHistory]); @@ -29,7 +27,7 @@ export const DronHistory = props => { }, [objectId, isClickObject]); const polylineRemove = () => { - console.log(props.arrPolyline); + // console.log(props.arrPolyline); if (props.arrPolyline) { props.arrPolyline.map(item => { item.setMap(null); diff --git a/src/components/map/naver/dron/DronMarker.js b/src/components/map/naver/dron/DronMarker.js index 3ab76be..6b9adb4 100644 --- a/src/components/map/naver/dron/DronMarker.js +++ b/src/components/map/naver/dron/DronMarker.js @@ -1,3 +1,4 @@ +import $ from 'jquery'; import { useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import '../../../../assets/css/custom.css'; @@ -16,40 +17,43 @@ export const DronMarker = props => { const { objectId, isClickObject } = useSelector(state => state.controlMapReducer); const [arrMarkers, setArrMarkers] = useState([]); + const [arrInfos, setArrInfos] = useState([]); let naver = props.naver; + let map = props.map; + + let CustomOverlay; var contentString = ['
dddd', '
'].join(''); var infowindow = new naver.maps.InfoWindow({ content: contentString }); + useEffect(() => { + if(arrMarkers.length != 0) markerInfo(arrMarkers) + }, [arrMarkers]) + useEffect(() => { markerInit(); if (controlGpList) { controlGpList.forEach(gps => { - if (!gps.controlWarnCd) { - // gps marker가 지도상에 표출된 이후 시점부터 toast 표출 - const marker = arrMarkers.find(marker => marker.id === gps.objectId); - - if(marker) { - toast.info( - - , { - autoClose: 3000, - hideProgressBar: true, - position: toast.POSITION.BOTTOM_RIGHT, - onClick: props => { - if(marker) handlerDronClick(marker); - } + if (gps.controlWarnCd && gps.controlWarnNotyCd) { + toast.info( + , + { + // autoClose: 3000, + hideProgressBar: true, + position: toast.POSITION.BOTTOM_RIGHT, + onClick: props => { + handlerDronClick(gps.controlId, gps.objectId); } - ) - } + } + ) } }) } @@ -86,7 +90,7 @@ export const DronMarker = props => { //마커를 그린다. const addMarkers = (position, id, controlId) => { - var marker = new naver.maps.Marker({ + let marker = new naver.maps.Marker({ position: position, title: id, id: id, @@ -105,23 +109,25 @@ export const DronMarker = props => { marker.setMap(props.map); + // drone 정보 창 naver.maps.Event.addListener(marker, 'click', function (e) { - handlerDronClick(marker); + handlerDronClick(marker.controlId, marker.id); }); - + setArrMarkers(m => [...m, marker]); + // markerInfo(marker, position, id); }; - const handlerDronClick = marker => { - const idntfNum = marker.id; - const contorlId = marker.controlId; + const handlerDronClick = (controlId, idntfNum) => { + // const idntfNum = marker.id; + // const contorlId = marker.controlId; // 클릭한 식별번호 정보를 가진 그룹 추출 // const group = controlGroupAuthInfo.find(group => group.idntfNum === idntfNum); //히스토리 불러오기 - dispatch(objectClickAction(contorlId)); - dispatch(controlGpDtlAction.request(contorlId)); + dispatch(objectClickAction(controlId)); + dispatch(controlGpDtlAction.request(controlId)); dispatch(controlGpFlightPlanAction.request(idntfNum)); }; @@ -130,11 +136,19 @@ export const DronMarker = props => { marker.setMap(null); }; + const removeInfos = info => { + info.setMap(null); + } + //마커에 위치를 이동한다. const moveMarkers = (marker, position) => { marker.setPosition(position); }; + const moveInfos = (info, position) => { + info.setPosition(position); + }; + //데이터가 없는 마커를 모두 삭제 한다. const allRemoveMarkers = () => { if (arrMarkers && controlGpList) { @@ -152,6 +166,20 @@ export const DronMarker = props => { dispatch(objectUnClickAction()); } }); + arrInfos.map(info => { + const isExists = controlGpList.find( + item => item.objectId === info._id + ); + if (!isExists) { + removeInfos(info); + const arrData = arrInfos.filter( + item => item.id != info._id + ); + removeArrInfos(arrData); + + dispatch(objectUnClickAction()); + } + }); } }; @@ -168,6 +196,7 @@ export const DronMarker = props => { ); if (isExists) { moveMarkers(isExists, position); + moveInfos(isExists, position); } else { addMarkers(position, item.objectId, item.controlId); } @@ -178,9 +207,108 @@ export const DronMarker = props => { } }; + //운항정보 창 셋팅 + const infoInit = (marker, gps) => { + CustomOverlay = function(options) { + this._element = $(` +
+
+ ${marker.id} +
+
+
+ 속도: ${gps.speed}${gps.speedType} +
+
+ 고도: ${gps.elev}${gps.elevType} +
+
+ 헤딩방향: ${gps.heading} +
+
+
+ + `) + + this.setPosition(options.position); + this.setMap(options.map || null); + this.setId(options.id); + }; + + CustomOverlay.prototype = new naver.maps.OverlayView(); + CustomOverlay.prototype.constructor = CustomOverlay; + + //메소드 재정의 + //필수 + CustomOverlay.prototype.onAdd = function() { + var overlayLayer = this.getPanes().overlayLayer; + + this._element.appendTo(overlayLayer); + }; + + CustomOverlay.prototype.draw = function() { + if (!this.getMap()) { + return; + } + + var projection = this.getProjection(), + position = this.getPosition(), + pixelPosition = projection.fromCoordToOffset(position); + + this._element.css('left', pixelPosition.x); + this._element.css('top', pixelPosition.y); + }; + + CustomOverlay.prototype.onRemove = function() { + var overlayLayer = this.getPanes().overlayLayer; + + this._element.remove(); + this._element.off(); + }; + + //속성 + CustomOverlay.prototype.setPosition = function(position) { + this._position = position; + this.draw(); + }; + + CustomOverlay.prototype.getPosition = function() { + return this._position; + }; + + CustomOverlay.prototype.setId = function(id) { + this._id = id; + }; + + CustomOverlay.prototype.getId = function(id) { + return this._id; + }; + } + const removeArrMarkers = arrData => { setArrMarkers(arrData); }; + const removeArrInfos = arrData => { + setArrInfos(arrData); + }; + + const markerInfo = (arrMarkers) => { + arrMarkers.forEach((marker, idx) => { + infoInit(marker, controlGpList[idx]); + if(controlGpList.length != 0) { + const info = new CustomOverlay({ + position: new naver.maps.LatLng(controlGpList[idx].lat, controlGpList[idx].lng), + map: map, + id: marker.id + }); + // console.log(info) + setArrInfos(m => [...m, info]); + } + }); + } + + return null; }; diff --git a/src/components/map/naver/dron/DronPlan.js b/src/components/map/naver/dron/DronPlan.js index bb8e03d..c669b16 100644 --- a/src/components/map/naver/dron/DronPlan.js +++ b/src/components/map/naver/dron/DronPlan.js @@ -11,9 +11,7 @@ const DronPlan = ({ naver, map }) => { const { controlGpList } = useSelector(state => state.controlGpState); const { controlGpFltPlanList } = useSelector(state => state.controlGpFltPlanState); const { objectId, isClickObject } = useSelector(state => state.controlMapReducer); - const { controlGpContains } = useSelector(state => state.controlGpFltPlanState); - - + const [area, setArea] = useState(); // 비행 구역 관리 const [buffer, setBuffer] = useState(); // 버퍼 구역 관리 const [controlId, setControlId] = useState(); // 식별번호 저장 diff --git a/src/components/map/naver/search/NaverMapSearch.js b/src/components/map/naver/search/NaverMapSearch.js index b152932..9998513 100644 --- a/src/components/map/naver/search/NaverMapSearch.js +++ b/src/components/map/naver/search/NaverMapSearch.js @@ -14,7 +14,7 @@ export const NaverMapSearch = props => { var result = response.result, // 검색 결과의 컨테이너 items = result.items; // 검색 결과의 배열 - console.log(result); + // console.log(result); // do Something } diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js index 29077c0..a0713be 100644 --- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -388,8 +388,11 @@ const FlightPlanDetailContainer = () => { } // 삭제 const handleDelete = () => { + if(!urlParams.planSno || urlParams.planSno){ dispatch(Actions.FLIGHT_PLAN_DELETE.request(urlParams.planSno)); } + dispatch(Actions.FLIGHT_PLAN_GROUP_SELECT({cstmrSno: 0, groupId: '', groupNm: ''})); +} return ( diff --git a/src/modules/basis/flight/apis/basisFlightApi.ts b/src/modules/basis/flight/apis/basisFlightApi.ts index 5df3bce..2523ec7 100644 --- a/src/modules/basis/flight/apis/basisFlightApi.ts +++ b/src/modules/basis/flight/apis/basisFlightApi.ts @@ -35,7 +35,7 @@ export const flightPlanAPI = { return res; }, delete: async (planSno: number) => { - const res = await axios.get(`api/bas/flight/plan/delete/${planSno}`); + const res = await axios.delete(`api/bas/flight/plan/delete/${planSno}`); return res; }, listPilot: async (groupId: string) => { diff --git a/src/modules/control/gp/models/controlGpModel.ts b/src/modules/control/gp/models/controlGpModel.ts index d07262e..2707796 100644 --- a/src/modules/control/gp/models/controlGpModel.ts +++ b/src/modules/control/gp/models/controlGpModel.ts @@ -89,6 +89,7 @@ export interface ControlGpData { controlStartDt: string; heading: number; controlWarnCd: boolean; + controlWarnNotyCd: boolean; } export interface ControlGroupAuthData { diff --git a/src/modules/control/gp/sagas/controlGpSaga.ts b/src/modules/control/gp/sagas/controlGpSaga.ts index 560cd0c..7a9c37b 100644 --- a/src/modules/control/gp/sagas/controlGpSaga.ts +++ b/src/modules/control/gp/sagas/controlGpSaga.ts @@ -14,8 +14,7 @@ function* getControlGpSaga( const data = action.payload; const state = yield select(); const { objectId, isClickObject } = state.controlMapReducer; - const { controlGroupAuthInfo } = state.controlGroupAuthState; - const { controlGpFltPlanList } = state.controlGpFltPlanState; + const { controlGroupAuthInfo } = state.controlGroupAuthState; const { controlGpHistory } = state.controlGpHisState; let gpsData: ControlGpData[] = []; diff --git a/src/modules/control/map/reducers/controlMapReducer.ts b/src/modules/control/map/reducers/controlMapReducer.ts index 0eb82f5..116007a 100644 --- a/src/modules/control/map/reducers/controlMapReducer.ts +++ b/src/modules/control/map/reducers/controlMapReducer.ts @@ -1,6 +1,6 @@ // ** Initial State const initialState = { - mapType: 'HYBRID', + mapType: 'NORMAL', objectId: null, isClickObject: false, area0001: true, // 비행금지 구역 diff --git a/src/views/control/alarm/ControlAlarmNotice.js b/src/views/control/alarm/ControlAlarmNotice.js index deaadee..9c01ad4 100644 --- a/src/views/control/alarm/ControlAlarmNotice.js +++ b/src/views/control/alarm/ControlAlarmNotice.js @@ -2,7 +2,7 @@ import { Bell, ChevronDown, ChevronUp } from "react-feather"; import { ReactComponent as DroneMenuIcon } from '../../../assets/images/drone_menu_icon.svg'; const ControlAlarmNotice = () => { - {/* 알림 위아래 롤링은 구현해주셔야되는데 따른 컴포넌트있으면 그거사용해도됩니다...제가 만들어논거는 45px씩 움직여주면되거든요..저도자세히는모르겠습니다...제이쿼리로만써봐서... */} + {} return(
diff --git a/src/views/control/main/ControlMain.js b/src/views/control/main/ControlMain.js index c7ec670..0cab7bb 100644 --- a/src/views/control/main/ControlMain.js +++ b/src/views/control/main/ControlMain.js @@ -76,6 +76,11 @@ const ControlMain = () => { +
  • + +
    • {/*
    • + +
    + +
    + setHistoryModal(!historyModal)} + className='modal-dialog-centered historyModal' + > + setHistoryModal(!historyModal)}> +
    + DRONE01 + 알림내역 +
    + +     + + + + + + + + + + + + +
    번호날짜내용
    12022-08-12 22:12:05탈출!!비상탈출!!!
    +     + + + +     + +
    diff --git a/src/views/control/setting/ControlSetting.js b/src/views/control/setting/ControlSetting.js index ae80e35..8cdad51 100644 --- a/src/views/control/setting/ControlSetting.js +++ b/src/views/control/setting/ControlSetting.js @@ -5,544 +5,274 @@ import { CgTrees } from 'react-icons/cg'; import { VscRadioTower } from 'react-icons/vsc'; import { useDispatch, useSelector } from 'react-redux'; import { - Button, - InputGroup, - ButtonGroup, - InputGroupAddon, - Input, - CustomInput + Button, + InputGroup, + ButtonGroup, + InputGroupAddon, + Input, + CustomInput } from 'reactstrap'; import { - areaClickAction, environmentClickAction, - mapTypeChangeAction, sensorClickAction + areaClickAction, environmentClickAction, + mapTypeChangeAction, sensorClickAction } from '../../../modules/control/map/actions/controlMapActions'; const ControlSetting = props => { - const dispatch = useDispatch(); + const dispatch = useDispatch(); - const mapControl = useSelector(state => state.controlMapReducer); + const mapControl = useSelector(state => state.controlMapReducer); - // console.log('111111111111111'); - // useEffect(() => { - // console.log('111111111111111'); - // }, []); - useEffect(() => { - console.log('>>>>', mapControl); - }, [mapControl]); + const handlerMapType = val => { + dispatch(mapTypeChangeAction(val)); + }; - const handlerMapType = val => { - dispatch(mapTypeChangeAction(val)); - }; + const handlerAreaClick = val => { + dispatch(areaClickAction(val)); + }; - const handlerAreaClick = val => { - dispatch(areaClickAction(val)); - }; + const handlerSensorClick = (val, isChecked) => { + if (isChecked) { + dispatch(sensorClickAction(val)); + } else { + dispatch(sensorClickAction('')); + } + }; - const handlerSensorClick = (val, isChecked) => { - if(isChecked){ - dispatch(sensorClickAction(val)); - } else { - dispatch(sensorClickAction('')); - } - }; - - return ( -
    -
    -
    -

    지도유형

    - {/* */} -
    -
    - - - - - -
    -
    - {/*
    -
    -

    지역검색

    -
    -
    - - - - -
    -
    -
    -
    -

    드론 중량

    -
    -
    -
    -
    -
    -
    전체
    -
    - console.log(1111)} - className='custom-control-primary' - type='switch' - id='test11' - name='test02' - inline - /> -
    -
    -
    -
    250g 이하
    -
    - -
    -
    -
    -
    250g 초과~2kg 이하
    -
    - -
    -
    -
    -
    2kg 초과~7kg 이하
    -
    - -
    -
    -
    -
    7kg 초과~25kg 이하
    -
    - -
    -
    -
    -
    25kg 초과~150kg 이하
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -

    드론 상태

    -
    -
    -
    -
    -
    -
    전체
    -
    - -
    -
    -
    -
    Arming
    -
    - -
    -
    -
    -
    Landing
    -
    - -
    -
    -
    -
    Take off
    -
    - -
    -
    -
    -
    Flight
    -
    - -
    -
    -
    -
    -
    -
    */} -
    -
    -

    공역 표출 정보

    -
    -
    -
    -
    -
    -
    - 비행금지구역 -
    -
    - handlerAreaClick('0001')} - className='custom-control-primary' - type='switch' - id='test01' - name='test01' - inline - defaultChecked={mapControl.area0001} - /> -
    -
    -
    -
    - 비행제한구역 -
    -
    - handlerAreaClick('0002')} - className='custom-control-primary' - type='switch' - id='test02' - name='test02' - inline - defaultChecked={mapControl.area0002} - /> -
    -
    -
    -
    - 관제권(공항) -
    -
    - handlerAreaClick('0003')} - className='custom-control-primary' - type='switch' - id='test03' - name='test03' - inline - defaultChecked={mapControl.area0003} - /> -
    -
    -
    -
    - 비행장(군사) -
    -
    - handlerAreaClick('0004')} - className='custom-control-primary' - type='switch' - id='test04' - name='test04' - inline - defaultChecked={mapControl.area0004} - /> -
    -
    -
    -
    - 이착륙장 -
    -
    - handlerAreaClick('0005')} - className='custom-control-primary' - type='switch' - id='test05' - name='test05' - inline - defaultChecked={mapControl.area0005} - /> -
    -
    -
    -
    - - 초경량비행장치공역 -
    -
    - handlerAreaClick('0006')} - className='custom-control-primary' - type='switch' - id='test06' - name='test06' - inline - defaultChecked={mapControl.area0006} - /> -
    -
    -
    -
    -
    -
    - {/*
    -
    -

    장애물 표출 정보

    -
    -
    -
    -
    -
    -
    - - 전체장애물 -
    -
    - -
    -
    -
    -
    - - 고층 건물 -
    -
    - -
    -
    -
    -
    - - 송전탑 -
    -
    - -
    -
    -
    -
    - - 국립공원 -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -

    NOTAM 정보

    -
    -
    -
    -
    -
    -
    NOTAM
    -
    - -
    -
    -
    -
    -
    -
    */} -
    -
    -

    환경지표

    -
    -
    -
    -
    -
    -
    - 미세먼지(DUST) -
    -
    - handlerSensorClick('dust', e.target.checked)} - className='custom-control-primary' - type='switch' - id='sensorDust' - name='sensorDust' - inline - checked={mapControl.sensor === 'dust'} - // defaultChecked={mapControl.sensor === 'dust'} - /> -
    -
    -
    -
    - 오존(O3) -
    -
    - handlerSensorClick('o3', e.target.checked)} - className='custom-control-primary' - type='switch' - id='sensorO3' - name='sensorO3' - inline - checked={mapControl.sensor === 'o3'} - // defaultChecked={mapControl.sensor === 'o3'} - /> -
    -
    -
    -
    - 이산화질소(No2) -
    -
    - handlerSensorClick('no2', e.target.checked)} - className='custom-control-primary' - type='switch' - id='sensorNo2' - name='sensorNo2' - inline - checked={mapControl.sensor === 'no2'} - // defaultChecked={mapControl.sensor === 'no2'} - /> -
    -
    -
    -
    - 일산화탄소(Co) -
    -
    - handlerSensorClick('co', e.target.checked)} - className='custom-control-primary' - type='switch' - id='sensorCo' - name='sensorCo' - inline - checked={mapControl.sensor === 'co'} - // defaultChecked={mapControl.sensor === 'co'} - /> -
    -
    -
    -
    - 아황산가스(So2) -
    -
    - handlerSensorClick('so2', e.target.checked)} - className='custom-control-primary' - type='switch' - id='sensorSo2' - name='sensorSo2' - inline - checked={mapControl.sensor === 'so2'} - // defaultChecked={mapControl.sensor === 'so2'} - /> -
    -
    -
    -
    + return ( +
    +
    +
    +

    지도유형

    + {/* */} +
    +
    + + + + + +
    +
    +
    +
    +

    공역 표출 정보

    +
    +
    +
    +
    +
    +
    + 비행금지구역 +
    +
    + handlerAreaClick('0001')} + className='custom-control-primary' + type='switch' + id='test01' + name='test01' + inline + defaultChecked={mapControl.area0001} + /> +
    +
    +
    +
    + 비행제한구역 +
    +
    + handlerAreaClick('0002')} + className='custom-control-primary' + type='switch' + id='test02' + name='test02' + inline + defaultChecked={mapControl.area0002} + /> +
    +
    +
    +
    + 관제권(공항) +
    +
    + handlerAreaClick('0003')} + className='custom-control-primary' + type='switch' + id='test03' + name='test03' + inline + defaultChecked={mapControl.area0003} + /> +
    +
    +
    +
    + 비행장(군사) +
    +
    + handlerAreaClick('0004')} + className='custom-control-primary' + type='switch' + id='test04' + name='test04' + inline + defaultChecked={mapControl.area0004} + /> +
    +
    +
    +
    + 이착륙장 +
    +
    + handlerAreaClick('0005')} + className='custom-control-primary' + type='switch' + id='test05' + name='test05' + inline + defaultChecked={mapControl.area0005} + /> +
    +
    +
    +
    + + 초경량비행장치공역 +
    +
    + handlerAreaClick('0006')} + className='custom-control-primary' + type='switch' + id='test06' + name='test06' + inline + defaultChecked={mapControl.area0006} + /> +
    +
    +
    +
    +
    +
    + {/*
    +
    +

    환경지표

    +
    +
    +
    +
    +
    +
    + 미세먼지(DUST) +
    +
    + handlerSensorClick('dust', e.target.checked)} + className='custom-control-primary' + type='switch' + id='sensorDust' + name='sensorDust' + inline + checked={mapControl.sensor === 'dust'} + // defaultChecked={mapControl.sensor === 'dust'} + /> +
    +
    +
    +
    + 오존(O3) +
    +
    + handlerSensorClick('o3', e.target.checked)} + className='custom-control-primary' + type='switch' + id='sensorO3' + name='sensorO3' + inline + checked={mapControl.sensor === 'o3'} + // defaultChecked={mapControl.sensor === 'o3'} + /> +
    +
    +
    +
    + 이산화질소(No2) +
    +
    + handlerSensorClick('no2', e.target.checked)} + className='custom-control-primary' + type='switch' + id='sensorNo2' + name='sensorNo2' + inline + checked={mapControl.sensor === 'no2'} + // defaultChecked={mapControl.sensor === 'no2'} + /> +
    +
    +
    +
    + 일산화탄소(Co) +
    +
    + handlerSensorClick('co', e.target.checked)} + className='custom-control-primary' + type='switch' + id='sensorCo' + name='sensorCo' + inline + checked={mapControl.sensor === 'co'} + // defaultChecked={mapControl.sensor === 'co'} + /> +
    +
    +
    +
    + 아황산가스(So2) +
    +
    + handlerSensorClick('so2', e.target.checked)} + className='custom-control-primary' + type='switch' + id='sensorSo2' + name='sensorSo2' + inline + checked={mapControl.sensor === 'so2'} + // defaultChecked={mapControl.sensor === 'so2'} + /> +
    +
    +
    +
    +
    +
    */}
    -
    -
    - ); + ); }; export default ControlSetting;