<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
		 <%@include file="../../../frame/assets/header-all.jsp"%>
		<link rel="stylesheet" type="text/css" href="css/mapDialog.css" /> 
		<!-- 播放视频的js控件  -->
		<script type="text/javascript" src="../../common/js/video/blockcacher.js"></script>
		<script type="text/javascript" src="../../common/js/video/blockutil.js"></script>
		<script type="text/javascript" src="../../common/js/video/globalvideoblock.js"></script>
		<script type="text/javascript" src='../../common/js/video/globalrecordblock.js'></script>
		<script type='text/javascript' src='../../common/js/video/PlanRtc.js'></script>
		<script type='text/javascript' src='../../recordalarm/ywrecordcurrentstate/playvideo/videojs/ProgressBar.js'></script>
		 <script type="text/javascript" src="detailVideoQuality.js"></script>
		 <style type="text/css">
			.info-ul{margin-top:0 !important;}
				#videoControls{
	            width: 430px;
	            margin-top: 0px;
	            height: 14px;
	        }
	        .show{
	            opacity: 1;
	        }
	        .hide{
	            opacity: 0;
	        }
	        #progressWrap{
	            background-color: #73859f;
	            height: 14px;
	            cursor: pointer;
	        }
	        #playProgress{
	            background-color: yellow;
	            width: 0px;
	            height: 14px;
	        }
	        #showProgress{
	            font-size: 12px;
			   line-height: 11px;
			   color: white;
	        }
	        .pc-video-box{
	        	height:auto !important;
	        }
	        .pc-video{
				float: left;
			    /*box-shadow: 0 0 5px #a09f9f;*/
			    margin: 3px 1px 1px 1px;
			}
			.pc-recordvideo{
				float: left;
			    /*box-shadow: 0 0 5px #a09f9f;*/
			    margin: 3px 1px 1px 1px;
			}
			.pc-video-box{
				float: left;
			    box-shadow: 0 0 5px #a09f9f;
			    padding: 1px 1px 1px 1px;
			    width: 430px;
			    height: 300px;
				/*border: 1px solid #969393;*/
			}
			.toCanvasBox {
			    position: relative;
			    width: 430px;
			    height: 300px;
			}
			.wb{
				display:inline-block;
				width: 30%;
			}
			.width100{
				width:100%
			}
			.field1{
				display:inline-block;
				width:80px;
				font-size: 14px;
   				margin-top: 10px;
   				margin-left: 10px;
			}
		 </style>
	</head>
	<body id="bodybody" class="easyui-layout"  data-options="onBeforeClose:function(){alert(1)}">
	<div>
		<ul ID="event_tab_div" class="div-img-title" data-query="">
			<li id="pictureNav" style="cursor: pointer;" class="active" data-c="1" data-channel="" onclick="eventTabChange('eventDiv')">图片</li>
			<li id="videoNav" style="cursor: pointer;" data-c="3" data-channel="" onclick="eventTabChange('videoDiv')">视频</li>
			<li id="recordNav" style="cursor: pointer;" data-c="2" data-channel="" onclick="eventTabChange('recordDiv')">录像</li> 
			<li id="showDetail" style="cursor: pointer;"  onclick="eventTabChange('detailDiv')">详情</li>
		</ul>
	</div>
	<div id="eventDiv" title="" style="border:0px solid #ff00ff;" >
	   	<div class="dialog-top" style='border:0px solid #ff00ff;'>
	   		<div class="div-img">
	   			<div class="pc-video" style="display:none"> <!-- 显示视频 -->
					<div class="pc-video-box">
						<div class="toCanvasBox" id="video"  style="height:280px;">
						 	<!--在线播放视频 -->
							 <video autoplay="" emptied="alert('emptied')" error="alert('error')" class="canvasVideo" style="width:100%;height:100%;object-fit:fill;border:1px solid #ddd;"></video>
						</div>	
					</div>
				</div>
				<div class="pc-recordvideo" style="display:none"> <!-- 回放视频 -->
					<div class="pc-video-box">
						<div class="toCanvasBox" id="record" style="height:280px;" onmouseover="ProgressBar.showVideoControls(event,'over')"   onmouseout="ProgressBar.showVideoControls(event,'out');">
						 	<video  onprogress="ProgressBar.progress(this);"  autoplay="" emptied="alert('emptied')" error="alert('error')" style="width:100%;height:100%;object-fit:fill;border:1px solid #ddd;"></video>
						
			 	            <div id="videoControls"  style="position: absolute; bottom:0;display:none;"  > 
				                <div id="progressWrap"  onclick="ProgressBar.sendMsg(event);" onmouseout ="ProgressBar.showTimeTip(event,'out');" onmousemove ="ProgressBar.showTimeTip(event,'over');">  
				                    <div id="playProgress">  
				                        <span id="showProgress">0%</span> 
				                    </div>
				                </div>
						            <div  style="top: -16px;font-weight: bolder;background: black;position:absolute;z-index:20;    color: white;display:none;"  id="timeTip"></div>
				            </div> 
						</div>	
					</div>
					
				</div>
				<div class="pc-img" style="display:block">
					<!-- 显示图片 -->
					<div class="pc-img-topimg" style="box-shadow: 0 0 5px #a09f9f;">
						<img width="430" height="280" onerror="javascript:$.loadErrorPic(this);"/>
					</div>
				</div>
				
				<div class="detail" style="display:none">
					<li>
						<div class="wb">
							<span class="field1">是否在线:</span><span class="field2" id="isonline"></span>
						</div>
						<div class="wb">
							<span class="field1">抽帧状态:</span><span class="field2" id="vqcstate"></span>
						</div>
					 	<div class="wb">
					 		<span class="field1">视频丢失:</span><span class="field2" id="nosignalstatus"></span> 						 		
					 	</div>
					 </li>
					 
					 <li>
					 	<div class="wb">
					 		<span class="field1">图像模糊:</span><span class="field2" id="imgclearstatus"></span> 						 		
					 	</div>
					 	<div class="wb">
					 		<span class="field1">对比度异常:</span><span class="field2" id="imgcontraststatus"></span> 						 		
					 	</div>
					 	<div class="wb">
					 		<span class="field1">图像过亮:</span><span class="field2" id="imgoverbrightstatus"></span> 						 		
					 	</div>
					 </li>
					 
					 <li>
					 	<div class="wb">
					 		<span class="field1">图像过暗:</span><span class="field2" id="imgtoodarkstatus"></span> 						 		
					 	</div>
					 	<div class="wb">
					 		<span class="field1">图像偏色:</span><span class="field2" id="imgcolorstatus"></span> 						 		
					 	</div>
					 	<div class="wb">
					 		<span class="field1">噪声干扰:</span><span class="field2" id="videonoisestatus"></span> 						 		
					 	</div>
					 </li>
					
					<li>
						<div class="wb">
					 		<span class="field1">条纹干扰:</span><span class="field2" id="videorollstripestatus"></span> 						 		
					 	</div>
					 	<div class="wb">
					 		<span class="field1">黑白图像:</span><span class="field2" id="blackwhiteimgstatus"></span> 						 		
					 	</div>
					 	<div class="wb">
					 		<span class="field1">画面冻结:</span><span class="field2" id="videofreezestatus"></span> 						 		
					 	</div>
					 </li>
					 
					 <li>
					 	<div class="wb">
					 		<span class="field1">视频抖动:</span><span class="field2" id="videojitterstatus"></span> 						 		
					 	</div>
					 	<div class="wb">
					 		<span class="field1">视频剧变:</span><span class="field2" id="videoupheavalstatus"></span> 						 		
					 	</div>
					 	<div class="wb">
					 		<span class="field1">场景变更:</span><span class="field2" id="scenechangestatus"></span> 						 		
					 	</div>
					 </li>
					 <li>
					 	<div class="wb">
					 		<span class="field1">视频遮挡:</span><span class="field2" id="videoocclusionstatus"></span> 						 		
					 	</div>
					 	<div class="wb">
					 		<span class="field1">录像状态:</span><span class="field2" id="recordstate"></span> 						 		
					 	</div>
					 </li>
				</div>
				
	   		</div>
	   		<div class="div-info" style="margin-left: 18px;border:0px solid #ff00ff;">
	   			<ul class="info-ul"> 
	   				<!-- 显示右侧告警文字信息和按钮 -->
					<li>通道名称：<span id="channelname"></span></li>
					<li>设备编号：<span id="videonum"></span></li>
					<li>通道编号：<span id="channelnum"></span></li>
					<li>设备IP：<span id="sbip"></span></li>
					<li>厂家名称：<span id="cjmc"></span></li>
					<!-- <li>当前状态：<span id="currentstate"></span></li> -->
	   			</ul>
	   			  <div id="recordBtn" style="display:none;">
						   <div  style="height:24px;line-height:24px;color:#080b7c;font-weight:bold;">
		   							<!-- <span  id="tdmc">高架桥</span>&nbsp;&nbsp;&nbsp;[<span id="tdbh">20181101</span>] -->
				   			</div>
				   			<div style="width:90px;">
				   				<input class="easyui-datebox"   type="text" id="searchDate" style="width:180px;">
				   			</div>
				   			<span href="#"  id="searchVideo"  onclick="searchVideo()" style="    display: block; width: 82px;height: 30px;line-height: 30px;margin-top: 16px;color: white;background-color: #67c23a;text-align: center;cursor:pointer;">搜索录像</span>
					  </div>
	   		</div>
	   	</div>
	</div>
	</body>
</html>	
<script>
function formatter1(date){
	if (!date){return '';}
	return $.fn.datebox.defaults.formatter.call(this, date);
}
function parser1(s){
	if (!s){return null;}
	return $.fn.datebox.defaults.parser.call(this, s);
}
</script>