监控弹框修改

monitorMobile/pages/monitor/index.vue

@@ -1,10 +1,24 @@
 <template>
 	<view class="inspectionCenter">
 		<view v-show="showVideo" class="poupBox">
+			<view class="videoHeader">
+
+			</view>
 			<view class="contentBox">
-				<view id="url-player-test"></view>
+				<view class="closeBox">
+					<view class="">
+						
+					</view>
+					<view class="closes" @click="closeDialog">
+						<u-icon name="close-circle-fill" color="#ccc" size="24"></u-icon>
+					</view>
+				</view>
+				<view class="botbox">
+					<view id="url-player-test"></view>
+				</view>
+				
 			</view>
-			<view class="bottom-content" @click="closeDialog">
+			<view class="bottom-content">
 
 			</view>
 		</view>
@@ -125,8 +139,8 @@
 
 			</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>
+		<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>
 
@@ -185,7 +199,13 @@
 			// 获取列表数据
 			this.loadmore()
 		},
-		onPullDownRefresh(){
+		onUnload() {
+			if(this.showVideo) {
+				this.closeDialog()
+			}
+			
+		},
+		onPullDownRefresh() {
 			uni.stopPullDownRefresh()
 			this.status = 'loadmore'
 			this.searchForm.pageNum = 1;
@@ -193,7 +213,7 @@
 			this.loadmore()
 		},
 		methods: {
-			
+
 			setVideo() {
 				let that = this;
 				this.loadWebPlayerSDK().then(() => {
@@ -208,7 +228,7 @@
 						rtsFallback: true,
 						rtsFallbackType: 'HLS',
 					}, function(player) {
-						// player.mute()
+						player.mute()
 					});
 
 					this.player.one('canplay', function() {
@@ -304,21 +324,25 @@
 				this.showVideo = false;
 			},
 			getGroupList() {
-			  groupList({}).then((res) => {
-			    if (res.code == 200) {
-			      this.treelist = [...[{id: "",name: "全部",checked: true}], ...res.data];
-			    }
-			  });
+				groupList({}).then((res) => {
+					if (res.code == 200) {
+						this.treelist = [...[{
+							id: "",
+							name: "全部",
+							checked: true
+						}], ...res.data];
+					}
+				});
 			},
 			// 获取视频地址
 			startClick(id) {
 				this.sensorId = id;
 				this.showVideo = true;
-				
+
 				startUrl({
 					sensorId: id
 				}).then(res => {
-					
+
 					let {
 						code,
 						data
@@ -396,18 +420,39 @@
 			width: 100%;
 			z-index: 100000000000000;
 			// background: red;
-			background: rgba(0, 0, 0, 0.2);
+			background: rgba(0, 0, 0, 0.5);
+
+			.videoHeader {
+				height: 255rpx;
+			}
 
 			.contentBox {
 				// z-index: 1000000;
 				width: 100%;
-				height: 500rpx;
+				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;
+					.closes {
+						
+						// background: #ccc;
+					}
+				}
+				.botbox {
+					height:calc(100% - 80rpx);
+				}
 			}
 
 			.bottom-content {
-				height: calc(100% - 500rpx);
+				height: calc(100% - 590rpx -255rpx);
 			}
 		}
 	}