cxc
/
ifm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
							<!DOCTYPE html>
<html>
	<head>
		<title>待处理故障</title>
		<style type="text/css">
			.cotainer{
				display: flex;
				flex-direction: column;
				margin: 14px;
			}
			.dclgz{
				flex-direction:  row;
				display:  flex;
				height: 29px;
				color: #353a84;
				font-weight: bold;
				border-top: solid #c4c2c2 1px;
				border-bottom: solid #c4c2c2 1px;
				margin-bottom: 8px;
				
			}
			.dclgz>:first-child{
				flex:0.95;
				padding-top: 4px;
				
			}
			.dclgz>:last-child{
				background-color: #3a3d84;
				width: 23px;
				height: 23px;
				border-radius: 50%;
				margin-top: 2px;
			}
			.square{
				width: 15px;
				height: 15px;
				margin-top: 4px;
				margin-left: 4px;
				border: solid white 1px;
			}
			tbody>:nth-child(odd){
				background-color: #f3f3f3;
			}
			tbody>:first-child{
				    border-top: 1px solid gainsboro;
					padding-top: 10px;
			}
			tr{
				line-height: 24px;
			}
			td{
				padding-left: 10px;
			}
			
			tr>:first-child{
				width: 63%;
			}
			.num{
				width: 15px;
				height: 10px;
				background-color: red;
				position: relative;
				left: 9px;
				top: -17px;
				border-radius: 26%;
				font-size: 9px;
				color: wheat;
				text-align: center;
			}
			.active{
				color: #353a84;
				font-weight: bold;
			}
			.gztitle{
				justify-content: space-around;
				display: flex;
				font-size: 0.22rem;
				margin: 5px;
			}
			table tr td{
				line-height: 0.5rem !important;
			}
		</style>
		<script type="text/javascript">
		var iscroll;
		/** 
		 * 初始化滚动条
		 * */
		iscroll = new IScroll(".wsclIscroll",{
			scrollbars: true,
			fadeScrollbars:true,
			scrollbars: 'custom',
			shrinkScrollbars:'clip',
			click:true
		});
		setTimeout(function(){
			iscroll.refresh();
		}, 100);
			$(".gztitle > div").on("click" , function(){
				$(this).addClass("active").siblings().removeClass("active");
				if($(this).hasClass("ycl")) {
					$("#ycl").show();
					$("#dcl").hide();
				}else {
					$("#ycl").hide();
					$("#dcl").show();
				}
			})
		</script>
	</head>
	<body>
	<section class="wsclIscroll" style="background: #fff;">
		<div>
			<div class="gztitle">
				<div class="active dcl">待处理故障</div>
				<div class="ycl">已处理故障</div>
			</div>
			<div>
				<table id='dcl' style="width:100%;">
					#foreach($!obj in $!sbgzList)
					<tr>
						<td>$!obj.gzlx</td>
						<td>$!dateTool.format('yyyy-MM-dd HH:mm:ss', $!obj.fssj)</td>
					</tr>
					#end
				</table>
				<table id='ycl' style="width:100%;display:none;">
					#foreach($!obj in $!sbgzList1)
					<tr>
						<td>$!obj.gzlx</td>
						<td>$!dateTool.format('yyyy-MM-dd HH:mm:ss', $!obj.clsj)</td>
					</tr>
					#end
				</table>
			</div>
		</div>
	</section>
	</body>
</html>