<%@ 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="../../../../../szmap/resource/css/map.main.css" /> 
	<link rel="stylesheet" type="text/css" href="../../../../../szmap/resource/css/map.icons.css" /> 
	<link rel="stylesheet" type="text/css" href="../../../../../szmap/resource/css/idangerous.swiper.css" /> 
	<link rel="stylesheet" type="text/css" href="../../../../../szmap/resource/css/mapDialog.css" /> 
	<link rel="stylesheet" type="text/css" href="css/planExec.css" /> 
	<script src="../../../../../../frame/bootstrap/layer/layer.js" type="text/javascript" ></script>
	<script type='text/javascript' src='../../../../../szmap/pushlet/ajax-pushlet-client.js'></script>
	<script type='text/javascript' src='../../../../../../common/mapUtil.js'></script>
	<!-- 播放视频的js控件  -->
	<script type='text/javascript' src='../../../nplan/PlanRtc.js'></script>
    <script type="text/javascript" src="../../../../../../frame/main/area/console/rtcPanel.js"></script>
	<script type="text/javascript" src="../../../../../../frame/main/area/console/rtcServer.js"></script>
	<script type="text/javascript" src="../../../../../../frame/main/area/console/rtcResponse.js"></script>
	<script type="text/javascript" src="../../../../webrtc/resource/js/blockcacher.js"></script>
	<script type="text/javascript" src="../../../../webrtc/resource/js/blockutil.js"></script>
	<script type="text/javascript" src="../../../../webrtc/resource/js/globalvideoblock.js"></script>
	<script type="text/javascript" src='../../../../webrtc/resource/js/globalrecordblock.js'></script>
	<!-- 一键通话js控件  -->
	<script type="text/javascript" src='../../../../webrtc/resource/js/globalphoneblock.js'></script>
	<script type='text/javascript' src='gsld_sjxx_frame_pushlet.js'></script>
	<script type='text/javascript' src='gsld_sjxx_frame_plan.js'></script>
	<script type='text/javascript' src='ProgressBar.js'></script>
	<script type='text/javascript' src='gsld_sjxx_frame.js'></script>
	<style type="text/css">
		.pageBottom{
				/*background: url(resource/img/bgcenter.png);*/
				/* background: url(../../../../../bigscreen/bigpage2/resource/img/background-img/bgcenter.png); */ 
				background-size: 100% 100%;
				padding:10px 0 ;
				/* top: 78%;
				left: 22.4%; */
				width: 100%;
				height:100%;
				/*调试用固定分辨率
				min-width: 1056px;
    			min-height: 237px;*/
				z-index: 2;
			}
			.colorw {
			    color: #444;
			}
			.info-ul{
				margin-top:-6px !important;
			}
			.dialog-btm1{
				margin-top:10px;
			}

			.dialog-top{
			    height: 250px !important;
			}
			.info-ul2 {
				    position: absolute;
				   	bottom:18px;
			}
			
	  #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;
        }
	</style>
</head>
<body>
<body class="easyui-layout" >
	<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="recordNav" style="cursor: pointer;" data-c="2" data-channel="" onclick="eventTabChange('recordDiv')">录像</li> 
			<li id="videoNav" style="cursor: pointer;" data-c="3" data-channel="" onclick="eventTabChange('videoDiv')">视频</li>
			<!-- 
			<li id="planNav" style="cursor: pointer;" data-c="4" data-channel="" onclick="eventTabChange('planDiv')">预案</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" >
						 	<!--在线播放视频 -->
							 <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 class=""></div>
				</div>
				<div class="pc-recordvideo" style="display:none"> <!-- 回放视频 -->
					<div class="pc-video-box">
						<div class="toCanvasBox"   style="height:247px;"  id="record"   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; top: 232px;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 class=""></div>
				</div>
				<div class="pc-img" style="display:block">
					<!-- 显示图片 -->
					<div class="pc-img-topimg" style="box-shadow: 0 0 5px #a09f9f;">
						<img src="" alt="" width="430" height="250" onerror="javascript:$.loadErrorPic(this);"/>
<!-- 						<img src="" alt="" width="430" height="250" onerror='$.loadErrorPic(this);'/> -->
					</div>
					<div class="pc-img-btm" style="display:none;"></div>
				</div>
	   		</div>
	   		<div class="div-info" style="margin-left: 18px;border:0px solid #ff00ff;">
	   			<ul class="info-ul"> 
	   				<!-- 显示右侧告警文字信息和按钮 -->
	   				<li>相机名称：<span id="tdmc"></span></li>
	   				<li>报警时间：<span id="occurTime"></span></li>
					<li>事件类型：<span id="eventName"></span></li>
					<li>警情等级：<span id="alarmLevelName"></span></li>
					<li>道路名称：<span id="roadName"></span></li>
					<li>隧道名称：<span id="tunnelName"></span></li>
					<li>起止桩号：<span id="startPile"></span></li>
					<li>处理状态：<span id="accidentName"></span></li>
					<div id="showYaxx" style="display:none">
					<li>关联预案：<span id="planName"></span></li>
					</div>
	   			</ul>
	   			<ul class="info-ul1">
	   				<!-- 
	   				<li>admin确认报警</li>
	   				-->
	   			</ul>
	   			<ul class="info-ul2" >
	   				<li>
		   				<input type="button" id="btn_qrbj" data-id="" class="btn btn-default" onclick="alarmCheckTrue()"  value="确认报警"/>
		   				<input type="button" id="btn_hlbj" data-id="" class="btn btn-ignore" onclick="alarmCheckFalse()"  value="忽略报警"/>
		   				<input type="button" id="btn_checkPlan" onclick="checkPlan()" class="btn btn-default" value="查看预案"/>
	   				</li>
	   				<!-- 
	   				<li>
		   				<input type="button" id="btn_pre" data-id="" class="btn btn-default" value="上一页"/>
		   				<input type="button" id="btn_down" data-id="" class="btn btn-default"  value="下一页"/>
	   				</li>
	   				 -->
	   			</ul>
	   		</div>
	   	</div>
	   
	   	<div class="dialog-btm1">
	   		<div class="dialog-btm1-left">
	   			<input type="button" class="btn btn-left" value="122通信"/>
	   			<input type="button" class="btn btn-left" value="120通信"/>
	   			<input type="button" class="btn btn-left" value="119通信"/>
	   		</div>
	   		<div class="dialog-btm1-right">
	   			<!-- 
	   			<input type="button" class="btn btn-right" value="上一条"/>
	   			<input type="button" class="btn btn-right" value="下一条"/>
	   			<input type="button" class="btn btn-right" value="关闭"/>
	   			 -->
	   		</div>
	   	</div>
	</div>
	
	<div id="planDiv" style='border:0px solid #ff00ff; display:none;'>
   		<div id="amqState"></div>
   		<div id="allExecStep"></div>
   		<div id="currentExecStep"></div>
   		<div id="currentExecLinkage"></div>
   		<div id="currentDeviceStep"></div>
   		<div id="currentDeviceState"></div>
   		<div id="otherExecStep"></div>
   		<div id="otherDeviceStep"></div>  
   		
   		<!--  requestState 0:不进入请求后台，1：请求后台，-->
   		<div id="requestState"></div>  
   		 		
   		<!-- <div id="planBtn">
   			<input id="启动" type="button" value="启动" />
   			<input id="暂停"  type="button" value="暂停" />
   			<input id="继续执行"  type="button" value="继续执行" />
   			<input id="终止"  type="button" value="终止" />
   		</div> -->
   		<div id="planlinageDiv" class="container" style="border:0px solid #ff00ff;">
	   		<div class="pageBottom   "  width="100%" height="100%" id="pageBottom">
				<iframe id="iframe_pageBottom" src="" width="100%" height="100%" frameborder="0">
						
				</iframe>
			</div>
   		</div>
   	</div>
	   <div id="yuanIframe_traffic" style="display: none; z-index: 3; position: absolute; width: 700px; height: 420px; top: 0; left: 0;">
			 <iframe  src="" width="100%" height="100%"  frameborder="0" scrolling="no" ></iframe>
		</div>
</body>
</html> 

