<%@ 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"%>
<!-- <link rel="stylesheet" type="text/css" href="../../../resource/css/page.css"/> -->
		<style type="text/css">
			/*公用部分*/
			html,
            body {
                margin: 0;
                padding: 0;
                /*调试用固定分辨率
               	min-width: 1900px;
                min-height: 1060px;  */
                width: 100%;
                height: 100%;
            }
			#body{
				margin: 0 auto;
				padding: 0;
				width: 100%;
				height:100%;
			}
			#echatss{
				width: 100%;
				height: 100%;
				overflow:hidden;
			}
			.w100{
				width: 100%;  
			}
			.h80{
				height:80%;
			}
			.displayCenter{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.z_index{
				z-index: 1;
			}
			.positionA{
				position:absolute;
			}
			.minLmg{
				width:15px;
				height: 30px;
			}
			
			/*中间部分*/
			.pageDatails{
				width: 39%;
			    height: 50%;
			    top: 20%;
			    left: 30%;
			}
			.datailsHeader{
				z-index: 2;
				height: 10%;
			}
			.datailsCenter{
				height: 78%;
				position:relative;
			}
			.datailsCenterLeft{
				width: 69%;
				height: 100%;
			}
			.datailsCenterRight{
				width: 29%;
			}
			.datailsCenter_Img{
				height:90%;
			}
			.datailsBigImg{
				width: 100%;
				height: 70%;
			}
			.datailsImgList {
				height:25%;
			}
			.datailsImgList span{
				width: 24%;
				height；100%;
			}
			.CenterRight_List p{
				margin: 0 0 10px 0;
			}
			.CenterRight_ListData{
				padding: 5px;
				height: 48%;
				/*border: 1px solid gray;*/
			}
			.CenterRight_ListData p{
				font-size: 12px;
				margin: 0 0 5px 0;
			}
			.datailsFooter{
				height: 12%;
				background:rgba(0, 0, 0, 0.7);
			}
			.pageDatails_padding{
				/*padding: 0 2%;*/
				padding: 0 0%;
			}
			.datailsCenter_Titel>div{
				padding: 0 15px;
				background:rgba(0, 0, 0, 0.5);
				margin-right: 2px;
			}
		
			/*实时视频*/
			.videoPageDatails{
				width: 100%;
			    height: 100%;
		
			}
			.videoPageBox{
				width: 100%;
				height: 98%;
				/*新增加样式*/
				padding:28px;
			}
			
			.table-content{
				width: 100%;
				height: 100%;
				border: 1px solid black;
			}
			.table-content tr td{
				height: 30px;
			    border: 1px solid black;
			    width: 50%;
			    text-align: left;
			    padding: 5px;
			}
	.pc-video-box{
	 height: 100%;
     width: 100%;
     padding: 2px;
     margin: 0 auto;
     text-align:center;
	}
	.headerTitel{
		background-color:#090f12;
		padding:0 20px;
	}
	.colorw{
		font-size:14px;
	}
	.colorw:hover{
		cursor:pointer;
	}
	
		</style>
		
		<script type="text/javascript">
		
		$(function(){
			//窗口关闭功能
		 	$("#arcgisDetail").find("span:eq(1)").click(function(){
				var oUl=parent.$("#echatss iframe")[0].contentWindow.document;
				$(oUl).find(".esri-component").show();
		 		parent.$("#arcgisVideoIframe").hide();
		 	});
			
		 	var winId	= getUrlParam("winId");
			var records = top.$("#"+winId).panel("options").data;
//			console.log("roadDetail.jsp====:",winId,records);
			
		 	 $.ajax({
		 		type:'post',
				dataType : 'json',
				url : 'trafficroadgridinfoAction!get_TrafficroadgridinfoById.do',
				data : {roadGridId:records.roadGridId},
				success:function(res){	
					if(res){
//						console.log("get_TrafficroadgridinfoById === : ",res);
						var roadName = res.roadname==null ? '':res.roadname;
						var ssld = res.remarks1==null ? '':res.remarks1;
						var upDirection = res.updirection==null ? '':res.updirection;
						var downDirection = res.downdirection==null ? '':res.downdirection;
						var tdmc = res.tdmc==null ? '':res.tdmc;
						var ldwz = res.roadgridposition;
						if(ldwz.length > 80){
							ldwz = ldwz.substring(0,80)+'...';
						}
						/* var startPile = res.startPile==null ? '':res.startPile;
						var endPile = res.endPile==null ? '':res.endPile;
						var longitude = res.longitude==null ? '':res.longitude;
						var latitude = res.latitude==null ? '':res.latitude; */
						$("#ssld").html('区域 : '+ssld);
						$('#bzsj').html('标注时间 : '+res.createtime);
						$("#roadName").html('路段名称 : '+roadName);						
						$('#tdmc').html('监控名称 : '+tdmc);
						
						$('#ldwz').html('区域位置 : '+ldwz)
						/* $("#startPile").html('起始桩号 : '+startPile);
						$("#endPile").html('结束桩号 : '+endPile);
						$("#longitude").html('经度 : '+longitude);
						$("#latitude").html('维度 : '+latitude); */
					}
				}
		 	 })
		});
		
		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;    
		}
		</script>
</head>
<body>
<!-- --------------------详细信息-start----------------------------- -->
		<div class="videoPageDatails positionA z_index"  id="arcgisDetail" >
			<!-- <div class="datailsHeader h10 textAlignC w100 pageDatails_padding contenRight">
				<div class="headerTitel leftRight textAligncM h100">
					<span class="colorw">详细信息</span>
					<span class="colorw" >X</span>
				</div>
			</div> -->
			<div class="w100 pageDatails_padding contenRight colorw" style="height: 100%;">
				<div class="pc-video-box">
					<div class="toCanvasBox" id="detail" style="margin-top:30px;">
							<table class="table-content">
							    <tr>
                                    <td id="ssld">区域 :</td>
                                    <td id="bzsj" >标注时间 :</td>                                    
                                </tr>                               
                                <tr>                                 
                                   <td id="tdmc" >监控名称 :</td>
                                   <td id="roadName">路段名称:</td>
                                </tr>
                                <tr>                                 
                                   <td id="ldwz" colspan='2'>区域位置 :</td>
                                   
                                </tr>
                                <!-- <tr>
                                   <td id="startPile">起始桩号 :</td>
                                   <td id="endPile">结束桩号 :</td>
                                </tr>
                                <tr>
                                    <td id="longitude">经度 :</td>
                                    <td id="latitude">纬度 :</td>
                                </tr> -->
							</table>
					</div>	
			</div>
		</div>
		</div>
		<!-- --------------------详细信息-end----------------------------- -->
</body>
</html>