feat: 视频回放功能页面添加

pages.json

@@ -69,8 +69,12 @@
 		},
 		{
 			"path": "pages/videoManage/playBackList",
+			"style": {}
+		},
+		{
+			"path": "pages/videoManage/playBackVideo",
 			"style": {
-				"navigationBarTitleText": "录像查询",
+				"navigationBarTitleText": "视频回放",
 				"enablePullDownRefresh": false,
 				"onReachBottomDistance": 100,
 				"navigationBarBackgroundColor": "#3A7BFF",

pages/videoManage/playBackList.vue

@@ -1,13 +1,25 @@
 <template>
 	<view class="fullHeight">
+		<headers :showBack="true" :themeType="'#3A7BFF'">
+			<view class="headerName">
+				录像查询
+			</view>
+		</headers>
+		<view class="date-search">
+			<uni-datetime-picker v-model="timeRange" type="daterange" rangeSeparator="至"
+				@change="confirmTimeRange" />
+			<view class="btn-style">查询</view>
+		</view>
 		<view class="videoBox" v-if="videoList.length>0">
 			<view class="videoItem" v-for="(item,index) in videoList" :key="index" @click="playVideoFn(item)">
 				<image v-if="item.coverUrl" class="videoPoster" :src="item.coverUrl" mode="aspectFill"></image>
 				<view v-else class="videoPoster">
 					<image src="/static/no_poster.png" class="no_poster"></image>
 				</view>
-				<view class="videoName">
+				<view class="back-time">
-					{{item.name}}
+					<text class="date-time">2024-05-11 00:00:00</text>
+					<text class="divider-text">至</text>
+					<text class="date-time">2024-05-11 00:00:00</text>
 				</view>
 			</view>
 		</view>
@@ -25,11 +37,13 @@
 		data() {
 			return {
 				videoList: [
-					{startTime: "2024-05-11 00:00:00", endTime: "2024-06-11 00:00:00"}
+					{name: 123,	startTime: "2024-05-11 00:00:00", endTime: "2024-06-11 00:00:00"},
+					{name: 123,	startTime: "2024-05-11 00:00:00", endTime: "2024-06-11 00:00:00"}
 				],
 				pageType: 'company',
 				pageNo: 1,
 				pageSize: 7,
+				timeRange: []
 			};
 		},
 		onLoad(options) {
@@ -48,16 +62,16 @@
 			// this.loadData()
 		},
 		methods: {
+			confirmTimeRange(e, index) {
+				console.log(e, index)
+				// this.form.plannedMakeBeamBeginTime = e[0]
+				// this.form.plannedMakeBeamEndTime = e[1]
+				// console.log("制梁时间选择", e)
+			},
 			playVideoFn(item) {
-				// console.log(item)
-				uni.setStorageSync('videoInfo', item)
-				// if(item.liveRadioUrl){
 				uni.navigateTo({
-					// url:'./playVideo?url='+item.liveRadioUrl,
+					url: './playBackVideo'
-					url: 'playVideo'
 				})
-				// }
-
 			},
 			//获取项目视频
 			loadData(sn) {
@@ -80,43 +94,72 @@
 </script>
 
 <style lang="scss" scoped>
-	.videoBox {
+	.fullHeight{
-		padding: 20px 10px 10px;
+		background-color: #F4F5FD;
-		overflow: hidden;
 	}
-
+	.date-search{
-	.videoItem {
+		display: flex;
-		float: left;
+		align-items: center;
-		background-color: white;
+		padding: 12rpx 18rpx;
-		width: calc(50% - 5px);
+		background: #FFFFFF;
-		margin-bottom: 10px;
+		.btn-style{
-
+			width: 120rpx;
-		&:nth-child(2n-1) {
+			height: 68rpx;
-			margin-right: 10px;
+			line-height: 68rpx;
-		}
+			background: #5181F6;
-
+			border-radius: 6rpx;
-		.videoPoster {
+			font-family: Source Han Sans CN, Source Han Sans CN;
-			height: 90px;
+			font-weight: 400;
-			width: 100%;
+			font-size: 24rpx;
-			background-color: #282828;
+			color: #FFFFFF;
 			text-align: center;
-
+			margin-left: 36rpx;
+		}
+	}
+	.videoBox {
+		padding: 0rpx 20rpx 40rpx 20rpx;
+		overflow: hidden;
+		margin-top: 32rpx;
+	}
+	.videoItem:not(:last-child){
+		margin-bottom: 10rpx;
+	}
+	.videoItem {
+		display: flex;
+		width: 100%;
+		background: #FFFFFF;
+		border-radius: 10rpx;
+		padding: 16rpx 8rpx;
+		.videoPoster {
+			width: 208rpx;
+			height: 208rpx;
+			background: rgba(141,141,141,0.83);
+			border-radius: 8rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
 			.no_poster {
-				width: 55px;
+				width: 110rpx;
-				height: 50px;
+				height: 100rpx;
-				margin-top: 20px;
 			}
 		}
-
+		.back-time{
-		.videoName {
+			display: flex;
-			font-size: 14px;
+			flex-direction: column;
-			color: $uni-text-color;
+			justify-content: space-around;
-			padding: 3px 0 8px;
+			margin-left: 62rpx;
-			width: 100%;
+			.date-time{
-			overflow: hidden;
+				font-family: Source Han Sans CN, Source Han Sans CN;
-			white-space: nowrap;
+				font-weight: 400;
-			text-overflow: ellipsis;
+				font-size: 30rpx;
-			text-align: center;
+				color: #9F9F9F;
+			}
+			.divider-text{
+				font-family: Source Han Sans CN, Source Han Sans CN;
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #272D45;
+			}
 		}
 	}
 </style>

pages/videoManage/playBackVideo.vue

@@ -0,0 +1,170 @@
+<template>
+	<view class="fullHeight">
+		<headers :showBack="true" :themeType="'#3A7BFF'">
+			<view class="headerName">
+				视频回放
+			</view>
+		</headers>
+		<!-- <video class="videoBox" id="myVideo" :custom-cache="false" :src="url" controls autoplay></video> -->
+		<!-- 外网IP地址访问视频监控 -->
+		<video class="videoBox" id="myVideo" :custom-cache="false" :src="'rtsp://42.180.188.17:'+url.substring(20)" controls autoplay></video>
+		<view class="videoName">
+			<text>南山科技创新中心--标段总承包1#吊塔</text>
+			<text>2024-05-11 00:00:00</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	import headers from '../../components/headers/headers.vue'
+	export default {
+		components:{headers},
+		data() {
+			return {
+				url:'',//rtsp://admin:jxj12345@192.168.0.64:554/h264/ch1/main/av_stream
+				videoInfo:{videoName:'',videoType:null},
+				streamType: 1, //1是子码流    2是主码流
+			};
+		},
+		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.getPlayUrl()
+			}
+		},
+		methods:{
+			// 跳转到录像回放列表
+			toBackList(){
+				uni.navigateTo({
+					url: './playBackList'
+				})
+			},
+			getPlayUrl(){
+				var that = this
+				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){
+							case 1:
+								that.url=res.result.videoInfo.hdFlvAddress
+								break;
+							default:
+								that.url=res.result.videoInfo.url
+								break;
+						}
+					}
+				})
+			},
+			controlVideoFn(pan, tilt, zoom,opType){
+				if(this.videoInfo.deviceType!=2){
+					uni.showToast({
+						title:'该设备不是球机，不支持此操作',
+						icon:'none'
+					})
+					return false
+				}
+				switch (this.videoInfo.videoType){
+					case 3:
+						this.controlVideoFn_isc(opType)
+						break;
+					case 4:
+						this.controlVideoFn_dh(pan, tilt, zoom)
+						break;
+					default:
+						uni.showToast({
+							title:'暂不支持',
+							icon:'none'
+						})
+						break;
+				}
+			},
+			controlVideoFn_isc(opType){
+				let json = {
+					// cameraId: this.videoInfo.deviceSerial,
+					itemId:this.videoInfo.itemId,
+					opType: opType,
+					opSize: 20,
+					opCode: 1
+				};
+				var that = this
+				this.sendRequest({
+					url: "xmgl/videoItem/getHikPtzControl",
+					data: json,
+					method: "post",
+					success(res){
+						uni.showToast({
+							title:'控制成功',
+							icon:'none'
+						})
+					}
+				})
+			},
+			controlVideoFn_dh(pan, tilt, zoom){
+				var code = '';
+				var jsonStr = {
+					pan: pan,
+					tilt: tilt,
+					zoom: zoom,
+					duration: 100
+				};
+				let json = {
+					ip: this.videoInfo.ip,
+					port: this.videoInfo.port,
+					username: this.videoInfo.username,
+					password: this.videoInfo.password,
+					chnnelcode: this.videoInfo.chnnelcode,
+					jsonStr: JSON.stringify(jsonStr),
+					data: new Date()
+				};
+				var that = this
+				this.sendRequest({
+					url: "xmgl/video/putPTZ",
+					data: json,
+					method: "get",
+					success(res){
+						uni.showToast({
+							title:'控制成功',
+							icon:'none'
+						})
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.fullHeight{
+	background-color: #F4F5FD;
+}
+.videoBox{
+	width: 100%;
+}
+.videoName{
+	margin: 10px 15px;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	font-size: 32rpx;
+	font-family: PingFang SC, PingFang SC;
+	font-weight: 600;
+	text:nth-child(1){
+		color: #000000;
+	}
+	text:nth-child(2){
+		color: #6F6F6F;
+		margin-top: 12rpx;
+	}
+}
+</style>

pages/videoManage/playVideo.vue

@@ -202,7 +202,7 @@
 	color: #8D8D8D;
 	position: fixed;
 	bottom: 80rpx;
-	left: 160rpx;
+	left: 140rpx;
 }
 .videoOperateBox {
   text-align: center;