yf_zd
/
commonApp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521
							<!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/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<link href="../css/common.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/mescroll.min.css">
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<style type="text/css">
			.mui-content {
				background: #fff;
			}
			
			.iconfont {
				font-size: 35px;
				color: #3bb9e7;
				/*font-weight: bold;*/
				line-height: 80px;
				margin: 10px 10px 10px 20px;
			}
			
			.equipState {
				font-size: 18px;
				margin-top: 14px;
				color: #333;
			}
			
			#detial>div {
				border-bottom: 2px solid #eee;
			}
			
			#detial>div:nth-of-type(odd) {
				border-right: 2px solid #eee;
			}
			
			.mui-table-view:after,
			.mui-table-view:before {
				height: 2px;
				background-color: #eee;
			}
			
			@media(max-width: 400px) {
				.mui-col-sm-6 {
					width: 50%;
				}
			}
			
			.nullData {
				top: 45px;
			}
			/*查看详情*/
			.areaTitle {
			    color: #424242;
			    padding-left: 5px;
			    border-left: 5px solid #5870f6;
			    font-weight: bold;
			    font-size: 16px;
			}
			.detialBox .fa{
				padding-right: 5px;
    			color: #ff6e00;
			}
			/**/
			.controlVal{
				position: absolute;
			    top: 50%;
			    right: 35px;
			    -webkit-transform: translateY(-50%);
			     transform: translateY(-50%); 
			}
			#controlBtn {
				width: 80%;
				/*height: 0px;*/
				background: white;
				position: fixed;
				top: 24%;
				left: 50%;
				margin-left: -40%;
			}
			/*移除底部或顶部三角,需要在删除此代码*/
			.mui-popover .mui-popover-arrow:after {
				width: 0px;
			}
		</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" id="title">杀虫灯设备</h1>
			<!--<a id="openPopover" class="mui-icon mui-icon-more mui-pull-right"></a>-->
		</header>
		<div class="mui-content">
			<div id="scrollPlace" class="mescroll">
				<div id="dataList">
					<ul class="mui-table-view" id="equip">
						<li class="mui-table-view-cell">
							<h1 class="areaTitle">设备信息</h1>
						</li>
						<li class="mui-table-view-cell">
							<p id="equipId"></p>
						</li>
						<li class="mui-table-view-cell">
							<p id="equipName"></p>
						</li>
						<li class="mui-table-view-cell">
							<p id="upl_time"></p>
						</li>
					</ul>
					<div class="mui-row" id="detial">
						<div class="mui-col-sm-6">
							<div class="mui-pull-left">
								<i class="iconfont">&#xe698;</i>
							</div>
							<div class="mui-pull-left ">
								<p class="equipState" id="ds">开</p>
								<p class="equipFun">设备开关</p>
							</div>
						</div>
						<div class="mui-col-sm-6">
							<div class="mui-pull-left">
								<i class="iconfont">&#xe60b;</i>
							</div>
							<div class="mui-pull-left ">
								<p class="equipState" id="ws">待机</p>
								<p class="equipFun">工作状态</p>
							</div>
						</div>
						<div class="mui-col-sm-6">
							<div class="mui-pull-left">
								<i class="iconfont">&#xeaae;</i>
							</div>
							<div class="mui-pull-left ">
								<p class="equipState" id="tt">4</p>
								<p class="equipFun">定时模式</p>
							</div>
						</div>
						<div class="mui-col-sm-6">
							<div class="mui-pull-left">
								<i class="iconfont">&#xe64c;</i>
							</div>
							<div class="mui-pull-left ">
								<p class="equipState" id="lps">正常</p>
								<p class="equipFun">光控状态</p>
							</div>
						</div>
						<div class="mui-col-sm-6">
							<div class="mui-pull-left">
								<i class="iconfont">&#xe633;</i>
							</div>
							<div class="mui-pull-left ">
								<p class="equipState" id="tps">正常</p>
								<p class="equipFun">温控状态</p>
							</div>
						</div>
						<div class="mui-col-sm-6">
							<div class="mui-pull-left">
								<i class="iconfont">&#xe635;</i>
							</div>
							<div class="mui-pull-left ">
								<p class="equipState" id="rps">正常</p>
								<p class="equipFun">雨控状态</p>
							</div>
						</div>
						<div class="mui-col-sm-6">
							<div class="mui-pull-left">
								<i class="iconfont">&#xe622;</i>
							</div>
							<div class="mui-pull-left ">
								<p class="equipState" id="tbs">正常</p>
								<p class="equipFun">灯管状态</p>
							</div>
						</div>
						<div class="mui-col-sm-6">
							<div class="mui-pull-left">
								<i class="iconfont">&#xe78d;</i>
							</div>
							<div class="mui-pull-left ">
								<p class="equipState" id="dps">正常</p>
								<p class="equipFun">倾倒状态</p>
							</div>
						</div>
						<div class="mui-col-sm-6">
							<div class="mui-pull-left">
								<i class="iconfont">&#xe60a;</i>
							</div>
							<div class="mui-pull-left ">
								<p class="equipState" id="csq">29</p>
								<p class="equipFun">信号强度</p>
							</div>
						</div>
						<div class="mui-col-sm-6">
							<div class="mui-pull-left">
								<i class="iconfont">&#xe65f;</i>
							</div>
							<div class="mui-pull-left ">
								<p class="equipState" id="dver">1.0.1</p>
								<p class="equipFun">版本型号</p>
							</div>
						</div>
					</div>
					<ul class="mui-table-view detialBox">
						<li class="mui-table-view-cell">
							<h1 class="areaTitle">配置设备操作</h1>
						</li>
					    <li class="mui-table-view-cell" id="clock">
					        <a class="mui-navigate-right">
					        	<i class="fa fa-clock-o" aria-hidden="true"></i>
					        	定时模式
					        	<span class="controlVal">光控</span>
					        </a>
					    </li>
					    <li class="mui-table-view-cell" id="timingBtn">
					        <a class="mui-navigate-right">
					        	<i class="fa fa-clock-o" aria-hidden="true"></i>
					        	定时时长
					        	<span class="controlVal">4</span>
					        </a>
					    </li>
					    <li class="mui-table-view-cell" id="switchBtn">
					        <a class="mui-navigate-right">
					        	<i class="fa fa-power-off" aria-hidden="true"></i>
					        	设备开关
					        	<span class="controlVal">开</span>
					        </a>
					    </li>
					    <li class="mui-table-view-cell" id="startBar">
					        <a class="mui-navigate-right">
					        	<i class="fa fa-power-off" aria-hidden="true"></i>
					        	起始时间
					        	<span class="controlVal">3</span>
					        </a>
					    </li>
					    <li class="mui-table-view-cell" id="stopBar">
					        <a class="mui-navigate-right">
					        	<i class="fa fa-power-off" aria-hidden="true"></i>
					        	结束时间
					        	<span class="controlVal">2</span>
					        </a>
					    </li>
					    <li class="mui-table-view-cell" id="refreshBtn">
					        <a class="mui-navigate-right">
					        	<i class="fa fa-refresh" aria-hidden="true"></i>
					        	查询最新状态
					        </a>
					    </li>
					</ul>
				</div>
			</div>
		</div>
		<div id="aaa" style="display: none;">
			sdvsdvsdvsd
		</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/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js"></script>
		<script type="text/javascript">
			var equipId;
			mui.init();
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				equipId = self.equipId;
				$('#equipId').html('设备ID：'+equipId);
				console.log(equipId);
				//创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,重置列表数据;
				var mescroll = new MeScroll("scrollPlace", {
					down: {
						callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
					},
				});
				ws=plus.webview.currentWebview();

				//修改操作
				document.getElementById('openPopover').addEventListener('tap', function() {
					mui('#popover').popover('toggle', document.getElementById('controlBtn'));
				})
				//定时时长
				document.getElementById("clock").addEventListener('tap', function() {
					// 显示遮罩层
//					ws.setStyle({mask:"rgba(0,0,0,0.5)"});
//					$('#aaa').show()
					// 点击关闭遮罩层
//					ws.addEventListener("maskClick",function(){
//					  ws.setStyle({mask:"none"});
//					},false);
				})
				//下拉刷新的回调
				function downCallback() {
					$.ajax({
						url: 'http://120.27.222.26/app_equipmanage_detail',
						data: {
							'etype': 'scd',
							'equip_id': equipId,
						},
						dataType: 'json', //服务器返回json格式数据
						type: 'post', //HTTP请求类型
						beforeSend: function() {
							plus.nativeUI.showWaiting('请求中...');
						},
						complete: function() {
							plus.nativeUI.closeWaiting();
						},
						timeout: 10000, //超时时间设置为10秒；
						success: function(data) {
							//联网成功的回调,隐藏下拉刷新的状态;
							mescroll.endSuccess(); //无参. 注意结束下拉刷新是无参的
							var equip_name = data.equip_name || '无';
							$('#equipName').html('设备名称：' + equip_name);
							$('#upl_time').html('上报时间：' + data.upl_time);
							var stat = eval('(' + data.scd_status + ')');
							var ds = stat.ds == 0 ? '关' : '开';
							$('#ds').html(ds);
							var ws = '';
							if(stat.ws == 0) ws = "待机";
							else if(stat.ws == 1) ws = "工作";
							else if(stat.ws == 2) ws = "充电";
							$('#ws').html(ws);
							var tt = '';
							if(stat.tt == 1){
								$('#timingBtn').hide();
								$('#switchBtn').hide();
								$('#startBar').show();
								$('#stopBar').show();
							}else{
								$('#timingBtn').show();
								$('#switchBtn').show();
								$('#startBar').hide();
								$('#stopBar').hide();
							}
							if(stat.tt == 0) tt = "常亮";
							else tt = stat.tt;
							$('#tt').html(tt);
							var lps = stat.lps == 0 ? '正常' : '异常';
							$('#lps').html(lps);
							var tps = stat.tps == 0 ? '正常' : '异常';
							$('#tps').html(tps);
							var rps = stat.rps == 0 ? '正常' : '异常';
							$('#rps').html(rps);
							var tbs = stat.tbs == 0 ? '正常' : '异常';
							$('#tbs').html(tbs);
							var dps = stat.dps == 0 ? '正常' : '异常';
							$('#dps').html(dps);
							$('#csq').html(stat.csq);
							$('#dver').html(stat.dver);
						},
						error: function(xhr, type, errorThrown) {
							//联网失败的回调,隐藏下拉刷新的状态
							mescroll.endErr();
							mui.toast('数据请求失败');
						}
					});
				}
				
				//定时时长
				document.getElementById("timingBtn").addEventListener('tap', function() {
					var picker = new mui.PopPicker();
					picker.setData([{
						value: "0",
						text: "常亮"
					}, {
						value: "1",
						text: "1小时"
					}, {
						value: "2",
						text: "2小时"
					}, {
						value: "3",
						text: "3小时"
					}, {
						value: "4",
						text: "4小时"
					}, {
						value: "5",
						text: "5小时"
					}, {
						value: "6",
						text: "6小时"
					}, {
						value: "7",
						text: "7小时"
					}])
					picker.show(function(getSelectedItems) {
						console.log(getSelectedItems[0].value);
						var id = [];
						id.push(equipId);
						mui.ajax('http://120.27.222.26/scd_mqtt', {
							data: {
								'sw': 'tt',
								'topicid': JSON.stringify(id),
								'hours': getSelectedItems[0].value
							},
							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('设置成功');
								}
							},
							error: function(xhr, type, errorThrown) {
								$('#equiplist').empty();
								mui('.mui-content')[0].appendChild(netStyle('../images/error.png'));
								mui.toast('数据请求失败');
							}
						})
					})
					picker.hide = function(){
						var self = this;
						self.panel.classList.remove(mui.className('active'));
						self.mask.close();
						document.body.classList.remove(mui.className('poppicker-active-for-page'));
						//处理物理返回键
						mui.back=self.__back;
					}
				});


				//设备开关
				document.getElementById("switchBtn").addEventListener('tap', function() {
					var picker = new mui.PopPicker();
					picker.setData([{
						value: "0",
						text: "开启"
					}, {
						value: "1",
						text: "关闭"
					}])
					picker.show(function(getSelectedItems) {
						console.log(getSelectedItems[0].value)
						var id = [];
						id.push(equipId);
						mui.ajax('http://120.27.222.26/scd_mqtt', {
							data: {
								'sw': 'ds',
								'topicid': JSON.stringify(id),
								'ds': getSelectedItems[0].value
							},
							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('设置成功');
								}
							},
							error: function(xhr, type, errorThrown) {
								$('#equiplist').empty();
								mui('.mui-content')[0].appendChild(netStyle('../images/error.png'));
								mui.toast('数据请求失败');
							}
						})
					})
					picker.hide = function(){
						var self = this;
						self.panel.classList.remove(mui.className('active'));
						self.mask.close();
						document.body.classList.remove(mui.className('poppicker-active-for-page'));
						//处理物理返回键
						mui.back=self.__back;
					}
				});
				
				//查询
				$('#refreshBtn').on('tap',function(){
					var id = [];
					id.push(equipId);
					mui.ajax('http://120.27.222.26/scd_mqtt',{
						data:{
							'sw': 'read',
							'topicid': JSON.stringify(id),
							'kind': 'status'
						},
						dataType:'json',//服务器返回json格式数据
						type:'post',//HTTP请求类型
						timeout: 10000,//超时时间设置为10秒；
						beforeSend: function() {
							plus.nativeUI.showWaiting('请求中...');
						},
						complete: function() {
							setTimeout(function () {
			                    plus.nativeUI.closeWaiting();
			                }, 5000)
						},
						success:function(data){
							setTimeout(function () {
			                    location.reload();
			                }, 5000)
						},
						error:function(xhr,type,errorThrown){
							mui.toast('请求失败！')
						}
					});
				})
				
			})
			

		</script>
	</body>

</html>