add dashbord real data

meitu/css/main.css

@@ -240,7 +240,7 @@ html body {
 	/*font-style: italic;*/
 }
 .speed_l {
-	margin-left: 10px;
+	margin-left:5px;
 }
 .speed_r {
 	width: 100px;
@@ -409,4 +409,24 @@ html body {
 }
 
 
+/*------------动画-----------------*/
+@-webkit-keyframes flash {
+	0%    { opacity:0; }
+	50%   { opacity:1; }
+	100%  { opacity:0; }
+}
+.firebug_flash{
+	-webkit-animation-name: flash;
+	-webkit-animation-iteration-count:infinite;
+	-webkit-animation-duration:1s;
+	background-color:#F7001D;
+}
+
+#total_time{
+	font-size:14px;
+}
+
+#real_loc{
+	margin-right:3px;
+}
 

meitu/index.html

@@ -125,13 +125,13 @@
 					<div class="fl">
 						<div class="speed_l">
 							<span>时速:</span>
-							<span class="speed_title_strong">50km/h</span>
+							<span id="speed_real" class="speed_title_strong">计算</span>
 						</div>
 					</div>
 					<div class="fr">
 						<div class="speed_r" >
 							<span>时长:</span>
-							<span class="speed_title_strong">50km/h</span>
+							<span id="total_time" class="speed_title_strong">计算</span>
 						</div>
 					</div>
 				</div>
@@ -139,38 +139,38 @@
 					<div class="fl">
 						<div class="speed_l">
 							<span>到达:</span>
-							<span class="speed_title_strong">18:56</span>
+							<span id="ar_time" class="speed_title_strong">计算</span>
 						</div>
 					</div>
 					<div class="fr">
 						<div class="speed_r">
 							<span>距离:</span>
-							<span class="speed_title_strong">245km</span>
+							<span id="total_dis" class="speed_title_strong">计算</span>
 						</div>
 					</div>
 				</div>
 				<div>
-					<div style="margin-left:10px;width:160px;">
+					<div style="margin-left:5px;width:160px;">
 						<span>模拟车速:</span><span>50,000 km/h</span>
 					</div>
 				</div>
 				<div style="min-height:40px;">
-					<div style="margin-left:10px;width:100%;min-height:40px;">
+					<div style="margin-left:5px;width:96%;min-height:40px;margin-left:2%;margin-right:2%;">
 						<i class="fa fa-map-marker" style="color:#E82D00;"></i>
-						<span>
-	        					安徽省安庆市望江县长岭镇农信社1001号
+						<span id="real_loc">
+	        					获取中
 	        				</span>
 					</div>
 				</div>
 			</div>
 			<div class="tianqi_div">
 				<div class="fl">
-					<img src="img/sun.png"/>
+					<img id="weather_png" src="img/sun.png"/>
 				</div>
-				<div class="fl tianqi_div_du">
+				<div id="weather_du" class="fl tianqi_div_du">
 					32°
 				</div>
-				<div class="fl tianqi_div_du" style="font-size:15px;">
+				<div id="weather_feng" class="fl tianqi_div_du" style="font-size:15px;">
 					西南风
 				</div>
 			</div>
@@ -186,7 +186,7 @@
 					%>
 					<div class="router_span" style="top:<%=top%>px;">
 						<div class="fl"><%=items[i].content%></div>
-						<div class="fl router_circle"></div>
+						<div class="fl router_circle" id="router_circle_<%=i%>"></div>
 					</div>
 				<%}%>
 			</script>

meitu/js/home/dashboard.js

@@ -1,7 +1,6 @@
 define('home/dashboard', function(require, exports, module) {
-
 	var zepto = require('lib/zepto_pj');
-	var mapInstance = require('home/map');
+	var events = require('home/events');
 	var charts = $('#charts');
 	var charts_dash = $('#charts_dash');
 
@@ -16,7 +15,7 @@ define('home/dashboard', function(require, exports, module) {
 				pointer: {
 					length: 0.9, 
 					strokeWidth: 0.061, 
-					color: '#3BC1FF' 
+					color: '#E82D00' 
 				},
 				limitMax: 'false', 
 				colorStart: '#00C348', 
@@ -31,8 +30,10 @@ define('home/dashboard', function(require, exports, module) {
 			gauge.set(50);
 			
 			setInterval(function(){
-				gauge.set(50 + Math.random() * (-40)); 
-			}, 500);
+				var val = parseInt(events.get('dashSpeed'));
+				val = val + parseInt(Math.random() * 2);
+				gauge.set(val); 
+			}, 1000);
 		}else{
 			charts_dash.fadeOut();
 		}

meitu/js/home/events.js

@@ -1,5 +1,6 @@
 //全局事件
 define('home/events', function(require, exports, module) {
+	var $ = require('lib/zepto_pj');
 	var Events = require('lib/events');
 	//全局事件对象
 	var events = new Events();
@@ -23,6 +24,10 @@ define('home/events', function(require, exports, module) {
 	events.set('allPoints', []);
 	//汽车点
 	events.set('carMarker', null);
+	//实时车的位置
+	events.set('realCarIndex', 0);
+	//仪表盘车速
+	events.set('dashSpeed', 0);
 
 	//获取途经点
 	events.on('getWayPoints', function() {
@@ -102,67 +107,142 @@ define('home/events', function(require, exports, module) {
 		var origin = events.get('origin');
 		var destination = events.get('destination');
 		var wayPoints = events.get('wayPoints');
-		
+
 		var Car = new AMap.Icon({
 			image: "img/car.png",
-			size:new AMap.Size(100,100)
+			size: new AMap.Size(100, 100)
 		});
 		var carMarker = new AMap.Marker({
-			map: map, 
-			position: origin, 
-			icon: Car, 
-			autoRotation: true, 
-			offset:new AMap.Pixel(-26,-10),
+			map: map,
+			position: origin,
+			icon: Car,
+			autoRotation: true,
+			offset: new AMap.Pixel(-26, -10),
 			zIndex: 10000,
 		});
-		
+
 		events.set('carMarker', carMarker);
-		
-		AMap.service(['AMap.Driving'], function(){
+
+		AMap.service(['AMap.Driving'], function() {
 			var driving = new AMap.Driving({
 				extensions: 'base',
-				policy: AMap.DrivingPolicy.REAL_TRAFFIC 
+				policy: AMap.DrivingPolicy.REAL_TRAFFIC
 			});
-			driving.search(origin, destination, {waypoints: wayPoints.points},function(status, result){
-				if(status === 'complete' && result.info === 'OK'){
+			driving.search(origin, destination, {
+				waypoints: wayPoints.points
+			}, function(status, result) {
+				if (status === 'complete' && result.info === 'OK') {
 					//绘制驾车路线
-		        		var paths = [];
-		        		if(result.routes.length){
-		        			var route = result.routes[0];
-		        			var steps = route.steps;
-		        			for(var i = 0; i < steps.length; i++){
-		        				var path = steps[i].path;
-		        				for(var j in path){
-		        					paths.push(path[j]);
-		        				}
-		        			}
-		        		}
-		        		
-		        		carMarker.moveAlong(paths, 50 * 1000);
-		        		events.trigger('carWatch');
+					var paths = [];
+					if (result.routes.length) {
+						var route = result.routes[0];
+						var steps = route.steps;
+						for (var i = 0; i < steps.length; i++) {
+							var path = steps[i].path;
+							for (var j in path) {
+								paths.push(path[j]);
+							}
+						}
+					}
+
+					carMarker.moveAlong(paths, 50 * 1000);
+					events.trigger('carWatch');
 				}
 			});
 		});
 	});
-	
-	
+
+
 	//汽车追踪
-	events.on('carWatch', function(){
+	events.on('carWatch', function() {
 		var carMarker = events.get('carMarker');
-		var carWatch = setInterval(function(){
-			if(!carMarker){
+		var router = events.get('router');
+		$('#router_circle_0').css('background-color', '#ccc');
+		$('#router_circle_1').css('background-color', 'red');
+		$('#router_circle_1').addClass('firebug_flash');
+		var carWatch = setInterval(function() {
+			if (!carMarker) {
 				return;
 			}
 			var carPos = carMarker.getPosition();
 			//为了更好的演示
-			
 			var _x = parseFloat(carPos.lat) - 0.005;
 			var justifyCenter = new AMap.LngLat(carPos.lng, _x);
 			var pan = new AMap.LngLat(carPos.lng, parseFloat(carPos.lat));
-			map.setZoomAndCenter(12,justifyCenter);
-			
+			map.setZoomAndCenter(12, justifyCenter);
+
+			//设置路线的颜色
+			for (var i in router) {
+				if (i < (router.length) && i > 0 && Math.abs(carPos.lng - router[i].x) < 0.05 && Math.abs(carPos.lat - router[i].y) < 0.05) {
+					var index = parseInt(i - 1);
+					events.set('realCarIndex', index);
+					$('#router_circle_' + (parseInt(i) + 1)).css('background-color', 'red');
+					$('#router_circle_' + (parseInt(i) + 1)).addClass('firebug_flash');
+					$('#router_circle_' + i).css('background-color', '#ccc');
+					$('#router_circle_' + i).removeClass('firebug_flash');
+				}
+			}
+
+			if (Math.abs(carPos.lng - router[router.length - 1].x) < 0.01 && Math.abs(carPos.lat - router[router.length - 1].y) < 0.01) {
+				clearInterval(carWatch);
+			}
+
 		}, 500);
 	});
+	
+	events.on('getWeather', function(){
+		var router = events.get('router');
+		AMap.service(['AMap.Weather'], function(){
+	    		var we = new AMap.Weather();
+	    		we.getLive(router[router.length - 1].content, function(err, status){
+	    			if(status.weather.indexOf('雨') > -1){
+	    				$('#weather_png').attr('src', 'img/rain.png');
+	    			}
+	    			if(status.weather.indexOf('晴') > -1){
+	    				$('#weather_png').attr('src', 'img/sun.png');
+	    			}
+	    			if(status.weather.indexOf('云') > -1){
+	    				$('#weather_png').attr('src', 'img/cloud.png');
+	    			}
+	    			$('#weather_du').text(status.temperature + '°');
+	    			$('#weather_feng').text(status.windDirection + '风');
+	    		});
+	    });
+	});
+
+	//计算时速
+	events.on('calcuSpeed', function() {
+		var realCarIndex = events.get('realCarIndex');
+		var realSpeedHandle = setInterval(function() {
+			var disTime = events.get('disTime');
+			var carMarker = events.get('carMarker');
+			realCarIndex = events.get('realCarIndex');
+			if (disTime[realCarIndex]) {
+				var speed = (disTime[realCarIndex].speed - Math.random() * 5).toFixed(2);
+				var rmin = Math.ceil(Math.random() * 10);
+				$('#speed_real').text(speed + 'km');
+				events.set('dashSpeed', speed);
+				$('#ar_time').text(getRandomTime(getTime(disTime.length - 1), rmin));
+				$('#total_time').text(getHour(disTime.length - 1));
+				$('#total_dis').text(getAllDistance() + 'km');
+
+				if (carMarker) {
+					var pos = carMarker.getPosition();
+					AMap.service(['AMap.Geocoder'], function() {
+						var geocoder = new AMap.Geocoder();
+						geocoder.getAddress(pos, function(status, result) {
+							if (status === 'error' || status === 'no_data') {
+								console.log("geocoder error");
+							} else {
+								var address = result.regeocode.formattedAddress;
+								$('#real_loc').text(address);
+							}
+						});
+					});
+				}
+			}
+		}, 1000);
+	});
 
 
 
@@ -171,11 +251,9 @@ define('home/events', function(require, exports, module) {
 	events.trigger('getWayPoints');
 	events.trigger('drawRouter');
 	events.trigger('carRun');
-//	setTimeout(function(){
-//		
-//	}, 2000);
-	
-	
+	events.trigger('calcuSpeed');
+	events.trigger('getWeather');
+
 
 	//绘制两点间路线
 	function driving(origin, destination) {
@@ -222,4 +300,77 @@ define('home/events', function(require, exports, module) {
 		});
 	}
 
+
+	function getTime(index) {
+		var disTime = events.get('disTime');
+		var routes = events.get('router');
+		var endTime = 0;
+		var startTime = parseInt(routes[0].startTime.split(':')[1]);
+		for (var n = index; n >= 0; n--) {
+			endTime += disTime[n].time;
+		}
+		endTime += startTime;
+		//进行时间换算
+		var min = endTime % 60; //分钟
+		var hour = Math.floor(endTime / 60); //小时
+		var arTime = parseInt(routes[0].startTime.split(':')[0]) + hour;
+		if (arTime > 23) {
+			arTime = arTime - 24; //次日
+			arTime = '次日 ' + arTime;
+		}
+		if (min < 10) {
+			min = '0' + min;
+		}
+		arTime += ':' + min;
+		return arTime;
+	}
+
+	//获取random值时间
+	function getRandomTime(time, addmin) {
+		var strs = time.split(':');
+		var min = parseInt(strs[1]);
+		var hour = parseInt(strs[0]);
+
+		min = min + addmin;
+		if (min >= 60) {
+			hour += 1;
+			min = min - addmin
+		}
+
+		if (min < 10) {
+			min = '0' + min.toString();
+		}
+
+		if (hour >= 24) {
+			hour = '次日' + hour - 24;
+		}
+		return hour + ':' + min;
+	}
+
+	//获取路上所花时间
+	function getHour(index) {
+		var disTime = events.get('disTime');
+		var endTime = 0;
+		for (var n = index; n >= 0; n--) {
+			endTime += disTime[n].time;
+		}
+		var rmin = Math.ceil(Math.random() * 10);
+		var str = Math.floor(endTime / 60) + ':' + Math.ceil(endTime % 60);
+		var realTime = getRandomTime(str, rmin);
+		var strs = realTime.split(':');
+		return strs[0] + 'h' + strs[1] + 'min';
+	}
+
+	//获取所有距离
+	function getAllDistance() {
+		var disTime = events.get('disTime');
+		var dis = 0;
+		for (var i in disTime) {
+			dis += parseInt(disTime[i].distance);
+		}
+		return dis;
+	}
+	
+	return events;
+
 });

meitu/js/main.js

@@ -15,5 +15,5 @@ requirejs([
 		'home/search'
 	], 
 	function(fastclick) {
-		fastclick(document.body);
+//		fastclick(document.body);
 });