潘钊 / bsth_control · Files

<!-- 新增站点 -->
<div class="modal fade" id="add_station_mobal" 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>
						Your input is incorrect, please check the input items below
					</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>Station name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:
                    		</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="zdmc" id="zdmcInput" placeholder="Station name" readonly="readonly">
							</div>
						</div>
					</div>
					<!-- Station name -->
					<div class="form-body">
						<div class="form-group">
							<label class="control-label col-md-3">
          						<span class="required"> * </span> Station name:
                    		</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="stationName" id="stationNameInput" placeholder="Station name">
							</div>
						</div>
					</div>
					<!-- 站点编码 -->
					<div class="form-body">
						<div class="form-group">
							<label class="control-label col-md-3">
          						<span class="required"> * </span>Station code&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:
                    		</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="stationCod" id="stationCodInput" readonly="readonly">
							</div>
						</div>
					</div>
					<!-- Standard code -->
					<div class="form-body">
						<div class="form-group">
							<label class="control-label col-md-3">
								Standard code&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:
							</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="industryCode" id="industryCodeInput" placeholder="Standard code">
							</div>
						</div>
					</div>
					<!-- Direction -->
					<div class="form-body">
						<div class="form-group">
							<label class="control-label col-md-3">
          						<span class="required"> * </span>Direction&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:
                    		</label>
							<div class="col-md-6">
								<select name="directions" class="form-control" id="stationdirSelect">
									<option value="">Select station direction</option>
									<option value="0">Up</option>
									<option value="1">Down</option>
								</select>
							</div>
						</div>
					</div>
					
					<!-- 站点序号 -->
					<div class="form-body">
						<div class="form-group">
							<label class="control-label col-md-3">
          						<span class="required"> * </span>Station seq&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:
                    		</label>
							<div class="col-md-6">
								<select name="stationRouteCode" class="form-control" id="stationrouteSelect" style="width:100%"></select>
							</div>
						</div>
					</div>
					
					<!-- 站点类型 -->
					<div class="form-body">
						<div class="form-group">
							<label class="control-label col-md-3">
          						<span class="required"> * </span>Station type&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:
                    		</label>
							<div class="col-md-6">
								<select name="stationMark" class="form-control" id="stationMarkSelect">
									<option value="">Select station type</option>
									<option value="B">Start Station</option>
									<option value="Z">Intermediate station</option>
									<option value="E">Terminal station</option>
									<option value="T">Parking lot</option>
								</select>
							</div>
						</div>
					</div>
					<!-- 中心位置坐标点 -->
					<div class="form-body">
						<div class="form-group">
							<label class="col-md-3 control-label"><span class="required"> * </span>WGS84 coordinates:</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="bJwpoints" id="bJwpointsInput">
							</div>
						</div>
					</div>
					<!-- Geometry type -->
					<div class="form-body">
						<div class="form-group">
							<label class="col-md-3 control-label"><span class="required"> * </span>Geometry type:</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="shapesType" id="shapesTypeSelect" placeholder="Geometry type" readonly="readonly">
							</div>
						</div>
					</div>
					<!-- Circle radius -->
					<div class="form-body" id="radiusGroup">
						<div class="form-group">
							<label class="col-md-3 control-label"><span class="required"> * </span>Circle radius&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="radius" id="radiusInput" placeholder="Circle radius">
							</div>
						</div>
					</div>
					<!-- 是否撤销 -->
					<div class="form-body">
						<div class="form-group">
							<label class="col-md-3 control-label"><span class="required"> * </span>State&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</label>
							<div class="col-md-6">
								<select name="destroy" class="form-control" id="destroySelect">
									<option value="">Select</option>
									<option value="0">No</option>
									<option value="1">Yes</option>
								</select>
							</div>
						</div>
					</div>
					
					<!-- Road code-->
					<div class="form-body">
						<div class="form-group">
							<label class="control-label col-md-3">Road code&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="roadCoding" id="roadCodingCodInput">
							</div>
						</div>
					</div>
					<!-- Time(previous to current) -->
					<div class="form-body">
						<div class="form-group">
							<label class="col-md-3 control-label">Time(previous to current)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="toTime" id="toTimeInput" >
								<span class="help-block">Unit:minutes</span>
							</div>
						</div>
					</div>
					<!-- Distance(previous to current) -->
					<div class="form-body">
						<div class="form-group">
							<label class="col-md-3 control-label">Distance(previous to current)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="distances" id="distancesInput" >
								<span class="help-block">Unit:Km</span>
							</div>
						</div>
					</div>
					<!-- 版本号 -->
					<div class="form-body">
						<div class="form-group">
							<label class="col-md-3 control-label">Version&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="versions" id='versionsInput' Readonly>
							</div>
						</div>
					</div>
					
					<!-- Description -->
	                <div class="form-group">
	                	<label class="control-label col-md-3"> Description&nbsp;&nbsp;&nbsp;&nbsp;: </label>
                 		<div class="col-md-6">
                     		<textarea class="form-control" rows="3" name="descriptions" id="descriptionsTextarea" placeholder="Description"></textarea>
                    	</div>
	                </div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn default" data-dismiss="modal" id="addMobalHiden">Cancel</button>
				<button type="button" class="btn btn-primary" id="addStationButton">Submit</button>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
$('#add_station_mobal').on('AddStationMobal.show', function(e, addMap,ajaxd,staobj,editRoute,fun){
	var Station =  staobj;
	var Line = editRoute.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 () {
		// 获取站点编码元素，添加站点编码值
		ajaxd.getStationCode(function(stationCode) {
			// 线路ID.
			$('#lineIdInput').val(Line.id);
			// 获取站点名称元素设值.
			$('#zdmcInput').val(Station.stationNamebootbox);
			// 获取Station name元素设值.
			$('#stationNameInput').val(Station.stationNamebootbox);
			// 站点编码.
			$('#stationCodInput').val(stationCode).attr('Readonly','Readonly');
			// 获取方向元素，并添加值.
			$('#stationdirSelect').val(Line.dir).attr('Readonly','Readonly');
			// 百度地图经纬度坐标中心点.
			$('#bJwpointsInput').val(Station.bJwpoints).attr('Readonly','Readonly');
			// 百度坐标点图形集合.
			$('#bPolygonGridInput').val(Station.bPolygonGrid);
			// 获取图形类型元素，并添加值
			if(Station.shapesType=='r')
				$('#shapesTypeSelect').val('Circle');
			else if(Station.shapesType=='d') {
				$('#radiusGroup').hide();
				$('#shapesTypeSelect').val('Polygon');
			}
			// 获取Circle radius元素，并添加值
			$('#radiusInput').val(Station.radius);
			// 是否撤销
			$('#destroySelect').val(0); 
			
			var initzdlyP = {'lineId':Line.id,'destroy':0,'direction':Line.dir};
			initSelect(initzdlyP);
		});
	});
	// 站点序号值改变事件
	$('#stationrouteSelect').on('change',function() {
		var stationRValue = $('#stationrouteSelect').val();
		if(stationRValue=='Select') {
			$('#stationMarkSelect').val('B');
		}else {
			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,maxlength : 50,},// 站点名称 必填项
			'stationCod': {required : true,},// 站点编码 必填项 必须输入合法的数字（负数，小数）。
			'directions' : {required : true,dirIs : true},// Direction 必填项 必填项
			'stationRouteCode' : {isStart : true},// 站点序号
			'stationMark' : {required : true,},// 站点类型 必填项.
			'bJwpoints' : {required : true,},// WGS84 coordinates 必填项.
			'shapesType' : {required : true,},// Geometry type 必填项.
			'radius' : {required : true,},// Geometry type 必填项.
			'destroy' : {required : true,},// 是否撤销 必填项.
			'toTime' : {number : true},// Time(previous to current) 必须输入合法的数字（负数，小数）。
			'distances' : {number : true},// Distance(previous to current) 必须输入合法的数字（负数，小数）。
			'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();
			if(params.shapesType=='Circle')
				params.shapesType='r';
			else if(params.shapesType=='Polygon')
				params.shapesType='d';
			if(params.stationRouteCode=='Select')
				params.stationRouteCode='';
			// 保存
			ajaxd.stationCacheSave(params,function(data) {
				if(data.status=='SUCCESS') {
					// 弹出添加成功提示消息
					layer.msg('Operation success...');
				}else {
					// 弹出添加失败提示消息
					layer.msg('Operation failed...');
				}
				closeMobleSetClean();
				// 隐藏moble
				hideMoble();
			});
		}
	});
	function initSelect(p){
		ajaxd.getzdlyInfo(p,function(array) {
			// 定义路段路由长度、渲染拼音检索下拉框格式数据.
			var len_ = array.length,paramsD = new Array();
			if(len_>0) {
				paramsD.push({'id':'Select','text':'Select'});
				// 遍历.
				$.each(array, function(i, g){
					// 判断.
					if(g.name!='' || g.name != null) {
						// 添加拼音检索下拉框格式数据数组.
						paramsD.push({'id':g.stationRouteCode + '_' + g.stationMark + '_' + g.directions,
									  'text':g.stationName + ' (' + g.stationRouteCode + ')' + '  --' + fun.dirdmToName(g.directions)});
					}
				});
				$('#stationrouteSelect').empty();
				// 初始化上一个路段拼音检索下拉框.
				initPinYinSelect2($('#stationrouteSelect'),paramsD,function(selector) {
				});
			}
		});
	}
	function closeMobleSetClean() {
		// 清除地图覆盖物
		addMap.clearMarkAndOverlays();
		// 刷新站点列表
		$('#station').click();
	}
	function hideMoble() {
		// 隐藏mobal
		$('#add_station_mobal').modal('hide');
	}
	// 当站点类型为中途站或者终点站时,Previous station is required！
	$.validator.addMethod("isStart", function(value,element) {
		var tel = false;
		var stationMarkV = $('#stationMarkSelect').val();
		var stationrouteSelectV = $('#stationrouteSelect').val();
		if(stationMarkV =='B'){
			tel = true;
			return  tel;
		}else if(stationMarkV =='Z' || stationMarkV =='E'){
			if(stationrouteSelectV!='' && stationrouteSelectV!='Select'  && stationrouteSelectV!=null){
				tel = true;
				return  tel;
			}
		}
		return tel; 
	}, 'If adding station is not starting,previous station is required');
	// 方向
	$.validator.addMethod("dirIs", function(value,element) {
		var tel = true;
		var stationMarkV = $('#stationdirSelect').val();
		if(stationMarkV!=Line.dir){
			tel = false;
		}
		return tel; 
	}, '方向必须一致!');
});
</script>