yf_zd
/
commonApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392
							<!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;
				/*background: #65b83b;
			    box-shadow: 1px 1px 4px 1px #d1ffba;
			    border: 1px solid #65b83b;*/
			}
			
			.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 ,.hinttxt{
				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="starttime" value="" />
						</p>
						<p><span class="hinttxt">*</span>工作时长（0-23）</p>
					</li>
					<li class="mui-table-view-cell">
						<span class="equipTitle">工作时长</span>
						<p id="lowerInput">
							<input type="number" name="" id="duration" value="" />
						</p>
						<p><span class="hinttxt">*</span>工作时长（1-24）</p>
					</li>
				</ul>
				<div id="sendThreshold">
					<input type="hidden" name="jkcode" id="jkcode" 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, timingList, conf,switch_name,qxz_switch,qxzDat;
			mui.init();
			var allData = [];
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				equipId = self.equipId;
				timingList = self.timing_list;
				conf = self.conf;
				qxz_switch = self.qxz_switch;
				switch_name = self.switch_name;
				qxzDat = self.qxzDat;
				var html = '';
				for(var i = 0; i < timingList.length; i++) {
					// 开关名 
					if (timingList[i].JK == qxz_switch[i].JK) {
						if(switch_name.length){							
							var name = switch_name[i].name;
						}else{
							var name = '开关'+qxz_switch[i].name;
						}
					} else {
						var name = timingList[i].JK;
					}
					if(timingList[i].JK != 255) {	
						var ekeyNum = timingList[i].JK+1;
						var ekey = 'e'+ ekeyNum;
						var eNum = qxzDat[ekey].split('#')[1];
						var unitTxt = 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(timingList[i]) + '\' />' +
							'<div class="thresholdCtrlName"><p>' + name+ '（通道' + ekeyNum + '）</p></div>' +
							'<div class="thresholdCtrlShowDiv"><div class="qxys">' +
							'<div><img src="http://www.yfzhwlw.com/static/img/dev/icon_' + eNum + '.png" alt=""></div>';
						if(!(timingList[i].StartTime == 32767 || timingList[i].Duration == 32767)) {
							html += '<div>' + unitTxt+unit + '</div></div><div class="maxminNum"><p>起始时间：<span>' + timingList[i].StartTime + '</span></p>' +
									'<p>工作时长：<span>' + timingList[i].Duration + '</span></p></div></div><div class="equipCtrlInp">'+
									'<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>' + unitTxt+unit + '</div></div><div class="maxminNum"><p>起始时间：<span>--</span></p>' +
									'<p>工作时长：<span>--</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>';
						}	
						
					}
					
					if(i == timingList.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);
				$('#starttime').val(currVal.StartTime)
				$('#duration').val(currVal.Duration)
				$('#jkcode').val(currVal.JK)

				var mask = mui.createMask(function() {
					$('#setthresholdModel').css('height', 0);
				}); //callback为用户点击蒙版时自动执行的回调；
				$('#setthresholdModel').css('height', '380px');
				mask.show(); //显示遮罩

			}

			//发送设置阈值
			function sendData() {
				var starttime = $('#starttime').val();
				var duration = $('#duration').val();
				var jkcode = $('#jkcode').val();
				var datajson = {
					"JK": jkcode,
					"StartTime": starttime,
					"Duration": duration,
					"equip_id":equipId
				}
				
				if(0 > starttime || starttime > 23) {
					mui.toast('起始时间不符！')
					return false;
				} else if(1 > duration || duration > 24) {
					mui.toast('工作时长不符！')
					return false;
				} else {
					$.ajax({
						url: 'http://120.27.222.26/qxz_timing_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.StartTime) //最大值
							currobjEle.parent().find('.maxminNum').find('p').eq(1).find('span').html(datajson.Duration) //最小值
							currobjEle.parents('.thresholdCtrl').find('.mui-switch').addClass('mui-active'); //开启阈值
							currobjEle.parents('.thresholdCtrl').find('.mui-switch').children().css('transform','translate(42px, 0px)')
							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(data.StartTime == 32767 || data.Duration == 32767){
					if(event.originalEvent.detail.isActive) {
						$(this).removeClass('mui-active');
						$(this).children().css('transform','translate(0px, 0px)')
					} else {
						//你关闭了开关
						data.upper = 32767;
						data.lower = 32767;
						$(this).addClass('mui-active');
						$(this).children().css('transform','translate(42px, 0px)')
					}
					
					setthresholdFun($(this).parents('.thresholdCtrl').find('.setthresholdBtn'))
					return false;
				}
				if(event.originalEvent.detail.isActive) {

				} else {
					//你关闭了开关
					data.StartTime = 32767;
					data.Duration = 32767;
				}
				$.ajax({
					url: 'http://120.27.222.26/qxz_timing_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();

			}
		</script>
	</body>

</html>