yf_zd
/
yfApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458
							<!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 rel="stylesheet" href="../css/iconfont.css" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/common.css" rel="stylesheet" />

		<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;
			}
			.mui-col-sm-6 .mui-pull-left:nth-child(2){
				    width: 60%;
			}
			
			.equipState {
				font-size: 18px;
				margin-top: 14px;
				color: #333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			
			.conversion {
				width: 110px;
			}
			
			#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%;
				}
			}
			/*设置*/
			
			#detial .mui-navigate-right {
				line-height: 80px;
			}
			
			#detial .mui-navigate-right:after,
			#detial .mui-push-right:after {
				font-size: 33px;
				color: #3bb9e7;
			}
			
			.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;
			}
		</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 mui-icon mui-icon-loop mui-pull-right" onclick="location.reload();"></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>
						<li class="mui-table-view-cell">
							<p id="lat_lng"></p>
						</li>
					</ul>
					<ul class="mui-table-view detialBox">
						<li class="mui-table-view-cell">
							<h1 class="areaTitle">配置设备操作</h1>
						</li>
						<li class="mui-table-view-cell" id="configuration">
							<a class="mui-navigate-right">
								<i class="fa fa-cog" aria-hidden="true"></i> 设备配置
							</a>
						</li>
						<li class="mui-table-view-cell" id="simCodeSearch">
							<a class="mui-navigate-right">
								<i class="fa fa-search" aria-hidden="true"></i> SIM卡查询
							</a>
						</li>
						<li class="mui-table-view-cell" id="downInquire">
							<a class="mui-navigate-right">
								<i class="fa fa-refresh" aria-hidden="true"></i> 查询最新状态
							</a>
						</li>
					</ul>
					<ul class="mui-table-view detialBox">
						<li class="mui-table-view-cell">
							<h1 class="areaTitle">配置设备操作</h1>
						</li>
						<li class="mui-table-view-cell" id="configuration">
							<a class="mui-navigate-right">
								<i class="fa fa-cog" aria-hidden="true"></i> 设备配置
							</a>
						</li>
						<li class="mui-table-view-cell" id="simCodeSearch">
							<a class="mui-navigate-right">
								<i class="fa fa-search" aria-hidden="true"></i> SIM卡查询
							</a>
						</li>
						<li class="mui-table-view-cell" id="downInquire">
							<a class="mui-navigate-right">
								<i class="fa fa-refresh" aria-hidden="true"></i> 查询最近状态
							</a>
						</li>
					</ul>
					<div class="mui-row" id="detial">
						<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="ts"></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">&#xe682;</i>
							</div>
							<div class="mui-pull-left ">
								<p class="equipState" id="gs"></p>
								<p class="equipFun">通道状态</p>
							</div>
						</div>
						<div class="mui-col-sm-6">
							<div class="mui-pull-left">
								<i class="iconfont">&#xe610;</i>
							</div>
							<div class="mui-pull-left ">
								<p class="equipState" id="hs"></p>
								<p class="equipFun">加热状态</p>
							</div>
						</div>
						<div class="mui-col-sm-6">
							<div class="mui-pull-left">
								<i class="iconfont">&#xe6db;</i>
							</div>
							<div class="mui-pull-left ">
								<p class="equipState" id="upds"></p>
								<p class="equipFun">上仓门状态</p>
							</div>
						</div>
						<div class="mui-col-sm-6">
							<div class="mui-pull-left">
								<i class="iconfont">&#xeaaf;</i>
							</div>
							<div class="mui-pull-left ">
								<p class="equipState" id="dnds"></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"></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 conversion" id="dver"></p>
								<p class="equipFun">版本型号</p>
							</div>
						</div>
					</div>
					
				</div>
			</div>

			<div id="popover" class="box mui-popover mui-poppicker mui-popover-action mui-popover-bottom" style="height: 310px;background-color: #fff;">
				<div class="mui-popover-arrow"></div>
				<!--<div class="popoverheader">
					<div class="text"></div>
					<a href="#popover"><img src="../image/close.png" alt=""></a>
				</div>-->
				<div id="simDetial">
					
				</div>
				<div class="mui-table-view mui-table-view-chevron next">
					<a href="#popover" class="x-next add">我知道了</a>
				</div>
			</div>
		</div>
		<div id="map" style="display: none;"></div>

		<script src="../js/jquery-2.1.0.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/common.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=La58N63t7hPhafQ7Eror2kon"></script>
		<script type="text/javascript">
			var equipId;
			var iccid;
			mui.init();
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				equipId = self.equipId;
				$('#equipId').html('设备ID：' + equipId);
				console.log(equipId);
				downCallback()
				var map = new BMap.Map("map"); //
				geoc = new BMap.Geocoder();
				//下拉刷新的回调
				function downCallback() {
					$.ajax({
						url: 'http://120.27.222.26/app_equipmanage_detail',
						data: {
							'etype': 'cbd',
							'equip_id': equipId,
						},
						dataType: 'json', //服务器返回json格式数据
						type: 'post', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						beforeSend: function() {
							plus.nativeUI.showWaiting('请求中...');
						},
						complete: function() {
							plus.nativeUI.closeWaiting();
						},
						success: function(data) {
							var equip_name = data.equip_name || '无';
							$('#equipName').html('设备名称：' + equip_name);
							$('#upl_time').html('上报时间：' + data.upl_time);
							var stat = eval('(' + data.cbd_status + ')');
							var point = new BMap.Point(stat.lng, stat.lat);
							geoc.getLocation(point, function (rs) {
							    var addComp = rs.addressComponents;
								$('#lat_lng').html('位置：'  + addComp.province + ", " + addComp.city + ", " + addComp.district);
							});
							var ts = stat.ts == 0 ? '光控' : '时控';
							$('#ts').html(ts);
							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 gs = stat.gs == 0 ? '排水' : '落虫';
							$('#gs').html(gs);
							var hs = stat.hs == 0 ? '正常' : '加热';
							$('#hs').html(hs);
							var upds = stat.upds == 0 ? '关闭' : '打开';
							$('#upds').html(upds);
							var dnds = stat.dnds == 0 ? '关闭' : '打开';
							$('#dnds').html(dnds);
							$('#csq').html(stat.csq);
							$('#dver').html(stat.dver);
							iccid = stat.iccid;
						},
						error: function(xhr, type, errorThrown) {
							//联网失败的回调,隐藏下拉刷新的状态
							mescroll.endErr();
							mui.toast('数据请求失败');
						}
					});
				}
				//配置
				document.getElementById('configuration').addEventListener('tap', function() {
					mui.openWindow({
						url: 'configuration_cbd.html',
						id: 'configuration_cbd',
						extras: {
							equipId: equipId
						}
					})
				})
				//sim卡查新  
				document.getElementById('simCodeSearch').addEventListener('tap', function() {
					if(iccid) {
						$.ajax({
							url: 'http://120.27.222.26/siminfo',
							data: {
								simid: iccid,
							},
							dataType: 'json', //服务器返回json格式数据
							type: 'post', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							beforeSend: function() {
								plus.nativeUI.showWaiting('请求中...');
							},
							complete: function() {
								plus.nativeUI.closeWaiting();
							},
							success: function(data) {
								var dat = data.data;
								if(data.code == 0) {
									var status;
									if(dat.account_status == "0") {
										status = "未知";
									} else if(dat.account_status == "1") {
										status = "测试期";
									} else if(dat.account_status == "2") {
										status = "沉默期";
									} else if(dat.account_status == "3") {
										status = "使用中";
									} else if(dat.account_status == "4") {
										status = "停机";
									} else if(dat.account_status == "5") {
										status = "停机保号";
									} else if(dat.account_status == "6") {
										status = "预销号";
									} else if(dat.account_status == "7") {
										status = "销号";
									}
									var usage;
									if(dat.iccid) {
										usage = dat.data_usage;
									} else {
										usage.innerHTML = '--';
									}
									var balance;
									if(dat.iccid) {
										balance = dat.data_balance;
									} else {
										balance = '--';
									}
									var time;
									if(dat.iccid) {
										var timestamp4 = new Date(dat.expiry_date * 1000); //直接用 new Date(时间戳) 格式转化获得当前时间
										time = timestamp4.toLocaleDateString().replace(/\//g, "-") + " " + timestamp4.toTimeString().substr(0, 8);
									} else {
										time = '--';
									}
									html = '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">SIM卡查询结果<br>ICCID:' + iccid + '<br><br>状态：' + status + '<br>套餐：' + dat.data_plan + 'Mb<br>已用流量:' + usage + 'Mb<br>剩余流量：' + balance + 'Mb<br>到期时间：' + time + '</div>'
									$('#simDetial').html(html);
									mui('.mui-popover').popover('show', document.getElementById("popover"));
								}
							},
							error: function(xhr, type, errorThrown) {
								//联网失败的回调,隐藏下拉刷新的状态
								mescroll.endErr();
								mui.toast('数据请求失败');
							}
						});

					} else {
						mui.toast('未查询到SIM卡号');
					}
				})
				//查询
				document.getElementById('downInquire').addEventListener('tap', function() {
					mui.ajax('http://120.27.222.26/cbd_mqtt', {
						data: {
							"req": "read", //读取
							"topicid": equipId,
							"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>