pav
/
pav-home
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

관제메인data

ctrlDraw
김지은 2 years ago
parent
c09776fcad
commit
a8f5434e1b
2 changed files with 73 additions and 14 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      src/assets/css/custom.css
  2. 59
      src/views/design/DesignMain.js

26
src/assets/css/custom.css
Unescape View File

@ -405,14 +405,15 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon
}
.tooltip-test{position:absolute;left:500px;top:500px;}
.tooltip-box{background:#283046;padding:10px;border-radius:6px;position:relative;max-width: 180px;}
.tooltip-box div{text-align:left;font-size:13px;color:#bbb;}
.tooltip-box{background:#283046;padding:10px;border-radius:6px;position:relative;max-width:150px;word-break: break-all;}
/* .tooltip-box div{text-align:left;font-size:13px;} */
.tooltip-ti{border-bottom:1px solid #bbb;padding-bottom:4px;}
.tooltip-ti span, .tooltip-txt .ti{color:#f4f4f4;font-weight:500;display:block;}
.tooltip-txt{padding-top:4px;}
/* .tooltip-ti span, .tooltip-txt .ti{color:#f4f4f4;font-weight:400;} */
.tooltip-txt{color:#f4f4f4;font-weight:400;font-size:12px}
.tooltip-txt-list + .tooltip-txt-list{margin-top:4px;}
.tooltip-box .arrow {position:absolute;bottom:-10px;left:50%;transform: translateX(-50%);display:block;width: 0px;height: 0px;border-top:10px solid #283046;border-bottom:10px solid none;border-right: 10px solid transparent;border-left: 10px solid transparent;}
.tooltip-txt-list .ti:before{content:'/';margin:0 2px;}
.tooltip-txt-list .ti:first-child::before{display:none;}
/* 데이터블록 */
.dblock-box{background:#283046;padding:10px;border-radius:6px;position:relative;}
.dblock-box div{text-align:left;font-size:13px;color:#bbb;}
@ -820,3 +821,18 @@ background-size: 75% auto;
.pa-input-box{display:flex;}
.pa-input{width:48px;margin-right:8px;}
/*관제 메인 데이터들(날씨,비행정보)*/
.notice{display:none;}
.main-data{position:absolute;z-index: 999;top:10px;left:50%;transform: translateX(-50%);display:flex;font-size:0.875rem;}
.main-data-box + .main-data-box{margin-left:20px;}
.main-data-box .card{min-height:88px;margin:0;padding:10px 12px; background: #10163A;}
.box-ti{color: #f4f4f4;font-weight: 500;}
.data-box-header{display:flex;;align-items:center;justify-content: space-between;}
.data-box-header svg{color:#fff;}
.data-list-box{display:flex;margin:10px 0 4px 0;}
.data-list{background: #7367f0;border-radius: 5px;border: 1px solid #7367f0;display:flex;align-items: center;padding:0.4rem;}
.data-list + .data-list{margin-left:10px;}
.data-list span{font-size:0.8rem;color: #ddd;font-weight:400;}
.data-list span + span{margin-left:4px;}
.data-list .navigation-icon{width:16px;margin-top:-5px;margin-left:2px;}

59
src/views/design/DesignMain.js
Unescape View File

@ -19,7 +19,8 @@ import {
Badge,
Table,
CustomInput,
UncontrolledTooltip
UncontrolledTooltip,
Card
} from 'reactstrap';
import {
Search,
@ -1035,6 +1036,47 @@ const DesignMain = () => {
return (
<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'>
<MapControl />
<span className='map-drone-icon'>
@ -1070,22 +1112,23 @@ const DesignMain = () => {
</span>
<div className='tooltip-test'>
<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-list'>
<span className='ti'>고도</span>
<span>167.05m</span>
<span className='ti'>KAL1154</span>
<span className='ti'>2667.4M37.123456123.121.123123</span>
<span className='ti'>123.121.123123</span>
</div>
<div className='tooltip-txt-list'>
{/* <div className='tooltip-txt-list'>
<span className='ti'>좌표정보</span>
<span>35.232600, 127.650225</span>
</div> */}
</div>
</div>
<span class="arrow"></span>
{/* <span class="arrow"></span> */}
</div>
</div>
</div>
{/* 알림 위아래 롤링은 구현해주셔야되는데 따른 컴포넌트있으면 그거사용해도됩니다...제가 만들어논거는 45px씩 움직여주면되거든요..저도자세히는모르겠습니다...제이쿼리로만써봐서... */}
<div className='notice'>
<div className='notice-icon'>
<Bell size={20} />

Write Preview
Loading…
Cancel
Save