yf_zd
/
commonApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660
							

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/reset.css" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<link href="../css/common.css" rel="stylesheet" />

		<style type="text/css">
			.iconfont {
				font-size: 35px;
				color: #3bb9e7;
				/*font-weight: bold;*/
				line-height: 80px;
				margin: 10px 10px 10px 20px;
			}
			.equipState {
				font-size: 18px;
				margin-top: 14px;
				color: #333;
			}
			.conversion {
				width: 110px;
			}
			@media(max-width: 400px) {
				.mui-col-sm-6 {
					width: 50%;
				}
			}
			#detial>div {
				border-bottom: 2px solid #eee;
			}
			.topBorder{
				border-top: 2px solid #eee;
			}
			
			#detial>div:nth-of-type(odd) {
				border-right: 2px solid #eee;
			}
			#detial .mui-navigate-right {
				line-height: 80px;
			}
			.clearfix:after {
				content: " "; 
				display: block; 
				clear: both; 
				visibility: hidden; 
				line-height: 0; 
				height: 0; 
				font-size: 0;
			}
			.clearfix{
				*zoom:1;
			}
			.fl{
				float: left;
			}
			
			body,.mui-content{
				background: #fff;
			}
			.msgTop{
				background: #24b2e7;
				background: url(../images/bluesky.jpg) no-repeat;
				background-size: 100% 120%;
			    position: relative;
			    height: 150px;
			}
			.currEquip{
				color: #fff;
			    font-size: 14px;
			    position: absolute;
			    bottom: 15px;
			    left: 35px;
			}
			.currEquipId{
				font-size: 18px;
			    line-height: 34px;
			    color: #fffac9;
			    font-weight: 700;
			}
			.equipImg{
				position: absolute;
			    right: 37px;
			    bottom: 0px;
			}
			/*统计图*/
			.echartsBox{
				text-align: center;
			}
			.timeSelectUl{
				display: inline-block;
			    border: 1px solid #eee;
			    margin: 15px 0 0;
			}
			.timeSelectUl >li{
				padding: 5px 14px;
			    border-left: 1px solid #eee;
			    color: #a5a5a5;
			}
			.timeSelectUl >li:nth-child(1){
				border: none;
			}
			.timeSelectUl >li.active{
				color: #13a1e2;
			}
			.chart{
				height: 250px;
				/*background: red;*/
			}
			.progressBarBox{
				margin-left: 5%;
			}
			.progressBarBox >li{
				width: 30%;
				text-align: center;
			}
			.progressBartitle{
				text-align: center;
			    font-size: 14px;
			    margin: 15px 0 7px;
			    color: #333;
			}
			.circleChart_text{
				color: #13a1e2;
    			font-size: 20px !important;
			}
			/*分界线*/
			.boundaryline{
				width: 100%;
				height: 10px;
				background: #F3F3F3;
			}
			/*数据*/
			.dataShowBox >h1{
				padding-left: 30px;
			    margin: 10px 0 10px 15px;
			    background: url(../images/statusTag.png) no-repeat 0 2px;
			    line-height: 25px;
			    font-weight: 700;
			}
			.dataShowBox hr{
				margin: 0 12px 10px 12px;
				border: 1px dashed #e7f3fc;
			}
			.dataShowBox >.equipStatus{
				background: url(../images/statusTag.png) no-repeat 0 -26px;
			}
			/*查看详情*/
			.lookDetialBox{
				text-align: center;
    			margin: 20px 0;
			}
			.lookDetialBox button{
				width: 80%;
    			border-radius: 15px;
			}
			/*查看详情*/
			.areaTitle {
			    color: #424242;
			    padding-left: 30px;
			    /*border-left: 14px solid #ff6e00;*/
			    font-weight: bold;
			    font-size: 16px;
			    position: relative;
			    background: url(../images/statusTag.png) no-repeat 0 -52px;
			}
			.detialBox .fa{
				padding-right: 5px;
    			color: #3bb9e7;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="title">测报灯数据详情</h1>
			<!--<a class="headRightIcon fa fa-search mui-pull-right" id="reloadEquip">查询</a>-->
		</header>
		<div class="mui-content">
			<div class="msgTop">
				<div class="currEquip">
					<div id="currEquipId" class="currEquipId"></div>
					<div id="upl_time"></div>
				</div>
				<img class="equipImg" src="../images/cbdequipImg.png" width="50" height="130"/>
			</div>
			<div class="echartsBox">
				<div class="timeSelectBox">
					<ul class="timeSelectUl clearfix">
						<li class="fl active">近1月</li>
						<li class="fl">近3月</li>
						<li class="fl">近1年</li>
						<li class="fl">累计至今</li>
					</ul>
				</div>
				<div class="chart" id="lineChart"></div>
			</div>
			<div class="boundaryline"></div>
			<div class="dataShowBox">
				<h1>测报灯仓内数据</h1>
				<hr />
				<div>
					<ul class="progressBarBox clearfix">
						<li class="fl">
							<!--<div class="circleChart" id="circleChart1"></div>-->
							<canvas id="circleChart1" width="95%" height="95%"></canvas>
							<div class="progressBartitle">环境湿度(%RH)</div>
						</li>
						<li class="fl">
							<!--<div class="circleChart" id="c1"></div>-->
							<canvas id="circleChart2" width="95%" height="95%"></canvas>
							
							<div class="progressBartitle">环境温度(℃)</div>
						</li>
						<li class="fl">
							<!--<div class="circleChart" id="c2"></div>-->
							<canvas id="circleChart3" width="95%" height="95%"></canvas>
							
							<div class="progressBartitle">加热仓温度(℃)</div>
						</li>
					</ul>
				</div>
				<!--状态-->
				<h1 class="equipStatus">测报灯当前状态</h1>
				<hr style="margin-bottom: 0;" />
				<div class="mui-row" id="detial">
					<div class="mui-col-xs-6">
						<div class="mui-pull-left">
							<i class="iconfont">&#xe635;</i>
						</div>
						<div class="mui-pull-left ">
							<p class="equipState" id="rps"></p>
							<p class="equipFun">雨控状态</p>
						</div>
					</div>
					<div class="mui-col-xs-6">
						<div class="mui-pull-left">
							<i class="iconfont">&#xe64c;</i>
						</div>
						<div class="mui-pull-left ">
							<p class="equipState" id="lps"></p>
							<p class="equipFun">光控状态</p>
						</div>
					</div>
					<div class="mui-col-xs-6">
						<div class="mui-pull-left">
							<i class="iconfont">&#xe711;</i>
						</div>
						<div class="mui-pull-left ">
							<p class="equipState conversion" id="lng"></p>
							<p class="equipFun">经度</p>
						</div>
					</div>
					<div class="mui-col-xs-6">
						<div class="mui-pull-left">
							<i class="iconfont">&#xe634;</i>
						</div>
						<div class="mui-pull-left ">
							<p class="equipState conversion" id="lat"></p>
							<p class="equipFun">纬度</p>
						</div>
					</div>
					<div class="mui-col-xs-6">
						<div class="mui-pull-left">
							<i class="iconfont">&#xe633;</i>
						</div>
						<div class="mui-pull-left ">
							<p class="equipState" id="tps"></p>
							<p class="equipFun">温控状态</p>
						</div>
					</div>
					<div class="mui-col-xs-6">
						<div class="mui-pull-left">
							<i class="iconfont">&#xe688;</i>
						</div>
						<div class="mui-pull-left " id="lookImg">
							<div class="mui-navigate-right">查看图片</div>
						</div>
					</div>
				</div>
			</div>
			<ul class="mui-table-view detialBox">
				<li class="mui-table-view-cell">
					<h1 class="areaTitle">配置设备操作</h1>
				</li>
				<!--<li class="mui-table-view-cell" id="lookImg">
			        <a class="mui-navigate-right">
			        	<i class="fa fa-file-image-o" aria-hidden="true"></i>
			        	查看图片
			        </a>
			    </li>-->
			    <li class="mui-table-view-cell" id="lookDetial">
			        <a class="mui-navigate-right">
			        	<i class="fa fa-list" aria-hidden="true"></i>
			        	查看列表详情
			        </a>
			    </li>
			    <li class="mui-table-view-cell" id="reloadEquip">
			        <a class="mui-navigate-right">
			        	<i class="fa fa-refresh" aria-hidden="true"></i>
			        	查询最新状态
			        </a>
			    </li>
			    <li class="mui-table-view-cell" id="wormChart">
			        <a class="mui-navigate-right">
			        	<i class="fa fa-line-chart" aria-hidden="true"></i>
			        	害虫统计
			        </a>
			    </li>
			</ul>
		</div>

		<script src="../js/jquery-2.1.0.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/echarts.js"></script>
		<script src="../js/progress.js"></script>
		<script type="text/javascript">
			mui.init();
			var equipId;
			var equipName;
			//统计按钮查询
			$('.timeSelectUl').on('tap','li',function(){
				if(!$(this).hasClass('active')){
					var year = [1,3,12,""]
					$('.timeSelectUl li').removeClass('active');
					$(this).addClass('active');
					getChartData(year[$(this).index()])
				}
			})
			
			// 1基于准备好的dom，初始化echarts实例
			var lineChart = echarts.init(document.getElementById('lineChart'));
			// 指定图表的配置项和数据
			var lineOption = {
				tooltip: {
					trigger: 'axis',
					formatter: function(params) {
						if(params.length > 1) {
							var returnData = '';
							var time = '';
							for(var g in params) {
								time = params[g].axisValue;
								if(params[g].seriesIndex == 0){
									returnData += params[g].seriesName + ':' + params[g].value + '°C<br/>';
								}else{
									returnData += params[g].seriesName + ':' + params[g].value + '%<br/>';
								}
							}
							return time + '<br/>' + returnData;
						}
					}
				},
				grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '5%',
			        containLabel: true
			    },
				legend: {
					x:'center',
					y:'20',
					data: ['环境温度', '环境湿度'],
				},
				xAxis: {
					type: 'category'
				},
				dataZoom : {
						type:'inside',
				    },
				yAxis: {
					axisLine:{
                        lineStyle:{
                            color:'#aeabae',
                            width:0,//这里是为了突出显示加上的
                        }
                 	},
                 	splitLine: { show: true,  // Y轴的横线显示
				      lineStyle: {
				        type: 'dashed'
				      }
				    },
					type: 'value', //数据
				},
				series: [{
					name: '环境温度',
					type: 'line',
					smooth: true, //是否平滑曲线显示
					itemStyle: {
						normal: {
							color: '#6ecdfe'
						}
					}
				}, {
					name: '环境湿度',
					type: 'line',
					smooth: true, //是否平滑曲线显示
					itemStyle: {
						normal: {
							color: '#5689f2'
						}
					}
				}]
			};
			
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				equipId = self.equipId;
//				upl_time = self.upl_time
				$('#currEquipId').html('ID：'+equipId);
//				$('#upl_time').html(upl_time);
				//详情
				requestData();
				//统计图
				getChartData(1)
				
				//查看图片
				document.getElementById('lookImg').addEventListener('tap', function() {
					mui.openWindow({
						url: 'lookImage.html',
						id: 'lookImage',
						extras: {
							equipId: equipId
						}
					})
				})
				
				//查看详情
				document.getElementById('lookDetial').addEventListener('tap', function() {
					mui.openWindow({
						url: 'cbd_detail_list.html',
						id: 'cbd_detail_list',
						extras: {
							equipId: equipId,
							equipName:equipName
						}
					})
				})
				//查询
				document.getElementById('reloadEquip').addEventListener('tap',function(){
					mui.ajax('http://120.27.222.26/scd_mqtt',{
						data:{
							'sw': 'read',
							'topicid': equipId,
							'kind': 'data'
						},
						dataType:'json',//服务器返回json格式数据
						type:'post',//HTTP请求类型
						timeout: 10000,//超时时间设置为10秒；
						beforeSend: function() {
							plus.nativeUI.showWaiting('请求中...');
						},
						complete: function() {
							setTimeout(function() {
								plus.nativeUI.closeWaiting();
							}, 4000); 
						},
						success:function(data){
							setTimeout(function() {
								mui.toast('查询成功')
								window.location.reload();
							}, 4000); 
						},
						error:function(xhr,type,errorThrown){
							mui.toast('查询失败')
						}
					});
				})
				//害虫统计
				document.getElementById('wormChart').addEventListener('tap', function() {
					mui.openWindow({
						url: 'cbd_pest_data.html',
						id: 'cbd_pest_data',
						extras: {
							equipId: equipId,
							equipName:equipName
						}
					})
				})
			})
			//请求图表数据：
			function getChartData(monthNum){
				if(monthNum){
					var begindate = new Date();
					begindate.setMonth(begindate.getMonth()-monthNum);
			        var ybegin = begindate.getFullYear();
			        var mbegin = begindate.getMonth()+1;
			        var dbegin = begindate.getDate();
			        
			        var nowdate = new Date();
			        var ynow = nowdate.getFullYear();
			        var mnow = nowdate.getMonth()+1;
			        var dnow = nowdate.getDate();
			        var beginTime = ybegin+'-'+mbegin+'-'+dbegin;
			        var endTime = ynow+'-'+mnow+'-'+dnow;
				}else{
					var beginTime = '';
			        var endTime = '';
				}
				
				
				$.ajax({
					url: 'http://120.27.222.26/cbd_report_detail_chart',
					type: 'post',
					data: {
						'id':equipId,
						'req': 'filter',
						'begin': beginTime,
						'end': endTime
					},
					success: function(data) {
						var temp = eval('(' + data + ')');
						var at = [],
							ah = [],
							time = [],
							cv = [],
							bv = [],
							ct = [];
						for(var i = 0; i < temp.length; i++) {
							at.unshift(Number(temp[i].at / 10).toFixed(1));
							ah.unshift(Number(temp[i].ah / 10).toFixed(1));
							cv.unshift((Number(temp[i].cv) / 1000).toFixed(1));
							bv.unshift((Number(temp[i].bv) / 1000).toFixed(1));
							ct.unshift(Number(temp[i].ct));
							time.unshift(temp[i].tim);
						}
						lineOption.series[0].data = at;
						lineOption.series[1].data = ah;
						lineOption.xAxis.data = time;

						if(!temp.length) {
							lineOption.series[0].data = [0];
							lineOption.xAxis.data = ['暂无数据'];
						}

						// 使用刚指定的配置项和数据显示图表。
						setTimeout(function() {
							lineChart.setOption(lineOption);
						})
					}
				})
			}

			function requestData() {
				mui.ajax('http://120.27.222.26/app_reportmanage_unflod', {
					data: {
						'etype': 'cbd',
						'equip_id': equipId,
					},
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					beforeSend: function() {
						plus.nativeUI.showWaiting('请求中...');
					},
					complete: function() {
						plus.nativeUI.closeWaiting();
					},
					success: function(data) {
//						console.log(JSON.stringify(data))
						upl_time = data.upl_time
						$('#upl_time').html(upl_time);
//						var discern = data.discern
//						if(!discern){
//							$('#wormChart').show();
//						}else{
//							$('#wormChart').hide();
//						}
						equipName = data.equip_name || '无'
						var stat = eval('(' + data.cbd_data + ')');
//						$('#at').html((stat.at / 10).toFixed(1)); //温度
//						$('#ah').html((stat.ah / 10).toFixed(1));
//						$('#hrt').html(stat.hrt);
						var rps = stat.rps == 0 ? '正常':'雨控';
						$('#rps').html(rps);
						var tps = stat.tps == 0 ? '正常':'温控';
						$('#tps').html(tps);
						var lps = stat.lps == 0 ? '夜晚':'白天';
						$('#lps').html(lps);
						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);
				        }
				        //判断当前设备是否具备图片识别功能
				        console.log(data.discern)
				        if (data.discern == 1) {
				        	console.log('全都有')
				        	localStorage.setItem('possess', '1')
				        	$('#wormChart').show()
				        } else if (data.discern == 2) {
				        	//有统计无识别
				        	localStorage.setItem('possess', '0')
				        	console.log('有统计无识别')
				        	$('#wormChart').show()
				        } else if (data.discern == 0) {
				        	console.log('啥都没')
				        	localStorage.setItem('possess', '0')
				        	$('#wormChart').hide()
				        }
				        $('#lng').html(lng.toFixed(4));
				        $('#lat').html(lat.toFixed(4));
				        //进度条
						var p1 = new Progress({
						    el: 'circleChart1', //canvas元素id
						    deg: (stat.ah / 10).toFixed(1), //填入你的数据 如data
						    currtype:'%RH',
						    timer: 10, //绘制时间
						    lineWidth: 10, //线宽
						    lineBgColor: '#f4f3f3', //底圆颜色
						    lineColor: '#1f8aff', //动态圆颜色
						    textColor: '#1f8aff', //文本颜色
						    fontSize: 20, //字体大小
						    circleRadius: 100 //圆半径
						});
						var p2 = new Progress({
						    el: 'circleChart2', //canvas元素id
						    deg: (stat.at / 10).toFixed(1), //填入你的数据 如data
						    currtype:'℃',
						    timer: 10, //绘制时间
						    lineWidth: 10, //线宽
						    lineBgColor: '#f4f3f3', //底圆颜色
						    lineColor: '#1f8aff', //动态圆颜色
						    textColor: '#1f8aff', //文本颜色
						    fontSize: 20, //字体大小
						    circleRadius: 100 //圆半径
						});
						var p3 = new Progress({
						    el: 'circleChart3', //canvas元素id
						    deg: stat.hrt, //填入你的数据 如data
						    currtype:'℃',
						    timer: 10, //绘制时间
						    lineWidth: 10, //线宽
						    lineBgColor: '#f4f3f3', //底圆颜色
						    lineColor: '#1f8aff', //动态圆颜色
						    textColor: '#1f8aff', //文本颜色
						    fontSize: 20, //字体大小
						    circleRadius: 100 //圆半径
						});
					},
					error: function(xhr, type, errorThrown) {
						mui.toast('数据请求失败');
					}
				})
			}

		</script>
	</body>

</html>