feat: 当前任务详情，相机模式，拍照录像，ui调整

罗广辉

2025-04-16 88a0986cdcb84b16ed63a88f8dbefb9aa44e7365

 src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/ControlPanel/ControlPanel.vue

@@ -34,7 +34,7 @@
         </div>

         <div class="speed">
            <el-icon class="btnIcon">
            <el-icon class="btnIcon" @click="speed = speed + 1">
               <Plus />
            </el-icon>
            <div>
@@ -42,7 +42,7 @@
               <br />
               m/s
            </div>
            <el-icon class="btnIcon">
            <el-icon class="btnIcon" @click="speed = speed - 1">
               <Minus />
            </el-icon>
         </div>
@@ -81,6 +81,7 @@
            <br />
            制
         </div>
         <div class="ptzControlBtnBox">
         <div class="ptzControlBtn b-r">
            <div v-for="(item, index) in list5" :style="item.style" class="ptzControlItem"></div>

@@ -101,6 +102,13 @@
               </div>
            </div>
         </div>
            <div class="videoBox" v-if="valueTime !== '00:00:00'">
               <div class="videoName">录像</div>
               <div class="videoPoint"></div>
               <div class="videoTime">{{ valueTime }}</div>
            </div>
         </div>

         <div class="divider"></div>
         <div v-for="arr in list4" class="info">
            <div v-for="item in arr" class="infoItem">
@@ -135,6 +143,7 @@
import controlCenterImg from '@/assets/images/taskManagement/taskIntermediateContent/controlCenter.png'
import BaseControl from '@/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/ControlPanel/BaseControl.vue'
import EventBus from '@/event-bus'
import dayjs from 'dayjs'

const deviceOsdInfo = inject('deviceOsdInfo')
const taskDetails = inject('taskDetails')
@@ -176,6 +185,9 @@

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,
@@ -183,25 +195,38 @@
   subTopic: '',
})
const flightController = ref(false)
console.log('控制面板')

const getStyle = item => {
   return {
      ...item.style,
   }
}

// 控制对象
let manualControl = {}

const sn = computed(() => deviceOsdInfo?.value?.data?.sn)
const isAutoControl = inject('isAutoControl')

const timeStart = () => {
   stop() // 避免重复启动
   timer = setInterval(() => {
      totalSeconds++
      const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0')
      const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0')
      const secs = String(totalSeconds % 60).padStart(2, '0')
      valueTime.value = `${hours}:${minutes}:${secs}`
   }, 1000)
}

const timeStop = () => {
   if (timer) {
      clearInterval(timer)
      timer = null
      totalSeconds = 0
      valueTime.value = '00:00:00'
   }
}

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

// 弹起操作
function onMouseUp() {
   console.log('弹起')
   manualControl?.resetControlState()
}

@@ -231,6 +256,7 @@
         deviceTopicInfo.value.pubTopic = data.pub[0]
      }
      ElMessage.success('控制成功')
      isAutoControl.value = false
   })
}

@@ -268,6 +294,15 @@
   }
}

// 返航或取消返航
const returnOrCancelReturn = () => {
   if (deviceOsdInfo.value?.data?.host?.mode_code === 9) {
      cancelBackDock()
   } else {
      onBackDock()
   }
}

watch(
   () => workspace_id.value,
   async () => {
@@ -279,25 +314,22 @@
   }
)

// 返航或取消返航
const returnOrCancelReturn = () => {
   if (deviceOsdInfo.value?.data?.host?.mode_code === 9) {
      cancelBackDock()
   } else {
      onBackDock()
   }
}

onMounted(async () => {
   EventBus.on('controlPanel-control', control)
   EventBus.on('controlPanel-cancelControl', cancelControl)
   EventBus.on('controlPanel-returnOrCancelReturn', returnOrCancelReturn)
   EventBus.on('controlPanel-onMouseDown', onMouseDown)
   EventBus.on('controlPanel-timeStart', timeStart)
   EventBus.on('controlPanel-timeStop', timeStop)
})

onBeforeUnmount(() => {
   EventBus.off('controlPanel-control', control)
   EventBus.off('controlPanel-cancelControl', cancelControl)
   EventBus.off('controlPanel-returnOrCancelReturn', returnOrCancelReturn)
   EventBus.off('controlPanel-onMouseDown', onMouseDown)
   EventBus.off('controlPanel-timeStart', timeStart)
   EventBus.off('controlPanel-timeStop', timeStop)
   destroyConnect()
})
</script>
@@ -399,6 +431,11 @@
      align-items: center;
      justify-content: space-evenly;

      .ptzControlBtnBox {
         display: flex;
         flex-direction: column;
         align-items: center;

      .ptzControlBtn {
         position: relative;
         overflow: hidden;
@@ -458,6 +495,35 @@
         }
      }

         .videoBox {
            display: flex;
            align-items: center;
            font-family: Segoe UI, Segoe UI;
            margin-top: 5px;

            .videoName {
               font-weight: 400;
               font-size: 12px;
               color: rgba(210, 232, 250, 0.57);
            }

            .videoPoint {
               width: 3px;
               height: 3px;
               background: #12ff7f;
               border-radius: 50%;
               margin: 0 5px;
            }

            .videoTime {
               font-weight: 400;
               font-size: 16px;
               color: #ffffff;
               line-height: 15px;
            }
         }
      }

      .divider {
         position: absolute;
         transform: translateX(90px);