<%@ 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"%>
		 <style type="text/css">
		 body{ overflow: hidden;}
		 li{margin: 0 30px;font-size: 12px;}
		 #batchreportorder table{border:1px solid #e6e6e6;width:100%;}
		 #batchreportorder tr{height:30px;}
		 #batchreportorder tr,#batchreportorder td{border:1px solid #e6e6e6;text-align:center;}
		 #batchreportorder tr td:nth-child(odd){background-color:#f1f1f1;text-align:center;width:16%;color:black;}
		 #batchreportorder tr td:nth-child(even){color:#aaaaaa;}
		 #batchreportorder .textbox {margin:0 !important;}
		 s#batchreportorder pan.textbox:hover, #batchreportorder span.combo:hover{border:0 !important;text-align: center;}
		  span.textbox{border:0 !important;}
		  .textbox-text{text-align:center !important;}
		  *{box-shadow:0px 0px 0px rgba(0, 0, 0, 0.075) !important;}
		  .panel-header, .panel-body{border-width:0 !important;}
			.combo-panel{
					width: 126px !important;
					text-align:center !important;
			}
			
			#pic{
					width: auto;
				    height: auto;
				    position: absolute;
				    top: 10%;
				    left: 20%;
				    z-index: 1;
				}
				#faultInfo td{
				    border: 1px solid #ccc;
				  height: 30px;
				  line-height: 30px;
				  text-align: center;
				  font-size: 12px;
				}
				caption{
					text-align:center;
				    height: 30px;
					line-height: 27px;	
					font-size:14px;	
				}
				#faultInfoList div{
					    width: 170px;
					    text-overflow: ellipsis;
					    overflow: hidden;
					    white-space: nowrap;
				}
		 </style>
		
	</head>
	<body>
	
	<div style="padding:10px 4px;">
		<div style="max-height: 200px;height:200px;border-bottom:1px solid  #e6e6e6;overflow-y:auto;"  id="faultInfo">
				<table width="100%"  cellpadding="0"  cellspacing="0">
						<caption>故障信息列表</caption>
						<thead>
							<tr><td>序号</td><td>工单编号</td><td>故障设备名称</td><td>告警等级</td><td>故障发生时间</td><td>告警描述</td><td>工单上报人</td></tr>
						</thead>
						<tbody id="faultInfoList">
						</tbody>
				</table>
		</div>
		
		<div id="pic" style="display:none;">
			<img alt="" src="" style="width: 600px">
		</div>
		
		<div style="padding-top:10px;" id="batchreportorder">
		   <form id="order" method="post">
		    	<table cellpadding="0"  cellspacing="0">
		    		<tr>
		    			<td colspan="6"  style="background-color:#dcdcdc;">工单进度信息</td>
		    		</tr>
		    		<tr>
		    			<td>处理阶段:</td>
		    			<td colspan="5">
		    			<ul style="display:flex;'" id="chuliState">
			               <li style="position:relative;padding-left:22px;"><span style="background-color:#67c23a;height:12px;width:12px;border-radius:12px;display:block;position:absolute;top:0;left:0;line-height:12px;text-align:center;color:white;'">1</span><span style="color:#67c23a;">工单上报</span><span  class="qiantou"  style="height: 26px;width: 39px;border-radius: 12px; display: block;position: absolute;top: -6px;right: -53px; line-height: 12px;text-align: center;color: green;font-weight: bolder;font-size: 16px;background: url(../../common/images/jt-gray.png) no-repeat;"></span></li>
		    				<li style="position:relative;padding-left:22px;"><span style="background-color:gray;height:12px;width:12px;border-radius:12px;display:block;position:absolute;top:0;left:0;line-height:12px;text-align:center;color:white;'">2</span><span style="color:gray;">工单受理</span><span  class="qiantou"  style="height: 26px;width: 39px;border-radius: 12px; display: block;position: absolute;top: -6px;right: -53px; line-height: 12px;text-align: center;color: green;font-weight: bolder;font-size: 16px;background: url(../../common/images/jt-gray.png) no-repeat;"></span></li>
		    				<li style="position:relative;padding-left:22px;"><span style="background-color:gray;height:12px;width:12px;border-radius:12px;display:block;position:absolute;top:0;left:0;line-height:12px;text-align:center;color:white;'">3</span><span style="color:gray;">工单反馈</span><span  class="qiantou"  style="height: 26px;width: 39px;border-radius: 12px; display: block;position: absolute;top: -6px;right: -53px; line-height: 12px;text-align: center;color: green;font-weight: bolder;font-size: 16px;background: url(../../common/images/jt-gray.png) no-repeat;"></span></li>
		    				<li style="position:relative;padding-left:22px;"><span style="background-color:gray;height:12px;width:12px;border-radius:12px;display:block;position:absolute;top:0;left:0;line-height:12px;text-align:center;color:white;'">4</span><span style="color:gray;">工单维保确认</span><span  class="qiantou"  style="height: 26px;width: 39px;border-radius: 12px; display: block;position: absolute;top: -5px;right: -53px; line-height: 12px;text-align: center;color: green;font-weight: bolder;font-size: 16px;background: url(../../common/images/jt-gray.png) no-repeat;"></span></li>
							<li style="position:relative;padding-left:22px;"><span style="background-color:gray;height:14px;width:14px;border-radius:14px;display:block;position:absolute;top:0;left:0;line-height:15px;text-align:center;color:white;">5</span><span style="color:gray;">工单验收</span></li>
							</ul>
		    			</td>
		    		</tr>
		    		<tr>
		    			<td>接收人单位</td>
		    			<td>
							<select  class="easyui-combobox" id="jobacceptcompany" name="jobacceptcompany" style="width:130px;margin:0;">
							</select>
						</td>		    			
		    			<td>工单接收人</td>
		    			<td>
			    			<select  class="easyui-combobox" id="jobacceptpeople" name="jobacceptpeople" style="width:130px;margin:0;">
							  
							</select>
		    			</td>
		    			<td>接收人联系方式</td>
		    			<td style="width:130px;"><span id="jobacceptphone"></span></td>
		    		</tr>
		    		
		    		
		    	</table>
		    </form>
		</div>
	</div>
	</body>
</html>	
 <script type="text/javascript">
 
 	var winId	= $.getUrlParam("winId");
	var event = top.$("#"+winId).panel("options").data;
	var reportInfo={};
	var jobNum=[];
	$(function(){
//		console.log(event)
		// 上报人相关信息
		$.ajax({
			 type : 'post',
			 dataType : 'json',
			 url : 'ywrepairjobinfoAction!getUserInfo.do',
			 success:function(res){
				 if(res){	
					 reportInfo = res;
					 var htmlTr="";
					 for(var i=0;i<event.length;i++){
						 var sbmc = event[i].alarmdevicename == null ? "" : event[i].alarmdevicename;
						 var gjdj = event[i].alarmgradename == null ? "" : event[i].alarmgradename;
						 var gjms = event[i].alarmsubtypename == null ? "" : event[i].alarmsubtypename;
						 var jobnum = getNowTime()+i;
						 jobNum[i]=jobnum;
						 htmlTr+="<tr>" +
									"<td>"+(i+1)+"</td>"+
									"<td>"+jobnum+"</td>"+
									"<td>"+sbmc+"</td>"+
									"<td>"+gjdj+"</td>"+
									"<td>"+event[i].alarmtime+"</td>"+
									"<td><div title='"+ (gjms) +"'  class='easyui-tooltip' >"+gjms+"</div></td>"+
									"<td>"+res.yhzh+"</td>"+
								 "</tr>";
					 }	
					 $("#faultInfoList").append(htmlTr);							
				 }
			 }	 	
		}) 


		// 工单接收人相关信息
		$('#jobacceptcompany').combobox({				// 选取部门
			 url:'ywrepairjobinfoAction!getReportBm.do',    // 查询有审批工单权限的部门
//			 url:'ptyhbmAction!query_Ptyhbm.do',			// 查询所有部门
			 textField:"bmmc",  
			 valueField:"bmbh",
			 panelWidth:148,
			 value:"" 
		});
		$("#jobacceptcompany").combobox({			
			onChange: function (n,o) {
//				console.log(n,o);				
				$('#jobacceptpeople').combobox({				// 选取接收人
					 url:'ywrepairjobinfoAction!getReportUser.do?bmbh='+n,    // 查询部门下有审批工单权限的人
//					 url:'ptyhAction!query_Ptyh.do?bmbh='+n,			  // 查询部门下所有人
					 textField:"yhmc",  
					 valueField:"yhzh",
					 value:"" 
				});
			}
		})
		$("#jobacceptpeople").combobox({			
			onChange: function (n,o) {
//				console.log(n,o);				
				$.ajax({
					type : 'post',
					dataType : 'json',
					url : 'ywrepairjobinfoAction!getReportUser.do',
					data : {'yhzh': n},
					success : function(res){
//						console.log("电话：",res);
						if(res && res.length > 0){
							$('#jobacceptphone').html(res[0].sjhm)
						}else{
							$('#jobacceptphone').html("");
						}
					}
				})
			}
		})
 
	})
	

 	function getNowTime(flag){
		var date = new Date();
	    var year = date.getFullYear();
	    var month = date.getMonth() + 1;
	    var day = date.getDate();
	    var hour = date.getHours();
		var minute = date.getMinutes();
		var second = date.getSeconds();
		var minsec = date.getMilliseconds(); //获取当前毫秒数(0-999)
	    month = month < 10 ? '0' + month : month;
	    day = day < 10 ? '0' + day : day;
	    hour = hour < 10 ? '0' + hour : hour;
	    second = second < 10 ? '0' + second : second;
	    if(flag == "-"){
	    	return year +"-"+ month +"-"+ day +" "+ hour +":"+ minute +":"+ second;
	    }else{
	    	return "" + year + month + day + hour + minute + second + minsec;
	    }
	    
	}

</script>