yf_zd
/
commonApp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442
							<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" href="http://www.yfzhwlw.com/static/lib/css/jquery-ui.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-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;
			}
			/*滑块*/
			.sliderParent{
				display: flex;
				align-items: center;
			}
			.sliderParent >div{
				flex: 1;
				margin: 0 10px;
			}
			
			/*.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;
			}
			/*滑块颜色*/
			.ui-widget-content{
				background: #e0e0e0;
			}
			.ui-widget-header{
				background: #21b2e7;
			}
			/*开始结束时间选择*/
			
			.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;
			}
		</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-cloud-upload mui-pull-right" onclick="sendData()">提交</a>-->
		</header>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<p class="equipOption">数据上传时间间隔：</p>
					<div class="sliderParent">
						<span class="equipOptionInitVal">10</span>
							<div class="sliderDiv">
								<div class="slider" id="dropTime-slider"></div>
							</div>
						<span id="dropTime">120</span>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<p class="equipOption">卷粘虫板时间：</p>
					<div class="sliderParent">
						<span class="equipOptionInitVal">0</span>
							<div class="sliderDiv">
								<div class="slider" id="armyworm-slider"></div>
							</div>
						<span id="armyworm">23</span>
					</div>
				</li>
				
				<!--<li class="mui-table-view-cell">
					<p class="equipOption">卷粘虫板时间：</p>
					<span class="equipOptionInitVal">0</span>
					<div class="sliderDiv">
						<input type="range" min="0" max="23" step="1" data-rangeslider>
					</div>
					<span id="calefactionTime">0</span>
				</li>-->
				<li class="mui-table-view-cell" id="timePattern">
					<p class="equipOption">定时拍照循环工作时间：</p>
					<div class="">
						<div class="timeItem">
							<button id='pickTimeBtn' type="button" class="mui-btn">开始时间</button><span id="begin"></span>
						</div>
						<div class="timeItem">
							<button id='pickTimeBtn2' type="button" class="mui-btn">拍照间隔</button><span id="end"></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="http://www.yfzhwlw.com/static/lib/js/jquery-ui.min.js"></script>
	<script src="http://www.yfzhwlw.com/static/lib/js/jquery.ui.touch-punch.min.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;
		var confDatF;
		var confTurnT;
		var confPicT;
		var confPicF;
		mui.plusReady(function() {
			var self = plus.webview.currentWebview();
			equipId = self.equipId;
			confDatF = self.confDatF || 10;
			confTurnT = self.confTurnT || 0;
			confPicT = self.confPicT || 0;
			confPicF = self.confPicF || 1;
			document.getElementById("title").innerHTML = equipId;
			// 数据上传时间间隔
		     $("#dropTime-slider").css('width', '100%').slider({
		        value: confDatF,
		        range: "min",
		        min: 10,
		        max: 120,
		        step: 10,
		        slide: function (event, ui) {
		          	var val = parseInt(ui.value);
		          	$('#dropTime').html(val);
		        },
		        stop: function( event, ui ) {
			        console.log(ui.value)
			        $('#dropTime').html(ui.value);
			        mui.confirm('是否修改数据上传时间?','上报时间',['取消','确定'],function(e){
			        	console.log(e.index)
			        	if (e.index == 1) {
			        		//预留
//	                        var data = {
//				                ext:'turnset',
//				                turn_t:ui.value,
//				            }
//		                    sendCtrlFun(data,function(){
//				                confDatF = ui.value;
//				            })
	                    }else{
	                    	$("#dropTime-slider").slider('value', confDatF); 
				      		$('#dropTime').html(confDatF);
	                    }
			        },'div')
		        	
		        }
		    });
		    $('#dropTime').html(confDatF);
		    // 卷粘虫板时间
		     $("#armyworm-slider").css('width', '100%').slider({
		        value: confTurnT,
		        range: "min",
		        min: 0,
		        max: 23,
		        step: 1,
		        slide: function (event, ui) {
		          var val = parseInt(ui.value);
		          $('#armyworm').html(val);
		        },
		        stop: function( event, ui ) {
		          	console.log(ui.value)
		          	$('#armyworm').html(ui.value);
		         	mui.confirm('是否修改卷粘虫板时间?','上报时间',['取消','确定'],function(e){
			        	console.log(e.index)
			        	if (e.index == 1) {
	                        var data = {
				                ext:'turnset',
				                turn_t:ui.value,
				            }
		                    sendCtrlFun(data,function(){
				                confTurnT = ui.value;
				            })
	                    }else{
	                    	$("#armyworm-slider").slider('value', confTurnT); 
				      		$('#armyworm').html(confTurnT);
	                    }
			        },'div')
		        }
		    });
		    $('#armyworm').html(confTurnT);
			mui('#begin')[0].innerHTML = confPicT;
			mui('#end')[0].innerHTML = confPicF;
		})
		
		function sendCtrlFun(data,callback){
	        data.e_id = equipId;
	        mui.ajax('http://120.27.222.26/sex_mqtt', {
	          type:'post',
	          data:data,
	          success:function(data){
	            if(data == 0){
	              callback();
	            }
	          },
	          error:function(type){
	            console.log(type)
	          }
	        })
	    }


		// 将对应值写入对应文本框
		function valueOutput(element) {
			var value = element.value;
			var output = element.parentNode.nextElementSibling;
			output.innerHTML = value;
		}
		//自定义时间值
		var picker;

		function PopPicker() {
			picker = new mui.PopPicker();
			picker.setData([{
				value: "0",
				text: "0"
			}, {
				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"
			}, {
				value: "8",
				text: "8"
			}, {
				value: "9",
				text: "9"
			}, {
				value: "10",
				text: "10"
			}, {
				value: "11",
				text: "11"
			}, {
				value: "12",
				text: "12"
			}, {
				value: "13",
				text: "13"
			}, {
				value: "14",
				text: "14"
			}, {
				value: "15",
				text: "15"
			}, {
				value: "16",
				text: "16"
			}, {
				value: "17",
				text: "17"
			}, {
				value: "18",
				text: "18"
			}, {
				value: "19",
				text: "19"
			}, {
				value: "20",
				text: "20"
			}, {
				value: "21",
				text: "21"
			}, {
				value: "22",
				text: "22"
			}, {
				value: "23",
				text: "23"
			}, ])
		}
		function PopPicker2() {
			picker = new mui.PopPicker();
			picker.setData([{
				value: "1",
				text: "1"
			},{
				value: "2",
				text: "2"
			}, {
				value: "3",
				text: "3"
			}, {
				value: "4",
				text: "4"
			}, {
				value: "6",
				text: "6"
			}, {
				value: "8",
				text: "8"
			}, {
				value: "12",
				text: "12"
			}, {
				value: "24",
				text: "24"
			}])
		}
		//开始时间选择器
		document.getElementById("pickTimeBtn").addEventListener('tap', function() {
			PopPicker()
			picker.show(function(getSelectedItems) {
				document.getElementById('begin').innerHTML = getSelectedItems[0].value;
				var begin = mui('#begin')[0].innerHTML;
				var end = mui('#end')[0].innerHTML;
				if(begin && end){
					var data = {
			            ext:'photoset',
			            pic_t:begin,
			            pic_f:end,
			        }
			        sendCtrlFun(data,function(){
			          	confPicT = begin
			          	confPicF = end
			        })
				}
			})
		});
		//结束时间选择器
		document.getElementById("pickTimeBtn2").addEventListener('tap', function() {
			PopPicker2()
			picker.show(function(getSelectedItems) {
				document.getElementById('end').innerHTML = getSelectedItems[0].value;
				var begin = mui('#begin')[0].innerHTML;
				var end = mui('#end')[0].innerHTML;
				if(begin && end){
					var data = {
			            ext:'photoset',
			            pic_t:begin,
			            pic_f:end,
			        }
			        sendCtrlFun(data,function(){
			          	confPicT = begin
			          	confPicF = end
			        })
				}
			})
		});
	</script>

</html>