yf_zd
/
yfApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386
							<!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 rel="stylesheet" href="../css/reset.css" />
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/common.css" />
		<script src="../js/base.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.mui-content,
			body,
			html {
				background: #fff;
			}
			.mui-content{
				padding-bottom: 60px;
			}
			
			.echartsBox {
				height: 3.3rem;
			}
			
			.innerDiv {
				padding: .3rem;
			}
			
			.equipInfo>ul>li {
				line-height: 50px;
				overflow: hidden;
			}
			
			.equipInfo {
				margin: .2rem .3rem 0;
			}
			
			.equipInfo>ul>li>img {
				width: 41px;
				height: 41px;
			}
			
			.titleItem {
				margin-left: .4rem;
				color: #999;
				letter-spacing: .03rem;
			}
			
			.rightVal {
				float: right;
				height: 50px;
				line-height: 50px;
			}
			
			#operationBtns {
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				height: 50px;
				box-shadow: 1px 1px 4px #bfbfbf;
				background: #fff;
			}
			
			#operationBtns>div {
				width: 100%;
				height: 100%;
				text-align: center;
			}
			
			#operationBtns>div>span {
				width: 40%;
				display: inline-block;
				height: 40px;
				line-height: 40px;
				margin-top: 5px;
				color: #999;
			}
			
			#operationBtns>div .mui-icon {
				vertical-align: middle;
			}
		</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">详情</h1>
		</header>
		<div class="mui-content">
			<div class="innerDiv">
				<div class="echartsBox">
					<div id="main" style="height:100%"></div>
				</div>
				<div class="equipInfo">
					<ul>
						<li>
							<img src="../images/xyqIcon1.png" />
							<span class="titleItem">设备ID</span>
							<span class="rightVal" id="equip_id"></span>
						</li>
						<li>
							<img src="../images/xyqIcon2.png" />
							<span class="titleItem">设备位置</span>
							<span class="rightVal" id="addr"></span>
						</li>
						<li>
							<img src="../images/xyqIcon3.png" />
							<span class="titleItem">环境温度</span>
							<span class="rightVal" id="tem"></span>
						</li>
						<li>
							<img src="../images/xyqIcon4.png" />
							<span class="titleItem">环境湿度</span>
							<span class="rightVal" id="hum"></span>
						</li>
						<li>
							<img src="../images/xyqIcon5.png" />
							<span class="titleItem">监测害虫名称</span>
							<span class="rightVal" id="pest"></span>
						</li>
						<li>
							<img src="../images/xyqIcon6.png" />
							<span class="titleItem">监测害虫数量</span>
							<span class="rightVal" id="pestnum"></span>
						</li>
						<li>
							<img src="../images/xyqIcon7.png" />
							<span class="titleItem">上报时间</span>
							<span class="rightVal" id="uplTime"></span>
						</li>
					</ul>
				</div>
			</div>
			<div id="operationBtns">
				<div id="">
					<span id="lookPicture">
						<span class="mui-icon mui-icon-image"></span> 查看图片
					</span>
					<span id="lookRecord">
						<span class="mui-icon mui-icon-list"></span> 历史记录
					</span>
				</div>

			</div>
		</div>
		<script src="../js/jquery-2.1.0.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
		<script type="text/javascript">
			mui.init()
			var equipId;
			var dat;
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				equipId = self.equipId;
				dat = JSON.parse(self.dat);
				fullData(dat);
				requestData();
			})

			function fullData(dat) {
				$('#equip_id').html(dat.equip_id)
				$('#addr').html(dat.addr)
				$('#tem').html(dat.tem + ' °C')
				$('#hum').html(dat.hum + ' RH')
				$('#pest').html(dat.pest)
				$('#pestnum').html(dat.pestnum + ' 只')
				$('#uplTime').html(dat.upl_time)
			}
			// 路径配置
			require.config({
				paths: {
					echarts: 'http://echarts.baidu.com/build/dist'
				}
			});
			// 使用
			require(
				[
					'echarts',
					'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
				],
				function(ec) {
					// 基于准备好的dom，初始化echarts图表
					var myChart = ec.init(document.getElementById('main'));

					// 为echarts对象加载数据 
					myChart.setOption(echartOption([], [], []));
				}
			);
			//echart option
			function echartOption(legend, upTime, series) {
				var array = [];
				array.push(legend);
				return option = {
					tooltip: {
						show: true,
						trigger: 'axis',
					},
					legend: {
						data: legend
					},
					grid: {
						x: '40px',
						y: '40px',
						x2: '10px',
						x2: '10px',
						borderWidth: 0,
						borderColor: 'rgba(0,0,0,0)'
					},
					dataZoom: {
						show: true,
						//      				backgroundColor:''
					},
					xAxis: [{
							axisLine: { // 坐标轴线
								//									show: false, // 默认显示，属性show控制显示与否
							},
							type: 'category',
							data: upTime,
							splitLine: {　　　　
								show: false　　
							},
							//								axisLabel: {
							//									textStyle: {
							//										color: '#fff', //坐标值得具体的颜色
							//
							//									}
							//								}
						}

					],
					yAxis: [{
						type: 'value',
						axisLine: { // 坐标轴线
							show: false, // 默认显示，属性show控制显示与否
						},
						axisLabel: {
							textStyle: {
								//									color: '#fff', //坐标值得具体的颜色

							}
						}
					}],
					//						series: [{
					//							"name": legend,
					//							"type": "line",
					//							itemStyle: {
					//								normal: {
					//									color: '#61ecff',
					//									lineStyle: {
					//										color: '#61ecff'
					//									}
					//								}
					//							},
					//							"data": seriesDat
					//						}]
					series: series
				};
			}

			function requestData() {
				mui.ajax('http://120.27.222.26/xyq_report_detail_chart', {
					data: {
						req: 'data',
						id: equipId,
					},
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 100000, //超时时间设置为10秒；
					beforeSend: function() {
						plus.nativeUI.showWaiting('请求中...');
					},
					complete: function() {
						plus.nativeUI.closeWaiting();
					},
					success: function(data) {
						collectData(data)
					},
					error: function(xhr, type, errorThrown) {
						$('#currEquipId').hide();
						$('.detialBox').hide();
						$('#reloadEquip').hide();
						mui.toast('数据请求失败');
					}
				})
			}

			var color = ['#5689f2', '#00c1de', '#db1f59', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800'];

			function collectData(dat) {
				var at = [],
					ah = [],
					pestnum = [],
					time = [],
					legend = ['环境温度', '环境湿度', ''];
				var allVal = [];
				if(dat.length) {
					legend = ['环境温度', '环境湿度', dat[0].pest];
					for(var i = 0; i < dat.length; i++) {
						at.unshift(dat[i].at);
						ah.unshift(dat[i].ah);
						pestnum.unshift(dat[i].pestnum);
						time.unshift(dat[i].upl_time);
						if(i == dat.length - 1) {
							allVal.push(at)
							allVal.push(ah)
							allVal.push(pestnum);
							var seriesArr = [];
							for(var j = 0; j < allVal.length; j++) {
								var jsonStr = {
									"name": legend[j],
									"type": "line",
									itemStyle: {
										normal: {
											color: color[j],
											shadowBlur: 1,
											shadowColor: color[j],
											borderColor: color[j],
											borderWidth: 2,
											backgroundColor: 'transparent'
										}
									},
									areaStyle: {
										normal: {
											color: color[j],
										}
									},
									"data": allVal[j]
								}
								seriesArr.push(jsonStr);
								if(j == allVal.length - 1) {
									// 非入口或再次使用，图表已被加载注册
									var echarts = require('echarts').init(document.getElementById('main'));
									echarts.setOption(echartOption(legend, time, seriesArr));
								}
							}
						}
					}

				} else {
					// 非入口或再次使用，图表已被加载注册
					var echarts = require('echarts').init(document.getElementById('main'));
					var seriesArr = {
						"name": [],
						"type": "line",
						itemStyle: {
							normal: {
								color: color[j],
								shadowBlur: 1,
								shadowColor: color[j],
								borderColor: color[j],
								borderWidth: 2,
								backgroundColor: 'transparent'
							}
						},
						"data": []
					}
					echarts.setOption(echartOption([], [], [seriesArr]));
				}
			}
			
			$('#lookPicture').on('tap',function(){
				mui.openWindow({
					url: 'reprotManage_xyq_imglist.html',
					id: 'reprotManage_xyq_imglist',
					extras: {
						'equipId': equipId,
					},
				})
			})
			$('#lookRecord').on('tap',function(){
				mui.openWindow({
					url: 'reprotManage_xyq_recordlist.html',
					id: 'reprotManage_xyq_recordlist',
					extras: {
						'equipId': equipId,
					},
				})
			})
		</script>
	</body>

</html>