pinganxiaoyuan/monitorMobile/pages/monitor/index.vue

<template>
	<view class="inspectionCenter">
		<view v-show="showVideo" class="poupBox">
			<view class="videoHeader">

			</view>
			<view class="contentBox">
				<view class="closeBox">
					<view class="title">
						{{sensorName+'(' + sensorId + ')'}}
					</view>
					<view class="closes" @click="closeDialog">
						<u-icon name="close-circle-fill" color="#ccc" size="22"></u-icon>
					</view>
				</view>
				<view class="botbox">
					<view id="url-player-test"></view>
				</view>

			</view>
			<view class="bottom-content">

			</view>
		</view>
		<view class="searchBox">
			<view class="searchLine">
				<view class="searchLabels" @click="showTree">
					<image v-show="isShowSearch==false" src="@/static/image/earlyWarning/group.png" mode="">
					</image>
					<image v-show="isShowSearch" src="@/static/image/earlyWarning/group2.png" mode="">
					</image>
					<text class="labels">选择分组</text>
					<view class="values">{{this.searchForm.groupName}}</view>
				</view>

				<view class="arrow">
					<image v-show="isShowSearch==false" src="@/static/image/earlyWarning/arrow1.png" mode="">
					</image>
					<image v-show="isShowSearch" src="@/static/image/earlyWarning/arrow2.png" mode=""></image>
				</view>
			</view>
			<view @click="isShowSearch=false" class="searchDialog" v-if="isShowSearch">
				<view class="content" @click.stop="isSelect">
					<u-row justify="space-between" gutter="10">
						<u-col span="7">
							<view class="demo-layout">
								<view class="left-layout">
									<text>{{'警告类型'}}</text>
								</view>
								<view class="right-layout">
									<image style="width: 30rpx;height:30rpx;"
										src="@/static/image/earlyWarning/arrowRight.png" mode=""></image>
								</view>
							</view>
						</u-col>
						<u-col span="5">
							<view class="demo-layout" @click="toOpenSelect">
								<view class="left-layout">
									<text>{{'处理状态'}}</text>
								</view>
								<view class="right-layout">
									<image style="width: 30rpx;height:30rpx;"
										src="@/static/image/earlyWarning/arrowRight.png" mode=""></image>
								</view>
							</view>
						</u-col>
					</u-row>

					<view class="btnBox">
						<view class="leftBtn" @click="clearform">
							重置
						</view>
						<view class="rightBtn" @click="onsubmit">
							确认
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tableBox">
			<u-empty marginTop="100rpx" :show="monitorList.length == 0&&status == 'nomore'" mode="list"
				text="暂无数据"></u-empty>
			<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);">
				<u-list-item v-for="(item, index) in monitorList" :key="index">
					<view class="liBox">
						<view class="topCard">
							<view class="pic">
								<image :src="item.snapshotUrl" mode="aspectFill"></image>
								<view class="resolvingPower">
									{{item.resWidth}}*{{item.resHeight}}
								</view>
							</view>
							<view class="rightCard">
								<view class="firstCard">
									<view class="schoolName">
										摄像头ID：{{item.sensorId}}
									</view>
								</view>
								<view class="secondCard">

									<view class="txt">
										摄像头名称：{{item.sensorName}}
									</view>
								</view>
								<view class="thirdCard">

									<view class="txt">
										设备IP：{{item.directUrlIp}}
									</view>
								</view>
								<view class="thirdCard">
									<view class="txt">
										状态：
										<text v-if="item.deviceStatus" style="color: #67c23a;">在线</text>
										<text v-else style="color: #db2777;">离线</text>
									</view>
								</view>
							</view>
						</view>

						<view class="btoCard">
							<view class="leftBox btoBox">
								<image src="@/static/image/earlyWarning/school.png" mode=""></image>
								<view class="txt">
									所属学校：演示学校
								</view>
							</view>
							<view class="rightBox btoBox" @click="startClick(item.sensorId,item.sensorName)">
								<view class="txt">
									播放
								</view>
							</view>
						</view>
					</view>
				</u-list-item>
				<u-loadmore :status="status" />
			</u-list>
		</view>

		<!-- <web-view :webview-styles="styles" src="/hybrid/html/players.html"></web-view> -->
		<!-- <u-modal :show="showVideo" :title="videoTitle" :closeOnClickOverlay="false" :showCancelButton="true"
			@confirm="confirmVideo" @cancel="cancelVideo">
			<view class="slot-content">
				<cover-view style="width: 100%;height:500px">

				</cover-view>

			</view>
		</u-modal> -->
		<tki-tree ref="tkitree" title="摄像头分组" :showChild="showChild" :selectParent="selectParent" :multiple="multiple"
			:range="treelist" :foldAll="flod" rangeKey="name" @confirm="treeConfirm" @cancel="treeCancel"></tki-tree>
	</view>
</template>

<script>
	import tkiTree from '@/components/tki-tree/tki-tree.vue';
	import {
		groupList, //获取摄像头分组
		list, //获取摄像头列表
		startUrl, //说去视频地址
		stopUrl //停止视频流获取
	} from '@/api/monitor/index.js'
	export default {
		components: {
			tkiTree
		},
		data() {
			return {
				styles: {
					width: '100%',
					height: '100%',
					zIndex: '999999999999999999999999999'
					// bottom: '56px'
				},
				showVideo: false,
				videoTitle: '',
				isShowSearch: false,
				searchForm: {
					groupName: '全部',
					groupId: '',
					pageNum: 1,
					pageSize: 10
				},
				monitorList: [],
				isLoading: false,
				status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了
				treelist: [],
				multiple: false, //是否多选
				selectParent: true, //父级可选择
				flod: false, //折叠
				showChild: true,
				player: null,
				sensorId: '',
				sensorName: '',
				videoUrl: '',
				streamId: '',
				videoToken: '',
			}
		},
		watch: {

		},
		mounted() {

		},
		onLoad() {
			this.getGroupList()
			// 获取列表数据
			this.loadmore()
		},
		onUnload() {
			if (this.showVideo) {
				this.closeDialog()
			}

		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
			this.status = 'loadmore'
			this.searchForm.pageNum = 1;
			this.monitorList = []
			this.loadmore()
		},
		methods: {

			setVideo() {
				let that = this;
				this.loadWebPlayerSDK().then(() => {
					// 如果需要使用自定义组件，打开以下注释
					// this.loadComponent().then(() => {
					this.player = new Aliplayer({
						id: "url-player-test",
						source: this.videoUrl + "&subaudio=no&jitterbuffer=6000",
						width: "100%",
						height: "100%",
						isLive: true,
						rtsFallback: true,
						rtsFallbackType: 'HLS',
					}, function(player) {
						player.mute()
					});

					this.player.one('canplay', function() {
						// console.log('canplay', this.player.tag);
						that.player.tag.play();
					});



					// }).catch((e) => { console.log("加载组件失败", e) })
				}).catch((e) => {
					console.log("加载播放器SDK失败", e);
				});
			},
			closeDialog() {
				if (this.player) {
					this.player.dispose();
				}

				this.showVideo = false;
				let params = {
					sensorId: this.sensorId,
					streamId: this.streamId,
					videoToken: this.videoToken
				};
				stopUrl(params).then(res => {

				})
			},
			loadWebPlayerSDK() {
				return new Promise((resolve, reject) => {
					const s_tag = document.createElement('script'); // 引入播放器js
					s_tag.type = 'text/javascript';
					s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/aliplayer-min.js'

					// s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js';
					s_tag.charset = 'utf-8';
					s_tag.onload = () => {
						resolve();
					}
					document.body.appendChild(s_tag);
					const l_tag = document.createElement('link'); // 引入播放器css
					l_tag.rel = 'stylesheet';
					l_tag.href =
						'https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/skins/default/aliplayer-min.css'
					// 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css';
					document.body.appendChild(l_tag);
				});
			},
			loadComponent() {
				return new Promise((resolve, reject) => {
					const s_tag = document.createElement('script');
					s_tag.type = 'text/javascript';
					// 需要先下载组件 js 文件，放到项目 /static/ 目录下
					// 下载地址：https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.0.9.min.js
					s_tag.src = './static/aliplayercomponents-1.0.9.min.js';
					s_tag.charset = 'utf-8';
					s_tag.onload = () => {
						resolve();
					}
					document.body.appendChild(s_tag);
				});
			},

			addAttribute(data) { // tree结构递归添加属性
				for (var i = 0; i < data.length; i++) {
					data[i].isShow = false
					data[i].name = data[i].title
					if (data[i].children && data[i].children.length > 0) {
						this.addAttribute(data[i].children)
					}
				}
				return data
			},
			// 确定回调事件
			treeConfirm(e) {
				this.searchForm.groupName = e[0].name;
				this.searchForm.groupId = e[0].id;
				this.status = 'loadmore'
				this.searchForm.pageNum = 1;
				this.monitorList = []
				this.loadmore()
			},
			// 取消回调事件
			treeCancel(e) {
				// console.log(e)
			},
			// 显示树形选择器
			showTree() {
				this.$refs.tkitree._show();
			},
			cancelVideo() {
				this.showVideo = false;
			},
			getGroupList() {
				groupList({}).then((res) => {
					if (res.code == 200) {
						this.treelist = [...[{
							id: "",
							name: "全部",
							checked: true
						}], ...res.data];
					}
				});
			},
			// 获取视频地址
			startClick(id, name) {
				this.sensorId = id;
				this.sensorName = name;
				this.showVideo = true;

				startUrl({
					sensorId: id
				}).then(res => {

					let {
						code,
						data
					} = res;
					if (code == 200) {
						this.videoUrl = data.rtsPullStreamUrls[0].url;
						this.streamId = data.streamId;
						this.videoToken = data.videoToken;
						this.setVideo()
					}
				})

			},
			confirmVideo() {
				this.showVideo = false;
			},

			isSelect() {

			},
			scrolltolower() {
				if (this.status == 'loading' || this.status == 'nomore') {
					return;
				}
				this.searchForm.pageNum += 1;
				this.loadmore()
			},
			loadmore() {
				if (this.status != 'loadmore') return
				this.status = 'loading'
				this.isLoading = true;
				list(this.searchForm).then(res => {
					if (res?.code === 200) {
						this.monitorList = [...this.monitorList, ...res?.data?.list];
						this.isLoading = false;
						// 获取到的总条数>=接口总条数
						if (this.monitorList.length >= res.data.total) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20px;
		font-size: 14px;
		height: 800px;
	}



	// .contentBox {
	// 	height: calc(100% - 375rpx);
	.inspectionCenter {
		width: 100%;
		height: calc(100% - 88rpx);
		position: relative;

		.u-modal__title {
			color: #000000;
		}

		.poupBox {
			height: 100vh;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			z-index: 100000000000000;
			// background: red;
			background: rgba(0, 0, 0, 0.5);

			.videoHeader {
				height: 255rpx;
			}

			.contentBox {
				// z-index: 1000000;
				width: 100%;
				height: 590rpx;
				background: #000;

				// margin: 50rpx auto;
				.closeBox {
					text-align: right;
					height: 80rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 25rpx;
					background: #fff;

					.title {
						font-weight: 700;
						font-size: 28rpx;
					}

					.closes {

						// background: #ccc;
					}
				}

				.botbox {
					height: calc(100% - 80rpx);
				}
			}

			.bottom-content {
				height: calc(100% - 590rpx -255rpx);
			}
		}
	}

	.searchBox {
		// height: calc(100% - 360rpx);
		position: relative;



		.searchLine {
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 15px;
			box-sizing: border-box;
			background: #fff;
			font-size: 28rpx;

			.searchLabels {
				display: flex;
				align-items: center;
				width: calc(100% - 34rpx);

				image {
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 1;
				}

				.labels {
					width: 120rpx;
					display: block;
					color: #333333;
					margin-left: 10rpx;
					flex-shrink: 1;
				}

				.values {
					width: calc(100% - 40rpx - 120rpx);
					color: #2388FF;
					font-weight: 700;
					margin-left: 18rpx;
					overflow: hidden;
					word-wrap: break-word;
					white-space: pre-wrap;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}
			}


			.arrow {
				// text-align: right;
				// flex-shrink: 1;

				image {
					width: 34rpx;
					height: 34rpx;
				}
			}

			.leftSearchBox {
				display: flex;
				align-items: center;
				width: calc(100% - 40px);

				.searchLabel {
					flex-shrink: 1;
					color: #333333;
					width: 80px;
				}

				.searchValue {
					width: calc(100% - 60px);
					margin-left: 10px;
					color: #2388FF;
					overflow: hidden;
					word-wrap: break-word;
					white-space: pre-wrap;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}
			}
		}

		.searchDialog {
			position: absolute;
			z-index: 990;
			top: 89rpx;
			width: 100%;
			height: calc(100vh - 375rpx - 100rpx);
			font-size: 26rpx;
			background: rgba(0, 0, 0, 0.2);

			.content {
				background: #FFFFFF;
				padding: 15px;
				box-sizing: border-box;
				border-top: 1px solid rgba(0, 0, 0, 0.1);

				.demo-layout {
					height: 80rpx;
					border-radius: 8rpx;
					background: #F5F5F5;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 10px;
					box-sizing: border-box;

					.left-layout {
						color: #777777;
					}

					.right-layout {}

					.startBox {
						color: #777777;
					}

					text {
						color: #777777;
					}

					.endBox {
						color: #777777;
					}

					.timeIcon {}
				}
			}

			.btnBox {
				display: flex;
				align-items: center;
				margin-top: 15px;

				.leftBtn {
					width: 50%;
					height: 74rpx;
					line-height: 74rpx;
					border: 1px solid #BABABA;
					border-radius: 12rpx;
					color: #333333;
					text-align: center;

				}

				.rightBtn {
					width: 50%;
					height: 74rpx;
					line-height: 74rpx;
					border: 1px solid #2388FF;
					border-radius: 12rpx;
					color: #fff;
					text-align: center;
					background: #2388FF;
					margin-left: 15rpx;
				}
			}
		}
	}

	.tableBox {
		height: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;

		.liBox {
			background: #fff;
			padding: 24rpx 30rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			margin-top: 30rpx;

			.topCard {
				display: flex;
				align-items: center;

				.pic {
					position: relative;
					width: 268rpx;
					height: 201rpx;

					image {
						width: 268rpx;
						height: 201rpx;
						border-radius: 4px;
					}

					.resolvingPower {
						position: absolute;
						top: 15rpx;
						right: 15rpx;
						background: #000000;
						color: #fff;
						padding: 8rpx;
						box-sizing: border-box;
						font-size: 20rpx;
						border-radius: 4rpx;
						font-family: 'PingFang SC';
					}
				}

				.rightCard {
					margin-left: 20rpx;

					.firstCard {
						display: flex;
						justify-content: space-between;
						align-items: center;
						// margin-bottom: 60rpx;

						.schoolName {
							font-size: 32rpx;
							font-family: 'PingFang SC';
							font-weight: 700;
							color: #333333;
							overflow: hidden;
							word-wrap: break-word;
							white-space: pre-wrap;
							// font-size: 14px;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
						}
					}

					.secondCard,
					.thirdCard {
						display: flex;
						align-items: center;
						margin-top: 16rpx;

						.txt {
							font-size: 26rpx;
							font-family: 'PingFang SC';
							color: #333333;
						}
					}
				}
			}

			.btoCard {
				border-top: 1px solid rgba(0, 0, 0, 0.1);
				margin-top: 24rpx;
				padding: 24rpx 0 0 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.btoBox {
					// width: 33.3%;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					font-size: 26rpx;
					color: #333;
					font-family: 'PingFang SC';

					image {
						width: 36rpx;
						height: 36rpx;
						margin-right: 15rpx;
					}
				}

				.rightBox {
					width: 120rpx;
					height: 60rpx;
					background: #2388FF;
					color: #fff;
					border-radius: 80rpx;
				}
			}
		}

	}

	// }
</style>