用車申請網頁
wvehicleapply_add.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html lang="en">
<head>
<base href="<%=basePath%>">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>用車申請</title>
<link rel="stylesheet" type="text/css" href="static/amap/style.css">
<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.3&plugin=AMap.Geolocation,AMap.ToolBar,AMap.Geocoder,AMap.PlaceSearch,AMap.Autocomplete,AMap.Driving&key=d76c98b16a6e3904eaadfb6db3a7344b'></script>
<!-- <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.3&plugin=AMap.Geolocation,AMap.ToolBar,AMap.Geocoder,AMap.PlaceSearch,AMap.Autocomplete,AMap.Driving&key=608d75903d29ad471362f8c58c550daf'></script>-->
<link rel="stylesheet" href="static/weixin/style/weui.css" />
<link rel="stylesheet" href="static/weixin/example.css" />
<!-- <script src="static/weixin/jquery-2.1.4.js"></script> -->
<script src="static/weixin/zepto.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.1.js"></script>
<script src="static/weixin/example.js"></script>
<script src="static/weixin/weui.js"></script>
</head>
<body οnlοad='startLocate()'>
<div style="width:100%;height:100%;position:absolute;overflow:hidden">
<div class='wrap' style="width:200%;height:100%;position:absolute">
<div class='left'>
<header class='title top' style="height:0%"></header>
<div class="weui-tab">
<div class="weui-tab__panel">
<%-- <form action="${msg }.do" name="Form" id="Form"
method="post"> --%>
<form action="weixin/vehicle/${msg }.do" name="Form" id="Form" method="post">
<input type="hidden" name="VEHICLEAPPLY_ID" id="VEHICLEAPPLY_ID" value="${pd.VEHICLEAPPLY_ID}" />
<div class="weui-cell weui-cell_select weui-cell_select-after">
<div class="weui-cell__hd">
<label for="" class="weui-label">用車人</label>
</div>
<div id="emp" class="weui-cell__bd">
<select class="weui-select" name="APPLY_USER" id="APPLY_USER" value=" ${pd.APPLY_USER}" data-placeholder="請選擇" style="vertical-align:top;" style="width:98%;">
<c:forEach items="${staffInfoList}" var="empInfoList">
<option value="${empInfoList.STAFF_ID }" <c:if test="${empInfoList.STAFF_ID == pd.STAFF_ID }">selected</c:if>
<c:if test="${empInfoList.STAFF_ID == pd.APPLY_USER }">selected</c:if>>${empInfoList.NAME }</option>
</c:forEach>
</select>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd">
<label for="" class="weui-label">出發時間</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input" type="datetime-local" name="FROM_DATE" id="FROM_DATE" value="${pd.FROM_DATE}" placeholder="用車開始時間" />
</div>
</div>
<div class="weui-cell weui-cell_switch">
<div class="weui-cell__bd">是否長途：</div>
<div class="weui-cell__ft">
<input class="weui-switch" name="SHORT_TERM" id="SHORT_TERM" type="checkbox" <c:if test="${pd.SHORT_TERM == 1 }">checked="checked"</c:if>
οnclick="setType('1',1);" />
</div>
<div class="weui-cell__bd"> 是否緊急：</div>
<div class="weui-cell__ft">
<input class="weui-switch" name="URGENCY" id="URGENCY" type="checkbox" <c:if test="${pd.URGENCY == 1 }">checked="checked"</c:if>
οnclick="set_Type('1',1);" />
</div>
</div>
<div class="weui-cell weui-cell_select weui-cell_select-after">
<div class="weui-cell__hd">
<label for="" class="weui-label">用車人數</label>
</div>
<div class="weui-cell__bd">
<select class="weui-select" name="APPLY_NUMBER" id="APPLY_NUMBER" value="${pd.APPLY_NUMBER}" placeholder="請選擇用車人數">
<option value="">請選擇用車人數</option>
<option value="1">1 位</option>
<option value="2">2 位</option>
<option value="3">3 位</option>
<option value="4">4 位</option>
<option value="5">5 位</option>
<option value="6">6 位</option>
</select>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd">
<label for="" class="weui-label">用車原因</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input" type="text" name="USER_REASON" id="USER_REASON" value="${pd.USER_REASON}" placeholder="請輸入用車原因" />
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd">
<label for="" class="weui-label">出發地</label>
</div>
<div class="weui-cell__bd">
<div class='bottomright'>
<input type="hidden" name="FROM_LONTITUDE" id="FROM_LONTITUDE" value="${pd.FROM_LONTITUDE}" />
<input type="hidden" name="FROM_LATITUDE" id="FROM_LATITUDE" value="${pd.FROM_LATITUDE}" />
<input type="hidden" name="FROM_LOCATION" id="FROM_LOCATION" value="${pd.FROM_LOCATION}" />
<div id='origin'>你的位置</div>
</div>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd">
<label for="" class="weui-label">目的地</label>
</div>
<div class="weui-cell__bd">
<div class='bottomright'>
<input type="hidden" name="TO_LONTITUDE" id="TO_LONTITUDE" value="${pd.TO_LONTITUDE}" />
<input type="hidden" name="TO_LATITUDE" id="TO_LATITUDE" value="${pd.TO_LATITUDE}" />
<input type="hidden" name="TO_LOCATION" id="TO_LOCATION" value="${pd.TO_LOCATION}" />
<div id='destination'>你要去哪兒</div>
</div>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd">
<label for="" class="weui-label">結束時間</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input" type="datetime-local" name="TO_DATE" id="TO_DATE" value="${pd.TO_DATE}" placeholder="預計到達時間" />
</div>
</div>
<!-- <div class="weui-btn-area">
<div class="weui-cell">
<div class="weui-cell__bd" >
<input type="submit" name="Submit" value="保存" id="submit" class="weui-btn weui-btn_primary" style="height: 10%" />
</div>
<div class="weui-cell__bd"></div>
<div class="weui-cell__bd">
<input type="reset" name="reset" value="取消" style="height: 10%" class="weui-btn weui-btn_warn"/>
</div>
</div>
</div> -->
<div class="weui-btn-area">
<div class="weui-cell">
<div class="weui-cell__bd">
<c:if test="${pd.APPROVAL_STATUS !='APPROVAL' }">
<a class="weui-btn weui-btn_primary" href="javascript:;" id="button">提交</a>
</c:if>
<c:if test="${pd.APPROVAL_STATUS =='APPROVAL' }">
<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_primary">審批通過</a>
</c:if>
</div>
<div class="weui-cell__bd"></div>
<div class="weui-cell__bd">
<a class="weui-btn weui-btn_warn" href="javascript:void(0)" οnclick="window.history.go(-1)">取消</a>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- <div id="dialogs"> -->
<!--BEGIN dialog1-->
<div class="js_dialog" id="iosDialog1" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog">
<div class="weui-dialog__hd">
<strong class="weui-dialog__title"><h3>確認提示</h3></strong>
</div>
<div class="weui-dialog__bd">
<h4>您確認提交嗎？</h4>
</div>
<div class="weui-dialog__ft">
<a id="dhide" class="weui-dialog__btn weui-dialog__btn_default">取消</a>
<a href="javascript:;" id=saveButton class="weui-dialog__btn weui-dialog__btn_primary">提交</a>
</div>
</div>
</div>
<!--END dialog1-->
<!-- </div> -->
<div class='info top'>
</div>
<div id="container" class="map" tabindex="1" style="position:absolute; top:100%; left:0px;bottom: 0%"></div>
<!-- <div class='bottom start' >
<img src="./images/hotNew.png" />
<div class='bottomright' >
<div id='origin' >你的位置</div>
</div>
</div>
<div class='bottom end' >
<img src="./images/hotNewRed.png" />
<div class='bottomright' >
<div id='destination' >你要去哪兒</div>
</div>
</div> -->
</div>
<div class='right'>
<header class='title top'>
<a href='javascript:void(0)' id='back'>返回</a>
<div>地點搜索</div>
</header>
<div class='top' style='height:40px;'>
<div style='margin-top:2px'>
<input id='search' value='' />
</div>
<img id='searchButton' src="static/amap/images/search.gif" />
</div>
<div id="searchResult"></div>
</div>
<div id='locating' style='display:none'>
<img src='static/amap/images/loading.gif' />
<div>定位中,請稍候...</div>
</div>
</div>
</div>
<script type="text/javascript">
// 創建地圖
var map = new AMap.Map('container', {
zoom: 17
});
// 給地圖添加縮放工具條,默認顯示在右下角
var toolBar = new AMap.ToolBar({});
map.addControl(toolBar);
//起點（用戶位置）的marker標記
var startMarker = new AMap.Marker({
content: "<img style='width:19px;height:32px' src='static/amap/images/starts.png'/>",
offset: new AMap.Pixel(-10, -32)
});
//目的地的marker標記
var endMarker = new AMap.Marker({
content: "<img style='width:19px;height:32px' src='static/amap/images/ends.png'/>",
offset: new AMap.Pixel(-10, -32)
});
//創建駕車路線規劃組件
var driving = new AMap.Driving({
map: map,
hideMarkers: true
});
var wrap = document.getElementsByClassName('wrap')[0];
//顯示控制，執行後顯示地圖頁面
var showLeftView = function() {
AMap.event.removeListener(placeSearch.listElementClickHandler);
AMap.event.removeListener(autoComplete.selectHandler);
placeSearch.clear();
wrap.className = 'wrap';
};
//顯示控制，執行後顯示搜索頁面
var showRightView = function(onShowed) {
wrap.className = 'wrap rightShow';
};
//點擊返回，頁面由搜索頁面返回顯示頁面
AMap.event.addDomListener(document.getElementById('back'), 'click', showLeftView);
startMarker.on('click', function(e) {
alert("起點的經緯度：" + e.lnglat.getLng() + ',' + e.lnglat.getLat());
});
endMarker.on('click', function(e) {
alert("終點的經緯度：" + e.lnglat.getLng() + ',' + e.lnglat.getLat());
});
</script>
<script type="text/javascript">
$(function() {
$('#button').on('click', function(e) {
var fromDate1 = $("#FROM_DATE").val().replace("T", " ");
// var toDate1=$("#TO_DATE").val().replace("T"," ");
var fromDate = Date.parse(fromDate1.replace(/-/g, "/"));
// var toDate=Date.parse(toDate1.replace(/-/g,"/"));
var fromLocation = $("#FROM_LOCATION").val();
var toLocation = $("#TO_LOCATION").val();
var userReason = $("#USER_REASON").val();
var num = /[^\0-\9]/;
if($("#APPLY_USER").val() == "") {
$.weui.topTips('請選擇用車人');
return false;
};
if($("#FROM_DATE").val() == "" || $("#FROM_DATE").val() != null) {
if(isNaN(fromDate)) {
$.weui.topTips('請輸入用車開始時間');
return false;
} else if(fromDate < new Date()) {
$.weui.topTips('出發時間早於當前時間');
return false;
}
};
if($("#APPLY_NUMBER").val() == "") {
$.weui.topTips('請輸入使用人數');
return false;
};
if($("#USER_REASON").val() == "" || userReason != null) {
if(userReason == "") {
$.weui.topTips('請輸入用車原因');
return false;
} else if(!num.test(userReason)) {
$.weui.topTips(userReason + '用車原因不能全是數字');
return false;
}
};
if($("#FROM_LOCATION").val() == "" || fromLocation != null) {
if(fromLocation == "") {
$.weui.topTips('請輸入申請用車的出發地');
return false;
} else if(!num.test(fromLocation)) {
$.weui.topTips(fromLocation + '出發地不能全是數字');
return false;
}
};
if($("#TO_LOCATION").val() == "" || toLocation != null) {
if(toLocation == "") {
$.weui.topTips('請輸入申請用車的目的地');
return false;
} else if(!num.test(toLocation)) {
$.weui.topTips(toLocation + '目的地不能全是數字');
return false;
}
};
function isChinese(temp) {
var re = /[^\u4e00-\u9fa5]/;
if(re.test(temp)) {
alert(temp + '不是中文請輸入中文');
return false;
}
return true;
}
var vmsg = "${wmsg}";
if(vmsg == "success" || vmsg == "") {
var $iosDialog1 = $('#iosDialog1');
$('#dialogs').on('click', '.weui-dialog__btn', function() {
$(this).parents('.js_dialog').fadeOut(200);
});
//如下代碼需要點擊兩次保存，修改爲 $iosDialog1.fadeIn(200);
//$('#button').on('click', function() { $iosDialog1.fadeIn(200); });
$iosDialog1.fadeIn(200);
} else {
top.Dialog.close();
}
});
var submiting = false;
$("#saveButton").on('click', function(e) {
$("#saveButton").attr({ "disabled": "disabled" });
if(submiting == true) {
alert('提交中，請勿重複點擊.');
} else {
$("#iosDialog1").hide();
submiting = true;
$("#Form").submit();
submiting = false;
$("#btnzhuce").removeAttr("disabled"); //將按鈕可用
}
});
$('#dhide').on('click', function(e) {
$("#iosDialog1").hide();
});
});
function setType(type, value) {
if(type == '1') {
$("#SHORT_TERM").val(value);
} else {
a = 0;
$("#SHORT_TERM").val(value);
}
}
function set_Type(type, value) {
var fromDate1 = $("#FROM_DATE").val().replace("T", " ");
var fromDate = Date.parse(fromDate1.replace(/-/g, "/"));
if(type == '1') {
if(fromDate - new Date() > 30) {
$("#URGENCY").val(value);
} else { $.weui.topTips('緊急用車請提前30分鐘預約'); }
} else {
a = 0;
$("#URGENCY").val(value);
}
}
</script>
<script type="text/javascript" src="static/amap/locate.js"></script>
<script type="text/javascript" src="static/amap/search.js"></script>
</body>
</html>
locate.js
//地理編碼插件，用於通過座標獲取地址信息
var geocoder = new AMap.Geocoder();
//添加定位組件，用於獲取用戶當前的精確位置
var geolocation = new AMap.Geolocation({
showCircle: true, //不顯示定位結果的圓
showMarker: false, //不現實定位結果的標記
showButton: false, //不現實組件的定位按鈕
timeout: 5000 //瀏覽器定位超時時間5s
});
map.addControl(geolocation);
//body onload時調用
var startLocate = function() {
document.getElementById('locating').style.display = 'block';
geolocation.getCurrentPosition(function(status, result) {
if (status == 'complete') {
onLocateSuccess(result); //定位成功
} else if (status == 'error') {
//定位失敗
if (result.message.indexOf('Geolocation permission denied.') !== -1) {
//Geolocation permission denied.表示用戶禁用了瀏覽器或者APP的定位權限或者關閉了手機的定爲服務
//或者當前頁面爲非安全頁面,Chrome或者IOS10等系統會禁用非安全頁面的定位請求，如果您的頁面還沒有支持HTTPS請儘快升級
//安全頁面指的是支持HTTPS的Web站點，而且是通過https協議打開的頁面。安全頁面也包括本地頁面
//showTip('您好，請在系統的隱私設置中打開當前應用的定位權限。');
} else {
//showTip('無法獲取精確位置,將定位您所在的城市。');
}
onLocateFailed();
}
});
};
//信息顯示
var infoDiv = document.getElementsByClassName('info')[0];
var showTip = function(text) {
infoDiv.innerHTML = text;
infoDiv.className = 'info top showOnce';
};
//起始位置
var origin = document.getElementById('origin');
//目的地
var destination = document.getElementById('destination');
var showOriginAddress = function(address) {
origin.innerHTML = address;
};
var showDestinationAddress = function(address) {
destination.innerHTML = address;
};
//定位失敗之後進行城市定位
var onLocateFailed = function() {
geolocation.getCityInfo(function(status, result) {
map.setZoom(14);
showLocation(result.center); //在城市中心點顯示起始marker
placeSearch.setCity(result.citycode);
autoComplete.setCity(result.citycode);
});
};
//定位成功
var onLocateSuccess = function(result) {
//showTip('定位成功.');
showLocation(result.position); //在定位結果顯示起始marker
var city = result.addressComponent.city;
var province = result.addressComponent.province;
var district = result.addressComponent.district;
var township = result.addressComponent.township;
showOriginAddress(result.formattedAddress.replace(province, '').replace(city, '').replace(district, '').replace(township, ''));
origin.position = result.position;
//alert(result.position.lng+result.position.lat+result.formattedAddress);
document.getElementById("FROM_LONTITUDE").value = result.position.lng;
document.getElementById("FROM_LATITUDE").value = result.position.lat;
document.getElementById("FROM_LOCATION").value = result.formattedAddress;
placeSearch.setCity(result.addressComponent.citycode);
autoComplete.setCity(result.addressComponent.citycode);
};
//顯示起始marker，並開啓拖拽調整起始位置的功能
var showLocation = function(position) {
document.getElementById('locating').style.display = 'none';
startMarker.setPosition(position);
startMarker.show();
startMarker.setMap(map);
map.setCenter(position);
startAdjustOrigin(); //開啓拖拽地圖調整定位點
enableSearch(); //定位有結果之後才允許搜索
};
//自定義控件，用於進行定位位置的微調
var content = document.createElement('div');
content.innerHTML = "<img src='../../static/amap/images/starts.png'>";
content.className = 'customControl';
var customControl = { //自定義控件，需要實現addTo和removeFrom兩個方法
dom: content,
addTo: function() {
map.getContainer().appendChild(customControl.dom);
},
removeFrom: function() {
if (customControl.dom.parentNode == map.getContainer()) {
map.getContainer().removeChild(customControl.dom);
}
}
};
//拖拽開始的時候添加控件，隱藏起始marker，註冊拖拽結束事件
var onMapDragStart = function() {
startMarker.hide();
map.addControl(customControl);
map.on('moveend', onMapMoveEnd);
};
//拖拽結束的時候，把起始點設置爲地圖中心，並使用逆地理編碼接口獲取當前位置的地址信息
var onMapMoveEnd = function() {
map.removeControl(customControl);
startMarker.setPosition(map.getCenter());
startMarker.show();
var position = map.getCenter();
geocoder.getAddress(position, function(status, result) { //逆地理編碼,根據經緯度獲取地址信息
result = result.regeocode;
var city = result.addressComponent.city;
var province = result.addressComponent.province;
var district = result.addressComponent.district;
var township = result.addressComponent.township;
showOriginAddress(result.formattedAddress.replace(province, '').replace(city, '').replace(district, '').replace(township, ''));
origin.position = position;
placeSearch.setCity(result.addressComponent.citycode);
autoComplete.setCity(result.addressComponent.citycode);
});
};
var startAdjustOrigin = function() {
map.on('dragstart', onMapDragStart);
};
var stopAdjustOrigin = function() {
map.off('dragstart', onMapDragStart);
map.off('moveend', onMapMoveEnd);
};
search.js
var searchInput = document.getElementById('search');
//輸入提示組件，在searchInput輸入文字後，將自動顯示相關的地點提示
var autoComplete = new AMap.Autocomplete({
input: searchInput,
city: "", //城市，默認全國
citylimit: false,
noshowDistrict: true
});
//POI搜索組件，用來根據輸入框中的值搜索相關的POI信息
var placeSearch = new AMap.PlaceSearch({
panel: 'searchResult',
pageSize: 8,
radius: 10000,
citylimit: false
});
//點擊起點或者終點輸入框的時候打開搜索界面，在搜索結果點擊選擇任一POI的時候執行onSelectCallback回調
var onInputClick = function(initText, onSelectCallback) {
if (initText !== '你的位置' && initText !== '你要去哪兒') {
searchInput.value = initText;
} else {
searchInput.value = '';
}
showRightView(); //打開搜索界面
//當在輸入提示結果列表選中一個之後，觸發POI搜索的關鍵字搜索,關鍵字搜索結果自動顯示在#searchResult結果div中
autoComplete.selectHandler = AMap.event.addListener(autoComplete, 'select', function(e) {
placeSearch.search(e.poi.name);
});
//當在POI搜索結果列表選中一個之後，觸發onSelectCallback選中回調
placeSearch.listElementClickHandler = AMap.event.addListener(placeSearch, 'listElementClick', function(e) {
onSelectCallback(e.data);
showLeftView();
});
};
//點擊搜索按鈕的時候執行關鍵字搜索
AMap.event.addDomListener(document.getElementById('searchButton'), 'click', function() {
placeSearch.search(searchInput.value);
});
//從搜索結果點擊選擇一個POI之後執行，設置起點位置爲POI的位置
var onOriginSelected = function(poi) {
origin.position = poi.entr_location || poi.location;
origin.innerHTML = poi.name;
startMarker.setPosition(origin.position);
//alert(poi.location.lng);
//alert(poi.location.lat);
document.getElementById("FROM_LONTITUDE").value = poi.location.lng;
document.getElementById("FROM_LATITUDE").value = poi.location.lat;
document.getElementById("FROM_LOCATION").value = poi.name;
//alert("經度爲："+poi.location.lng+"緯度爲："+poi.location.lat);
if (destination.position) {
driving.search(origin.position, destination.position);
} else {
map.setFitView();
startAdjustOrigin();
}
};
//從搜索結果點擊選擇一個POI之後執行，設置終點位置爲POI的位置
var onDestinationSelected = function(poi) {
destination.position = poi.entr_location || poi.location;
destination.innerHTML = poi.name;
endMarker.setMap(map);
endMarker.setPosition(destination.position);
//alert(poi.location.lng);
//alert(poi.location.lat);
document.getElementById("TO_LONTITUDE").value = poi.location.lng;
document.getElementById("TO_LATITUDE").value = poi.location.lat;
document.getElementById("TO_LOCATION").value = poi.name;
//alert("經度爲："+poi.location.lng+"緯度爲："+poi.location.lat);
if (origin.position && destination.position) {
driving.search(origin.position, destination.position);
}
};
//定位結束後執行，啓用搜索
var enableSearch = function() {
//點擊起點輸入的時候,打開搜索界面
AMap.event.addDomListener(origin, 'click', function(e) {
stopAdjustOrigin();
if (origin.innerHTML !== '你的位置') {
//如果已經有起始位置，搜索頁面打開默認顯示定位位置的周邊搜索結果
placeSearch.searchNearBy('', origin.position);
}
onInputClick(origin.innerHTML, onOriginSelected);
});
//點擊終點輸入的時候,打開搜索界面
AMap.event.addDomListener(destination, 'click', function() {
stopAdjustOrigin();
if (destination.innerHTML !== '你要去哪兒') {
//如果已經有目的地，搜索頁面打開默認顯示目的地的周邊搜索結果
placeSearch.searchNearBy('', destination.position);
}
onInputClick(destination.innerHTML, onDestinationSelected);
});
};