yf_zd
/
commonApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
							<!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 href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/common.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/mescroll.min.css">
		<link rel="stylesheet" href="../css/reset.css">
		<link rel="stylesheet" href="../css/mobiscroll.custom-3.0.0-beta6.min.css">
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/timeLine.css"/>
	</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="faxSearchBox">
				<div class="mui-input-row mui-search">
					<div id="timeSelect">请选择时间段</div>
				</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>
		   			</li>
		   			<li>
		   				<div class="equipItem purple">
		   					<div class="upl_time">2018-12-13 09:13:02</div>
		   				</div>
		   			</li>-->
				</ul>
			</div>
			<div class="calendarBox" style="display:none">
				<p>开始时间：<input id="start" placeholder="Please Select ..." readonly /></p>
				<p>结束时间：<input id="end" placeholder="Please Select ..." readonly /></p>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-2.1.0.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/mescroll.min.js" charset="utf-8"></script>
		<script src="../js/mobiscroll.custom-3.0.0-beta6.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.picker.min.js"></script>
		<script type="text/javascript">
			var equipId;
			var equipName;
			var begin = '',
				end = '',
				flag = 1;
				
			mui.init();
			var mescroll;
			document.addEventListener('plusready',function () {
				var self = plus.webview.currentWebview();
				equipId = self.equipId;
//				console.log(equipId)
				//创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,重置列表数据;
				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
				        }
					}
				});
			},false);
			/*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
			function getListData(page){
				//联网加载数据
				getListDataFromNet(page.num, page.size, function(curPageData,totalSize){
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					mescroll.endSuccess(curPageData.length);
					//设置列表数据,因为配置了emptyClearId,第一页会清空dataList的数据,所以setListData应该写在最后;
					setListData(curPageData);
				}, function(){
					//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
	                mescroll.endErr();
					mui.toast('数据请求失败');
				});
			}
			/*设置列表数据*/
			function setListData(curPageData){
				var html = '';
				var dat = curPageData;
				equipName = '无';
				for(var i = 0; i < dat.length; i++) {
					if(i == 0){						
						equipName = dat[0].equip_name;
					}
					var className;
					if(i%2 == 0){
						className = 'blue';
					}else{
						className = 'purple';
					}
					html += '<li data-qxzData="'+dat[i].qxz_data+'" >'+
							'<div class="equipItem '+className+'"><div class="upl_time">'+dat[i].upl_time+'</div></div></li>';
				}
				$('#dataList').append(html);
			}
			/*联网加载列表数据*/
			function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
            	$.ajax({
	                type: 'POST',
		            url: 'http://120.27.222.26/app_reportmanage_detail',
	                timeout : 10000, //超时时间设置，单位毫秒
	                data:{
	                	'etype': 'qxz',
						'page': pageNum,
						'equip_id': equipId,
						'filter_begin':begin,
						'filter_end':end
	                },
	                dataType: 'json',
	                success: function(data){
	                	successCallback(data.dat,data.nums);
	                },
	                error: function(){
	                	errorCallback();
	                }
	            });
			}

			//页面跳转
			mui('#dataList').on('tap', 'li', function() {
				var qxz_data = this.getAttribute('data-qxzData');
				var upl_time = $(this).find('.upl_time').html();
				mui.openWindow({
					url: 'qxz_detail_list_detail.html',
					id: 'qxz_detail_list_detail',
					extras: {
						equipId: equipId,
						equipName:equipName,
						qxz_data:qxz_data,
						upl_time:upl_time,
					}
				})
			})

			//搜索操作
			//日历
			mobiscroll.settings = {
		        theme: 'ios'
		        ,lang: 'zh',
		    };
			$('.mui-search').mobiscroll().range({
		        startInput: '#start',
		        endInput: '#end',
		        onSet: function (event, inst) {
		            begin = getYMDHMS(inst.getVal()[0]);
		            end = getYMDHMS(inst.getVal()[1]);
		            $('#timeSelect').html(getYMDHMS(inst.getVal()[0])+'　'+getYMDHMS(inst.getVal()[1]))
		            //请求图表数据：
		            $('#dataList').html('');
					getListData({num:1, size:10})
		        },
		    });
		    function getYMDHMS(time) {
		        var time = new Date(time);
		        var year = time.getFullYear(),
		            month = time.getMonth() + 1,
		            date = time.getDate();
		     
		        if (month < 10) { month = '0' + month; }
		        if (date < 10) { date = '0' + date; }
		     
		        return year+'-'+ month+'-'+ date //不想
		    }
			
		</script>
	</body>

</html>