yf_zd
/
commonApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
							<!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);
			}
			/**/
			.swiper-slide{
				height: 190px;
			}
			.swiper-slide >div{
				/*margin-top: 5px;*/
				height: 190px;
				text-align: center;
			    border-radius:0 0 20px 20px;
			    padding-bottom: 20px;
			    color: #dbdbdb;
			    font-size: 14px;
			}
			.swiper-slide >div >img{
				width: 40%;
    			margin: 20px 0 40px;
			}
			.swiper-slide >div .newVal{
				font-size: 20px;
			}
			.slideActiveBj >div{
				background: #15a1ea;
				background: #24b2e7;
			}
			.swiper-button-next, .swiper-button-prev{
				width: 14px;
			    height: 23px;
			    background-size: cover;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			.currTime{
				background: #7432fe;
				background: #24b2e7;
			    color: #fff;
			    line-height: 33px;
			    font-size: 14px;
			}
		</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="echart">
				<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    			<div id="main" style="height:400px"></div>
    			<div id="contentMain" style="height:400px"></div>
			</div>
			<div class="clearfix currTime">
				<div class="fl" id="gatherTime">采集时间：</div>
				<div class="fr" id="lookmore">更多>>　</div>
			</div>
			<div class="qxzCategory">
				<div class="swiper-container">
				    <div class="swiper-wrapper" id="swiperWrapper">
				        <!--<div class="swiper-slide">
				        	<div>
				        		<img src="../images/dev/icon_106.png"/>
				        		<div class="">434</div>
				        		<div class="">二氧化碳（PPM）</div>
				        	</div>
				        </div>
				        <div class="swiper-slide">Slide 2</div>
				        <div class="swiper-slide">Slide 3</div>
				        <div class="swiper-slide">Slide 4</div>
				        <div class="swiper-slide">Slide 5</div>
				        <div class="swiper-slide">Slide 6</div>
				        <div class="swiper-slide">Slide 7</div>-->
				    </div>
				    <!-- 如果需要导航按钮 -->
				    <div class="swiper-button-prev"></div>
				    <div class="swiper-button-next"></div>
				    
				</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/swiper.js"></script>
		<script src="../js/mobiscroll.custom-3.0.0-beta6.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- ECharts单文件引入 -->
		<script src="../js/echarts.js"></script>
    	<!-- <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> -->
		<script type="text/javascript">
			// 路径配置
	        // 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()); 
	        //     }
	        // );
			var lineChart = echarts.init(document.getElementById('main'));
			var lineOption = echartOption();
			setTimeout(function() {
				lineChart.setOption(lineOption);
			})
	        //echart option
	        function echartOption(legend,upTime,seriesDat){
	        	var array = [];
	        	array.push(legend);
	        	return option = {
                    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: {
                        data:array
                    },
                    grid:{
                    	x:'40px',
                    	y:'40px',
                    	x2:'10px',
                    	x2:'10px',
                    	borderWidth:0,
                    	borderColor:'rgba(0,0,0,0)'
                    },
                    dataZoom : {
						type: 'inside',
        				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
                        }
                    ]
                };
	        }
			
			var equipId;
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				equipId = self.equipId; 
				$('#currEquipId').html('ID：'+equipId);
				requestData('','');
				//list详情
				document.getElementById('lookmore').addEventListener('tap',function(){
					mui.openWindow({
						url:'qxz_detail_list.html',
						id:'qxz_detail_list',
						extras: {
							equipId: equipId,
//							equipName:equipName
						}
					})
				})
				//日历
				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(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(begin,end) {
				mui.ajax('http://120.27.222.26/qxz_data_chart', {
					data: {
						'e_id': equipId,
						'begin': begin,
						'end': end,
					},
					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 upTime; 
			var kindCount;
			var seriesDat;
			var legend; //几条折线
			var allUnit; //单位
			var newVal; //最新一条值
			var icon;//图标
			function collectData(data) {
				var dat = data.data;
				var conf = data.conf;
				if (dat.length) {
					upTime = []; //
					kindCount = 0;
					seriesDat = [];
					legend = []; //几条折线
					allUnit = []; //单位
					txtUnit = [];
					newVal = []; //最新一条值
					icon = [];

					kindEkey = [];//通道号

					confLen = Object.keys(conf).length;
					for(var i = 1; i<=confLen;i++){
						kindCount++;
						var ekey = 'e'+ i;
						if(conf[ekey]){
							legend.push(ekey+conf[ekey].split('#')[0]);
							allUnit.push(conf[ekey].split('#')[1]);
							txtUnit.push(conf[ekey].split('#')[0]);
							
							kindEkey.push(ekey);
							seriesDat.push([])
						}
						if(i == confLen){
							for(var j = 0; j < dat.length;j++){
								upTime.unshift(dat[j].time);
								if(j == 0){
									for(var z = 0;z < kindEkey.length;z++){
										icon.push(dat[j].dat[kindEkey[z]].split('#')[1]);
										if(dat[j].dat[kindEkey[z]].split('#')[0] == -99.99){
											newVal.push('N/A');
										}else{
											newVal.push(dat[j].dat[kindEkey[z]].split('#')[0]);
										}
									}
								}
								for(var z = 0;z < kindEkey.length;z++){
									if(dat[j].dat[kindEkey[z]].split('#')[0] == -99.99){
										seriesDat[z].unshift('N/A');
									}else{
										seriesDat[z].unshift(dat[j].dat[kindEkey[z]].split('#')[0]);
									}
									
								}
								
								if(j == dat.length-1){
									$('#gatherTime').html('采集时间：'+upTime[upTime.length-1])
									var html = '';
										for(var s = 0; s<legend.length;s++){
											html += '<div class="swiper-slide"><div><img src="../images/dev/icon_'+icon[s]+'.png"/>'+
						        					'<div class="newVal">'+newVal[s]+'</div><div class="">'+txtUnit[s]+'（'+allUnit[s]+'）</div></div></div>';
						        			if(s == legend.length-1){
						        				$('#swiperWrapper').html(html);
						        				var mySwiper = new Swiper ('.swiper-container', {
												    slidesPerView: 3,
												    spaceBetween: 30,
												    pagination: {
												       el: '.swiper-pagination',
												       clickable: true,
												    },
												    
												    // 如果需要前进后退按钮
												    navigation: {
												       nextEl: '.swiper-button-next',
												       prevEl: '.swiper-button-prev',
												    },
									 
												    on:{
													    tap: function(event){
															if(this.clickedIndex != undefined){							
																echartChange(this.clickedIndex);
																
															}
													    },
													    slideNextTransitionEnd: function(){					
															echartChange(this.activeIndex);
													    },
													    slidePrevTransitionEnd: function(){
													      	echartChange(this.activeIndex);
													    },
												    },
												}) 
						        			}
										}
									echartChange(0)
								}
							}
						}
					}
				} else {
					$('#swiperWrapper').html('');
					// 非入口或再次使用，图表已被加载注册
					var lineOption = echartOption([],[],[])
					lineChart.setOption(lineOption);
					var html = '<div style="text-align:center"> <span  style="position: absolute;top: 40%;left: 0;right: 0;color:#868686; font-size: 20px;">暂无数据</span></div>'
					$('#main').hide();
					$('#contentMain').show();
					$('#contentMain').html(html);
					// document.getElementById('main').removeAttribute('_echarts_instance_')
					 
				}
			}
			
			
			function echartChange(num){
				$('.swiper-wrapper .swiper-slide').removeClass('slideActiveBj');
				$('.swiper-wrapper .swiper-slide').eq(num).addClass('slideActiveBj');
				// 非入口或再次使用，图表已被加载注册
				
				var lineOption = echartOption(legend[num],upTime,seriesDat[num])
				lineChart.setOption(lineOption);
				$('#main').show();
				$('#contentMain').hide();
				// var echarts = require('echarts').init(document.getElementById('main'));
				// echarts.setOption(echartOption(legend[num],upTime,seriesDat[num]));
			}
			
		</script>
	</body>

</html>