|
|
@ -29,7 +29,7 @@ import { setLogout } from '@src/redux/features/account/auth/authThunk'; |
|
|
|
import logo from '../../assets/images/logo/kac_logo_ icon.svg'; |
|
|
|
import logo from '../../assets/images/logo/kac_logo_ icon.svg'; |
|
|
|
import { AiOutlinePoweroff } from 'react-icons/ai'; |
|
|
|
import { AiOutlinePoweroff } from 'react-icons/ai'; |
|
|
|
import WebsocketClient from '../../components/websocket/WebsocketClient'; |
|
|
|
import WebsocketClient from '../../components/websocket/WebsocketClient'; |
|
|
|
import { Card, ButtonGroup, Button } from '@component/ui'; |
|
|
|
import { Card, ButtonGroup, Button, Input } from '@component/ui'; |
|
|
|
import { FiRotateCw, FiCornerUpLeft } from 'react-icons/fi'; |
|
|
|
import { FiRotateCw, FiCornerUpLeft } from 'react-icons/fi'; |
|
|
|
import { X } from 'react-feather'; |
|
|
|
import { X } from 'react-feather'; |
|
|
|
|
|
|
|
|
|
|
@ -91,6 +91,7 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
const totalAreaRef = useRef(null); |
|
|
|
const totalAreaRef = useRef(null); |
|
|
|
const mouseCursorRef = useRef(null); |
|
|
|
const mouseCursorRef = useRef(null); |
|
|
|
const distanceBoxRef = useRef(null); |
|
|
|
const distanceBoxRef = useRef(null); |
|
|
|
|
|
|
|
const [metersRadius, setMetersRadius] = useState('0m'); |
|
|
|
|
|
|
|
|
|
|
|
// 비행구역 (운항과) 레이어
|
|
|
|
// 비행구역 (운항과) 레이어
|
|
|
|
const operationLayer = { |
|
|
|
const operationLayer = { |
|
|
@ -359,6 +360,8 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
setSelected([area[0].planAreaSno]); |
|
|
|
setSelected([area[0].planAreaSno]); |
|
|
|
} |
|
|
|
} |
|
|
|
setSelectedPlanSno(area[0].planSno); |
|
|
|
setSelectedPlanSno(area[0].planSno); |
|
|
|
|
|
|
|
setMetersRadius('0m'); |
|
|
|
|
|
|
|
handlerDistanceClose(); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
setSelected([]); |
|
|
|
setSelected([]); |
|
|
|
setSelectedPlanSno([]); |
|
|
|
setSelectedPlanSno([]); |
|
|
@ -857,6 +860,79 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
총 거리 : 1050.24m |
|
|
|
총 거리 : 1050.24m |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p> |
|
|
|
|
|
|
|
{selectedPlanSno && |
|
|
|
|
|
|
|
drawObj.getMode() === 'simple_select' && ( |
|
|
|
|
|
|
|
<Input |
|
|
|
|
|
|
|
type='text' |
|
|
|
|
|
|
|
bsSize='sm' |
|
|
|
|
|
|
|
placeholder='반경을 입력해주세요' |
|
|
|
|
|
|
|
value={metersRadius} |
|
|
|
|
|
|
|
onKeyDown={e => { |
|
|
|
|
|
|
|
const input = e.target; |
|
|
|
|
|
|
|
const { value } = input; |
|
|
|
|
|
|
|
if (e.key === 'Backspace') { |
|
|
|
|
|
|
|
if (input.length > 2) { |
|
|
|
|
|
|
|
input.setSelectionRange( |
|
|
|
|
|
|
|
value.length - 2, |
|
|
|
|
|
|
|
value.length - 2 |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
input.setSelectionRange( |
|
|
|
|
|
|
|
value.length - 1, |
|
|
|
|
|
|
|
value.length - 1 |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} else if (e.key === 'Enter') { |
|
|
|
|
|
|
|
let val = value.replace(/[^\d.]/g, ''); |
|
|
|
|
|
|
|
if (!val) return; |
|
|
|
|
|
|
|
const sources = drawObj.getAll(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const option = { |
|
|
|
|
|
|
|
steps: 0, |
|
|
|
|
|
|
|
units: 'meters' |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
const rad = turf.circle( |
|
|
|
|
|
|
|
sources.features[0].geometry.coordinates[0], |
|
|
|
|
|
|
|
parseInt(val), |
|
|
|
|
|
|
|
option |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
drawObj.set({ |
|
|
|
|
|
|
|
type: 'FeatureCollection', |
|
|
|
|
|
|
|
features: [ |
|
|
|
|
|
|
|
{ ...sources.features[0] }, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
type: 'Feature', |
|
|
|
|
|
|
|
properties: {}, |
|
|
|
|
|
|
|
id: 'pal_Polygon_string', |
|
|
|
|
|
|
|
geometry: { ...rad.geometry } |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
onChange={e => { |
|
|
|
|
|
|
|
const target = e.target; |
|
|
|
|
|
|
|
const { value, selectionStart } = target; |
|
|
|
|
|
|
|
// const numericValue = value.replace(/[^\d.]/g, '');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setMetersRadius( |
|
|
|
|
|
|
|
value |
|
|
|
|
|
|
|
.replace(/^0+/, '') // 맨 앞의 0 제거
|
|
|
|
|
|
|
|
.replace(/[^\d.]/g, '') // 숫자가 아닌 문자 제거
|
|
|
|
|
|
|
|
.replace(/\B(?=(\d{3})+(?!\d))/g, ',') + 'm' |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
onBlur={() => { |
|
|
|
|
|
|
|
if (metersRadius === 'm') { |
|
|
|
|
|
|
|
setMetersRadius('0m'); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|