潘钊 / bsth_control · Files

<!-- 新增站点 -->
<div class="modal fade" id="add_station_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" role="form" id="add_station_form" action="/module" method="post">
				
					<div class="alert alert-danger display-hide"> <button class="close" data-close="alert"></button>
						您的输入有误，请检查下面的输入项
					</div>
					
					<!-- 线路ID -->
					<input type="hidden" name="lineId" id="lineIdInput"  value="" />
					
					<input type="hidden" name="bPolygonGrid" id="bPolygonGridInput"  value="" />
					
					<input type="hidden" name="gPolygonGrid" id="gPolygonGridInput"  value="" />
					
					<input type="hidden" name="gJwpoints" id="gJwpointsInput">
					
					<input type="hidden" name="dbType" id="dbTypeInput" value="b"/>
					
					<input type="hidden" name="x" id="xInput" value=""/>
					
					<input type="hidden" name="y" id="yInput" value=""/>
					
					<!-- 站点名称 -->
					<div class="form-body">
						<div class="form-group">
							<label class="control-label col-md-3">
          						<span class="required"> * </span> 站点名称：
                    		</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="stationName" id="stationNameInput" placeholder="站点名称"> 
							</div>
						</div>
					</div>
					
					<!-- 站点编码 -->
					<div class="form-body">
						<div class="form-group">
							<label class="control-label col-md-3">
          						<span class="required"> * </span>站点编码：
                    		</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="stationCod" id="stationCodInput">
							</div>
						</div>
					</div>
					
					<!-- 站点序号 -->
					<div class="form-body">
						<div class="form-group">
							<label class="control-label col-md-3">
          						<span class="required"> * </span>站点序号：
                    		</label>
							<div class="col-md-6">
								<select name="stationRouteCode" class="form-control" id="stationrouteSelect"></select>
								<span class="help-block"> *说明：选择的站点将作为本站序号的参考，成为选择站点的下一站。 </span>
							</div>
						</div>
					</div>
					
					<!-- 站点类型 -->
					<div class="form-body">
						<div class="form-group">
							<label class="control-label col-md-3">
          						<span class="required"> * </span>站点类型：
                    		</label>
							<div class="col-md-6">
								<select name="stationMark" class="form-control" id="stationMarkSelect">
									<option value="">-- 请选择站点类型 --</option>
									<option value="B">起点站</option>
									<option value="Z">中途站</option>
									<option value="E">终点站</option>
									<option value="T">停车场</option>
								</select>
							</div>
						</div>
					</div>
					
					<!-- 站点方向 -->
					<div class="form-body">
						<div class="form-group">
							<label class="control-label col-md-3">
          						<span class="required"> * </span>站点方向：
                    		</label>
							<div class="col-md-6">
								<select name="directions" class="form-control" id="stationdirSelect">
									<option value="">-- 请选择站点类型 --</option>
									<option value="0">上行</option>
									<option value="1">下行</option>
								</select>
							</div>
						</div>
					</div>
					
					<!-- 道路编码-->
					<div class="form-body">
						<div class="form-group">
							<label class="control-label col-md-3">道路编码：</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="roadCoding" id="roadCodingCodInput">
							</div>
						</div>
					</div>
					
					<!-- 中心位置坐标点 -->
					<div class="form-body">
						<div class="form-group">
							<label class="col-md-3 control-label">经纬度坐标点：</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="bJwpoints" id="bJwpointsInput">
							</div>
						</div>
					</div>
					
					<!-- 站点WGS经纬度 -->
				<!-- 	<div class="form-body">
						<div class="form-group">
							<label class="col-md-3 control-label">站点WGS经纬度：</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="gJwpoints" id="gJwpointsInput">
							</div>
						</div>
					</div> -->
					
					<!-- 范围图形类型 -->
					<div class="form-body">
						<div class="form-group">
							<label class="col-md-3 control-label">范围图形类型：</label>
							<div class="col-md-6">
								<select name="shapesType" class="form-control" id="shapesTypeSelect">
									<option value="">-- 请选择站点类型 --</option>
									<option value="r">圆形</option>
									<option value="d">多变形</option>
								</select>
							</div>
						</div>
					</div>
					
					<!-- 范围图形类型 -->
					<div class="form-body">
						<div class="form-group">
							<label class="col-md-3 control-label">圆形半径：</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name=radius id="radiusInput">
								<!-- <select name="radius" class="form-control" id="radiusSelect">
									<option value="">-- 请选择圆形半径 --</option>
									<option value="50">50</option>
									<option value="100">100</option>
									<option value="150">150</option>
									<option value="200">200</option>
									<option value="250">250</option>
									<option value="300">300</option>
									<option value="350">350</option>
									<option value="400">400</option>
									<option value="450">450</option>
								</select> -->
							</div>
						</div>
					</div>
					
					<!-- 到站时间 -->
					<div class="form-body">
						<div class="form-group">
							<label class="col-md-3 control-label">到站时间：</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="toTime" id="toTimeInput" >
								<span class="help-block">单位：分钟</span>
							</div>
						</div>
					</div>
					
					<!-- 到站距离 -->
					<div class="form-body">
						<div class="form-group">
							<label class="col-md-3 control-label">到站距离：</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="distances" id="distancesInput" >
								<span class="help-block">单位：公里</span>
							</div>
						</div>
					</div>
					
					<!-- 版本号 -->
					<div class="form-body">
						<div class="form-group">
							<label class="col-md-3 control-label">版本号：</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="versions" value='1' Readonly>
							</div>
						</div>
					</div>
					
					<!-- 范围图形类型 -->
					<div class="form-body">
						<div class="form-group">
							<label class="col-md-3 control-label">是否撤销：</label>
							<div class="col-md-6">
								<select name="destroy" class="form-control" id="destroySelect">
									<option value="">-- 请选择撤销类型 --</option>
									<option value="0">否</option>
									<option value="1">是</option>
								</select>
							</div>
						</div>
					</div>
					
					<!-- 描述/说明 -->
	                <div class="form-group">
	                	<label class="control-label col-md-3"> 描述/说明： </label>
                 		<div class="col-md-6">
                     		<textarea class="form-control" rows="3" name="descriptions" id="descriptionsTextarea" placeholder="描述/说明"></textarea>
                    	</div>
	                </div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn default" data-dismiss="modal" id="addMobalHiden">取消</button>
				<button type="button" class="btn btn-primary" id="addStationButton">提交数据</button>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">

$('#add_station_mobal').on('AddStationMobal.show', function(e, addMap,ajaxd,staobj,lineObj,fun){
	
	var Station =  staobj.getAddStation();
	
	var Line = lineObj.getLineObj();
	
	// 延迟加载
	setTimeout(function(){
		
		// 显示mobal
		$('#add_station_mobal').modal({show : true,backdrop: 'static', keyboard: false});
		
	},200);
	
	// 当调用 hide 实例方法时触发
	$('#add_station_mobal').on('hide.bs.modal', function () {
		
		closeMobleSetClean();
		
	});
	
	// 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。
	$('#add_station_mobal').on('show.bs.modal', function () {
		
		// 线路ID
		$('#lineIdInput').val(Line.id);
		
		// 获取站点名称元素设值
		$('#stationNameInput').val(Station.stationNamebootbox).attr('Readonly','Readonly');
		
		// 获取方向元素，并添加值
		$('#stationdirSelect').val(Station.dir).attr('Readonly','Readonly');
		
		// 百度地图经纬度坐标中心点
		$('#bJwpointsInput').val(Station.bJwpoints).attr('Readonly','Readonly');
		
		// 百度坐标点图形集合
		$('#bPolygonGridInput').val(Station.bPolygonGrid);
		
		// 获取图形类型元素，并添加值
		$('#shapesTypeSelect').val(Station.shapesType).attr('Readonly','Readonly');
		
		// 获取圆形半径元素，并添加值
		$('#radiusInput').val(Station.radius).attr('Readonly','Readonly');
		
		// 是否撤销
		$('#destroySelect').val(0).attr('Readonly','Readonly'); 
		
		// 获取站点序号元素，并添加下拉属性值
		ajaxd.getStation(Line.id,Station.dir,function(treeData) {
			
			var options = '<option value="">请选择...</option>';
			
			var dArray = treeData[0].children[0].children;	
			
			for(var i = 0 ; i<dArray.length; i++){
				 
				options += '<option value="'+dArray[i].stationRouteStationRouteCode+ '_'+ dArray[i].stationRouteStationMark+'">'+dArray[i].stationRouteStationName+'</option>'
				
			}
		 
			$('#stationrouteSelect').html(options);
			
		});
		
		// 获取站点编码元素，添加站点编码值
		ajaxd.getStationCode(function(stationCode) {
			
			$('#stationCodInput').val(stationCode).attr('Readonly','Readonly');
			
		});
		
	});
	
	// 站点序号值改变事件
	$('#stationrouteSelect').on('change',function() {
		
		var stationRValue = $('#stationrouteSelect').val();
		
		if(stationRValue) {
			
			var tempStr = stationRValue.split('_');
			
			if(tempStr[1] == 'E') {
				
				$('#stationMarkSelect').val('E');
				
			}else {
				
				$('#stationMarkSelect').val('Z');
				
			}
			
		}
		
	});
	
	// 获取表单元素
	var form = $('#add_station_form');
	
	// 获取错误提示信息元素
	var error = $('.alert-danger', form);
	
	//提交
	$('#addStationButton').on('click', function() {
		
		// 表单提交
		form.submit();
		
	});
	
	// 表单验证
	form.validate({
		
		errorElement : 'span', 
		
		errorClass : 'help-block help-block-error', 
		
		focusInvalid : true, 
		
		rules : {
			
			// 站点名称
			'stationName' : {
				
				// 必填项
				required : true
				
			},
			
			// 站点类型
			'stationMark' : {
				
				// 必填项
				required : true
				
			},
			
			// 站点序号
			'stationRouteCode' : {
				
				// 必填项
				required : true,
				
			},
			
			// 站点编码
			'stationCod': {
				
				// 必填项
				required : true,
				
				// 必须输入合法的数字（负数，小数）。
				number : true
				
			},
			
			// 站点方向
			'directions' : {
				
				// 必填项
				required : true,
				
			},
			
			// 到站距离
			'distances' : {
				
				// 必须输入合法的数字（负数，小数）。
				number : true
				
			},
			
			// 到站时间
			'toTime' : {
				
				// 必须输入合法的数字（负数，小数）。
				number : true
				
			},
			
			// 描述与说明
			'descriptions' : {
				
				// 最大长度
				maxlength: 150
				
			}
	
		},
		invalidHandler : function(event, validator) {  
			
			error.show();
			
			App.scrollTo(error, -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) {
			
			var params = form.serializeJSON();
			
			error.hide();
			
			// 保存
			ajaxd.stationSave(params,function(data) {
				
				if(data.status=='SUCCESS') {
					
					// 弹出添加成功提示消息
					layer.msg('添加成功...');
					
				}else {
					
					// 弹出添加失败提示消息
					layer.msg('添加失败...');
					
				}
	
				var id =Line.id;
				
				var dir = params.directions
				
				// 刷行左边树
				fun.resjtreeDate(id,dir);
				
				closeMobleSetClean();
				
				// 隐藏moble
				hideMoble();
				
		
			});
		}
	});
	
	function closeMobleSetClean() {
		
		// 清除地图覆盖物
		addMap.clearMarkAndOverlays();
		
		/** 设置新增站点集合对象为空 */
		staobj.setAddStation({});
		
		var add_direction_v = $('#stationdirSelect').val();
		
		ajaxd.getSectionRouteInfo(Line.id,add_direction_v,function(data) {
			
			fun.linePanlThree(Line.id,data,add_direction_v);
			
		});
		
	}
	
	function hideMoble() {
		
		// 隐藏mobal
		$('#add_station_mobal').modal('hide');
		
	}
	
});
</script>