yf_zd
/
commonApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399
							<!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>
			<div class="clearfix currTime">
				<div class="fl" id="gatherTime">采集时间：2019-15-13 12:26:54</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="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()); 
	            }
	        );
	        //echart option
	        function echartOption(legend,upTime,seriesDat){
	        	var array = [];
	        	array.push(legend);
	        	return option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:array
                    },
                    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
                        }
                    ]
                };
	        }
			
			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_report_detail_chart', {
					data: {
						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.dat)
					},
					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(dat) {
				if (dat.length) {
					upTime = []; //
					kindCount = dat[0].e_len;
					seriesDat = [];
					legend = []; //几条折线
					allUnit = []; //单位
					txtUnit = [];
					newVal = []; //最新一条值
					icon = [];
					for (var i = 0; i < dat.length; i++) {
						upTime.unshift(dat[i].upl_time);
						for (var j = 0; j < dat[i].unit.length; j++) {
							if(i == 0){
								legend.push(dat[0].unit[j][3]+dat[0].unit[j][1]);
								allUnit.push(dat[0].unit[j][2]);
								txtUnit.push(dat[0].unit[j][1]);
								newVal.push(dat[0].unit[j][0]);
								icon.push(dat[0].unit[j][4]);
							}
							if(seriesDat[j]){
								seriesDat[j].unshift(parseFloat(dat[i].unit[j][0]));
							}else{
								var arr = [];
								arr.unshift(parseFloat(dat[i].unit[j][0]));	
								seriesDat[j] = arr;
							}
						}
						if(i == dat.length-1){
							console.log(JSON.stringify(upTime))
							console.log(JSON.stringify(kindCount))
							console.log(JSON.stringify(seriesDat))
							console.log(JSON.stringify(legend))
							console.log(JSON.stringify(allUnit))
							console.log(JSON.stringify(txtUnit))
							console.log(JSON.stringify(newVal))
							console.log(JSON.stringify(icon))
							$('#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 echarts = require('echarts').init(document.getElementById('main'));
					echarts.setOption(echartOption([],[],[]));
				}
			}
			
			
			function echartChange(num){
				$('.swiper-wrapper .swiper-slide').removeClass('slideActiveBj');
				$('.swiper-wrapper .swiper-slide').eq(num).addClass('slideActiveBj');
				// 非入口或再次使用，图表已被加载注册
				var echarts = require('echarts').init(document.getElementById('main'));
				echarts.setOption(echartOption(legend[num],upTime,seriesDat[num]));
			}
			
		</script>
	</body>

</html>