<%@ 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"%>
		<script type="text/javascript" src="homepage.js"></script>
		<script type="text/javascript" src="../common/js/echarts/echarts.min.js"></script>
		<script type="text/javascript" src="../common/js/echarts/EchartsBase.js"></script>
		<script type="text/javascript" src="statisticsGraph.js"></script>
		<script type="text/javascript" src="../../common/ajax-pushlet-client.js"></script>
		<script type="text/javascript" src="videoTaskPushlet.js"></script>
		  <link rel = "stylesheet"  type = "text/css"  href = "css/videotaskalarm.css"  />
		<style type="text/css">
			 #alram{
				 background-color:#f3f3f3;
				 width:99%;
				 margin:0px auto;
				 display:flex;
				 justify-content:center ;
			 }
			 .alarmItem{
					 text-align:center;
					 background-color:#fff;
					 width:38%;
					 margin:4px;
					 padding-bottom:8px;
			 }
			 .alarmRate{
					 height:110px;
					 width:60%;
					 margin:0 auto;
	
			 }
			.alarmItem thead td:after{
				 	content:'';
				 	width:10px;
				 	height:10px;
				 	background-color:#27a72d;
				 	position:absolute;
				 	border-radius:10px;
				 	line-height:10px;
				 	text-align:center;
				 	left:26%;
				 	top:15%;
			 }
		 .alarmItem thead td:nth-child(2):after{
		 		background-color:#ff7a05;
		 }
		 .alarmItem td,tr{position:relative;width:50%; border: 1px solid #efefef;    line-height: 20px;}
		 .alarmItem thead{background-color:#f7f7f7;line-height: 22px;}
		 .alarmItem table {  margin: 0 auto;  border: 1px solid #efefef;}
		.deviceAnalysisGraphChartBox{
				width:50%;
				height:90%;
				/* float:right; 
				background: #fff2e1;*/
			}
			#deviceAnalysisGraphChartBoxTime{
				position:absolute;
				right: 76px;
				 top: -15px;
			}
			#deviceAnalysisGraphChartBoxTime li{
				float:left;
				margin: 0 1px;
				background-color:#e5e5e5;
				width:60px;
				height:24px;
				text-align:center;
				line-height:24px;
				color:#aaaaaa;
				cursor:pointer;
			}
			#deviceAnalysisGraphChartBoxTime li.active{
				color:white;
				background-color:#61b760;
		
			}
			.searchGridStaticsSplitLine{
				position:absolute;
				width:1px;
				height:380px;
				top:10px;
				right:30px;
				background-color:#e5e5e5;
			}
			.l-btn-text{line-height:20px !important;}
		</style>
	</head>
	<!-- 设置高度,一行 44px,二行80,三行116-->
	<body id="body" class="easyui-layout" >
		<div data-options="region:'north',split:false,border:false,collapsible:false"  style="height:214px;padding:2px  0; ">
			<div id="alram" >
			<div class="alarmItem">
				<h1 style="line-height:40px;">视频在线率</h1>
				<div class="alarmRate">
					<div id="spzxl" style="width:100%;height:100%;"></div>
				</div>
				<div class="alarmCount" >
						<table  align="center" cellpadding="0"  cellspacing="0" width="96%">
								<thead><tr><td>在线</td><td>不在线</tr></thead>
								<tbody><tr><td ><a style="color:#06c;" onclick="showVideoDetail('videoOnline','1')" id="videoOnline">0</a></td><td><a onclick="showVideoDetail('videoOnline','0')" style="color:#06c;" id="videoUnOnline">0</a></td></tr></tbody>
						</table>
				</div>
			</div>
			<div class="alarmItem">
				<h1 style="line-height:40px;">视频完好率</h1>
				<div class="alarmRate">
					<div id="spwhl" style="width:100%;height:100%;"></div>
				</div>
				<div class="alarmCount" >
						<table  align="center" cellpadding="0"  cellspacing="0" width="96%">
								<thead><tr><td>正常</td><td>异常</tr></thead>
								<tbody><tr><td ><a onclick="showVideoDetail('videoIntact','1')" id="videoIntact" style="color:#06c;">0</a></td><td ><a onclick="showVideoDetail('videoIntact','0')" id="videoUnintact" style="color:#06c;">0</a></td></tr></tbody>
						</table>
				</div>
			</div>
			<div class="alarmItem" >
				<h1 style="line-height:40px;">录像完好率</h1>
				<div class="alarmRate" >
					<div id="lxwhl" style="width:100%;height:100%;"></div>
				</div>
				<div class="alarmCount">
						<table  align="center" cellpadding="0"  cellspacing="0" width="96%">
								<thead><tr><td>正常</td><td>异常</tr></thead>
								<tbody><tr><td><a onclick="showVideoDetail('recordIntact','1')" id="recordIntact" style="color:#06c;">0</a></td><td ><a onclick="showVideoDetail('recordIntact','0')" id="recordUnIntact" style="color:#06c;">0</a></td></tr></tbody>
						</table>
				</div>
			</div>
			<div class="alarmItem">
				<h1 style="line-height:40px;">服务器在线率</h1>
				<div class="alarmRate" >
					<div id="fwqzxl" style="width:100%;height:100%;"></div>
				</div>
				<div class="alarmCount">
						<table  align="center" cellpadding="0"  cellspacing="0" width="96%">
								<thead><tr><td>在线</td><td>不在线</tr></thead>
								<tbody><tr><td ><a onclick="showMachineDetail('machineOnline','1')" id="machineOnline" style="color:#06c;">0</a></td><td ><a onclick="showMachineDetail('machineOnline','0')" id="machineUnOnline" style="color:#06c;">0</a></td></tr></tbody>
						</table>
				</div>
			</div>
			<div class="alarmItem" >
				<h1 style="line-height:40px;">服务器完好率</h1>
				<div class="alarmRate" >
					<div id="fwqwhl" style="width:100%;height:100%;"></div>
				</div>
				<div class="alarmCount" >
						<table  align="center" cellpadding="0"  cellspacing="0" width="96%">
								<thead><tr><td>正常</td><td>异常</tr></thead>
								<tbody><tr><td ><a onclick="showMachineDetail('machineIntact','1')" id="machineIntact" style="color:#06c;">0</a></td><td ><a onclick="showMachineDetail('machineIntact','0')" id="machineUnIntact" style="color:#06c;">0</a></td></tr></tbody>
						</table>
			
				</div>
			</div>
		</div>
			<!-- <div class="form-line clearfix">
		    	<div class="fl">
        	    	<span class="text-content">设备名称：</span>
					<input id=deviceName class="easyui-textbox" data-options="required:false,validType:'length[0,40]'">
		        </div>
		        <div class="fl">
					<span class="text-content">设备类型：</span> 
					<input id="deviceType" class="easyui-combobox" data-options="valueField:'id', textField:'text',panelHeight:'auto'" missingMessage="设备类型必填项" > 
				</div> 
		        <div id="deviceChooseDiv" class="fl">
					<span class="text-content">设备选择：</span> 
					<input id="deviceChoose" class="easyui-combobox" data-options="valueField:'id', textField:'text',panelHeight:'auto'" missingMessage="设备选择必填项" > 
				</div> 
				<div class="fl">
					<span class="text-content">处理状态：</span> 
					<input id="processStatus" class="easyui-combobox" data-options="valueField:'id', textField:'text',panelHeight:'auto'" missingMessage="处理状态必填项" > 
				</div>
			 </div>
			  <div class="form-line clearfix">
			  	<div class="fl">
        	    	<span class="text-content">告警等级：</span>
					<input id="alarmLevel" class="easyui-combobox" data-options="valueField:'id', textField:'text',panelHeight:'auto'" >
		        </div>
				 <div id="failureTypeDiv" class='fl'>
					<span class="text-content">告警类型：</span> 
					<input id="alarmType" class="easyui-combobox" data-options="valueField:'id', textField:'text',panelHeight:'auto'" missingMessage="告警类型必填项" > 
		        </div>
		        <div class='fl'>
						<span class="text-content">开始时间：</span> <input id="startTime"
						class="easyui-datetimebox" />
		        </div>
		        <div class='fl'>
						<span class="text-content">结束时间：</span> <input id="endTime"
						class="easyui-datetimebox" />
		        </div>
		 	</div> -->
			<!--  <div class="form-line hidden">	         
				<div class='fl'>
					<span class="text-content">告警设备名称：</span>
					<input id="LIKEalarmdevicename" data-options="validType:'length[0,40]'" >
				</div>
				<div class='fl'>
					<span class="text-content">告警设备编号：</span>
					<input id="LIKEalarmdeviceid" data-options="validType:'length[0,40]'" >
				</div>
				<div class='fl'>
					<span class="text-content">通道编号：</span>
					<input id="LIKEchannelnum" data-options="validType:'length[0,10]'" >
				</div>
				<div class='fl'>
					<span class="text-content">告警类型：</span>
					<input id="LIKEalarmtype" data-options="validType:'length[0,10]'" >
				</div>
				<div class='fl'>
					<span class="text-content">告警严重级别：</span>
					<input id="LIKEalarmgrade" data-options="validType:'length[0,10]'" >
				</div>
				<div class='fl'>
					<span class="text-content">告警子类型编码：</span>
					<input id="LIKEalarmsubtypecode" data-options="validType:'length[0,40]'" >
				</div>
				<div class='fl'>
					<span class="text-content">告警子类型编码名称：</span>
					<input id="LIKEalarmsubtypename" data-options="validType:'length[0,200]'" >
				</div>
				<div class='fl'>
					<span class="text-content">告警原因：</span>
					<input id="LIKEalarmreason" data-options="validType:'length[0,254]'" >
				</div>
				<div class='fl'>
					<span class="text-content">告警时间：</span>
					<input id="LIKEalarmtime" data-options="validType:'length[0,19]'" >
				</div>
				<div class='fl'>
					<span class="text-content">故障描述：</span>
					<input id="LIKEfalutdtype" data-options="validType:'length[0,40]'" >
				</div>
				<div class='fl'>
					<span class="text-content">故障描述：</span>
					<input id="LIKEfalutdescription" data-options="validType:'length[0,254]'" >
				</div>
				<div class='fl'>
					<span class="text-content">处理状态：</span>
					<input id="LIKEprocessstatus" data-options="validType:'length[0,10]'" >
				</div>
				<div class='fl'>
					<span class="text-content">处理时间：</span>
					<input id="LIKEprocesstime" data-options="validType:'length[0,19]'" >
				</div>
				<div class='fl'>
					<span class="text-content">处理人员编号：</span>
					<input id="LIKEprocessaccount" data-options="validType:'length[0,40]'" >
				</div>
				<div class='fl'>
					<span class="text-content">处理描述：</span>
					<input id="LIKEprocessdescription" data-options="validType:'length[0,254]'" >
				</div>
				<div class='fl'>
					<span class="text-content">销警时间：</span>
					<input id="LIKEunalarmtime" data-options="validType:'length[0,19]'" >
				</div>
				<div class='fl'>
					<span class="text-content">完成处理时间：</span>
					<input id="LIKEcompletetime" data-options="validType:'length[0,19]'" >
				</div>
				<div class='fl'>
					<span class="text-content">完成处理人员编号：</span>
					<input id="LIKEcompleteaccount" data-options="validType:'length[0,32]'" >
				</div>
				<div class='fl'>
					<span class="text-content">图片url路径：</span>
					<input id="LIKEpictureurl" data-options="validType:'length[0,254]'" >
				</div>
				<div class='fl'>
					<span class="text-content">视频url路径：</span>
					<input id="LIKEvideourl" data-options="validType:'length[0,254]'" >
				</div>
				<div class='fl'>
					<span class="text-content">处理人员编号：</span>
					<input id="LIKErelatetaskbatchnum" data-options="validType:'length[0,40]'" >
				</div>
				<div class='fl'>
					<span class="text-content">处理人员编号：</span>
					<input id="LIKErelatetasknum" data-options="validType:'length[0,40]'" >
				</div>
				<div class='fl'>
					<span class="text-content">客户编号：</span>
					<input id="LIKEaccountnum" data-options="validType:'length[0,40]'" >
				</div>
				<div class='fl'>
					<span class="text-content">创建人员：</span>
					<input id="LIKEcreateaccount" data-options="validType:'length[0,40]'" >
				</div>
				<div class='fl'>
					<span class="text-content">创建日期：</span>
					<input id="LIKEcreatetime" data-options="validType:'length[0,19]'" >
				</div>
				<div class='fl'>
					<span class="text-content">修改人员：</span>
					<input id="LIKEmodifyaccount" data-options="validType:'length[0,40]'" >
				</div>
				<div class='fl'>
					<span class="text-content">修改日期：</span>
					<input id="LIKEmodifytime" data-options="validType:'length[0,19]'" >
				</div>
				<div class='fl'>
					<span class="text-content">备注：</span>
					<input id="LIKEremarks" data-options="validType:'length[0,128]'" >
				</div>
				<div class='fl'>
					<span class="text-content">扩展1：</span>
					<input id="LIKEextend1" data-options="validType:'length[0,128]'" >
				</div>
				<div class='fl'>
					<span class="text-content">扩展2：</span>
					<input id="LIKEextend2" data-options="validType:'length[0,128]'" >
				</div>
				<div class='fl'>
					<span class="text-content">扩展3：</span>
					<input id="LIKEextend3" data-options="validType:'length[0,128]'" >
				</div>
				<div class='fl'>
					<span class="text-content">扩展4：</span>
					<input id="LIKEextend4" data-options="validType:'length[0,128]'" >
				</div>

			 </div> -->
		</div>
		<!-- <div data-options="region:'center',split:false" class="easyui-layout">
			<table id='tableGrid'></table>
		 </div>   --> 
		  <div data-options="region:'center',split:false,border:false"  style="overflow-y:auto;">
		           <div style="height:100%;" id="showToDoListDiv">
		           		<table id='showToDoList'></table> 
		           </div>
	   				<div style="height:100%;display:none;" id="showAlarmListDiv" >
		           		<table id='showAlarmList'></table> 
		           </div>
	   				<div style="position:relative;height:100%;display:none;" id="searchGridStaticsDiv">
		           		<div style="height:33px;">
			           		<table id='searchGridStatics' ></table> 
		           		</div>	
		           		<div class="deviceAnalysisGraphChartBox" style="width:50%;float:left;margin-top:50px;position:absolute;left:0;">
							<div id="deviceAnalysisGraphChartBoxTime">
									<ul>
											<li  class="active"  onclick="showStaticsLine('1')">按时</li>
											<li  onclick="showStaticsLine('2')">按日</li>
											<li  onclick="showStaticsLine('3')">按月</li>
									</ul>
							</div>
							<div id="searchGridStaticsEchartLine"  style="height:430px;"></div>
							<div class="searchGridStaticsSplitLine"></div>
						</div>	
		           		<div class="deviceAnalysisGraphChartBox" style="width:50%;float:right;margin-top:50px;position:absolute;right:0;">
							<div   style="position:absolute;top:-26px;right:60px;"><span style="color:#999999;">报警总数:</span><span  id="deviceAnalysisGraphChartCount" style="font-size:14px;color:black;font-weight:bold;">999</span></div>
							<div id="searchGridStaticsEchartPie"  style="height:430px;"></div>
						</div>	
		           </div>
            </div>
		 <form action="" method="post" name="excelForm" id="excelForm" style="display: none;">
    	</form>
    	<div id="videoTask"  >
			<div class="header">
				<span>消息</span>
				<span onclick='videoTaskClose()'>×</span>
			</div>
			<div class="box">
				<ul>
						<!-- <li onclick="showPushletMsg()"><span class="monitorPresetMsg">设备名称 移位已暂停告警</span><span class="monitorPresetRecovery">复位</span><span class="monitorPresetCancel">取消</span></li> -->  
				</ul>
			</div>
		</div>
	</body>
</html>	
