实时监控页面布局

潘钊
1 parent 9142c5ae
Showing 4 changed files with 384 additions and 53 deletions
src/main/resources/static/pages/mapmonitor/real/css/real.css
src/main/resources/static/pages/mapmonitor/real/js/map_platform.js
src/main/resources/static/pages/mapmonitor/real/js/real.js
src/main/resources/static/pages/mapmonitor/real/real.html
@@ -9,6 +9,10 @@
 	user-select:none;
 }
  
+.z-depth-1{
+	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
+}
+
 .z-depth-2 {
     box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
 }
@@ -39,6 +43,7 @@
     right: 10px;
     background-color: #3B3F51;
     top: 98px;
+    padding-top: 15px;
  
     transition: all .5s ease;
  
@@ -58,6 +63,35 @@
 	height: calc(100% - 110px);
 }
  
+.mapRightWrap.search{
+	height: 47px;
+	padding-top: 0;
+}
+
+.mapRightWrap.search .input-group .input-group-btn button{
+	color: #FFFFFF;
+    background-color: #1BBC9B;
+    border-color: #1BBC9B;
+}
+
+.mapRightWrap.search .input-group .input-group-btn button:hover{
+    background-color: #158f76;
+    border-color: #13866f;
+}
+
+.mapRightWrap.search .input-group input{
+	height: 48px;
+    background-color: #626775;
+    border: 1px solid #626775;
+    color: white;
+}
+
+.mapRightWrap.search .input-group-btn button{
+	height: 48px;
+    width: 80px;
+    font-size: 15px;
+}
+
 .rotate0{
 	transform:rotateY(0deg) !important;
 }
@@ -274,7 +308,131 @@ html{
 	-webkit-transform: translate(-50%, -50%);
 }
  
-/* gaode  style */
+.mapRightWrap.vehicle p.head{
+	color: #C0BDBD;
+	font-size: 21px;
+	border-bottom: 1px solid gray; 
+	padding-left: 15px;
+	position: relative;
+}
+
+/* .mapRightWrap.vehicle p.head:hover{
+    box-shadow: 0 8px 17px 0 rgba(128, 123, 123, 0.2),0 6px 20px 0 rgba(86, 67, 67, 0.19);
+}
+ */
+.mapRightWrap.vehicle p.head>span.icon>a{
+	position: absolute;
+	right: 15px;
+	top: -2px;
+	font-size: 24px;
+	color: #B9B9B9;
+	
+	transition: all .5s ease;
+	
+}
+
+.mapRightWrap.vehicle p.head>span.icon>a.rotate{
+	transform:rotate(180deg);
+}
+
+
+.mapRightWrap.vehicle p.head>span.icon>a:hover{
+	color: #D8D5D5;
+}
+
+.mapRightWrap.vehicle .vehicle-item{
+    position: relative;
+    color: #C7C7C7;
+    padding-left: 8px;
+    background: rgb(88, 94, 121);
+    padding-top: 7px;
+    width: 90%;
+    margin: auto;
+    margin-top: 9px;
+}
+
+.mapRightWrap.vehicle .vehicle-item div.text{
+    padding: 5px 0 11px 5px;
+    color: #B2B2B2;
+    -webkit-user-select: initial;
+}
+
+.mapRightWrap.vehicle .vehicle-item div.text span{
+    padding: 5px 7px;
+    color: #eee;
+    cursor: pointer;
+}
+
+.mapRightWrap.vehicle .vehicle-item div.text span:hover{
+	color: #C8C8C8;
+}
+
+.mapRightWrap.vehicle .vehicle-item div.text span i{
+	font-size: 12px;
+}
+
+.mapRightWrap.vehicle .vehicle-item.online div.text span i{
+	color: #45D245;
+}
+
+/* off line */
+.mapRightWrap.vehicle .vehicle-item.offline div.text span i,
+.mapRightWrap.vehicle .vehicle-item.offline div.text span,
+.mapRightWrap.vehicle .vehicle-item.offline div.text{
+	color: #FF737C;
+}
+
+.mapRightWrap.vehicle .vehicle-item div.icon{
+	position: absolute;
+	right: 15px;
+	top: 10px;
+	cursor: pointer;
+}
+
+.mapRightWrap.vehicle .vehicle-item div.icon:hover{
+	 color: #fafafa;
+}
+
+
+.mapRightWrap .search_result{
+    position: absolute;
+    background: rgba(98, 103, 117, 0.91);
+    width: 100%;
+    top: 60px;
+    color: #e5e5e5;
+}
+
+.mapRightWrap .search_result .result_item{
+	padding-left: 10px;
+    margin: 0;
+    padding: 10px;
+    cursor: pointer;
+}
+
+.mapRightWrap .search_result .result_item:hover{
+	background: #60A798;
+    color: #fff;
+}
+
+.mapRightWrap .search_result .result_item:hover span.sub_text{
+	color: #eee;
+}
+
+.mapRightWrap .search_result .result_item span.sub_text{
+	color: #BBBABA;
+    margin-left: 5px;
+}
+
+.mapRightWrap .search_result .item_vehicle_list{
+	margin-bottom: 20px;
+	border-bottom: 1px solid #F3F5F5;
+}
+
+.mapRightWrap .search_result .item_vehicle{
+	color: #fafcfb;
+}
+
+/* GaoDe  style start-------  */
 .mapRightWrap.gaode{
 	background: #fff;
     border-radius: 5px !important;
@@ -290,7 +448,7 @@ html{
 }
  
 .mapTools.gaode .item.active {
-    color: #ddd;
+    color: #e1e5ec;
 }
  
 .leftUtils.gaode{
@@ -312,3 +470,74 @@ html{
 	content: "\f00c";
 	font: normal normal normal 14px/1 FontAwesome;
 }
+
+.mapRightWrap.gaode.vehicle .vehicle-item{
+	  background: #fdfdfd;
+	  color: #2D2929;
+}
+
+.mapRightWrap.gaode.vehicle .vehicle-item div.text {
+    color: #999;
+}
+
+.mapRightWrap.gaode.vehicle .vehicle-item div.text span {
+    color: #000;
+}
+
+.mapRightWrap.gaode.vehicle p.head{
+	border-bottom: 1px solid #e5e5e5;
+	color: #7D7777;
+}
+
+.mapRightWrap.vehicle.gaode p.head>span.icon>a{
+	color: #999;
+}
+
+.mapRightWrap.vehicle.gaode p.head>span.icon>a:hover{
+	color: #555555;
+}
+
+.mapRightWrap.vehicle.gaode .vehicle-item.offline div.text span i,
+.mapRightWrap.vehicle.gaode .vehicle-item.offline div.text span,
+.mapRightWrap.vehicle.gaode .vehicle-item.offline div.text{
+	color: #e43a45;
+}
+
+.mapRightWrap.search.gaode .input-group input{
+    background-color: #fafafa;
+    border: 1px solid #fafafa;
+    color: #333333;
+}
+
+.mapRightWrap.search.gaode .input-group .input-group-btn button{
+	background-color: #3598dc;
+    border-color: #3598dc;
+}
+
+.mapRightWrap.search.gaode .input-group .input-group-btn button:hover{
+    background-color: #217ebd;
+    border-color: #1f78b5;
+}
+
+.mapRightWrap.gaode .search_result{
+	background: rgba(250, 250, 250, 0.9);
+	color: #333333;
+}
+
+.mapRightWrap.gaode .search_result .item_vehicle_list{
+	border-bottom: 1px solid #C7C7C7;
+}
+
+.mapRightWrap.gaode .search_result .item_vehicle{
+	color: #333333;
+}
+
+.mapRightWrap.gaode .search_result .result_item span.sub_text{
+	color: #8E8D8D;
+}
+
+.mapRightWrap.gaode .search_result .result_item:hover{
+	background: #ddd;
+	color: #333333;
+}
+/* GaoDe  style end-------  */
 \ No newline at end of file
@@ -14,9 +14,14 @@ var realMap = (function() {
  
 	var storage = window.localStorage;
  
+	var currentMap;
+	
+	var city = "上海";
+	
 	var real_map = {
-		currentMap : {},
-		mapName : '',
+		getMap: function(){
+			return currentMap;
+		},
 		init: function(){
 			var m = storage.getItem('real_map');
 			if(m && m == REAL_GAODE_TEXT)
@@ -24,11 +29,11 @@ var realMap = (function() {
 			else
 				real_map.baidu.init();
 		},
+		//百度地图
 		baidu : {
+			//初始化
 			init : function() {
-				var r = real_map;
-
-				r.setText(REAL_BAIDU_TEXT);
+				real_map.setText(REAL_BAIDU_TEXT);
  
 				var map = new BMap.Map(mapContainer[0]);
 				//中心点和缩放级别
@@ -39,7 +44,7 @@ var realMap = (function() {
 					layer.closeAll();
 					storage.setItem('real_map', REAL_BAIDU_TEXT);
 				});
-
+				
 				// 路况控件
 				var ctrl = new BMapLib.TrafficControl();
 				map.addControl(ctrl);
@@ -56,17 +61,63 @@ var realMap = (function() {
 				});
  
 				$('#tcWrap.maplibTc').addClass('animated bounceInLeft');
-
-				r.currentMap = map;
-				r.mapName = REAL_BAIDU_TEXT;
+				$('.maplibTcBtn_deskTop.anchorTR').remove();
+
+				//保存当前地图实例和名称
+				currentMap = {
+						map: map,
+						mapName: REAL_BAIDU_TEXT,
+						fName : 'baidu'
+				}
+				
 			},
 			change : function() {
+				if(currentMap.mapName == REAL_BAIDU_TEXT)
+					return;
+				
 				showMsg(REAL_BAIDU_TEXT);
  
 				real_map.destroy();
 				real_map.baidu.init();
+			},
+			autocomplete: function(input, cb){
+				var ac = new BMap.Autocomplete({
+					'location' : realMap.getMap().map,
+					'input': input,
+					'onSearchComplete': function(result){
+						//隐藏默认的提示框
+						ac.hide();
+						cb && cb({type: 'baidu', result: result.wr});
+					}
+				});
+				
+				 $('#' + input).on('keyup', function(){
+		        	if(this.value == ''){
+		        		$('.search_result').html('');
+		        		return;
+		        	}
+		         });
+				
+			},
+			setPlace: function(val){
+				var map = currentMap.map;
+				map.clearOverlays();
+				var local = new BMap.LocalSearch(map, {
+					  onSearchComplete: function(){
+						  var poi = local.getResults().getPoi(0);
+						  if(!poi){
+							  return;
+						  }
+						  var pp = poi.point;
+						  map.centerAndZoom(pp, 18);
+						  map.addOverlay(new BMap.Marker(pp));
+					  }
+				});
+				
+				local.search(val);
 			}
 		},
+		//高德地图
 		gaode : {
 			init : function() {
 				var mapLoadAnim = '<div class="sk-cube-grid _center">'+
@@ -83,9 +134,8 @@ var realMap = (function() {
  
 				mapContainer.html(mapLoadAnim);
  
-				var r = real_map;
-				r.gaode.setStyle();
-				r.setText(REAL_GAODE_TEXT);
+				real_map.gaode.setStyle();
+				real_map.setText(REAL_GAODE_TEXT);
  
 				var map = new AMap.Map(mapContainer[0]);
 				// 地图中心和缩放级别
@@ -115,10 +165,18 @@ var realMap = (function() {
 					}
 				});
  
-				r.currentMap = map;
-				r.mapName = REAL_GAODE_TEXT;
+				//保存当前地图实例和名称
+				currentMap = {
+						map: map,
+						mapName: REAL_GAODE_TEXT,
+						fName : 'gaode'
+				}
+				
 			},
 			change : function() {
+				if(currentMap.mapName == REAL_GAODE_TEXT)
+					return;
+				
 				showMsg(REAL_GAODE_TEXT);
  
 				real_map.destroy();
@@ -133,6 +191,38 @@ var realMap = (function() {
 				$('.mapRightWrap').removeClass('gaode');
 				$('.mapTools').removeClass('gaode');
 				$('.leftUtils').removeClass('gaode');
+			},
+			autocomplete: function(input, cb){
+				
+				AMap.plugin('AMap.Autocomplete',function(){
+					var autoOptions = {
+				            city: city 
+			        };
+			        autocomplete= new AMap.Autocomplete(autoOptions);
+			        
+			        $('#' + input).on('keyup', function(){
+			        	if(this.value == ''){
+			        		$('.search_result').html('');
+			        		return;
+			        	}
+			        	autocomplete.search(this.value, function(status, result){
+			        		cb & cb({type: 'gaode', result: result.tips});
+				        });
+			        });
+				});
+			},
+			setPlace: function(val){
+				var map = currentMap.map;
+				
+				AMap.plugin(['AMap.PlaceSearch'],function(){
+				     var placeSearch = new AMap.PlaceSearch({
+				              city:city,
+				              map:map,
+				              pageSize: 1
+				     });
+				     
+				     placeSearch.search(val);
+				});
 			}
 		},
 		setText : function(text) {
@@ -141,10 +231,12 @@ var realMap = (function() {
 		},
 		destroy : function() {
 			trafficBtn.unbind('click');
-			var map = real_map.currentMap;
+			
+			//如果当前地图实例有destroy方法即执行
+			var map = currentMap.map;
 			map.destroy && map.destroy();
  
-			if (real_map.mapName == REAL_GAODE_TEXT) {
+			if (currentMap.mapName == REAL_GAODE_TEXT) {
 				// 如果前一个地图是高德，清除相关样式
 				real_map.gaode.clearStyle();
 			}
 !function() {
+	//css3动画结束事件
 	var animationend = 'webkitAnimationEnd animationend';
-
-	var playAnimation;
  
+	var playAnimation;
+	//地图右侧容器
 	var mrw = $('.mapRightWrap');
-	
+	//加载动画
 	var spinnerLoad = '<div class="spinner">' 
 					+ '	  <div class="rect1"></div>'
 					+ '  <div class="rect2"></div>' 
@@ -12,22 +13,15 @@
 					+ '  <div class="rect4"></div>' 
 					+ '  <div class="rect5"></div>'
 					+ '</div>';
-
  
-	//加载车辆信息
-	function jsQueryVehicle(){
-		mrw.html(spinnerLoad);
-		setTimeout(function() {
-			mrw.html('').addClass('vehicle');
-		}, 2000);
-	}
-	
-	// mapRightWrap 还原
-	function resetRotate(cb) {
+	// mapRightWrap 角度恢复
+	function resetRotate(cb, midCallback) {
 		mrw.one('transitionend', function() {
 			// 先取消transition ，将角度还原后再设置
 			$(this).css('transition', 'none').addClass('rotate0');
  
+			midCallback && midCallback();
+			
 			setTimeout(function() {
 				mrw.css('transition', 'all .5s ease-in-out')
 					.removeClass('disable');
@@ -53,6 +47,7 @@
 		$('.mapTools').addClass('disable');
 		$('.mapTools div.item.active').removeClass('active');
 		$(this).addClass('active');
+		
 		toolsEvent[$(this).data('click')]();
 	});
  
@@ -61,14 +56,13 @@
 		// 车辆
 		vehicle : function() {
 			toolsEvent.clearStyle();
-			mrw.addClass('to_vehicle');
-			resetRotate(jsQueryVehicle);
+			mrw.html('').addClass('to_vehicle vehicle');
+			resetRotate(null, vehiclePanel.showData);
 		},
 		search : function() {
 			toolsEvent.clearStyle();
-			mrw.addClass('to_searchPanel');
-
-			resetRotate();
+			mrw.html('').addClass('to_searchPanel search');
+			resetRotate(null, searchPanel.init);
 		},
 		notice : function() {
 		},
@@ -76,7 +70,7 @@
 		},
 		clearStyle : function() {
 			mrw.removeClass(
-					'vehicle to_vehicle to_searchPanel rotate0');
+					'vehicle search to_vehicle to_searchPanel rotate0');
 		}
 	};
  
@@ -92,22 +86,28 @@
 	// 地图容器高度
 	$('#mapContainer').height($(pjaxContainer).height() + 49);
  
-	jsQueryVehicle();
+	mrw.html(spinnerLoad);
 	init();
  
 	function init(){
-		try {
-			realMap.init();
-		} catch (e) {
-			console.log('leay');
-			setTimeout(function(){
+		//初始化地图
+		(function(){
+			var f = arguments.callee;
+			try {
 				realMap.init();
-			}, 100);
-		}
+				console.log('realMap');
+			} catch (e) {
+				setTimeout(f , 100);
+			}
+		})();
+		//初始化车辆列表
+		(function(){
+			var f = arguments.callee;
+			try {
+				vehiclePanel.showDataLazy();
+			} catch (e) {
+				setTimeout(f , 100);
+			}
+		})();
 	}
-	
-/*	setTimeout(function(){
-		//清楚地图容器的加载动画（此时已被隐藏）
-		$('.sk-cube-grid._center').remove();
-	}, 3000);*/
 }();
 \ No newline at end of file
@@ -31,14 +31,24 @@
 	<div class="item" data-click="search">
 		<i class="fa fa-search"></i> &nbsp;搜索
 	</div>
-	<div class="item" data-clikc="notice">
+	<div class="item" data-click="notice">
 		<i class="fa fa-bell-o"></i> &nbsp;通知
 	</div>
 	<div class="item" data-click="playBack">
 		<i class="fa fa-history"></i> &nbsp;回放
 	</div>
 </div>
-<div class="mapRightWrap z-depth-3"></div>
+
+<div class="mapRightWrap z-depth-3 vehicle" >
+</div>
+
+<div id="temps"></div>
  
 <script src="js/map_platform.js"></script>
+<script src="js/vehicle.js"></script>
+<script src="js/search.js"></script>
+<script src="js/temp.js"></script>
 <script src="js/real.js"></script>
+<script>
+	console.log(111);
+</script>