|
|
@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'; |
|
|
|
|
|
|
|
|
|
|
|
import '../../../assets/css/custom.css'; |
|
|
|
import '../../../assets/css/custom.css'; |
|
|
|
import logo from '../../../assets/images/pal_logo.png'; |
|
|
|
import logo from '../../../assets/images/pal_logo.png'; |
|
|
|
|
|
|
|
import finevt_logo from '../../../assets/images/finevt_logo.png'; |
|
|
|
|
|
|
|
|
|
|
|
import { |
|
|
|
import { |
|
|
|
Sun, |
|
|
|
Sun, |
|
|
@ -42,6 +43,11 @@ const ControlMain = () => { |
|
|
|
const { controlGpCountDrone, controlGpCountFlight } = useSelector( |
|
|
|
const { controlGpCountDrone, controlGpCountFlight } = useSelector( |
|
|
|
state => state.controlGpCountState |
|
|
|
state => state.controlGpCountState |
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
// pav박람회 -> uam, 드론 구별을 위한 임시 코드
|
|
|
|
|
|
|
|
// (이 작업으로 고도화 하려면 추후에 서버에서 uam타입을 새로 더 받아 작업해야 함)
|
|
|
|
|
|
|
|
const [droneCount, setDroneCount] = useState(0); |
|
|
|
|
|
|
|
const [uamCount, setUamCount] = useState(0); |
|
|
|
|
|
|
|
|
|
|
|
const [alarm, setAlarm] = useState(false); |
|
|
|
const [alarm, setAlarm] = useState(false); |
|
|
|
const { user } = useSelector(state => state.authState); |
|
|
|
const { user } = useSelector(state => state.authState); |
|
|
|
const [oepnReportList, setOpenReportList] = useState(false); |
|
|
|
const [oepnReportList, setOpenReportList] = useState(false); |
|
|
@ -102,6 +108,20 @@ const ControlMain = () => { |
|
|
|
} |
|
|
|
} |
|
|
|
}, [isClickObject]); |
|
|
|
}, [isClickObject]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
if (controlGpCountDrone) { |
|
|
|
|
|
|
|
const uamCnt = controlGpCountDrone.filter(i => |
|
|
|
|
|
|
|
i.gps.objectId.includes('UAM') |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
const droneCnt = controlGpCountDrone.filter( |
|
|
|
|
|
|
|
i => !i.gps.objectId.includes('UAM') |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setUamCount(uamCnt.length); |
|
|
|
|
|
|
|
setDroneCount(droneCnt.length); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, [controlGpCountDrone]); |
|
|
|
|
|
|
|
|
|
|
|
const handlerClose = () => { |
|
|
|
const handlerClose = () => { |
|
|
|
setOpenReportList(true); |
|
|
|
setOpenReportList(true); |
|
|
|
dispatch(objectUnClickAction()); |
|
|
|
dispatch(objectUnClickAction()); |
|
|
@ -136,6 +156,7 @@ const ControlMain = () => { |
|
|
|
<img src={logo} width='80' /> |
|
|
|
<img src={logo} width='80' /> |
|
|
|
<span>PAL</span> |
|
|
|
<span>PAL</span> |
|
|
|
</h1> |
|
|
|
</h1> |
|
|
|
|
|
|
|
|
|
|
|
<ul className='left-menu-nav'> |
|
|
|
<ul className='left-menu-nav'> |
|
|
|
<li> |
|
|
|
<li> |
|
|
|
<button onClick={() => openMenu('reportList')}> |
|
|
|
<button onClick={() => openMenu('reportList')}> |
|
|
@ -163,6 +184,10 @@ const ControlMain = () => { |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
<ul className='left-menu-footer'> |
|
|
|
<ul className='left-menu-footer'> |
|
|
|
|
|
|
|
<li> |
|
|
|
|
|
|
|
<img src={finevt_logo} width='50' /> |
|
|
|
|
|
|
|
</li> |
|
|
|
|
|
|
|
|
|
|
|
<li> |
|
|
|
<li> |
|
|
|
<AiOutlinePoweroff |
|
|
|
<AiOutlinePoweroff |
|
|
|
size={25} |
|
|
|
size={25} |
|
|
@ -170,7 +195,9 @@ const ControlMain = () => { |
|
|
|
onClick={handlerLogout} |
|
|
|
onClick={handlerLogout} |
|
|
|
/> |
|
|
|
/> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
|
|
|
|
<li style={{ marginLeft: '8px' }}> |
|
|
|
<WebsocketClient /> |
|
|
|
<WebsocketClient /> |
|
|
|
|
|
|
|
</li> |
|
|
|
{/* socket_off = 클래스명 변경시 빨간색! 접속이 원할하지않을때 */} |
|
|
|
{/* socket_off = 클래스명 변경시 빨간색! 접속이 원할하지않을때 */} |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -185,7 +212,11 @@ const ControlMain = () => { |
|
|
|
<Card> |
|
|
|
<Card> |
|
|
|
<div className='data-box-header'> |
|
|
|
<div className='data-box-header'> |
|
|
|
<span className='box-ti'> |
|
|
|
<span className='box-ti'> |
|
|
|
{!isClickObject ? '인천광역시' : !controlDetail?.stAreaNm ? `${controlDetail?.res.area1} ${controlDetail?.res.area2} ${controlDetail?.res.area3} ${controlDetail?.res.landNm} ${controlDetail?.res.landNum} ` : controlDetail?.stAreaNm} |
|
|
|
{!isClickObject |
|
|
|
|
|
|
|
? '인천광역시' |
|
|
|
|
|
|
|
: !controlDetail?.stAreaNm |
|
|
|
|
|
|
|
? `${controlDetail?.res.area1} ${controlDetail?.res.area2} ${controlDetail?.res.area3} ${controlDetail?.res.landNm} ${controlDetail?.res.landNum} ` |
|
|
|
|
|
|
|
: controlDetail?.stAreaNm} |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
<span className=''> {weathericon()}</span> |
|
|
|
<span className=''> {weathericon()}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -233,11 +264,16 @@ const ControlMain = () => { |
|
|
|
<div className='data-list'> |
|
|
|
<div className='data-list'> |
|
|
|
<span>드론</span> |
|
|
|
<span>드론</span> |
|
|
|
{/* <span>{controlGpList ? controlGpList.length : 0}</span> */} |
|
|
|
{/* <span>{controlGpList ? controlGpList.length : 0}</span> */} |
|
|
|
<span> |
|
|
|
{/* <span> |
|
|
|
{controlGpCountDrone?.length > 0 |
|
|
|
{controlGpCountDrone?.length > 0 |
|
|
|
? controlGpCountDrone?.length |
|
|
|
? controlGpCountDrone?.length |
|
|
|
: 0} |
|
|
|
: 0} |
|
|
|
</span> |
|
|
|
</span> */} |
|
|
|
|
|
|
|
<span>{droneCount}</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div className='data-list'> |
|
|
|
|
|
|
|
<span>UAM</span> |
|
|
|
|
|
|
|
<span>{uamCount}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className='data-list'> |
|
|
|
<div className='data-list'> |
|
|
|
<span>항공기</span> |
|
|
|
<span>항공기</span> |
|
|
|