feat: 云台的显隐控制

h5/src/components/extension/index.vue

@@ -8,7 +8,7 @@
 			<videoTime v-if="params.gateUnid" ref="videoTime" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick" :dateFormatType="dateFormatType" :magnification="magnification" :ptzEnable="params.ptzEnable" :gateUnid="params.gateUnid"/>
 		</div>
 	</div>
-  
+
 </template>
 
 <script>
@@ -70,6 +70,9 @@ export default {
 	mounted() {
 	},
   methods: {
+    setPTZEnable(status) {
+      this.$refs.videoTime.setPTZEnable(status)
+    },
 		// 播放倍率改变
 		magnificationChange(val) {
 			this.magnification = val
@@ -109,8 +112,8 @@ export default {
 				})
 			}
 		},
-		
-		
+
+
     playWebVideo(obj) {
     	this.params = obj
 			this.params.ptzEnable = ''+this.params.ptzEnable
@@ -135,7 +138,7 @@ export default {
 			})
 		},
 		// 初始化视频
-		
+
 
     // 暴露方法
     // 截图方法

h5/src/components/extension/videoTime.vue

@@ -27,8 +27,9 @@
 				</div>
 				<!-- 操作按钮 -->
 				<div class="operating-box">
-					<van-button v-if="isNoBack&&ptzEnable==='1'" type="primary" size="mini" @click="ptzControlChange">{{ptzControlShow?'隐藏云台':'打开云台'}}</van-button>
-					<van-button v-else-if="!isNoBack" type="primary" size="mini" @click="backRealTime">返回实时</van-button>
+					<!--<van-button v-if="isNoBack&&ptzEnable==='1'" type="primary" size="mini" @click="ptzControlChange">{{ptzControlShow?'隐藏云台':'打开云台'}}</van-button>-->
+          <!--v-else-if="!isNoBack"-->
+					<van-button type="primary" size="mini" @click="backRealTime">返回实时</van-button>
 				</div>
       </div>
       <!-- 时间轴 -->
@@ -38,7 +39,7 @@
         </div>
       </div>
 			<!-- 云台控制模块 -->
-			<div v-if="ptzControlShow" class="ptz-control-box">
+			<div v-if="ptzControlShowByButton && ptzControlShow" class="ptz-control-box">
 				<div class="ptz-control-left-box" :class="[ptzControlType=='left'?'ptz-left':ptzControlType=='up'?'ptz-top':ptzControlType=='right'?'ptz-right':ptzControlType=='down'?'ptz-bottom':'']">
 					<div class="ptz-control-base ptz-control-left" @mousedown="ptzControlOneClick('left')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('left')" @touchend="ptzControlStop"></div>
 					<div class="ptz-control-base ptz-control-top" @mousedown="ptzControlOneClick('up')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('up')" @touchend="ptzControlStop"></div>
@@ -63,6 +64,7 @@
 </template>
 
 <script>
+import { Toast } from "vant";
 import TimeLineCanvas from "./timeline-canvas-wx.vue";
 import moment from "moment";
 import tourApi from '@/api';
@@ -92,6 +94,7 @@ export default {
 			minDay: new Date(2023,1,1),
 
 			ptzControlShow:false,
+      ptzControlShowByButton: false, // 按钮控制显隐，默认隐藏
 			isCanFastRight:false,
 			timeColumns:[],
 			ptzControlType:'',
@@ -116,6 +119,14 @@ export default {
 		this.stopPlay()
 	},
 	methods: {
+    setPTZEnable(status) {
+      // 提示云台是否可用
+      if (this.ptzControlShow) {
+        this.ptzControlShowByButton = status
+      } else {
+        Toast('设备不支持云台功能');
+      }
+    },
 		// 获取播放日期录像回放时间
 		getDateBackTime(startDay) {
 			let stopTime = startDay == moment().format(this.dateFormatType)?moment().format(this.dateFormatType + ' HH:mm:ss'):moment(startDay).format(this.dateFormatType + ' 23:59:59');

h5/src/views/video/controller.vue

@@ -2,13 +2,14 @@
   <div class="controller-container">
     <van-action-bar>
       <van-action-bar-icon icon="video-o" text="场景" @click="onClickIcon('scene')" />
-      <van-action-bar-icon icon="aim" text="云台" @click="onClickIcon('ptz')" />
+      <van-action-bar-icon v-if="props.ptzEnable" icon="aim" text="云台" @click="onClickIcon('ptz')" />
       <van-action-bar-button type="danger" color="#387CF5" text="截图巡检" @click="onClickButton" />
     </van-action-bar>
   </div>
 </template>
 
 <script setup>
+const props = defineProps(['ptzEnable'])
 const emit = defineEmits(['screenshot'])
 
 function onClickIcon(type) {
@@ -16,7 +17,7 @@ function onClickIcon(type) {
   if (type === 'scene') {
     emit('showMonitor')
   } else {
-    emit('showPtz')
+    emit('showPTZ')
   }
 }
 function onClickButton() {

h5/src/views/video/index.vue

@@ -291,6 +291,7 @@
 
     <!--底部按钮区-->
     <VideoController
+        :ptz-enable="ptzEnableInController"
         @screenshot="handleScreenshot"
         @showMonitor="navBack"
         @showPTZ="handleShowPTZ"
@@ -298,7 +299,7 @@
   </div>
 </template>
 <script setup>
-import { ref, onMounted, getCurrentInstance } from "vue";
+import { ref, onMounted } from "vue";
 import { Toast } from "vant";
 import livePlayer from "@/components/extension/index.vue";
 import VideoController from './controller.vue'
@@ -347,8 +348,13 @@ const navBack = () => {
   pointPopupShow.value = true;
   console.log(paramObj);
 };
+
+const ptzEnableInController = ref(paramObj.ptzEnable === '1') // 是否展示云台
+const showPTZStatus = ref(false);
 const handleShowPTZ = () => {
-  //
+  console.log('handleShowPTZ')
+  showPTZStatus.value = !showPTZStatus.value;
+  vionPlayer.value.setPTZEnable(showPTZStatus.value);
 }
 
 // 监控场景编辑