From 1a6b4885b82de669be38a9b125e9a3abb90be265 Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Tue, 27 Aug 2024 08:55:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8A=E8=A3=85=E8=A7=86=E9=A2=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/dz_video.html                          | 385 +++++++++---------
 .../manage/hoistManage/hoistManage.vue        |  44 +-
 2 files changed, 222 insertions(+), 207 deletions(-)
diff --git a/public/dz_video.html b/public/dz_video.html
index 11b0134..dcf56e7 100644
--- a/public/dz_video.html
+++ b/public/dz_video.html
@@ -1,210 +1,205 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-<meta charset="utf-8">
-<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
-<meta name="viewport" content="width=device-width,initial-scale=1">
+	<meta charset="utf-8">
+	<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
+	<meta name="viewport" content="width=device-width,initial-scale=1">
 
-<style type="text/css" >
-  html, body {
-    overflow: hidden;
-    height: 100%;
-    width: 100%;
-    margin: 0;
-  }
-  button {
-  	font-size: 12px;
-  	color: #232323;
-  }
-</style>
-
-<link href="css/chunk-common.css" rel="stylesheet">
-
-<script type="text/javascript">
-	var video;
-	
-    window.onVideoRealPlayLoad = function(suport, v) {
-    	if (suport == false) return alert("不支持该浏览器！");
-    	video = v;
-    	//this.init();
-    }
-
-	//初始化================================================================================================
-	
-	function init() {
-		var videoIp = document.getElementById("videoIp").value;
-		var videoPort = parseInt(document.getElementById("videoPort").value);
-		var timeout = document.getElementById("timeout").value;
-		var user = document.getElementById("user").value;
-		var pwd = document.getElementById("pwd").value;
-		var row = parseInt(document.getElementById("row").value);
-		var col = parseInt(document.getElementById("col").value);
-		
-		video.init({ip:videoIp, port:videoPort, user:user, pwd:pwd, timeout:timeout, row:row, col:col, toolbar:'top'/*top|bottom|false*/, onServerOpen:onServerOpen, onServerClose:onServerClose, onVideoClose:onVideoClose});
-	}
-	
-	function onServerOpen(time) {
-		alert("第"+time+"次连接上视频服务器");
-	}
-
-	function onServerClose(time) {
-		alert("第"+time+"次断开视频服务器");
-	}
-
-	//视频================================================================================================
-	
-	function onVideoClose(sim, chn) {
-		alert("视频关闭 SIM卡号:"+sim+" 通道号:"+chn);
-	}
-
-	function playVideo() {
-		var playTitle = document.getElementById("playTitle").value;
-		var playSim = document.getElementById("playSim").value;
-		var playChn = document.getElementById("playChn").value;
-		var playStream = 1;// 0-清晰(主码流); 1-流畅(子码流)  可不传该参数
-		var cloud = document.getElementById("cloud").checked;
-		
-		var ret = video.playVideo(playTitle, playSim, playChn, playStream, cloud);
-		if (ret === 1) {
-			alert("成功播放");
-		} else if (ret === -1) {
-			alert("窗口播放满了,不播放");
-		} else if (ret === 0) {
-			alert("该设备通道已经有窗口在播放");
+	<style type="text/css">
+		html,
+		body {
+			overflow: hidden;
+			height: 100%;
+			width: 100%;
+			margin: 0;
 		}
-	}
-	
-	function closeVideo() {
-		var playSim = document.getElementById("playSim").value;
-		var playChn = document.getElementById("playChn").value;
-		video.closeVideo(playSim, playChn);
-	}
-	
-	//对讲================================================================================================
-	
-	function playTalk() {
-		var sim = document.getElementById("sim").value;
-		var chn = document.getElementById("chn").value;
-		video.playTalk(sim, chn, onTalkResult, onTalkClose);
-	}
-	
-	function onTalkResult(state, sim, chn, tip) {
-		if (state === 0) return alert("设备请求失败　SIM卡号:"+sim+" 通道号:"+chn+" 原因:"+tip);
-		if (state === 1) return alert("对讲成功　SIM卡号:"+sim+" 通道号:"+chn);
-		if (state === 2) return alert("设备请求成功，但获取不到麦克风！　SIM卡号:"+sim+" 通道号:"+chn+" 原因:"+tip);
-	}
-	
-	function onTalkClose(sim, chn) {
-		alert("对讲关闭　SIM卡号:"+sim+" 通道号:"+chn);
-	}
-	
-	function closeTalk() {
-		video.closeTalk();
-	}
-	
-	//监听================================================================================================
-	
-	function playListen() {
-		var sim = document.getElementById("sim").value;
-		var chn = document.getElementById("chn").value;
-		video.playListen(sim, chn, onListenResult, onListenClose);
-	}
-	
-	function onListenResult(state, sim, chn, tip) {
-		if (state === 0) return alert("设备监听失败　SIM卡号:"+sim+" 通道号:"+chn+" 原因:"+tip);
-		if (state === 1) return alert("监听成功　SIM卡号:"+sim+" 通道号:"+chn);
-	}
-	
-	function onListenClose(sim, chn) {
-		alert("监听关闭　SIM卡号:"+sim+" 通道号:"+chn);
-	}
-	
-	function closeListen() {
-		video.closeListen();
-	}
-	
-	//布局================================================================================================
-	
-	function regrid() {
-		var row = document.getElementById("row").value;
-		var col = document.getElementById("col").value;
-		video.regrid(parseInt(row), parseInt(col));
-	}
 
-	//关闭全部================================================================================================
-	
-	function closeAll() {
-		video.closeAll();
-	}
+		button {
+			font-size: 12px;
+			color: #232323;
+		}
+	</style>
 
-	//销毁全部================================================================================================
-	
-	function destroy() {
-		video.destroy();
-		video = null;
-	}
-	
-	function toolbar(v) {
-		video && (video.toolbar = v);
-	}
-</script>
+	<link href="css/chunk-common.css" rel="stylesheet">
+
+	<script type="text/javascript">
+		let devCode = null;
+		// 接受父页面传递的参数
+		window.addEventListener('message', function (event) {
+			const params = event.data;
+			console.error(params);
+			// 获取到设备编码并进行处理
+			devCode = params.devCode;
+			this.init();
+		}, false);
+		// 视频参数
+		const videoParam = {
+			'videoIp': '8.142.156.35',
+			'videoPort': 9988,
+			'timeout': 0,
+			'user': 'TSH',
+			'pwd': '77804d2ba1922c33',
+			'row': 2,
+			'col': 2,
+		};
+		var video;
+		window.onVideoRealPlayLoad = function (suport, v) {
+			if (suport == false) return alert("不支持该浏览器！");
+			video = v;
+			// 设置播放窗口为 2 * 2
+			video.regrid(2, 2);
+		}
+
+		//初始化================================================================================================
+
+		async function init() {
+			var videoIp = videoParam.videoIp;
+			var videoPort = videoParam.videoPort;
+			var timeout = videoParam.timeout;
+			var user = videoParam.user;
+			var pwd = videoParam.pwd;
+			var row = videoParam.row;
+			var col = videoParam.col;
+			video.init({ ip: videoIp, port: videoPort, user: user, pwd: pwd, timeout: timeout, row: row, col: col, toolbar: 'top'/*top|bottom|false*/, onServerOpen: onServerOpen, onServerClose: onServerClose, onVideoClose: onVideoClose });
+			setTimeout(() => {
+				loopPlayVideo();
+			}, 1500);
+		}
+
+		/* 循环播放视频 */
+		async function loopPlayVideo() {
+			for (let index = 1; index <= 4; index++) {
+				let obj = {
+					playTitle: "通道" + index,
+					playSim: devCode,
+					playChn: index,
+				}
+				await playVideo(obj);
+			}
+		}
+
+		function onServerOpen(time) {
+			alert("第" + time + "次连接上视频服务器");
+		}
+
+		function onServerClose(time) {
+			alert("第" + time + "次断开视频服务器");
+		}
+
+		//视频================================================================================================
+
+		function onVideoClose(sim, chn) {
+			console.log("视频关闭 SIM卡号:" + sim + " 通道号:" + chn);
+		}
+
+		async function playVideo(obj) {
+			return new Promise((resolve, reject) => {
+				setTimeout(() => {
+					var playTitle = obj.playTitle;
+					var playSim = obj.playSim;
+					var playChn = obj.playChn;
+					var playStream = 1;// 0-清晰(主码流); 1-流畅(子码流)  可不传该参数
+					var cloud = true;
+					var ret = video.playVideo(playTitle, playSim, playChn, playStream, cloud);
+					if (ret === 1) {
+						console.error(playSim + '-' + playChn + '成功播放');
+						resolve(true);
+					} else if (ret === -1) {
+						alert("窗口播放满了,不播放");
+						reject(false);
+					} else if (ret === 0) {
+						alert("该设备通道已经有窗口在播放");
+						reject(false);
+					}
+				}, 1000);
+			});
+		}
+
+		function closeVideo() {
+			var playSim = document.getElementById("playSim").value;
+			var playChn = document.getElementById("playChn").value;
+			video.closeVideo(playSim, playChn);
+		}
+
+		//对讲================================================================================================
+
+		function playTalk() {
+			var sim = document.getElementById("sim").value;
+			var chn = document.getElementById("chn").value;
+			video.playTalk(sim, chn, onTalkResult, onTalkClose);
+		}
+
+		function onTalkResult(state, sim, chn, tip) {
+			if (state === 0) return alert("设备请求失败　SIM卡号:" + sim + " 通道号:" + chn + " 原因:" + tip);
+			if (state === 1) return alert("对讲成功　SIM卡号:" + sim + " 通道号:" + chn);
+			if (state === 2) return alert("设备请求成功，但获取不到麦克风！　SIM卡号:" + sim + " 通道号:" + chn + " 原因:" + tip);
+		}
+
+		function onTalkClose(sim, chn) {
+			alert("对讲关闭　SIM卡号:" + sim + " 通道号:" + chn);
+		}
+
+		function closeTalk() {
+			video.closeTalk();
+		}
+
+		//监听================================================================================================
+
+		function playListen() {
+			var sim = document.getElementById("sim").value;
+			var chn = document.getElementById("chn").value;
+			video.playListen(sim, chn, onListenResult, onListenClose);
+		}
+
+		function onListenResult(state, sim, chn, tip) {
+			if (state === 0) return alert("设备监听失败　SIM卡号:" + sim + " 通道号:" + chn + " 原因:" + tip);
+			if (state === 1) return alert("监听成功　SIM卡号:" + sim + " 通道号:" + chn);
+		}
+
+		function onListenClose(sim, chn) {
+			alert("监听关闭　SIM卡号:" + sim + " 通道号:" + chn);
+		}
+
+		function closeListen() {
+			video.closeListen();
+		}
+
+		//布局================================================================================================
+
+		function regrid() {
+			var row = document.getElementById("row").value;
+			var col = document.getElementById("col").value;
+			video.regrid(parseInt(row), parseInt(col));
+		}
+
+		//关闭全部================================================================================================
+
+		function closeAll() {
+			video.closeAll();
+		}
+
+		//销毁全部================================================================================================
+
+		function destroy() {
+			video.destroy();
+			video = null;
+		}
+
+		function toolbar(v) {
+			video && (video.toolbar = v);
+		}
+	</script>
 </head>
-  
-<body>
- 	<div style="border:1px solid #D6D6D6;background:#F5F5F5;padding:5px;margin:5px;">
-		<span>视频服务器IP</span>
-		<input type="text" id="videoIp" value="8.142.156.35" style="width:100px;">
-		<span style="margin-left:5px;">端口</span>
-		<input type="text" id="videoPort" value="9988" style="width:30px;">
-		<span style="margin-left:5px;">未操作关闭(0不关闭)</span>
-		<input type="text" id="timeout" value="300" style="width:30px;">
-		<span>秒</span>
-		<span style="margin-left:5px;">登录用户</span>
-		<input type="text" id="user" value="TSH" style="width:47px;">&nbsp;&nbsp;
-		<span style="margin-left:5px;">登录密码</span>
-		<input type="text" id="pwd" value="77804d2ba1922c33" style="width:120px;">&nbsp;&nbsp;
-		<button onclick="init()">初始化</button>
-	</div>
-	<div style="border:1px solid #D6D6D6;background:#F5F5F5;padding:5px;margin:-6px 5px 5px 5px;">
-		<span>设备SIM卡号</span>
-		<input type="text" id="playSim" value="19500000002" style="width:100px;">
-		<span style="margin-left:5px;">通道号</span>
-		<input type="text" id="playChn" value="1" style="width:30px;">
-		<span style="margin-left:5px;">标题</span>
-		<input type="text" id="playTitle" value="车辆A-通道B" style="margin-left:5px;width:95px;">
-		<span style="margin-left:5px;">云台</span>
-		<input type="checkbox" id="cloud" checked/>&nbsp;&nbsp;
-		<button type="button" onclick="playVideo()">播放视频</button>
-		<button type="button" onclick="closeVideo()">停止视频</button>
-	</div>
-	<div style="border:1px solid #D6D6D6;background:#F5F5F5;padding:5px;margin:-6px 5px 5px 5px;">
-		<span>设备SIM卡号</span>
-		<input type="text" id="sim" value="19500000002" style="width:100px;">
-		<span style="margin-left:5px;">通道号</span>
-		<input type="text" id="chn" value="2" style="width:30px;">&nbsp;
-		<button type="button" onclick="playTalk()">开始对讲</button>
-		<button type="button" onclick="closeTalk()">停止对讲</button>&nbsp;&nbsp;
-		<button type="button" onclick="playListen()">开始监听</button>
-		<button type="button" onclick="closeListen()">停止监听</button>
-	</div>
-	<div style="border:1px solid #D6D6D6;background:#F5F5F5;padding:5px;margin:-6px 5px 5px 5px;">
-		<span>工具栏</span>
-		<button type="button" onclick="toolbar('top')">顶</button>
-		<button type="button" onclick="toolbar('bottom')" style="margin-left:-5px;">底</button>
-		<button type="button" onclick="toolbar(false)" style="margin-left:-5px;">无</button>&nbsp;&nbsp;&nbsp;&nbsp;
-		<input type="text" id="row" value="3" style="width:15px;">行
-		<input type="text" id="col" value="3" style="width:15px;">列
-		<button type="button" onclick="regrid()">确定</button>&nbsp;&nbsp;&nbsp;&nbsp;
-		<button onclick="closeAll()" >关闭所有视频/对讲/监听</button>&nbsp;&nbsp;
-		<button onclick="destroy()">离开页面销毁</button>
-	</div>
 
-	<div style="width:calc(100% - 10px);height:calc(100% - 147px);position:absolute;left:5px;top:142px;">
+<body>
+	<div style="width:calc(100% - 10px);height:calc(100% - 50px);position:absolute;left:5px;top:40px;">
 		<div id="VideoRealPlay"></div>
 	</div>
 	<script src="js/chunk-vendors.js"></script>
 	<script src="js/chunk-common.js"></script>
 	<script src="js/VideoRealPlay.js"></script>
-	
+
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/src/views/construction/manage/hoistManage/hoistManage.vue b/src/views/construction/manage/hoistManage/hoistManage.vue
index 695cd51..5dbb35d 100644
--- a/src/views/construction/manage/hoistManage/hoistManage.vue
+++ b/src/views/construction/manage/hoistManage/hoistManage.vue
@@ -7,7 +7,8 @@
         <el-button type="primary" plain @click="searchData">查询</el-button>
       </div>
       <div class="dev-box" v-if="isShow">
-        <div class="dev-info-box layout" @click="clickDev(item.id)" v-for="item in devArr" :key="item.id">
+        <div :class="getStyle(item)" @click="sendParams(item.devCode, index)" v-for="(item, index) in devArr"
+          :key="item.id">
           <img :src="dz_dev_img">
           <div class="layout dev-info">
             <div>{{ item.proName }}</div>
@@ -29,7 +30,6 @@
       <div class="center-2 layout">
         <!-- 吊装视频播放 -->
         <iframe ref="iframePage" scrolling="no" frameborder="0" allowfullscreen="true"></iframe>
-         <!-- <button @click="openDzVideo">吊装视频</button> -->
       </div>
     </div>
     <div class="right">
@@ -156,7 +156,10 @@ export default {
       },
       // 表单校验
       rules: {},
-      htmlContent: '/dz_video.html'
+      htmlContent: '/dz_video.html',
+      nocheckStyle: ['dev-info-box', 'layout', 'nocheck'],
+      checkStyle: ['dev-info-box', 'layout', 'check'],
+      warnStyle: ['dev-info-box', 'layout', 'warn'],
     };
   },
   created() {
@@ -166,14 +169,24 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      // this.$refs.iframePage.src = this.htmlContent + '?timestamp=' + new Date().getTime();
       this.$refs.iframePage.src = this.htmlContent;
-      // alert( this.$refs.iframePage.src);
     })
   },
   methods: {
-    openDzVideo(){
-      window.open(this.htmlContent);
+    /* 吊装设备点击赋值 */
+    getStyle(item) {
+      if (!item.status) {
+        return this.nocheckStyle;
+      } else if (item.status === 'check') {
+        return this.checkStyle
+      } else if (item.status === 'warn') {
+        return this.warnStyle
+      }
+    },
+    /* 向吊装视频传递参数 */
+    sendParams(devCode, index) {
+      this.devArr[index].status = 'check'
+      this.$refs.iframePage.contentWindow.postMessage({ devCode: devCode }, '*');
     },
     /* 加载吊装预警设备列表 */
     laodDzWarnList() {
@@ -272,10 +285,6 @@ export default {
     },
     searchData() {
       this.laodDzWarnList();
-    },
-    /* 吊装设备点击事件 */
-    clickDev(id) {
-
     },
     /* 近电感应设备点击事件 */
     clickJdDev(id) {
@@ -432,7 +441,6 @@ export default {
   width: 100%;
   margin: 0 0 4% 0;
   height: 160px;
-  border: 1px solid #cccccc;
   border-radius: 6px;
   font-size: 15px;
   justify-content: space-evenly;
@@ -443,6 +451,18 @@ export default {
   cursor: pointer;
 }
 
+.nocheck {
+  border: 1px solid #cccccc;
+}
+
+.check {
+  border: 1px solid green;
+}
+
+.warn {
+  border: 1px solid red;
+}
+
 .dev-info {
   width: calc(100% - 104px);
   height: 100%;
