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