|
|
@ -19,7 +19,8 @@ import { |
|
|
|
Badge, |
|
|
|
Badge, |
|
|
|
Table, |
|
|
|
Table, |
|
|
|
CustomInput, |
|
|
|
CustomInput, |
|
|
|
UncontrolledTooltip |
|
|
|
UncontrolledTooltip, |
|
|
|
|
|
|
|
Card |
|
|
|
} from 'reactstrap'; |
|
|
|
} from 'reactstrap'; |
|
|
|
import { |
|
|
|
import { |
|
|
|
Search, |
|
|
|
Search, |
|
|
@ -1035,6 +1036,47 @@ const DesignMain = () => { |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div className='pal-container'> |
|
|
|
<div className='pal-container'> |
|
|
|
|
|
|
|
<div className="main-data"> |
|
|
|
|
|
|
|
<div className='main-data-box wather-data'> |
|
|
|
|
|
|
|
<Card> |
|
|
|
|
|
|
|
<div className='data-box-header'> |
|
|
|
|
|
|
|
<span className='box-ti'>인천광역시</span> |
|
|
|
|
|
|
|
<span className=''><Sun size={20}/></span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div className='data-list-box'> |
|
|
|
|
|
|
|
<div className='data-list'> |
|
|
|
|
|
|
|
<span>기온</span> |
|
|
|
|
|
|
|
<span>11℃</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div className='data-list'> |
|
|
|
|
|
|
|
<span>풍향</span> |
|
|
|
|
|
|
|
<span><Navigation2 className="rotate-45 navigation-icon"/></span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div className='data-list'> |
|
|
|
|
|
|
|
<span>풍속</span> |
|
|
|
|
|
|
|
<span>1.2 m/s</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</Card> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div className='main-data-box flight-data'> |
|
|
|
|
|
|
|
<Card> |
|
|
|
|
|
|
|
<div className='data-box-header'> |
|
|
|
|
|
|
|
<span className='box-ti'>비행중인 기체</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div className='data-list-box'> |
|
|
|
|
|
|
|
<div className='data-list'> |
|
|
|
|
|
|
|
<span>드론</span> |
|
|
|
|
|
|
|
<span>165대</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div className='data-list'> |
|
|
|
|
|
|
|
<span>항공기</span> |
|
|
|
|
|
|
|
<span>2147대</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</Card> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div className='map'> |
|
|
|
<div className='map'> |
|
|
|
<MapControl /> |
|
|
|
<MapControl /> |
|
|
|
<span className='map-drone-icon'> |
|
|
|
<span className='map-drone-icon'> |
|
|
@ -1070,22 +1112,23 @@ const DesignMain = () => { |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
<div className='tooltip-test'> |
|
|
|
<div className='tooltip-test'> |
|
|
|
<div className='tooltip-box'> |
|
|
|
<div className='tooltip-box'> |
|
|
|
<div className='tooltip-ti'><span>로봇타워로봇타워로봇타워로봇타워로봇타워로봇타워로봇타워</span></div> |
|
|
|
{/* <div className='tooltip-ti'><span>로봇타워로봇타워로봇타워로봇타워로봇타워로봇타워로봇타워</span></div> */} |
|
|
|
<div className='tooltip-txt'> |
|
|
|
<div className='tooltip-txt'> |
|
|
|
<div className='tooltip-txt-list'> |
|
|
|
<div className='tooltip-txt-list'> |
|
|
|
<span className='ti'>고도</span> |
|
|
|
<span className='ti'>KAL1154</span> |
|
|
|
<span>167.05m</span> |
|
|
|
<span className='ti'>2667.4M37.123456123.121.123123</span> |
|
|
|
|
|
|
|
<span className='ti'>123.121.123123</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className='tooltip-txt-list'> |
|
|
|
{/* <div className='tooltip-txt-list'> |
|
|
|
<span className='ti'>좌표정보</span> |
|
|
|
<span className='ti'>좌표정보</span> |
|
|
|
<span>35.232600, 127.650225</span> |
|
|
|
<span>35.232600, 127.650225</span> |
|
|
|
</div> |
|
|
|
</div> */} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<span class="arrow"></span> |
|
|
|
{/* <span class="arrow"></span> */} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{/* 알림 위아래 롤링은 구현해주셔야되는데 따른 컴포넌트있으면 그거사용해도됩니다...제가 만들어논거는 45px씩 움직여주면되거든요..저도자세히는모르겠습니다...제이쿼리로만써봐서... */} |
|
|
|
|
|
|
|
<div className='notice'> |
|
|
|
<div className='notice'> |
|
|
|
<div className='notice-icon'> |
|
|
|
<div className='notice-icon'> |
|
|
|
<Bell size={20} /> |
|
|
|
<Bell size={20} /> |
|
|
|