提交

ruoyi-ui/public/index.html

@@ -7,6 +7,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
+    <script src="./jquery-1.7.1.min.js"></script>
+    <script src="./jsVideoPlugin-1.0.0.min.js"></script>
+    <script src="./webVideoCtrl.js"></script>
     <script src="./static/webrtcstreamer.js" charset="utf-8"></script>
     <script src="./static/adapter.min.js" charset="utf-8"></script>
     <!-- <div>123</div> -->

ruoyi-ui/src/views/shipinggaoj/shebe/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="app-container" style="padding-top: 20px;height: 120vh;">
+  <div class="app-container" style="padding-top: 20px;height: 120vh;"  v-loading="loading"
+    element-loading-text="拼命加载中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)">
     <div class="ntgs">
     <el-row :gutter="10" class="mb8">
      <div class="iuer" style="margin-bottom:10px;">
@@ -68,9 +71,9 @@
 						<div style="background-color: #fff;border-radius: 10px;padding: 20px 20px;height: 100vh;">
               <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">通道列表</p>
               <div style=" height: 36px;;line-height: 36px;margin-top: 10px;"v-for="(item,index) in 6">
-                              <div style="display: flex;align-items: center;justify-content: space-between;">
+                              <div @click="ishg(item)" style="display: flex;align-items: center;justify-content: space-between;">
                                 <div style="font-size: 16px;
-              color: #333333;">通道01</div>
+              color: #333333;">通道0{{index +1}}</div>
                                 <img src="../../../assets/images/icon_htgl_zd.png" alt="" style="width: 10px;height: 12px;">
                               </div>
                           </div>
@@ -86,6 +89,9 @@
               <el-button type="success" plain>关闭</el-button>
             </div>
           </div>
+          <div style="width: 100%; height: 480px;">
+            <div v-if="isfse" id="divPlugin" style="width: 100%; height: 480px;" ></div>
+          </div>
           <!-- <img src="../../../assets/images/pic_ssyl_lt.png" alt="" style="width: 100%; margin-top: 20px;"> -->
           <!-- 344 -->
           <!-- <video id="video" controls autoplay muted width="100%" height="480px"style="margin-top: 20px;"></video> -->
@@ -116,13 +122,13 @@
 		</el-row>
 
 
-	   <pagination
+	  <!-- <pagination
 	     v-show="total>0"
 	     :total="total"
 	     :page.sync="queryParams.pageNo"
 	     :limit.sync="queryParams.pageSize"
 	     @pagination="getList"
-	   />
+	   /> -->
 	</div>
 
 
@@ -146,6 +152,7 @@
 </template>
 
 <script>
+  import { listWarnManage, getWarnManage, delWarnManage, addWarnManage, updateWarnManage } from "@/api/manage/warnManage"
 // import { listPost, getPost, delPost, addPost, updatePost,updateFs,updateGx } from "@/api/kaoch/renyuan";
 // import { listReservat,camera,cameraIndexCode, listReservatd, getReservat, delReservat, addReservat, updateReservat,setPass,delReservathx,openDz,closeDz } from "@/api/tonggi/houtai";
 // import vueQr from "vue-qr";
@@ -254,17 +261,21 @@ export default {
 	isjfwe:{},
 	isshoe:false,
    webRtcServer: null,
-   camera_ip: '127.0.0.1:8000'
-
-
+   camera_ip: '127.0.0.1:8000',
+   g_iWndIndex:0,
+   iRtspPort:'',//预览中的ip
+   szDeviceIdentify:'',//ip_port,
+   isfse:false
     };
   },
   created() {
-    // this.getList();
+    this.isfse = false
+    this.getList();
   window.onresize = () => {
   	      this.changeTableMaxHeight()
   	    }
   	    this.changeTableMaxHeight()
+
   },
   mounted() {
      this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//' + this.camera_ip)
@@ -280,10 +291,25 @@ export default {
 		    })
 
   },
+
    beforeDestroy() {
-      this.destoryVideo()
+      // this.destoryVideo()
+      if(WebVideoCtrl){
+        console.log(this.szDeviceIdentify)
+      	WebVideoCtrl.I_Logout(this.szDeviceIdentify)
+        WebVideoCtrl.I_StopAllPlay()
+      	WebVideoCtrl.I_DestroyPlugin()
+        WebVideoCtrl.I_Resize()
+      }
     },
   methods: {
+    // 通道点击
+    ishg(val){
+      this.isfse = false
+      this.clickStartRealPlay('192.168.101.64', '80',1, 0, 1);
+      // this.getVideo()
+
+    },
 
 
 	  init(val) { //这个val 就是一个地址，例如： http://192.168.2.201:85/live/9311272c49b845baa2b2810ad9bf3f68.flv 这是个服务器返回给我的一个监控视频流地址
@@ -403,29 +429,38 @@ export default {
 
     /** 查询岗位列表 */
     getList() {
-      this.loading = true;
 	  // this.queryParams
-      camera(this.queryParams).then(response => {
-        this.postList = response.data.data.list;
-		if(response.data.data != null){
-		if(response.data.data.list.length != 0){
-			let ne = response.data.data.list[0]
-			response.data.data.list.filter(rtu=>{
-				if(rtu.name == '后门道闸'){
-					console.log(3,rtu)
-					ne = rtu
-					return
-				}
-			})
-			this.isfgw(ne)
-			this.isjfwe =ne
+    this.loading = true
+    getWarnManage(this.$route.query.id).then(response => {
+      this.form = response.data
 
-		}
-		}
-        // this.postList=[{'nsje':null,'visitPhone':null,'isReception':'Y'}]
-        this.total = response.data.data.total;
-        this.loading = false;
-      });
+      this.getVideo()
+      WebVideoCtrl.I_ShowPlugin()
+      this.loading = false
+      // this.open = true
+      // this.title = "修改告警管理"
+    })
+  //     camera(this.queryParams).then(response => {
+  //       this.postList = response.data.data.list;
+		// if(response.data.data != null){
+		// if(response.data.data.list.length != 0){
+		// 	let ne = response.data.data.list[0]
+		// 	response.data.data.list.filter(rtu=>{
+		// 		if(rtu.name == '后门道闸'){
+		// 			console.log(3,rtu)
+		// 			ne = rtu
+		// 			return
+		// 		}
+		// 	})
+		// 	this.isfgw(ne)
+		// 	this.isjfwe =ne
+
+		// }
+		// }
+  //       // this.postList=[{'nsje':null,'visitPhone':null,'isReception':'Y'}]
+  //       this.total = response.data.data.total;
+  //       this.loading = false;
+  //     });
     },
     getListh() {
       this.loading = true;
@@ -803,7 +838,267 @@ export default {
 		        this.tableMaxHeight = height - 350
 		      // }
 		      console.log(height)
-		    }
+		    },
+    // 播放摄像头
+    getVideo() {
+    	var that=this;
+       this.isfse  = true
+    	this.initVideoPlay('192.168.101.64', '80', 'admin', 'zxy123456','divPlugin')
+    },
+    // 有插件
+    initVideoPlay(ip, port, username, password,id) {
+    	var that = this;
+    	var g_iWndIndex = 0; //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
+    	var g_oLocalConfig = null; //本地配置
+    	// let ip = this.szIP //硬盘录像机ip
+    	// let port = this.szPort //默认为80端口
+    	// let username = this.szUsername //账号：
+    	// let password = this.szPassword // 密码
+    	var iRtspPort = ''
+    	// 1.初始化插件参数及插入插件
+    	WebVideoCtrl.I_InitPlugin({
+    		bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
+    		iWndowType: 1,
+    		bDebugMode: true,
+    		cbSelWnd: function(xmlDoc) {
+    			g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
+    			const szInfo = "当前选择的窗口编号：" + g_iWndIndex;
+    			this.g_iWndIndex = g_iWndIndex;
+    			console.log(szInfo, "szInfo");
+    		},
+    		cbDoubleClickWnd: function(iWndIndex, bFullScreen) {
+    			let szInfo = "当前放大的窗口编号：" + iWndIndex;
+    			if (!bFullScreen) {
+    				szInfo = "当前还原的窗口编号：" + iWndIndex;
+    			}
+    			// console.log(szInfo, "szInfo");
+    		},
+    		cbEvent: function(iEventType, iParam1, iParam2) {
+    			if (2 == iEventType) {
+    				// 回放正常结束
+    				console.log("窗口" + iParam1 + "回放结束！");
+    			} else if (-1 == iEventType) {
+    				console.log("设备" + iParam1 + "网络错误！");
+    			} else if (3001 == iEventType) {
+    				clickStopRecord(g_szRecordType, iParam1);
+    			}
+    		},
+    		//2.登录摄像头
+    		cbInitPluginComplete: function() {
+    			const oLiveView = {
+    				iProtocol: 1, // protocol 1：http, 2:https
+    				szIP: ip, // protocol ip
+    				szPort: port, // protocol port
+    				szUsername: username, // device username
+    				szPassword: password, // device password
+    				iStreamType: 1, // stream 1：main stream  2：sub-stream  3：third stream  4：transcode stream
+    				iChannelID: 1, // channel no
+    				bZeroChannel: false, // zero channel
+    			};
+    			// var swidth=Number((that.width*Number(that.scale))).toFixed(2)
+    			// var sheight=Number((that.height*Number(that.scale))).toFixed(2)
+    			// that.swidth=swidth
+    			// that.sheight=sheight
+    			WebVideoCtrl.I_InsertOBJECTPlugin(id).then(
+    				() => {
+    					// setTimeout(function(){
+    					// 	WebVideoCtrl.I_Resize(swidth,sheight)
+    					// },300)
+    					WebVideoCtrl.I_Login(
+    						oLiveView.szIP,
+    						oLiveView.iProtocol,
+    						oLiveView.szPort,
+    						oLiveView.szUsername,
+    						oLiveView.szPassword, {
+    							timeout: 3000,
+    							async: false,
+    							success: function(xmlDoc) {
+    								console.log(" 登录成功！");
+    								let a = ip
+    								let b = port
+    								setTimeout(function() {
+    									//延迟方法
+    									setTimeout(function() {
+    										//调用预览摄像头这里可以循环创建
+    										that.clickStartRealPlay(a, b,1, 0, 1);
+    										// that.clickStartRealPlay(a, b, 1, 1,2);
+    										// that.clickStartRealPlay(a, b, 1, 2,3);
+    										// clickStartRealPlay(a,b, 1, 3, 4);
+    										// clickStartRealPlay(a,b, 1, 4, 5);
+    										// clickStartRealPlay(a,b, 1, 5, 6);
+    										// clickStartRealPlay(a,b, 1, 6, 7);
+    										// clickStartRealPlay(a,b, 1, 7, 8);
+    									}, 1000);
+
+
+    									setTimeout(function() {
+    										// 获取通道 (如果多个摄像头需要获取多个通道需要调用)
+    										// getChannelInfo(a);
+    										//获取端口 （在这里获取RTSP 端口号 预览时传入）
+    										getDevicePort(a);
+    									}, 10)
+
+    								}, 10);
+    							},
+    							error: function(oError) {
+    								console.log(" 登录失败！", oError);
+    							},
+    						}
+    					);
+    					// 检查插件是否最新
+    					WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
+    						if (bFlag) {
+    							alert(
+    								"检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！"
+    							);
+
+    						}
+    					});
+    				},
+    				() => {
+    					alert(
+    						"插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！"
+    					);
+
+    				}
+    			);
+
+    		},
+    	});
+    	// 3.获取通道
+    	function getChannelInfo(a) {
+    		var szDeviceIdentify = a,
+    			oSel = null; //通道列表
+    		if (null == szDeviceIdentify) {
+    			return;
+    		}
+
+    		// 模拟通道 有
+    		WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
+    			success: function(xmlDoc) {
+    				var oChannels = $(xmlDoc).find("VideoInputChannel");
+
+    				$.each(oChannels, function(i) {
+    					var id = $(this).find("id").eq(0).text(),
+    						name = $(this).find("name").eq(0).text();
+    					if ("" == name) {
+    						name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
+    					}
+
+    					// console.log(id + "通道id是")
+    					// console.log(name + "通道name是")
+    				});
+    				console.log(szDeviceIdentify + " 获取模拟通道成功！");
+    			},
+    			error: function(oError) {
+    				console.log(szDeviceIdentify + " 获取模拟通道失败！", oError.errorCode, oError.errorMsg);
+    			}
+    		});
+    		// 数字通道
+    		WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
+    			success: function(xmlDoc) {
+    				var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
+
+    				$.each(oChannels, function(i) {
+    					var id = $(this).find("id").eq(0).text(),
+    						name = $(this).find("name").eq(0).text(),
+    						online = $(this).find("online").eq(0).text();
+    					if ("false" == online) { // 过滤禁用的数字通道
+    						return true;
+    					}
+    					if ("" == name) {
+    						name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
+    					}
+    				});
+    				console.log(szDeviceIdentify + " 获取数字通道成功！");
+    			},
+    			error: function(oError) {
+    				console.log(szDeviceIdentify + " 获取数字通道失败！", oError.errorCode, oError.errorMsg);
+    			}
+    		});
+    		// 零通道
+    		WebVideoCtrl.I_GetZeroChannelInfo(szDeviceIdentify, {
+    			success: function(xmlDoc) {
+    				var oChannels = $(xmlDoc).find("ZeroVideoChannel");
+
+    				$.each(oChannels, function(i) {
+    					var id = $(this).find("id").eq(0).text(),
+    						name = $(this).find("name").eq(0).text();
+    					if ("" == name) {
+    						name = "Zero Channel " + (i < 9 ? "0" + (i + 1) : (i + 1));
+    					}
+    					if ("true" == $(this).find("enabled").eq(0).text()) { // 过滤禁用的零通道
+
+    					}
+    				});
+    				console.log(szDeviceIdentify + " 获取零通道成功！");
+    			},
+    			error: function(oError) {
+    				console.log(szDeviceIdentify + " 获取零通道失败！", oError.errorCode, oError.errorMsg);
+    			}
+    		});
+    	};
+
+    	//4.获取端口
+    	function getDevicePort(a) {
+    		var szDeviceIdentify = a;
+
+    		if (null == szDeviceIdentify) {
+    			return;
+    		}
+    		WebVideoCtrl.I_GetDevicePort(szDeviceIdentify).then((oPort) => {
+    			// console.log(oPort.iDevicePort + "iDevicePort的值是")
+    			// console.log(oPort.iRtspPort + "iRtspPort的值是")
+    			console.log(szDeviceIdentify + " 获取端口成功！");
+    			iRtspPort = oPort.iRtspPort
+    			that.iRtspPort = iRtspPort
+    		}, (oError) => {
+    			var szInfo = "获取端口失败！";
+    			console.log(szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
+    		});
+    	};
+    },
+    // 5.开始预览
+    clickStartRealPlay(szIP, szPort, iStreamType, iWndIndex, iChannelID) {
+    	var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex),
+    		szDeviceIdentify = szIP + "_" + szPort, //ip
+    		iChannelID = iChannelID,
+    		bZeroChannel = false,
+    		iPort = this.iRtspPort,
+    		szInfo = "";
+    	iStreamType = iStreamType;
+    	if (null == szDeviceIdentify) {
+    		return null;
+    	}
+    	this.szDeviceIdentify = szDeviceIdentify;
+    	var startRealPlay = function() {
+    		WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
+    			iStreamType: iStreamType,
+    			iChannelID: iChannelID,
+    			bZeroChannel: bZeroChannel,
+    			iWndIndex: iWndIndex, //要播放的窗口
+    			iPort: iPort, //如果多个摄像头需要必填 （RTSP 端口号）
+    			success: function() {
+    				szInfo = "开始预览窗口" + iWndIndex + "成功！";
+    				console.log(szDeviceIdentify + " " + szInfo);
+    			},
+    			error: function(oError) {
+    				console.log(szDeviceIdentify + " 开始预览窗口" + iWndIndex + "失败！", oError
+    					.errorCode, oError.errorMsg);
+    			}
+    		});
+    	};
+
+    	if (oWndInfo != null) { // 已经在播放了，先停止
+    		WebVideoCtrl.I_Stop({
+    			success: function() {
+    				startRealPlay();
+    			}
+    		});
+    	} else {
+    		startRealPlay();
+    	}
+    },
   }
 };
 </script>