From 7d0b01e71128d8122197273c95f10a0ec7158b5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9DRain=E2=80=9C?= <904416525@qq.com>
Date: Mon, 27 May 2024 19:40:17 +0800
Subject: [PATCH] 1

---
 pages/videoManage/playVideo.vue | 424 +++++++++++++++++---------------
 1 file changed, 231 insertions(+), 193 deletions(-)

diff --git a/pages/videoManage/playVideo.vue b/pages/videoManage/playVideo.vue
index 4de88f9e..7b5460bd 100644
--- a/pages/videoManage/playVideo.vue
+++ b/pages/videoManage/playVideo.vue
@@ -10,7 +10,8 @@
 		<video class="videoBox" id="myVideo" :custom-cache="false" :src="playUrlFilter" controls autoplay></video>
 		<view class="videoName">
 			{{videoInfo.videoName}}
-			<button v-if="videoInfo.videoType==3" type="primary" class="changeBtn btn" @click="changeStreamFn">{{streamType==1?'切换到主码流':'切换到子码流'}}</button>
+			<button v-if="videoInfo.videoType==3" type="primary" class="changeBtn btn"
+				@click="changeStreamFn">{{streamType==1?'切换到主码流':'切换到子码流'}}</button>
 		</view>
 		<view class="videoOperateBox">
 			<view class="box">
@@ -35,101 +36,124 @@
 <script>
 	import headers from '../../components/headers/headers.vue'
 	export default {
-		components:{headers},
+		components: {
+			headers
+		},
 		data() {
 			return {
-				url:'',//rtsp://admin:jxj12345@192.168.0.64:554/h264/ch1/main/av_stream
-				videoInfo:{videoName:'',videoType:null},
+				url: '', //rtsp://admin:jxj12345@192.168.0.64:554/h264/ch1/main/av_stream
+				videoInfo: {
+					videoName: '',
+					videoType: null
+				},
 				streamType: 1, //1是子码流    2是主码流
-				videoResponseInfo: {}
+				videoResponseInfo: {},
+				videoFlag: false,
 			};
 		},
 		onLoad(options) {
 			//videoType    1萤石云，2乐橙，3ISC，4大华，5宇视，6国标
 			// this.url = options.url
-			this.videoInfo=uni.getStorageSync('videoInfo')
-			if(this.videoInfo.videoType==2){
-				this.url= this.videoInfo.liveRadioUrl
-			}else{
+			this.videoInfo = uni.getStorageSync('videoInfo')
+			if (this.videoInfo.videoType == 2) {
+				this.url = this.videoInfo.liveRadioUrl
+			} else {
 				this.getPlayUrl()
 			}
 		},
 		computed: {
-			playUrlFilter(){
-				return this.url?'rtsp://42.180.188.17'+this.url.substring(20):""
+			playUrlFilter() {
+				return this.url ? 'rtsp://42.180.188.17' + this.url.substring(20) : ""
 			}
 		},
-		methods:{
+		methods: {
 			// 跳转到录像回放列表
-			toBackList(){
+			toBackList() {
 				uni.navigateTo({
-					url: './playBackList?obj=' + JSON.stringify({...this.videoResponseInfo,...this.videoInfo})
+					url: './playBackList?obj=' + JSON.stringify({
+						...this.videoResponseInfo,
+						...this.videoInfo
+					})
 				})
 			},
-			changeStreamFn(){
-				if(this.streamType==1){
-					this.streamType=2
-				}else{
-					this.streamType=1
+			changeStreamFn() {
+				if (this.streamType == 1) {
+					this.streamType = 2
+				} else {
+					this.streamType = 1
 				}
 				this.getPlayUrl()
 			},
-			getPlayUrl(){
+			getPlayUrl() {
 				var that = this
-				var json ={itemId:this.videoInfo.itemId}
-				if(this.videoInfo.videoType==3){
-					json.streamType=this.streamType
-					json.type='rtsp'  //rtsp或者hls
+				var json = {
+					itemId: this.videoInfo.itemId
+				}
+				if (this.videoInfo.videoType == 3) {
+					json.streamType = this.streamType
+					json.type = 'rtsp' //rtsp或者hls
 				}
 				this.sendRequest({
 					url: "xmgl/videoItem/getVideoItemInfo",
 					data: json,
 					method: "post",
-					success(res){
-						switch (that.videoInfo.videoType){
+					success(res) {
+						switch (that.videoInfo.videoType) {
 							case 1:
-								that.url=res.result.videoInfo.hdFlvAddress
+								that.url = res.result.videoInfo.hdFlvAddress
 								break;
 							default:
-								that.url=res.result.videoInfo.url
+								that.url = res.result.videoInfo.url
 								break;
 						}
-						that.videoResponseInfo = {...res.result.projectVideoConfig,...res.result.videoInfo};
-						for(let i in that.videoResponseInfo){
-							if(!that.videoResponseInfo[i]){
+						that.videoResponseInfo = {
+							...res.result.projectVideoConfig,
+							...res.result.videoInfo
+						};
+						for (let i in that.videoResponseInfo) {
+							if (!that.videoResponseInfo[i]) {
 								delete that.videoResponseInfo[i]
 							}
 						}
 					}
 				})
 			},
-			controlVideoFn(pan, tilt, zoom,opType){
-				if(this.videoInfo.deviceType!=2){
+			controlVideoFn(pan, tilt, zoom, opType) {
+				if (this.videoFlag) {
 					uni.showToast({
-						title:'该设备不是球机，不支持此操作',
-						icon:'none'
+						title: '不要重复点击',
+						icon: 'none'
+					})
+					return
+				}
+				if (this.videoInfo.deviceType != 2) {
+					uni.showToast({
+						title: '该设备不是球机，不支持此操作',
+						icon: 'none'
 					})
 					return false
 				}
-				switch (this.videoInfo.videoType){
+				switch (this.videoInfo.videoType) {
 					case 3:
+						this.videoFlag = true;
 						this.controlVideoFn_isc(opType)
 						break;
 					case 4:
+						this.videoFlag = true;
 						this.controlVideoFn_dh(pan, tilt, zoom)
 						break;
 					default:
 						uni.showToast({
-							title:'暂不支持',
-							icon:'none'
+							title: '暂不支持',
+							icon: 'none'
 						})
 						break;
 				}
 			},
-			controlVideoFn_isc(opType){
+			controlVideoFn_isc(opType) {
 				let json = {
 					// cameraId: this.videoInfo.deviceSerial,
-					itemId:this.videoInfo.itemId,
+					itemId: this.videoInfo.itemId,
 					opType: opType,
 					opSize: 20,
 					opCode: 1
@@ -139,15 +163,18 @@
 					url: "xmgl/videoItem/getHikPtzControl",
 					data: json,
 					method: "post",
-					success(res){
+					success(res) {
 						uni.showToast({
-							title:'控制成功',
-							icon:'none'
+							title: '控制成功',
+							icon: 'none'
 						})
+					},
+					complete() {
+						this.videoFlag = false;
 					}
 				})
 			},
-			controlVideoFn_dh(pan, tilt, zoom){
+			controlVideoFn_dh(pan, tilt, zoom) {
 				var code = '';
 				var jsonStr = {
 					pan: pan,
@@ -169,11 +196,14 @@
 					url: "xmgl/video/putPTZ",
 					data: json,
 					method: "get",
-					success(res){
+					success(res) {
 						uni.showToast({
-							title:'控制成功',
-							icon:'none'
+							title: '控制成功',
+							icon: 'none'
 						})
+					},
+					complete() {
+						this.videoFlag = false;
 					}
 				})
 			}
@@ -182,167 +212,175 @@
 </script>
 
 <style lang="scss" scoped>
-/* #ifdef H5 */
-.fullHeight{
-	background-color: #F4F5FD;
-	height: 100vh;
-}
-/* #endif */
- 
-/* #ifdef MP-WEIXIN */
-.fullHeight{
-	background-color: #F4F5FD;
-	height: 100vh;
-}
-/* #endif */
- 
-/* #ifdef APP-PLUS */
-.fullHeight{
-	background-color: #F4F5FD;
-	height: auto;
-	padding-bottom: 60rpx;
-}
-/* #endif */
-.videoBox{
-	width: 100%;
-}
-.videoName{
-	font-size: 16px;
-	color: $uni-text-color;
-	font-weight: bold;
-	margin: 10px 15px;
-	position: relative;
-	.changeBtn{
-		position: absolute;
-		right: 0;
-		top: 0;
-		font-size: 12px;
+	/* #ifdef H5 */
+	.fullHeight {
+		background-color: #F4F5FD;
+		height: 100vh;
 	}
-}
-.video-playback{
-	width: 454rpx;
-	height: 108rpx;
-	background: #FFFFFF;
-	border-radius: 31rpx;
-	text-align: center;
-	line-height: 108rpx;
-	font-family: Source Han Sans CN, Source Han Sans CN;
-	font-weight: 400;
-	font-size: 40rpx;
-	color: #8D8D8D;
-	margin: 0 auto;
-	margin-top: 80rpx;
-	// position: fixed;
-	// bottom: 80rpx;
-	// left: 145rpx;
-}
-.videoOperateBox {
-  text-align: center;
-  padding-top: 10px;
-  .bg{
-	  width: 220px;
-	  height: 220px;
-  }
-}
 
-.videoOperateBox .box {
-  position: relative;
-  display: inline-block;
-  margin: auto;
-  height: 220px;
-}
+	/* #endif */
 
-.videoOperateBox .pic {
-  position: absolute;
-  cursor: pointer;
-}
+	/* #ifdef MP-WEIXIN */
+	.fullHeight {
+		background-color: #F4F5FD;
+		height: 100vh;
+	}
 
-.videoOperateBox .zoom {
-  width: 106px;
-  height: 69px;
-  display: inline-block;
-  cursor: pointer;
-}
+	/* #endif */
 
-.videoOperateBox .zoomin:hover {
-  background: url("../../static/videoControlIcon/4.png");
-}
+	/* #ifdef APP-PLUS */
+	.fullHeight {
+		background-color: #F4F5FD;
+		height: auto;
+		padding-bottom: 60rpx;
+	}
 
-.videoOperateBox .zoomout:hover {
-  background: url("../../static/videoControlIcon/2.png");
-}
+	/* #endif */
+	.videoBox {
+		width: 100%;
+	}
 
-.videoOperateBox .zoomin {
-  background: url("../../static/videoControlIcon/3.png");
-}
+	.videoName {
+		font-size: 16px;
+		color: $uni-text-color;
+		font-weight: bold;
+		margin: 10px 15px;
+		position: relative;
 
-.videoOperateBox .zoomout {
-  background: url("../../static/videoControlIcon/1.png");
-}
+		.changeBtn {
+			position: absolute;
+			right: 0;
+			top: 0;
+			font-size: 12px;
+		}
+	}
 
-.videoOperateBox .left {
-  width: 28px;
-  height: 33px;
-  background: url("../../static/videoControlIcon/left.png");
-  left: 25px;
-  top: 50%;
-  margin-top: -16px;
-}
+	.video-playback {
+		width: 454rpx;
+		height: 108rpx;
+		background: #FFFFFF;
+		border-radius: 31rpx;
+		text-align: center;
+		line-height: 108rpx;
+		font-family: Source Han Sans CN, Source Han Sans CN;
+		font-weight: 400;
+		font-size: 40rpx;
+		color: #8D8D8D;
+		margin: 0 auto;
+		margin-top: 80rpx;
+		// position: fixed;
+		// bottom: 80rpx;
+		// left: 145rpx;
+	}
 
-.videoOperateBox .left:hover {
-  background: url("../../static/videoControlIcon/left-active.png");
-}
+	.videoOperateBox {
+		text-align: center;
+		padding-top: 10px;
 
-.videoOperateBox .right:hover {
-  background: url("../../static/videoControlIcon/right-active.png");
-}
+		.bg {
+			width: 220px;
+			height: 220px;
+		}
+	}
 
-.videoOperateBox .top:hover {
-  background: url("../../static/videoControlIcon/top-active.png");
-}
+	.videoOperateBox .box {
+		position: relative;
+		display: inline-block;
+		margin: auto;
+		height: 220px;
+	}
 
-.videoOperateBox .bottom:hover {
-  background: url("../../static/videoControlIcon/bottom-active.png");
-}
+	.videoOperateBox .pic {
+		position: absolute;
+		cursor: pointer;
+	}
 
-// .videoOperateBox .center:hover {
-//   background: url("../../static/videoControlIcon/center-active.png");
-// }
+	.videoOperateBox .zoom {
+		width: 106px;
+		height: 69px;
+		display: inline-block;
+		cursor: pointer;
+	}
 
-.videoOperateBox .right {
-  width: 28px;
-  height: 33px;
-  background: url("../../static/videoControlIcon/right.png");
-  right: 25px;
-  top: 50%;
-  margin-top: -16px;
-}
+	.videoOperateBox .zoomin:hover {
+		background: url("../../static/videoControlIcon/4.png");
+	}
 
-.videoOperateBox .top {
-  width: 33px;
-  height: 28px;
-  background: url("../../static/videoControlIcon/top.png");
-  top: 25px;
-  left: 50%;
-  margin-left: -16px;
-}
+	.videoOperateBox .zoomout:hover {
+		background: url("../../static/videoControlIcon/2.png");
+	}
 
-.videoOperateBox .bottom {
-  width: 33px;
-  height: 28px;
-  background: url("../../static/videoControlIcon/bottom.png");
-  bottom: 25px;
-  left: 50%;
-  margin-left: -16px;
-}
+	.videoOperateBox .zoomin {
+		background: url("../../static/videoControlIcon/3.png");
+	}
 
-// .videoOperateBox .center {
-//   width: 44px;
-//   height: 40px;
-//   background: url("../../static/videoControlIcon/center.png");
-//   left: 50%;
-//   top: 50%;
-//   margin-top: -20px;
-//   margin-left: -22px;
-// }
-</style>
+	.videoOperateBox .zoomout {
+		background: url("../../static/videoControlIcon/1.png");
+	}
+
+	.videoOperateBox .left {
+		width: 28px;
+		height: 33px;
+		background: url("../../static/videoControlIcon/left.png");
+		left: 25px;
+		top: 50%;
+		margin-top: -16px;
+	}
+
+	.videoOperateBox .left:hover {
+		background: url("../../static/videoControlIcon/left-active.png");
+	}
+
+	.videoOperateBox .right:hover {
+		background: url("../../static/videoControlIcon/right-active.png");
+	}
+
+	.videoOperateBox .top:hover {
+		background: url("../../static/videoControlIcon/top-active.png");
+	}
+
+	.videoOperateBox .bottom:hover {
+		background: url("../../static/videoControlIcon/bottom-active.png");
+	}
+
+	// .videoOperateBox .center:hover {
+	//   background: url("../../static/videoControlIcon/center-active.png");
+	// }
+
+	.videoOperateBox .right {
+		width: 28px;
+		height: 33px;
+		background: url("../../static/videoControlIcon/right.png");
+		right: 25px;
+		top: 50%;
+		margin-top: -16px;
+	}
+
+	.videoOperateBox .top {
+		width: 33px;
+		height: 28px;
+		background: url("../../static/videoControlIcon/top.png");
+		top: 25px;
+		left: 50%;
+		margin-left: -16px;
+	}
+
+	.videoOperateBox .bottom {
+		width: 33px;
+		height: 28px;
+		background: url("../../static/videoControlIcon/bottom.png");
+		bottom: 25px;
+		left: 50%;
+		margin-left: -16px;
+	}
+
+	// .videoOperateBox .center {
+	//   width: 44px;
+	//   height: 40px;
+	//   background: url("../../static/videoControlIcon/center.png");
+	//   left: 50%;
+	//   top: 50%;
+	//   margin-top: -20px;
+	//   margin-left: -22px;
+	// }
+</style>
\ No newline at end of file