From 08ddad6bd1a6057b31228b293e5c0a81c532909e Mon Sep 17 00:00:00 2001 From: lh_wang Date: Sun, 9 Aug 2015 22:48:12 +0800 Subject: [PATCH] add dashbord real data --- meitu/css/main.css | 22 +++- meitu/index.html | 24 ++-- meitu/js/home/dashboard.js | 11 +- meitu/js/home/events.js | 231 ++++++++++++++++++++++++++++++------- meitu/js/main.js | 2 +- 5 files changed, 231 insertions(+), 59 deletions(-) diff --git a/meitu/css/main.css b/meitu/css/main.css index 98d8e08..86ef2a5 100644 --- a/meitu/css/main.css +++ b/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; +} diff --git a/meitu/index.html b/meitu/index.html index 8e848ba..86eeef0 100644 --- a/meitu/index.html +++ b/meitu/index.html @@ -125,13 +125,13 @@
时速: - 50km/h + 计算
时长: - 50km/h + 计算
@@ -139,38 +139,38 @@
到达: - 18:56 + 计算
距离: - 245km + 计算
-
+
模拟车速:50,000 km/h
-
+
- - 安徽省安庆市望江县长岭镇农信社1001号 + + 获取中
- +
-
+
32°
-
+
西南风
@@ -186,7 +186,7 @@ %>
<%=items[i].content%>
-
+
<%}%> diff --git a/meitu/js/home/dashboard.js b/meitu/js/home/dashboard.js index aeea8ad..7e77ae9 100644 --- a/meitu/js/home/dashboard.js +++ b/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(); } diff --git a/meitu/js/home/events.js b/meitu/js/home/events.js index d1c7a16..9a48a67 100644 --- a/meitu/js/home/events.js +++ b/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; + }); \ No newline at end of file diff --git a/meitu/js/main.js b/meitu/js/main.js index d157800..c5f540d 100644 --- a/meitu/js/main.js +++ b/meitu/js/main.js @@ -15,5 +15,5 @@ requirejs([ 'home/search' ], function(fastclick) { - fastclick(document.body); +// fastclick(document.body); }); \ No newline at end of file