Merge branch 'master' of http://139.196.74.78:10010/r/drone/pilot-h5

zhongrj

2025-03-28 4ff3eee77b41466d08117970970d01be6e48ffe1

 src/views/components/ptzControl.vue

@@ -1,9 +1,9 @@
<template>
  <div class="ptz-control">
    <div class="ptz" :class="isPtz?'actived-blue':''">
      <img src="@/assets/images/yt.png" @touchstart="ptzClick" />
    </div>
    <div class="btn-group">
      <div class="btn-item" :class="isPtz?'actived-blue':''" @touchstart="ptzClick">
        <img src="@/assets/images/yt.png" />
      </div>
      <div class="btn-item" @touchstart="onTakeCameraPhoto">
        <img src="@/assets/images/photo.png" />
      </div>
@@ -14,21 +14,21 @@
        <img src="@/assets/images/sx-close.png"/>
      </div>
      <div class="btn-item" @touchstart="onZoom(true)">
        <img src="@/assets/images/fang.png" />
        <img src="@/assets/images/fangda.png" />
      </div>
      <div class="btn-item" @touchstart="onZoom(false)">
        <img src="@/assets/images/suo.png" />
        <img src="@/assets/images/suoxiao.png" />
      </div>
      <!-- <div class="btn-item">
        <img v-if="!isBigVideo" src="@/assets/images/fang.png" @touchstart="changeModelVideo(true)" />
        <img v-else src="@/assets/images/suo.png" @touchstart="changeModelVideo(false)" />
      </div> -->
    </div>
    <div class="circle-box" v-show="isPtz">
      <div class="top" @click="ytClick('up')" @mousedown="onMouseDown(KeyCode.ARROW_UP)" @mouseup="onMouseUp"
        @touchstart="onMouseDown(KeyCode.ARROW_UP)" @touchend="onMouseUp" @mouseleave="onMouseUp"></div>
      <div class="left" @click="ytClick('left')" @mousedown="onMouseDown(KeyCode.ARROW_LEFT)" @mouseup="onMouseUp"
        @touchstart="onMouseDown(KeyCode.ARROW_LEFT)" @touchend="onMouseUp" @mouseleave="onMouseUp"></div>
      <div class="bottom" @click="ytClick('down')" @mousedown="onMouseDown(KeyCode.ARROW_DOWN)" @mouseup="onMouseUp"
        @touchstart="onMouseDown(KeyCode.ARROW_DOWN)" @touchend="onMouseUp" @mouseleave="onMouseUp"></div>
      <div class="right" @click="ytClick('right')" @mousedown="onMouseDown(KeyCode.ARROW_RIGHT)" @mouseup="onMouseUp"
        @touchstart="onMouseDown(KeyCode.ARROW_RIGHT)" @touchend="onMouseUp" @mouseleave="onMouseUp"></div>
      <div class="top" @click="ytClick('up')"></div>
      <div class="left" @click="ytClick('left')"></div>
      <div class="bottom" @click="ytClick('down')"></div>
      <div class="right" @click="ytClick('right')"></div>
      <div class="reset-center" @click="onResetGimbal(0)">
        <el-icon><Refresh /></el-icon>
      </div>
@@ -38,7 +38,7 @@
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { showNotify } from 'vant';
import { Refresh } from '@element-plus/icons-vue';
import { ControlSource, EModeCode } from '@/types/device'
import { CameraMode } from '@/types/live-stream'
@@ -47,7 +47,10 @@
import { switchLivestream } from '@/api/drone'
import { usePayloadControl } from './use-payload-control'
import { useDroneControlWsEvent } from '@/utils/websocket/drone-ws-control'
import cesiumOperation from '@/utils/cesium-tsa.js';
import { useMyStore } from '@/store'

const { loadLAYER } = cesiumOperation()

const {
  checkPayloadAuth,
@@ -68,8 +71,16 @@
  osdVisible: {
    type: Object,
    required: true,
  },
  cesiumViewe: {
    type: Object,
    required: true,
  }
});
const emitEvents = defineEmits(['changeModelVideo'])

// 放大和缩小
// let isBigVideo = ref<Boolean>(false)

// 录像
let isCameraRecording = ref<Boolean>(false)
@@ -89,6 +100,9 @@

// 是否显示云台图标
let isPtz = ref(false)

// 显示高德地图矢量还是影像(2D/3D)
// let is2d = ref(true)

let yaw_speed = ref((payloadCameraMode.value == 'wide'? 1 : Math.ceil(zoom_factor.value))*10) // 云台横向角度
let pitch_speed = ref((payloadCameraMode.value == 'wide'? 1 : Math.ceil(zoom_factor.value))*10) // 云台纵向角度
@@ -148,11 +162,11 @@
  }

  if (isActionComplete.value) {
    ElMessage.warning('当前相机动作暂未完成，请勿点击！！')
    showNotify({ type: 'warning', message: '当前相机动作暂未完成，请勿点击！' })
    return
  }
  if (payloadSelectInfo.camera?.recording_state) {
    ElMessage.warning('当前摄像头正在录制视频，请先结束视频录制！！')
    showNotify({ type: 'warning', message: '当前摄像头正在录制视频，请先结束视频录制' })
    return
  }

@@ -176,7 +190,7 @@
const curTaskCameraPhoto =  (time:any) => {
  isActionComplete.value = true

  ElMessage({
  showNotify({
    message: '请稍后，正在拍摄中。。。',
    duration: 2000,
  })
@@ -216,27 +230,24 @@
  authPayload(props.osdVisible.dockSn, payloadSelectInfo.payloadIndex).then(
    (payloadRes:any) => {
      if (payloadRes.code !== 0)
        return ElMessage.error('获得有效载荷控制失败，请稍后重试！！')
        return showNotify({ type: 'danger', message: '获得有效载荷控制失败，请稍后重试！' })
      payloadControlSource.value = ControlSource.A
      ElMessage.success('成功获得有效载荷控制')
      showNotify({ type: 'success', message: '成功获得有效载荷控制' })
    },
  )
}
// 开始录像
const onStartCameraRecording = () => {
  console.log('设施',payloadSelectInfo.controlSource)
  if (!checkPayloadAuth(payloadSelectInfo.controlSource)) {
    return
  }
  if (isActionComplete.value) {
    ElMessage.warning('当前相机动作暂未完成，请勿点击！！')
    showNotify({ type: 'warning', message: '当前相机动作暂未完成，请勿点击！' })
    return
  }

  if (payloadSelectInfo.camera?.recording_state) {
    return ElMessage.warning(
      '当前摄像头正在录制视频，请勿重复点击！！',
    )
    return showNotify({ type: 'warning', message: '当前摄像头正在录制视频，请勿重复点击！' })
  }

  if (payloadSelectInfo.camera?.camera_mode !== CameraMode.Video) {
@@ -259,7 +270,7 @@
  const curStartCameraRecording = (time:any) => {
    isActionComplete.value = true

    ElMessage({
    showNotify({
      message: '请稍后，正在开启视频录制。。。',
      duration: 2000,
    })
@@ -268,8 +279,8 @@
      startCameraRecording(props.osdVisible.dockSn, payloadSelectInfo.payloadIndex)
        .then((res) => {
          if (res.code !== 0)
            return ElMessage.warning('开始录制失败，请稍后重试！！')
          ElMessage.success('开始录制成功')
            return showNotify({ type: 'warning', message: '开始录制失败，请稍后重试！' })
          showNotify({ type: 'success', message: '开始录制成功！' })
          // 开始录像
          isCameraRecording.value = true
          isActionComplete.value = false
@@ -285,15 +296,15 @@
    return
  }
  if (isActionComplete.value) {
    ElMessage.warning('当前相机动作暂未完成，请勿点击！！')
    showNotify({ type: 'warning', message: '当前相机动作暂未完成，请勿点击！' })
    return
  }
  isActionComplete.value = true
  stopCameraRecording(props.osdVisible.dockSn, payloadSelectInfo.payloadIndex)
    .then((res) => {
      if (res.code !== 0)
        return ElMessage.warning('停止录制失败，请稍后重试！！')
      ElMessage.success('停止录制成功')
        return showNotify({ type: 'warning', message: '停止录制失败，请稍后重试！' })
      showNotify({ type: 'success', message: '停止录制成功' })
      // 停止录像
      isCameraRecording.value = false
      isActionComplete.value = false
@@ -316,7 +327,6 @@
    if (zoom_factor.value <= 2) {
      zoom_factor.value = 2
    }
    console.log('9999', zoom_factor.value)
  }
  switchLivestream({
    video_id: `${props.osdVisible.dockSn}/${payloadSelectInfo.payloadIndex}/normal-0`,
@@ -331,6 +341,12 @@
      }, value)
  })
}

// const onChangeD = () => {
//   is2d.value = !is2d.value
//   store.commit('SET_MAP_SETTING_MODE', is2d.value?2:3);
//   loadLAYER();
// }

// 重置云台角度
const onResetGimbal = async (resetMode:any) => {
@@ -373,40 +389,20 @@
  } 
}

// 视频大小的缩放
// const changeModelVideo = (value:Boolean) => {
//   isBigVideo.value = value
//   emitEvents('changeModelVideo', value)
// }

</script>

<style lang="scss" scoped>
.ptz-control {
  .ptz {
    position: fixed;
    top: 3rem;
    right: 0.2rem;
    width: 2rem;
    height: 2rem;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 1rem;
    pointer-events: all;
    img {
      width: 1.6rem;
      height: 1.6rem;
    }
  }
  .actived-blue {
    background-image: none;
    background-color: rgba(23, 124, 198, 0.7);
  }
  .btn-group {
    position: fixed;
    top: 5.8rem;
    right: 4px;
    // padding: 4px;
    position: absolute;
    right: 0.2rem;
    bottom: 0rem;
    .btn-item {
      width: 2rem;
      height: 2rem;
@@ -417,12 +413,16 @@
      justify-content: center;
      overflow: hidden;
      cursor: pointer;
      margin-bottom: 1rem;
      margin-bottom: 0.5rem;
      pointer-events: all;
      img {
        width: 1.6rem;
        height: 1.6rem;
      }
    }
    .actived-blue {
      background-image: none;
      background-color: rgba(23, 124, 198, 0.7);
    }
  }
  .circle-box {
@@ -432,8 +432,8 @@
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    right: 4rem;
    top: 20%;
    left: 1%;

    .top,
    .left,