Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-...

chenyao

2025-04-17 2ddedb48ebcb4952e57aefe2fa0b2ba8094ea4c0

 src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue

@@ -147,9 +147,19 @@

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


const store = useStore()
let mqttState = null
const client_id = ref('')
const valueTime = ref('00:00:00')
let timer = null
let totalSeconds = 0


const workspace_id = computed(() => taskDetails?.value?.workspace_id)
const dock_sn = computed(() => taskDetails.value.device_sns[0])
const list1 = [
   { key: KeyCode.KEY_Q, text: 'Q', icon: RefreshLeft },
   { key: KeyCode.KEY_W, text: 'W', icon: ArrowUp },
@@ -162,6 +172,7 @@
]

const speed = ref(5)
provide('speed',speed)

const list5 = [
   { name: '上', style: { top: '-70%' }, imgStyle: { top: '20%', left: '50%' } },
@@ -183,21 +194,15 @@
   ],
]

let mqttState = null
const client_id = ref('')
const valueTime = ref('00:00:00')
let timer = null
let totalSeconds = 0


const deviceTopicInfo = ref({
   sn: deviceOsdInfo.value?.data?.sn,
   pubTopic: '',
   subTopic: '',
})
const flightController = ref(false)
// 控制对象
let manualControl = {}
const sn = computed(() => deviceOsdInfo?.value?.data?.sn)
const isAutoControl = inject('isAutoControl')

const timeStart = () => {
@@ -222,7 +227,7 @@

// 按下操作
function onMouseDown(type) {
   manualControl?.handleKeyup(type, { sn: sn.value, speed: speed.value })
   manualControl?.handleKeyup(type)
}

// 弹起操作
@@ -232,7 +237,7 @@

// 取消手动控制
function cancelControl() {
   exitController({ client_id: client_id.value, dock_sn: dock_sn.value })
   exitController({ client_id: client_id.value, dock_sn: dockSn.value })
      .then(res => {
         flightController.value = false
         deviceTopicInfo.value.subTopic = ''
@@ -245,8 +250,8 @@
// 手动控制
function control() {
   if (!client_id.value) return ElMessage.error('无人机不在空中，不能进入指挥飞行模式。')
   if (!dock_sn.value) return ElMessage.error('系统错误，未获取到dock_sn')
   droneController({ client_id: client_id.value, dock_sn: dock_sn.value }).then(res => {
   if (!dockSn.value) return ElMessage.error('系统错误，未获取到dock_sn')
   droneController({ client_id: client_id.value, dock_sn: dockSn.value }).then(res => {
      flightController.value = true
      const { data } = res.data
      if (data.sub && data.sub?.length > 0) {
@@ -262,14 +267,14 @@

// 返航
function onBackDock() {
   returnHome(dock_sn.value).then(res => {
   returnHome(dockSn?.value).then(res => {
      ElMessage.success('返航操作成功')
   })
}

// 取消返航
function cancelBackDock() {
   returnHomeCancel({ client_id: this.clientId, dock_sn: this.sn }).then(res => {
   returnHomeCancel(dockSn?.value).then(res => {
      ElMessage.success('取消返航成功')
   })
}
@@ -303,13 +308,19 @@
   }
}

// useManualControl里面用的参数
const paramsRef = computed(()=>({
   droneSn:droneSn.value,
   speed:speed.value,
}))

watch(
   () => workspace_id.value,
   async () => {
      if (workspace_id.value) {
         await createConnect()
         // 使用控制
         manualControl = useManualControl(mqttState, deviceTopicInfo.value, flightController)
         manualControl = useManualControl(mqttState, deviceTopicInfo.value, flightController,paramsRef)
      }
   }
)
@@ -358,7 +369,7 @@
   position: absolute;
   bottom: 0;
   right: 0;
   width: 1540px;
   width: 1400px;
   height: 217px;
   background: linear-gradient(196deg, rgba(23, 23, 23, 0.11) 0%, rgba(6, 6, 6, 0.11) 100%);
   backdrop-filter: blur(5px);
@@ -371,7 +382,7 @@
   pointer-events: all;

   .direction {
      width: 476px;
      width: 400px;
      height: 188px;
      background: rgb(0, 0, 0, 0.4); /* 半透明背景 */
      border-radius: 40px 40px 40px 40px;
@@ -386,7 +397,7 @@

         .btnGroupT,
         .btnGroupB {
            width: 238px;
            width: 180px;
            height: 73px;
         }
      }
@@ -423,7 +434,7 @@
   }

   .ptzControlBox {
      width: 406px;
      width: 386px;
      height: 188px;
      background: rgb(0, 0, 0, 0.4); /* 半透明背景 */
      border-radius: 40px 40px 40px 40px;
@@ -536,7 +547,7 @@
         display: flex;
         flex-direction: column;
         gap: 7px 0;
         width: 70px;
         width: 60px;

         .infoName {
            height: 25px;
@@ -574,8 +585,7 @@
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
      gap: 0 45px;
      justify-content: space-evenly;

      .btnItem {
         .btnIcon {