<%@ 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="ywvideotaskrunresult.js"></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(images/1.jpg);
			color:white;
		}
		.frontDeviceTotal li:nth-child(2){
			background:url(images/2.jpg);
		}
		.frontDeviceTotal li:nth-child(3){
			background:url(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;
		}
		</style> 
		
		<script type="text/javascript">
/* 			$(function(){
				
				var data={"title":"设备故障类型占比分析",data:[{name:"网络状态",value:335,color:"red"},{name:"图像噪声",value:310,color:"blue"},{name:"视频丢失",value:234,color:"green"},{name:"视频偏色",value:135,color:"yellow"},{name:"视频遮挡",value:1548,color:"pink"},{name:"视频遮挡1",value:1548,color:"yellow"}]};
			 	EchartsBase.pieChart(
			 			{
			 			id:"deviceAnalysisGraphChart",
			 			data:data
			 	});
			});
 */		</script>
	</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">9999</span><span class="name">前端设备总数</span></li>
						<li><span class="total"  id="normalFrontDeviceTotal">9999</span><span class="name">正常前端设备总数</span></li>
						<li><span class="total"  id="abnormalFrontDeviceTotal">9999</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-combobox" id="videostatus" data-options="valueField:'id', textField:'text',panelHeight:'auto'">
				</div>
				<div class='fl'>
					<span class="text-content">设备名称：</span>
					<input class="easyui-textbox" id="LIKEtaskname" data-options="validType:'length[0,60]'">
				</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>	
