gitadmin
/
tuoheng_lc_web_move_20240702
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 3 Wiki Activity
Labels Milestones
New Pull Request

#149 飞机虚拟控制器封装

Merged
zhangtao merged 2 commits from yanmeng into develop 1 year ago
Conversation 0 Commits 2 Files Changed 7
7 changed files with 626 additions and 3 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. +1
    -1
      .env.localhost
  2. +1
    -0
      src/assets/icon/keyboard.svg
  3. +1
    -0
      src/assets/icon/keyboard_active.svg
  4. +309
    -0
      src/components/clickController.vue
  5. +16
    -0
      src/utils/droneCommand.js
  6. +253
    -0
      src/views/dashboard/components/remoateSensing.vue
  7. +45
    -2
      src/views/dashboard/index.vue

+ 1
- 1
.env.localhost View File

@@ -11,4 +11,4 @@ VITE_PROXY = [["/api-local","https://lcxj-test.t-aaron.com/api"],["/api-mock","h
VITE_APP_GLOB_BASE_API = '/api-local'

# 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

@@ -0,0 +1 @@
<?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

@@ -0,0 +1 @@
<?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

@@ -0,0 +1,309 @@
<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

@@ -0,0 +1,16 @@
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

@@ -0,0 +1,253 @@
<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

@@ -2,6 +2,10 @@
<div class="basic">
<OneMap ref="Map" />
<Extend ref="extendRef" class="extend" @send="getmessage" />
<remoate-sensing
class="remoate-sensing-extrinsic"
@command="setCommandAndLog"
/>
</div>
</template>

@@ -10,9 +14,10 @@ import { useRouter } from 'vue-router'
import OneMap from './components/OneMap.vue'
import Extend from './components/Extend.vue'
import { ref, onMounted } from 'vue'
import RemoateSensing from './components/remoateSensing.vue'
export default {
name: 'HomePage',
components: { OneMap, Extend },
components: { RemoateSensing, OneMap, Extend },
setup(props) {
const router = useRouter()
const extendRef = ref()
@@ -23,19 +28,57 @@ export default {
const getmessage = (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(() => {
extendRef.value.handleClick(0)
})
return {
data,
toSystem,
extendRef,
getmessage,
Map
Map,
setCommandAndLog
}
}
}
</script>
<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{
height: calc(100vh - 80px);
.dashboard__top{

Write Preview
Loading…
Cancel
Save