<%@ 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="<%=basePath%>/yw/common/js/video/blockcacher.js"></script>
		<script type="text/javascript" src="<%=basePath%>/yw/common/js/video/blockutil.js"></script>
		<script type="text/javascript" src="<%=basePath%>/yw/common/js/video/globalvideoblock.js"></script>
		<script type="text/javascript" src='<%=basePath%>/yw/common/js/video/globalrecordblock.js'></script>
		<script type='text/javascript'  src='<%=basePath%>/yw/common/js/video/PlanRtc.js'></script>
		<script type='text/javascript'  src='<%=basePath%>/yw/recordalarm/ywrecordcurrentstate/playvideo/videojs/ProgressBar.js'></script>
		<link rel="stylesheet" type="text/css" href="alarmDetail.css"/>
		<script type="text/javascript"  src="alarmDetail.js"></script>
	</head>
	<body>
		<div id="alarm-detail">
			<div class="alarm-box">
				<div id="alarm-tab-info" style="width:100%;height:290px;display:none;">
					<div class="alarm-info" style="width:98%;height:70px;">
						<table class="tab" style="font-size: 12px;line-height: 20px;">
							<tr>
								<td><span>设备名称:</span></td>
								<td><span id="deviceIdInfo" ></span></td>
								<td><span>设备类型:</span></td>
								<td><span id="deviceTypeInfo" ></span></td>
							</tr>
							<tr>
								<td><span>告警时间:</span></td>
								<td><span id="timeInfo" ></span></td>
								<td><span>所属单位:</span></td>
								<td><span id="unitInfo" ></span></td>
							</tr>
							<tr>
								<td><span>故障描述:</span></td>
								<td><span id="deviceFaultInfo" ></span></td>
								<td><span>处理状态:</span></td>
								<td><span id="deviceStatusInfo" ></span></td>
							</tr>
						</table>
					</div>
					<div style="display:flex;border:1px solid #d2d2d2;width:90%;justify-content:space-between;margin:0 auto;">
						<div style="position:relative;">
							<div style="text-align: center; line-height: 32px;color: #cd240d;">cpu使用率:<span id="cpuTitle"></span></div>
							<div id="cpuGrap" style="width:164px;height:164px;"></div>
						</div>
			        	<div  style="position:relative;">
			        		<div style="text-align: center; line-height: 32px;color: #cd240d;">内存使用率:<span id="memoryTitle"></span></div>
			        		<div id="memoryGrap" style="width:164px;height:164px;"></div>
			        		<div style="border: 1px solid #d4d4d4;height: 126px;width: 128px;position: absolute; top: 50px; left: -2px;border-radius: 100%;"></div>
			        		<div style="position: absolute; left: -22px;top: 47px; width: 1px;height: 130px;border-left: 1px solid #d4d4d4;"></div>
			        	</div>
			        	<div style="position:relative;">
			        		<div style="text-align: center; line-height: 32px;color: #cd240d;">硬盘使用率:<span id="diskTitle"></span></div>
			        		<div id="diskGrap" style="width:164px;height:164px;"></div>
			        		<div style="border: 1px solid #d4d4d4;height: 126px;width: 128px;position: absolute; top: 50px; left: -10px;border-radius: 100%;"></div>
			        		<div style="position: absolute; left: -22px;top: 47px; width: 1px;height: 130px;border-left: 1px solid #d4d4d4;"></div>
			        	</div>
			        </div>
				</div>
				<div id="alarm-tab" class="easyui-tabs"  style="width:450px;height:290px;">
					    <div title="图片"  style="padding:8px;padding-bottom:14px;display:none;">
					    	<div style="width:100%;height:100%;" id="picture">
									<img src="" onerror="javascript:$.loadErrorPic(this);" width="100%" height="100%"/>
					    	</div>
					    </div>
					    <div title="录像" data-options="" style="padding:8px;padding-bottom:14px;display:none;">
					    	<div style="width:100%;height:100%;position:relative;"   id="record"  onmouseover="ProgressBar.showVideoControls(event,'over')"   onmouseout="ProgressBar.showVideoControls(event,'out');">
							 	<!--录像视频 -->
							 	<video  onprogress="ProgressBar.progress(this);"   emptied="alert('emptied')" error="alert('error')" style="width:100%;height:100%;object-fit:fill;border:1px solid #ddd;"></video>
				 	            <div id="videoControls"  style="position: absolute; bottom:0;display:none;"  > 
					                <div id="progressWrap"  onclick="ProgressBar.sendMsg(event);" onmouseout ="ProgressBar.showTimeTip(event,'out');" onmousemove ="ProgressBar.showTimeTip(event,'over');">  
					                    <div id="playProgress">  
					                        <span id="showProgress">0%</span> 
					                    </div>
					                </div>
						            <div id="timeTip"></div>
					            </div> 
					    	</div>
					    </div>
					    <div title="视频" data-options="" style="overflow:auto;padding:8px;padding-bottom:14px;display:none;">
					    	<div style="width:100%;height:100%;" id="video" >
							 	<!--在线播放视频 -->
								 <video autoplay="" emptied="alert('emptied')" error="alert('error')" class="canvasVideo" style="width:100%;height:100%;object-fit:fill;border:1px solid #ddd;"></video>
					    	</div>
					    </div>
				</div>
				<div class="alarm-info" id="btninfo" style="display:none;">
					<div class="alarm-btn">
						<span 	onclick="ignoreAlarm()">忽略告警</span>
						<span  onclick="reportOrder()">工单上报</span>
					</div>
				</div>
				<div class="alarm-info" id="btnpic">
					  <ul>
					  		<li><span>设备名称:</span><span id="deviceId" ></span></li>
					  		<li><span>设备类型:</span><span id="deviceType"></span></li>
					  		<li><span>告警时间:</span><span id="time"></span></li>
					  		<li><span>所属单位:</span><span id="unit"></span></li>
					  		<li><span>故障描述:</span><span id="deviceFault"></span></li>
					  		<li><span>当前状态:</span><span id="deviceStatus"></span></li>
					  </ul>
					  <div class="alarm-btn">
					  		<span 	onclick="ignoreAlarm()">忽略告警</span>
					  		<span  onclick="reportOrder()">工单上报</span>
					  </div>
				</div>
			</div>
			<div id="alarm-history">
				<div class="title">告警历史纪录(10)</div>
				<div class="list">
					<table>
							<thead>
								<!-- <tr><td>序号</td><td>告警时间</td><td>告警等级</td><td>故障类型</td><td>工单状态</td><td>操作</td></tr> -->
								<tr><td>序号</td><td>告警级别</td><td>处理状态</td><td>告警时间</td><td>告警描述</td></tr>
							</thead>
							<tbody id="alarmHistoryContent">
							</tbody>
					</table>
				</div>
			</div>
		</div>
	</body>
</html>	
