uniapp2/pages/videoList/videoList.vue

<template>

	<view class="">
		<view v-if="loadingStatus" class="loadingMask">Loading...</view>
		<view class="cu-list menu-avatar">
			
			<view v-if="!this.openId&&!this.onLineVideoList.length" class="text-center margin-top-lg">加载中...</view>
		<view v-if="!this.matchedDeviceList.length&&this.onLineVideoList.length" class="text-center margin-top-lg">暂无数据</view>
			
			<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in matchedDeviceList"
			 :key="index" :data-target="'move-box-' + index">
				<view v-if="item.ALIVEVALUE==3" class="cu-avatar round lg" style="background-image:url(../../static/video-icon-on.png);opacity:.7"></view>
				<view v-else class="cu-avatar round lg" style="background-image:url(../../static/video-icon-off.png);opacity:.7"></view>
				<view v-if="item.ALIVEVALUE==3" @tap="open_video(item)">
					<view class="content">
						<view class="">{{item.DEVICE}}</view>
					</view>
					<view class="nav-right num">
						<view class="online">
							在线
							<text class="icon iconfont margin-right-xs margin-left-lg">&#xe629;</text>
						</view>

					</view>
				</view>

				<view v-else>
					<view class="content">
						<view class="">{{item.DEVICE}}</view>
					</view>
					<view class="nav-right num">

						<view class="offline">
							离线
							<text class="icon iconfont margin-right-xs margin-left-lg">&#xe629;</text>
						</view>
					</view>
				</view>

			</view>
		</view>

		<input type="hidden" v-model="openId" style="opacity:0">
	</view>
</template>

<script>
	export default {
		data() {
			return {

				d: {
					CMD: 1
				},
				deviceData: [],
				onLineVideoList: [],
				matchedDeviceList: [],
				modalName: null,



				openId: '',
				reCount: 0,
				count: 0,
				loadingStatus: false

			};
		},
		onLoad: function(option) {

			this.companyCode = option.companyCode
			this.deviceType = option.deviceType
			this.getDeviceManage({
				"companyCode": option.companyCode,
				"deviceType": option.deviceType
			})
			var _this=this
			setTimeout(function () {
			 	_this.chk_video()
			}, 100);

		



		},
		computed: {

		},
		methods: {

			chk_video() {
				uni.request({
					url:this.companyCode==2?'http://124.71.175.91:80/cgi-bin/demo2.cgi': 'https://fire.usky.cn:8443/YtIoT/cgi-bin/demo2.cgi',
					data: 'queryJson:' + JSON.stringify({
						CMD: 1
					}),
					method: 'post',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
					},
					success: (res) => {
						this.onLineVideoList = res.data.RESULT.LIST;
						if (this.openId.length > 0) {
							console.log('doododododododo')
							for (var n = 0; n < this.onLineVideoList.length; n++) {
								if (this.openId == this.onLineVideoList[n].DEVICE) {
									this.reCount++;
									if (this.onLineVideoList[n].ONAIR) {
										console.log(this.count)
										if ((++this.count) > 0) {
											// var mask = document.getElementById('videomask');
											// if (mask != undefined) {
											// 	removeDIV('videomask');
											// }
											this.loadingStatus = false;
											uni.navigateTo({
												url: '/pages/videoDetail/videoDetail?deviceType=2&companyCode=' + this.companyCode + '&deviceCode=' +
													this.onLineVideoList[n].DEVICE +
													'',
											});

										} else {
											setTimeout(this.chk_video, 5000);
										}
									} else {
										if (this.reCount > 7) {
											// var mask = document.getElementById('videomask');
											// if (mask != undefined) {
											// 	removeDIV('videomask');
											// }
											this.loadingStatus = false;
											// alert('远程摄像头链接超时，请稍后再试')
											uni.showToast({
												title: "远程摄像头链接超时，请稍后再试",
												icon: "none"
											});
											// $("#myPopup").popup("open");
											break;
										}
										setTimeout(this.chk_video, 5000);
									}
								}
							}
						} else {
							// console.log(this.onLineVideoList)
							// console.log(this.deviceData)
							for (var i = 0; i < this.onLineVideoList.length; i++) {
								for (var j = 0; j < this.deviceData.length; j++) {
									if (this.onLineVideoList[i].DEVICE == this.deviceData[j].deviceCode) {
										this.matchedDeviceList.push({
											"DEVICE": this.onLineVideoList[i].DEVICE,
											"ALIVEVALUE": this.onLineVideoList[i].ALIVEVALUE,
											"ONAIR": this.onLineVideoList[i].ONAIR
										})
									}
								}
							}
							// console.log('this.matchedDeviceList.length')
							// console.log(this.matchedDeviceList.length)
						}

					}
				});
			},
			open_video(item) {
				if (this.openId != item.DEVICE) {
					this.openId = item.DEVICE
				}
				for (var n = 0; n < this.onLineVideoList.length; n++) {
					if (this.onLineVideoList[n].DEVICE == this.openId) {
						if (this.onLineVideoList[n].ONAIR) {
							uni.navigateTo({
								url: '/pages/videoDetail/videoDetail?deviceType=2&companyCode=' + this.companyCode + '&deviceCode=' + item.DEVICE +
									'',
							});
							return;
						}
					}
				}
				this.count = 0;
				this.reCount = 0;
				this.loadingStatus = true
				// alert('一些loading操作')
				uni.request({
					url:this.companyCode==2?'http://124.71.175.91:80/cgi-bin/demo2.cgi': 'https://fire.usky.cn:8443/YtIoT/cgi-bin/demo2.cgi',
					data: 'queryJson:' + JSON.stringify({
						CMD: 3,
						BODY: {
							DEVICE: item.DEVICE,
							ACTION: 1,
							IDX: 7
						}
					}),
					method: 'post',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
					},
					success: (res) => {
						setTimeout(this.chk_video, 5000);
					}
				});

			},


			async getDeviceManage(ming = {}) {
				const res = await this.$myRequest({
					url: 'OperationMonitoring/getDeviceList',
					data: ming
				})
				this.deviceData = res.data.data;
				// console.log('this.deviceData')
				// console.log(this.deviceData)
			},

		}

	}
</script>

<style lang="scss">
	.loadingMask {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		background: rgba(0, 0, 0, .3);
		z-index: 1000;
		color: #000;
		justify-content: center;
		align-items: center;
		display: flex;
		text-align: center;
		padding-top: 100rpx;
		font-size: 34rpx;
	}
</style>