<%@ page language="java" contentType="text/html; charset=gbk"
    pageEncoding="gbk"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<%@include file="../../../frame/assets/header-all.jsp"%>
<style type="text/css">
	#dd>div {
	width: 100%;
    padding: 0 6px;
}

.dialog-top {
	height: 344px;
	/* border: 1px solid red; */
	overflow: hidden;
}

.dialog-top>div {
	float: left;
}

.div-img-title {
	overflow: hidden;
	margin: 1px 1px 0px -1px;
}

.div-img-title>li {
	float: left;
    width: 60px;
    height: 30px;
    text-align: center;
    padding: 9px 11px;
    color: #868585;
    background-color: #e2e1e1;
}

.div-img {
	587px
}
.info-ul{    
	margin-top: 30px;
	line-height: 20px;
}
.info-ul li {
	padding: 2px 0;
}

.view .swiper-container {
	width: 500px;
	height: 500px;
}

.view .arrow-left {
	background: url(images/index_tab_l.png) no-repeat left top;
	position: absolute;
	left: 10px;
	top: 50%;
	margin-top: -25px;
	width: 28px;
	height: 51px;
	z-index: 10;
}

.view .arrow-right {
	background: url(images/index_tab_r.png) no-repeat left bottom;
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -25px;
	width: 28px;
	height: 51px;
	z-index: 10;
}

.preview {
	width: 100%;
	margin-top: 10px;
	position: relative;
}

.preview .swiper-container {
	width: 430px;
	height: 82px;
	margin-left: 35px;
}

.preview .swiper-slide {
	width: 87px;
	height: 82px;
}

.preview .slide6 {
	width: 82px;
}

.preview .arrow-left {
	background: url(images/feel3.png) no-repeat left top;
	position: absolute;
	left: 10px;
	top: 50%;
	margin-top: -9px;
	width: 9px;
	height: 18px;
	z-index: 10;
}

.preview .arrow-right {
	background: url(images/feel4.png) no-repeat left bottom;
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -9px;
	width: 9px;
	height: 18px;
	z-index: 10;
}

.preview img {
	padding: 1px;
}

.preview .active-nav img {
	padding: 0;
	border: 1px solid #F00;
}


/*结束*/

.dialog-btm1 {
	overflow: hidden;
	margin-top: 110px;
}
.dialog-btm1-left{
	float: left;
}
.dialog-btm1-right{
	float: right;
}
.div-img-title li.active{
	background-color: #67c23a!important;
    border-color: #67c23a;
    height: 30px;
    width: 60px;
    text-align: center;
    color: #fff;
}
.div-img-title li{
	margin: 0 2px;
}
.info-ul li{
	margin: 4px 0;
}
.div-info{
	width: 230px;
    height: 341px;
}
.info-ul2{
	 position: absolute;
    bottom: 75px;
}
.btn-default {
    border: none;
    border-radius: 0;
    font-size: 12px;
    height: 30px;
    width: 80px;
    text-align: center;
    background: #67c23a;
    color: #fff !important;
    border: 1px solid #5dab36;
}

.btn-ignore {
    border: none;
    border-radius: 0;
    font-size: 12px;
    height: 30px;
    width: 80px;
    text-align: center;
    background: #e8e8e8;
    border: 1px solid #ccc9c9;
    color: #868585 !important;
}
.btn-left{
    border-radius: 0;
    border: 1px solid #cfcfcf;
    font-size: 12px;
    height: 30px;
    width: 80px;
    text-align: center;
    background: #fff;
    color: red !important;
    margin: 1px 1px 8px 2px;
}
.btn-right{
    border-radius: 0;
    border: 1px solid #cfcfcf;
    font-size: 12px;
    height: 30px;
    width: 80px;
    text-align: center;
    background: #fff;
    color: black !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;
}
.pc-img-top>img{
	width: 480px;
    height: 245px;
}
.pc-img-topimg>img{
	margin: 1px 1px 1px 1px;
	border: 1px solid #969393;
}
.pc-img-btm{
	margin-top: 3px;
	overflow: hidden;
}
.pc-img-btm>img{
	float: left;
	height: 67px;
    width: 111px;
	margin: 1px 3px 1px 1px;	
	border: 1px solid #969393;
}
.dialog-btm{
	display:none;
}
.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>
<script type="text/javascript">
$(function(){
	var winId	= getUrlParam("winId");
	var records = top.$("#"+winId).panel("options").data;
	fillDetailInfo(records);
});

function getUrlParam(name){
  	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");    
  	var search = window.location.search.substr(1);
  	var href = window.location.href;
  	if(href.indexOf("?")>=0){
  		search = href.substr(href.indexOf("?")+1);
  	}
  	var r = search.match(reg);    
  	if (r != null) return decodeURI(r[2]); return null;    
}

function eventTabChange(type){
	if(type=="eventDiv"){   //事件图片
	//	console.log("$('#recordBtn')",$("#recordBtn"))
		$("#eventDiv").css("display","block");
		$(".pc-recordvideo").css("display","none");
		$(".pc-img").css("display","block");
		$("#pictureNav").addClass("active");
		
		$(".detail").css("display","none");
		$("#showDetail").removeClass("active");
		$(".div-info").css("display","block");
		$(".div-img").removeClass("width100");
	}else if(type=="detailDiv"){
		// 详情页面
		$("#eventDiv").css("display","block");
		$(".pc-img").css("display","none");
		$("#pictureNav").removeClass("active");
		
		$(".detail").css("display","block");
		$("#showDetail").addClass("active");
		$(".div-info").css("display","none");
		$(".div-img").addClass("width100");
	}
}

function fillDetailInfo(data){
	$("#channelname").text(data.tdmc);
	$("#videonum").text(data.tdbh);
	$("#channelnum").text(data.sbbh);
	$("#sbip").text(data.sbip);
	$("#cjmc").text(data.cjmc);
	$("#currentstate").text(data.currentstatename);

	var pciUrl = data.extend1;
	if (data.extend1 == null || data.extend1 == '' || data.extend1 == '无') {
		pciUrl = data.extend2;
	}
	var proName = window.location.pathname.split("/")[1];
	var sysUrl = "http://"+window.location.host+"/"+proName;
	var picProxyGetUrl = sysUrl+"/sourceProxy?fileType=picUrlProxy&picUrl="+data.extend1;
	$(".pc-img .pc-img-topimg img").attr("src",picProxyGetUrl);
	// 详情
	var isonline = data.isonline;
	show("#isonline",isonline);
	var vqcstate = data.vqcstate;
	show("#vqcstate",vqcstate);
	var nosignalstatus = data.nosignalstatus;
	nosignalTransStatus("#nosignalstatus",nosignalstatus);

	var imgclearstatus = data.imgclearstatus;
	show("#imgclearstatus",imgclearstatus);
	var imgcontraststatus = data.imgcontraststatus;
	show("#imgcontraststatus",imgcontraststatus);
	var imgoverbrightstatus = data.imgoverbrightstatus;
	show("#imgoverbrightstatus",imgoverbrightstatus);

	var imgtoodarkstatus = data.imgtoodarkstatus;
	show("#imgtoodarkstatus",imgtoodarkstatus);
	var imgcolorstatus = data.imgcolorstatus;
	show("#imgcolorstatus",imgcolorstatus);
	var videonoisestatus = data.videonoisestatus;
	show("#videonoisestatus",videonoisestatus);

	var videorollstripestatus = data.videorollstripestatus;
	show("#videorollstripestatus",videorollstripestatus);
	var blackwhiteimgstatus = data.blackwhiteimgstatus;
	show("#blackwhiteimgstatus",blackwhiteimgstatus);
	var videofreezestatus = data.videofreezestatus;
	show("#videofreezestatus",videofreezestatus);

	var videojitterstatus = data.videojitterstatus;
	show("#videojitterstatus",videojitterstatus);
	var videoupheavalstatus = data.videoupheavalstatus;
	show("#videoupheavalstatus",videoupheavalstatus);
	var scenechangestatus = data.scenechangestatus;
	show("#scenechangestatus",scenechangestatus);

	var videoocclusionstatus = data.videoocclusionstatus;
	show("#videoocclusionstatus",videoocclusionstatus);
	var recordstate = data.recordstate;
	show("#recordstate",recordstate);
}

function show(id,zt){
	if(zt==1){
		$(id).html('<div style="height:13px;width:13px;background-color:#60b631;border-radius:50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;margin-bottom: 0;margin-top: -13px;margin-left: 42%;margin-right: 2px;"></div>');
	}else if(zt==0){
		$(id).html('<div style="height:13px;width:13px;background-color:#fe0000;border-radius:50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;margin-top: -13px;margin-left: 42%;margin-right: 2px;"></div>');
	}
}

function nosignalTransStatus(id,data){
	if(data=="1"){
		$(id).html("<div style='height:13px;width:13px;background-color:#60b631;border-radius:50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;margin-bottom: 0;margin-top: -13px;margin-left: 42%;margin-right: 2px;'></div>");
	} else if(data=="2") {
		$(id).html("<div class='tip' title='码流中断' style='height:13px;width:13px;background-color:#ff7a05;border-radius:50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;margin-bottom: 0;margin-top: -13px;margin-left: 42%;margin-right: 2px;'></div>");
	} else if(data=="3") {
		$(id).html("<div class='tip' title='帧率过低' style='height:13px;width:13px;background-color:#fe0000;border-radius:50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;margin-bottom: 0;margin-top: -13px;margin-left: 42%;margin-right: 2px;'></div>");
	} else if(data=="4") {
		$(id).html("<div class='tip' title='丢包' style='height:13px;width:13px;background-color:#fe0000;border-radius:50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;margin-bottom: 0;margin-top: -13px;margin-left: 42%;margin-right: 2px;'></div>");
	} else {
		return "";
	}
}
</script>
</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="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-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>
	   	</div>
	</div>
</body>
</html>