yf_zd
/
yfApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>ECahrt 示例</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/mobiscroll.custom-3.0.0-beta6.min.css">
		<link rel="stylesheet" href="../css/common.css">
		<style>
			/*body,
			.mui-content {
				background-color: #ffffff;
			}
			*/
			.chart {
				height: 250px;
				margin: 0px;
				padding: 0px;
			}
			
			h5 {
				margin-top: 30px;
				font-weight: bold;
			}
			
			h5:first-child {
				margin-top: 0;
				font-weight: 100;
			}
			/*tab*/
			
			.mui-segmented-control {
				border: none;
				display: inherit;
				overflow: visible;
				margin: 20px 0;
				background-color: #fff;
			}
			
			.mui-segmented-control .mui-control-item {
				border-left: none;
				color: #333;
				overflow: visible;
			}
			
			.mui-segmented-control .mui-control-item.mui-active {
				color: #333;
				background: transparent;
				border-bottom: none;
				position: relative;
			}
			
			.mui-control-item.mui-active:before {
				content: '';
				position: absolute;
				left: 50%;
				bottom: -3px;
				width: 70px;
				background: #007aff;
				height: 3px;
				margin-left: -35px;
			}
			
			.mui-control-item.mui-active:after {
				content: '';
				position: absolute;
				left: 50%;
				border: 26px solid #007aff;
				bottom: -18px;
				margin-left: -5px;
				border-top: #007aff 5px solid;
				border-left: transparent 5px solid;
				border-bottom: transparent 10px solid;
				border-right: transparent 5px solid;
			}
			
			.mui-segmented-control .mui-control-item {
				line-height: 30px;
			}
			
			.mui-control-item.mui-active {
				color: #333;
				border-bottom: 3px solid #007AFF;
			}
		</style>
		<script src="../js/mui.min.js"></script>
	</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>
			<a class="mui-icon mui-icon-search mui-pull-right" id="date"></a>
		</header>
		<div class="mui-content">
			<div class="mui-card">
				<!--页眉，放置标题-->
				<div class="mui-card-header">
					<h5>温湿度(°C)</h5>
				</div>
				<!--内容区-->
				<div class="mui-card-content">
					<div class="chart" id="lineChart"></div>
				</div>
			</div>
			<div class="mui-card">
				<!--页眉，放置标题-->
				<div class="mui-card-header">
					<h5>保温仓温度(°C)</h5>
				</div>
				<!--内容区-->
				<div class="mui-card-content">
					<div class="chart" id="pieChart"></div>
				</div>
			</div>
			
			<!--筛选日历-->
			<!--<div class="searchHintBox">-->
				<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>-->

		</div>
		<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mobiscroll.custom-3.0.0-beta6.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/echarts.js"></script>
		<script>
			
			var equipId;
			// 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 || params[g].seriesIndex == 1) {
									returnData += params[g].seriesName + ':' + params[g].value + '°C<br/>';
								}
								if(params[g].seriesIndex == 2 || params[g].seriesIndex == 3) {
									returnData += params[g].seriesName + ':' + params[g].value + 'V<br/>';
								}
							}
							return time + '<br/>' + returnData;
						}
					}
				},
				legend: {
					y:15,
					itemWidth: 15,
			        itemHeight: 10,
			        itemGap: 8,
					data: ['环境温度', '环境湿度'],
					textStyle: {
			            fontSize: 12,
		        	}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				toolbox: {
					feature: {
						// saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: []
				},
				yAxis: {
					type: 'value',
					data: []
				},
				dataZoom: [{
					type: 'inside',
					backgroundColor: "rgba(47,69,84,0)",
				}],
				series: [{
						name: '环境温度',
						type: 'line',
						data: [],
						itemStyle: {
			                normal: {
			                    color: '#f87fff',
			                    shadowBlur: 1,
			                    shadowColor: '#f87fff',
			                    borderColor:'#f87fff',
			                    borderWidth:2,
			                    backgroundColor:'transparent'
			                }
			            },
			            areaStyle: {normal: {
			                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			                        offset: 0,
			                        color: '#f87fff'
			                    }, {
			                        offset: 1,
			                        color: 'rgba(0,0,0,0)'
			                    }]),
			            }}
					},
					{
						name: '环境湿度',
						type: 'line',
						data: [],
						itemStyle: {
			                normal: {
			                    color: '#fea84c',
			                    shadowBlur: 1,
			                    shadowColor: '#fea84c',
			                    borderColor:'#fea84c',
			                    borderWidth:2,
			                    backgroundColor:'transparent'
			                }
			            },
			            areaStyle: {normal: {
			                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			                        offset: 0,
			                        color: '#fea84c'
			                    }, {
			                        offset: 1,
			                        color: 'rgba(0,0,0,0)'
			                    }]),
			            }}
					},
				]
			};

			// 2基于准备好的dom，初始化echarts实例
			var barChart = echarts.init(document.getElementById('pieChart'));
			// 指定图表的配置项和数据
			var barOption = {
				tooltip: {
					trigger: 'axis',
					formatter: function(params) {
						var returnData = '';
						var time = '';
						for(var g in params) {
							time = params[g].axisValue;
							returnData += params[g].seriesName + ':' + params[g].value + '只';
						}
						return time + '<br/>' + returnData;
					}
				},
				legend: {
//					x: 'right', // 'center' | 'left' | {number},
					y:15,
					data: ['保温仓温度'],
					itemWidth: 15,
			        itemHeight: 10,
			        itemGap: 8,
			        textStyle: {
			            fontSize: 12,
		        	}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				toolbox: {
					feature: {
						// saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: []
				},
				yAxis: {
					type: 'value',
					data: []
				},
				dataZoom: [{
					type: 'inside',
					backgroundColor: "rgba(47,69,84,0)",
				}],
				series: [{
					name: '保温仓温度',
					type: 'line',
					data: [],
					itemStyle: {
		                normal: {
		                    color: '#00c1de',
		                    shadowBlur: 1,
		                    shadowColor: '#00c1de',
		                    borderColor:'#00c1de',
		                    borderWidth:2,
		                    backgroundColor:'transparent'
		                }
		            },
		            areaStyle: {normal: {
		                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
		                        offset: 0,
		                        color: '#00c1de'
		                    }, {
		                        offset: 1,
		                        color: 'rgba(0,0,0,0)'
		                    }]),
		            }}
				}]
			};

			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				equipId = self.equipId;
				//请求图表数据：
				$.ajax({
					url: 'http://120.27.222.26/bzy_report_detail_chart',
					type: 'post',
					data: {
						req: 'data',
						id: equipId,
					},
					success: function(data) {
						console.log(JSON.stringify(data));
						var temp = eval('(' + data + ')');
						var at = [],
							ah = [],
							time = [],
							pre_temp = [];
						for(var i = 0; i < temp.length; i++) {
							at.unshift(Number(temp[i].at).toFixed(1));
							ah.unshift(Number(temp[i].ah).toFixed(1));
							if(Number(temp[i].pre_temp)>100 || Number(temp[i].pre_temp)<-10){
								pre_temp.unshift(15);
							}else{
								pre_temp.unshift(Number(temp[i].pre_temp));
							}
							time.unshift(temp[i].tim);
						}
						lineOption.series[0].data = at;
						lineOption.series[1].data = ah;
						lineOption.xAxis.data = time;
						
						barOption.series[0].data = pre_temp;
						barOption.xAxis.data = time;
	
						if(!temp.length) {
							lineOption.series[0].data = [];
							lineOption.series[1].data = [];
							lineOption.xAxis.data = ['暂无数据'];
							barOption.series[0].data = [];
							barOption.xAxis.data = ['暂无数据'];
						}
						
						// 使用刚指定的配置项和数据显示图表。 
						setTimeout(function() {
							lineChart.setOption(lineOption);
							barChart.setOption(barOption);
						})
					}
				})
				
				//日历
				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]);
			            //请求图表数据：
						$.ajax({
							url: 'http://120.27.222.26/bzy_report_detail_chart',
							type: 'post',
							data: {
								req: 'filter',
								id: equipId,
								begin: start,
								end: end,
							},
							success: function(data) {
								var temp = eval('(' + data + ')');
								var at = [],
									ah = [],
									time = [],
									pre_temp = [];
								for(var i = 0; i < temp.length; i++) {
									at.unshift(Number(temp[i].at).toFixed(1));
									ah.unshift(Number(temp[i].ah).toFixed(1));
									if(Number(temp[i].pre_temp)>100 || Number(temp[i].pre_temp)<-10){
										pre_temp.unshift(15);
									}else{
										pre_temp.unshift(Number(temp[i].pre_temp));
									}
									time.unshift(temp[i].tim);
								}
								lineOption.series[0].data = at;
								lineOption.series[1].data = ah;
								lineOption.xAxis.data = time;
								
								barOption.series[0].data = pre_temp;
								barOption.xAxis.data = time;
			
								if(!temp.length) {
									lineOption.series[0].data = [0];
									lineOption.series[1].data = [0];
									lineOption.xAxis.data = ['暂无数据'];
									barOption.series[0].data = [0];
									barOption.xAxis.data = ['暂无数据'];
								}
								
								// 使用刚指定的配置项和数据显示图表。
								setTimeout(function() {
									lineChart.setOption(lineOption);
									barChart.setOption(barOption);
								})
							}
						})
			        },
			    });
			    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 //不想
			    }
			})
			
		    
			
		</script>
	</body>

</html>