yf_zd
/
qxzSy


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712
							{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<link href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
	<link rel="stylesheet" href="{% static 'assetsDemo/css/fonts.googleapis.com.css' %}" />
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<link rel="stylesheet" href="{% static '/assetsDemo/css/ace.min.css' %}" class="ace-main-stylesheet" id="main-ace-style"
	/>
	<!-- <link rel="stylesheet" href="{% static '/assetsDemo/css/ace-skins.min.css' %}"> -->
	<!-- <link rel="stylesheet" href="{% static '/assetsDemo/css/ace-rtl.min.css' %}"> -->
	<link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
	<link rel="stylesheet" href="{% static '/css/loading.css' %}?versions=0.5.4" />
	<!-- <link rel="stylesheet" href="{% static '/assetsDemo/css/jquery-ui.min.css' %}" /> -->

	<style type="text/css">
		body {
			overflow: hidden;
			background: #fff;
		}

		.userinfo .fa {
			font-size: 18px;
			color: #26b3ff;
			margin: 0px 5px;
		}

		.ui-slider .ui-slider-handle {
			width: 1.4em;
			height: 1.4em;
			border-radius: 50%;
		}

		.ui-slider {
			background: #fff;
		}

		.userinfoTitle {
			margin-right: 30px;
			font-size: 16px;
		}

		.refresh {
			text-align: right;
		}

		.refresh button {
			padding: 2px 5px;
			border-radius: 5px;
		}

		/* .userinfo{
			margin-bottom: 15px !important;
		} */

		/*  */

		.row {
			margin: 0;
		}

		.equiptypeicon {
			float: left;
			width: 60px;
			margin-left: 20%;
		}

		.equipInfo {
			margin: 20px 0;
		}

		.equipInfo .row {
			margin: 0 13px;
			box-shadow: 0 0 40px #eee;
			padding: 30px;
		}

		.equipInfo .row>div {
			height: 52px;
			text-align: center;
			border-left: 1px solid #eee;
		}

		.equipInfo .row .txt {
			position: absolute;
			left: 105px;
		}

		.equipInfo .row>div:first-child {
			border-left: none;
		}

		.typeResult {
			font-size: 18px;
			line-height: 30px;
		}

		.typeTitle {
			color: #666;
		}

		@media (max-width: 1200px) {
			.col-xs-4.secondLine {
				border-left: none !important;
			}
			.col-xs-4 {
				margin-bottom: 10px;
			}
		}


		/*  */

		.backStyle {
			background: #fff;
			box-shadow: 0 0 40px #eee;
			padding: 20px;
		}

		.backStyle h1 {
			font-size: 18px;
			margin-bottom: 15px;
		}

		.circle_bar {
			text-align: center;
			padding: 54px 18px;
		}

		/*  */

		.areaicon {
			width: 40px;
			float: left;
			height: 50px;
			margin-right: 15px;
		}

		.area p {
			font-size: 16px;
			line-height: 30px;
		}


		/* 配置项 */

		.form-group>label {
			margin: 4px 0 0 0;
			text-align: right;
		}

		.initVal {
			position: absolute;
			left: 8px;
			top: 5px;
		}

		.ui-slider {
			top: 8px;
			left: 18px;
		}

		.sliderVal {
			position: absolute;
			right: 25px;
			top: 5px;
		}

		.collocateBtn {
			text-align: center;
		}

		.collocateBtn button {
			margin: 10px 10px 20px 10px;
		}

		.form-group select {
			width: 200px;
		}

		.widget-body {
			margin-top: 20px;
		}

		.timePattern {
			display: none;
		}

		.hintTitle {
			text-align: center;
			display: inline-block;
			width: 100px;
			margin-right: 15px;
			color: #777;
		}

		.form-group select[name='begin'],
		.form-group select[name='end'] {
			padding: 0 26px 0 37px;
			width: initial;
			width: 103px;
		}

		.haloParent {
			position: absolute;
			width: 100px;
			height: 100px;
			float: left;
			margin-top: -23px;
		}

		.halo {
			position: absolute;
			width: 100px;
			height: 100px;
			border-radius: 50%;
		}

		.solidCircle {
			position: absolute;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			left: 50%;
			top: 50%;
			margin-left: -25px;
			margin-top: -25%;
		}

		.solidCircle4 {
			background: #4ca1ff;
		}

		.solidCircle6 {
			background: #a597f8;
		}


		.halo4 {
			animation: haloFour 2s 3s infinite;
		}

		.halo6 {
			animation: haloSix 2s 3s infinite;
		}

		@keyframes haloFour {
			0% {
				background: #4ca1ff;
				transform: scale(.3);
				opacity: 0
			}
			20% {
				background: #1258a5;
				transform: scale(.5);
				opacity: .5
			}
			100% {
				background: #1258a5;
				transform: scale(.8);
				opacity: 0
			}
		}

		@keyframes haloSix {
			0% {
				background: #a597f8;
				transform: scale(.3);
				opacity: 0
			}
			20% {
				background: #3d2aaf;
				transform: scale(.5);
				opacity: .5
			}
			100% {
				background: #3d2aaf;
				transform: scale(.8);
				opacity: 0
			}
		}

		.haloIcon {
			margin-top: 14px;
		}

		.widget-body {
			min-height: 464px;
		}

		/* 左边设备 */

		.equiptInfo {
			height: 655px;
			position: relative;
			background: url(../static/img/equipImg.png) no-repeat;
			background-size: 230px;
			background-position-x: 45%;
			background-position-y: 22px;
		}

		/*闪烁点*/

		#animatCover {
			position: absolute;
			left: 45%;
			top: 0;
			bottom: 0;
			width: 233px;
			margin-left: -107px;
			z-index: 99;
		}

		.flashDot {
			width: 50px;
			height: 50px;
			background-image: url(../static/img/flash.png);
			background-size: cover;
			background-position-y: 0 -143px;
			cursor: pointer;
			position: absolute;
		}

		.flashDot .line {
			position: absolute;
			left: 39px;
			bottom: 40px;
			z-index: 900;
			width: 0;
			height: 35px;
			transition: all .3s;
			background-image: url(../static/img/line.png);
		}

		.flashDot .lineleft {
			background-image: url(../static/img/line2.png);
		}

		.flashDot .bottomline {
			bottom: -20px;
			transform: scale(1) rotateX(180deg);
		}

		.flashDot .panelBox {
			position: absolute;
			left: 141px;
			bottom: 46px;
			width: 190px;
			height: 48px;
			background-color: transparent;
			-webkit-background-size: 100% 100%;
			background-size: 100% 100%;
			transform: scale(0);
			animation-fill-mode: forwards;
		}

		.bgimg {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-image: url(../static/img/panel.png);
			background-size: 100% 100%;
		}

		.flashDot .bottompanel {
			bottom: -43px;
		}

		.flashDot .showPanel {
			animation: showPanel 1s .5s 1;
			animation-fill-mode: forwards;
		}

		.flashDot .text {
			position: absolute;
			left: 20px;
			top: 10px;
			width: 80%;
			height: 30px;
			line-height: 30px;
			color: #fff;
			font-size: 16px;
		}

		@keyframes showPanel {
			0% {
				opacity: 1;
				transform: scale(0);
			}
			80% {
				transform: scale(1.1);
			}
			100% {
				opacity: 1;
				transform: scale(1);
			}
		}

		/* 闪烁点定位 */

		.flashDot1 {
			left: 150px;
			top: 60px;
		}

		.flashDot2 {
			left: 93px;
			top: 66px;
		}

		.flashDot3 {
			left: 100px;
			top: 226px;
		}

		.flashDot4 {
			left: 100px;
			top: 332px;
		}

		.flashDot5 {
			bottom: 225px;
			left: 112px;
		}

		.flashDot6 {
			bottom: 133px;
			left: 63px;
		}

		.flashDot7 {
			bottom: 141px;
    		left: 126px;
		}

		.flashDot8 {
			bottom: 85px;
			left: 64px;
		}

		.flashDot9 {
			bottom: 90px;
    		left: 122px;
		}

		/*温控开关 */

		.tempTitel,
		.switchbox {
			display: inline-block;
			vertical-align: middle;
		}

		.switchBj {
			width: 60px;
			height: 30px;
			background: #c8c8c8;
			border-radius: 20px;
			position: relative;
		}

		.switchBj:after {
			position: absolute;
			content: '关';
			left: 9px;
			line-height: 30px;
			color: #fff;
		}

		.switchBj:before {
			position: absolute;
			content: '开';
			left: 34px;
			line-height: 30px;
			color: #fff;
		}

		.switchBj span {
			display: inline-block;
			width: 26px;
			height: 26px;
			background: #fff;
			border-radius: 50%;
			box-shadow: 1px 1px 4px #515151;
			position: absolute;
			left: 30px;
			top: 2px;
		}

		.switchInp {
			display: none;
		}

		.switchInp:checked+.switchBj {
			background: #468FCC;
			border-color: #468FCC;
		}

		.switchInp:checked+.switchBj span {
			left: 2px;
		}

		/* 温度提示 */

		.weatherType {
			margin: 31px 0;
		}

		.font18 {
			font-size: 18px;
		}

		.tempTypeImg {
			width: 30%;
			float: left;
			height: 60px;
			line-height: 60px;
		}

		.tempTypeImg img {
			width: 100%;
		}

		.tempTypeValue {
			float: left;
			width: 70%;
			text-align: center;
			line-height: 28px;
		}
		/* 配置form */
		.coerceConfig{
			display: none;
			background: white;
			position: fixed;
			left: 25%;
			right: 25%;
			top: 20%;
			padding-bottom: 30px;
			z-index: 999999;
		}
		.configTitle{
			font-size: 22px;
			padding: 15px;
			text-indent: 8%;
			color: #10659d;
		}
		.markimg{
			display: none;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: rgba(0,0,0,.5);
			z-index: 98;
		}
	</style>

</head>

<body>
	<div class="content">
		<div class="page-header">
			<h1>
				<font style="vertical-align: inherit;">
					<font style="vertical-align: inherit;">
							测报灯设备详情
					</font>
				</font>
			</h1>
		</div>
		<div class="userinfocover">
			<div class="row userinfo">
				<div class="col-xs-11">
					<i class="fa fa-user-o" aria-hidden="true"></i>
					设备ID：
					<span class="userinfoTitle">{{equip_id}}</span>
					设备名称：
					<span class="userinfoTitle" id="equip_name"></span>
					上报时间：
					<span class="userinfoTitle" id="upl_time"></span>
					位置：
					<span class="userinfoTitle" id="curr_area"></span>					
				</div>
				<div class="col-xs-1 refresh">
					<button type="button" class="btn btn-sm btn-success" onclick="reloadPage()">刷新</button>
					<button type="button" class="btn btn-sm btn-primary" id="operationBtn" onclick="operation()">操作</button>
				</div>
			</div>
			<div id="handleBtns" style="display:none">
				<div style="padding: 20px; background-color: #F2F2F2;" id="">
					<div class="layui-row layui-col-space15">
						<div class="layui-col-md6">
							<div class="layui-card">
								<div class="layui-card-header">上仓门操作</div>
								<div class="layui-card-body">
									<div class="layui-row layui-col-space15">
										<div class="layui-col-md6">
											<button type="button" class="btn btn-sm btn-success" onclick="handleFun('ctrl','up','open')">打开上仓门</button>
										</div>
										<div class="layui-col-md6">
											<button type="button" class="btn btn-sm btn-success" onclick="handleFun('ctrl','up','close')">关闭上仓门</button>
										</div>
										
										<div class="layui-col-md6">
											<button type="button" class="btn btn-sm btn-success" onclick="handleFun('ctrl','up','force_open')">强制打开上仓门</button>
										</div>
										<div class="layui-col-md6">
											<button type="button" class="btn btn-sm btn-success" onclick="handleFun('ctrl','up','force_close')">强制关闭上仓门</button>
										</div>
										
									</div>
								</div>
							</div>
						</div>
						<div class="layui-col-md6">
							<div class="layui-card">
								<div class="layui-card-header">下仓门操作</div>
								<div class="layui-card-body">
									<div class="layui-row layui-col-space15">
										<div class="layui-col-md6">
											<button type="button" class="btn btn-sm btn-yellow" onclick="handleFun('ctrl','down','open')">打开下仓门</button>
											<br />
										</div>
										<div class="layui-col-md6">
											<button type="button" class="btn btn-sm btn-yellow" onclick="handleFun('ctrl','down','close')">关闭下仓门</button>
											<br />
										</div>
										<div class="layui-col-md6">
											<button type="button" class="btn btn-sm btn-yellow" onclick="handleFun('ctrl','dowm','force_open')">强制打开下仓门</button>
										</div>
										<div class="layui-col-md6">
											<button type="button" class="btn btn-sm btn-yellow" onclick="handleFun('ctrl','down','force_close')">强制关闭下仓门</button>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="layui-col-md12">
							<div class="layui-card">
								<div class="layui-card-header">强制操作</div>
								<div class="layui-card-body">
									<button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('拍照','ctrl','takephoto','')">拍照</button>
									<button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('清虫','ctrl','turn','')">清虫</button>
									<button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('升级','update','','')">升级</button>
									<button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('重启','reboot','','')">重启</button>
									<button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('配置','config','1','')">板子配置</button>
									<!-- <button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('配置','config','2','')">图片上传路径</button> -->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<!-- 设备模型 -->
				<div class="col-xs-12 col-md-6">
					<div class="backStyle equipInfo equiptInfo" id="showall">
						<div id="animatCover">
							<div class="flashDot flashDot1">
								<div class="line"></div>
								<div class="panelBox">
									<div class="bgimg">
										<div class="text" id="csq"></div>
									</div>
								</div>
							</div>
							<div class="flashDot flashDot2" style=" transform:rotateY(180deg) rotateX(0deg);">
								<div class="line"></div>
								<div class="panelBox">
									<div class="bgimg" style=" transform:rotateY(180deg) rotateX(0deg);">
										<div class="text" id="rps"></div>
									</div>
								</div>
							</div>
							<div class="flashDot flashDot3">
								<div class="line"></div>
								<div class="panelBox">
									<div class="bgimg">
										<div class="text">
											诱虫灯管
										</div>
									</div>
								</div>
							</div>
							<div class="flashDot flashDot4" style=" transform:rotateY(180deg) rotateX(0deg);">
								<div class="line"></div>
								<div class="panelBox">
									<div class="bgimg" style=" transform:rotateY(180deg) rotateX(0deg);">
										<div class="text" id="lps"></div>
									</div>
								</div>
							</div>
							<div class="flashDot flashDot5">
								<div class="line"></div>
								<div class="panelBox">
									<div class="bgimg">
										<div class="text" id="gs"></div>
									</div>
								</div>
							</div>
							<div class="flashDot flashDot6" style=" transform:rotateY(180deg) rotateX(0deg);">
								<div class="line"></div>
								<div class="panelBox">
									<div class="bgimg" style=" transform:rotateY(180deg) rotateX(0deg);">
										<div class="text" id="hs"></div>
									</div>
								</div>
							</div>
							<div class="flashDot flashDot7">
								<div class="line"></div>
								<div class="panelBox">
									<div class="bgimg">
										<div class="text" id="upds"></div>
									</div>
								</div>
							</div>
							<div class="flashDot flashDot8" style=" transform:rotateY(180deg) rotateX(0deg);">
								<div class="line bottomline"></div>
								<div class="panelBox bottompanel">
									<div class="bgimg" style=" transform:rotateY(180deg) rotateX(0deg);">
										<div class="text" id="hrt"></div>
									</div>
								</div>
							</div>
							<div class="flashDot flashDot9">
								<div class="line bottomline"></div>
								<div class="panelBox bottompanel">
									<div class="bgimg">
										<div class="text" id="dnds"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 右边 -->
				<div class="col-xs-12 col-md-6" style="padding-left: 0px;padding-right:0px">
					<!-- 信息条 -->
					<div class="equipInfo">
						<div class="row" style="margin-left: 0;">
							<div class="col-xs-6">
								<div class="haloParent">
									<div class="halo halo6"></div>
									<div class="solidCircle solidCircle6">
										<img class="haloIcon" src="{% static '/img/haloIcon4.png' %}" alt="">
									</div>
								</div>
								<div class="txt">
									<span class="typeResult" id="dver"></span>
									<p class="typeResult">设备版本</p>
								</div>
							</div>
							<div class="col-xs-6">
								<div class="haloParent">
									<div class="halo halo4"></div>
									<div class="solidCircle solidCircle4">
										<img class="haloIcon" src="{% static '/img/haloIcon1.png' %}" alt="">
									</div>
								</div>
								<div class="txt">
									<span class="typeResult" id="lng">经度：113.46655</span>
									<p class="typeResult" id="lat">纬度：48.121211</p>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<!-- 温控状态 -->
						<div class="col-xs-4" style="padding-left: 0;">
							<div class="backStyle" style="margin-bottom:20px">
								<span class="typeResult tempTitel">温控状态：</span>
								<div class="switchbox">
									<input class="switchInp" id="tps" type="checkbox">
									<div class="switchBj">
										<span></span>
									</div>
								</div>
							</div>
							<div class="backStyle">
								<div class="temperatureKind">
									<div class="clearfix weatherType">
										<div class="tempTypeImg">
											<img src="{% static '/img/statusIcon1.png' %}" alt="">
										</div>
										<div class="tempTypeValue">
											<p class="font18" id="tpl">1℃</p>
											<p>低温限值</p>
										</div>
									</div>
									<div class="clearfix weatherType">
										<div class="tempTypeImg">
											<img src="{% static '/img/statusIcon2.png' %}" alt="">
										</div>
										<div class="tempTypeValue">
											<p class="font18" id="tph">70℃</p>
											<p>高温限值</p>
										</div>
									</div>
									<div class="clearfix weatherType">
										<div class="tempTypeImg">
											<img src="{% static '/img/statusIcon3.png' %}" alt="">
										</div>
										<div class="tempTypeValue">
											<p class="font18" id="at"></p>
											<p>环境温度</p>
										</div>
									</div>
									<div class="clearfix weatherType">
										<div class="tempTypeImg">
											<img src="{% static '/img/statusIcon4.png' %}" alt="">
										</div>
										<div class="tempTypeValue">
											<p class="font18" id="ah"></p>
											<p>环境湿度</p>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- 配置 -->
						<div class="col-xs-8" style="padding-left: 0;">
							<div class="backStyle">
								<div id="configParent" class="loadingParent">
									<div id="" class="loadCenter">
										<div class="skype-loader">
											<div class="dot">
												<div class="first"></div>
											</div>
											<div class="dot"></div>
											<div class="dot"></div>
											<div class="dot"></div>
										</div>
										配置更新中...
									</div>
								</div>
								<div class="widget-body">
									<div class="row">
										<div class="form-group">
											<label class="col-sm-3 control-label no-padding-right" for="form-field-1">
												<font style="vertical-align: inherit;">
													<font style="vertical-align: inherit;"> 定时模式 </font>
												</font>
											</label>
											<div class="col-sm-9">
												<select name="timing" id="timing">
													<option value="0">光控</option>
													<option value="1">时控</option>
												</select>
											</div>
											<div style="clear:both"></div>
										</div>
										<!-- 1结束 -->
										<div class="form-group lightPattern">
											<label class="col-sm-3 control-label no-padding-right" for="form-field-1">
												<font style="vertical-align: inherit;">
													<font style="vertical-align: inherit;"> 定时时长 </font>
												</font>
											</label>
											<div class="col-sm-9">
												<span class="initVal">1</span>
												<div class="slider" id="timingLength-slider"></div>
												<span class="sliderVal" id="timingLength">1</span>
											</div>
											<div style="clear:both"></div>
										</div>
										<!-- 2结束 -->
										<div class="form-group timePattern">
											<label class="col-sm-3 control-label no-padding-right" for="form-field-1">
												<font style="vertical-align: inherit;">
													<font style="vertical-align: inherit;"> 开始结束时间 </font>
												</font>
											</label>
											<div class="col-sm-9">
												<div>
													<span class="hintTitle">开始时间</span>
													<span class="hintTitle">结束时间</span>
												</div>
												<select name="begin" id="begin">
													<option value="0">0</option>
													<option value="1">1</option>
													<option value="2">2</option>
													<option value="3">3</option>
													<option value="4">4</option>
													<option value="5">5</option>
													<option value="6">6</option>
													<option value="7">7</option>
													<option value="8">8</option>
													<option value="9">9</option>
													<option value="10">10</option>
													<option value="11">11</option>
													<option value="12">12</option>
													<option value="13">13</option>
													<option value="14">14</option>
													<option value="15">15</option>
													<option value="16">16</option>
													<option value="17">17</option>
													<option value="18">18</option>
													<option value="19">19</option>
													<option value="20">20</option>
													<option value="21">21</option>
													<option value="22">22</option>
													<option value="23">23</option>
												</select>
												至
												<select name="end" id="end">
													<option value="0">0</option>
													<option value="1">1</option>
													<option value="2">2</option>
													<option value="3">3</option>
													<option value="4">4</option>
													<option value="5">5</option>
													<option value="6">6</option>
													<option value="7">7</option>
													<option value="8">8</option>
													<option value="9">9</option>
													<option value="10">10</option>
													<option value="11">11</option>
													<option value="12">12</option>
													<option value="13">13</option>
													<option value="14">14</option>
													<option value="15">15</option>
													<option value="16">16</option>
													<option value="17">17</option>
													<option value="18">18</option>
													<option value="19">19</option>
													<option value="20">20</option>
													<option value="21">21</option>
													<option value="22">22</option>
													<option value="23">23</option>
												</select>
											</div>
											<div style="clear:both"></div>
										</div>
										<!-- 3结束 -->
										<div class="form-group">
											<label class="col-sm-3 control-label no-padding-right" for="form-field-1">
												<font style="vertical-align: inherit;">
													<font style="vertical-align: inherit;"> 落虫时间 </font>
												</font>
											</label>
											<div class="col-sm-9">
												<span class="initVal">5</span>
												<div class="slider" id="dropTime-slider"></div>
												<span class="sliderVal" id="dropTime">20</span>
											</div>
											<div style="clear:both"></div>
										</div>
										<!-- 4结束 -->
										<div class="form-group">
											<label class="col-sm-3 control-label no-padding-right" for="form-field-1">
												<font style="vertical-align: inherit;">
													<font style="vertical-align: inherit;"> 加热时间 </font>
												</font>
											</label>
											<div class="col-sm-9">
												<span class="initVal">5</span>
												<div class="slider" id="calefactionTime-slider"></div>
												<span class="sliderVal" id="calefactionTime">20</span>
											</div>
											<div style="clear:both"></div>
										</div>
										<!-- 5结束 -->
										<div class="form-group">
											<label class="col-sm-3 control-label no-padding-right" for="form-field-1">
												<font style="vertical-align: inherit;">
													<font style="vertical-align: inherit;"> 加热温度 </font>
												</font>
											</label>
											<div class="col-sm-9">
												<span class="initVal">75</span>
												<div class="slider" id="calefactionTemperature-slider"></div>
												<span class="sliderVal" id="calefactionTemperature">125</span>
											</div>
											<div style="clear:both"></div>
										</div>
										<!-- 6结束 -->
										<div class="form-group">
											<label class="col-sm-3 control-label no-padding-right" for="form-field-1">
												<font style="vertical-align: inherit;">
													<font style="vertical-align: inherit;"> 高温保护阈值 </font>
												</font>
											</label>
											<div class="col-sm-9">
												<span class="initVal">50</span>
												<div class="slider" id="highLimit-slider"></div>
												<span class="sliderVal" id="highLimit">70</span>
											</div>
											<div style="clear:both"></div>
										</div>
										<!-- 7结束 -->
										<div class="form-group">
											<label class="col-sm-3 control-label no-padding-right" for="form-field-1">
												<font style="vertical-align: inherit;">
													<font style="vertical-align: inherit;"> 低温保护阈值 </font>
												</font>
											</label>
											<div class="col-sm-9">
												<span class="initVal">1</span>
												<div class="slider" id="lowLimit-slider"></div>
												<span class="sliderVal" id="lowLimit">10</span>
											</div>
											<div style="clear:both"></div>
										</div>
										<!-- 8结束 -->
										<div class="form-group">
											<label class="col-sm-3 control-label no-padding-right" for="form-field-1">
												<font style="vertical-align: inherit;">
													<font style="vertical-align: inherit;"> 数据上传时间间隔 </font>
												</font>
											</label>
											<div class="col-sm-9">
												<span class="initVal">10</span>
												<div class="slider" id="dataUpTime-slider"></div>
												<span class="sliderVal" id="dataUpTime">60</span>
											</div>
											<div style="clear:both"></div>
										</div>
										<!-- 9结束 -->
										<div class="form-group">
											<label class="col-sm-3 control-label no-padding-right" for="form-field-1">
												<font style="vertical-align: inherit;">
													<font style="vertical-align: inherit;"> 图片分辨率 </font>
												</font>
											</label>
											<div class="col-sm-9">
												<select name="imgHvga" id="imgHvga">
													<option value="0">高</option>
													<option value="1">中</option>
													<option value="2">低</option>
												</select>
											</div>
											<div style="clear:both"></div>
										</div>
										<!-- 结束 -->
									</div>
									<div class="collocateBtn">
										<button class="btn btn-sm btn-info" onclick="saveOperation()">
											<font style="vertical-align: inherit;">
												<font style="vertical-align: inherit;">确定</font>
											</font>
										</button>
										<button class="btn btn-sm" onclick="cancelConfig()">
											<font style="vertical-align: inherit;">
												<font style="vertical-align: inherit;">取消</font>
											</font>
										</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 强制配置弹框 -->
		<div class="coerceConfig">
			<h1 class="configTitle">MQTT配置</h1>
			<form class="form-horizontal" role="form">
				<div class="form-group">
					<label class="col-sm-3 control-label no-padding-right">MQTT地址</label>
					<div class="col-sm-9">
						<input type="text" id="plankUrl" class="col-sm-6" placeholder="xxxx.com">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label no-padding-right">MQTT端口</label>
					<div class="col-sm-9">
						<input type="text"  id="port" class="col-sm-6" placeholder="1883">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label no-padding-right">图片上传地址</label>
					<div class="col-sm-9">
						<input type="text" id="photoUrl" class="col-sm-6" placeholder="http://xxxxx.com">
					</div>
				</div>
				<div class="clearfix">
					<div class="col-md-offset-3 col-md-9">
						<button class="btn btn-sm" type="reset" onclick="closeConfig()">
							<i class="ace-icon fa fa-undo bigger-110"></i>
							取消
						</button>
						&nbsp; &nbsp; &nbsp;
						<button class="btn btn-sm btn-info" type="button" onclick="saveConfig()">
							<i class="ace-icon fa fa-check bigger-110"></i>
							确定
						</button>
					</div>
				</div>
			</form>
		</div>
		<div class="markimg"></div>
		<!-- loading -->
		<div id="loadingParent">
			<div id="loadCenter">
				<div class="skype-loader">
					<div class="dot">
						<div class="first"></div>
					</div>
					<div class="dot"></div>
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
				正在更新...
			</div>
		</div>
		<input type="hidden" value="{{equip_id}}" id="imei">
		<script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=TcRPmrsiZUqdUBWoELrUArRkCRC36KMx"></script>
		<script src="{% static '/lib/layui/layui.all.js' %}"></script>
		<script src="{% static '/assets/js/ace.min.js' %}"></script>
		<script src="{% static '/assets/js/newdistpicker.js' %}" type="text/javascript" charset="utf-8"></script>
		<script src="{% static '/assets/js/main.js' %}" type="text/javascript" charset="utf-8"></script>
		<script src="{% static '/assetsDemo/js/jquery-ui.min.js' %}"></script>
		<script src="{% static '/assetsDemo/js/jquery.ui.touch-punch.min.js' %}"></script>
		<script src="{% static '/lib/detailsAnimat.js' %}"></script>
		<script src="{% static '/lib/coordOffset.js' %}"></script>
		<script>
			/**!
		 * easy-pie-chart
		 * Lightweight plugin to render simple, animated and retina optimized pie charts
		 *
		 * @license 
		 * @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
		 * @version 2.1.7
		 **/
			!function (a, b) { "function" == typeof define && define.amd ? define(["jquery"], function (a) { return b(a) }) : "object" == typeof exports ? module.exports = b(require("jquery")) : b(jQuery) }(this, function (a) { var b = function (a, b) { var c, d = document.createElement("canvas"); a.appendChild(d), "object" == typeof G_vmlCanvasManager && G_vmlCanvasManager.initElement(d); var e = d.getContext("2d"); d.width = d.height = b.size; var f = 1; window.devicePixelRatio > 1 && (f = window.devicePixelRatio, d.style.width = d.style.height = [b.size, "px"].join(""), d.width = d.height = b.size * f, e.scale(f, f)), e.translate(b.size / 2, b.size / 2), e.rotate((-0.5 + b.rotate / 180) * Math.PI); var g = (b.size - b.lineWidth) / 2; b.scaleColor && b.scaleLength && (g -= b.scaleLength + 2), Date.now = Date.now || function () { return +new Date }; var h = function (a, b, c) { c = Math.min(Math.max(-1, c || 0), 1); var d = 0 >= c; e.beginPath(), e.arc(0, 0, g, 0, 2 * Math.PI * c, d), e.strokeStyle = a, e.lineWidth = b, e.stroke() }, i = function () { var a, c; e.lineWidth = 1, e.fillStyle = b.scaleColor, e.save(); for (var d = 24; d > 0; --d)d % 6 === 0 ? (c = b.scaleLength, a = 0) : (c = .6 * b.scaleLength, a = b.scaleLength - c), e.fillRect(-b.size / 2 + a, 0, c, 1), e.rotate(Math.PI / 12); e.restore() }, j = function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (a) { window.setTimeout(a, 1e3 / 60) } }(), k = function () { b.scaleColor && i(), b.trackColor && h(b.trackColor, b.trackWidth || b.lineWidth, 1) }; this.getCanvas = function () { return d }, this.getCtx = function () { return e }, this.clear = function () { e.clearRect(b.size / -2, b.size / -2, b.size, b.size) }, this.draw = function (a) { b.scaleColor || b.trackColor ? e.getImageData && e.putImageData ? c ? e.putImageData(c, 0, 0) : (k(), c = e.getImageData(0, 0, b.size * f, b.size * f)) : (this.clear(), k()) : this.clear(), e.lineCap = b.lineCap; var d; d = "function" == typeof b.barColor ? b.barColor(a) : b.barColor, h(d, b.lineWidth, a / 100) }.bind(this), this.animate = function (a, c) { var d = Date.now(); b.onStart(a, c); var e = function () { var f = Math.min(Date.now() - d, b.animate.duration), g = b.easing(this, f, a, c - a, b.animate.duration); this.draw(g), b.onStep(a, c, g), f >= b.animate.duration ? b.onStop(a, c) : j(e) }.bind(this); j(e) }.bind(this) }, c = function (a, c) { var d = { barColor: "#ef1e25", trackColor: "#f9f9f9", scaleColor: "#dfe0e0", scaleLength: 5, lineCap: "round", lineWidth: 3, trackWidth: void 0, size: 110, rotate: 0, animate: { duration: 1e3, enabled: !0 }, easing: function (a, b, c, d, e) { return b /= e / 2, 1 > b ? d / 2 * b * b + c : -d / 2 * (--b * (b - 2) - 1) + c }, onStart: function (a, b) { }, onStep: function (a, b, c) { }, onStop: function (a, b) { } }; if ("undefined" != typeof b) d.renderer = b; else { if ("undefined" == typeof SVGRenderer) throw new Error("Please load either the SVG- or the CanvasRenderer"); d.renderer = SVGRenderer } var e = {}, f = 0, g = function () { this.el = a, this.options = e; for (var b in d) d.hasOwnProperty(b) && (e[b] = c && "undefined" != typeof c[b] ? c[b] : d[b], "function" == typeof e[b] && (e[b] = e[b].bind(this))); "string" == typeof e.easing && "undefined" != typeof jQuery && jQuery.isFunction(jQuery.easing[e.easing]) ? e.easing = jQuery.easing[e.easing] : e.easing = d.easing, "number" == typeof e.animate && (e.animate = { duration: e.animate, enabled: !0 }), "boolean" != typeof e.animate || e.animate || (e.animate = { duration: 1e3, enabled: e.animate }), this.renderer = new e.renderer(a, e), this.renderer.draw(f), a.dataset && a.dataset.percent ? this.update(parseFloat(a.dataset.percent)) : a.getAttribute && a.getAttribute("data-percent") && this.update(parseFloat(a.getAttribute("data-percent"))), a.style.width = a.style.height = e.size + "px", a.style.lineHeight = e.size - 1 + "px" }.bind(this); this.update = function (a) { return a = parseFloat(a), e.animate.enabled ? this.renderer.animate(f, a) : this.renderer.draw(a), f = a, this }.bind(this), this.disableAnimation = function () { return e.animate.enabled = !1, this }, this.enableAnimation = function () { return e.animate.enabled = !0, this }, g() }; a.fn.easyPieChart = function (b) { return this.each(function () { var d; a.data(this, "easyPieChart") || (d = a.extend({}, b, a(this).data()), a.data(this, "easyPieChart", new c(this, d))) }) } });
		</script>
		<script type="text/javascript">
			$.ajaxSetup({
				data: { csrfmiddlewaretoken: '{{ csrf_token }}' },
			});
			$('#iframe-main', parent.document).css('height', $('.content').height() + 40)
			$(window).resize(function () {
				$('#iframe-main', parent.document).css('height', $('.content').height() + 40)
			});
			var parentUserName = $('#parentUserName', parent.document).html();
			if (!(parentUserName == 'admin' || parentUserName == 'user')) {
				$('#operationBtn').remove();
				$('#handleBtns').remove();
			}
			// 自定义动画
			animate.init();
			animate.showAll();			
			$('#showall').on('click',function(e){
				animate.showAll();
				e.stopPropagation();
			})
			// 获取位置
			var geoc = new BMap.Geocoder(); 

			var configData = '';//配置数据
			// 获取当前设备状态信息
			$.ajax({
				url: 'equipmanage_cbd_detail',
				type: 'post',
				dataType: 'json',
				data: {
					id: $('#imei').val()
				},
				success: function (data) {
					equipData(data);
				}
			})

			function equipData(dat) {
				var equipStatus = dat[0];

				var equipData = dat[1];
				$('#equip_name').html(equipStatus.equip_name || '无');
				$('#upl_time').html(equipStatus.upl_time);
				var stat = eval('(' + equipStatus.cbd_status + ')');;
				var cbd_data = eval('(' + equipData.cbd_data + ')');;
				// $('#ts').html(stat.ts ? '时控' : '光控');//定时模式
				$('#gs').html('当前通道:' + (stat.gs ? '落虫' : '排水'));//通道模式
				$('#upds').html('上仓门:' + (stat.upds ? '打开' : '关闭'));//上仓门
				$('#dnds').html('下仓门:' + (stat.dnds ? '打开' : '关闭'));//下舱门
				$('#csq').html('信号强度:' + stat.csq);//信号强度
				$('#dver').html(stat.dver);//版本号
				if (stat.lng > 999) {
					var lng = Math.floor(stat.lng / 100) + ((stat.lng % 100) / 60);
					var lat = Math.floor(stat.lat / 100) + ((stat.lat % 100) / 60);
				} else {
					var lng = Number(stat.lng);
					var lat = Number(stat.lat);
				}
				var lng1 = wgs84togcj02(lng, lat);
        		var lng2 = gcj02tobd09(lng1[0], lng1[1]);
        		var pt  = new BMap.Point(lng2[0], lng2[1]);
				geoc.getLocation(pt, function(rs){
					var addComp = rs.addressComponents;
					// $('.area').html('位置：'+ addComp.province + ", " + addComp.city + ", " + addComp.district)
					$('#curr_area').html(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
				}); 
				$('#lat').html('纬度：' + lat.toFixed(5));//维度
				$('#lng').html('经度：' + lng.toFixed(4));//经度
				$('#tps').html(stat.tps ? '异常' : '正常');
				if (cbd_data.tps == 0) {//温控状态
					$('#tps').attr('checked', 'checked');
				} else {
					$('#tps').attr('checked', false);
				}
				$('#lps').html('光控检测:' + (stat.lps ? '异常' : '正常'));//光控状态
				$('#hs').html('加热开关:' + (stat.hs ? '开启' : '关闭'));//加热状态
				$('#rps').html('雨控状态:' + (stat.rps ? '异常' : '正常'));//雨控状态  
				$('#hrt').html('加热仓温度:' + cbd_data.hrt);//加热仓温度
				$('#at').html((cbd_data.at / 10).toFixed(1) + '℃');//环境温度
				$('#ah').html((cbd_data.ah / 10).toFixed(1) + '℃');//环境湿度
			}

			$('#timing').on('change', function () {
				if ($(this).val() == 0) {
					$('.lightPattern').show();
					$('.timePattern').hide();
				} else {
					$('.lightPattern').hide();
					$('.timePattern').show();
				}
			})

			// $('.slider').slider({
			// 	disabled: true,
			// })

			// 1定时时长
			$("#timingLength-slider").css('width', '85%').slider({
				value: 1,
				range: "min",
				min: 1,
				max: 10,
				step: 1,
				slide: function (event, ui) {
					var val = parseInt(ui.value);
					$('#timingLength').html(val);
				}
			});

			// 2落虫
			$("#dropTime-slider").css('width', '85%').slider({
				value: 5,
				range: "min",
				min: 5,
				max: 20,
				step: 1,
				slide: function (event, ui) {
					var val = parseInt(ui.value);
					$('#dropTime').html(val);
				}
			});
			// 3加热时间
			$("#calefactionTime-slider").css('width', '85%').slider({
				value: 5,
				range: "min",
				min: 5,
				max: 20,
				step: 1,
				slide: function (event, ui) {
					var val = parseInt(ui.value);
					$('#calefactionTime').html(val);
				}
			});
			// 4加热温度
			$("#calefactionTemperature-slider").css('width', '85%').slider({
				value: 75,
				range: "min",
				min: 75,
				max: 120,
				step: 1,
				slide: function (event, ui) {
					var val = parseInt(ui.value);
					$('#calefactionTemperature').html(val);
				}
			});
			// 5高温保护阈值
			$("#highLimit-slider").css('width', '85%').slider({
				value: 50,
				range: "min",
				min: 50,
				max: 70,
				step: 1,
				slide: function (event, ui) {
					var val = parseInt(ui.value);
					$('#highLimit').html(val);
				}
			});
			// 6低温保护阈值
			$("#lowLimit-slider").css('width', '85%').slider({
				value: 1,
				range: "min",
				min: 1,
				max: 10,
				step: 1,
				slide: function (event, ui) {
					var val = parseInt(ui.value);
					$('#lowLimit').html(val);
				}
			});
			// 7数据上相间隔
			$("#dataUpTime-slider").css('width', '85%').slider({
				value: 1,
				range: "min",
				min: 10,
				max: 60,
				step: 10,
				slide: function (event, ui) {
					var val = parseInt(ui.value);
					$('#dataUpTime').html(val);
				}
			});


			//刷新：下发查询：
			function reloadPage() {
				var id = $('#imei').val();
				$.ajax({
					type: "post",
					url: 'cbd_mqtt',
					async: false,
					data: {
						"req": "read",//读取
						"topicid": id,
						"kind": "status"//读取下位机状态
					},
					dataType: "json",
					success: function (data) {
						if (data == "0") {
							$.ajax({
								type: "post",
								url: 'cbd_mqtt',
								async: false,
								data: {
									"req": "read",//读取
									"topicid": id,
									"kind": "data"//读取下位机状态
								},
								dataType: "json",
								beforeSend: function () {
									$('#loadingParent').show();
								},
								complete: function () {
									setTimeout(function () {
										$('#loadingParent').hide();
									}, 6000)
								},
								success: function (data) {
									if (data == "0") {
										layer.msg("下发查询发送成功！")
										setTimeout(function () {
											// 获取当前设备状态信息
											$.ajax({
												url: 'equipmanage_cbd_detail',
												type: 'post',
												dataType: 'json',
												data: {
													id: $('#imei').val()
												},
												success: function (data) {
													equipData(data);
												}
											})
										}, 6000)
									} else {
										layer.msg("发送失败！")
									}

								}
							})
						} else {
							layer.msg("发送失败！")
						}

					}
				})
			}

			configurationSwitch()

			// 配置按钮
			function configurationSwitch() {
				var id = $('#imei').val();

				$.ajax({
					type: "post",
					url: 'cbd_mqtt',
					data: {
						"req": "read",//读取
						"topicid": id,
						"kind": "paramconf"//读取下位机状态
					},
					dataType: "json",
					beforeSend: function () {
						$('#configParent').show();
					},
					complete: function () {
						setTimeout(function () {
							$('#configParent').hide();
						}, 3000)
					},
					success: function (data) {
						if (data == "0") {
							// layer.msg("发送成功！", { time: 2000 })
							setTimeout(function () {
								$.ajax({
									url: "equipmanage_cbd",
									type: 'post',
									data: {
										id: id,
										req: "paramconf",
									},
									success: function (data) {
										configData = data;
										configFill(data);
									}
								})
							}, 3000)
						} else {
							layer.msg("发送失败！")
						}

					}
				})
			}
			// 填充函数
			function configFill(dat) {
				var data = $.parseJSON(dat);
				var para = eval("(" + data.paramconf + ")");
				if (para != '' && para != null) {
					// 定时模式
					$('#timing').val(para.ts);
					if (para.ts == 0) {
						$('.lightPattern').show();
						$('.timePattern').hide();
					} else {
						$('.lightPattern').hide();
						$('.timePattern').show();
					}
					// 滑块
					$("#timingLength-slider").slider('value', para.tt);
					$('#timingLength').html(para.tt);

					$("#dropTime-slider").slider('value', para.collt);
					$('#dropTime').html(para.collt);

					$("#calefactionTime-slider").slider('value', para.htim);
					$('#calefactionTime').html(para.htim);

					$("#calefactionTemperature-slider").slider('value', para.hst);
					$('#calefactionTemperature').html(para.hst);

					$("#highLimit-slider").slider('value', para.tph);
					$('#highLimit').html(para.tph);//高温

					$('#tph').html(para.tph + '℃');

					$("#lowLimit-slider").slider('value', para.tpl);
					$('#lowLimit').html(para.tpl);//低温

					$('#tpl').html(para.tpl + '℃');

					$("#dataUpTime-slider").slider('value', para.datt);
					$('#dataUpTime').html(para.datt);

					// 时间
					if ($('#timing').val() == 1) {
						$('#timSelectBox').val(Math.floor(para.st));
						$('#timSelectBox2').val(Math.floor(para.et));
						$('#begin').val(Math.floor(para.st));
						$('#end').val(Math.floor(para.et));
					}
					$('#imgHvga').val(para.imgres);
					$('.slider').slider({
						disabled: false,
					})

				} else {
					// 定时模式
					$('#timing').val(0);
					$('.lightPattern').show();
					$('.timePattern').hide();
					// 滑块
					$("#timingLength-slider").slider('value', 1);
					$('#timingLength').html(1);

					$("#dropTime-slider").slider('value', 5);
					$('#dropTime').html(5);

					$("#calefactionTime-slider").slider('value', 5);
					$('#calefactionTime').html(5);

					$("#calefactionTemperature-slider").slider('value', 75);
					$('#calefactionTemperature').html(75);

					$("#highLimit-slider").slider('value', 50);
					$('#highLimit').html(50);

					$("#lowLimit-slider").slider('value', 1);
					$('#lowLimit').html(1);

					$("#dataUpTime-slider").slider('value', 10);
					$('#dataUpTime').html(10);

					$('#begin').val(0);
					$('#end').val(0);
					$('#imgHvga').val(0);
					$('#tph').html('70℃');
					$('#tpl').html('1℃');
				}
			}
			//保存
			function saveOperation() {
				var data = {
					req: 'set',
					id: $('#imei').val(),
					timing: $('#timing').val(),
					timingLength: $('#timingLength').html(),
					begin: $('#begin').val(),
					end: $('#end').val(),
					dropTime: $('#dropTime').html(),
					calefactionTime: $('#calefactionTime').html(),
					calefactionTemperature: $('#calefactionTemperature').html(),
					highLimit: $('#highLimit').html(),
					lowLimit: $('#lowLimit').html(),
					dataUpTime: $('#dataUpTime').html(),
					imgHvga: $('#imgHvga').val()
				}
				if ($('#timing').val() == 1) {
					if ($('#begin').val() && $('#end').val()) {
						saveOperationAjax('cbd_mqtt', data)
					} else {
						layer.msg("请将时控时间填写完整！");
					}
				} else {
					saveOperationAjax('cbd_mqtt', data);
				}
			}
			function saveOperationAjax(url, data) {
				$.ajax({
					url: url,
					type: 'post',
					data: data,
					beforeSend: function () {
						$('.loadingParent').show();
					},
					complete: function () {
						setTimeout(function () {
							$('.loadingParent').hide();
						}, 3000)

					},
					success: function (data) {
						if (data == "0") {
							setTimeout(function () {
								layer.msg("配置成功！");
								$('#tph').html($('#highLimit').html()+'℃');
								$('#tpl').html($('#lowLimit').html()+'℃');
							}, 3000)
						}
					}
				})
			}
			// 取消配置
			function cancelConfig() {
				configFill(configData)
			}

			var popupIndex;
			//operation配置弹框
			function operation() {
				//页面层
				popupIndex = layer.open({
					type: 1,
					skin: 'layui-layer-rim', //加上边框
					// area: ['420px', '240px'], //宽高
					area: ["50%"],
					content: $('#handleBtns').html()
				});
			}

			// var confogFlag = 1;

			function popupFrame(str, cmd, type, data) {
				//询问框
				layer.confirm('确定' + str + '？', {
					icon: 3,
					btn: ['确定', '取消'] //按钮
				}, function (index) {
					if(cmd == 'config'){
						layer.close(popupIndex)
						// if(type == 1){
						// 	confogFlag = 1;
						// 	$('.coerceConfig .configTitle').html('配置板子地址');
						// 	$('.coerceConfig .form-group').eq(0).show();
						// 	$('.coerceConfig .form-group').eq(1).show();
						// 	$('.coerceConfig .form-group').eq(2).hide();
						// }else{
						// 	confogFlag = 2;
						// 	$('.coerceConfig .configTitle').html('配置图片上传地址');							
						// 	$('.coerceConfig .form-group').eq(0).hide();
						// 	$('.coerceConfig .form-group').eq(1).hide();
						// 	$('.coerceConfig .form-group').eq(2).show();
						// }
						$('.markimg').show();
						$('.coerceConfig').show();
					}else{
						handleFun(cmd, type, data);
					}
					layer.close(index);
				}, function () {

				});
			}
			function handleFun(cmd, type, data) {
				var id = $('#imei').val();
				$.ajax({
					type: "post",
					url: 'cbd_mqtt',
					data: {
						"req": "ctrl",//控制
						"topicid": id,
						"cmd": cmd,//升级 update
						"type": type,
						"data": data
					},
					dataType: "json",
					beforeSend: function () {
						$('#loadingParent').show();
					},
					complete: function () {
						setTimeout(function () {
							$('#loadingParent').hide();
						}, 3000)
					},
					success: function (data) {
						layer.close(popupIndex);
					}
				})
			}
			
			function saveConfig(){
				var id = $('#imei').val();
				// if(confogFlag == 1){
				// 	if(!($('#plankUrl').val() && $('#port').val())){
				// 		layer.msg("请将信息填写完整！");
				// 		return false;
				// 	}
				// }else{
				// 	if(!$('#photoUrl').val()){
				// 		layer.msg("请将信息填写完整！");
				// 		return false;
				// 	}
				// }
				if(!($('#plankUrl').val() && $('#port').val() && $('#photoUrl').val())){
					layer.msg("请将信息填写完整！");
					return false;
				}
				// if(confogFlag == 1){
				// 	var dat = {
				// 		"req": "ip",//配置
				// 		"topicid": id,
				// 		"modifi_url": $('#plankUrl').val(),//升级 update
				// 		"modifi_port":$('#port').val(),
				// 		"photo_url": $('#plankUrl').val()//升级 update
				// 	}
				// }else{
				// 	var dat = {
				// 		"req": "ip",//配置
				// 		"topicid": id,
				// 		"photo_url": $('#photoUrl').val(),//升级 update
				// 	}
				// }
				var dat = {
					"req": "ip",//配置
					"topicid": id,
					"url": $('#plankUrl').val(),//升级 update
					"port":$('#port').val(),
					"photo_url": $('#photoUrl').val()//升级 update
				}
				$.ajax({
					type: "post",
					url: 'cbd_mqtt',
					data: dat,
					dataType: "json",
					beforeSend: function () {
						$('#loadingParent').show();
					},
					complete: function () {
						setTimeout(function () {
							$('#loadingParent').hide();
						}, 3000)
					},
					success: function (data) {
						closeConfig()
					}
				})
			}

			function closeConfig(){
				$('.coerceConfig input').val('');
				$('.markimg').hide();
				$('.coerceConfig').hide();
			}

		</script>
</body>

</html>