TuBaoSoft-Ui-Zd/pages/home/cameraList/viewMonitoring.vue

<template>
	<view>
		<u-navbar :back-text-style="{color:'#fff'}" back-icon-color="#fff" title-color="#fff"
			:title="form.warehouseName" :background="{background: '#1569e6'}" :border-bottom="false"></u-navbar>
		<view style="display: flex;flex-wrap: wrap;padding-top: 20rpx;">
			<view v-for="(item,index) in url" :key="index" style="width: 100%;margin: 20rpx auto;" v-if="index < 3">
				<view style="width: 100%;height: 44rpx;font-weight:bold;font-size: 32rpx;text-align: center;">
					<u-divider color="#1569e6">{{item.deviceName}}</u-divider>
				</view>
				<video :src="item.url" autoplay vslide-gesture-in-fullscreen :muted="true"
					style="width: 100%;height: 440rpx;margin-bottom: -10rpx;"></video>
			</view>
		</view>
		<view style="display: flex;justify-content: space-around;" v-if="urlList.length > 3">
			<u-button type="primary" @click="previousPage" :disabled="total == 0">上一页</u-button>
			<u-button type="primary" @click="nextPage" :disabled="urlList.length <= (total+1)*3">下一页</u-button>
		</view>
		<u-toast ref="uToast"/>
		<u-top-tips ref="uTips" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: [],
				urlList:[],
				form: '',
				timer: null,
				total:0,
				// 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				// 导航栏内容区域高度，不包括状态栏高度在内
				navbarHeight: 44
			}
		},
		onLoad(option) {
			this.form = JSON.parse(option.form)
			this.url = []
			for (let item in this.form.webcam) {
				this.getAddress(this.form.webcam[item])
			}
		},
		onUnload() {
			// clearInterval(this.timer)
		},
		onReady() {
			this.timer = setInterval(() => {
				this.$refs.uTips.show({
					title: '直连摄像头查看监控，消耗流量较多，请及时退出',
					type: 'info',
					duration: '2000'
				})
			}, 180000)
		},
		methods: {
			//上一页
			previousPage(){
				this.total--
				this.switch()
			},
			//下一页
			nextPage(){
				this.total++
				this.switch()
			},
			switch(){
				this.url = []
				for(let i = 0;i<this.urlList.length;i++){
					if(this.total*3 < (i+1) && (i+1) <= (this.total*3)+3){
						this.url.push(this.urlList[i])
					}
				}
			},
			getAddress(item) {
				uni.request({
					url: 'https://open.hikyun.com/artemis/api/eits/v1/global/live/address/get/by/deviceSerial', //视频流获取
					method: 'POST',
					header: {
						"access_token": uni.getStorageSync('access_token'),
					},
					data: {
						"toolBar": 0,
						"deviceSerial": item.deviceSerial,
						"channelNo": 1,
						"videoLevel": 1,
						"audio": 1,
						"autoPlay": 1,
						"protocol": 3, //流播放协议，1-ezopen、2-hls、3-rtmp、4-flv，默认为1
						"projectId": item.projectId,
						"supportH265": 1 //是否要求视频为H265编码格式默认1
					},
					success: (res) => {
						console.log(res)
						if (res.data.code == 200) {
							this.url.push({
								url: res.data.data.url,
								deviceName: item.deviceName
							})
							this.urlList = this.url
						} else if(res.data.msg.indexOf("The device is offline") != -1){
							this.$refs.uToast.show({
								title: '设备离线'
							})
						} else {
							this.$refs.uToast.show({
								title: res.data.msg
							})
						}
					}
				});
			}
		},
	}
</script>

<style scoped lang="scss">

</style>