fix:"摄像头"

public/webVideoCtrl.js

@@ -171,6 +171,7 @@
             return oPromise
         };
         var _initPlugin = function (szContainerID) {
+
             let oPromise = new Promise(function (resolve, reject) {
                 if (!m_utilsInc.isUndefined(szContainerID)) {
                     m_options.szContainerID = szContainerID
@@ -598,6 +599,7 @@
         }
             ;
         this.I_Login = function (szIP, iProtocol, iPort, szUserName, szPassword, options) {
+
             let oPromise = new Promise(function (resolve, reject) {
                 var szDeviceIdentify = szIP + "_" + iPort;
                 var iIndex = this.findDeviceIndexByIP(szDeviceIdentify);

src/views/bigScreen/enpComponents/orgwryList.vue

@@ -224,9 +224,15 @@
                                 <span>监控设备</span>
                             </div>
 							<div class="infoLine">
-                                <span :class="['circles', {'circles_1':eqk.running_state==10}]"></span>
+                                <span class="circles"></span>
-                                <span>{{ eqk.name }}</span>
+                                <span>{{ eqj.name }}</span>
                             </div>
+                            <el-row class="infoLine">
+                                <el-col :span="12">
+									<div id="divPlugin" class="plugin"></div>
+                                </el-col>
+                            </el-row>
+
                         </div>
                     </div>
                 </el-aside>
@@ -348,8 +354,9 @@ export default {
             eqs: {},//生产设备
             eqc: {},//监测设备
             eqz: {},//治理设备
-            eqk: {},//监控设备
+            eqj: {},//监控设备
             resizeTimeout:null,
+
         }
     },
     mounted() {
@@ -382,6 +389,24 @@ export default {
             this.$emit('close')
         },
         handleClick() {
+			//摄像头插件，再返回的时候，先执行了停止预览，再执行了退出
+			//退出预览
+			WebVideoCtrl.I_Stop({
+				success: function () {
+					console.log("停止预览成功！");
+				},
+				error: function (oError) {
+						console.log("停止预览失败！")
+					}
+				}).then(()=>{
+					//摄像头退出
+					WebVideoCtrl.I_Logout(this.ip).then(() => {
+						console.log(this.ip + " " + "退出成功！");
+						WebVideoCtrl.I_DestroyPlugin();//销毁监控插件
+						}, () => {
+							console.log(this.ip + " " + "退出失败！");
+						});
+						});
             this.pfkdetail = false;
             this.detailItem = {};
         },
@@ -389,6 +414,7 @@ export default {
             this.pfkdetail = true;
             this.detailItem = row;
             this.$nextTick(() => {
+				this.init()
                 this.getEquipments(row.equipments);
             })
 
@@ -404,7 +430,11 @@ export default {
                         that.eqc = res;
                     } else if (res.type == 30) {
                         that.eqz = res;
-                    }
+                    }else if (res.type == 50) { //监控设备
+						that.eqj = res;
+						this.ip = res.ip;
+						this.login();
+}
                 }))
             });
             const promise = Promise.all(reqs);
@@ -494,10 +524,66 @@ export default {
                 that.resizeChart("dataChart3");
             }, 300);
 		},
+		//监控摄像头
+		//初始化插件
+		init() {
+			WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
+			WebVideoCtrl.I_InitPlugin("divPlugin", "100%",  "100%", {
+				iWndowType: 2, //分裂系数N*N
+				bWndFull: true, //双击全屏
+				cbInitPluginCompleted: function () {
+					WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(() => {
+						// 检查插件是否最新
+						WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
+							if (bFlag) {
+								alert("检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！");
+							}
+						});
+					}, () => {
+						alert("插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！");
+					});
+				},
+			});
+		},
+
+        //摄像头登录
+		login(){
+
+			  WebVideoCtrl.I_Login(
+							this.eqj.ip,
+							1,
+							this.eqj.port,
+							this.eqj.login_name,
+							this.eqj.login_pwd,
+							{
+								async: true,
+								cgi: 1,
+								success: (xmlDoc) => {
+									console.log("登录成功", xmlDoc);
+									//预览
+									WebVideoCtrl.I_StartRealPlay(this.eqj.ip + "_" + this.eqj.port, {
+										success: () => {
+											console.log("预览成功");
+										},
+									});
+								},
+								error: (xmlDoc) => {
+									console.log("登录失败", xmlDoc);
+								},
+							}
+						);
+				}
     }
 }
 </script>
 <style>
+/*监控设备样式*/
+.plugin {
+	width: 200px;
+	height: 200px;
+	/* background: #ffffff; */
+	border: 2px solid rgba(237, 159, 23, 0.8);
+}
 .tableBg {
     width: 100%;
     height: 88vh;

src/views/bigScreen/enpComponents/pollutant.vue

@@ -329,11 +329,12 @@ export default {
                 yAxis: {},
                 series: [{ type: 'line' }]
             },
+
         }
     },
+
 	mounted() {
-		let that = this;
+
-		that.init();
 	},
     methods: {
         initDom() {
@@ -359,12 +360,16 @@ export default {
             this.$refs.table.queryData(this.query);
         },
         rowClick(row) {
+
             this.pollutantDetail = true;
             this.detailItem = row;
             this.$nextTick(() => {
+
+                this.init();
                 this.getEquipments(row.equipments);
                 this.initTimeNow();
                 this.initDom();
+
             })
         },
         getEquipments(ids) {
@@ -384,9 +389,11 @@ export default {
                         that.getDetailData(3, id);
                     }
 					else if (res.type == 50) { //监控设备
-						debugger;
+
-						this.login(res);//监控摄像头
+
                         that.eqj = res;
+						this.ip = res.ip;
+						this.login();
                     }
                 })
             });
@@ -445,22 +452,39 @@ export default {
             })
         },
 	    handleClick() {
+			//摄像头插件，再返回的时候，先执行了停止预览，再执行了退出
+			//退出预览
+			WebVideoCtrl.I_Stop({
+				success: function () {
+					console.log("停止预览成功！");
+				},
+				error: function (oError) {
+						console.log("停止预览失败！")
+					}
+				}).then(()=>{
+					//摄像头退出
+					WebVideoCtrl.I_Logout(this.ip).then(() => {
+						console.log(this.ip + " " + "退出成功！");
+						WebVideoCtrl.I_DestroyPlugin();//销毁监控插件
+						}, () => {
+							console.log(this.ip + " " + "退出失败！");
+						});
+						});
 		    this.pollutantDetail = false;
             this.detailItem = {};
+
+
+
         },
 
 		//监控摄像头
 		//初始化插件
 		init() {
-
 			WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
-			//初始化
+			WebVideoCtrl.I_InitPlugin("divPlugin", "100%",  "100%", {
-			alert(1)
-			WebVideoCtrl.I_InitPlugin("divPlugin", 200, 200, {
 				iWndowType: 2, //分裂系数N*N
 				bWndFull: true, //双击全屏
 				cbInitPluginCompleted: function () {
-                     alert(1)
 					WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(() => {
 						// 检查插件是否最新
 						WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
@@ -471,28 +495,26 @@ export default {
 					}, () => {
 						alert("插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！");
 					});
-
 				},
 			});
-
 		},
 
         //摄像头登录
-		login(jkdata){
+		login(){
 
 			  WebVideoCtrl.I_Login(
-							jkdata.ip,
+							this.eqj.ip,
 							1,
-							jkdata.port,
+							this.eqj.port,
-							jkdata.login_name,
+							this.eqj.login_name,
-							jkdata.login_pwd,
+							this.eqj.login_pwd,
 							{
 								async: true,
 								cgi: 1,
 								success: (xmlDoc) => {
 									console.log("登录成功", xmlDoc);
 									//预览
-									WebVideoCtrl.I_StartRealPlay(szIp + "_" + ipPort, {
+									WebVideoCtrl.I_StartRealPlay(this.eqj.ip + "_" + this.eqj.port, {
 										success: () => {
 											console.log("预览成功");
 										},
@@ -504,7 +526,6 @@ export default {
 							}
 						);
 				}
-
     }
 }
 </script>
@@ -513,5 +534,6 @@ export default {
 	width: 200px;
 	height: 200px;
 	/* background: #ffffff; */
+	border: 2px solid rgba(237, 159, 23, 0.8);
 }
 </style>

src/views/bigScreen/enpComponents/video.vue

@@ -1,26 +1,96 @@
 <template>
 	<el-container>
-		<el-main>
+		<el-aside width="20%">
-			<div class="about">
+			<div class="leftDiv">
-				<div id="divPlugin" class="plugin"></div>
+				<el-divider content-position="left">登录预览</el-divider>
-				<div style="margin-top: 30px;">
+			<el-row type="flex" class="row-bg" justify="space-around">
-			        <el-button @click="Login" type="primary">登录</el-button>
+                <el-col :span="10">
-				    <el-button @click="vShow" type="primary">预览</el-button>
+					<div class="grid-content bg-purple-light">
-				    <el-button @click="stopShow" type="warning">停止预览</el-button>
+						<el-button @click="Login" type="text">登录</el-button>
-				    <el-button @click="logOut" type="warning">登出设备</el-button>
+
-				    <el-button @click="breakdom" type="warning">销毁设备</el-button>
+					</div>
-				    <el-button @click="init" type="warning">初始化设备</el-button>
+				</el-col>
-					<el-select v-model="video_value" placeholder="请选择" @change="changeWndNum()">
+				<el-col :span="10">
+					<div class="grid-content bg-purple-light">
+						<el-button @click="logOut" type="text">登出设备</el-button>
+
+					</div>
+				</el-col>
+            </el-row>
+			<el-row type="flex" class="row-bg" justify="space-around">
+				<el-col :span="10">
+					<div class="grid-content bg-purple-light">
+						<el-button @click="vShow" type="text">预览</el-button>
+
+					</div>
+				</el-col>
+                <el-col :span="10">
+					<div class="grid-content bg-purple-light">
+						<el-button @click="stopShow" type="text">停止预览</el-button>
+
+					</div>
+				</el-col>
+            </el-row>
+			<el-row type="flex" class="row-bg" justify="space-around">
+                <el-col :span="10">
+					<div class="grid-content bg-purple-light">
+						<el-button @click="breakdom" type="text">销毁设备</el-button>
+					</div>
+				</el-col>
+				<el-col :span="10">
+					<div class="grid-content bg-purple-light">
+						<el-button @click="init" type="text">初始化设备</el-button>
+
+					</div>
+				</el-col>
+            </el-row>
+			<el-row type="flex" class="row-bg" justify="space-around">
+                <el-col :span="10">
+					<div class="grid-content bg-purple-light">
+						<el-button @click="clickOpenSound" type="text">打开声音</el-button>
+					</div>
+				</el-col>
+				<el-col :span="10">
+					<div class="grid-content bg-purple-light">
+						<el-button @click="clickCloseSound" type="text">关闭声音</el-button>
+
+					</div>
+				</el-col>
+            </el-row>
+
+			<el-row type="flex" class="row-bg" justify="space-around">
+                <el-col >
+					<div class="grid-content bg-purple-light">
+						<el-row>
+							<el-col :span="12">
+
+								<el-button disabled type="text">窗口分割数：</el-button>
+							</el-col>
+							<el-col :span="12" >
+								<el-select v-model="video_value" placeholder="请选择" @change="changeWndNum()" style="width:80%;">
 									<el-option v-for="item in options"
 									:key="item.value"
 									:label="item.label"
 									:value="item.value">
 								    </el-option>
 							    </el-select>
+						     </el-col>
+						</el-row>
+
+					</div>
+				</el-col>
+            </el-row>
 
          </div>
 
-			</div>
+
+
+
+
+
+		</el-aside>
+		<el-main>
+			<div id="divPlugin" class="plugin"></div>
 		</el-main>
 	</el-container>
 </template>
@@ -53,19 +123,22 @@ export default {
 				value: 4,
 				label: '4x4'
 			}
-		]
+		],
+
 		};
 	},
 	mounted() {
 		let that = this;
 		that.init();
+
+
 	},
 	methods: {
 		//初始化插件
 		init() {
 			// alert('init')
 			WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
-			WebVideoCtrl.I_InitPlugin("divPlugin", 600, 600, {
+			WebVideoCtrl.I_InitPlugin("divPlugin", "100%",  "100%", {
 				iWndowType: 2, //分裂系数N*N
 				bWndFull: true, //双击全屏
 				cbInitPluginCompleted: function () {
@@ -82,6 +155,7 @@ export default {
 						});
 				},
 			});
+
 		},
 		//登录
 		Login() {
@@ -95,10 +169,26 @@ export default {
 					async: true,
 					cgi: 1,
 					success: (xmlDoc) => {
-						console.log("登录成功", xmlDoc);
+
+
+						//TODO 获取通道信息
+						this.getChannelInfo();
+
+
+						this.$message({
+					    showClose: true,
+					    message: '登录成功！',
+					    type: 'success'
+				       });
+
 					},
 					error: (xmlDoc) => {
-						console.log("登录失败", xmlDoc);
+						this.$message({
+					    showClose: true,
+					    message: '登录失败！',
+					    type: 'error'
+				       });
+
 					},
 				}
 			);
@@ -107,7 +197,19 @@ export default {
 		vShow() {
 			WebVideoCtrl.I_StartRealPlay(this.szIp + "_" + this.ipPort, {
 				success: () => {
-					console.log("预览成功");
+					this.$message({
+					    showClose: true,
+					    message: '预览成功！',
+					    type: 'success'
+				       });
+
+				},error: () => {
+						this.$message({
+					    showClose: true,
+					    message: '预览失败！',
+					    type: 'error'
+				       });
+
 					},
 			});
 
@@ -122,10 +224,19 @@ export default {
 			if (oWndInfo != null) {
 				WebVideoCtrl.I_Stop({
 					success: function () {
-						console.log("停止预览成功！")
+						this.$message({
+					    showClose: true,
+					    message: '停止预览成功！',
+					    type: 'success'
+				       });
+
 					},
 					error: function (oError) {
-						console.log("停止预览失败！")
+						this.$message({
+					    showClose: true,
+					    message: '停止预览失败！',
+					    type: 'error'
+				       });
 					}
 				});
 			}
@@ -137,6 +248,7 @@ export default {
 		},
 		//登出
 		logOut() {
+
 			//WebVideoCtrl.I_Logout(this.szIp + "_" + this.ipPort, {});
 			var szDeviceIdentify =this.szIp;
 
@@ -144,14 +256,35 @@ export default {
 				return;
 			}
 			WebVideoCtrl.I_Logout(szDeviceIdentify).then(() => {
-				console.log(szDeviceIdentify + " " + "退出成功！");
+				this.$message({
+					showClose: true,
+					message: '退出成功！',
+					type: 'success'
+				});
 			}, () => {
-				console.log(szDeviceIdentify + " " + "退出失败！");
+				this.$message({
+					showClose: true,
+					message: '退出成功！',
+					type: 'error'
+				});
 			});
 		},
 		//销毁插件
 		breakdom() {
-			WebVideoCtrl.I_DestroyPlugin();
+
+			WebVideoCtrl.I_DestroyPlugin().then(() => {
+				this.$message({
+					showClose: true,
+					message: '插件已销毁！',
+					type: 'success'
+				});
+			}, () => {
+				this.$message({
+					showClose: true,
+					message: '插件销毁失败！',
+					type: 'error'
+				});
+			});
 		},
 
 		// 窗口分割数
@@ -173,14 +306,103 @@ export default {
 					console.log(szInfo, oError.errorCode, oError.errorMsg);
 				});
 			}
+		},
+		// 打开声音
+		clickOpenSound() {
+			var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0),
+			szInfo = "";
+			if (oWndInfo != null) {
+				var allWndInfo = WebVideoCtrl.I_GetWindowStatus();
+				// 循环遍历所有窗口，如果有窗口打开了声音，先关闭
+				for (var i = 0, iLen = allWndInfo.length; i < iLen; i++) {
+					oWndInfo = allWndInfo[i];
+					if (oWndInfo.bSound) {
+						WebVideoCtrl.I_CloseSound(oWndInfo.iIndex);
+						break;
 					}
+				}
+				WebVideoCtrl.I_OpenSound().then(() => {
+					console.log(oWndInfo.szDeviceIdentify + " " + "打开声音成功！");
+				}, (oError) => {
+					var szInfo = " 打开声音失败！";
+					console.log(oWndInfo.szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
+				});
+			}
+		},
+		// 关闭声音
+		clickCloseSound() {
+			var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0),
+			szInfo = "";
+			if (oWndInfo != null) {
+				WebVideoCtrl.I_CloseSound().then(() => {
+					console.log(oWndInfo.szDeviceIdentify + " " + "关闭声音成功！");
+				}, (oError) => {
+					var szInfo = " 关闭声音失败！";
+					console.log(oWndInfo.szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
+				});
+			}
+		},
+
+
+
+
 	},
 };
 </script>
 <style scoped>
 .plugin {
-	width: 600px;
+
-	height: 600px;
+    width:100%;
-	/* background: #ffffff; */
+    height:100%;
+	border: 2px solid rgb(45 188 51);
 }
+.leftDiv{
+	margin-top:10px;
+	width:95%
+}
+.el-row {
+    margin-bottom: 8px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+	text-align:center;
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a8bf;
+  }
+  .bg-purple {
+    background: #1ab5cd;
+  }
+  .bg-purple-light {
+    background: #25a1ad;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+  }
+  .row-bg .el-button{
+	border:none
+  }
+  .bg-purple-left {
+    background: #25a1ad;
+	width:80%;
+  }
+  .bg-purple-center {
+    background: #25a1ad;
+	width:80%;
+  }
+  .bg-purple-right {
+    background: #25a1ad;
+	width:80%;
+  }
+  .yuntai .el-button{
+	border:none
+  }
+
 </style>