yf_zd
/
commonApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705
							<!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" 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;
			}
			
			.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%;
				}
			}
			
			.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;
			}
			
			.lnglat>p {
				color: #333;
				font-size: 14px;
			}
			
			.lnglat #lng {
				margin: 18px 0 3px 0;
			}
		</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 class="headRightIcon fa fa-camera mui-pull-right" id="takephoto">拍照</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="equipSW">
							<a class="mui-navigate-right">
								<i class="fa fa-calendar" aria-hidden="true"></i> 设备开关
								<span class="controlVal" data-time='' id="equipSWValue"></span>
							</a>
						</li>-->
						<li class="mui-table-view-cell" id="glass">
							<a class="mui-navigate-right">
								<i class="fa fa-calendar" aria-hidden="true"></i> 载玻片更换时间
								<span class="controlVal" data-time='' id="glassValue"></span>
							</a>
						</li>
						<li class="mui-table-view-cell" id="liquid">
							<a class="mui-navigate-right">
								<i class="fa fa-tint" aria-hidden="true"></i> 培养液更换时间
								<span class="controlVal" data-time='' id="liquidValue"></span>
							</a>
						</li>
						<li class="mui-table-view-cell" id="configBtn">
							<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="refreshBtn">
							<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="equipSW">
							<a class="mui-navigate-right">
								<i class="fa fa-calendar" aria-hidden="true"></i> 设备开关
								<span class="controlVal" data-time='' id="equipSWValue"></span>
							</a>
						</li>-->
						<li class="mui-table-view-cell" id="glass">
							<a class="mui-navigate-right">
								<i class="fa fa-calendar" aria-hidden="true"></i> 载玻片更换时间
								<span class="controlVal" data-time='' id="glassValue"></span>
							</a>
						</li>
						<li class="mui-table-view-cell" id="liquid">
							<a class="mui-navigate-right">
								<i class="fa fa-tint" aria-hidden="true"></i> 培养液更换时间
								<span class="controlVal" data-time='' id="liquidValue"></span>
							</a>
						</li>
						<li class="mui-table-view-cell" id="configBtn">
							<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="refreshBtn">
							<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">&#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">&#xe8f3;</i>
							</div>
							<div class="mui-pull-left ">
								<p class="equipState" id="bat_sta">4</p>
								<p class="equipFun">电池状态</p>
							</div>
						</div>
						<div class="mui-col-sm-6">
							<div class="mui-pull-left">
								<i class="iconfont">&#xe612;</i>
							</div>
							<div class="mui-pull-left ">
								<p class="equipState" id="usb_sta">正常</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="pre_temp">正常</p>
								<p class="equipFun">保温仓温度</p>
							</div>
						</div>
						<div class="mui-col-sm-6">
							<div class="mui-pull-left">
								<i class="iconfont">&#xe624;</i>
							</div>
							<div class="mui-pull-left ">
								<p class="equipState" id="v_bat">正常</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="staytime">正常</p>
								<p class="equipFun">已培养时间</p>
							</div>
						</div>
						<div class="mui-col-sm-6">
							<div class="mui-pull-left">
								<i class="iconfont">&#xe711;</i>
							</div>
							<div class="mui-pull-left lnglat">
								<p class="equipState conversion" id="lng">正常</p>
								<p class="equipFun conversion" id="lat">经纬度</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 conversion" id="dver">1.0.1</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="aaa" style="display: none;">
			sdvsdvsdvsd
		</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/mui.picker.min.js" type="text/javascript" charset="utf-8"></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,bzy_status,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();
				//拍照
				document.getElementById("takephoto").addEventListener('tap', function() {
					$.ajax({
							url: 'http://120.27.222.26/bzy_mqtt',
							type: "post",
							data: {
								'req': 'ctrl',
								'topicid': equipId,
								'cmd': 'ctrl',
								'type': 'takephoto'
							},
							dataType: "json",
							beforeSend: function() {
								plus.nativeUI.showWaiting('请求中...');
							},
							complete: function() {
								plus.nativeUI.closeWaiting();
							},
							timeout: 10000, //超时时间设置为10秒；
							success: function(data) {
								mui.toast('请求成功');
							},
							error: function(xhr, type, errorThrown) {
								//联网失败的回调,隐藏下拉刷新的状态
								mescroll.endErr();
								mui.toast('数据请求失败');
							}
						});
				})
				//载玻片更换时间
				document.getElementById("glass").addEventListener('tap', function() {
					var year = new Date().getFullYear();
					var dtpicker = new mui.DtPicker({
						"type": "date",
						"beginYear": 1999,
						"endYear": year + 6,
					});
					dtpicker.show(function(selectItems) {
						console.log(selectItems.text)
						$.ajax({
							url: 'http://120.27.222.26/bzy_mqtt',
							type: "post",
							data: {
								"req": "glass", //读取
								'id': equipId,
								"glass": selectItems.text,
							},
							dataType: "json",
							beforeSend: function() {
								plus.nativeUI.showWaiting('请求中...');
							},
							complete: function() {
								plus.nativeUI.closeWaiting();
							},
							timeout: 10000, //超时时间设置为10秒；
							success: function(data) {
								headChangeFun(selectItems.text, $('#liquidValue').data('time'));
							},
							error: function(xhr, type, errorThrown) {
								//联网失败的回调,隐藏下拉刷新的状态
								mescroll.endErr();
								mui.toast('数据请求失败');
							}
						});
					})
				})
				//滴液更换时间
				document.getElementById("liquid").addEventListener('tap', function() {
					var year = new Date().getFullYear();
					var dtpicker = new mui.DtPicker({
						"type": "date",
						"beginYear": 1999,
						"endYear": year + 6,
					});
					dtpicker.show(function(selectItems) {
						console.log(selectItems.text)
						$.ajax({
							url: 'http://120.27.222.26/bzy_mqtt',
							type: "post",
							data: {
								"req": "liquid", //读取
								'id': equipId,
								"liquid": selectItems.text,
							},
							dataType: "json",
							beforeSend: function() {
								plus.nativeUI.showWaiting('请求中...');
							},
							complete: function() {
								plus.nativeUI.closeWaiting();
							},
							timeout: 10000, //超时时间设置为10秒；
							success: function(data) {
								headChangeFun($('#glassValue').data('time'),selectItems.text);
							},
							error: function(xhr, type, errorThrown) {
								//联网失败的回调,隐藏下拉刷新的状态
								mescroll.endErr();
								mui.toast('数据请求失败');
							}
						});
					})
				})
				
				// 过期时间
				function getNextDay(setTime, num) {
				    var date = new Date(setTime);
				    var nextDay = date.getTime() + (num * 24 * 60 * 60 * 1000);
				    var d = new Date(nextDay);
				    var datetime = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
				    return datetime;
				}

				// 相差天数
				function getSurplusDay(sDate2) {
					var newData = new Date();
					var dateSpan,
						iDays;
					sDate2 = Date.parse(sDate2);
					newData = Date.parse(newData);
					dateSpan = sDate2 - newData;
					// dateSpan = Math.abs(dateSpan);
					iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
					return iDays;
				}
				// 载玻片更换提示
				function headChangeFun(setGlassTime, setLiquidTime) {
					var glassSurplusDay = getSurplusDay(getNextDay(setGlassTime, 10));
					var liquidSurplusDay = getSurplusDay(getNextDay(setLiquidTime, 10));
					if(setGlassTime) {
						$('#glassValue').data('time',setGlassTime)
						if(glassSurplusDay < 10 && glassSurplusDay > 0) {
							$('#glassValue').html(setGlassTime+'（'+glassSurplusDay+'天过期）').css('color','#cfd51c')
						} else if(glassSurplusDay <= 0) {
							$('#glassValue').html(setGlassTime+'（已过期）').css('color','red')
						} else {
							$('#glassValue').html(setGlassTime).css('color','#333')
						}
					} else {
						$('#glassValue').data('time','')
						$('#glassValue').html('请及时设置').css('color','red')
					}
					if(setLiquidTime) {
						$('#liquidValue').data('time',setLiquidTime)
						if(liquidSurplusDay < 10 && liquidSurplusDay > 0) {
							$('#liquidValue').html(setLiquidTime+'（'+liquidSurplusDay+'天过期）').css('color','#cfd51c')
						} else if(liquidSurplusDay <= 0) {
							$('#liquidValue').html(setLiquidTime+'（已过期）').css('color','red')
						} else {
							$('#liquidValue').html(setLiquidTime).css('color','#333')
						}
					} else {
						$('#liquidValue').data('time','')
						$('#liquidValue').html('请及时设置').css('color','red')
					}
				}
				//下拉刷新的回调
				function downCallback() {
					$.ajax({
						url: 'http://120.27.222.26/app_equipmanage_detail',
						data: {
							'etype': 'bzy',
							'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) {
							bzy_status = data.bzy_status;
							console.log(JSON.stringify(data))
							//联网成功的回调,隐藏下拉刷新的状态;
//							mescroll.endSuccess(); //无参. 注意结束下拉刷新是无参的
							var equip_name = data.equip_name || '无';
							$('#equipName').html('设备名称：' + equip_name);
							$('#upl_time').html('上报时间：' + data.upl_time);
							var stat = eval('(' + data.bzy_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);
							});
							if(stat.on_off == 1) {
								$('#ds').html('开');
							} else {
								$('#ds').html('关');
							}
							
							if(data.is_online == 1) {
								$('#ws').html('在线');
							} else if(data.is_online == 0) {
								$('#ws').html('离线');
							} else {
								$('#ws').html('--');
							}
							
							if(stat.bat_sta == 0) $('#bat_sta').html('正常');
							else $('#bat_sta').html('异常');
							if(stat.usb_sta == 0) $('#usb_sta').html('正常');
							else $('#usb_sta').html('异常');
							$('#pre_temp').html(stat.pre_temp + '°C')
							var dverNum = stat.dver.split('.')[0];
							if((stat.v_bat > 30) && (dverNum == 1)){
								var v_bat = 24;
							}else{
								var v_bat = stat.v_bat;
							}
							$('#v_bat').html(v_bat + 'V')
							$('#staytime').html(stat.staytime || 0 + '（hour）')
							$('#csq').html(stat.csq)
							$('#dver').html(stat.dver)
							$('#lng').html('经：' + parseFloat(stat.lng).toFixed(4))
							$('#lat').html('纬：' + parseFloat(stat.lat).toFixed(4))
							if (data.glass) {
						        var glassValArr = data.glass.split('#');
						        var glassVal = glassValArr[glassValArr.length - 1];
						    } else {
						        var glassVal = '';
						    }
						    if (data.liquid) {
						        var liquidValArr = data.liquid.split('#');
						        var liquidVal = liquidValArr[liquidValArr.length - 1];
						    } else {
						        var liquidVal = '';
						    }
						    iccid = stat.iccid;
						    // 载玻片更换时间提示
						    headChangeFun(glassVal, liquidVal);
						},
						error: function(xhr, type, errorThrown) {
							//联网失败的回调,隐藏下拉刷新的状态
							mescroll.endErr();
							mui.toast('数据请求失败');
						}
					});
				}
				//设备详细配置
				$('#configBtn').on('tap', function() {
					mui.openWindow({
						url: 'configuration_bzy.html',
						id: 'configuration_bzy',
						extras: {
							equipId: equipId,
							status:bzy_status
						}
					})
				})
				
				//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卡号');
					}
				})

				//查询
				$('#refreshBtn').on('tap', function() {
					var id = [];
					id.push(equipId);
					mui.ajax('http://120.27.222.26/bzy_mqtt', {
						data: {
							'req': 'read',
							'topicid': JSON.stringify(id),
						},
						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>