yf_zd
/
yfApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
							<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../css/mescroll.min.css">
		<link rel="stylesheet" href="../css/mui.min.css"/>
		<style type="text/css">
			body{
				font-size: 14px;
			}
			/*蓝色导航*/
			.mui-bar {
				background-color: #21b2e7;
			}
			
			.mui-action-back {
				touch-action: none;
			}
			
			.mui-title,
			.mui-bar a {
				color: #fff;
			}
			/*搜索浮动*/
			.searchBox:before{
				position: absolute;
				content: '';
				background: #21b2e7;
				width: 100%;
				height: 35%;
			}
			.searchControl{
				width: 91%;
    			margin: 0 auto;
			}
			.mui-search{
				display: inline-block;
    			width: 79%;
			}
			.searchBtn,.mui-search >input{
    			box-shadow: 1px 2px 3px 1px #cccccc;
			}
			.searchBtn,.mui-search >input{
				background: #fff;
			}
			
			.searchBtn{
				border-color: #fff;
			    width: 19%;
			}
			
			/*列表*/
			ul{
				padding: 0;
				list-style: none;
			}
			#dataList >li{
				border-left: 1px dashed #72c6e5;
			    margin-left: 20px;
			    padding-bottom: 17px;
			}
			.equipItem{
				margin:0 20px 0px 18px;
			    position: relative;
			    background: #fff;
			    border-radius: 7px;
			    padding:12px;
			}
			.equipItem:before{
				position: absolute;
			    top: 20px;
			    left: -25px;
			    width: 12px;
			    height: 12px;
			    border-radius: 50%;
			    content: '';
			}
			
			.equipItem:after{
				position: absolute;
			    top: 18px;
			    left: -7px;
			    width: 0;
			    height: 0;
			    content: '';
			    background-size: 100% 100%;
			    border: 8px solid #fff;
			    border-left-color: transparent;
			    border-top-color: transparent;
			    transform: rotate(-225deg);
			}
			.upl_time{
				font-size: 16px;
    			line-height: 30px;
    			font-weight: bold;
			}
			.equipTitle{
				line-height: 30px;
			}
			.equipIdIcon{
				vertical-align: middle;
				margin-right: 3px;
			}
			.logoItemimg{
				position: absolute;
			    right: 20px;
			    bottom: 30px;
			    display: block;
			    border-radius: 50%;
			    width: 40px;
    			height: 40px;
    			line-height: 42px;
			    text-align: center;
			    font-family: '黑体';
			    font-size: 18px;
			}
			.logoItemimg:active{
				box-shadow: none !important;
			}
			.equipItem:active{
				background-color: #e4e3e3 !important;
			}
			.equipItem:active.equipItem:after{
				border: 8px solid #e4e3e3;
			    border-left-color: transparent;
			    border-top-color: transparent;
			}
			/*皮肤*/
			.blue:before{
				background: #00b9fe;
			}
			.blue .upl_time{
				color: #00b9fe;
			}
			.blue .logoItemimg{
				color: #6fc2e6;
			    box-shadow: 2px 3px 7px 0px #66c6ea;
				background: radial-gradient(#d1eaf3, #2dc1fe);
			}
			.purple:before{
				background: #c8c6f7;
			}
			.purple .upl_time{
				color: #c8c6f7;
			}
			.purple .logoItemimg{
				color: #c8c6f7;
			    box-shadow: 2px 3px 7px 0px #c8c6f7;
				background: radial-gradient(#edeef4, #c8c6f7);
			}
			
			 
			.searchBox {
				position: fixed;
				left: 0;
				right: 0;
				z-index: 222;
				padding: 0;
			}
			.mescroll{
				position: fixed;
				top: 73px;
				bottom: 0;
				height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">测报灯报表管理</h1>
		</header>
		<div class="mui-content">
			<div class="searchBox">
				<div class="searchControl">
					<div class="mui-input-row mui-search">
					    <input type="search" id="searchInp" class="mui-input-clear" placeholder="请输入设备ID">
					</div>
					<button id="searchBtn" class="searchBtn">搜索</button>
				</div>
			</div>
			<div id="scrollPlace" class="mescroll"> <!--id可以改,而"mescroll"的class不能删-->
		   		<ul id="dataList">
					<!--<li>
		   				<div class="equipItem blue">
		   					<div class="upl_time">2018-12-13 09:13:02</div>
		   					<div class="equipTitle">
		   						<img class="equipIdIcon"  src="../images/IDicon.png" width="22"/>
		   						<span class="">84521212212122</span>
		   					</div>
		   					<div class="equipTitle">
		   						<img class="equipIdIcon"  src="../images/nameicon.png" width="22"/>
		   						<span class="">山东测报灯</span>
		   					</div>
		   					<!--<img class="logoItemimg" src="../images/lookitem.png"/ width="45">
		   					<div class="logoItemimg">→</div>
		   				</div>
		   			</li>-->
				</ul>
			</div>

		</div>
		<script src="../js/jquery-2.1.0.js"></script>
		<script src="../js/mescroll.min.js" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		
		<script type="text/javascript">
			
			mui.init()
			//创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,重置列表数据;
			var mescroll = new MeScroll("scrollPlace", {
				up: {
					callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
					isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
					clearEmptyId: "dataList", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
					toTop:{ //配置回到顶部按钮
						src : "../images/totop.png", //默认滚动到1000px显示,可配置offset修改
						offset : 700
					},
					empty: {
						//列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
						warpId:	"dataList", //父布局的id (1.3.5版本支持传入dom元素)
						icon: "../images/listNull.png", //图标,默认null,支持网络图
						tip: "暂无相关数据~" //提示
					},
					htmlNodata: '<p class="upwarp-nodata">-- 没有更多内容了 --</p>',
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
					lazyLoad: {
			        	use: true // 是否开启懒加载,默认false
			        }
				}
			});
			/*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
			function getListData(page){
				//联网加载数据
				getListDataFromNet(page.num, page.size, function(curPageData,totalSize){
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
					//设置列表数据,因为配置了emptyClearId,第一页会清空dataList的数据,所以setListData应该写在最后;
					setListData(curPageData);
				}, function(){
					//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
	                mescroll.endErr();
					mui.toast('数据请求失败');
				});
			}
			/*设置列表数据*/
			function setListData(curPageData){
				var html = '';
//				var listDom=document.getElementById("dataList");
				var dat = curPageData;
				for(var i = 0; i < dat.length; i++) {
					var equip_name = dat[i].equip_name || '无';
					var className;
					if(i%2 == 0){
						className = 'blue';
					}else{
						className = 'purple';
					}
					html += '<li data-id='+dat[i].equip_id+'><div class="equipItem '+className+'">'+
							'<div class="equipTitle"><img class="equipIdIcon"  src="../images/IDicon.png" width="22"/>'+
							'<span class="">'+dat[i].equip_id+'</span></div><div class="equipTitle">'+
							'<img class="equipIdIcon" src="../images/nameicon.png" width="22"/><span class="">'+equip_name+'</span>'+
							'</div><div class="logoItemimg">→</div></div></li>';
				}
				$('#dataList').append(html);
			}
			/*联网加载列表数据*/
			function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
                	$.ajax({
		                type: 'POST',
		                url: 'http://120.27.222.26/app_reportmanage',
		                timeout : 10000, //超时时间设置，单位毫秒
		                data:{
		                	'etype': 'cbd',
		                	'page': pageNum,
							'filter': mui('#searchInp')[0].value,
		                },
		                dataType: 'json',
		                success: function(data){
		                	successCallback(data.dat,data.nums);
		                },
		                error: function(){
		                	errorCallback();
		                }
		            });
			}
			
			//进入详情页面
			mui('#dataList').on('tap', 'li', function() {
				var imei = this.getAttribute('data-id');
				var upl_time = $(this).find('.upl_time').html();console.log(upl_time)
				markingid = imei;
				mui.openWindow({
					url: 'reprotManage_cbd_detail.html',
					id: 'reprotManage_cbd_detail',
					extras: {
						'equipId': imei,
						'upl_time':upl_time
					},
				})
			})
			
			//搜索操作
			$("#searchInp").on('keypress',function(e) {
				var keycode = e.keyCode;  
                if(keycode=='13') {  
                    e.preventDefault();    
                    //请求搜索接口  
                    if(mui('#searchInp')[0].value) {
                    	$('#dataList').html('');
						getListData({num:1, size:10})
					} else {
						mui.toast("请输入设备ID");
					}
                }  
			})
			document.getElementById('searchBtn').addEventListener('tap', function() {
				if(mui('#searchInp')[0].value) {
					$('#dataList').html('');
					getListData({num:1, size:10})
				} else {
					mui.toast("请输入设备ID");
				}
			})
		</script>
	</body>

</html>