linan
/
dgs.bigScreen


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
							<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <title>视频监控</title>
  <link href="css/common.css" rel="stylesheet">
  <link href="css/spjk.css" rel="stylesheet">
  <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
  <script type="text/javascript" src="js/api.js"></script>
  <script type="text/javascript" src="js/jsmpeg.min.js"></script>
</head>
<body>
	<div class="header-wrapper">
	  <div class="title">
	  智能化综合管理平台
	  <svg version="1.1" width="900" height='100'>
	   <polygon points="0,0 75,100 114,100 135,82 765,82 786,100 825,100 900,0" style="fill:transparent;stroke:#69F8FE;stroke-width:2"/>
		</svg>
	  </div>
	  <div class="nav-bar">
		<a class="item " href="index.html">首页</a>
		<a class="item " href="fzfx.html">生产管理</a>
		<a class="item" href="swfk.html">生物防控</a>
		<a class="item active" href="spjk.html">视频监控</a>
		<a class="item" href="hbjc.html">环保监测</a>
	  </div>
	</div>
	<div class='video-content'>
		<div class='tab-list'>
			
			<div class="select dowebok">
				<span class="placeholder">请选择分区</span>
				<ul id="areaList">
					
				</ul>
			</div>
			<div class="select dowebok">
				<span class="placeholder">请选择栋舍</span>
				<ul id="deviceList">
					
					
				</ul>
			</div>
		</div>
		<div class='video-box'>
			<div class='video-wrapper'>
				<div class='video-wrapper-head'>请选择栋舍</div>
				<div class='video-windows'>
					<div class='video-play1'>
						<div class='video-play1-container'>
						<div class="tab"><span class="tab-title">通道一</span></div>
						
						<div class='video'>
						<svg version="1.1" width="37" height="25" class="wide-border-line1">
						  <g transform="translate(0.5 0.5)">
						   <polyline points="0,24.5 0,0 37,23.5 " style="fill:#0E1E51;stroke:#53BAFD;stroke-width:1"/>
						   
						   </g>
						   
							</svg>
							<svg version="1.1" width="160" height="25" class="wide-border-line2">
						  <g transform="translate(0.5 0.5)">
						   <polyline points="160,25 135,0 25,0 -1,23.5" style="fill:#0E1E51;stroke:#53BAFD;stroke-width:1"/>
						   </g>
							</svg>
							<div id="play-box" class="playerbox">
							</div>
						</div>
						</div>
					</div>					
				</div>
				
				
			</div>
				
			
		</div>
	</div>
	 <script type="text/javascript" src="js/spjk.js"></script>
	 <script>
		$(".video-windows").on('dblclick',".playerbox",function(){
			console.log("全屏")
			if($(this).attr("opening") == undefined || $(this).attr("opening")==0){
				$(this).attr("opening",1);
				$(this).css("position",'fixed')
				$(this).css("width","100%")
				$(this).css("height","100%")
				$(this).css("left","0")
				$(this).css("top","0")
				$(this).css("z-index","99999")
			}else{
				$(this).attr("opening",0);
				$(this).css("position",'relative')
				$(this).css("width","885px")
				$(this).css("height","498px")
				$(this).css("left","0")
				$(this).css("top","0")
				$(this).css("z-index","1")
			}
			
		})
		//ESC 关闭弹窗
		$(window).keyup(function (e) {
			if (e.keyCode == 27) {			
				if($(".playerbox").attr("opening") == 1){
					$(".playerbox").attr("opening",0);
					$(".playerbox").css("position",'relative')
					$(".playerbox").css("width","885px")
					$(".playerbox").css("height","498px")
					$(".playerbox").css("left","0")
					$(".playerbox").css("top","0")
					$(".playerbox").css("z-index","1")
				}
			}
		});
		$('.select').on('click', '.placeholder', function(e) {
			var parent = $(this).closest('.select');
			if (!parent.hasClass('is-open')) {
				parent.addClass('is-open');
				$('.select.is-open').not(parent).removeClass('is-open');
			} else {
				parent.removeClass('is-open');
			}
			e.stopPropagation();
		}).on('click', 'ul>li', function() {
			var parent = $(this).closest('.select');
			parent.removeClass('is-open').find('.placeholder').text($(this).text());
			if($(this).parent().attr("id")=="areaList"){
			//切换牧区
				var node = $(this).attr("node-id");
				getBuild(node)
			}else if($(this).parent().attr("id")=="deviceList"){
				var pl = players.length;
				for(var i=0;i<pl;++i){
					if(players[i]!=null){
						///console.log(player)
						players[i].stop();
						players[i].destroy();
						players.splice(i, 1);
					}	
				}
				console.log(players)
				var node = $(this).attr("node-id");
				$(".video-wrapper-head").text($(this).text());
				getDevice(node)
				
			}
				
		});
		
		
		$('body').on('click', function() {
			$('.select.is-open').removeClass('is-open');
		});
	 </script>
</body>
</html>