<%@ 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="../common/js/echarts/echarts.min.js"></script>
		<script type="text/javascript" src="../common/js/echarts/EchartsBase.js"></script>
		<script type="text/javascript" src="../../common/Constants.js"></script>
		<script type="text/javascript" src="ywvideocurrentstate.js"></script>
		<script type="text/javascript" src=""></script>
		<style>
		
		#deviceTotal{
			padding:15px 15px;
			display:flex;
		}
		.frontDeviceTotal{
			height:150px;
			width:40%;
			text-align:center;
			margin-right:20px;
		}
		.deviceAnalysisGraphChartBox{
			width:60%;
			background: #fff2e1;
		}
		.frontDeviceTotal > ul{
			display:flex;
		}
		.frontDeviceTotal li {
			position:relative;
			height:150px;
			width:calc(32%);
			margin:0 6px;
			background:url(ywvideotaskrunresult/images/1.jpg);
			color:white;
		}
		.frontDeviceTotal li:nth-child(2){
			background:url(ywvideotaskrunresult/images/2.jpg);
		}
		.frontDeviceTotal li:nth-child(3){
			background:url(ywvideotaskrunresult/images/3.jpg);
		}
		.frontDeviceTotal span{
			display:block;
	        position:absolute;
		}
		.total{
		   text-align: center;
			top:40%;
			left:0;
		    width: 100%;
		    font-size: 16px;
		    font-weight: bold;
			}
		.name{
		    text-align: center;
		    bottom: 0;
		    width: 100%;
			background: rgb(0,0,0,0.4);
		    height: 30px;
		    line-height: 30px;
		    font-size: 13px;
		}
		.text-content{
		   width:77px !important;
		}
		.form-line{
			padding-bottom:4px;
		}
				.handleCom{
		    border-top: 1px dashed #DADADA;
    border-collapse: collapse;
    padding: 5px 4px;
    font-size: 12px;
        background: #ccc;
		}
		.handleCom1{
		    background: #ccc;
		    border-top: 1px dashed #DADADA;
    border-collapse: collapse;
    padding: 5px 4px;
    font-size: 12px;
		}
		</style> 
	</head>
	<!-- 设置高度,一行 44px,二行80,三行116-->
	<body class="easyui-layout" >
		<div data-options="region:'north'" title="监控状态概览" id='north' style="height: 260px;border-bottom: none">
		 <div id="deviceTotal" >
				<div class="frontDeviceTotal" >
					<ul>
						<li><span class="total"   id="frontDeviceTotal">0</span><span class="name">设备总量</span></li>
						<li><span class="total"  id="normalFrontDeviceTotal">0</span><span class="name">正常设备量</span></li>
						<li><span class="total"  id="abnormalFrontDeviceTotal">0</span><span class="name">异常设备量</span></li>
					</ul>
				</div>
				<div class="deviceAnalysisGraphChartBox">
						<div id="deviceAnalysisGraphChart"  style="width:100%;height:150px;"></div>
				</div>
			</div>
			<div class="form-line clearfix">
				<div class='fl'>
					<span class="text-content">行政分组：</span>
					<input class="easyui-combotree" id="videoalarm" data-options="validType:'length[0,80]'" >
				</div>
				<div class='fl'>
					<span class="text-content">通道名称：</span>
					<input class="easyui-textbox" id="LIKEchannelname" data-options="validType:'length[0,80]'">
				</div>
		    	<div class='fl'>
					<span class="text-content">设备状态：</span>
					<input class="easyui-combobox" id="currentstate" name="currentstate" data-options="multiple:true, textField:'text', valueField:'id', panelWidth:148,value:''" >
				</div>
			</div>
			<!-- 
			<div class="form-line clearfix">
				<div class='fl'>
					<span class="text-content">设备编号：</span>
					<input class="easyui-textbox" id="LIKEvideonum" data-options="validType:'length[0,40]'">
				</div>
				<div class='fl'>
					<span class="text-content">通道编号：</span>
					<input class="easyui-numberbox" id="channelnum" data-options="validType:'length[0,10]'">
				</div>
			 </div>
			 -->
		</div>
		<div data-options="region:'center',split:false" class="easyui-layout">
			<table id='tableGrid'></table>
		 </div>   
		 <form action="" method="post" name="excelForm" id="excelForm" style="display: none;">
    	</form>
	</body>
</html>	
