add.html 11.9 KB
<link href="/pages/base/roadspeed/css/addmap.css" rel="stylesheet" type="text/css" />
<div class="page-head">
	<div class="page-title">
		<h1>添加路段限速</h1>
	</div>
</div>

<ul class="page-breadcrumb breadcrumb">
	<li><a href="/pages/home.html" data-pjax>首页</a> <i class="fa fa-circle"></i></li>
	<li><span class="active">基础信息</span> <i class="fa fa-circle"></i></li>
	<li><a href="/pages/base/roadspeed/list.html" data-pjax>路段限速信息</a> <i class="fa fa-circle"></i></li>
	<li><span class="active">添加路段限速</span></li>
</ul>

<div class="portlet light bordered" id="form-wizard-info">
	<div class="portlet-title">
		<div class="caption">
			<i class="icon-equalizer font-red-sunglo"></i> 
			<span class="caption-subject font-red-sunglo bold uppercase">添加路段限速
				 <span class="step-title"> 1 - 4 </span>
				 <i class="fa fa-question-circle tipso-animation" style="color: rgba(158, 158, 158, 0.49);"></i>
			</span>
		</div>
		<div class="actions">
			<div class="btn-group btn-group-devided" data-toggle="buttons">
				<a class="btn btn-circle default" href="/pages/base/roadspeed/list.html" style="float: right;padding: 4px 23px;" data-pjax=""><i class="fa fa-reply"></i> 退出</a>
			</div>
		</div>
	</div>
	<div class="portlet-body form">
		<!-- START FORM -->
		<form class="form-horizontal" id="submit_roadspeed_form"  action="/" method="POST" novalidate="novalidate">
			<div class="form-wizard">
				<div class="form-body">
					<ul class="nav nav-pills nav-justified steps">
						<li class="active">
							<a href="#tab1" data-toggle="tab" class="step" aria-expanded="true">
								<span class="number"> 1 </span>
								<span class="desc">
								<i class="fa fa-check"></i> 选择添加路段限速方式 </span>
							</a>
						</li>
						<li>
							<a href="#tab2" data-toggle="tab" class="step">
								<span class="number"> 2 </span>
								<span class="desc">
								<i class="fa fa-check"></i> 路段位置 </span>
							</a>
						</li>
						<li>
							<a href="#tab3" data-toggle="tab" class="step active">
								<span class="number"> 3 </span>
								<span class="desc">
								<i class="fa fa-check"></i> 路段限速信息 </span>
							</a>
						</li>
						<li>
							<a href="#tab4" data-toggle="tab" class="step">
								<span class="number"> 4 </span>
								<span class="desc">
								<i class="fa fa-check"></i> 确认 </span>
							</a>
						</li>
					</ul>
					<!-- 进度条 -->
					<div id="bar" class="progress progress-striped" role="progressbar">
						<div class="progress-bar progress-bar-success" style="width: 25%;"></div>
					</div>
					
					<div class="tab-content">
						<div class="alert alert-danger display-hide">
							<button class="close" data-close="alert"></button>
							您的输入有误,请检查下面的输入项
						</div>
						<div class="alert alert-success display-none">
							<button class="close" data-dismiss="alert"></button> 
							Your form validation is successful! 
						</div>
						
						<!-- 选择添加路段方式 -->
                       	<div class="tab-pane active" id="tab1">
                       		<h3 class="block"> 选择添加路段限速方式 </h3>
                      		<!-- 起点名称 -->
							<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="stationStartInput" name="stationStart">
								</div>
							</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="stationEndInput" name="stationEnd">
								</div>
							</div>
							<!-- 新增方式 -->
							<div class="form-group">
								<label class="col-md-3 control-label"><span class="required"> * </span> 
									新增方式&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:
								</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>
									</div>
								</div>
							 </div>
                        </div>
                        
                        <!-- 路段位置 -->
                        <div class="tab-pane" id="tab2">
                        	<h3 class="block">  路段位置  </h3>
                            <div id="roadBmap_basic"></div>
                            <div class="leftUtils">
                           		<div class="btn-group" style="left: 100px;">
	                            	<a class="btn btn-sm green-seagreen dropdown-toggle" style="width: 98px;" href="javascript:;" data-toggle="dropdown" aria-expanded="false"> 绘制工具
									        <i class="fa fa-angle-down"></i>
									</a>
								    <ul class="dropdown-menu pull-right" style="min-width:100px">
								        <li>
								            <a href="javascript:;" id="openDrawingManager"><i class="fa fa-pencil"></i> 打开 </a>
								        </li>
								        <li>
								            <a href="javascript:;" id = "closeDrawingManager"> <i class="fa fa-reply"></i> 关闭 </a>
								        </li>
								         
								    </ul>
							    </div>
                            </div>
                        </div>
                        
                        <!-- 路段信息 -->
                        <div class="tab-pane" id="tab3">
                        	<h3 class="block"> 路段限速信息 </h3>
							<input type="hidden" name="bRoadVector" id="bRoadVectorInput" />
							<input type="hidden" name="gRoadVector" id="gRoadVectorInput" />
							
							<!-- 路段名称 -->
							<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="name" id="nameInput" 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="speedStartDate" id="speedStartDateInput" 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="speedEndDate" id="speedEndDateInput" placeholder="限速结束时间"> 
									</div>
								</div>
							</div>
							<!-- 是否撤销 -->
							<div class="form-body">
								<div class="form-group">
									<label class="col-md-3 control-label"> <span class="required"> * </span> 是否启用:</label>
									<div class="col-md-6">
										<select name="isStart" class="form-control" id="isStartSelect">
											<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"> <span class="required"> * </span> 路段限速:</label>
									<div class="col-md-6">
										<input type="text" class="form-control" name="speed" id="speedInput" value="60">
										<span class="help-block">单位:千米/时(km/h)</span>
									</div>
								</div>
							</div>
                        	 
                        </div>
                        
                        <!-- 确定提交资料信息 -->
                        <div class="tab-pane" id="tab4">
                           <h3 class="block"> 确认您提交的路段限速信息 </h3>
                           
                           <h4 class="form-section"> 路段限速信息 </h4>
                           
                           <div class="form-group">
                               <label class="control-label col-md-3">路段名称:</label>
                               <div class="col-md-4">
                                   <p class="form-control-static" data-display="name"> </p>
                               </div>
                           </div>
                           
                           <div class="form-group">
                               <label class="control-label col-md-3">限速开始时间:</label>
                               <div class="col-md-4">
                                   <p class="form-control-static" data-display="speedStartDate"> </p>
                               </div>
                           </div>
                           
                           <div class="form-group">
                               <label class="control-label col-md-3">限速结束时间:</label>
                               <div class="col-md-4">
                                   <p class="form-control-static" data-display="speedEndDate"> </p>
                               </div>
                           </div>
                           
                           <div class="form-group">
                               <label class="control-label col-md-3">是否启用:</label>
                               <div class="col-md-4">
                                   <p class="form-control-static" data-display="isStart"> </p>
                               </div>
                           </div>
                           
                           <div class="form-group">
                               <label class="control-label col-md-3">路段限速:</label>
                               <div class="col-md-4">
                                   <p class="form-control-static" data-display="speed"> </p>
                               </div>
                           </div>
                           
                        </div>
                   </div>
              </div>
              <div class="form-actions">
                 <div class="row">
                     <div class="col-md-offset-3 col-md-9">
                         <a href="javascript:;" class="btn default button-previous disabled" style="display: none;">
                             <i class="fa fa-angle-left"></i> 返回 </a>
                         <a href="javascript:;" class="btn btn-outline green button-next"> 下一步
                             <i class="fa fa-angle-right"></i>
                         </a>
                         <a href="javascript:;" class="btn green button-submit" style="display: none;" id="submintBtn"> 提交
                             <i class="fa fa-check"></i>
                         </a>
                     </div>
                 </div>
              </div>
        	</div>
        </form>
		<!-- END FORM-->
	</div>
</div>
<!-- 表单向导JS类库 -->
<script src="/pages/base/roadspeed/js/add-form-wizard.js"></script>
<!-- 地图JS类库 -->
<script src="/pages/base/roadspeed/js/add-vmap-world.js"></script>
<!-- reload事件 -->
<script src="/pages/base/roadspeed/js/add-form-reload.js"></script>