junh_eee(이준희)
10 months ago
10 changed files with 1 additions and 1782 deletions
@ -1,66 +0,0 @@ |
|||||||
import { X } from 'react-feather'; |
|
||||||
|
|
||||||
const ControlAlarmList = props => { |
|
||||||
return ( |
|
||||||
<div className='left-layer'> |
|
||||||
<div className='layer-content'> |
|
||||||
<div className='layer-ti'> |
|
||||||
<h4>알림 리스트</h4> |
|
||||||
<button |
|
||||||
className='btn-icon' |
|
||||||
outline |
|
||||||
color='primary' |
|
||||||
onClick={() => props.setOpenAlarmList(false)} |
|
||||||
> |
|
||||||
<X size={20} /> |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
<div className='layer-content-list'> |
|
||||||
<dl className='notice-list'> |
|
||||||
<dt> |
|
||||||
<div className='list-ti'> |
|
||||||
<div className='list-left-txt'>전체 2000건</div> |
|
||||||
<div className='list-right-txt'>오늘 120건</div> |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
</dl> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div className='layer-content'> |
|
||||||
<div className='layer-ti'> |
|
||||||
<h4>알림 목록</h4> |
|
||||||
</div> |
|
||||||
<div className='layer-content-list'> |
|
||||||
<dl className='notice-list'> |
|
||||||
<dt> |
|
||||||
<div className='list-ti'> |
|
||||||
<div className='list-left-txt'>통신 장애 알림</div> |
|
||||||
<div className='list-right-txt'>6월 17일</div> |
|
||||||
</div> |
|
||||||
<div className='list-txt'> |
|
||||||
통신장애 통신장애 통신장애 통신장애 통신장애 통신장애 통신장애 |
|
||||||
통신장애 통신장애{' '} |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
</dl> |
|
||||||
</div> |
|
||||||
<div className='layer-content-list'> |
|
||||||
<dl className='notice-list'> |
|
||||||
<dt> |
|
||||||
<div className='list-ti'> |
|
||||||
<div className='list-left-txt'>비행 경로 이탈</div> |
|
||||||
<div className='list-right-txt'>6월 17일</div> |
|
||||||
</div> |
|
||||||
<div className='list-txt'> |
|
||||||
비행경로이탈 비행경로이탈 비행경로이탈 비행경로이탈 비행경로이탈 |
|
||||||
비행경로이탈 비행경로이탈 비행경로이탈 비행경로이탈 비행경로이탈 |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
</dl> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default ControlAlarmList; |
|
@ -1,45 +0,0 @@ |
|||||||
import { Bell, ChevronDown, ChevronUp } from "react-feather"; |
|
||||||
import { ReactComponent as DroneMenuIcon } from '../../../assets/images/drone_menu_icon.svg'; |
|
||||||
|
|
||||||
const ControlAlarmNotice = () => { |
|
||||||
{/* 알림 위아래 롤링은 구현해주셔야되는데 따른 컴포넌트있으면 그거사용해도됩니다...제가 만들어논거는 45px씩 움직여주면되거든요..저도자세히는모르겠습니다...제이쿼리로만써봐서... */} |
|
||||||
return( |
|
||||||
|
|
||||||
<div> |
|
||||||
{/* <div className='notice'> |
|
||||||
<div className='notice-icon'> |
|
||||||
<Bell size={20} /> |
|
||||||
</div> |
|
||||||
<div className='notice-txt'> |
|
||||||
<dl> |
|
||||||
<dt> |
|
||||||
<span className='time'>2021-06-17 12:00:00</span>AVSF123 장애물 |
|
||||||
지역에 접근하였습니다111. |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<span className='time'>2021-06-30 13:00:00</span>AVSF123 |
|
||||||
비행금지구역에 접근하였습니다. |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<span className='time'>2021-08-20 14:00:00</span>AVSF123 |
|
||||||
국립공원구역에 접근하였습니다. |
|
||||||
</dt> |
|
||||||
</dl> |
|
||||||
</div> |
|
||||||
<div className='notice-btn'> |
|
||||||
<button> |
|
||||||
<ChevronUp size={15} /> |
|
||||||
</button> |
|
||||||
<button> |
|
||||||
<ChevronDown size={15} /> |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
</div> */} |
|
||||||
|
|
||||||
</div> |
|
||||||
|
|
||||||
|
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
export default ControlAlarmNotice; |
|
@ -1,18 +0,0 @@ |
|||||||
import React, { useEffect, useState } from 'react'; |
|
||||||
import { MapControlDraw } from '../../components/mapDraw/MapControlDraw'; |
|
||||||
// import { WebsocketClient } from '../../components/websocket/WebsocketClient';
|
|
||||||
import ControlMainDraw from './main/ControlMainDraw'; |
|
||||||
|
|
||||||
const ControlViewDraw = () => { |
|
||||||
return ( |
|
||||||
<div className='pal-container'> |
|
||||||
<div className='map'> |
|
||||||
<MapControlDraw /> |
|
||||||
</div> |
|
||||||
|
|
||||||
<ControlMainDraw /> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default ControlViewDraw; |
|
@ -1,212 +0,0 @@ |
|||||||
import React, { useEffect, useState } from 'react'; |
|
||||||
import '../../../assets/css/custom.css'; |
|
||||||
import logo from '../../../assets/images/pal_logo.png'; |
|
||||||
import { Sun, Map, Bell, Check } from 'react-feather'; |
|
||||||
import { AiOutlinePoweroff } from 'react-icons/ai'; |
|
||||||
import { ReactComponent as DroneMenuIcon } from '../../../assets/images/drone_menu_icon.svg'; |
|
||||||
|
|
||||||
import ControlAlarmNotice from '../alarm/ControlAlarmNotice'; |
|
||||||
import ControlReportList from '../report/ControlReportList'; |
|
||||||
import ControlReportDetail from '../report/ControlReportDetail'; |
|
||||||
import WeatherList from '../weather/WeatherList'; |
|
||||||
import ControlAlarmList from '../alarm/ControlAlarmList'; |
|
||||||
import ControlSetting from '../setting/ControlSetting'; |
|
||||||
import WebsocketClient from '../../../components/websocket/WebsocketClient'; |
|
||||||
import { useDispatch, useSelector } from 'react-redux'; |
|
||||||
|
|
||||||
import * as Actions from '../../../modules/account/login/actions/authAction'; |
|
||||||
|
|
||||||
import { |
|
||||||
ButtonGroup, |
|
||||||
Button, |
|
||||||
Badge, |
|
||||||
CustomInput, |
|
||||||
Input, |
|
||||||
Label, |
|
||||||
InputGroup |
|
||||||
} from 'reactstrap'; |
|
||||||
|
|
||||||
import { |
|
||||||
drawTypeChangeAction, |
|
||||||
drawCheckAction |
|
||||||
} from '../../../modules/control/map/actions/controlMapActions'; |
|
||||||
|
|
||||||
const ControlMainDraw = () => { |
|
||||||
const dispatch = useDispatch(); |
|
||||||
|
|
||||||
const { isClickObject } = useSelector(state => state.controlMapReducer); |
|
||||||
|
|
||||||
const [oepnReportList, setOpenReportList] = useState(false); |
|
||||||
const [openReportDetail, setOpenReportDetail] = useState(false); |
|
||||||
const [openWeatherList, setOpenWeatherList] = useState(false); |
|
||||||
|
|
||||||
const [openAlarmList, setOpenAlarmList] = useState(false); |
|
||||||
|
|
||||||
const [openSetting, setOpenSetting] = useState(false); |
|
||||||
|
|
||||||
const mapControl = useSelector(state => state.controlMapReducer); |
|
||||||
|
|
||||||
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') { |
|
||||||
setOpenReportList(false); |
|
||||||
setOpenReportDetail(false); |
|
||||||
setOpenWeatherList(false); |
|
||||||
setOpenAlarmList(true); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
const openReportDetailParam = val => { |
|
||||||
setOpenReportDetail(true); |
|
||||||
}; |
|
||||||
|
|
||||||
const handlerLogout = () => { |
|
||||||
dispatch(Actions.logout.request()); |
|
||||||
}; |
|
||||||
|
|
||||||
const handlerDrawType = val => { |
|
||||||
dispatch(drawTypeChangeAction(val)); |
|
||||||
}; |
|
||||||
|
|
||||||
const handlerDrawCheck = val => { |
|
||||||
dispatch(drawCheckAction(val)); |
|
||||||
}; |
|
||||||
|
|
||||||
return ( |
|
||||||
<> |
|
||||||
<ControlAlarmNotice /> |
|
||||||
|
|
||||||
<div className='left-menu'> |
|
||||||
<h1 className='logo'> |
|
||||||
<img src={logo} width='80' /> |
|
||||||
<span>PAL</span> |
|
||||||
</h1> |
|
||||||
<ul className='left-menu-nav'> |
|
||||||
<li> |
|
||||||
<button onClick={() => openMenu('reportList')}> |
|
||||||
<DroneMenuIcon width='30' height='30' /> |
|
||||||
</button> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
|
|
||||||
{/* 네이버 그리기 도구모음 */} |
|
||||||
<ul className='left-menu-nav'> |
|
||||||
<li> |
|
||||||
<CustomInput |
|
||||||
id='check' |
|
||||||
type='button' |
|
||||||
className='check' |
|
||||||
onClick={e => handlerDrawCheck(!mapControl.drawCheck)} |
|
||||||
value={mapControl.drawCheck === true ? 'IN USE' : 'STOP'} |
|
||||||
/> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
|
|
||||||
{/* 제이쿼리로 그리기(기능 연결 중) */} |
|
||||||
{/* <ul className='left-menu-nav'> |
|
||||||
<li className='test'> |
|
||||||
<CustomInput |
|
||||||
id='test' |
|
||||||
type='image' |
|
||||||
className={mapControl.drawType === 'LINE' ? 'btn-use' : 'btn-stop'} |
|
||||||
src='http://static.naver.net/maps/mantle/drawing/1x/polyline.png' |
|
||||||
onClick={e => handlerDrawType('LINE')} |
|
||||||
/> |
|
||||||
<CustomInput |
|
||||||
id='test' |
|
||||||
type='image' |
|
||||||
className={mapControl.drawType === 'POLYGON' ? 'btn-use' : 'btn-stop'} |
|
||||||
src='http://static.naver.net/maps/mantle/drawing/1x/polygon.png' |
|
||||||
onClick={e => handlerDrawType('POLYGON')} |
|
||||||
/> |
|
||||||
<CustomInput |
|
||||||
id='test' |
|
||||||
type='image' |
|
||||||
className={mapControl.drawType === 'CIRCLE' ? 'btn-use' : 'btn-stop'} |
|
||||||
src='http://static.naver.net/maps/mantle/drawing/1x/ellipse.png' |
|
||||||
onClick={e => handlerDrawType('CIRCLE')} |
|
||||||
/> |
|
||||||
<CustomInput |
|
||||||
id='none' |
|
||||||
type='button' |
|
||||||
className='check' |
|
||||||
onClick={e => handlerDrawType('')} |
|
||||||
value={mapControl.drawType === '' ? 'STOP' : 'IN USE'} |
|
||||||
/> |
|
||||||
</li> |
|
||||||
</ul> */} |
|
||||||
|
|
||||||
<ul className='left-menu-footer'> |
|
||||||
<li> |
|
||||||
<AiOutlinePoweroff |
|
||||||
size={25} |
|
||||||
className='logout-btn' |
|
||||||
onClick={handlerLogout} |
|
||||||
/> |
|
||||||
</li> |
|
||||||
<WebsocketClient /> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
|
|
||||||
{oepnReportList ? ( |
|
||||||
<ControlReportList |
|
||||||
openReportDetailParam={openReportDetailParam} |
|
||||||
setOpenReportList={setOpenReportList} |
|
||||||
/> |
|
||||||
) : ( |
|
||||||
<div /> |
|
||||||
)} |
|
||||||
{isClickObject ? ( |
|
||||||
<ControlReportDetail setOpenReportDetail={setOpenReportDetail} /> |
|
||||||
) : ( |
|
||||||
<div /> |
|
||||||
)} |
|
||||||
{openWeatherList ? ( |
|
||||||
<WeatherList setOpenWeatherList={setOpenWeatherList} /> |
|
||||||
) : ( |
|
||||||
<div /> |
|
||||||
)} |
|
||||||
|
|
||||||
{openAlarmList ? ( |
|
||||||
<ControlAlarmList setOpenAlarmList={setOpenAlarmList} /> |
|
||||||
) : ( |
|
||||||
<div /> |
|
||||||
)} |
|
||||||
|
|
||||||
{openSetting ? ( |
|
||||||
<div className='right-menu active'> |
|
||||||
<button |
|
||||||
className='right-layer-btn' |
|
||||||
onClick={() => setOpenSetting(false)} |
|
||||||
> |
|
||||||
<Map size={18} /> |
|
||||||
</button> |
|
||||||
<div className='right-layer active'> |
|
||||||
<ControlSetting /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
) : ( |
|
||||||
<div className='right-menu'> |
|
||||||
<button |
|
||||||
className='right-layer-btn' |
|
||||||
onClick={() => setOpenSetting(true)} |
|
||||||
> |
|
||||||
<Map size={18} /> |
|
||||||
</button> |
|
||||||
<div className='right-layer'></div> |
|
||||||
</div> |
|
||||||
)} |
|
||||||
</> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default ControlMainDraw; |
|
@ -1,10 +0,0 @@ |
|||||||
|
|
||||||
import React, { useEffect, useState } from 'react'; |
|
||||||
|
|
||||||
const ControlMenuLeft = () => { |
|
||||||
return( |
|
||||||
<></> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
export default ControlMenuLeft(); |
|
@ -1,218 +0,0 @@ |
|||||||
import moment from 'moment'; |
|
||||||
import React from 'react'; |
|
||||||
import { X } from 'react-feather'; |
|
||||||
import { useDispatch, useSelector } from 'react-redux'; |
|
||||||
import drone_img from '../../../assets/images/drone.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'; |
|
||||||
|
|
||||||
const ControlReportDetail = props => { |
|
||||||
const dispatch = useDispatch(); |
|
||||||
|
|
||||||
const { controlGpDetail, controlDetail } = useSelector( |
|
||||||
state => state.controlGpDtlState |
|
||||||
); |
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
|
|
||||||
// }, [controlGpDetail]);
|
|
||||||
|
|
||||||
const handlerClose = () => { |
|
||||||
dispatch(objectUnClickAction()); |
|
||||||
}; |
|
||||||
|
|
||||||
const nullMessage = val => { |
|
||||||
if (val) { |
|
||||||
return val; |
|
||||||
} else { |
|
||||||
return '-'; |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className='left-layer'> |
|
||||||
<div className='layer-content'> |
|
||||||
<div className='layer-ti'> |
|
||||||
<h4>드론 상세정보</h4> |
|
||||||
<button |
|
||||||
className='btn-icon' |
|
||||||
color='primary' |
|
||||||
// onClick={() => props.setOpenReportDetail(false)}
|
|
||||||
onClick={() => handlerClose()} |
|
||||||
> |
|
||||||
<X size={20} /> |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
<div className='layer-content-box'> |
|
||||||
<div className='drone-ti'> |
|
||||||
<img src={drone_yellow} width='40' /> |
|
||||||
{controlDetail?.arcrftModelNm |
|
||||||
? controlDetail?.arcrftModelNm |
|
||||||
: controlGpDetail?.objectId} |
|
||||||
</div> |
|
||||||
<div className='drone-img'> |
|
||||||
{controlDetail?.imageUrl ? ( |
|
||||||
<img src={IMG_PATH + controlDetail?.imageUrl} /> |
|
||||||
) : ( |
|
||||||
<img src={drone_img} /> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
<div className='layer-content-info'> |
|
||||||
<dl> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'>제작번호</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
{nullMessage(controlDetail?.prdctNum)} |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'>식별번호</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
{controlGpDetail?.objectId} |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'>중량</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
{GET_WGHT_TYPE_CD(controlDetail?.wghtTypeCd)} |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'>종류</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
{GET_ARCTFT_TYPE_CD(controlDetail?.arcrftTypeCd)} |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'>배터리 잔량</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
{controlGpDetail?.betteryLevel} % |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'>배터리 전압</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
{controlGpDetail?.betteryVoltage} volt |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
</dl> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div className='layer-content'> |
|
||||||
<div className='layer-ti'> |
|
||||||
<h4>비행정보</h4> |
|
||||||
</div> |
|
||||||
<div className='layer-content-box'> |
|
||||||
<div className='layer-content-info'> |
|
||||||
<dl> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'>시작위치</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
{nullMessage(controlDetail?.stAreaNm)} |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'>시작시간</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
{moment( |
|
||||||
controlGpDetail?.controlStartDt, |
|
||||||
'YYYYMMDDHHmmss' |
|
||||||
).format('MM-DD HH:mm:ss')} |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
{/* <dt> |
|
||||||
<div className='list-left-txt'>현재위치</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
인천광역시 부평구 안남로 272 |
|
||||||
</div> |
|
||||||
</dt> */} |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'>속도</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
{controlGpDetail?.speed} {controlGpDetail?.speedType} |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'>고도</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
{controlGpDetail?.elev} {controlGpDetail?.elevType} |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'>좌표</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
{controlGpDetail?.lat} , {controlGpDetail?.lng} |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'>비행거리</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
{nullMessage(controlGpDetail?.moveDistance)}{' '} |
|
||||||
{controlGpDetail?.moveDistanceType} |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'>헤딩 방위각</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
{controlGpDetail?.heading} ° |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'>상태</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
{nullMessage(controlGpDetail?.dronStatus)} |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'>위치정보 수신 시간</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
{' '} |
|
||||||
{moment( |
|
||||||
controlGpDetail?.serverRcvDt, |
|
||||||
'YYYYMMDDHHmmss' |
|
||||||
).format('MM-DD HH:mm:ss')} |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
</dl> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div className='layer-content'> |
|
||||||
<div className='layer-ti'> |
|
||||||
<h4>운영자 정보</h4> |
|
||||||
</div> |
|
||||||
<div className='layer-content-box'> |
|
||||||
<div className='layer-content-info'> |
|
||||||
<dl> |
|
||||||
{/* <dt> |
|
||||||
<div className='list-left-txt'>소속기관</div> |
|
||||||
<div className='list-right-txt'>팔네트웍스</div> |
|
||||||
</dt> */} |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'>담당자 이름</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
{' '} |
|
||||||
{nullMessage(controlDetail?.ownerNm)} |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'>담당자 연락처</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
{nullMessage(controlDetail?.hpno)} |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
</dl> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default ControlReportDetail; |
|
@ -1,109 +0,0 @@ |
|||||||
import moment from 'moment'; |
|
||||||
import React, { useEffect, useState } from 'react'; |
|
||||||
import { Search, X } from 'react-feather'; |
|
||||||
import { useDispatch, useSelector } from 'react-redux'; |
|
||||||
import { Badge, Button, Input, InputGroup } from 'reactstrap'; |
|
||||||
import { controlGpDtlAction } from '../../../modules/control/gp'; |
|
||||||
import { objectClickAction } from '../../../modules/control/map/actions/controlMapActions'; |
|
||||||
|
|
||||||
const ControlReportList = props => { |
|
||||||
const { controlGpList } = useSelector(state => state.controlGpState); |
|
||||||
const [filterId, setFilterId] = useState(''); |
|
||||||
|
|
||||||
const dispatch = useDispatch(); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
controlGpList; |
|
||||||
}, [controlGpList]); |
|
||||||
|
|
||||||
const handlerDetail = (objectId, cntrlId) => { |
|
||||||
dispatch(objectClickAction(objectId)); |
|
||||||
dispatch(controlGpDtlAction.request(cntrlId)); |
|
||||||
}; |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className='left-layer'> |
|
||||||
<div className='layer-content'> |
|
||||||
<div className='layer-ti'> |
|
||||||
<h4>드론 비행 현황 정보{filterId}</h4> |
|
||||||
<button |
|
||||||
className='btn-icon' |
|
||||||
color='primary' |
|
||||||
onClick={() => props.setOpenReportList(false)} |
|
||||||
> |
|
||||||
<X size={20} /> |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
<div className='layer-search'> |
|
||||||
<InputGroup> |
|
||||||
<Input |
|
||||||
type='text' |
|
||||||
placeholder='식별번호를 입력하세요' |
|
||||||
value={filterId} |
|
||||||
onChange={e => setFilterId(`${e.target.value}`)} |
|
||||||
/> |
|
||||||
<Button color='primary' outline> |
|
||||||
<Search size={18} /> |
|
||||||
</Button> |
|
||||||
</InputGroup> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div className='layer-content drone-list'> |
|
||||||
<div className='layer-ti'> |
|
||||||
<h4>드론 현황</h4> |
|
||||||
<Badge color='light-primary'> |
|
||||||
{controlGpList ? controlGpList.length : 0} 대 비행중 |
|
||||||
</Badge> |
|
||||||
</div> |
|
||||||
|
|
||||||
{controlGpList?.map(item => { |
|
||||||
if (item.objectId && item.objectId.indexOf(filterId) != -1) { |
|
||||||
return ( |
|
||||||
<div |
|
||||||
className='layer-content-list' |
|
||||||
onClick={() => handlerDetail(item.objectId, item.controlId)} |
|
||||||
key={item.objectId} |
|
||||||
> |
|
||||||
<dl> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'>식별번호</div> |
|
||||||
<div className='list-right-txt'>{item.objectId}</div> |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'>이륙 위치</div> |
|
||||||
<div className='list-right-txt'>-</div> |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'>이륙 시간</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
{moment(item.controlStartDt, 'YYYYMMDDHHmmss').format( |
|
||||||
'MM-DD HH:mm:ss' |
|
||||||
)} |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'>속도(고도)</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
{item.speed ? item.speed : '-'}{' '} |
|
||||||
{item.speed ? item.speedType : ''} ( |
|
||||||
{item.elev ? item.elev : '-'}{' '} |
|
||||||
{item.elev ? item.elevType : ''}) |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'>상태</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
{item.dronStatus ? item.dronStatus : '-'} |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
</dl> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
})} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default ControlReportList; |
|
@ -1,188 +0,0 @@ |
|||||||
import React, { useEffect, useState } from 'react'; |
|
||||||
import { Search } from 'react-feather'; |
|
||||||
import { BiBuildings, BiGridAlt } from 'react-icons/bi'; |
|
||||||
import { CgTrees } from 'react-icons/cg'; |
|
||||||
import { VscRadioTower } from 'react-icons/vsc'; |
|
||||||
import { useDispatch, useSelector } from 'react-redux'; |
|
||||||
import { Button, ButtonGroup, CustomInput } from 'reactstrap'; |
|
||||||
import { |
|
||||||
areaClickAction, |
|
||||||
mapTypeChangeAction |
|
||||||
} from '../../../modules/control/map/actions/controlMapActions'; |
|
||||||
|
|
||||||
const ControlSetting = props => { |
|
||||||
const dispatch = useDispatch(); |
|
||||||
|
|
||||||
const mapControl = useSelector(state => state.controlMapReducer); |
|
||||||
|
|
||||||
useEffect(() => {}, [mapControl]); |
|
||||||
|
|
||||||
const handlerMapType = val => { |
|
||||||
dispatch(mapTypeChangeAction(val)); |
|
||||||
}; |
|
||||||
|
|
||||||
const handlerAreaClick = val => { |
|
||||||
dispatch(areaClickAction(val)); |
|
||||||
}; |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className=''> |
|
||||||
<div className='layer-content'> |
|
||||||
<div className='layer-ti'> |
|
||||||
<h4>지도유형</h4> |
|
||||||
{/* <button className='btn-icon' outline color='primary'><X size={20} /></button> */} |
|
||||||
</div> |
|
||||||
<div className='map-btn'> |
|
||||||
<ButtonGroup> |
|
||||||
<Button |
|
||||||
color={mapControl.mapType === 'HYBRID' ? 'primary' : ''} |
|
||||||
onClick={e => handlerMapType('HYBRID')} |
|
||||||
> |
|
||||||
위성지도 |
|
||||||
</Button> |
|
||||||
<Button |
|
||||||
color={mapControl.mapType === 'NORMAL' ? 'primary' : ''} |
|
||||||
onClick={e => handlerMapType('NORMAL')} |
|
||||||
> |
|
||||||
일반지도 |
|
||||||
</Button> |
|
||||||
<Button |
|
||||||
color={mapControl.mapType === 'TERRAIN' ? 'primary' : ''} |
|
||||||
onClick={e => handlerMapType('TERRAIN')} |
|
||||||
> |
|
||||||
지형지도 |
|
||||||
</Button> |
|
||||||
</ButtonGroup> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div className='layer-content'> |
|
||||||
<div className='layer-ti'> |
|
||||||
<h4>공역 표출 정보</h4> |
|
||||||
</div> |
|
||||||
<div className='layer-content-box'> |
|
||||||
<div className='layer-content-info layer-switch-list'> |
|
||||||
<dl> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'> |
|
||||||
<span className='dot-icon color-red'></span>비행금지구역 |
|
||||||
</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
<CustomInput |
|
||||||
onClick={e => handlerAreaClick('0001')} |
|
||||||
className='custom-control-primary' |
|
||||||
type='switch' |
|
||||||
id='test01' |
|
||||||
name='test01' |
|
||||||
inline |
|
||||||
defaultChecked={mapControl.area0001} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'> |
|
||||||
<span className='dot-icon color-pink'></span>비행제한구역 |
|
||||||
</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
<CustomInput |
|
||||||
onClick={e => handlerAreaClick('0002')} |
|
||||||
className='custom-control-primary' |
|
||||||
type='switch' |
|
||||||
id='test02' |
|
||||||
name='test02' |
|
||||||
inline |
|
||||||
defaultChecked={mapControl.area0002} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'> |
|
||||||
<span className='dot-icon color-orange'></span>관제권(공항) |
|
||||||
</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
<CustomInput |
|
||||||
onClick={e => handlerAreaClick('0003')} |
|
||||||
className='custom-control-primary' |
|
||||||
type='switch' |
|
||||||
id='test03' |
|
||||||
name='test03' |
|
||||||
inline |
|
||||||
defaultChecked={mapControl.area0003} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'> |
|
||||||
<span className='dot-icon color-brown'></span>비행장(군사) |
|
||||||
</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
<CustomInput |
|
||||||
onClick={e => handlerAreaClick('0004')} |
|
||||||
className='custom-control-primary' |
|
||||||
type='switch' |
|
||||||
id='test04' |
|
||||||
name='test04' |
|
||||||
inline |
|
||||||
defaultChecked={mapControl.area0004} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'> |
|
||||||
<span className='dot-icon color-purple'></span>이착륙장 |
|
||||||
</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
<CustomInput |
|
||||||
onClick={e => handlerAreaClick('0005')} |
|
||||||
className='custom-control-primary' |
|
||||||
type='switch' |
|
||||||
id='test05' |
|
||||||
name='test05' |
|
||||||
inline |
|
||||||
defaultChecked={mapControl.area0005} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
<dt> |
|
||||||
<div className='list-left-txt'> |
|
||||||
<span className='dot-icon color-skyblue'></span> |
|
||||||
초경량비행장치공역 |
|
||||||
</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
<CustomInput |
|
||||||
onClick={e => handlerAreaClick('0006')} |
|
||||||
className='custom-control-primary' |
|
||||||
type='switch' |
|
||||||
id='test06' |
|
||||||
name='test06' |
|
||||||
inline |
|
||||||
defaultChecked={mapControl.area0006} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
</dl> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
{/* <dt> |
|
||||||
<div className='list-left-txt'> |
|
||||||
<span className='dot-icon color-red'></span>미세먼지(DUST) |
|
||||||
</div> |
|
||||||
<div className='list-right-txt'> |
|
||||||
<CustomInput |
|
||||||
onChange={e => handlerSensorClick('dust', e.target.checked)} |
|
||||||
className='custom-control-primary' |
|
||||||
type='switch' |
|
||||||
id='sensorDust' |
|
||||||
name='sensorDust' |
|
||||||
inline |
|
||||||
checked={mapControl.sensor === 'dust'} |
|
||||||
// defaultChecked={mapControl.sensor === 'dust'}
|
|
||||||
/> |
|
||||||
</div> |
|
||||||
</dt> */} |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
export default ControlSetting; |
|
@ -1,233 +0,0 @@ |
|||||||
import React, { useEffect, useState } from 'react'; |
|
||||||
import { |
|
||||||
CloudDrizzle, |
|
||||||
CloudLightning, |
|
||||||
Navigation2, |
|
||||||
X, |
|
||||||
Search, |
|
||||||
Compass, |
|
||||||
Sun, |
|
||||||
Cloud, |
|
||||||
CloudRain, |
|
||||||
CloudSnow |
|
||||||
} from 'react-feather'; |
|
||||||
import { Button, InputGroup, InputGroupAddon, Input, Table } from 'reactstrap'; |
|
||||||
|
|
||||||
const WeatherList = props => { |
|
||||||
const [clickTab, setClickTab] = useState(true); |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className='left-layer'> |
|
||||||
<div className='layer-content'> |
|
||||||
<div className='layer-ti'> |
|
||||||
<h4>날씨 상세정보</h4> |
|
||||||
<button |
|
||||||
className='btn-icon' |
|
||||||
outline |
|
||||||
color='primary' |
|
||||||
onClick={() => props.setOpenWeatherList(false)} |
|
||||||
> |
|
||||||
<X size={20} /> |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
<div className='layer-search'> |
|
||||||
<InputGroup> |
|
||||||
<Input type='text' placeholder='검색어를 입력하세요' /> |
|
||||||
<Button color='primary' outline> |
|
||||||
<Search size={18} /> |
|
||||||
</Button> |
|
||||||
</InputGroup> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div className='layer-content'> |
|
||||||
<div className='layer-weather-box'> |
|
||||||
<div className='layer-weather-info'> |
|
||||||
<div className='layer-weather-table'> |
|
||||||
<div className='layer-weather-address'> |
|
||||||
검색하신 지역의 날씨 정보입니다. |
|
||||||
<span> |
|
||||||
<Compass size={20} /> 인천광역시 부평구 안남로 272 |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
{/* 탭메뉴or탭내용 활성화 active */} |
|
||||||
<div className='tab-menu'> |
|
||||||
<ul> |
|
||||||
{clickTab ? ( |
|
||||||
<> |
|
||||||
<li className='active'>오늘</li> |
|
||||||
|
|
||||||
<li className='' onClick={e => setClickTab(false)}> |
|
||||||
주간 |
|
||||||
</li> |
|
||||||
</> |
|
||||||
) : ( |
|
||||||
<> |
|
||||||
<li className='' onClick={e => setClickTab(true)}> |
|
||||||
오늘 |
|
||||||
</li> |
|
||||||
<li className='active'>주간</li> |
|
||||||
</> |
|
||||||
)} |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
{clickTab ? ( |
|
||||||
<div className='tab-content active'> |
|
||||||
<Table responsive> |
|
||||||
<thead> |
|
||||||
<tr> |
|
||||||
<th>시각</th> |
|
||||||
<th>날씨</th> |
|
||||||
<th>기온</th> |
|
||||||
<th>풍향</th> |
|
||||||
<th>풍속</th> |
|
||||||
</tr> |
|
||||||
</thead> |
|
||||||
<tbody> |
|
||||||
<tr> |
|
||||||
<td>10시</td> |
|
||||||
<td> |
|
||||||
<Sun /> |
|
||||||
</td> |
|
||||||
<td>27℃</td> |
|
||||||
<td> |
|
||||||
<Navigation2 className='rotate-45' /> |
|
||||||
</td> |
|
||||||
<td>2m/s</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>12시</td> |
|
||||||
<td> |
|
||||||
<CloudLightning /> |
|
||||||
</td> |
|
||||||
<td>30℃</td> |
|
||||||
<td> |
|
||||||
<Navigation2 className='rotate-75' /> |
|
||||||
</td> |
|
||||||
<td>3m/s</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>14시</td> |
|
||||||
<td> |
|
||||||
<Cloud /> |
|
||||||
</td> |
|
||||||
<td>28℃</td> |
|
||||||
<td> |
|
||||||
<Navigation2 className='rotate-90' /> |
|
||||||
</td> |
|
||||||
<td>4m/s</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>16시</td> |
|
||||||
<td> |
|
||||||
<CloudRain /> |
|
||||||
</td> |
|
||||||
<td>27℃</td> |
|
||||||
<td> |
|
||||||
<Navigation2 className='rotate-135' /> |
|
||||||
</td> |
|
||||||
<td>7m/s</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>18시</td> |
|
||||||
<td> |
|
||||||
<CloudSnow /> |
|
||||||
</td> |
|
||||||
<td>25℃</td> |
|
||||||
<td> |
|
||||||
<Navigation2 className='rotate-180' /> |
|
||||||
</td> |
|
||||||
<td>2m/s</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>20시</td> |
|
||||||
<td> |
|
||||||
<CloudDrizzle /> |
|
||||||
</td> |
|
||||||
<td>26℃</td> |
|
||||||
<td> |
|
||||||
<Navigation2 className='rotate-225' /> |
|
||||||
</td> |
|
||||||
<td>2m/s</td> |
|
||||||
</tr> |
|
||||||
</tbody> |
|
||||||
</Table> |
|
||||||
</div> |
|
||||||
) : ( |
|
||||||
<div className='tab-content active'> |
|
||||||
<Table responsive> |
|
||||||
<thead> |
|
||||||
<tr> |
|
||||||
<th>날짜</th> |
|
||||||
<th>날씨</th> |
|
||||||
<th>기온</th> |
|
||||||
</tr> |
|
||||||
</thead> |
|
||||||
<tbody> |
|
||||||
<tr> |
|
||||||
<td>06.19.(토) 오전</td> |
|
||||||
<td> |
|
||||||
<Sun /> |
|
||||||
</td> |
|
||||||
<td>최저 27℃</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>06.19.(토) 오후</td> |
|
||||||
<td> |
|
||||||
<CloudLightning /> |
|
||||||
</td> |
|
||||||
<td>30℃</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>06.20.(일) 오전</td> |
|
||||||
<td> |
|
||||||
<CloudLightning /> |
|
||||||
</td> |
|
||||||
<td>30℃</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>06.20.(일) 오후</td> |
|
||||||
<td> |
|
||||||
<CloudLightning /> |
|
||||||
</td> |
|
||||||
<td>30℃</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>06.21.(월) 오전</td> |
|
||||||
<td> |
|
||||||
<CloudLightning /> |
|
||||||
</td> |
|
||||||
<td>30℃</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>06.21.(월) 오후</td> |
|
||||||
<td> |
|
||||||
<CloudLightning /> |
|
||||||
</td> |
|
||||||
<td>30℃</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>06.22.(화) 오전</td> |
|
||||||
<td> |
|
||||||
<CloudLightning /> |
|
||||||
</td> |
|
||||||
<td>30℃</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>06.2.(화) 오후</td> |
|
||||||
<td> |
|
||||||
<CloudLightning /> |
|
||||||
</td> |
|
||||||
<td>30℃</td> |
|
||||||
</tr> |
|
||||||
</tbody> |
|
||||||
</Table> |
|
||||||
</div> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
export default WeatherList; |
|
Loading…
Reference in new issue