From 4ff3eee77b41466d08117970970d01be6e48ffe1 Mon Sep 17 00:00:00 2001
From: zhongrj <646384940@qq.com>
Date: Fri, 28 Mar 2025 19:02:30 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/drone/pilot-h5
---
src/views/components/ptzControl.vue | 124 ++++++++++++++++++++--------------------
1 files changed, 62 insertions(+), 62 deletions(-)
diff --git a/src/views/components/ptzControl.vue b/src/views/components/ptzControl.vue
index 916bab6..e8bead5 100644
--- a/src/views/components/ptzControl.vue
+++ b/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,
--
Gitblit v1.9.3