add_select.html 6.99 KB
<!-- 选择站点新增方式 -->
<div class="modal fade" id="add_select_mobal" tabindex="-1" role="basic" aria-hidden="true">
	
	<div class="modal-dialog">
		
		<div class="modal-content">
		
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
				<h4 class="modal-title">站点新增方式</h4>
			</div>
			
			<div class="modal-body">
			
				<form class="form-horizontal" action="/" method="post" id="formBootbox" role="form">
				
					<div class="alert alert-danger display-hide" id="requiredname">
						<button class="close" data-close="alert"></button>
							站点名称为必填项
					</div>
					
					<!-- 站点名称 -->
					<div class="form-group" id="formRequ">
						<label class="col-md-3 control-label"><span class="required"> * </span>站点名称:</label>
						<div class="col-md-9">
							<input type="text" class="form-control input-medium" id="stationNamebootbox" name="stationNamebootbox">
						</div>
					</div>
					
					<!-- 新增方式 -->
					<div class="form-group">
						<label class="col-md-3 control-label">新增方式:</label>
						<div class="col-md-9">
							<div class="icheck-list">
								<label>
										<input type="radio" class="icheck" name="baseRes" value=0 checked> 系统生成
								</label>
								<label >
									<input type="radio" class="icheck" name="baseRes" value=1 > 手动添加
								</label>
								<label>
									<input type="radio" class="icheck" name="baseRes" value=2> 系统引用
								</label>
							</div>
						</div>
					 </div>
					 
					 <div class="form-group">
					 	<div class="alert alert-info font-blue-chambray" style="background-color: #2C3E50">
                            <h5 class="block"><span class="help-block"> * 新增方式说明: </span></h5>
                            <p><span class="help-block"> a)系统生成:根据站点名称自动生成以300米为半径范围的圆.</span> </p>
                            <p><span class="help-block"> b)手动添加:手动在地图上画出站点范围,然后双击鼠标右键保存.</span> </p>
                            <p><span class="help-block"> c)选择引用:从系统中选择已有的站点进行引用.</span> </p>
                        </div>
					 </div>
			    </form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn default" data-dismiss="modal">取消</button>
				<button type="button" class="btn btn-primary" id="addSelectnextButton">下一步</button>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
$(function(){
	
	// 加载显示mobal
	$('#add_select_mobal').modal({show : true,backdrop: 'static', keyboard: false});
	
	// 站点名称改变事件
	$('#stationNamebootbox').on('change',function() {
		
		var stationNameV = $('#stationNamebootbox').val();
		
		WorldsBMap.localSearchFromAdreesToPoint(stationNameV,mapB,function(Points) {
			
			if(Points) {
				
				var BJwpointsArray = Points.split(' ');
				
				var stationNameChangePoint = new BMap.Point(BJwpointsArray[0], BJwpointsArray[1]);
				
		  		var marker_stargt2 = new BMap.Marker(stationNameChangePoint); 
		  		
		  		var PanOptions ={noAnimation :true};
		  		
		  		mapB.panTo(stationNameChangePoint,PanOptions);
		  		
		  		mapB.panBy(0,100);
		  		
		  		// 将标注添加到地图中
		  		mapB.addOverlay(marker_stargt2);  
		  		
		  		//跳动的动画
		  		marker_stargt2.setAnimation(BMAP_ANIMATION_BOUNCE); 
				
			}
			
		});
		
	});
	
	// 获取表单元素
	var form = $('#formBootbox');
	
	// 错误提示元素
	var requiredname = $('#requiredname', form);
	
	// 下一步点击事件
	$('#addSelectnextButton').on('click', function() {
		
		// 表单提交
		form.submit();
		
	});
	
	// 表单验证
	form.validate({
		
		errorElement : 'span', 
		
		errorClass : 'help-block help-block-error', 
		
		focusInvalid : false, 
		
		rules : {
			
			'stationNamebootbox' : {
				
				minlength : 2,
				
				required : true,
				
				maxlength : 10
				
			}
	
		},
		
		invalidHandler : function(event, validator) {  
			
			requiredname.show();
			
			App.scrollTo(requiredname, -200);
			
		},

		highlight : function(element) { 
			
			$(element).closest('.form-group').addClass('has-error'); 
			
		},

		unhighlight : function(element) { 
			
			$(element).closest('.form-group').removeClass('has-error'); 
			
		},

		success : function(label) {
			
			label.closest('.form-group').removeClass('has-error'); 
			
		},

		submitHandler : function(f) {
			
			// 隐藏错误提示
			requiredname.hide();
			
			// 表单序列化
			var params = form.serializeJSON();
			
			// 获取站点名称
			var stationNamebootbox = params.stationNamebootbox;
			
			// 获取新增站点方式
			var baseRes = params.baseRes;
			
			// 查询是否存在输入的站点名称
			GetAjaxData.getLikeStationName(stationNamebootbox,function(data) {
				
				// 站点名称
				addStaitonParmas.stationNamebootbox = stationNamebootbox;
				
				// 系统生成
				if(baseRes == 0) {
					
					// 验证系统是存在该站点名称
					var tempblm = PublicFunctions.isHaveStationName(data);
					
					if(tempblm) {
						
						WorldsBMap.localSearchFromAdreesToPoint(stationNamebootbox,mapB,function(Points) {
							 
							if(Points) {
								 
								 var pointsArray  = Points.split(' ');
									 
								 var paramCentre = 	[{potion:{lng:pointsArray[0],lat:pointsArray[1]}}];
								
								 GetAjaxData.getFormPointEToWGS(paramCentre,function(p) {
									 
									 // 设置值
									 PublicFunctions.setFormInputValue(Points, p[0].WGSpotion.Lng,p[0].WGSpotion.Lat,'','','r',300);
										
									 // 以藏站点新增方式mobal
									 $('#add_select_mobal').modal('hide');
										
									 // 加载add页面
									 $.get('add.html', function(m){$(pjaxContainer).append(m);});
									 
								 });
								
							} else {
								
								// 返回坐标为空
								layer.confirm('【系统无法生成,请选择其他方式新增】', {btn : [ '返回' ],icon: 3, title:'提示' }, function(index){
									
									layer.close(index);
									
								});
								
							}
							 
						 });
						
					} 
				
				// 手动添加
				}else if(baseRes==1) {
					
					// 验证系统是存在该站点名称
					var tempblm = PublicFunctions.isHaveStationName(data);
					
					if(tempblm) {
						
						// 以藏站点新增方式mobal
						$('#add_select_mobal').modal('hide');
						
						status = 'add';
						
						WorldsBMap.drawingManagerOpen();
						
						
					}
					
					
				}else if(baseRes==2) {
					
					// 系统引用 
					
					$('#add_select_mobal').modal('hide');
					
					$.get('station_tabledate.html', function(m){$(pjaxContainer).append(m);});
				}
			});
		}
	});
	
});
</script>