index.html 25.3 KB

原文件审查历史永久链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水库智能监控平台</title>
		<link rel="stylesheet" type="text/css" href="static/css/index.css" />
		<script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
		<script src="https://unpkg.com/vue"></script>
		<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		 <script type="text/x-template" id="item-template">
		      <li>
		        <div
		          :class="{bold: isFolder}"
		          @click="toggle"
		          @dblclick="makeFolder">
				  <span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
		          {{ item.name }}

		        </div>
		        <ul v-show="isOpen" v-if="isFolder">
		          <tree-item
		            class="item"
		            v-for="(child, index) in item.children"
		            :key="index"
		            :item="child"
		            @make-folder="$emit('make-folder', $event)"
		            @add-item="$emit('add-item', $event)"
		          ></tree-item>
		          <li class="add" @click="$emit('add-item', item)">+</li>
		        </ul>
		      </li>
		    </script>
	</head>
	<body>
		<div class="conbox" id="mybot">
			<div class="headertop">
				<h2>蒙自市水库实时视频监控平台</h2>
				<div class="nav">
					<a class="on" id="">实时监控</a>
					<a>历史记录</a>
				</div>
				<div class="name">admin <img src="static/img/tx.png"></div>
			</div>
			<div class="childbox">
				<!-- 实时监控 -->
				<div class="boxing" style="display:block ;">
					<div class="nowingbox">
						<div class="left">
							<ul class="datatj">
								<li style="background-color: #55ca5a;"><span>102</span><span>设备总数</span></li>
								<li style="background-color: #ff9800;"><span>85</span><span>在线总数</span></li>
								<li style="background-color: #2196F3;"><span>15</span><span>离线总数</span></li>
							</ul>
							<div class="tress">
								<div class="searchbox">
									<input type="text" id="" value="" placeholder="请输入设备名称或分组名称" /><a href="">查找</a>
								</div>
								<div class="tree">
									 <ul id="demo">
									      <tree-item
									        class="item"
									               :item="treeData"
									               @make-folder="makeFolder"
									               @add-item="addItem"
									      ></tree-item>
									    </ul>

								</div>
							</div>
							<!-- <div class="colbtn">
								<div class="tipbox">
									<p>设备：入口1</p>
									<p>状态：<b>在线</b></p>
								</div>
								<div class="box">
									<div class="left3">
										<p>
											<span><i class="fa fa-caret-up deri1"></i></span>
											<span><i class="fa fa-caret-up"></i></span>
											<span><i class="fa fa-caret-up deri2"></i></span>
										</p>
										<p>
											<span><i class="fa fa-caret-left"></i></span>
											<span><i class="fa fa-repeat"></i></span>
											<span><i class="fa fa-caret-right"></i></span>
										</p>
										<p>
											<span><i class="fa fa-caret-down deri3"></i></span>
											<span><i class="fa fa-caret-down"></i></span>
											<span><i class="fa fa-caret-down deri4"></i></span>
										</p>
									</div>
									<div class="right3">
										<p>
											<i class="fa fa-plus-square"></i>变焦
											<i class="fa fa-minus-square"></i>
										</p>
										<p>
											<i class="fa fa-plus-square"></i>变倍
											<i class="fa fa-minus-square"></i>
										</p>
										<p>
											<i class="fa fa-plus-square"></i>光圈
											<i class="fa fa-minus-square"></i>
										</p>
										<p>
											<i class="fa fa-plus-square"></i>雨刷
											<i class="fa fa-minus-square"></i>
										</p>
										<p>
											<i class="fa fa-plus-square"></i>灯光
											<i class="fa fa-minus-square"></i>
										</p>
									</div>
								</div>
							</div> -->
						</div>
						<div class="center">
							<div class="selbox">
								<span>视频设备选择</span>
								<select name="">
									<option value="">请选择</option>
									<option value="">设备一</option>
									<option value="">设备二</option>
								</select>
							</div>
							<div class="spbox">
								<div id="playWnd" class="playWnd"></div>
							</div>
							<div class="nametetx">
								<p>水库名称：小新寨水库</p>
								<p>设备名称：摄像机一号</p>
								<p>操作说明：</p>
								<div class="smbox">
									摄像头监控操作说明摄像头监控操作说明摄像头监控操作说明摄像头
									监控操作说明摄像头监控操作说明摄像头监控操
									作说明摄像头监控操作说明摄像头监控操作说明摄像头监控操作说明摄像头监控操作说明
									作说明摄像头监控操作说明摄像头监控
								</div>
							</div>
						</div>
						<div class="right">
							<div class="today box">
								<h3>今日预警统计</h3>
								<ul>
									<li><img src="static/img/yj.png"><span>12座</span></li>
									<li><img src="static/img/zc.png"><span>23座</span></li>
								</ul>
							</div>
							<div class="noews box">
								<h3>人员入侵预警</h3>
								<div class="yjbox">
									<div class="left2">
										<p><img src="static/img/sk.png"></p>

									</div>
									<div class="right2">
										<p>蒙自小新寨水库</p>
										<p>设备名称：摄像机</p>
										<p>记录次数：<b>5</b></p>
										<p><img src="static/img/colc.png">2021-06-12</p>
										<p><img src="static/img/map.png">蒙自市小新寨位置</p>
									</div>
								</div>
							</div>
							<div class="hislist box">
								<h3>历史统计</h3>
								<div class="list">
									<div class="titile">
										<span>水库名称</span>
										<span>设备名称</span>
										<span>预警时间</span>
									</div>
									<ul class="listbox" id="mylist">

										<li v-for="item in list" :key="item.id">
											<span>{{item.name}}</span>
											<span>{{item.sbname}}</span>
											<span>{{item.crts}}</span>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 历史记录 -->
				<div class="boxing" style="display: none;">
					<div class="history">
						<div class="his_top">
							<ul>
								<li>
									<p class="title">县市</p>
									<p class="cotbox">
										<span class="ons">蒙自市</span>
										<span>河口县</span>
										<span>泸西县</span>
										<span>开远市</span>
										<span>河口县</span>
										<span>泸西县</span>
										<span>开远市</span>
									</p>
								</li>
								<li>
									<p class="title">水库</p>
									<p class="cotbox">
										<span>小新寨</span>
										<span>三岔口</span>
										<span>庄寨</span>
									</p>
								</li>
								<li>
									<p class="title">硬件设备</p>
									<p class="cotbox">
										<span>摄像机一</span>
										<span>摄像机二</span>
									</p>
								</li>
							</ul>
						</div>
						<div class="his_bot">
							<!-- <p>共搜索到220结果</p> -->
							<ul class="looklist">
								<li class="title">
									<span>
										<input name="radio" type="checkbox">
									</span>
									<span>序号</span>
									<span>名称</span>
									<span>设备编号</span>
									<span>创建日期</span>
									<span>所属水库</span>
									<span>最后操作日期</span>
									<span>最后操作者</span>
									<span>操作</span>
								</li>
								<li>
									<span>
										<input name="radio" type="checkbox">
									</span>
									<span>0112</span>
									<span>摄像机</span>
									<span>01202</span>
									<span>2021-12-16 12:00:00</span>
									<span>小新寨</span>
									<span>2021-12-18 12:00:00</span>
									<span>李四</span>
									<span>
										<b>查看</b>
										<b>编辑</b>
										<b>删除</b>
									</span>
								</li>
								<li>
									<span>
										<input name="radio" type="checkbox">
									</span>
									<span>0112</span>
									<span>摄像机</span>
									<span>01202</span>
									<span>2021-12-16 12:00:00</span>
									<span>小新寨</span>
									<span>2021-12-18 12:00:00</span>
									<span>李四</span>
									<span>
										<b>查看</b>
										<b>编辑</b>
										<b>删除</b>
									</span>
								</li>
								<li>
									<span>
										<input name="radio" type="checkbox">
									</span>
									<span>0112</span>
									<span>摄像机</span>
									<span>01202</span>
									<span>2021-12-16 12:00:00</span>
									<span>小新寨</span>
									<span>2021-12-18 12:00:00</span>
									<span>李四</span>
									<span>
										<b>查看</b>
										<b>编辑</b>
										<b>删除</b>
									</span>
								</li>
								<li>
									<span>
										<input name="radio" type="checkbox">
									</span>
									<span>0112</span>
									<span>摄像机</span>
									<span>01202</span>
									<span>2021-12-16 12:00:00</span>
									<span>小新寨</span>
									<span>2021-12-18 12:00:00</span>
									<span>李四</span>
									<span>
										<b>查看</b>
										<b>编辑</b>
										<b>删除</b>
									</span>
								</li>
								<li>
									<span>
										<input name="radio" type="checkbox">
									</span>
									<span>0112</span>
									<span>摄像机</span>
									<span>01202</span>
									<span>2021-12-16 12:00:00</span>
									<span>小新寨</span>
									<span>2021-12-18 12:00:00</span>
									<span>李四</span>
									<span>
										<b>查看</b>
										<b>编辑</b>
										<b>删除</b>
									</span>
								</li>
							</ul>
							<!-- 页码 -->
							<div class="pages">

								<ul>
									<li> <span>共 123页</span></li>
									<li><a href="" class="pre ">上一页</a></li>
									<li><a href="" class="on">1</a></li>
									<li><a href="">2</a></li>
									<li><a href="">3</a></li>
									<li><a href="">4</a></li>
									<li><span>...</span></li>
									<li><a href="">123</a></li>
									<li><a href="" class="next on">下一页</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	var treeData = {
		name: "蒙自市水利局",
		children: [{
				name: "蒙自市小新寨水库"
			},
			{
				name: "菲白水库",
				children: [{name:"das"}]
			},
			{
				name: "庄寨水库"
			},
			{
				name: "菲白水库"
			},
			{
				name: "蒙自市小新寨水库"
			},
			{
				name: "菲白水库1"
			},
			{
				name: "庄寨水库1"
			},
			{
				name: "菲白水库1"
			},
			{
				name: "蒙自市小新寨水库"
			},
			{
				name: "菲白水库2"
			},
			{
				name: "庄寨水库2"
			},
			{
				name: "菲白水库2"
			},

		]
	};
	// define the tree-item component
	Vue.component("tree-item", {
	        template: "#item-template",
	        props: {
	          item: Object
	        },
	        data: function() {
	          return {
	            isOpen: false
	          };
	        },
	        computed: {
	          isFolder: function() {
	            return this.item.children && this.item.children.length;
	          }
	        },
	        methods: {
	          toggle: function() {
	            if (this.isFolder) {
	              this.isOpen = !this.isOpen;
	            }
	          },
	          makeFolder: function() {
	            if (!this.isFolder) {
	              this.$emit("make-folder", this.item);
	              this.isOpen = true;
	            }
	          }
	        }
	      });

	      // boot up the demo
	      var demo = new Vue({
	        el: "#demo",
	        data: {
	          treeData: treeData
	        },
	        methods: {
	          makeFolder: function(item) {
	            Vue.set(item, "children", []);
	            this.addItem(item);
	          },
	          addItem: function(item) {
	            item.children.push({
	              name: "new stuff"
	            });
	          }
	        }
	      });
</script>
<!--<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>-->
<script src="./jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
		var listPanel = $('.list .listbox');
		var nubcers = 0; //向上滚动top值
		function up() { //向上滚动
			listPanel.animate({ //中奖结果
				'top': (nubcers - 30) + 'px'
			}, 3000, 'linear', function() {
				listPanel.css({
						'top': '0px'
					})
					.find("li:first").appendTo(listPanel);
				up();
			});
		}
		up();

	});
</script>
<!-- 接口数据 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
	// 历史统计数据
	var example2 = new Vue({
	  el: '#mylist',
	  data: {
	    list:[]
	  },
	  methods:{
		  getlist(){
		  let url = "https://www.ynzhsk.cn/api/reservoir/hkws/warning/list"
		    axios.get(url).then((res)=>{
		      console.log(res.data.data)
		      this.list = res.data.data
		    })
		 }
	  },
	  mounted() {
	   this.getlist()
	  }
	})


</script>
<!-- 菜单切换 -->
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$change_li = $(".nav a");
		$change_li.each(function(i) {
			$(this).mouseover(function() {
				$(this).addClass("on").siblings().removeClass("on");
				$(".childbox .boxing").eq(i).show().siblings().hide();
				if (oWebControl != null) {
					oWebControl.JS_Resize($(".spbox").width(),$(".spbox").height());
					// oWebControl.JS_Resize(400,600);
					setWndCover();
				}
			})
		});
	});
</script>

<!-- 视频监控js -->

<script src="jquery-1.12.4.min.js"></script>
<script src="jsencrypt.min.js"></script>
<script src="jsWebControl-1.0.0.min.js"></script>

<script type="text/javascript">
	// 插件对象实例，初始化为null，需要创建多个插件窗口时，需要定义多个插件对象实例变量，各个变量唯一标志对应的插件实例
	var oWebControl = null;
	var bIE = (!!window.ActiveXObject || 'ActiveXObject' in window); // 是否为IE浏览器
	var pubKey = ''; // demo中未使用加密，可根据需求参照开发指南自行使用加密功能
	var initCount = 0;
	var playMode = 0; // 播放类型，0-预览，1-回放
	var showDivInstruction = false; // 标志是否显示使用说明弹框

	$(window).load(function () {
		initPlugin();
		// yulan();''
	});
	function initPlugin() {
		oWebControl = new WebControl({
			szPluginContainer: "playWnd", // 指定容器id
			iServicePortStart: 15900, // 指定起止端口号，建议使用该值
			iServicePortEnd: 15909,
			szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
			cbConnectSuccess: function() { // 创建WebControl实例成功
				oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务
					dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
				}).then(function() { // 启动插件服务成功
					oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
						cbIntegrationCallBack: cbIntegrationCallBack
					});
					oWebControl.JS_CreateWnd("playWnd", 860, 600).then(
				function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
						init(); // 创建播放实例成功后初始化
						setTimeout(function(){
							yulan()
						},2000)
					});
				}, function() { // 启动插件服务失败
				});
			},
			cbConnectError: function() { // 创建WebControl实例失败
				oWebControl = null;
				$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
				WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
				initCount++;
				if (initCount < 3) {
					setTimeout(function() {
						initPlugin();
					}, 3000)
				} else {
					$("#playWnd").html("插件启动失败，请检查插件是否安装！");
					alert("监测当前计算机未安装插件，点击确定下载安装");
					window.open("https://www.ynzhsk.cn/jiankong/VideoWebPlugin.exe")
				}
			},
			cbConnectClose: function(bNormalClose) {
				// 异常断开：bNormalClose = false
				// JS_Disconnect正常断开：bNormalClose = true
				console.log("cbConnectClose");
				oWebControl = null;
			}
		});
	}

	// 设置窗口控制回调
	function setCallbacks() {
		oWebControl.JS_SetWindowControlCallback({
			cbIntegrationCallBack: cbIntegrationCallBack
		});
	}
	function kztest(){
		oWebControl.JS_SetWindowControlCallback({
			cbIntegrationCallBack: cbIntegrationCallBack
		});
	}
	// 推送消息
	function cbIntegrationCallBack(oData) {
		console.log(JSON.stringify(oData.responseMsg));
		showCBInfo(JSON.stringify(oData.responseMsg));
	}

	//初始化
	function init() {
		getPubKey(function() {

			////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
			var appkey = "29492226"; //综合安防管理平台提供的appkey，必填
			var secret = setEncrypt("82TBBS3plLUTx1XftSh2"); //综合安防管理平台提供的secret，必填
			var ip = "139.9.65.252"; //综合安防管理平台IP地址，必填
			var playMode = 0; //初始播放模式：0-预览，1-回放
			var port = 1443; //综合安防管理平台端口，若启用HTTPS协议，默认443
			var snapDir = "D:\\SnapDir"; //抓图存储路径
			var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
			var layout = "3x3"; //playMode指定模式的布局
			var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
			var encryptedFields = 'secret'; //加密字段，默认加密领域为secret
			var showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
			var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
			var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮

			oWebControl.JS_RequestInterface({
				funcName: "init",
				argument: JSON.stringify({
					appkey: appkey, //API网关提供的appkey
					secret: secret, //API网关提供的secret
					ip: ip, //API网关IP地址
					playMode: playMode, //播放模式（决定显示预览还是回放界面）
					port: port, //端口
					snapDir: snapDir, //抓图存储路径
					videoDir: videoDir, //紧急录像或录像剪辑存储路径
					layout: layout, //布局
					enableHTTPS: enableHTTPS, //是否启用HTTPS协议
					encryptedFields: encryptedFields, //加密字段
					showToolbar: showToolbar, //是否显示工具栏
					showSmart: showSmart, //是否显示智能信息
					buttonIDs: buttonIDs //自定义工具条按钮
				})
			}).then(function(oData) {
				oWebControl.JS_Resize($(".spbox").width(),$(".spbox").height()); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
			});
		});
	}

	//获取公钥
	function getPubKey(callback) {
		oWebControl.JS_RequestInterface({
			funcName: "getRSAPubKey",
			argument: JSON.stringify({
				keyLength: 1024
			})
		}).then(function(oData) {
			console.log(oData);
			if (oData.responseMsg.data) {
				pubKey = oData.responseMsg.data;
				callback()
			}
		})
	}

	//RSA加密
	function setEncrypt(value) {
		var encrypt = new JSEncrypt();
		encrypt.setPublicKey(pubKey);
		return encrypt.encrypt(value);
	}

	// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
	$(window).resize(function() {
		if (oWebControl != null) {
			oWebControl.JS_Resize($(".spbox").width(),$(".spbox").height());
			// oWebControl.JS_Resize(400,600);
			setWndCover();
		}
	});

	// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
	$(window).scroll(function() {
		if (oWebControl != null) {
			oWebControl.JS_Resize($(".spbox").width(),$(".spbox").height());
			setWndCover();
		}
	});


	// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
	function setWndCover() {
		var iWidth = $(window).width();
		var iHeight = $(window).height();
		var oDivRect = $("#playWnd").get(0).getBoundingClientRect();

		var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
		var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
		var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
		var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;

		iCoverLeft = (iCoverLeft > 1000) ? 1000 : iCoverLeft;
		iCoverTop = (iCoverTop > 600) ? 600 : iCoverTop;
		iCoverRight = (iCoverRight > 1000) ? 1000 : iCoverRight;
		iCoverBottom = (iCoverBottom > 600) ? 600 : iCoverBottom;

		oWebControl.JS_RepairPartWindow(0, 0, 1001, 600); // 多1个像素点防止还原后边界缺失一个像素条
		if (iCoverLeft != 0) {
			oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600);
		}
		if (iCoverTop != 0) {
			oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
		}
		if (iCoverRight != 0) {
			oWebControl.JS_CuttingPartWindow(1000 - iCoverRight, 0, iCoverRight, 600);
		}
		if (iCoverBottom != 0) {
			oWebControl.JS_CuttingPartWindow(0, 600 - iCoverBottom, 1000, iCoverBottom);
		}
	}


	//视频预览功能
	$("#initBtn").click(function(){
		{
			var cameraIndexCode = '65807c4bca1f44cbad8fb7a5cca0ff3e'; //获取输入的监控点编号值，必填
			var streamMode = 0; //主子码流标识：0-主码流，1-子码流
			var transMode = 1; //传输协议：0-UDP，1-TCP
			var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
			var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
			console.log("播放")
			// cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
			// cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");

			oWebControl.JS_RequestInterface({
				funcName: "startPreview",
				argument: JSON.stringify({
					cameraIndexCode: cameraIndexCode, //监控点编号
					streamMode: streamMode, //主子码流标识
					transMode: transMode, //传输协议
					gpuMode: gpuMode, //是否开启GPU硬解
					wndId: wndId //可指定播放窗口
				})
			})
		}
	});
	function yulan(){
		var cameraIndexCode = '1ef84de21c0e4aa19cde1c17b38bd065'; //获取输入的监控点编号值，必填
		var streamMode = 0; //主子码流标识：0-主码流，1-子码流
		var transMode = 1; //传输协议：0-UDP，1-TCP
		var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
		var wndId = 1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
		console.log("播放")
		// cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
		// cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");

		oWebControl.JS_RequestInterface({
			funcName: "startPreview",
			argument: JSON.stringify({
				cameraIndexCode: cameraIndexCode, //监控点编号
				streamMode: streamMode, //主子码流标识
				transMode: transMode, //传输协议
				gpuMode: gpuMode, //是否开启GPU硬解
				wndId: wndId //可指定播放窗口
			})
		})
		oWebControl.JS_RequestInterface({
			funcName: "startPreview",
			argument: JSON.stringify({
				cameraIndexCode: '59d37cb069324f65ab935845d5cdf965', //监控点编号
				streamMode: streamMode, //主子码流标识
				transMode: transMode, //传输协议
				gpuMode: gpuMode, //是否开启GPU硬解
				wndId: 2 //可指定播放窗口
			})
		})
		oWebControl.JS_RequestInterface({
			funcName: "startPreview",
			argument: JSON.stringify({
				cameraIndexCode: '212125350cb942818b8aebcb1ac07bcc', //监控点编号
				streamMode: streamMode, //主子码流标识
				transMode: transMode, //传输协议
				gpuMode: gpuMode, //是否开启GPU硬解
				wndId: 3 //可指定播放窗口
			})
		})
		oWebControl.JS_RequestInterface({
			funcName: "startPreview",
			argument: JSON.stringify({
				cameraIndexCode: '82e28bd1bf9f4cc79c332a3a094119f6', //监控点编号
				streamMode: streamMode, //主子码流标识
				transMode: transMode, //传输协议
				gpuMode: gpuMode, //是否开启GPU硬解
				wndId: 4 //可指定播放窗口
			})
		})
		oWebControl.JS_RequestInterface({
			funcName: "startPreview",
			argument: JSON.stringify({
				cameraIndexCode: 'eda5669c46a64ff38a24278683608a1d', //监控点编号
				streamMode: streamMode, //主子码流标识
				transMode: transMode, //传输协议
				gpuMode: gpuMode, //是否开启GPU硬解
				wndId: 5 //可指定播放窗口
			})
		})
		oWebControl.JS_RequestInterface({
			funcName: "startPreview",
			argument: JSON.stringify({
				cameraIndexCode: 'c6e299e8130a478dbddb0b98204cb0ec	', //监控点编号
				streamMode: streamMode, //主子码流标识
				transMode: transMode, //传输协议
				gpuMode: gpuMode, //是否开启GPU硬解
				wndId: 6 //可指定播放窗口
			})
		})
		oWebControl.JS_RequestInterface({
			funcName: "startPreview",
			argument: JSON.stringify({
				cameraIndexCode: 'e1f101b0b02344e192e58aa092dbdd96', //监控点编号
				streamMode: streamMode, //主子码流标识
				transMode: transMode, //传输协议
				gpuMode: gpuMode, //是否开启GPU硬解
				wndId: 7 //可指定播放窗口
			})
		})
	}
	//停止全部预览
	$("#stopAllPreview").click(function() {
		oWebControl.JS_RequestInterface({
			funcName: "stopAllPreview"
		});
	});
</script>