<%@ 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="js/echarts/echarts.min.js"></script>
		 <script type="text/javascript" src="js/echarts/EchartsBase.js"></script>
		 <script type="text/javascript" src="alarmDemo.js"></script>
		 <style type="text/css">
		 #alram{
		 background-color:#f3f3f3;
		 width:96%;
		 margin:130px auto;
		 display:flex;
		 }
		 .alarmItem{
		 text-align:center;
		 background-color:#fff;
		 width:300px;
		 margin:4px;
		 padding-bottom:8px;
		 }
		 .alarmRate{
		 height:180px;
		 width:60%;
		 margin:0 auto;
		 }
		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%;
		 }
		 thead td:nth-child(2):after{
		 	background-color:#ff7a05;
		 }
		 td,tr{position:relative;width:50%; border: 1px solid #efefef;    line-height: 20px;}
		 thead{background-color:#f7f7f7;line-height: 22px;}
		 table {  margin: 0 auto;  border: 1px solid #efefef;}
		 </style>
	</head>
	<body class="easyui-layout" >
		<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>
	</body>
</html>	