feat: 控制台相机控制

罗广辉

2025-04-17 b80dbbcb1340a5d02b2137efc9ff0e5d84c50647

 src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue

@@ -53,12 +53,12 @@
                  <el-icon class="btnIcon">
                     <Top />
                  </el-icon>
                  <div class="btn" @mousedown="onMouseDown(KeyCode.ARROW_UP)" @mouseup="onMouseUp">C</div>
                  <div class="btn" @mousedown="onMouseDown(KeyCode.KEY_C)" @mouseup="onMouseUp">C</div>
               </div>
            </div>
            <div class="btnGroupT">
               <div class="btnItem">
                  <div class="btn" @mousedown="onMouseDown(KeyCode.ARROW_DOWN)" @mouseup="onMouseUp">Z</div>
                  <div class="btn" @mousedown="onMouseDown(KeyCode.KEY_Z)" @mouseup="onMouseUp">Z</div>
                  <el-icon class="btnIcon">
                     <Bottom />
                  </el-icon>
@@ -66,7 +66,7 @@
            </div>
         </div>
      </div>

      <!--     指南针-->
      <div class="compass">
         <ControlComPass />
      </div>
@@ -83,7 +83,12 @@
         </div>
         <div class="ptzControlBtnBox">
            <div class="ptzControlBtn b-r">
               <div v-for="(item, index) in list5" :style="item.style" class="ptzControlItem"></div>
               <div
                  v-for="(item, index) in list5"
                  :style="item.style"
                  class="ptzControlItem"
                  @mousedown="onMouseDown(item.key)"
               ></div>

               <div
                  class="ptzControlItemIcon"
@@ -122,7 +127,7 @@
<script setup>
import ControlComPass from '../ControlComPass/ControlComPass.vue'
import { KeyCode, useManualControl } from '@/hooks/controlDrone/useManualControl'
import { droneController, exitController, postDrc, postDrcExit, returnHome, returnHomeCancel } from '@/api/drc'
import { droneController, exitController, postDrc, returnHome, returnHomeCancel } from '@/api/drc'
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'
import { UranusMqtt } from '@/mqtt'
@@ -133,23 +138,20 @@
   ArrowUp,
   Bottom,
   CaretRight,
   CaretTop,
   Minus,
   Plus,
   RefreshLeft,
   RefreshRight,
} from '@element-plus/icons-vue'

import controlCenterImg from '@/assets/images/taskManagement/taskIntermediateContent/controlCenter.png'
import BaseControl from '@/components/CurrentTaskDetails/ControlPanel/BaseControl.vue'
import EventBus from '@/event-bus'
import dayjs from 'dayjs'
import { getPayloadControlApi, ptzControlApi } from '@/api/payload'

const deviceOsdInfo = inject('deviceOsdInfo')
const taskDetails = inject('taskDetails')
const dockSn = inject('dockSn')
const droneSn = inject('droneSn')


const store = useStore()
let mqttState = null
@@ -157,7 +159,6 @@
const valueTime = ref('00:00:00')
let timer = null
let totalSeconds = 0


const workspace_id = computed(() => taskDetails?.value?.workspace_id)
const list1 = [
@@ -175,10 +176,10 @@
provide('speed',speed)

const list5 = [
   { name: '上', style: { top: '-70%' }, imgStyle: { top: '20%', left: '50%' } },
   { name: '右', style: { left: '70%' }, imgStyle: { right: '0', top: '50%' } },
   { name: '下', style: { top: '70%' }, imgStyle: { bottom: '0', left: '50%' } },
   { name: '左', style: { left: '-70%' }, imgStyle: { left: '20%', top: '50%' } },
   { name: '上', key: KeyCode.ARROW_UP, operate: 'up', style: { top: '-70%' } },
   { name: '右', key: KeyCode.ARROW_RIGHT, operate: 'right', style: { left: '70%' } },
   { name: '下', key: KeyCode.ARROW_DOWN, operate: 'down', style: { top: '70%' } },
   { name: '左', key: KeyCode.ARROW_LEFT, operate: 'left', style: { left: '-70%' } },
]

const list4 = [
@@ -193,8 +194,6 @@
      { name: '方向', value: '正北' },
   ],
]



const deviceTopicInfo = ref({
   pubTopic: '',
@@ -247,6 +246,13 @@
      .catch(e => {})
}

// 获得有效载荷控制
function getPayloadControl() {
   getPayloadControlApi({ sn: dockSn.value }).then(res => {
      ElMessage.success('成功获得有效载荷控制')
   })
}

// 手动控制
function control() {
   if (!client_id.value) return ElMessage.error('无人机不在空中，不能进入指挥飞行模式。')
@@ -261,6 +267,7 @@
         deviceTopicInfo.value.pubTopic = data.pub[0]
      }
      ElMessage.success('控制成功')
      getPayloadControl()
      isAutoControl.value = false
   })
}
@@ -311,6 +318,7 @@
// useManualControl里面用的参数
const paramsRef = computed(()=>({
   droneSn:droneSn.value,
   dockSn: dockSn.value,
   speed:speed.value,
}))

@@ -332,6 +340,7 @@
   EventBus.on('controlPanel-onMouseDown', onMouseDown)
   EventBus.on('controlPanel-timeStart', timeStart)
   EventBus.on('controlPanel-timeStop', timeStop)
   EventBus.on('controlPanel-getPayloadControl', getPayloadControl)
})

onBeforeUnmount(() => {
@@ -341,6 +350,7 @@
   EventBus.off('controlPanel-onMouseDown', onMouseDown)
   EventBus.off('controlPanel-timeStart', timeStart)
   EventBus.off('controlPanel-timeStop', timeStop)
   EventBus.off('controlPanel-getPayloadControl', getPayloadControl)
   destroyConnect()
})
</script>