From a0f008e1b176ab0c844bc4721f282e12d18f855c Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Mon, 24 Feb 2025 18:20:11 +0800
Subject: [PATCH] 调整详情和修改地图渲染功能
---
src/views/components/ptzControl.vue | 76 +++++++++++++++-----------------------
1 files changed, 30 insertions(+), 46 deletions(-)
diff --git a/src/views/components/ptzControl.vue b/src/views/components/ptzControl.vue
index 68f83ae..458f8c0 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>
@@ -19,20 +19,16 @@
<div class="btn-item" @touchstart="onZoom(false)">
<img src="@/assets/images/suoxiao.png" />
</div>
- <!-- <div class="btn-item" @touchstart="onChangeD">
- <img v-if="is2d" src="@/assets/images/stand.png" />
- <img v-else src="@/assets/images/satellite.png" />
+ <!-- <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>
@@ -53,6 +49,7 @@
import { useDroneControlWsEvent } from '@/utils/websocket/drone-ws-control'
import cesiumOperation from '@/utils/cesium-tsa.js';
import { useMyStore } from '@/store'
+import { fa } from 'element-plus/es/locale';
const { loadLAYER } = cesiumOperation()
@@ -81,6 +78,10 @@
required: true,
}
});
+const emitEvents = defineEmits(['changeModelVideo'])
+
+// 放大和缩小
+// let isBigVideo = ref<Boolean>(false)
// 录像
let isCameraRecording = ref<Boolean>(false)
@@ -238,7 +239,6 @@
}
// 开始录像
const onStartCameraRecording = () => {
- console.log('设施',payloadSelectInfo.controlSource)
if (!checkPayloadAuth(payloadSelectInfo.controlSource)) {
return
}
@@ -393,40 +393,20 @@
}
}
+// 视频大小的缩放
+// const changeModelVideo = (value:Boolean) => {
+// isBigVideo.value = value
+// emitEvents('changeModelVideo', value)
+// }
</script>
<style lang="scss" scoped>
.ptz-control {
- .ptz {
- position: fixed;
- top: 3rem;
- left: 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;
- left: 0.2rem;
- // padding: 4px;
+ position: absolute;
+ right: 0.2rem;
+ bottom: 0rem;
.btn-item {
width: 2rem;
height: 2rem;
@@ -437,12 +417,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 {
@@ -452,8 +436,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