@layout("/common/_container.html"){
|
<div class="row">
|
<div class="col-sm-12">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>详情</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="row row-lg">
|
<div class="col-sm-12">
|
|
<input hidden id="id" value="${id}">
|
<input hidden id="startLng" value="${startLng}">
|
<input hidden id="startLat" value="${startLat}">
|
<input hidden id="endLng" value="${endLng}">
|
<input hidden id="endLat" value="${endLat}">
|
|
<hr/>
|
<div class="initialLevel col-sm-12 control-label form-group" >
|
<div style="background-color: gray;height: 35px;line-height: 35px">
|
<label style="color: #0C0C0C">订单详情</label>
|
</div>
|
</div>
|
<hr/>
|
|
<div class="initialLevel col-sm-12 control-label form-group" >
|
<div class="initialLevel col-sm-3 control-label form-group" >
|
<label class="control-label" >下单时间:</label>
|
<label>${createTime}</label>
|
</div>
|
<div class="initialLevel col-sm-3 control-label form-group" >
|
<label class="control-label" >订单编号:</label>
|
<label>${code}</label>
|
</div>
|
</div>
|
|
<div class="initialLevel col-sm-12 control-label form-group" >
|
<div class="initialLevel col-sm-3 control-label form-group" >
|
<label class="control-label" >订单来源:</label>
|
@if(source==1){
|
<label>小程序</label>
|
@}
|
@if(source==2){
|
<label>APP</label>
|
@}
|
@if(source==3){
|
<label>后台</label>
|
@}
|
</div>
|
<div class="initialLevel col-sm-3 control-label form-group" >
|
<label class="control-label" >乘车时间:</label>
|
<label>${startTime}</label>
|
</div>
|
</div>
|
|
<div class="initialLevel col-sm-12 control-label form-group" style="color:green;" >
|
<div class="initialLevel col-sm-3 control-label form-group" >
|
<label class="control-label">下单用户昵称:</label>
|
<label>${userName}</label>
|
</div>
|
<div class="initialLevel col-sm-2 control-label form-group" >
|
<label class="control-label">下单用户手机号:</label>
|
<label>${userPhone}</label>
|
</div>
|
</div>
|
|
<div class="initialLevel col-sm-12 control-label form-group" >
|
<div class="initialLevel col-sm-3 control-label form-group" >
|
<label class="control-label">起点:</label>
|
<label>${startAddress}</label>
|
</div>
|
<div class="initialLevel col-sm-2 control-label form-group" >
|
<label class="control-label">终点:</label>
|
<label>${endAddress}</label>
|
</div>
|
</div>
|
|
<div class="initialLevel col-sm-12 control-label form-group" style="color:red;" >
|
<div class="initialLevel col-sm-3 control-label form-group" >
|
<label class="control-label">接单司机:</label>
|
<label>${driverName}</label>
|
</div>
|
<div class="initialLevel col-sm-2 control-label form-group" >
|
<label class="control-label">所属机构:</label>
|
<label>${branchOfficeName}</label>
|
</div>
|
</div>
|
|
<hr/>
|
<div class="initialLevel col-sm-12 control-label form-group" >
|
<div style="background-color: gray;height: 35px;line-height: 35px">
|
<label style="color: #0C0C0C">上下地点</label>
|
</div>
|
</div>
|
<hr/>
|
|
<div class="initialLevel col-sm-12 control-label form-group" >
|
<div class="initialLevel col-sm-3 control-label form-group" >
|
<label class="control-label" >上车地点:</label>
|
<label>${startAddress}</label>
|
</div>
|
<div class="initialLevel col-sm-2 control-label form-group" >
|
<label class="control-label">上车时间:</label>
|
<label>${boardingTime}</label>
|
</div>
|
</div>
|
|
<div class="initialLevel col-sm-12 control-label form-group" >
|
<div class="initialLevel col-sm-3 control-label form-group" >
|
<label class="control-label" >下车地点:</label>
|
<label>${endAddress}</label>
|
</div>
|
<div class="initialLevel col-sm-3 control-label form-group" >
|
<label class="control-label" >下车时间:</label>
|
<label>${getoffTime}</label>
|
</div>
|
</div>
|
|
<hr/>
|
<div class="initialLevel col-sm-12 control-label form-group" >
|
<div style="background-color: gray;height: 35px;line-height: 35px">
|
<label style="color: #0C0C0C">费用明细</label>
|
</div>
|
</div>
|
<hr/>
|
|
<div class="initialLevel col-sm-12 control-label form-group" >
|
<div class="initialLevel col-sm-2 control-label form-group" >
|
<label class="control-label" >起步价:</label>
|
<label>${startPrice}</label>
|
</div>
|
<div class="initialLevel col-sm-3 control-label form-group" >
|
<label class="control-label" >等待费:</label>
|
<label>${waitTimePrice}</label>
|
</div>
|
</div>
|
<div class="initialLevel col-sm-12 control-label form-group" >
|
<div class="initialLevel col-sm-2 control-label form-group" >
|
<label class="control-label" >里程费:</label>
|
<label>${overDrivePrice}</label>
|
</div>
|
<div class="initialLevel col-sm-3 control-label form-group" >
|
<label class="control-label" >恶劣天气:</label>
|
<label>${badWeatherPrice}</label>
|
</div>
|
</div>
|
<div class="initialLevel col-sm-12 control-label form-group" >
|
<div class="initialLevel col-sm-2 control-label form-group" >
|
<label class="control-label" >实际费用:</label>
|
<label>${orderMoney}</label>
|
</div>
|
<div class="initialLevel col-sm-3 control-label form-group" >
|
<label class="control-label" >实际支付费用:</label>
|
<label>${payMoney}</label>
|
</div>
|
</div>
|
<div class="initialLevel col-sm-12 control-label form-group" >
|
<div class="initialLevel col-sm-2 control-label form-group" >
|
<label class="control-label" >优惠券抵扣费用:</label>
|
<label>${discountedPrice}</label>
|
</div>
|
<div class="initialLevel col-sm-3 control-label form-group" >
|
<label class="control-label" >支付方式:</label>
|
@if(payType==1){
|
<label>微信支付</label>
|
@}
|
@if(payType==2){
|
<label>余额支付</label>
|
@}
|
@if(payType==3){
|
<label>线下收款</label>
|
@}
|
</div>
|
</div>
|
|
@if(havDiscount == 1){
|
<div class="initialLevel col-sm-12 control-label form-group" >
|
<div class="initialLevel col-sm-2 control-label form-group" >
|
<label class="control-label" >9折优惠:</label>
|
<label>${multiply}</label>
|
<label>元</label>
|
</div>
|
</div>
|
@}
|
|
<div class="row" style="margin-top: 30px;">
|
<div class="col-sm-4">
|
<h2 class="h3Class" style="font-weight: 700;">线路轨迹</h2>
|
</div>
|
</div>
|
<div class="row">
|
<div class="col-sm-10">
|
<div class="form-horizontal" id="container" style="margin-left: 50px;width: 100%; height: 500px;"></div>
|
<div class="input-card" style="margin-left: 50px;">
|
<h4>轨迹回放控制</h4>
|
<div class="input-item">
|
<input type="button" class="btn" value="开始动画" id="start" onclick="startAnimation()"/>
|
<input type="button" class="btn" value="暂停动画" id="pause" onclick="pauseAnimation()"/>
|
<input type="button" class="btn" value="继续动画" id="resume" onclick="resumeAnimation()"/>
|
<input type="button" class="btn" value="停止动画" id="stop" onclick="stopAnimation()"/>
|
</div>
|
<div class="input-item">
|
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<hr/>
|
<div class="initialLevel col-sm-12 control-label form-group" >
|
<div style="background-color: gray;height: 35px;line-height: 35px">
|
<label style="color: #0C0C0C">行程录音</label>
|
</div>
|
</div>
|
<hr/>
|
|
<div class="initialLevel col-sm-12 control-label form-group" >
|
<audio id="audio" autoplay controls muted>
|
<!-- <source src="http://www.w3capi.com/upload/audio/audio_example.mp3" type="audio/mpeg">-->
|
<source src="${routeRecord}" type="audio/mpeg">
|
</audio>
|
</div>
|
|
<div class="hidden-xs" id="TDriverTableToolbar" role="group" style="text-align: center">
|
<#button name="取消" icon="fa-plus" clickFun="TOrderInfoDlg.close()" />
|
</div>
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<script src="${ctxPath}/static/modular/system/tOrder/tOrder.js"></script>
|
<script src="${ctxPath}/static/modular/system/tOrder/tOrder_info.js"></script>
|
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
|
<script src="https://webapi.amap.com/maps?v=1.4.15&key=86fcccf007b64ae97b01c3c982c0ef0f"></script>
|
<script src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
|
<script src="https://webapi.amap.com/loader.js"></script>
|
|
<style type="text/css">
|
#container {
|
background-color: white;
|
height: 420px;
|
width: 1200px;
|
}
|
#audio {
|
height: 100px;
|
width: 600px;
|
}
|
#panel {
|
position: fixed;
|
background-color: white;
|
max-height: 90%;
|
overflow-y: auto;
|
top: 10px;
|
right: 10px;
|
width: 280px;
|
}
|
#panel .amap-call {
|
background-color: #009cf9;
|
border-top-left-radius: 4px;
|
border-top-right-radius: 4px;
|
}
|
#panel .amap-lib-driving {
|
border-bottom-left-radius: 4px;
|
border-bottom-right-radius: 4px;
|
overflow: hidden;
|
}
|
</style>
|
<script type="text/javascript">
|
window._AMapSecurityConfig = {
|
securityJsCode:'b62d9146929db08c4c2f4537d045320d',
|
};
|
laydate.render({
|
elem: '#createTime',
|
type: 'date',
|
range: true
|
});
|
|
var map = new AMap.Map("container", {
|
resizeEnable: true,
|
zoom: 14
|
});
|
|
$(function() {
|
getTrajectory();
|
});
|
function getTrajectory() {
|
$.ajax({
|
url: Feng.ctxPath + '/tOrder/getOrderTrack',
|
type: 'POST',
|
data:{
|
orderDetailId: $("#id").val()
|
},
|
success: function (res) {
|
if(res.status == 200){
|
var data = res.data;
|
if(data.length > 0){
|
orderTrack(data);
|
}/*else{
|
Feng.error("当前订单没有轨迹");
|
}*/
|
}else{
|
Feng.error(res.msg);
|
}
|
}
|
});
|
}
|
|
var marker, lineArr = [];
|
|
function orderTrack(data) {
|
for(var i in data){
|
var waypoints = [];
|
var lon = parseFloat(data[i].lon);
|
var lat = parseFloat(data[i].lat);
|
waypoints.push(lon);
|
waypoints.push(lat);
|
lineArr.push(waypoints);
|
}
|
|
marker = new AMap.Marker({
|
map: map,
|
position: lineArr[0],
|
icon: "https://webapi.amap.com/images/car.png",
|
offset: new AMap.Pixel(-26, -13),
|
autoRotation: true,
|
angle:-90,
|
});
|
|
// 绘制轨迹
|
var polyline = new AMap.Polyline({
|
map: map,
|
path: lineArr,
|
showDir:true,
|
strokeColor: "#28F", //线颜色
|
// strokeOpacity: 1, //线透明度
|
strokeWeight: 6, //线宽
|
// strokeStyle: "solid" //线样式
|
});
|
|
var passedPolyline = new AMap.Polyline({
|
map: map,
|
// path: lineArr,
|
strokeColor: "#AF5", //线颜色
|
// strokeOpacity: 1, //线透明度
|
strokeWeight: 6, //线宽
|
// strokeStyle: "solid" //线样式
|
});
|
|
|
marker.on('moving', function (e) {
|
passedPolyline.setPath(e.passedPath);
|
});
|
|
map.setFitView();
|
}
|
|
|
function startAnimation () {
|
marker.moveAlong(lineArr, 200);
|
}
|
|
function pauseAnimation () {
|
marker.pauseMove();
|
}
|
|
function resumeAnimation () {
|
marker.resumeMove();
|
}
|
|
function stopAnimation () {
|
marker.stopMove();
|
}
|
|
</script>
|
@}
|
