yf_zd
/
yfApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471
							<!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 rel="stylesheet" href="../css/mobiscroll.custom-3.0.0-beta6.min.css">
		<link href="../css/common.css" rel="stylesheet" />
		<link href="../css/swiper.min.css" rel="stylesheet" />

		<style type="text/css">
			body,
			.qxzCategory {
				/*background: #7432fe;*/
			}
			
			.mui-bar-nav {
				box-shadow: 0 1px 6px #21b2e7;
			}
			
			.echart {
				/*background: linear-gradient(#21b2e7, #7600ff);*/
			}
			
			.currTime {
				/*background: #7432fe;*/
				background: #ddebf0;
				/*color: #fff;*/
				line-height: 33px;
				font-size: 14px;
				padding: 10px 0;
				/*border-bottom: 1px solid #c0c0c0 !important;*/
			}
			
			.wormCategory {
				width: 40%;
				/*color: #333;*/
				padding-left: 10px;
				/*background: #ddebf0;*/
				border: 1px solid #c0c0c0 !important;
				background: #fff url(../images/downArrows.png) no-repeat 95%;
				background-size: 30px;
			}
		</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="mui-icon mui-icon-search mui-pull-right" id="date"></a>
			<!--<a class="headRightIcon fa fa-search mui-pull-right" id="reloadEquip">查询</a>-->
		</header>
		<div class="mui-content">
			<div class="clearfix currTime">
				<!--<div class="fl" id="gatherTime">采集时间：2019-15-13 12:26:54</div>-->
				害虫种类：
				<select name="" class="wormCategory" id="wormCategory">
				</select>
				<!--<div class="fr" id="lookmore">更多>>　</div>-->
			</div>
			<div class="echart">
				<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
				<div id="lineChart" style="height:400px"></div>
			</div>
			<div class="echart">
				<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
				<div id="pieChart" style="height:300px"></div>
			</div>
			<div class="calendarBox" style="display:none">
				<p>开始时间：<input id="start" placeholder="Please Select ..." readonly /></p>
				<p>结束时间：<input id="end" placeholder="Please Select ..." readonly /></p>
			</div>
		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-2.1.0.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/echarts.js"></script>
		<script src="../js/cbd_pest_library.js"></script>
		<script src="../js/mobiscroll.custom-3.0.0-beta6.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- ECharts单文件引入 -->
		<!--<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>-->
		<script type="text/javascript">
			var lineChart = echarts.init(document.getElementById('lineChart'));
			lineOption = {
				title: {
					text: '害虫变化趋势',
					textStyle: {
						color: '#029eef'
					}
				},
				legend: {
					'top': '8px',
					data: []
				},
				tooltip: {
					trigger: 'axis',
					formatter: function(params) {
						if(params.length >= 1) {
							var returnData = '';
							var time = '';
							for(let g in params) {
								if(params[g].componentIndex == 0) {
									returnData += params[g].seriesName + ':' + params[g].value + 'RH<br/>';
								} else if(params[g].componentIndex == 1) {
									returnData += params[g].seriesName + ':' + params[g].value + '°C<br/>';
								} else {
									returnData += params[g].data[1] + '只<br/>';
								}
								time = params[g].axisValue;
								// returnData += params[g].seriesName + ':' + params[g].value + '<br/>';
							}
							return time + '<br/>' + returnData;
						}
					}
				},
				xAxis: {
					data: []
				},
				yAxis: {
					axisLine: {
						show: true
					},
				},
				toolbox: {
					left: 'center',
				},
				dataZoom : {
						type:'inside',
				    },
				grid: {
					left: '3%',
					right: '4%',
					bottom: '6%',
					containLabel: true
				},
				series: []
			}
			window.onresize = function() {
				//当窗口发生变化时图表显示
				lineChart.resize();
				pieChart.resize();
			}
			var color = ['#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#bfaf2a', '#ffc107', '#ff9800', '#a6c791', '#ba91c7', '#ecd3a7', '#96f2e5', '#96b2f2'];

			var pieChart = echarts.init(document.getElementById('pieChart'));

			pieOption = {
				title: {
					text: '害虫比例',
					textStyle: {
						color: '#029eef'
					}
				},
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					orient: 'vertical',
					left: 'right',
					data: []
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '6%',
					containLabel: true
				},
				series: [{
					name: '害虫种类',
					type: 'pie',
					radius: '55%',
					radius: ['50%', '70%'],
					data: [],
					itemStyle: {
						emphasis: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}]
			};

			var equipId;
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				equipId = self.equipId;
				$('#currEquipId').html('ID：' + equipId);
				requestData('', '', '');
				//日历
				mobiscroll.settings = {
					theme: 'ios',
					lang: 'zh',
				};
				$('#date').mobiscroll().range({
					startInput: '#start',
					endInput: '#end',
					onSet: function(event, inst) {
						var start = getYMDHMS(inst.getVal()[0]);
						var end = getYMDHMS(inst.getVal()[1]);
						//请求图表数据：
						requestData('filter', start, end);
					},
				});

				function getYMDHMS(time) {
					var time = new Date(time);
					var year = time.getFullYear(),
						month = time.getMonth() + 1,
						date = time.getDate();

					if(month < 10) {
						month = '0' + month;
					}
					if(date < 10) {
						date = '0' + date;
					}

					return year + '-' + month + '-' + date //不想
				}
			})

			function requestData(req, begin, end) {
				console.log(req)
				console.log(begin)
				console.log(end)
				mui.ajax('http://120.27.222.26/pest_at_ah', {
					data: {
						req: req,
						e_id: equipId,
						tbegin: begin,
						tend: end,
					},
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 8000, //超时时间设置为10秒；
					beforeSend: function() {
						plus.nativeUI.showWaiting('请求中...');
					},
					complete: function() {
						plus.nativeUI.closeWaiting();
					},
					success: function(data) {
						console.log(JSON.stringify(data))
						wormEcharts(data)
					},
					error: function(xhr, type, errorThrown) {
						$('#currEquipId').hide();
						$('.detialBox').hide();
						$('#reloadEquip').hide();
						mui.toast('数据请求失败');
					}
				})
			}
			//折线统计处理
			function wormEcharts(dat) {
				var type = [],
					timelist = [],
					value = [],
					ath = [
						[],
						[]
					];
				var legend = ['温度', '湿度'],
					time = [],
					amount = []; //种类及时间
				var kindNum = dat.kind;
				if(dat.kind.length) {
					for(var i = 0; i < dat.kind.length; i++) {
						// legend.unshift(insect_dict[dat.kind[i]]);
						var arr = [];
						amount.unshift(arr)
						if(i == (dat.kind.length) - 1) {
							// console.log(legend)
						}
					}

					for(var i = 0; i < dat.dat.length; i++) {
						if(dat.dat[i].ah && dat.dat[i].at) {
							ath[0].unshift((dat.dat[i].at/10).toFixed(2)) //温度
							ath[1].unshift((dat.dat[i].ah/10).toFixed(2))
							timelist.unshift(dat.dat[i].time);
							if(dat.dat[i].result) {
								for(var j = 0; j < dat.dat[i].result.split('#').length; j++) {
									var serialNum = dat.dat[i].result.split('#')[j].split(',');

									if(type.indexOf(serialNum[0]) == -1) {
										var currval = [];
										currval.push(dat.dat[i].time)
										currval.push(serialNum[1])
										value.push([currval])
										type.push(serialNum[0])
									} else {
										value[type.indexOf(serialNum[0])].push([dat.dat[i].time, serialNum[1]])
									}

								}
							}
						}
						if(i == dat.dat.length - 1) {
							if(type.length) {
								var html = '';
								for(var z = 0; z < type.length; z++) {
									html += '<option value="' + z + '">' + insect_dict[type[z]] + '</option>'
								}
								$('#wormCategory').html(html)
								$('#wormCategory').on('change', function() {
									lineOption.series = [];
									for(var s = 0; s < 2; s++) {
										lineOption.series.unshift({
											name: legend[s],
											type: 'line',
											data: ath[s],
											itemStyle: {
												normal: {
													color: color[s],
													shadowBlur: 1,
													shadowColor: color[s],
													borderColor: color[s],
													borderWidth: 2,
													backgroundColor: 'transparent'
												}
											},
											areaStyle: {
												normal: {
													color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
														offset: 0,
														color: color[s]
													}, {
														offset: 1,
														color: 'rgba(255, 2555, 255, 0.2)'
													}]),
												}
											}
										});
										// pieSeriesData.push(eval(amount[s].join("+")));
									}
									lineOption.series.push({
										symbolSize: 20,
										data: value[$(this).val()],
										type: 'scatter',
										itemStyle: {
											normal: {
												shadowBlur: 10,
												shadowColor: 'rgba(120, 36, 50, 0.5)',
												shadowOffsetY: 5,
												color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
													offset: 0,
													color: 'rgb(251, 118, 123)'
												}, {
													offset: 1,
													color: 'rgb(204, 46, 72)'
												}])
											}
										}
									})
									lineOption.xAxis.data = timelist;
									lineChart.setOption(lineOption);
								})
								lineOption.series = [];
								for(var s = 0; s < 2; s++) {
									lineOption.series.unshift({
										name: legend[s],
										type: 'line',
										data: ath[s],
										itemStyle: {
											normal: {
												color: color[s],
												shadowBlur: 1,
												shadowColor: color[s],
												borderColor: color[s],
												borderWidth: 2,
												backgroundColor: 'transparent'
											}
										},
										areaStyle: {
											normal: {
												color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
													offset: 0,
													color: color[s]
												}, {
													offset: 1,
													color: 'rgba(255, 2555, 255, 0.2)'
												}]),
											}
										}
									});
								}
								lineOption.series.push({
									symbolSize: 20,
									data: value[0],
									type: 'scatter',
									itemStyle: {
										normal: {
											shadowBlur: 10,
											shadowColor: 'rgba(120, 36, 50, 0.5)',
											shadowOffsetY: 5,
											color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
												offset: 0,
												color: 'rgb(251, 118, 123)'
											}, {
												offset: 1,
												color: 'rgb(204, 46, 72)'
											}])
										}
									}
								})
								pieOption.series[0].data = [];
								var pieSeriesData = [];
								for(var ss = 0; ss < value.length; ss++) {
									var totalwormnum = 0;
									for(var jj = 0; jj < value[ss].length; jj++) {
										totalwormnum += parseInt(value[ss][jj][1])
										if(jj == value[ss].length - 1) {
											pieSeriesData.push(totalwormnum);
										}
									}
									if(ss == value.length - 1) {
										for(var a = 0; a < type.length; a++) {
											var data = '{ value:' + pieSeriesData[a] + ', name:"' + insect_dict[type[a]] + '"}';
											pieOption.series[0].data.push(eval('(' + data + ')'));
										}
									}
								}
								$('#line-chart').prev().html('').css('z-index', 0);
								$('#pie-chart').prev().html('').css('z-index', 0);
								lineOption.xAxis.data = timelist;
								lineChart.setOption(lineOption);
								pieChart.setOption(pieOption);
							} else {

								lineOption.series = [];
								lineOption.xAxis.data = [];
								pieOption.series[0].data = [];
								lineChart.setOption(lineOption);
								pieChart.setOption(pieOption);
								$('#line-chart').prev().html('暂无害虫数据').css('z-index', 99);
								$('#pie-chart').prev().html('暂无害虫数据').css('z-index', 99);
								$('#wormType').html('<option value="">暂无害虫种类</option>')
							}
						}
					}
				}
				if(!dat.kind.length) {
					if(lineOption.series[0]) {
						lineOption.series[0].data = [];
						lineOption.series[1].data = [];
					} else {
						lineOption.series = [];
					}
					lineOption.xAxis.data = [];
					pieOption.series[0].data = [];
					lineChart.setOption(lineOption);
					pieChart.setOption(pieOption);
					$('#line-chart').prev().html('暂无害虫数据').css('z-index', 99);
					$('#pie-chart').prev().html('暂无害虫数据').css('z-index', 99);
					$('#wormCategory').html('<option value="">暂无害虫种类</option>')
				}
			}
		</script>
	</body>

</html>