yf_zd
/
commonApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552
							<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

		<link rel="stylesheet" href="../css/common.css">
		<link rel="stylesheet" href="../css/iconfont.css">
		<link rel="stylesheet" href="../css/rangeslider.css">
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<!--App自定义的css-->
		<style type="text/css">
			.mui-content>.mui-table-view:first-child {
			    margin-top: 0;
			}
			.mui-table-view-cell.mui-active {
				background-color: #fff;
			}
			
			.mui-input-range .mui-tooltip {
				display: none;
			}
			
			.mui-radio input[type=radio] {
				top: -2px;
			}
			
			.equipOption {
				color: #21B2E7 !important;
				margin-bottom: 15px;
			}
			
			.mui-checkbox input[type=checkbox]:before,
			.mui-radio input[type=radio]:before {
				font-size: 22px;
			}
			/*提交按钮*/
			
			.equipTitle {
				color: #21b2e7;
				font-size: 14px;
			}
			
			.mui-table-view-cell p {
				color: #333;
				font-size: 16px;
				margin-top: 4px;
			}
			/*单选按钮*/
			
			.mui-radio label {
				padding-right: 37px;
			}
			/*滑块*/
			
			.sliderDiv {
				width: 80%;
				display: inline-block;
			}
			
			.rangeslider--horizontal {
				height: 12px;
			}
			
			.rangeslider__fill {
				background: #7ed7ff;
			}
			
			.rangeslider__handle {
				width: 20px;
				height: 20px;
			}
			
			.rangeslider--horizontal .rangeslider__handle {
				top: -5px;
			}
			
			.rangeslider__handle:after {
				width: 8px;
				height: 8px;
			}
			
			.equipOptionInitVal {
				display: inline-block;
				width: 15px;
				text-align: right;
			}
			/*开始结束时间选择*/
			
			.timeItem {
				border: 1px solid #e6e6e6;
				margin-bottom: 5px;
				line-height: 30px;
				border-radius: 5px;
				margin-top: 5px;
			}
			
			.timeItem>button {
				border: none;
				background: #e6e6e6;
				margin-right: 10px;
			}
			.smallSpaceBox .mui-radio{
				width: 20%;
				float: left;
				margin-top: 5px;
			}
			.smallSpaceBox .mui-radio input[type=radio]{
				right: 10px;
			}
			#timePattern >div >p{
				height: 10px;
			}
		</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">11</h1>
			<a class="headRightIcon fa fa-cloud-upload mui-pull-right" onclick="sendData()">提交</a>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell smallSpaceBox">
					<p class="equipOption">设备开关：</p>
					<div class="mui-radio">
						<label>开</label>
						<input name="equipOnOff" type="radio" value="1" id="equipOn">
					</div>
					<div class="mui-radio">
						<label>关</label>
						<input name="equipOnOff" type="radio" value="0" id="equipOff">
					</div>
				</li>
				<li class="mui-table-view-cell smallSpaceBox">
					<p class="equipOption">风机开关：</p>
					<div class="mui-radio">
						<label>开</label>
						<input name="coldOnOff" type="radio" value="0" checked="checked" id="coldOn">
					</div>
					<div class="mui-radio">
						<label>关</label>
						<input name="coldOnOff" type="radio" value="1" id="coldOff">
					</div>
				</li>
				<li class="mui-table-view-cell smallSpaceBox">
					<p class="equipOption">载玻片滴液时间：</p>
					<div class="mui-radio">
						<label>1</label>
						<input name="dropTime" type="radio" value="1" id="dropTime1" checked="checked">
					</div>
					<div class="mui-radio">
						<label>2</label>
						<input name="dropTime" type="radio" value="2" id="dropTime2">
					</div>
					<div class="mui-radio">
						<label>3</label>
						<input name="dropTime" type="radio" value="3" id="dropTime3">
					</div>
					<div class="mui-radio">
						<label>4</label>
						<input name="dropTime" type="radio" value="4" id="dropTime4">
					</div>
					<div class="mui-radio">
						<label>5</label>
						<input name="dropTime" type="radio" value="5" id="dropTime5">
					</div>
				</li>
				<li class="mui-table-view-cell">
					<p class="equipOption">载玻片培养时间：</p>
					<div class="mui-radio" style="width: 28%;float: left;margin-top: 5px;">
						<label>12小时</label>
						<input name="staytime" type="radio" value="0" checked="checked" id="staytime12">
					</div>
					<div class="mui-radio" style="width: 28%;float: left;margin-top: 5px;">
						<label>24小时</label>
						<input name="staytime" type="radio" value="1" id="staytime24">
					</div>
					<div class="mui-radio" style="width: 28%;float: left;margin-top: 5px;">
						<label>48小时</label>
						<input name="staytime" type="radio" value="1" id="staytime48">
					</div>
				</li>
				<li class="mui-table-view-cell">
					<p class="equipOption">图片分辨率：</p>
					<div class="mui-radio" style="width: 28%;float: left;">
						<label>高</label>
						<input name="imgHvga" type="radio" value="0" id="highHvga" checked="checked">
					</div>
					<div class="mui-radio" style="width: 28%;float: left;">
						<label>中</label>
						<input name="imgHvga" type="radio" value="1" id="middleHvga">
					</div>
					<div class="mui-radio" style="width: 28%;float: left;">
						<label>低</label>
						<input name="imgHvga" type="radio" value="2" id="lowHvga">
					</div>
				</li>
				
				<li class="mui-table-view-cell">
					<p class="equipOption">保温仓设定温度（°C）</p>
					<span class="equipOptionInitVal">1</span>
					<div class="sliderDiv">
						<input type="range" min="10" max="40" step="1" data-rangeslider>
					</div>
					<span id="setTemp">1</span>
				</li>
				<li class="mui-table-view-cell">
					<p class="equipOption">数据上传时间间隔：</p>
					<span class="equipOptionInitVal">10</span>
					<div class="sliderDiv">
						<input type="range" min="10" max="60" step="10" data-rangeslider>
					</div>
					<span id="dataUpTime">10</span>
				</li>
				
				<li class="mui-table-view-cell" id="timePattern">
					<p class="equipOption">开始结束时间：</p>
					<div>
						<div class="timeItem">
							<button id='pickTimeBtn' type="button" class="mui-btn">开始时间</button><span id="begin1"></span>
						</div>
						<div class="timeItem">
							<button id='pickTimeBtn2' type="button" class="mui-btn">结束时间</button><span id="end1"></span>
						</div>
						<p></p>
						<div class="timeItem">
							<button id='pickTimeBtn3' type="button" class="mui-btn">开始时间</button><span id="begin2"></span>
						</div>
						<div class="timeItem">
							<button id='pickTimeBtn4' type="button" class="mui-btn">结束时间</button><span id="end2"></span>
						</div>
						<p></p>
						<div class="timeItem">
							<button id='pickTimeBtn5' type="button" class="mui-btn">开始时间</button><span id="begin3"></span>
						</div>
						<div class="timeItem">
							<button id='pickTimeBtn6' type="button" class="mui-btn">结束时间</button><span id="end3"></span>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/rangeslider.js"></script>
	<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/common.js"></script>
	<script>
		mui.init();
		var equipId,bzy_status;
		mui.plusReady(function() {
//			alert(1)
			var self = plus.webview.currentWebview();
			equipId = self.equipId;
			bzy_status = self.status;
			document.getElementById("title").innerHTML = equipId;
			var status = eval('('+bzy_status+')');
			if(status.on_off == 1){				
				$('#equipOn').prop('checked',true);
			}else{
				$('#equipOff').prop('checked',true);
			}
			if(status.cold_sw == 1){				
				$('#coldOn').prop('checked',true);
			}else{
				$('#coldOff').prop('checked',true);
			}
			if(status.drop_time == 1){				
				$('#dropTime1').prop('checked',true);
			}else if(status.drop_time == 2){
				$('#dropTime2').prop('checked',true);
			}else if(status.drop_time == 3){
				$('#dropTime3').prop('checked',true);
			}else if(status.drop_time == 4){
				$('#dropTime4').prop('checked',true);
			}else if(status.drop_time == 5){
				$('#dropTime5').prop('checked',true);
			}
			if(status.cul_time == 12){				
				$('#staytime12').prop('checked',true);
			}else if(status.drop_time == 24){
				$('#staytime24').prop('checked',true);
			}else if(status.drop_time == 48){
				$('#staytime48').prop('checked',true);
			}
			if(status.imgres == 0){				
				$('#highHvga').prop('checked',true);
			}else if(status.drop_time == 1){
				$('#middleHvga').prop('checked',true);
			}else if(status.drop_time == 3){
				$('#lowHvga').prop('checked',true);
			}
			mui('#setTemp')[0].innerHTML = status.set_temp;
			$('#setTemp').prev().find('input').val(status.set_temp).change();
			mui('#dataUpTime')[0].innerHTML = status.datt;
			$('#dataUpTime').prev().find('input').val(status.datt).change();
//			"coll_time":["8-9","11-12","23-24"],
			var colltime = [];
			for(var i = 0;i<status.coll_time.length;i++){
				var tim = status.coll_time[i].split('-');
				colltime.push(tim[0]);
				colltime.push(tim[1]);
				if(i == status.coll_time.length-1){
					$('#begin1').html(colltime[0]+':00');
					currStartNum1 = colltime[0]
					$('#end1').html(colltime[1]+':00');
					currStartNum2 = colltime[1]
					$('#begin2').html(colltime[2]+':00');
					currStartNum3 = colltime[2]
					$('#end2').html(colltime[3]+':00');
					currStartNum4 = colltime[3]
					$('#begin3').html(colltime[4]+':00');
					currStartNum5 = colltime[4]
					$('#end3').html(colltime[5]+':00');
					currStartNum6 = colltime[5]
				}
			}
			
			//设备开关
			$('input[name = "equipOnOff"]').on('tap',function(){
				var txt;
				if($(this).prop('checked')){
					return;
				}
				if($(this).val() == 0){
					txt = '关闭'
				}else{
					txt = '开启'
				}
				var currvalue = $(this).val();
				mui.confirm('是否'+txt+'设备？','信息',['确定','取消'],function(){
					$.ajax({
						url: 'http://120.27.222.26/bzy_mqtt',
						type: "post",
						data: {
							'req': 'on_off',
		                    'id': equipId,
		                    'on_off': currvalue,
						},
						dataType: "json",
						beforeSend: function() {
							plus.nativeUI.showWaiting('请求中...');
						},
						complete: function() {
							plus.nativeUI.closeWaiting();
						},
						timeout: 10000, //超时时间设置为10秒；
						success: function(data) {
							mui.toast(txt+'成功！');
						},
						error: function(xhr, type, errorThrown) {
							//联网失败的回调,隐藏下拉刷新的状态
							plus.nativeUI.closeWaiting();
							if(currvalue == 0){
								$('#equipOn').prop('checked',true);
							}else{
								$('#equipOff').prop('checked',true);
							}
							
							mui.toast(txt+'失败！');
						}
					});
				})
			})
			//风机开关
			$('input[name = "coldOnOff"]').on('tap',function(){
				var txt;
				if($(this).prop('checked')){
					return;
				}
				if($(this).val() == 0){
					txt = '关闭'
				}else{
					txt = '开启'
				}
				var currvalue = $(this).val();
				sendData()
			})
		})
		//提交配置
		function sendData(){
			var coldOnOff = $('input[name = "coldOnOff"]:checked').val();
			var dropTime = $('input[name = "dropTime"]:checked').val();
			var staytime = $('input[name = "staytime"]:checked').val();
			var imgHvga = $('input[name = "imgHvga"]:checked').val();
			var setTemp = $('#setTemp').html(); 
			var dataUpTime = $('#dataUpTime').html(); 
			var colltime = [];
			var selectVal1 = [];
			selectVal1.push(currStartNum1)
			selectVal1.push(currStartNum2)
			var time1 = selectVal1.join('-');
			var selectVal2 = [];
			selectVal2.push(currStartNum3)
			selectVal2.push(currStartNum4)
			var time2 = selectVal2.join('-');
			var selectVal3 = [];
			selectVal3.push(currStartNum5)
			selectVal3.push(currStartNum6)
			var time3 = selectVal3.join('-');
			colltime.push(time1)
			colltime.push(time2)
			colltime.push(time3)
			mui.ajax('http://120.27.222.26/bzy_mqtt',{
				data:{
					'req': 'set',
					'id': equipId,
					'wind': coldOnOff,
					'drop': dropTime,
					'culTime': staytime,
					'imgres': imgHvga,
					'stemp': setTemp,
					'takt': dataUpTime,
					'colltime': JSON.stringify(colltime)
				},
				dataType:'json',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				beforeSend: function() {
					plus.nativeUI.showWaiting('请求中...');
				},
				complete: function() {
					plus.nativeUI.closeWaiting();
				},
				success:function(data){
					mui.toast('配置成功！')
				},
				error:function(xhr,type,errorThrown){
					mui.toast('配置失败！')
				}
			});
		}

		//slider初始化
		$('input[type="range"]').rangeslider({
			polyfill: false
		});
		//获取slider
		var $document = $(document);
		var selector = '[data-rangeslider]';
		var $inputRange = $(selector);
		// 获取slider值
		$document.on('input', selector, function(e) {
			valueOutput(e.target);
		});
		// 将对应值写入对应文本框
		function valueOutput(element) {
			var value = element.value;
			var output = element.parentNode.nextElementSibling;
			output.innerHTML = value;
		}
		
		//自定义时间值
		var picker;
		var currStartNum1 = 0,currStartNum2 = 0,currStartNum3 = 0,currStartNum4 = 0,currStartNum5 = 0,currStartNum6 = 0;
		
		function PopPickerNum(startnum,endnum){
			picker = new mui.PopPicker();
			var array=[];
			for(var i = startnum;i<endnum;i++){
				var data = {
					value:i,
					text:i+':00',
				}
				array.push(data);
				if(i == endnum-1){
					picker.setData(array);
				}
			}
		}

		function PopPicker() {
			picker = new mui.PopPicker();
			picker.setData([ {
				value: "1",
				text: "1"
			},])
		}
		//开始时间选择器
		document.getElementById("pickTimeBtn").addEventListener('tap', function() {
			PopPickerNum(1,25)
			picker.show(function(getSelectedItems) {
				document.getElementById('begin1').innerHTML = getSelectedItems[0].text;
				currStartNum1 = getSelectedItems[0].value
				document.getElementById('end1').innerHTML = getSelectedItems[0].text;
				document.getElementById('begin2').innerHTML = getSelectedItems[0].text;
				document.getElementById('end2').innerHTML = getSelectedItems[0].text;
				document.getElementById('begin3').innerHTML = getSelectedItems[0].text;
				document.getElementById('end3').innerHTML = getSelectedItems[0].text;
			})
		});
		//结束时间选择器
		document.getElementById("pickTimeBtn2").addEventListener('tap', function() {
			PopPickerNum(currStartNum1,25)
			picker.show(function(getSelectedItems) {
				document.getElementById('end1').innerHTML = getSelectedItems[0].text;
				currStartNum2 = getSelectedItems[0].value
				document.getElementById('begin2').innerHTML = getSelectedItems[0].text;
				document.getElementById('end2').innerHTML = getSelectedItems[0].text;
				document.getElementById('begin3').innerHTML = getSelectedItems[0].text;
				document.getElementById('end3').innerHTML = getSelectedItems[0].text;
			})
		});
		document.getElementById("pickTimeBtn3").addEventListener('tap', function() {
			PopPickerNum(currStartNum2,25)
			picker.show(function(getSelectedItems) {
				document.getElementById('begin2').innerHTML = getSelectedItems[0].text;
				currStartNum3 = getSelectedItems[0].value
				document.getElementById('end2').innerHTML = getSelectedItems[0].text;
				document.getElementById('begin3').innerHTML = getSelectedItems[0].text;
				document.getElementById('end3').innerHTML = getSelectedItems[0].text;
			})
		});
		document.getElementById("pickTimeBtn4").addEventListener('tap', function() {
			PopPickerNum(currStartNum3,25)
			picker.show(function(getSelectedItems) {
				document.getElementById('end2').innerHTML = getSelectedItems[0].text;
				currStartNum4 = getSelectedItems[0].value
				document.getElementById('begin3').innerHTML = getSelectedItems[0].text;
				document.getElementById('end3').innerHTML = getSelectedItems[0].text;
			})
		});
		document.getElementById("pickTimeBtn5").addEventListener('tap', function() {
			PopPickerNum(currStartNum4,25)
			picker.show(function(getSelectedItems) {
				document.getElementById('begin3').innerHTML = getSelectedItems[0].text;
				currStartNum5 = getSelectedItems[0].value
				document.getElementById('end3').innerHTML = getSelectedItems[0].text;
			})
		});
		document.getElementById("pickTimeBtn6").addEventListener('tap', function() {
			PopPickerNum(currStartNum5,25)
			picker.show(function(getSelectedItems) {
				document.getElementById('end3').innerHTML = getSelectedItems[0].text;
				currStartNum6 = getSelectedItems[0].value
			})
		});
		
	</script>

</html>