7 changed files with 626 additions and 3 deletions
+ 1
- 1
.env.localhost
View File
| VITE_APP_GLOB_BASE_API = '/api-local' | VITE_APP_GLOB_BASE_API = '/api-local' | ||||
| # mock base api | # mock base api | ||||
| VITE_APP_GLOB_BASE_API_MOCK = '/api-mock' | |||||
| VITE_APP_GLOB_BASE_API_MOCK = '/api-mock' |
+ 1
- 0
src/assets/icon/keyboard.svg
View File
| <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1643199049164" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2889" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M853.333333 213.333333l-682.666667 0c-47.146667 0-84.906667 38.186667-84.906667 85.333333l-0.426667 426.666667c0 47.146667 38.186667 85.333333 85.333333 85.333333l682.666667 0c47.146667 0 85.333333-38.186667 85.333333-85.333333l0-426.666667c0-47.146667-38.186667-85.333333-85.333333-85.333333zM469.333333 341.333333l85.333333 0 0 85.333333-85.333333 0 0-85.333333zM469.333333 469.333333l85.333333 0 0 85.333333-85.333333 0 0-85.333333zM341.333333 341.333333l85.333333 0 0 85.333333-85.333333 0 0-85.333333zM341.333333 469.333333l85.333333 0 0 85.333333-85.333333 0 0-85.333333zM298.666667 554.666667l-85.333333 0 0-85.333333 85.333333 0 0 85.333333zM298.666667 426.666667l-85.333333 0 0-85.333333 85.333333 0 0 85.333333zM682.666667 725.333333l-341.333333 0 0-85.333333 341.333333 0 0 85.333333zM682.666667 554.666667l-85.333333 0 0-85.333333 85.333333 0 0 85.333333zM682.666667 426.666667l-85.333333 0 0-85.333333 85.333333 0 0 85.333333zM810.666667 554.666667l-85.333333 0 0-85.333333 85.333333 0 0 85.333333zM810.666667 426.666667l-85.333333 0 0-85.333333 85.333333 0 0 85.333333z" p-id="2890" fill="#bfbfbf"></path></svg> |
+ 1
- 0
src/assets/icon/keyboard_active.svg
View File
| <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1643199049164" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2889" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M853.333333 213.333333l-682.666667 0c-47.146667 0-84.906667 38.186667-84.906667 85.333333l-0.426667 426.666667c0 47.146667 38.186667 85.333333 85.333333 85.333333l682.666667 0c47.146667 0 85.333333-38.186667 85.333333-85.333333l0-426.666667c0-47.146667-38.186667-85.333333-85.333333-85.333333zM469.333333 341.333333l85.333333 0 0 85.333333-85.333333 0 0-85.333333zM469.333333 469.333333l85.333333 0 0 85.333333-85.333333 0 0-85.333333zM341.333333 341.333333l85.333333 0 0 85.333333-85.333333 0 0-85.333333zM341.333333 469.333333l85.333333 0 0 85.333333-85.333333 0 0-85.333333zM298.666667 554.666667l-85.333333 0 0-85.333333 85.333333 0 0 85.333333zM298.666667 426.666667l-85.333333 0 0-85.333333 85.333333 0 0 85.333333zM682.666667 725.333333l-341.333333 0 0-85.333333 341.333333 0 0 85.333333zM682.666667 554.666667l-85.333333 0 0-85.333333 85.333333 0 0 85.333333zM682.666667 426.666667l-85.333333 0 0-85.333333 85.333333 0 0 85.333333zM810.666667 554.666667l-85.333333 0 0-85.333333 85.333333 0 0 85.333333zM810.666667 426.666667l-85.333333 0 0-85.333333 85.333333 0 0 85.333333z" p-id="2890" fill="#007AFF"></path></svg> |
+ 309
- 0
src/components/clickController.vue
View File
| <template> | |||||
| <div class="control" :style="{ width: 2 * outerRadius + 'rem', height: 2 * outerRadius + 'rem' }"> | |||||
| <div class="vertical common" :style="{ top: `${iconDistance || 12}rem` }"> | |||||
| <slot name="top"> | |||||
| <UpOutlined class="common" /> | |||||
| </slot> | |||||
| </div> | |||||
| <div class="horizontal common" :style="{ left: `${iconDistance || 12}rem` }"> | |||||
| <slot name="left"> | |||||
| <LeftOutlined class="common" /> | |||||
| </slot> | |||||
| </div> | |||||
| <div class="vertical common" :style="{ bottom: `${iconDistance || 12}rem` }"> | |||||
| <slot name="bottom"> | |||||
| <DownOutlined class="common" /> | |||||
| </slot> | |||||
| </div> | |||||
| <div class="horizontal common" :style="{ right: `${iconDistance || 12}rem` }"> | |||||
| <slot name="right"> | |||||
| <RightOutlined class="common" /> | |||||
| </slot> | |||||
| </div> | |||||
| <span v-if="lock"> | |||||
| <span | |||||
| v-for="item of 4" | |||||
| :key="item" | |||||
| class="divider" | |||||
| :style="{ transform: `rotate(${ 45 * (2 * item + 1) }deg) translateX(${innerRadius}rem)`,width: outerRadius - innerRadius + 'rem',}" | |||||
| /> | |||||
| </span> | |||||
| <div | |||||
| class="circle" | |||||
| :style="{ | |||||
| top: data.distanceY + 'rem', | |||||
| left: data.distanceX + 'rem', | |||||
| width: 2 * innerRadius + 'rem', | |||||
| height: 2 * innerRadius + 'rem', | |||||
| }" | |||||
| /> | |||||
| <div | |||||
| class="mask base" | |||||
| :style="{ | |||||
| width: 2 * outerRadius + 'rem', | |||||
| height: 2 * outerRadius + 'rem', | |||||
| }" | |||||
| @mousedown="mousedown" | |||||
| @mouseup="mouseup" | |||||
| /> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import { | |||||
| DownOutlined, | |||||
| UpOutlined, | |||||
| LeftOutlined, | |||||
| RightOutlined | |||||
| } from '@vicons/antd' | |||||
| import { computed, ref, toRaw, watch } from 'vue' | |||||
| // import { mapActions, mapGetters } from 'vuex' | |||||
| export default { | |||||
| components: { | |||||
| DownOutlined, | |||||
| UpOutlined, | |||||
| LeftOutlined, | |||||
| RightOutlined | |||||
| }, | |||||
| props: { | |||||
| lock: { | |||||
| type: Boolean, | |||||
| default() { | |||||
| return true | |||||
| } | |||||
| }, | |||||
| iconDistance: { | |||||
| type: Number, | |||||
| default() { | |||||
| return 7 / 136.6 | |||||
| } | |||||
| }, | |||||
| outerRadius: { | |||||
| type: Number, | |||||
| default() { | |||||
| return 60 / 136.6 | |||||
| } | |||||
| }, | |||||
| innerRadius: { | |||||
| type: Number, | |||||
| default() { | |||||
| return 15 / 136.6 | |||||
| } | |||||
| }, | |||||
| command: { | |||||
| type: Object, | |||||
| default() { | |||||
| return {} | |||||
| } | |||||
| }, | |||||
| keyboardMode: { | |||||
| type: Boolean, | |||||
| default() { | |||||
| return false | |||||
| } | |||||
| }, | |||||
| keyMap: { | |||||
| type: Object, | |||||
| default() { | |||||
| return { 38: 'up', 39: 'right', 40: 'down', 37: 'left' } | |||||
| } | |||||
| } | |||||
| }, | |||||
| setup(props, { emit }) { | |||||
| const data = ref({ | |||||
| direction: null, | |||||
| distanceX: 0, | |||||
| distanceY: 0, | |||||
| offsetX: 0, | |||||
| offsetY: 0, | |||||
| actualRemUnit: 0, | |||||
| keycode: null | |||||
| }) | |||||
| const circleDistance = computed(() => { | |||||
| return props.outerRadius - props.innerRadius | |||||
| }) | |||||
| data.value.distanceX = data.value.distanceY = circleDistance.value | |||||
| function keyup(e) { | |||||
| if (!props.keyboardMode || e.keyCode !== data.value.keyCode) return | |||||
| const keys = Object.keys(toRaw(props.keyMap)) | |||||
| if (keys.includes(e.keyCode + '')) { | |||||
| data.value.direction = null | |||||
| emit('endAction') | |||||
| } | |||||
| data.value.keyCode = null | |||||
| // this.updateRemoteControlling(false) | |||||
| document.removeEventListener('keyup', keyup) | |||||
| document.addEventListener('keydown', keydown) | |||||
| } | |||||
| function keydown(e) { | |||||
| // if (this.remoteControlling || !this.keyboardMode) return | |||||
| const direction = props.keyMap[e.keyCode] | |||||
| if (!direction) return | |||||
| // this.updateRemoteControlling(true) | |||||
| data.value.direction = direction | |||||
| data.value.keyCode = e.keyCode | |||||
| document.removeEventListener('keydown', keydown) | |||||
| document.addEventListener('keyup', keyup) | |||||
| } | |||||
| function mousedown(e) { | |||||
| if (props.keyboardMode) return | |||||
| data.value.actualRemUnit = parseFloat(document.documentElement.style.fontSize) || 4 | |||||
| const offset = e.target.parentNode.getBoundingClientRect() | |||||
| data.value.offsetX = offset.left / data.value.actualRemUnit | |||||
| data.value.offsetY = offset.top / data.value.actualRemUnit | |||||
| const x = e.clientX / data.value.actualRemUnit - props.outerRadius - data.value.offsetX | |||||
| const y = -(e.clientY / data.value.actualRemUnit - props.outerRadius - data.value.offsetY) | |||||
| let deg = getTanDeg(x, y) | |||||
| deg = deg === 360 ? 0 : deg | |||||
| const { resultX, resultY } = getBoundary( | |||||
| data.value.offsetX + props.outerRadius, | |||||
| data.value.offsetY + props.outerRadius, | |||||
| deg, | |||||
| e.clientX / data.value.actualRemUnit, | |||||
| e.clientY / data.value.actualRemUnit | |||||
| ) | |||||
| data.value.distanceX = resultX - props.innerRadius | |||||
| data.value.distanceY = resultY - props.innerRadius | |||||
| let direction | |||||
| if (deg > 45 && deg < 135) { | |||||
| direction = 'right' | |||||
| } else if (deg > 135 && deg < 225) { | |||||
| direction = 'down' | |||||
| } else if (deg > 225 && deg < 315) { | |||||
| direction = 'left' | |||||
| } else { | |||||
| direction = 'up' | |||||
| } | |||||
| data.value.direction = direction | |||||
| return deg | |||||
| } | |||||
| function mouseup() { | |||||
| if (props.keyboardMode) return | |||||
| data.value.distanceX = circleDistance.value | |||||
| data.value.distanceY = circleDistance.value | |||||
| data.value.direction = null | |||||
| emit('endAction') | |||||
| } | |||||
| function getTanDeg(x, y) { | |||||
| var result = Math.atan(x / y) / (Math.PI / 180) | |||||
| if (result <= 0) { | |||||
| if (y <= 0) { | |||||
| result += 180 | |||||
| } else { | |||||
| result += 360 | |||||
| } | |||||
| } else { | |||||
| if (y <= 0) { | |||||
| result += 180 | |||||
| } | |||||
| } | |||||
| return result | |||||
| } | |||||
| function getBoundary(radX, radY, deg, X, Y) { | |||||
| let resultX = X - radX | |||||
| let resultY = Y - radY | |||||
| const radian = (Math.PI * deg) / 180 | |||||
| const offsetX = circleDistance.value * Math.sin(radian) | |||||
| const offsetY = circleDistance.value * Math.cos(radian) | |||||
| if (Math.abs(offsetX) < Math.abs(resultX)) { | |||||
| resultX = offsetX | |||||
| resultY = -offsetY | |||||
| } | |||||
| if (deg === 0 || deg === 180) { | |||||
| if (Math.abs(offsetY) < Math.abs(resultY)) { | |||||
| resultX = offsetX | |||||
| resultY = -offsetY | |||||
| } | |||||
| } | |||||
| resultX += props.outerRadius | |||||
| resultY += props.outerRadius | |||||
| if (props.lock) { | |||||
| if ( | |||||
| (deg >= 0 && deg <= 45) || | |||||
| (deg >= 315 && deg <= 360) || | |||||
| (deg >= 135 && deg <= 225) | |||||
| ) { | |||||
| resultX = radX - data.value.offsetX | |||||
| } else { | |||||
| resultY = radY - data.value.offsetY | |||||
| } | |||||
| } | |||||
| return { | |||||
| resultX, | |||||
| resultY: resultY | |||||
| } | |||||
| } | |||||
| // computed: { | |||||
| // | |||||
| // // ...mapGetters(['remoteControlling']) | |||||
| // }, | |||||
| watch(() => data.value.direction, (newValue) => { | |||||
| if (newValue === null) return | |||||
| emit('executeAction', props.command[newValue]) | |||||
| }) | |||||
| watch(() => props.keyboardMode, (flag) => { | |||||
| if (flag) { | |||||
| document.addEventListener('keydown', keydown) | |||||
| } else { | |||||
| document.removeEventListener('keydown', keydown) | |||||
| } | |||||
| }) | |||||
| return { | |||||
| data, | |||||
| circleDistance, | |||||
| keyup, | |||||
| keydown, | |||||
| mouseup, | |||||
| mousedown, | |||||
| getTanDeg, | |||||
| getBoundary | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .control { | |||||
| position: relative; | |||||
| border-radius: 50%; | |||||
| background: #3f3f3f; | |||||
| color: rgba(255, 255, 255, 0.7); | |||||
| .common { | |||||
| width: 20px; | |||||
| color: #fff; | |||||
| font-size: 14px; | |||||
| z-index: 1; | |||||
| } | |||||
| .vertical { | |||||
| position: absolute; | |||||
| left: 50%; | |||||
| transform: translateX(-50%); | |||||
| } | |||||
| .horizontal { | |||||
| position: absolute; | |||||
| top: 50%; | |||||
| transform: translateY(-50%); | |||||
| } | |||||
| .divider { | |||||
| height: 1px; | |||||
| background: #333435; | |||||
| position: absolute; | |||||
| top: 50%; | |||||
| left: 50%; | |||||
| transform-origin: 0 50%; | |||||
| pointer-events: none; | |||||
| } | |||||
| .circle { | |||||
| position: absolute; | |||||
| border-radius: 50%; | |||||
| background: #121416; | |||||
| } | |||||
| .mask { | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 0; | |||||
| z-index: 5; | |||||
| } | |||||
| } | |||||
| </style> |
+ 16
- 0
src/utils/droneCommand.js
View File
| export default { | |||||
| hovering: { 'zhilin': '01' }, | |||||
| goBack: { 'zhilin': '03' }, | |||||
| endLanding: { 'zhilin': '02' }, | |||||
| movingToLeft: { 'yaogan': '04' }, | |||||
| movingToRight: { 'yaogan': '05' }, | |||||
| movingToForward: { 'yaogan': '06' }, | |||||
| MovingToBack: { 'yaogan': '07' }, | |||||
| rising: { 'yaogan': '08' }, | |||||
| falling: { 'yaogan': '09' }, | |||||
| rollingToLeft: { 'yaogan': '10' }, | |||||
| rollingToRight: { 'yaogan': '11' }, | |||||
| stopAction: { 'yaogan': '12' }, | |||||
| excuteTask: { 'zhilin': '04' }, | |||||
| environmentCheck: { 'zhilin': '05' } | |||||
| } |
+ 253
- 0
src/views/dashboard/components/remoateSensing.vue
View File
| <template> | |||||
| <div class="remoate-sensing"> | |||||
| <div class="keyboard-mode"> | |||||
| <svg-icon | |||||
| class="keyboard" | |||||
| :icon-class="data.keyboardMode ? 'keyboard_active' : 'keyboard'" | |||||
| @click="changeMode" | |||||
| /> | |||||
| </div> | |||||
| <div class="height-controller base-extrinsic"> | |||||
| <click-controller | |||||
| :lock="true" | |||||
| :outerRadius="40 / data.remUnit" | |||||
| :innerRadius="8 / data.remUnit" | |||||
| :command="{ left: 'movingToLeft', right: 'movingToRight', down: 'falling', up: 'rising' }" | |||||
| :keyboard-mode="data.keyboardMode" | |||||
| :key-map="{ 87: 'up', 68: 'right', 83: 'down', 65: 'left' }" | |||||
| @endAction="endCommand" | |||||
| @executeAction="executeCommand" | |||||
| > | |||||
| <template #right> | |||||
| <RedoOutlined /> | |||||
| </template> | |||||
| <template #left> | |||||
| <UndoOutlined /> | |||||
| </template> | |||||
| </click-controller> | |||||
| <div class="title">高度控制</div> | |||||
| </div> | |||||
| <div class="displacement-controller base-extrinsic"> | |||||
| <click-controller | |||||
| :lock="true" | |||||
| :outer-radius="40 / data.remUnit" | |||||
| :inner-radius="8 / data.remUnit" | |||||
| :command="{ left: 'rollingToLeft', right: 'rollingToRight', down: 'MovingToBack', up: 'movingToForward' }" | |||||
| :keyboard-mode="data.keyboardMode" | |||||
| :key-map="{ 38: 'up', 39: 'right', 40: 'down', 37: 'left' }" | |||||
| @endAction="endCommand" | |||||
| @executeAction="executeCommand" | |||||
| /> | |||||
| <div class="title">平移控制</div> | |||||
| </div> | |||||
| <div class="pwm"> | |||||
| <n-row :align="'middle'"> | |||||
| <n-col :span="7"> | |||||
| <span>上升:</span> | |||||
| </n-col> | |||||
| <n-col :span="17"> | |||||
| <n-input-number v-model:value="data.pwm.up" size="tiny" :bordered="false" /> | |||||
| </n-col> | |||||
| </n-row> | |||||
| <n-row :align="'middle'"> | |||||
| <n-col :span="7"> | |||||
| <span>下降:</span> | |||||
| </n-col> | |||||
| <n-col :span="17"> | |||||
| <n-input-number v-model:value="data.pwm.down" size="tiny" /> | |||||
| </n-col> | |||||
| </n-row> | |||||
| <n-row :align="'middle'"> | |||||
| <n-col :span="7"> | |||||
| <span>平移:</span> | |||||
| </n-col> | |||||
| <n-col :span="17"> | |||||
| <n-input-number v-model:value="data.pwm.translating" size="tiny" /> | |||||
| </n-col> | |||||
| </n-row> | |||||
| <n-row :align="'middle'"> | |||||
| <n-col :span="7"> | |||||
| <span>自旋:</span> | |||||
| </n-col> | |||||
| <n-col :span="17"> | |||||
| <n-input-number v-model:value="data.pwm.rotating" size="tiny" /> | |||||
| </n-col> | |||||
| </n-row> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import ClickController from '../../../components/clickController.vue' | |||||
| import { RedoOutlined, UndoOutlined } from '@vicons/antd' | |||||
| import { ArrowUpCircleOutline, ArrowDownCircleOutline } from '@vicons/ionicons5' | |||||
| import droneCommand from '../../../utils/droneCommand' | |||||
| import { ref } from 'vue' | |||||
| const remoateSensing = { | |||||
| rollingToRight: '无人机右移', | |||||
| movingToForward: '无人机前进', | |||||
| MovingToBack: '无人机后退', | |||||
| rollingToLeft: '无人机左移', | |||||
| rising: '无人机爬升', | |||||
| falling: '无人机下降', | |||||
| movingToLeft: '无人机左旋', | |||||
| movingToRight: '无人机右移' | |||||
| } | |||||
| export default { | |||||
| components: { | |||||
| ClickController, | |||||
| RedoOutlined, | |||||
| UndoOutlined | |||||
| }, | |||||
| inject: ['droneInfo'], | |||||
| emits: ['endCommand', 'executeCommand'], | |||||
| setup(props, { emit }) { | |||||
| const data = ref({ | |||||
| remUnit: parseFloat(document.documentElement.style.fontSize) || 4, | |||||
| keyboardMode: false, | |||||
| height: 5, | |||||
| pwm: { | |||||
| up: 200, | |||||
| down: 50, | |||||
| rotating: 75, | |||||
| translating: 100 | |||||
| }, | |||||
| action: '' | |||||
| }) | |||||
| function changeMode() { | |||||
| data.value.keyboardMode = !data.value.keyboardMode | |||||
| } | |||||
| function endCommand() { | |||||
| emit('command', { order: droneCommand.stopAction, msg: '停止' + remoateSensing[data.value.action] + '操作' }) | |||||
| } | |||||
| function executeCommand(action) { | |||||
| const command = droneCommand[action] | |||||
| if (action === 'rising') { | |||||
| command.PWM = data.value.pwm.up | |||||
| } else if (action === 'falling') { | |||||
| command.PWM = data.value.pwm.down | |||||
| } else if (action === 'movingToLeft' || action === 'movingToRight') { | |||||
| command.PWM = data.value.pwm.rotating | |||||
| } else { | |||||
| command.PWM = data.value.pwm.translating | |||||
| } | |||||
| data.value.action = action | |||||
| emit('command', { order: command, msg: remoateSensing[action] + '(' + command.PWM + ')' }) | |||||
| } | |||||
| function fixedHeight() { | |||||
| if (!data.value.height) return | |||||
| emit('command', { order: { toAlt: data.value.height }, msg: '飞行至' + data.value.height + 'M高度' }) | |||||
| } | |||||
| return { | |||||
| data, | |||||
| changeMode, | |||||
| endCommand, | |||||
| executeCommand, | |||||
| fixedHeight, | |||||
| ArrowUpCircleOutline, | |||||
| ArrowDownCircleOutline | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .remoate-sensing { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| font-size:12PX; | |||||
| pointer-events: auto; | |||||
| .fixed-height { | |||||
| // padding: 5px; | |||||
| // width: 180px; | |||||
| flex: 1; | |||||
| height: 100%; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: space-between; | |||||
| .title { | |||||
| color: #fff; | |||||
| } | |||||
| .height { | |||||
| margin-top: 10px; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| div { | |||||
| color: #fff; | |||||
| } | |||||
| } | |||||
| .btn { | |||||
| cursor: pointer; | |||||
| font-size: 14px; | |||||
| height: 26px; | |||||
| width: 80px; | |||||
| margin-top: 15px; | |||||
| appearance: none; | |||||
| outline: none; | |||||
| background: #007aff; | |||||
| border: none; | |||||
| color: #fff; | |||||
| } | |||||
| } | |||||
| .base-extrinsic { | |||||
| height: 100%; | |||||
| width: 86px; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| justify-content: space-around; | |||||
| .title { | |||||
| color: #fff; | |||||
| } | |||||
| } | |||||
| .pwm { | |||||
| height: 100%; | |||||
| width: 120px; | |||||
| color: #fff; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: space-evenly; | |||||
| margin-right: 10px; | |||||
| .ant-row.ant-row-middle{ | |||||
| margin-bottom: 3px; | |||||
| } | |||||
| span { | |||||
| color: #fff; | |||||
| } | |||||
| } | |||||
| .keyboard { | |||||
| height: 40px; | |||||
| width: 40px; | |||||
| cursor: pointer; | |||||
| } | |||||
| input,.ant-input-number { | |||||
| background: #3b3e45; | |||||
| border: none; | |||||
| outline: none !important; | |||||
| width: 80px; | |||||
| height: 20px; | |||||
| margin-right: 2px; | |||||
| color: #fff; | |||||
| box-shadow: none; | |||||
| font-size: 12px; | |||||
| padding: 0 5px; | |||||
| box-sizing: border-box; | |||||
| &::selection { | |||||
| background: transparent; | |||||
| } | |||||
| &::-moz-selection { | |||||
| background: #fff; | |||||
| } | |||||
| &:focus { | |||||
| outline: none; | |||||
| background-color: #3b3e45; | |||||
| } | |||||
| } | |||||
| .ant-input-number-input{ | |||||
| height:20px; | |||||
| } | |||||
| } | |||||
| </style> |
+ 45
- 2
src/views/dashboard/index.vue
View File
| <div class="basic"> | <div class="basic"> | ||||
| <OneMap ref="Map" /> | <OneMap ref="Map" /> | ||||
| <Extend ref="extendRef" class="extend" @send="getmessage" /> | <Extend ref="extendRef" class="extend" @send="getmessage" /> | ||||
| <remoate-sensing | |||||
| class="remoate-sensing-extrinsic" | |||||
| @command="setCommandAndLog" | |||||
| /> | |||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| import OneMap from './components/OneMap.vue' | import OneMap from './components/OneMap.vue' | ||||
| import Extend from './components/Extend.vue' | import Extend from './components/Extend.vue' | ||||
| import { ref, onMounted } from 'vue' | import { ref, onMounted } from 'vue' | ||||
| import RemoateSensing from './components/remoateSensing.vue' | |||||
| export default { | export default { | ||||
| name: 'HomePage', | name: 'HomePage', | ||||
| components: { OneMap, Extend }, | |||||
| components: { RemoateSensing, OneMap, Extend }, | |||||
| setup(props) { | setup(props) { | ||||
| const router = useRouter() | const router = useRouter() | ||||
| const extendRef = ref() | const extendRef = ref() | ||||
| const getmessage = (data) => { | const getmessage = (data) => { | ||||
| Map.value.addPonit(data) | Map.value.addPonit(data) | ||||
| } | } | ||||
| const data = ref({ | |||||
| currentDroneInfo: { | |||||
| auth: 1, | |||||
| ground_station_url: 'xxxxxxxxxxxxxxx' | |||||
| } | |||||
| }) | |||||
| function setCommandAndLog(params, errorMsg) { | |||||
| // 权限认证 | |||||
| if (data.value.currentDroneInfo.auth === 1) { | |||||
| $message.warning('用户无该机场操作权限！') | |||||
| return | |||||
| } | |||||
| const base = { sid: data.value.currentDroneInfo.ground_station_url } | |||||
| return this.$http.post('/airportControl/droneCommand', Object.assign(params, base)).then(res => { | |||||
| if (res.data.code === 0) { | |||||
| const data = res.data.data | |||||
| if (data.value) { | |||||
| // this.logList.unshift({ value: data.value, createTime: data.createTime, status: data.status, id: Date.now() }) | |||||
| } | |||||
| return data | |||||
| } else { | |||||
| $message.error(errorMsg || res.data.msg) | |||||
| } | |||||
| }).catch(e => { | |||||
| $message.error(errorMsg || e.message) | |||||
| }) | |||||
| } | |||||
| onMounted(() => { | onMounted(() => { | ||||
| extendRef.value.handleClick(0) | extendRef.value.handleClick(0) | ||||
| }) | }) | ||||
| return { | return { | ||||
| data, | |||||
| toSystem, | toSystem, | ||||
| extendRef, | extendRef, | ||||
| getmessage, | getmessage, | ||||
| Map | |||||
| Map, | |||||
| setCommandAndLog | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .remoate-sensing-extrinsic { | |||||
| height: 120px; | |||||
| // width: 50%; | |||||
| position: absolute; | |||||
| bottom: 10%; | |||||
| left: 50%; | |||||
| transform: translateX(-50%); | |||||
| background: rgba(0, 0, 0, 0.8); | |||||
| } | |||||
| .dashboard__main{ | .dashboard__main{ | ||||
| height: calc(100vh - 80px); | height: calc(100vh - 80px); | ||||
| .dashboard__top{ | .dashboard__top{ |
Loading…