yf_zd
/
commonApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555
							<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-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;
			}
		</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 " id="worktypebox">
					<p class="equipOption">工作模式：</p>
					<div class="mui-radio" style="width: 28%;float: left;margin-top: 5px;">
						<label>节能</label>
						<input name="worktype" type="radio" value="0" id="worktype0">
					</div>
					<div class="mui-radio" style="width: 28%;float: left;margin-top: 5px;">
						<label>常规</label>
						<input name="worktype" type="radio" value="1" id="worktype1">
					</div>
					<div class="mui-radio" style="width: 28%;float: left;margin-top: 5px;">
						<label>加强</label>
						<input name="worktype" type="radio" value="2" id="worktype2">
					</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>光控</label>
						<input name="type" type="radio" value="0" checked="checked" id="dimming">
					</div>
					<div class="mui-radio" style="width: 28%;float: left;margin-top: 5px;">
						<label>时控</label>
						<input name="type" type="radio" value="1" id="timeControl">
					</div>
				</li>
				<li class="mui-table-view-cell" id="lightPattern">
					<p class="equipOption">定时时长：</p>
					<span class="equipOptionInitVal">1</span>
					<div class="sliderDiv">
						<input type="range" min="1" max="10" step="1" data-rangeslider>
					</div>
					<span id="timingLength">1</span>
				</li>
				<li class="mui-table-view-cell mui-hidden" id="timePattern">
					<p class="equipOption">开始结束时间：</p>
					<div>
						<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>
				<li class="mui-table-view-cell">
					<p class="equipOption">落虫时间：</p>
					<span class="equipOptionInitVal">5</span>
					<div class="sliderDiv">
						<input type="range" min="5" max="20" step="1" data-rangeslider>
					</div>
					<span id="dropTime">5</span>
				</li>
				<li class="mui-table-view-cell">
					<p class="equipOption">加热时间：</p>
					<span class="equipOptionInitVal">5</span>
					<div class="sliderDiv">
						<input type="range" min="5" max="20" step="1" data-rangeslider>
					</div>
					<span id="calefactionTime">5</span>
				</li>
				<li class="mui-table-view-cell">
					<p class="equipOption">加热温度：</p>
					<span class="equipOptionInitVal">75</span>
					<div class="sliderDiv">
						<input type="range" min="75" max="120" step="1" data-rangeslider>
					</div>
					<span id="calefactionTemperature">75</span>
				</li>
				<li class="mui-table-view-cell">
					<p class="equipOption">高温保护阈值：</p>
					<span class="equipOptionInitVal">50</span>
					<div class="sliderDiv">
						<input type="range" min="50" max="70" step="1" data-rangeslider>
					</div>
					<span id="highLimit">50</span>
				</li>
				<li class="mui-table-view-cell">
					<p class="equipOption">低温保护阈值：</p>
					<span class="equipOptionInitVal">1</span>
					<div class="sliderDiv">
						<input type="range" min="1" max="10" step="1" data-rangeslider>
					</div>
					<span id="lowLimit">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">
					<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>
			</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();
		mui.plusReady(function() {
			var self = plus.webview.currentWebview();
			var equipId = self.equipId;
			document.getElementById("title").innerHTML = equipId;
			mui.ajax('http://192.168.1.11:8000/cbd_mqtt', {
				data: {
					"req": "read", //读取
					"topicid": JSON.stringify(equipId),
					"kind": "paramconf" //读取下位机状态
				},
				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("发送成功！");
						mui.ajax('http://192.168.1.11:8000/equipmanage_cbd', {
							data: {
								id: equipId,
								req: "paramconf"
							},
							dataType: 'json', //服务器返回json格式数据
							type: 'post', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							beforeSend: function() {
								plus.nativeUI.showWaiting('请求中...');
							},
							complete: function() {
								plus.nativeUI.closeWaiting();
							},
							success: function(data) {
								console.log(JSON.stringify(data))
								var dat = eval("(" + data.paramconf + ")");
								if(dat != '' && dat != null) {
									if(dat.ts == 0) {
										$('#dimming').attr("checked", "checked");
										$("#timeControl").removeAttr("checked");
										document.getElementById("lightPattern").classList.remove("mui-hidden");
										document.getElementById("timePattern").classList.add("mui-hidden");
									} else {
										$('#timeControl').attr("checked", "checked");
										$("#dimming").removeAttr("checked");
										document.getElementById("lightPattern").classList.add("mui-hidden");
										document.getElementById("timePattern").classList.remove("mui-hidden");
									}
									mui('#timingLength')[0].innerHTML = dat.tt;
									$('#timingLength').prev().find('input').val(dat.tt).change();

									mui('#begin')[0].innerHTML = dat.st;
									$('#begin').html(dat.st);

									mui('#end')[0].innerHTML = dat.et;
									$('#end').html(dat.et);

									mui('#dropTime')[0].innerHTML = dat.collt;
									$('#dropTime').prev().find('input').val(dat.collt).change();

									mui('#calefactionTime')[0].innerHTML = dat.htim;
									$('#calefactionTime').prev().find('input').val(dat.htim).change();

									mui('#calefactionTemperature')[0].innerHTML = dat.hst;
									$('#calefactionTemperature').prev().find('input').val(dat.hst).change();

									mui('#highLimit')[0].innerHTML = dat.tph;
									$('#highLimit').prev().find('input').val(dat.tph).change();

									mui('#lowLimit')[0].innerHTML = dat.tpl;
									$('#lowLimit').prev().find('input').val(dat.tpl).change();

									mui('#dataUpTime')[0].innerHTML = dat.datt;
									$('#dataUpTime').prev().find('input').val(dat.datt).change();

									mui('.mui-table-view-cell input[name="imgHvga"]:checked')[0].value = dat.imgres;
									if(dat.imgres == 0) {
										$('#highHvga').attr("checked", "checked");
										$("#middleHvga").removeAttr("checked");
										$("#lowHvga").removeAttr("checked");
									} else if(dat.imgres == 1) {
										$('#highHvga').removeAttr("checked");
										$("#middleHvga").attr("checked", "checked");
										$("#lowHvga").removeAttr("checked");
									} else {
										$('#highHvga').removeAttr("checked");
										$("#middleHvga").removeAttr("checked");
										$("#lowHvga").attr("checked", "checked");
									}
								} else {
									//slider回显
									$('input[type="range"]').val(1).change();
								}
							},
							error: function(xhr, type, errorThrown) {

							}
						});
					}
				},
				error: function(xhr, type, errorThrown) {

				}
			});
		})

		//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;

		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"
			}, ])
		}
		//开始时间选择器
		document.getElementById("pickTimeBtn").addEventListener('tap', function() {
			PopPicker()
			picker.show(function(getSelectedItems) {
				document.getElementById('begin').innerHTML = getSelectedItems[0].value;
			})
		});
		//结束时间选择器
		document.getElementById("pickTimeBtn2").addEventListener('tap', function() {
			PopPicker()
			picker.show(function(getSelectedItems) {
				document.getElementById('end').innerHTML = getSelectedItems[0].value;
			})
		});
		//时控光控对应操作显示
		mui('.mui-table-view-cell').on('change', 'input[name="type"]', function() {
			if(this.value == 0) {
				document.getElementById("lightPattern").classList.remove("mui-hidden");
				document.getElementById("timePattern").classList.add("mui-hidden");
			} else {
				document.getElementById("lightPattern").classList.add("mui-hidden");
				document.getElementById("timePattern").classList.remove("mui-hidden");
			}
		})
		//提交数据
		function sendData() {
			var id = document.getElementById("title").innerHTML,
				timing = mui('.mui-table-view-cell input[name="type"]:checked')[0].value,
				timingLength = mui('#timingLength')[0].innerHTML,
				begin = mui('#begin')[0].innerHTML,
				end = mui('#end')[0].innerHTML,
				dropTime = mui('#dropTime')[0].innerHTML,
				calefactionTime = mui('#calefactionTime')[0].innerHTML,
				calefactionTemperature = mui('#calefactionTemperature')[0].innerHTML,
				highLimit = mui('#highLimit')[0].innerHTML,
				lowLimit = mui('#lowLimit')[0].innerHTML,
				dataUpTime = mui('#dataUpTime')[0].innerHTML,
				imgHvga = mui('.mui-table-view-cell input[name="imgHvga"]:checked')[0].value;

			mui.ajax('http://192.168.1.11:8000/cbd_mqtt', {
				data: {
					req: 'set',
					id: id,
					timing: timing,
					timingLength: timingLength,
					begin: begin,
					end: end,
					dropTime: dropTime,
					calefactionTime: calefactionTime,
					calefactionTemperature: calefactionTemperature,
					highLimit: highLimit,
					lowLimit: lowLimit,
					dataUpTime: dataUpTime,
					imgHvga: imgHvga
				},
				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('配置失败！')
				}
			});
		}

		//工作模式对应操作显示
		mui('.mui-table-view-cell').on('change', 'input[name="worktype"]', function() {
			var type = this.value;
			mui.confirm('切换工作模式','是否确定',['取消','确定'],function(e){
				if (e.index == 1) {
					$.ajax({
						type: "post",
						url: 'http://192.168.1.11:8000/cbd_mqtt',
						data: {
							"req": "ctrl",//控制
							"topicid": document.getElementById("title").innerHTML,
							"cmd": 'workmode',//升级 update
							"type": type
						},
						dataType: "json",
						beforeSend: function() {
							plus.nativeUI.showWaiting('请求中...');
						},
						complete: function() {
							setTimeout(function () {
							plus.nativeUI.closeWaiting();
							}, 3000)
						},
						success: function (data) {
							setTimeout(function () {
								if(data == 0){
									mui.toast('下发成功')
								}
							}, 3000)
							
						}
					})
                }
				
			},'div')
			
		})
	</script>

</html>