pinganxiaoyuan/monitorMobile/pages/monitor/index.vue

<template>
	<view @touchmove.stop@touch.stop class="inspectionCenter">
		<!-- <web-view v-if="showVideo" :webview-styles="styles" src="/hybrid/html/players.html"></web-view> -->
		<view v-show="showVideo" class="poupBox">
			<view class="contentBox">
				<!-- <web-view :webview-styles="styles" src="/hybrid/html/players.html"></web-view> -->
				<view id="url-player-test"></view>
			</view>
			<view class="bottom-content" @click="closeDialog">

			</view>
		</view>
		<view class="searchBox">
			<view class="searchLine" @click="showTree">
				<!-- <view class="searchShow"> -->
				<view class="searchLabels">
					<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">一号楼/厨房</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>
			<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" @click="toOpen">
								<view class="left-layout">
									<text>{{searchForm.alarmType}}</text>
								</view>
								<view class="right-layout">
									<image style="width: 30rpx;height:30rpx;"
										src="@/static/image/earlyWarning/arrowRight.png" mode=""></image>
								</view>
							</view>

							<!-- <jp-select-plus ref="selectPlus" :isShow="false" color="#2388FF" placeholder="请选择"
									isSearch v-model="va3" :list="listc"></jp-select-plus> -->
						</u-col>
						<u-col span="5">
							<view class="demo-layout" @click="toOpenSelect">
								<view class="left-layout">
									<text>{{searchForm.warnHand}}</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>
					<u-row style="margin-top:10px;" justify="space-between" gutter="10">
						<u-col span="12">
							<uni-datetime-picker v-model="searchForm.tick" type="datetimerange">
								<view class="demo-layout">
									<view class="startBox">
										{{searchForm.StartTick}}
									</view>
									<text>至</text>
									<view class="endBox">
										{{searchForm.EndTick}}
									</view>
									<view class="timeIcon">
										<image style="width: 30rpx;height:30rpx;"
											src="@/static/image/earlyWarning/calendar.png" mode=""></image>
									</view>
								</view>
							</uni-datetime-picker>

						</u-col>
					</u-row>
					<view class="btnBox">
						<view class="leftBtn">
							重置
						</view>
						<view class="rightBtn">
							确认
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="tableBox">
			<u-empty marginTop="100rpx" :show="false" mode="warnList" text="暂无数据"></u-empty>
			<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);">
				<u-list-item v-for="(item, index) in warnList" :key="index">
					<view class="liBox">
						<view class="topCard">
							<view class="pic">
								<image src="@/static/image/earlyWarning/warnBack.png" mode="aspectFill"></image>
								<view class="resolvingPower">
									2560*1440
								</view>
							</view>
							<view class="rightCard">
								<view class="firstCard">
									<view class="schoolName">
										摄像头ID：SXT001
									</view>
								</view>
								<view class="secondCard">

									<view class="txt">
										摄像头名称：厨房（良景）
									</view>
								</view>
								<view class="thirdCard">

									<view class="txt">
										设备IP：192.168.10.130
									</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="deleteClick(item)">
								<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" :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';
	export default {
		components: {
			tkiTree
		},
		data() {
			return {
				styles: {
					width: '100%',
					height: '100%',
					zIndex: '999999999999999999999999999'
					// bottom: '56px'
				},
				showVideo: false,
				videoTitle: '',
				isShowSearch: false,
				searchForm: {
					alarmType: '警告类型',
					warnHand: '处理状态',
					tick: [],
					StartTick: '开始时间',
					EndTick: '结束时间',
				},
				warnList: [{
					warnHand: 1
				}, {
					warnHand: 0
				}, {
					warnHand: 1
				}, {
					warnHand: 1
				}, {
					warnHand: 1
				}, {}, {}, {}, {}, ],
				isLoading: false,
				status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了
				listc: [{
						code: 1,
						name: 'dasda'
					}, {
						code: 2,
						name: 'dasda'
					},
					{
						code: 3,
						name: 'dasda'
					},
					{
						code: 4,
						name: 'dasda'
					},
					{
						code: 5,
						name: 'dasda'
					},
					{
						code: 6,
						name: 'dasda'
					},
					{
						code: 7,
						name: 'dasda'
					},
					{
						code: 8,
						name: 'dasda'
					},
					{
						code: 9,
						name: 'dasda'
					},
					{
						code: 10,
						name: 'dasda'
					},
					{
						code: 11,
						name: 'dasda'
					},
					{
						code: 12,
						name: 'dasda'
					},
					{
						code: 13,
						name: '你好'
					}
				],
				treelist: [{
					name: '111',
					value: '1',
					children: [{
						name: '111',
						value: '2',
					}]
				}],
				multiple: false, //是否多选
				selectParent: true, //父级可选择
				flod: false, //折叠
				player: null
			}
		},
		watch: {
			"searchForm.tick"() {
				console.log('日期时间:', this.searchForm.tick);

				if (this.searchForm.tick && this.searchForm.tick.length > 0) {
					this.searchForm.StartTick = this.searchForm.tick[0]
					this.searchForm.EndTick = this.searchForm.tick[1]
				}

			},
		},
		mounted() {

		},
		onLoad() {
			// 隐藏导航栏
			this.loadmore()
		},
		methods: {
			setVideo() {
				this.loadWebPlayerSDK().then(() => {
					// 如果需要使用自定义组件，打开以下注释
					// this.loadComponent().then(() => {
					this.player = new Aliplayer({
						id: "url-player-test",
						source: "artc://rts-pull-live.deepeleph.com/quanjiang_DEMO00001/SXT003-0?auth_key=1724987674-0-0-df36ae3670785249c50e05cdb93e28ea&aliyun_uuid=286f58e41cc04c0393434b6856f29d07",
						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);
						this.player.tag.play();
					});



					// }).catch((e) => { console.log("加载组件失败", e) })
				}).catch((e) => {
					console.log("加载播放器SDK失败", e);
				});
			},
			closeDialog() {
				this.player.dispose();
				this.showVideo = false;
			},
			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.form.groupName = e[0].name
				// this.form.groupId = e[0].id
			},
			// 取消回调事件
			treeCancel(e) {
				// console.log(e)
			},
			// 显示树形选择器
			showTree() {
				this.$refs.tkitree._show();
			},
			cancelVideo() {
				console.log(11111)
				this.showVideo = false;
			},
			deleteClick() {
				this.showVideo = true;
				this.setVideo()
			},
			confirmVideo() {
				this.showVideo = false;
			},
			// 跳转处理页面
			toHandle(row) {
				if (row.warnHand == 1) {
					uni.navigateTo({
						url: '/pages/earlyWarning/handlingSuggestions'
					});
				}

			},
			// 跳转详情页面
			toDetail(row) {
				uni.navigateTo({
					url: '/pages/earlyWarning/detail'
				});
			},
			// 预警类型弹框筛选
			toOpen() {
				this.$refs.selectSearchBox.show = true;
			},
			// 处理情况筛选
			toOpenSelect() {
				this.$refs.selectRadioBox.show = true;
			},
			// 打开筛选框
			openSearch() {
				this.isShowSearch = !this.isShowSearch;
			},
			isSelect() {

			},
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				if (this.status != 'loadmore') return
				this.status = 'loading'
				setTimeout(() => {
					for (let i = 0; i < 1; i++) {
						this.warnList.push({}, {})
					}
					// 获取到的总条数>=接口总条数
					if (this.warnList.length >= 14) {
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
					}
				}, 2000)
			}
		}
	}
</script>

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



	// .contentBox {
	// 	height: calc(100% - 375rpx);
	.inspectionCenter {
		width: 100%;
		height: 100%;
		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.2);

			.contentBox {
				// z-index: 1000000;
				width: 100%;
				height: 500rpx;
				// margin: 50rpx auto;
			}

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

	.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>