yf_zd
/
yfwlwCut


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

<head>
	<meta charset="UTF-8" />
	<link href="{% static '/lib/bootstrap-3.3.7/css/bootstrap.css' %}" rel="stylesheet">
	<link rel="stylesheet" href="{% static '/lib/font-awesome/4.5.0/css/font-awesome.css' %}">
	<link rel="stylesheet" href="{% static '/lib/css/ace.min.css' %}"/>
	<link rel="stylesheet" href="{% static '/lib/css/ace-skins.min.css' %}">
	<link rel="stylesheet" href="{% static '/lib/css/ace-rtl.min.css' %}">
	<link rel="stylesheet" href="{% static '/lib/css/jquery-ui.css' %}" />
	<link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">

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

		/* 返回 */

		.headerPlace {
			font-size: 22px;
			color: #418fbb;
			cursor: pointer;
		}

		.headerPlace img {
			vertical-align: middle;
			margin-right: 10px;
			margin-top: -4px;
		}

		/* 设备用户信息 */

		.row {
			margin: 0;
		}

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

		.refresh {
			text-align: right;
		}

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

		.coerce {
			display: inline-block;
			width: 0;
			transition: all .3s;
			opacity: 0;
			height: 29px;
			overflow: hidden;
			vertical-align: middle;
		}

		.coerceBlock {
			width: 263px;
			opacity: 1;
		}

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

		/* 模型 */

		#animatCover img {
			display: block;
			margin: 0 auto;
		}

		/* 参数 */

		.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-right: 1px solid #eee;
		}

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

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

		.txt .typeResult {
			font-size: 16px;
		}

		.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;
			}
		}

		/* 光晕圆 */

		.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: #f297f8;
		}

		.solidCircle5 {
			background: #4ca1ff;
		}

		.solidCircle6 {
			background: #a597f8;
		}


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

		.halo5 {
			animation: haloFive 2s 3s infinite;
		}

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

		@keyframes haloFour {
			0% {
				background: #f297f8;
				transform: scale(.3);
				opacity: 0
			}
			20% {
				background: #f056fa;
				transform: scale(.5);
				opacity: .5
			}
			100% {
				background: #f056fa;
				transform: scale(.8);
				opacity: 0
			}
		}

		@keyframes haloFive {
			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;
		}

		@media screen and (min-width: 980px) and (max-width: 1500px) {
			.equipInfo .col-xs-4 {
				width: 50% !important;
			}
			.equipInfo .col-xs-4.site {
				width: 100% !important;
				padding: 40px 18px;
			}
			.tempTypeValue {
				font-size: 16px;
				text-align: center;
				margin: 0;
				width:75%;
			}
		}

		/*温控开关 */

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

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

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

		.switchBj:before {
			position: absolute;
			content: '开';
			left: 45px;
			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: 45px;
			top: 2px;
		}

		.switchInp {
			display: none;
		}

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

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

		/* 温度提示 */

		.weatherType {
			margin: 36px 0;
		}

		.font18 {
			font-size: 18px;
		}

		.tempTypeValue .font18{
			padding-left: 18%;
		}
		.tempTypeValue i{
			font-size: 32px;
    		color: #00c9e4;
    		margin-right: 10%;
		}

		.tempTypeValue {
			margin-left: 5%;
    		margin-top: 10px;
		}

		/* 配置 */

		.configTitlt {
			border-left: 5px solid #468fcc;
			padding-left: 10px;
			color: #000;
			letter-spacing: 2px;
			font-size: 16px;
		}

		.configItem {
			margin: 7px 0;
		}

		.configItem>span {
			color: #919191;
			padding-left: 10%;
			display: inline-block;
			width: 200px;
			text-align: right;
			margin-right: 10px;
		}

		.timeSegment {
			margin-left: 210px;
		}

		.timeSegment>div {
			/* margin-bottom: 28px; */
		}

		/* --ie清除--*/

		select::-ms-expand {
			display: none;
		}

		/* --火狐、谷歌清除--*/

		.collTime select {
			appearance: none;
			-moz-appearance: none;
			-webkit-appearance: none;
			/* background: url("arrow.png") no-repeat scroll right center transparent; */
			padding-right: 14px;
			width: 40%;
			margin-bottom: 28px;
		}

		option:disabled {
			appearance: none;
			background: #dfdfdf;
		}

		/* 进度条 */

		.setTemperature {
			display: inline-block;
			width: 100%;
			position: relative;
			height: 30px;
		}

		.initVal {
			position: absolute;
			left: 0;
			top: 7px;
		}

		.sliderVal {
			position: absolute;
			right: 0;
			top: -3px;
		}

		.slider {
			width: 80%;
			margin-left: 28px;
		}

		.ui-slider .ui-slider-handle {
			border-radius: 50%;
		}
		.imgHvga{
			width: 180px;
		}
		/* 载玻片剩余提示 */
		.surplusHint{
			display: inline-block;
			position: relative;
			border: 1px solid #ff0000;
			padding: 2px 5px 2px 10px;
			border-radius: 0 3px 3px 0;
			box-shadow: 1px 1px 2px #a6a6a6;
		}
		.surplusHint:before{
			position: absolute;
			left: -6px;
			top: 5px;
			content: '';
			border: 1px solid #fa0000;
			background: #fff;
			border-right: none;
			border-bottom: none;
			transform: rotate(-48deg);
			width: 13px;
			height: 13px;
			overflow: hidden;
		}
		.surplusHint i{
			font-style: normal;
			color: #ff0000;
			font-weight: 700;
		}
		.redBorder{
			border:1px solid #ff0000 !important;
		}
		/* 配置项 */

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

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

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

		.sliderVal {
			position: absolute;
			right: 30px;
			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;
		}

		#desc {
			width: 100px;
		}

		.col-sm-9>div {
			margin: 4px 0;
			width: 80%;
		}

		.progressParent {
			display: inline-block;
			width: 80%;
		}

		.progressVal {
			display: inline-block;
			text-align: right;
			width: 17%;
		}

		#changeIccid {
			width: 70%;
		}
		/* 配置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;
		}

		#showall,
		#swfDiv {
			/* display: none; */
		}
		.form-horizontal{
			margin-bottom: 50px;
		}
		.form-horizontal .form-group{
			margin: 15px;
		}
		.form-horizontal .control-label{
			padding-top: 0;
		}
	</style>

</head>

<body>
	<div class="content">
		<div class="page-header">
			<span class="headerPlace" onclick="goback('equipmanage_bzy')">
				<img src="{% static '/img/gobackIcon.png' %}" alt="">返回
			</span>

		</div>
		<!-- <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-12 col-md-8">
					<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>
					<!-- 天气： -->
					<span class="userinfoTitle" id="weather"></span>
				</div>
				<div class="col-xs-12 col-md-4 refresh">
					<button class="btn btn-sm btn-primary configurationBtn" onclick="setSimIccid($(this),'{{equip_id}}','{{iccid|default_if_none:"" }}')" {% if iccid %} {% else %} style="display:none" {% endif %}>SIM卡更换</button>

					<button class="btn btn-sm btn-danger configurationBtn" onclick="setSimIccid($(this),'{{equip_id}}','{{iccid|default_if_none:"" }}')" {% if iccid %} style="display:none" {% else %}{% endif %}>SIM卡绑定</button>
					<button type="button" class="btn btn-sm btn-primary" onclick="lookSIM()">查看剩余流量</button>
					<button type="button" class="btn btn-sm btn-success" onclick="reload()">刷新</button>
					<button type="button" class="btn btn-sm btn-primary" id="operationBtn" onclick="coerceshow(this)">操作</button>
					<div class="coerce">
						<button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('关机','poweroff','')">关机</button>
						<button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('开机','poweron','')">开机</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('拍照','ctrl','takephoto','')">拍照</button>
						<button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('拍照','ctrl','takephoto','')">MQTT配置</button>
						<!-- <button type="button" class="btn btn-sm btn-danger" id='coerceOn' onclick="coerceOnOff('制冷','coldon',this,'next')">打开制冷</button> -->
						<!-- <button type="button" class="btn btn-sm btn-danger" id='coerceOff' onclick="coerceOnOff('制冷','coldoff',this,'prev')">关闭制冷</button> -->
					</div>
				</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-md12">
							<!-- <div class="layui-card"> -->
								<button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('关机','poweroff','')">关机</button>
								<button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('开机','poweron','')">开机</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('拍照','ctrl','takephoto','')">拍照</button>
								<button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('设置MQTT配置','set','','')">MQTT配置</button>
							<!-- </div> -->
						</div>
					</div>
				</div>
			</div>
			<!-- 强制配置弹框 -->
			<div id="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">端口</label>
						<div class="col-sm-9">
							<input type="text" id="port" value="1883" 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="mqttUserName" value="" class="col-sm-6" placeholder="">
						</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="mqttPassWord" value="" class="col-sm-6" placeholder="">
						</div>
					</div>
					<div class="clearfix">
						<div class="col-md-offset-3 col-md-9">
							&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>
							<button class="btn btn-sm" type="reset" onclick="closeConfig()">
								<i class="ace-icon fa fa-undo bigger-110"></i>
								重置
							</button>
						</div>
					</div>
				</form>
			</div>
			<div class="searchCover row">
				<div class="col-xs-12 userinfo">
					<i class="fa fa-calendar" aria-hidden="true"></i>
					载玻片更换时间：<input type="text" class="glassSlideBox" id="glassSlideBox" autocomplete="off" placeholder="请选择时间段 ">
					<span class="surplusHint">剩余<i></i>天,请更换</span>
					<!-- <i class="fa fa-eyedropper" aria-hidden="true"></i> -->
					<i class="fa fa-tint" aria-hidden="true"></i>
					培养液更换时间：<input type="text" class="solutionChangeBox" id="solutionChangeBox" autocomplete="off" placeholder="请选择时间段 ">
					<span class="surplusHint">剩余<i></i>天,请更换</span>
				</div>
				
			</div>
			<div class="row">
				<!-- 设备模型 -->
				<div class="col-xs-12 col-md-5">
					<div class="backStyle equipInfo equiptInfo" id="showall">
						<div id="animatCover">
							<img src="{% static '/img/bzyImg2.png'%}" alt="" height="700px">
						</div>
					</div>
				</div>
				<!-- 右边 -->
				<div class="col-xs-12 col-md-7" style="padding-left: 0px;padding-right:0px">
					<!-- 信息条 -->
					<div class="equipInfo">
						<div class="row" style="margin-left: 0;">
							<div class="col-xs-4">
								<div class="haloParent">
									<div class="halo halo4"></div>
									<div class="solidCircle solidCircle4">
										<img class="haloIcon" src="{% static '/img/haloIcon7.png' %}" alt="">
									</div>
								</div>
								<div class="txt">
									<span class="typeResult" id="v_bat">3</span>
									<p class="typeResult">当前电压（V）</p>
								</div>
							</div>
							<div class="col-xs-4">
								<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">1.20.1</span>
									<p class="typeResult">设备版本</p>
								</div>
							</div>
							<div class="col-xs-4 site">
								<div class="haloParent">
									<div class="halo halo5"></div>
									<div class="solidCircle solidCircle5">
										<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="onOff" type="checkbox">
									<div class="switchBj" onclick="sendOrder(this,'设备')" >
										<span></span>
									</div>
								</div>
							</div>
							<div class="backStyle" style="margin-bottom:20px">
								<span class="typeResult tempTitel">制冷开关：</span>
								<div class="switchbox">
									<input class="switchInp" id="coldSw" checked type="checkbox">
									<div class="switchBj" onclick="sendOrder(this,'制冷','')">
										<span></span>
									</div>
								</div>
							</div>
							<div class="backStyle" style="margin-bottom:20px">
									<span class="typeResult tempTitel">散热开关：</span>
									<div class="switchbox">
										<input class="switchInp" id="windSw" checked type="checkbox">
										<div class="switchBj" onclick="sendOrder(this,'风机','all')">
											<span></span>
										</div>
									</div>
								</div>
							<div class="backStyle">
								<div class="temperatureKind">
									<div class="clearfix weatherType">
										<div class="tempTypeValue">
											<p class="font18" id="preTemp"></p>
											<p><i class="fa yellow fa-thermometer-three-quarters" aria-hidden="true"></i>保温仓当前温度（°C）</p>
										</div>
									</div>
									<div class="clearfix weatherType">
										<div class="tempTypeValue" style="margin-left:4%">
											<p class="font18" id="staytime"></p>
											<p><i class="fa fa-clock-o" aria-hidden="true"></i>已培养时间（hour）</p>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- 配置 -->
						<div class="col-xs-8" style="padding-left: 0;">
							<div class="backStyle">
								<div class="configTitlt">载玻片滴液时间</div>
								<div class="configItem">
									<span>载玻片滴液时间：</span>
									<select name="" class="imgHvga" id="dropTimSelectBox">
										<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>
									</select>
								</div>
								<div class="configTitlt">孢子培养时间（h）</div>
								<div class="configItem">
									<div class="setTemperature">
										<span class="initVal">1</span>
										<div class="slider" id="culTime-slider"></div>
										<span class="sliderVal" id="culTime">24</span>
									</div>
								</div>
								<!-- <div class="configTitlt">图片上传分辨率</div>
								<div class="configItem">
									<span>图片上传分辨率：</span>
									<select name="" class="imgHvga" id="imgHvga">
										<option value="0">高</option>
										<option value="1">中</option>
										<option value="2">低</option>
									</select>
								</div> -->
								<div class="configTitlt">保温仓设定温度（°C）</div>
								<div class="configItem">
									<!-- <span>保温仓设定温度：</span> -->
									<div class="setTemperature">
										<span class="initVal">10</span>
										<div class="slider" id="temp-slider"></div>
										<span class="sliderVal" id="tempTime">40</span>
									</div>
								</div>
								<div class="configTitlt">数据上传时间间隔</div>
								<div class="configItem">
									<!-- <span>数据上传时间间隔：</span> -->
									<div class="setTemperature">
										<span class="initVal">10</span>
										<div class="slider" id="dataUp-slider"></div>
										<span class="sliderVal" id="dataUpTime">60</span>
									</div>
								</div>
								<div class="configTitlt">采集开启和关闭时间</div>
								<div class="configItem">
									<span style="float: left;">采集开始和关闭时间：</span>
									<div class="timeSegment">
										<!-- 时间段一 -->
										<div class="collTime">
											<select name="" id="">
												<option value="1">1:00</option>
												<option value="2">2:00</option>
												<option value="3">3:00</option>
												<option value="4">4:00</option>
												<option value="5">5:00</option>
												<option value="6">6:00</option>
												<option value="7">7:00</option>
												<option value="8">8:00</option>
												<option value="9">9:00</option>
												<option value="10">10:00</option>
												<option value="11">11:00</option>
												<option value="12">12:00</option>
												<option value="13">13:00</option>
												<option value="14">14:00</option>
												<option value="15">15:00</option>
												<option value="16">16:00</option>
												<option value="17">17:00</option>
												<option value="18">18:00</option>
												<option value="19">19:00</option>
												<option value="20">20:00</option>
												<option value="21">21:00</option>
												<option value="22">22:00</option>
												<option value="23">23:00</option>
												<option value="24">24:00</option>
											</select>
											至
											<select name="" id="">
												<option value="1">1:00</option>
												<option value="2">2:00</option>
												<option value="3">3:00</option>
												<option value="4">4:00</option>
												<option value="5">5:00</option>
												<option value="6">6:00</option>
												<option value="7">7:00</option>
												<option value="8">8:00</option>
												<option value="9">9:00</option>
												<option value="10">10:00</option>
												<option value="11">11:00</option>
												<option value="12">12:00</option>
												<option value="13">13:00</option>
												<option value="14">14:00</option>
												<option value="15">15:00</option>
												<option value="16">16:00</option>
												<option value="17">17:00</option>
												<option value="18">18:00</option>
												<option value="19">19:00</option>
												<option value="20">20:00</option>
												<option value="21">21:00</option>
												<option value="22">22:00</option>
												<option value="23">23:00</option>
												<option value="24">24:00</option>
											</select>
										<!-- </div> -->
										<!-- 时间段二 -->
										<!-- <div class="collTime"> -->
											<select name="" id="">
												<option value="1">1:00</option>
												<option value="2">2:00</option>
												<option value="3">3:00</option>
												<option value="4">4:00</option>
												<option value="5">5:00</option>
												<option value="6">6:00</option>
												<option value="7">7:00</option>
												<option value="8">8:00</option>
												<option value="9">9:00</option>
												<option value="10">10:00</option>
												<option value="11">11:00</option>
												<option value="12">12:00</option>
												<option value="13">13:00</option>
												<option value="14">14:00</option>
												<option value="15">15:00</option>
												<option value="16">16:00</option>
												<option value="17">17:00</option>
												<option value="18">18:00</option>
												<option value="19">19:00</option>
												<option value="20">20:00</option>
												<option value="21">21:00</option>
												<option value="22">22:00</option>
												<option value="23">23:00</option>
												<option value="24">24:00</option>
											</select>
											至
											<select name="" id="">
												<option value="1">1:00</option>
												<option value="2">2:00</option>
												<option value="3">3:00</option>
												<option value="4">4:00</option>
												<option value="5">5:00</option>
												<option value="6">6:00</option>
												<option value="7">7:00</option>
												<option value="8">8:00</option>
												<option value="9">9:00</option>
												<option value="10">10:00</option>
												<option value="11">11:00</option>
												<option value="12">12:00</option>
												<option value="13">13:00</option>
												<option value="14">14:00</option>
												<option value="15">15:00</option>
												<option value="16">16:00</option>
												<option value="17">17:00</option>
												<option value="18">18:00</option>
												<option value="19">19:00</option>
												<option value="20">20:00</option>
												<option value="21">21:00</option>
												<option value="22">22:00</option>
												<option value="23">23:00</option>
												<option value="24">24:00</option>
											</select>
										<!-- </div> -->
										<!-- 时间段三 -->
										<!-- <div class="collTime"> -->
											<select name="" id="">
												<option value="1">1:00</option>
												<option value="2">2:00</option>
												<option value="3">3:00</option>
												<option value="4">4:00</option>
												<option value="5">5:00</option>
												<option value="6">6:00</option>
												<option value="7">7:00</option>
												<option value="8">8:00</option>
												<option value="9">9:00</option>
												<option value="10">10:00</option>
												<option value="11">11:00</option>
												<option value="12">12:00</option>
												<option value="13">13:00</option>
												<option value="14">14:00</option>
												<option value="15">15:00</option>
												<option value="16">16:00</option>
												<option value="17">17:00</option>
												<option value="18">18:00</option>
												<option value="19">19:00</option>
												<option value="20">20:00</option>
												<option value="21">21:00</option>
												<option value="22">22:00</option>
												<option value="23">23:00</option>
												<option value="24">24:00</option>
											</select>
											至
											<select name="" id="">
												<option value="1">1:00</option>
												<option value="2">2:00</option>
												<option value="3">3:00</option>
												<option value="4">4:00</option>
												<option value="5">5:00</option>
												<option value="6">6:00</option>
												<option value="7">7:00</option>
												<option value="8">8:00</option>
												<option value="9">9:00</option>
												<option value="10">10:00</option>
												<option value="11">11:00</option>
												<option value="12">12:00</option>
												<option value="13">13:00</option>
												<option value="14">14:00</option>
												<option value="15">15:00</option>
												<option value="16">16:00</option>
												<option value="17">17:00</option>
												<option value="18">18:00</option>
												<option value="19">19:00</option>
												<option value="20">20:00</option>
												<option value="21">21:00</option>
												<option value="22">22:00</option>
												<option value="23">23:00</option>
												<option value="24">24:00</option>
											</select>
										</div>
									</div>
								</div>
								<div class="clearfix">
									<div class="" style="text-align:right">
										<button class="btn btn-sm" type="reset" onclick="cancelConfig()">
											取消
										</button>
										&nbsp; &nbsp; &nbsp;
										<button class="btn btn-sm btn-info" type="button" onclick="paramconf()">
											确定
										</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 配置项 -->
		<div class="modal" id="myModal" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog" aria-labelledby="myModalLabel"
		 style="display: none;">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="widget-header">
						<h4 class="widget-title">
							SIM卡详情：
							<span id="sppbId"></span>
							<!-- <input type="hidden" value="" id="hideId" name="id"> -->
						</h4>
						<div class="widget-toolbar">
							<a href="#" data-dismiss="modal" aria-hidden="true">
								<i class="ace-icon fa fa-times"></i>
							</a>
						</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;"> ICCID: </font>
									</font>
								</label>
								<div class="col-sm-9">
									<div class="currIccid"></div>
								</div>
								<div style="clear:both"></div>
							</div>
							<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">
									<div id="account_status"></div>
								</div>
								<div style="clear:both"></div>
							</div>
							<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">
									<div id="data_plan">
										<div class="progressParent">
											<div class="layui-progress">
												<div class="layui-progress-bar layui-bg-blue" lay-percent="100%"></div>
											</div>
										</div>
										<div class="progressVal"></div>
									</div>
								</div>
								<div style="clear:both"></div>
							</div>
							<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">
									<div id="data_usage">
										<div class="progressParent">
											<div class="layui-progress">
												<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
											</div>
										</div>
										<div class="progressVal"></div>
									</div>
								</div>
								<div style="clear:both"></div>
							</div>
							<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">
									<div id="data_balance">
										<div class="progressParent">
											<div class="layui-progress" lay-filter="demo">
												<div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
											</div>
										</div>
										<div class="progressVal"></div>
									</div>
								</div>
								<div style="clear:both"></div>
							</div>
							<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">
									<div class="expiry_date">2019-11-01 13:59:35</div>
								</div>
								<div style="clear:both"></div>
							</div>
							<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;"> 更换ICCID: </font>
									</font>
								</label>
								<div class="col-sm-9">
									<input type="text" id="changeIccid" autocomplete="off">
								</div>
								<div style="clear:both"></div>
							</div>
							<!-- 结束 -->
						</div>
						<div class="collocateBtn">
							<button class="btn btn-sm btn-info" onclick="saveChangeIccid()">
								<font style="vertical-align: inherit;">
									<font style="vertical-align: inherit;">确定</font>
								</font>
							</button>
							<button class="btn  btn-sm" data-dismiss="modal" aria-hidden="true">
								<font style="vertical-align: inherit;">
									<font style="vertical-align: inherit;">取消</font>
								</font>
							</button>
						</div>
					</div>
					<div>
					</div>
				</div>
			</div>
		</div>
		<!-- loading -->
		<input type="hidden" value="{{equip_id}}" id="imei">
		<input type="hidden" value="" id="iccid">
	</div>
		<script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
		<script src="{% static '/lib/bootstrap-3.3.7/js/bootstrap.js' %}"></script>
    	<script src="{% static '/lib/layui/layui.all.js' %}"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=TcRPmrsiZUqdUBWoELrUArRkCRC36KMx"></script>
		<script src="{% static '/lib/js/jquery-ui.min.js' %}"></script>
		<script src="{% static '/lib/js/jquery.ui.touch-punch.min.js' %}"></script>
		<script src="{% static '/lib/js/coordOffset.js' %}"></script><!-- 纠偏 -->
		<script src="{% static '/js/common.js' %}?versions=0.5.0"></script>
		<script type="text/javascript">
			$.ajaxSetup({
				data: { csrfmiddlewaretoken: '{{ csrf_token }}' },
			});
		</script>
		<script src="{% static '/js/equipmanage/equipmanage_bzy_detail.js' %}?versions=0.5.0"></script>
		<script>
			//模态框 关闭前事件
			$('#myModal').on('hide.bs.modal', function () {
				window.location.href = 'equipmanage_bzy_detail?id='+$('#imei').val()
			})

			// 配置按钮
			function setSimIccid(ele, id, iccid) {
				if (!iccid) {
					layui.use('layer', function () {
						var layer = layui.layer;
						layer.prompt({ title: 'SIM卡绑定', formType: 0 }, function (text, index) {
							if (text.length == 20) {
								// changeIccidFun(id, text, function () { })
								readSim(id, text)
								// layer.close(index);
							} else {
								layer.msg('请输入正确SIM卡号');
							}
							// layer.msg('演示完毕！您的口令： <br>您最后写下了：'+text);
						});
					})
				} else {
					readSim(id, iccid)
				}

				$(window).resize(function () {
					// moveBar()
				});
			}

			function readSim(id, iccid) {
				$.ajax({
					type: "post",
					url: 'siminfo',
					data: {
						"simid": iccid,
					},
					dataType: "json",
					beforeSend: function () {
						$('#loadingParent').show();
					},
					complete: function () {
						$('#loadingParent').hide();
					},
					success: function (data) {
						if (data.code == 0) {
							layer.closeAll();
							saveIccid(id, iccid, data);
						} else {
							layer.msg('物联网卡不存在', { icon: 5 });
							$('#changeIccid').val('');
						}

					}
				})
			}

			function saveIccid(id, iccid, data1) {
				$.ajax({
					type: "post",
					url: 'equip_simiccid',
					data: {
						"e_id": id,
						"iccid": iccid,
					},
					dataType: "json",
					beforeSend: function () {
						$('#loadingParent').show();
					},
					complete: function () {
						$('#loadingParent').hide();
					},
					success: function (data) {
						if (data == 0) {
							$('#sppbId').html(id);
							$('.currIccid').html(iccid);
							if (data1.data.account_status == 0) {
								var status = '未知';
							} else if (data1.data.account_status == 1) {
								var status = '测试期';
							} else if (data1.data.account_status == 2) {
								var status = '沉默期';
							} else if (data1.data.account_status == 3) {
								var status = '使用中';
							} else if (data1.data.account_status == 4) {
								var status = '停机';
							} else if (data1.data.account_status == 5) {
								var status = '停机保号';
							} else if (data1.data.account_status == 6) {
								var status = '预销号';
							} else if (data1.data.account_status == 7) {
								var status = '销号';
							}
							$('#account_status').html(status);
							$('#data_plan').find('.progressVal').html((data1.data.data_plan).toFixed(2) + 'MB');
							$('#data_plan').find('.layui-progress-bar').attr('lay-percent', '10%');

							$('#data_usage').find('.progressVal').html((data1.data.data_usage).toFixed(2) + 'MB');
							var data_usage = data1.data.data_usage / data1.data.data_plan * 100;
							$('#data_usage').find('.layui-progress-bar').css('width', data_usage + '%');

							$('#data_balance').find('.progressVal').html((data1.data.data_balance).toFixed(2) + 'MB');
							var data_usage = data1.data.data_balance / data1.data.data_plan * 100;
							$('#data_balance').find('.layui-progress-bar').css('width', data_usage + '%');

							var date = new Date(data1.data.expiry_date * 1000);
							$('.expiry_date').html(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds());
							$('#myModal').modal('show')
						}
					}
				})
			}

			function saveChangeIccid() {
				if ($('#changeIccid').val()) {
					readSim($('#sppbId').html(), $('#changeIccid').val())
					$('#changeIccid').val('')
				} else {
					layer.msg('请先填写ICCID', { icon: 2 });
				}

			}
			scrollBar();
		</script>
</body>

</html>