pinganxiaoyuan/monitorMobile/pages/earlyWarning/detail.vue

<template>
	<view class="warningDetail">
		<!-- <view style="height: 100vh;background: #fff;" v-if="showLoading">
			<u-loading-page :loading="true" bg-color="#e8e8e8" color="#ffffff"></u-loading-page>
		</view> -->
		<u-loading-page :loading="showLoading" bg-color="#e8e8e8" color="#ffffff"></u-loading-page>
		<!-- <u-loading-icon v-if="showLoading" text="加载中" textSize="18"></u-loading-icon> -->
		<view class="">
			<view class="title cli">
				{{detailData.alarmTypeDesc ? detailData.alarmTypeDesc + '-' + detailData.tick : ''}}
			</view>
			<image style="width: 100%;height:422rpx;" :src="detailData.snapshotUrl" mode="aspectFit"></image>
			<view class="cli">
				<view class="labelBox">
					场景名称：
				</view>
				<view class="valueBox">
					{{ detailData.sceneName || "--" }}
				</view>
			</view>
			<view class="cli">
				<view class="labelBox">
					班级：
				</view>
				<view class="valueBox">
					--
				</view>
			</view>
			<view class="cli">
				<view class="labelBox">
					姓名：
				</view>
				<view class="valueBox">
					{{ detailData.personName || "--" }}
				</view>
			</view>
			<view class="cli">
				<view class="labelBox">
					预警摄像头：
				</view>
				<view class="valueBox">
					{{ detailData.cameraName || "--" }}
				</view>
			</view>
			<view class="cli">
				<view class="labelBox">
					预警类型：
				</view>
				<view class="valueBox">
					{{ detailData.alarmTypeDesc || "--" }}
				</view>
			</view>
			<view class="cli">
				<view class="labelBox">
					预警时间：
				</view>
				<view class="valueBox">
					{{ detailData.tick || "--" }}
				</view>
			</view>
			<view class="cli">
				<view class="labelBox">
					复核视频：
				</view>
				<view class="valueBox">
					<text v-if="detailData.videoUrl" style="color: #2388FF;"
						@click="seeVideo(detailData.videoUrl)">查看视频</text>
					<text v-else>--</text>
				</view>
			</view>
			<view class="cli2">
				<view class="labelBox">
					备注信息：
				</view>
				<view class="valueBox">
					{{ detailData.extend || '--' }}
				</view>
			</view>

			<view class="cli2">
				<view class="labelBox">
					处理意见：
				</view>
				<view class="valueBox">
					{{ detailData.remark || '--' }}
				</view>
			</view>
		</view>

		<u-popup :show="showVideo" :closeable="true" @close="close" @open="open" mode="center">
			<!-- <view class="">
				视频
			</view> -->

			<view class="poupBox">
				<view style="width: 750rpx;height: 400rpx;">
					<DomVideoPlayer ref="domVideoPlayer" object-fit='contain' :controls="controls" :autoplay="autoplay"
						:loop="loop" :src="urlsrc" :playback-rate="playbackRate" :is-loading="isLoading" @play="onPlay"
						@pause="onPause" @ended="onEnded" @durationchange="onDurationChange" @timeupdate="onTimeUpdate"
						@ratechange="onRateChange" @fullscreenchange="onFullscreenChange" />
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import DomVideoPlayer from '@/components/DomVideoPlayer/DomVideoPlayer.vue'
	import {
		detail, //详情
		warnType, //获取预警类型
	} from '@/api/warn/index.js'
	// 将xx秒转为 xx:xx 分秒格式
	const formatSec2Time = (time) => {
		const min = Math.floor(time / 60)
		const sec = Math.floor(time % 60)
		return `${min}:${sec < 10 ? '0' + sec : sec}`
	}
	export default {
		components: {
			DomVideoPlayer
		},
		data() {
			return {
				detailData: {},
				showVideo: false,
				// 视频参数
				urlsrc: '',
				// src: 'http://deepvision.oss-cn-zhangjiakou.aliyuncs.com/acp/quanjiang/DEMO00001/20240708/video/wander/SXT001__quanjiang__DEMO00001_video_wm_1720400435638.mp4?Expires=1724745909&OSSAccessKeyId=STS.NV49VEGSbWMNi7Wp4e76VrWKk&Signature=wXTdiWQHGNp%2FtbtezUBmD%2Fziy1E%3D&security-token=CAIS0wN1q6Ft5B2yfSjIr5WBcuzxqoxD4I%2BlaxHmlDQwO7l6nZLgiTz2IHFMf3huCeodsv8%2BlGxS5%2FgelrpqVpZDR03Na8RHwrly1lv5O9KY4zIJb0D10s%2FLI3OaLjKm9hi7AYygPgK0GJqEb1TDiVUto9%2FTfimjWFqIKICAjYUdAP0cQgi%2Fa0gwZrJRPRAwh8IGEnHTOP2xUHvtmXGCNFd0nQB%2BhGhjk7TdpPeR8R3Dllb35%2FYIroDqWPieYtJrIY10XqWBvqx%2FfbGT1zVLuVoYtvV6gaFc5zbcv9abRFVf4hiCP6%2Ff6MBuNw5%2Fae94efZNp%2BOukuZj6K6B1db7xhtVI%2BBOUiPZA4mr2IzdBeqvNNcwc7m8F1no9YjXbsGs9EEGGStLaVgVI4F8dyAhWEd9FWjgR%2FX5qAyQUGCKULOY1aw6651xwmjz8MCCT1r1GOTBindGasVnMxh5Z0JMjDK9aNkKfgFUbVJ8BrGTCIh%2FYx0bsq7yowDIEyp71TRMo%2Bbu%2FDBhIifKpO4VN7AxMup1DPwu2wNCxKRpnrU0rgxd8uAx9DyyfH1x3TObqd7jjqzaKs3NYdtswV4BUlvK5CGWEjhzQEO8mJtNIDT39ax%2Bf3elrfsIeBqAAaamZEcVMZBN29tT2k9jMRQfJjNJzZRtx5Z4sYbOwDoRAq%2F4qEv07jBx5PUAAB3q9IqDapPoeUw8Yccvlo9q5VG8AsY%2BZkidTAw%2B7s7%2BTKuJC93tJfdSUYdycPZ%2BZneA%2BlZqpdvfhTtZCteGsdnoQU4H7x%2B9ph9K%2Bg3HGMQrtuFdIAA%3D',
				playing: false,
				loop: false,
				controls: true,
				autoplay: false,
				isLoading: true,
				playbackRate: 1,
				currentTime: 0,
				duration: 0,
				showLoading: false,
			}
		},
		computed: {
			// 播放进度
			// progress() {
			// 	const percent = this.currentTime / this.duration * 100
			// 	return percent.toFixed(2) + '%'
			// },
			// // 显示当前时间
			// showPlayTime() {
			// 	const curr = formatSec2Time(this.currentTime)
			// 	const dur = formatSec2Time(this.duration)
			// 	return `${curr} / ${dur}`
			// },
		},
		onLoad(options) {
			console.log(options)
			if (options.id) {
				this.id = options.id;
			}
			this.getInfo();
		},
		methods: {
			getInfo() {
				this.showLoading = true;
				detail({
					id: this.id
				}).then(res => {
					if (res.code == 200) {
						this.detailData = res.data;
					}
					this.showLoading = false;
				}).catch(err => {

					this.showLoading = false;

				})
			},
			seeVideo(url) {
				this.showVideo = true;
				this.urlsrc = url;
			},
			open() {
				// console.log('open');
				setTimeout(() => {
					this.src =
						'http://deepvision.oss-cn-zhangjiakou.aliyuncs.com/acp/quanjiang/DEMO00001/20240708/video/wander/SXT001__quanjiang__DEMO00001_video_wm_1720400435638.mp4?Expires=1724748181&OSSAccessKeyId=STS.NTwCzwCtwDDYeE7RAhHue5mDb&Signature=qY%2F82lk1K9VJEX95ImeNH9wMHiw%3D&security-token=CAIS0wN1q6Ft5B2yfSjIr5fCCMDDrqtW84ayZ2OGtkE9RPpJ2qjvgDz2IHFMf3huCeodsv8%2BlGxS5%2FgelrpqVpZDR03Na8RHwrly1lv5O9KY4z1YIkL10s%2FLI3OaLjKm9hi7AYygPgK0GJqEb1TDiVUto9%2FTfimjWFqIKICAjYUdAP0cQgi%2Fa0gwZrJRPRAwh8IGEnHTOP2xUHvtmXGCNFd0nQB%2BhGhjk7TdpPeR8R3Dllb35%2FYIroDqWPieYtJrIY10XqWBvqx%2FfbGT1zVLuVoYtvV6gaFc5zbcv9abRFVf4hiCP6%2Ff6MBuNw5%2Fae94efZNp%2BOukuZj6K6B1db7xhtVI%2BBOUiPZA4mr2IzdBeqvNNcwc7m8F1no9YjXbsGs9EEGGStLaVgVI4F8dyAhWEd9FWjgR%2FX5qAyQUGCKULOY1aw6651xwmjz8MCCT1r1GOTBindGasVnMxh5Z0JMjDK9aNkKfgFUbVJ8BrGTCIh%2FYx0bsq7yowDIEyp71TRMo%2Bbu%2FDBhIifKpO4VN7AxMup1DPwu2wNCxKQmwS5Se2k%2BwM10kxsnMbhsSH5O0sXx5M%2B5TxBoZB5p9PtUj15fgYQDR12uT0nToulHQz7%2BX6zfLqvSrfsIeBqAAUdgBEBn%2BksEpfpynILn8V8z3O5GaZcm3NmplGe%2F2XtD9%2FbnSWWTEzR1JJ45DnANEEIGzfjd6UvxpIcrk5Ggr0I52UqVdGUhcovTegZXYeBMsXYze8OLsu0UOhtpHsy8nCCJzpNnrwUBZOfUdZtwsCYHC4Bs8BRQ9JORs4ECvUnyIAA%3D'
				}, 1000)
			},
			close() {
				this.showVideo = false;
				// console.log('close');
			},
			// 播放 - 事件
			onPlay() {
				console.log('onPlay')
				this.playing = true
			},
			// 暂停 - 事件
			onPause() {
				console.log('onPause')
				this.playing = false
			},
			// 播放完毕 - 事件
			onEnded() {
				console.log('onEnded')
				this.playing = false
			},
			// 总时长变化 - 事件
			onDurationChange(e) {
				console.log('onDurationChange', e)
				this.duration = e
			},
			// 播放时间更新 - 事件
			onTimeUpdate(e) {
				// console.log('onTimeUpdate', e)
				this.currentTime = e
			},
			// 倍速变化 - 事件
			onRateChange(e) {
				console.log('onRateChange', e)
				this.playbackRate = e
			},
			// 进入/退出全屏 - 事件
			onFullscreenChange(e) {
				console.log('onFullScreenChange', e)
			},

			// // 切换播放/暂停 - 函数
			// doPlaying() {
			//   const domVideoPlayer = this.$refs.domVideoPlayer
			//   if (domVideoPlayer.playing) {
			//     this.doPause()
			//   } else {
			//     this.doPlay()
			//   }
			// },
			// // 播放 - 函数
			// doPlay() {
			//   const domVideoPlayer = this.$refs.domVideoPlayer
			//   domVideoPlayer.play()
			// },
			// // 暂停 - 函数
			// doPause() {
			//   const domVideoPlayer = this.$refs.domVideoPlayer
			//   domVideoPlayer.pause()
			// },
			// // 快退/快进 - 函数
			// doSeek(time) {
			//   const domVideoPlayer = this.$refs.domVideoPlayer
			//   time += domVideoPlayer.currentTime
			//   domVideoPlayer.toSeek(time)
			// },
			// // 全屏播放 - 函数
			// doFullScreen() {
			//   const domVideoPlayer = this.$refs.domVideoPlayer
			//   domVideoPlayer.fullScreen()
			// },
			// // 移除视频 - 函数
			// doRemove() {
			//   this.src = ''
			//   const domVideoPlayer = this.$refs.domVideoPlayer
			//   domVideoPlayer.remove()
			// },
			// // 更换src - 函数
			// doUpdateSrc() {
			//   this.src = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/create-schema2code-video.mp4'
			// },
			// doUpdateSrcToSeek() {
			//   // 切换视频
			//   this.src = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/create-schema2code-video.mp4'
			//   setTimeout(() => {
			//     const domVideoPlayer = this.$refs.domVideoPlayer
			//     // 视频加载完后，延迟调用toSeek()方法，跳转到第60s位置
			//     domVideoPlayer.toSeek(60, true)
			//   }, 100)
			// },
			// // 切换倍速 - 函数
			// switchRate() {
			//   this.playbackRate = this.playbackRate === 1 ? 2 : 1
			// },
			// // 切换视频控制栏 - 函数
			// switchControls() {
			//   this.controls = !this.controls
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.warningDetail {
		// height: 100%;
		background: #fff;

		.title {
			color: #2388FF;
			font-size: 30rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: rgba(35, 136, 255, 0.06);
		}

		.cli {
			font-size: 30rpx;
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.labelBox {
				color: #333333;
			}

			.valueBox {
				color: #333333;
				font-weight: 700;

			}
		}

		.cli2 {
			font-size: 30rpx;
			padding: 20rpx 30rpx;

			.labelBox {
				color: #333333;
			}

			.valueBox {
				margin-top: 20rpx;
				color: #333333;
				font-weight: 700;
				min-height: 50rpx;
				word-break: break-all;
			}
		}

		.poupBox {
			width: 100%;
			padding: 80rpx 20rpx 20rpx 20rpx;
			box-sizing: border-box;
		}
	}
</style>