yf_zd
/
commonApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404
							<!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/reset.css" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<script src="../js/base.js" type="text/javascript" charset="utf-8"></script>
		<link href="../css/common.css" rel="stylesheet" />
		<style type="text/css">
			/*body,.mui-content {
				background: #fff;
			}*/
			
			.qxMsg {
				margin: 10px 20px;
				/*background: pink;*/
			}
			
			.qxMsg>li {
				margin-bottom: .4rem;
			}
			
			.thresholdCtrl {
				background: #4ab8e8;
				border-radius: 5px;
				color: #fff;
				box-shadow: 1px 1px 4px 1px #98dbf8;
				border: 1px solid #98dbf8;
				padding: 5px 10px;
				cursor: pointer;
				position: relative;
			}
			
			.thresholdCtrl::before {
				position: absolute;
				content: '';
				bottom: 0;
				left: 0;
				right: 0;
				height: 30%;
				background: rgba(255, 255, 255, 0.5);
			}
			
			.setthresholdBtn {
				position: absolute;
				right: 13px;
				top: 12px;
				font-size: 20px;
			}
			
			.thresholdCtrlName {
				line-height: 30px;
			}
			
			.thresholdCtrlName p,
			.maxminNum p {
				color: #fff;
				font-size: 16px;
			}
			
			.thresholdCtrlShowDiv {
				overflow: hidden;
				margin: 11px 0;
			}
			
			.thresholdCtrlShowDiv>div {
				float: left;
			}
			
			.qxys img {
				width: 47px;
			}
			
			.maxminNum {
				font-size: 18px;
				line-height: 30px;
				padding-left: 7%;
			}
			
			.equipCtrlInp {
				margin-top: 20px;
				text-align: right;
			}
			
			.equipCtrlInp>div {
				display: inline-block;
			}
			
			.mui-switch:before {
				content: '关闭';
			}
			
			.mui-switch.mui-active:before {
				content: '开启';
				left: 9px;
			}
			/*设置阈值弹出框*/
			
			#setthresholdModel {
				height: 0;
				z-index: 999;
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				background: #fff;
				border-radius: 3px 3px 0 0;
				transition: all .3s;
			}
			
			#method {
				height: 45px;
			}
			
			#method>div {
				width: 45%;
				position: absolute;
			}
			
			.secondInp {
				left: 50%;
			}
			
			#sendThreshold {
				padding: 20px;
				text-align: right;
			}
			
			#setthresholdModel>h2 {
				font-size: 16px;
				line-height: 30px;
				padding-left: 15px;
				color: #24b2e7;
			}
			
			.hint span {
				color: red;
			}
		</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>
		</header>
		<div class="mui-content">
			<ul class="qxMsg">
				<!--<li class="qxitem">
					<div class="thresholdCtrl">
						<div class="setthresholdBtn">
							<span class="mui-icon mui-icon-gear"></span>
						</div>
						<input type="hidden" name="" class="currVal" value="{" JK ":1,"eKey ":1,"upper ":700,"lower ":300,"method ":1}" />
						<div class="thresholdCtrlName">
							<p>开关1（通道1）</p>
						</div>
						<div class="thresholdCtrlShowDiv">
							<div class="qxys">
								<div><img src="http://www.yfzhwlw.com/static/img/dev/icon_104.png" alt=""></div>
								<div>雨量</div>
							</div>
							<div class="maxminNum">
								<p>最大值：<span>700</span></p>
								<p>最小值：<span>300</span></p>
							</div>
						</div>
						<div class="equipCtrlInp">
							<div class="">
								<div class="mui-switch mui-switch-blue">
									<div class="mui-switch-handle"></div>
								</div>
							</div>
						</div>
					</div>
				</li>-->

			</ul>
			<div id="setthresholdModel" class="">
				<h2>阈值设置</h2>
				<ul class="mui-table-view" id="user">
					<li class="mui-table-view-cell">
						<span class="equipTitle">最大值</span>
						<p id="upperInput">
							<input type="number" name="" id="upperInp" value="" />
						</p>
					</li>
					<li class="mui-table-view-cell">
						<span class="equipTitle">最小值</span>
						<p id="lowerInput">
							<input type="number" name="" id="lowerInp" value="" />
						</p>
					</li>
					<li class="mui-table-view-cell">
						<span class="equipTitle">规则</span>
						<div id="method">
							<div class="mui-input-row mui-radio firstInp">
								<label>程序一</label>
								<input name="method" class="redioinp1" type="radio" onclick="switchoverFun(this)" checked="checked" value="1">
							</div>
							<div class="mui-input-row mui-radio secondInp">
								<label>程序二</label>
								<input name="method" class="redioinp1" type="radio" onclick="switchoverFun(this)" value="0">
							</div>
						</div>
						<p class="hint">低于下限 <span>开启</span>,高于上限<span>关闭</span></p>
					</li>
				</ul>
				<div id="sendThreshold">
					<input type="hidden" name="jkcode" id="jkcode" value="" />
					<input type="hidden" name="eKeycode" id="eKeycode" value="" />
					<button type="button" class="mui-btn mui-btn-primary" onclick="sendData()">确定</button>
					<button type="button" class="mui-btn" onclick="cancelFun()">取消</button>
				</div>
			</div>
		</div>

		<script src="../js/jquery-2.1.0.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/common.js"></script>
		<script src="120.27.222.26/static/js/reportmanage/qxz_dict.js"></script>
		<script type="text/javascript">
			var equipId,autoList, conf,switch_name,qxz_switch,qxzDat;
			mui.init();
			var allData = [];
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				equipId = self.equipId;
				autoList = self.auto_list;
				conf = self.conf;
				qxz_switch = self.qxz_switch;
				switch_name = self.switch_name;
				qxzDat = self.qxzDat;
				var html = '';
				console.log(JSON.stringify(autoList));
				for(var i = 0; i < autoList.length; i++) {
					// 开关名 
					if (autoList[i].JK == qxz_switch[i].JK) {
						if(switch_name[i].name){							
							var name = switch_name[i].name;
						}else{
							var name = '开关：'+qxz_switch[i].JK;
						}
					} else {
						var name = autoList[i].JK;
					}
					if(autoList[i].JK != 255) {
						var keyNum = autoList[i].eKey;
						var ekey = 'e'+(keyNum+1);
						var eNum = qxzDat[ekey].split('#')[1];
						var uitTxt = conf[ekey].split('#')[0];
						var unit = conf[ekey].split('#')[1];
						html += '<li class="qxitem"><div class="thresholdCtrl">' +
							'<div class="setthresholdBtn" onclick="setthresholdFun(this)"><span class="mui-icon mui-icon-gear"></span>' +
							'</div><input type="hidden" name="" class="currVal" value=\'' + JSON.stringify(autoList[i]) + '\' />' +
							'<div class="thresholdCtrlName"><p>' + name+ '（通道' + keyNum + '）</p></div>' +
							'<div class="thresholdCtrlShowDiv"><div class="qxys">' +
							'<div><img src="http://www.yfzhwlw.com/static/img/dev/icon_' + eNum + '.png" alt=""></div>' +
							'<div>' + uitTxt+unit + '</div></div><div class="maxminNum"><p>最大值：<span>' + autoList[i].upper + '</span></p>' +
							'<p>最小值：<span>' + autoList[i].lower + '</span></p></div></div><div class="equipCtrlInp">';
						if(!(autoList[i].upper == 32767 || autoList[i].lower == 32767)) {
							html += '<div class=""><div class="mui-switch mui-switch-blue mui-active">' +
								'<div class="mui-switch-handle"></div></div></div></div></div></li>';
						} else {
							html += '<div class=""><div class="mui-switch mui-switch-blue">' +
								'<div class="mui-switch-handle"></div></div></div></div></div></li>';
						}

						
					}
					console.log(html)
					if(i == autoList.length - 1) {
						$('.qxMsg').html(html);
						console.log(html)
						mui('.mui-switch')['switch']();
					}
				}

			})
			// 设置阈值
			var currNextEle;
			var currobjEle;

			function setthresholdFun(ele) {
				var obj = $(ele);
				currobjEle = $(ele);
				currNextEle = obj.next();
				var currValstr = obj.next().val();
				var currVal = eval('(' + currValstr + ')');
				console.log(currValstr);
				$('#upperInp').val(currVal.upper)
				$('#lowerInp').val(currVal.lower)
				$('#jkcode').val(currVal.JK)
				$('#eKeycode').val(currVal.eKey)
				if(currVal.method == 0) {
					$("input[name='method'][value=0]").prop('checked', 'checked');
					$('.hint').html('低于下限 <span>开启</span>,高于上限<span>关闭</span>');
				} else {
					$("input[name='method'][value=1]").prop('checked', 'checked');
					$('.hint').html('低于下限 <span>关闭</span>,高于上限<span>开启</span>');
				}
				console.log($("input[name='method']"));
				var mask = mui.createMask(function() {
					$('#setthresholdModel').css('height', 0);
				}); //callback为用户点击蒙版时自动执行的回调；
				$('#setthresholdModel').css('height', '417px');
				mask.show(); //显示遮罩

			}

			//发送设置阈值
			function sendData() {
				var upper = $('#upperInp').val();
				var lower = $('#lowerInp').val();
				var method = $("input[name='method']:checked").val();
				var jkcode = $('#jkcode').val();
				var eKeycode = $('#eKeycode').val();
				var datajson = {
					"JK": jkcode,
					"eKey": eKeycode,
					"upper": upper,
					"lower": lower,
					"method": method,
					"equip_id":equipId
				}

				if(parseFloat(lower) > parseFloat(upper)) {
					mui.toast('最小值不能大于最大值')
					return false;
				} else {
					$.ajax({
						url: 'http://120.27.222.26/qxz_value_mqtt',
						type: 'post',
						data: datajson,
						success: function(data) {
							currNextEle.val(JSON.stringify(datajson));
							cancelFun()
							mui.toast('设置成功');
							currobjEle.parent().find('.maxminNum').find('p').eq(0).find('span').html(datajson.upper) //最大值
							currobjEle.parent().find('.maxminNum').find('p').eq(1).find('span').html(datajson.lower) //最小值
							currobjEle.parents('.thresholdCtrl').find('.mui-switch').addClass('mui-active'); //开启阈值
							mui('.mui-switch')['switch']()
						},
						error: function(type) {
							mui.toast('设置失败');
						}
					})
				}

			}

			$('.qxMsg').on('toggle', '.mui-switch', function(event) {
				//console.log(event);
				var currobj = $(event.target);
				var currVal = $(event.target).parents('li').find('.currVal').val();
				var data = eval('(' + currVal + ')');
				if(event.originalEvent.detail.isActive) {

				} else {
					//你关闭了开关
					data.upper = 32767;
					data.lower = 32767;
				}
				$.ajax({
					url: 'http://120.27.222.26/qxz_value_mqtt',
					type: 'post',
					data: data,
					success: function(data) {
						mui.toast('设置成功');

					},
					error: function(type) {
						mui.toast('设置失败');
					}
				})
			})
			//取消
			function cancelFun() {
				var mask = mui.createMask(function() {
					$('#setthresholdModel').css('height', 0);
					$('.mui-backdrop').remove();
				});
				mask.close();

			}
			//redio切换
			function switchoverFun(obj) {
				if($(obj).val() == 1) {
					$("input[name='method'][value=1]").prop('checked', 'checked');
					$('.hint').html('低于下限 <span>开启</span>,高于上限<span>关闭</span>');
				} else {
					$("input[name='method'][value=0]").prop('checked', 'checked');
					$('.hint').html('低于下限 <span>关闭</span>,高于上限<span>开启</span>');
				}
			}
		</script>
	</body>

</html>