yf_zd
/
commonApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521
							<!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;
			}
			
			#segmentedControl a {
				text-align: center;
				position: relative;
			}
			
			.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)电压(V)</h5>
				</div>
				<!--内容区-->
				<div class="mui-card-content">
					<div class="chart" id="lineChart"></div>
				</div>
			</div>
			<!--<h5>击虫次数</h5>-->
			<div class="">
				<div id="segmentedControl" class="mui-segmented-control">
					<a class="mui-control-item mui-active" data-id='2'>按次</a>
					<a class="mui-control-item" data-id="3">按日</a>
					<a class="mui-control-item" data-id="4">按月</a>
				</div>
			</div>
			<div class="mui-card">
				<!--页眉，放置标题-->
				<div class="mui-card-header">
					<h5>击虫次数(只)</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) {
									if (params[g].seriesName == '环境温度') {
										returnData += params[g].seriesName + ':' + params[g].value + '°C<br/>';
									} else if (params[g].seriesName == '环境湿度') {
										returnData += params[g].seriesName + ':' + params[g].value + 'RH<br/>';
									}
								}
								if(params[g].seriesIndex == 1) {
									returnData += params[g].seriesName + ':' + params[g].value + '%<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: [1, 2, 3, 4, 5, 6, 7]
				},
				yAxis: {
					type: 'value',
					data: [20, 30, 52, 20, 64, 56, 80]
				},
				dataZoom : {
					type:'inside',
				},
				series: [{
						name: '环境温度',
						type: 'line',
						data: [20, 30, 52, 20, 64, 56, 80],
						itemStyle: {
							normal: {
								color: '#6ecdfe'
							}
						}
					},
					{
						name: '环境湿度',
						type: 'line',
						data: [],
						itemStyle: {
							normal: {
								color: '#5689f2'
							}
						}
					},
					{
						name: '充电电压',
						type: 'line',
						data: [],
						itemStyle: {
							normal: {
								color: '#4ee75f'
							}
						}
					},
					{
						name: '电池电压',
						type: 'line',
						data: [],
						itemStyle: {
							normal: {
								color: '#ff753f'
							}
						}
					}
				]
			};

			// 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: '#6ecdfe'
						}
					}
				}]
			};

			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				equipId = self.equipId;
				//请求图表数据：
				$.ajax({
					url: 'http://192.168.1.11:8000/scd_report_detail_chart',
					type: 'post',
					data: {
						req: 'data',
						id: equipId
					},
					success: function(data) {
						sessionStorage.setItem("scdData", 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).toFixed(1));
							ah.unshift(Number(temp[i].ah).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.series[2].data = cv;
						lineOption.series[3].data = bv;
						lineOption.xAxis.data = time;
						
						barOption.series[0].data = ct;
						barOption.xAxis.data = time;
	
						if(!temp.length) {
							lineOption.series[0].data = [];
							lineOption.series[1].data = [];
							lineOption.series[2].data = [];
							lineOption.series[3].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://192.168.1.11:8000/scd_report_detail_chart',
							type: 'post',
							data: {
								req: 'filter',
								id: equipId,
								begin: start,
								end: end
							},
							success: function(data) {
								sessionStorage.setItem("scdData", 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).toFixed(1));
									ah.unshift(Number(temp[i].ah).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.series[2].data = cv;
								lineOption.series[3].data = bv;
								lineOption.xAxis.data = time;
								
								barOption.series[0].data = ct;
								barOption.xAxis.data = time;
			
								if(!temp.length) {
									lineOption.series[0].data = [];
									lineOption.series[1].data = [];
									lineOption.series[2].data = [];
									lineOption.series[3].data = [];
									lineOption.xAxis.data = ['暂无数据'];
									barOption.series[0].data = [];
									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 //不想
			    }
				
			})
			

			mui('#segmentedControl').on('tap', 'a', function() {
				console.log(JSON.parse(sessionStorage.getItem("scdData")))
				var type = this.getAttribute('data-id');
				var timeDat = [],
					valueDat = [];
				var dat = JSON.parse(sessionStorage.getItem("scdData"));
				if(dat.length) {
					if(type == 2) {
						for(var j = 0; j < dat.length; j++) {
							timeDat.unshift(dat[j].tim);
							valueDat.unshift(dat[j].ct)
						}
					} else if(type == 3) {
						var prevTime = dat[0].tim.split(' ')[0]; //上一次日期   判断日期是否一样
						var currentVal = 0; //默认杀虫数            
						for(var j = 0; j < dat.length; j++) {
							var currentTime = dat[j].tim.split(' ')[0];
							if(timeDat.indexOf(currentTime) == -1) {
								timeDat.unshift(currentTime);
							}
							if(prevTime == currentTime && j != dat.length - 1) {
								currentVal += dat[j].ct;
							} else if(prevTime == currentTime && j == dat.length - 1) {
								currentVal += dat[j].ct;
								valueDat.unshift(currentVal);
							} else if(prevTime != currentTime && j == dat.length - 1) {
								currentVal;
								valueDat.unshift(currentVal);
								valueDat.unshift(dat[j].ct);
							} else {
								valueDat.unshift(currentVal);
								prevTime = currentTime;
								currentVal = dat[j].ct;
							}
						}
					} else if(type == 4) {
						var prevTime = dat[0].tim.split(' ')[0].substring(0, 7); //上一次日期   判断日期是否一样
						var currentVal = 0; //默认杀虫数            
						for(var j = 0; j < dat.length; j++) {
							var currentTime = dat[j].tim.split(' ')[0].substring(0, 7);
							if(timeDat.indexOf(currentTime) == -1) {
								timeDat.unshift(currentTime);
							}
							if(prevTime == currentTime && j != dat.length - 1) {
								currentVal += dat[j].ct;
							} else if(prevTime == currentTime && j == dat.length - 1) {
								currentVal += dat[j].ct;
								valueDat.unshift(currentVal);
							} else if(prevTime != currentTime && j == dat.length - 1) {
								currentVal;
								valueDat.unshift(currentVal);
								valueDat.unshift(dat[j].ct);
							} else {
								valueDat.unshift(currentVal);
								prevTime = currentTime;
								currentVal = dat[j].ct;
							}
						}
					}

					barOption.series[0].data = valueDat;
					barOption.xAxis.data = timeDat;
					setTimeout(function() {
						barChart.setOption(barOption);
					})
				}
			})
		</script>
	</body>

</html>