yf_zd
/
yfApp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615
							<!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="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
		<link href="../css/reset.css" rel="stylesheet" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/mescroll.min.css">
		<link href="../css/common.css" rel="stylesheet" />
		<style type="text/css">
			/*搜索浮动*/
			.searchBox {
				position: fixed;
				left: 0;
				right: 0;
				z-index: 222;
				padding: 0;
			}
			.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,.equipItem{
    			box-shadow: 1px 2px 3px 1px #cccccc;
			}
			.searchBtn,.mui-search >input{
				background: #fff;
			}
			
			.searchBtn{
				border-color: #fff;
			    width: 19%;
			}
			.equipTitle {
				color: #21b2e7;
				font-size: 14px;
			}
			
			.mui-table-view-cell p {
				color: #333;
				font-size: 16px;
				margin-top: 4px;
			}
			/*方块形复选框*/
			
			.mui-checkbox input[type=checkbox]:before {
				content: '\e413';
			}
			
			.mui-checkbox input[type=checkbox]:checked:before {
				content: '\e443';
			}
			
			.mui-checkbox input[type=checkbox]:before,
			.mui-radio input[type=radio]:before {
				font-size: 18px;
			}
			
			.mui-checkbox.mui-left input[type=checkbox],
			.mui-radio.mui-left input[type=radio] {
				left: 15px;
			}
			
			.mui-checkbox.mui-left label,
			.mui-radio.mui-left label {
				padding-left: 40px
			}
			
			.mui-checkbox {
				display: inline-block;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 10px;
				width: 20px;
				height: 20px;
			}
			
			.mui-navigate-right:after,
			.mui-push-right:after {
				content: '\e581';
			}
			
			.secondary.active .mui-navigate-right:after,
			.secondary.active .mui-push-right:after {
				content: '\e580';
			}
			
			.mui-table-view-cell>a:not(.mui-btn) {
				padding: 0;
				margin: 0;
			}
			
			.secondary>.secondaryDetial {
				display: none;
				transition: height .35s ease;
			}
			
			.secondary.active>.secondaryDetial {
				display: block;
			}
			
			.mui-table-view-cell {
				padding: 0;
			}
			
			.secondaryDetial {
				padding: 5px 0 0 40px;
				background: #eee;
			}
			
			.secondaryDetial p {
				line-height: 25px;
				color: #333;
			}
			/*input*/
			
			.secondary input {
				position: absolute;
				display: inline-block;
				border: 0;
				outline: 0!important;
				background-color: transparent;
				-webkit-appearance: none;
				top: 10px;
				width: 20px;
				height: 20px;
				left: 14px;
			}
			
			.secondary input:before {
				font-size: 18px;
				content: '\e413';
				font-family: Muiicons;
				font-weight: 400;
				line-height: 1;
				text-decoration: none;
				color: #aaa;
				border-radius: 0;
				background: 0 0;
				-webkit-font-smoothing: antialiased;
			}
			
			.secondary input[type=checkbox]:checked:before {
				content: '\e443';
				color: #007aff;
			}
			
			.secondary span {
				line-height: 40px;
				padding-left: 40px;
			}
			/*list*/
			.mescroll{
				position: fixed;
				top: 87px;
				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>
			<a class="headRightIcon fa fa-cloud-upload mui-pull-right" id="allotBtn">提交</a>
		</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 class="mui-table-view" id="dataList">
					<!--<li class="mui-table-view-cell">
						<div class="mui-input-row mui-checkbox  mui-left">
							<label>全选</label>
							<input name="checkbox1" id="checkall" type="checkbox">
						</div>
					</li>

					<li class="mui-table-view-cell secondary">
						<a class="mui-navigate-right" href="#">
							<input type="checkbox" name="checkbox1" checked="checked" class="check" value="3" />
							<span>设备imei:444444444444</span>
						</a>
						<div class="secondaryDetial">
							<p>设备名称：无</p>
							<p>设备类型：测报灯</p>
							<p>设备添加时间：2018/6-23</p>
							<p>设备用户：无</p>
						</div>
					</li>-->
				</ul>
		   </div>
			<script src="../js/jquery-2.1.0.js"></script>
			<script src="../js/mui.min.js"></script>
			<script src="../js/mescroll.min.js" charset="utf-8"></script>
			<script src="../js/common.js"></script>
			<script type="text/javascript">
			var chknum = 0;
			var checklen;
			var userId;
			mui.init()
			mui.plusReady(function() {
					var self = plus.webview.currentWebview();
					console.log(self.userId);
					userId = self.userId;


				//创建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,page.num);
					}, function(){
						//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
		                mescroll.endErr();
						mui.toast('数据请求失败');
					});
				}
				/*设置列表数据*/
				function setListData(curPageData,pageNum){
					var html = '';
					var dat = curPageData;
					if(pageNum == 1) {
						$('.nullData').remove();
						$('#dataList').empty();
						html = '<li class="mui-table-view-cell"><div class="mui-input-row mui-checkbox  mui-left">' +
							'<label>全选</label><input name="checkbox1" id="checkall" type="checkbox"></div></li>';
					}
					for(var i = 0; i < dat.length; i++) {
						var checked;
						if(dat[i].checked == 1) {
							checked = '<input type="checkbox" checked="checked" name="checkbox1"class="check" value="' + dat[i].equipid + '" />';
						} else {
							checked = '<input type="checkbox" name="checkbox1"class="check" value="' + dat[i].equipid + '" />';
						}

						var equiptype;
						if(dat[i].equiptype) {
							equiptype = '测报灯';
						} else {
							equiptype = '杀虫灯';
						}
						var equip_user;
						if(dat[i].equip_user == 'None' || dat[i].equip_user == '') {
							equip_user = '无'
						} else {
							equip_user = dat[i].equip_user;
						}
						html += '<li class="mui-table-view-cell secondary"><a class="mui-navigate-right" href="#">' +
							checked + '<span>设备ID：' + dat[i].equipid + '</span>' +
							'</a><div class="secondaryDetial"><p>设备名称：无</p><p>设备类型：' + equiptype + '</p>' +
							'<p>设备添加时间：' + dat[i].equip_add_time + '</p><p>设备用户：' + equip_user + '</p></div></li>';
					}
					$('#dataList').append(html);
					//选中回显
					checklen = mui('.check').length;
					//判断当前是否全选
					chknum = 0;
					var checkboxs = mui('.check');
					checkboxs.each(function() {
						var ele = this;
						if(ele.checked == true) {
							chknum++;
						}
					})
					console.log('chknum:' + chknum)
					if(chknum == checklen) {
						document.getElementById('checkall').checked = true;
					} else {
						document.getElementById('checkall').checked = false;

					}
					//全选
					document.getElementById('checkall').addEventListener('change', function(e) {
						var checkboxs = mui('.check');
						if(e.target.checked) {
							checkboxs.each(function() {
								var ele = this;
								ele.checked = true
							})
							chknum = mui('.check').length
						} else {
							checkboxs.each(function() {
								var ele = this;
								ele.checked = false
							})
							chknum = 0
						}
						console.log(chknum)
					})
				}
				/*联网加载列表数据*/
				function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
                	$.ajax({
		                type: 'POST',
		                url: 'http://120.27.222.26/app_equip_allot_list',
		                timeout : 10000, //超时时间设置，单位毫秒
		                data:{
		                	'page': pageNum,
							'userid':userId,
							'f_id': mui('#searchInp')[0].value
		                },
		                dataType: 'json',
		                success: function(data){
		                	console.log(JSON.stringify(data.dat))
		                	successCallback(data.dat,data.nums);
		                },
		                error: function(){
		                	errorCallback();
		                }
		            });
				}
				
				//搜索操作
				$("#searchInp").on('keypress',function(e) {
					var keycode = e.keyCode;  
	                if(keycode=='13') {  
	                    e.preventDefault();    
	                    //请求搜索接口  
	                    if(mui('#searchInp')[0].value) {
							getListData({num:1, size:10})
						} else {
							mui.toast("请输入设备ID");
						}
	                }  
				})
				document.getElementById('searchBtn').addEventListener('tap', function() {
					if(mui('#searchInp')[0].value) {
						getListData({num:1, size:10})
					} else {
						mui.toast("请输入设备ID");
					}
				})
				
				
				function pulldownRefresh() {
					mui('.mui-content').pullRefresh().refresh(true);
					startPage = 1;
					chknum = 0;
					mui('#dataList')[0].innerHTML = '';
					pullupRefresh();
					mui('.mui-content').pullRefresh().endPulldownToRefresh(false);
				}

				function pullupRefresh(isSearch) {
										console.log(startPage)
										console.log(userId)
										console.log(mui('#searchInp')[0].value)
					mui.ajax('http://120.27.222.26/app_equip_allot_list', {
						data: {
							'page': startPage,
							'userid':userId,
							'f_id': mui('#searchInp')[0].value
						},
						dataType: 'json', //服务器返回json格式数据
						type: 'post', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						success: function(data) {
							console.log(JSON.stringify(data.dat))
							if(data.nums) {
								var html = '';
								var dat = data.dat;
								totalPage = Math.ceil(data.nums / 10);
								if(startPage == 1) {
									$('.nullData').remove();
									$('#dataList').empty();
									html = '<li class="mui-table-view-cell"><div class="mui-input-row mui-checkbox  mui-left">' +
										'<label>全选</label><input name="checkbox1" id="checkall" type="checkbox"></div></li>';
								}
								for(var i = 0; i < dat.length; i++) {
									var checked;
									if(dat[i].checked == 1) {
										checked = '<input type="checkbox" checked="checked" name="checkbox1"class="check" value="' + dat[i].equipid + '" />';
									} else {
										checked = '<input type="checkbox" name="checkbox1"class="check" value="' + dat[i].equipid + '" />';
									}

									var equiptype;
									if(dat[i].equiptype) {
										equiptype = '测报灯';
									} else {
										equiptype = '杀虫灯';
									}
									var equip_user;
									if(dat[i].equip_user) {
										equip_user = dat[i].equip_user;
									} else {
										equip_user = '无'
									}
									html += '<li class="mui-table-view-cell secondary"><a class="mui-navigate-right" href="#">' +
										checked + '<span>设备ID：' + dat[i].equipid + '</span>' +
										'</a><div class="secondaryDetial"><p>设备名称：无</p><p>设备类型：' + equiptype + '</p>' +
										'<p>设备添加时间：' + dat[i].equip_add_time + '</p><p>设备用户：' + equip_user + '</p></div></li>';
								}
								$('#dataList').append(html);
								//选中回显
								checklen = mui('.check').length;
								//判断当前是否全选
								chknum = 0;
								var checkboxs = mui('.check');
								checkboxs.each(function() {
									var ele = this;
									if(ele.checked == true) {
										chknum++;
									}
								})
								console.log('chknum:' + chknum)
								if(chknum == checklen) {
									document.getElementById('checkall').checked = true;
								} else {
									document.getElementById('checkall').checked = false;

								}
								//全选
								document.getElementById('checkall').addEventListener('change', function(e) {
									var checkboxs = mui('.check');
									if(e.target.checked) {
										checkboxs.each(function() {
											var ele = this;
											ele.checked = true
										})
										chknum = mui('.check').length
									} else {
										checkboxs.each(function() {
											var ele = this;
											ele.checked = false
										})
										chknum = 0
									}
									console.log(chknum)
								})

								if(totalPage == startPage) { //总页码等于当前页码，停止上拉下拉
									mui('.mui-content').pullRefresh().endPullupToRefresh(true);
								} else {
									startPage++;
									setTimeout(function() {
										mui('.mui-content').pullRefresh().endPullupToRefresh(false);
									}, 500); //重置下拉加载
								}

							} else {
								$('.nullData').remove();
								$('#dataList').empty();
								if(isSearch) {
									var nullHtml = '<div class="nullData"><img src="../images/searchNull.png" alt="" width="110" /></div>'
								} else {
									var nullHtml = '<div class="nullData"><img src="../images/listNull.png" alt="" width="110" /></div>'
								}

								$('.mui-content').append(nullHtml);
								setTimeout(function() {
									mui('.mui-content').pullRefresh().disablePullupToRefresh();
								}, 500); //重置下拉加载
							}
						},
						error: function(xhr, type, errorThrown) {
							$('#dataList').empty();
							mui('.mui-content')[0].appendChild(netStyle('../images/error.png'));
							mui.toast('数据请求失败');
						}
					});

				}

				//二级选项卡
				mui('#dataList').on('tap', '.secondary', function() {
					var classAttr = this.getAttribute("class").split(' ');
					if(classAttr.indexOf('active') == -1) {
						mui('.secondary').each(function() {
							this.classList.remove("active");　
						})
						this.classList.add("active");
					} else {
						this.classList.remove("active");　
					}
				})
				mui('#dataList').on('tap', '.secondary .secondaryDetial', function(event) {
					console.log(event)
					event.stopPropagation();
				})

				//单选
				mui('#dataList').on('tap', '.secondary input', function(event) {
					checklen = mui('.check').length;
					if(this.checked) {
						this.checked = false;
						chknum--;
					} else {
						this.checked = true;
						chknum++;
					}
					if(chknum == checklen) {
						document.getElementById('checkall').checked = true;
					} else {
						document.getElementById('checkall').checked = false;
					}
					event.stopPropagation();
				})

				//分配按钮
				document.getElementById('allotBtn').addEventListener('tap', function(){
					var topicidAll = []; //全部imei数组
					var checkboxs = mui('.check');
					checkboxs.each(function() {
						var ele = this;
						topicidAll.push(ele.getAttribute('value'))						
					})
					var check_box_list = allotFun();
					
					console.log(topicid)
					console.log(topicidAll);
					if(topicidAll.length){
						mui.ajax('http://120.27.222.26/app_equip_allot_confirm', {
							data: {
								'userid':userId,
								'equip_ids':JSON.stringify(topicidAll),
								'check_box_list': JSON.stringify(check_box_list),
							},
							dataType: 'json', //服务器返回json格式数据
							type: 'post', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							beforeSend: function() {
								plus.nativeUI.showWaiting("分配中...");
							},
							complete: function() {
								plus.nativeUI.closeWaiting();
							},
							success: function(data) {
								if(data == 0){
									mui.toast('分配成功');
								}else{
									mui.toast('分配失败');
								}
							},
							error: function(xhr, type, errorThrown) {
								mui.toast('请求失败');
							}
						})
					}else{
						mui.toast('请至少选择一台设备');
					}
				})
				var topicid = []; //imei数组
				function allotFun() {
					topicid = []
					var checkboxs = mui('.check');
					checkboxs.each(function() {
						var ele = this;
						if(ele.checked == true) {
							topicid.push(ele.getAttribute('value'))
						}
					})
					return topicid;
				}
			})
				
				
			</script>
	</body>

</html>