@layout("/common/_container.html"){
|
<style type="text/css">
|
body,
|
html {
|
width: 100%;
|
height: 100%;
|
margin: 0;
|
}
|
|
#allmap {
|
height: 100%;
|
width: 100%;
|
}
|
|
ul li {
|
list-style: none;
|
}
|
|
.btn-wrap {
|
z-index: 999;
|
position: fixed;
|
bottom: 3.5rem;
|
margin-left: 3rem;
|
padding: 1rem 1rem;
|
border-radius: .25rem;
|
background-color: #fff;
|
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
|
}
|
|
.btn {
|
width: 75px;
|
height: 30px;
|
float: left;
|
background-color: #fff;
|
color: rgba(27, 142, 236, 1);
|
font-size: 14px;
|
border: 1px solid rgba(27, 142, 236, 1);
|
border-radius: 5px;
|
margin: 0 5px;
|
text-align: center;
|
line-height: 30px;
|
}
|
|
.btn:hover {
|
background-color: rgba(27, 142, 236, 0.8);
|
color: #fff;
|
}
|
</style>
|
<div class="ibox float-e-margins">
|
<div class="ibox-content">
|
<div class="form-horizontal">
|
<input id="id" name="id" type="hidden" value="${item.id}">
|
<input id="guiji" name="guiji" type="hidden" value="${guiji}">
|
<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-6 b-r">
|
<#label id="insertTimeStr" name="下单时间" value="${item.insertTimeStr}"/>
|
<#label id="orderSourceStr" name="订单来源" value="${item.orderSourceStr}"/>
|
<#label id="userName" name="下单用户昵称" value="${item.userName}"/>
|
<#label id="passengers" name="乘车用户昵称" value="${item.passengers}"/>
|
<#label id="placementAddress" name="起点" value="${item.startAddress}"/>
|
<#label id="driver" name="接单司机" value="${item.driver}"/>
|
<#label id="car" name="接单车辆" value="${item.car}"/>
|
<#label id="boardingAddress" name="上车地点" value="${item.boardingAddress}"/>
|
<#label id="getoffAddress" name="下车地点" value="${item.getoffAddress}"/>
|
@if(item.payManner == 2){
|
<#label id="payMoney" name="订单总价" value="${item.payMoney}"/>
|
<#label id="companyMoney" name="平台收益" value="${companyMoney}"/>
|
@}
|
<#label id="payMoney" name="订单总价" value="${item.payMoney}"/>
|
<#label id="companyMoney" name="起步价" value="${item.startMoney}"/>
|
<#label id="companyMoney" name="等待费" value="${item.waitMoney}"/>
|
<#label id="companyMoney" name="时长费" value="${item.durationMoney}"/>
|
<#label id="companyMoney" name="里程费" value="${item.mileageMoney}"/>
|
<#label id="companyMoney" name="远途费" value="${item.longDistanceMoney}"/>
|
<#label id="companyMoney" name="过路费" value="${item.roadTollMoney}"/>
|
<#label id="companyMoney" name="停车费" value="${item.parkMoney}"/>
|
<#label id="companyMoney" name="优惠券抵扣" value="${item.couponMoney}"/>
|
<#label id="companyMoney" name="平台抽成" value="${companyMoney}"/>
|
</div>
|
|
<div class="col-sm-6">
|
<#label id="orderNum" name="订单编号" value="${item.orderNum}"/>
|
<#label id="travelTimeStr" name="乘车时间" value="${item.travelTimeStr}"/>
|
<#label id="userPhone" name="下单用户手机号" value="${item.userPhone}"/>
|
<#label id="passengersPhone" name="乘车用户手机号" value="${item.passengersPhone}"/>
|
<#label id="endAddress" name="终点" value="${item.endAddress}"/>
|
<#label id="companyName" name="车辆所属机构" value="${item.companyName}"/>
|
<#label id="mileage" name="订单里程" value="${item.mileage / 1000} 公里"/>
|
<#label id="boardingTimeStr" name="上车时间" value="${item.boardingTimeStr}"/>
|
<#label id="getoffTimeStr" name="下车时间" value="${item.getoffTimeStr}"/>
|
@if(item.payManner == 2){
|
<#label id="payMannerStr" name="支付方式" value="${payMannerStr}"/>
|
<#label id="driverMoney" name="司机收益" value="${driverMoney}"/>
|
@}
|
@if(item.payManner == 1){
|
<#label id="payMannerStr" name="支付方式" value="${payMannerStr}"/>
|
@}
|
</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="allmap" style="margin-left: 50px;width: 100%; height: 500px;"></div>
|
<div class="input-card" style="margin-left: 50px;">
|
<h4>轨迹回放控制</h4>
|
<div class="input-item">
|
<input class="btn" id="start" onclick="startAnimation()" type="button" value="开始动画"/>
|
<input class="btn" id="pause" onclick="pauseAnimation()" type="button" value="暂停动画"/>
|
<input class="btn" id="resume" onclick="resumeAnimation()" type="button" value="继续动画"/>
|
<input class="btn" id="stop" onclick="stopAnimation()" type="button" value="停止动画"/>
|
</div>
|
<div class="input-item">
|
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=t5pcBZB5G4D11G9MzHq8Kik7jqzlTrAL" type="text/javascript"></script>
|
<script src="${ctxPath}/static/js/track1.js"></script>
|
<script src="${ctxPath}/static/js/track2.js"></script>
|
<script src="${ctxPath}/static/js/track3.js"></script>
|
<script src="//mapopen-pub-jsapi.bj.bcebos.com/jsapiGlgeo/track.js" type="text/javascript"></script>
|
<script src="${ctxPath}/static/modular/system/tOrderTaxi/tOrderTaxi_info.js"></script>
|
<script>
|
var temp = "${guiji}"
|
//
|
console.log("看看数据")
|
console.log(temp)
|
// 使用正则表达式替换等号为冒号，并添加双引号
|
const jsonString = temp
|
.replace(/\b(\w+)\b(?==)/g, '"$1"') // 将键名用双引号括起来
|
.replace(/=/g, ':') // 将等号替换为冒号
|
.replace(/'/g, '"'); // 确保所有引号都是双引号
|
console.log(jsonString)
|
// 将字符串解析为JSON数组
|
const jsonArray = JSON.parse(jsonString);
|
temp = jsonArray;
|
|
console.log(jsonArray);
|
console.log(temp)
|
console.log(temp[0])
|
console.log(temp[0].lon)
|
var map = new BMapGL.Map('allmap', {
|
style: 'grayed-out',
|
displayOptions: {
|
indoor: false,
|
poiText: false,
|
poiIcon: false,
|
building: false,
|
}
|
});
|
var point = new BMapGL.Point(temp[0].lon, temp[0].lat);
|
|
map.centerAndZoom(point, 18);
|
map.enableScrollWheelZoom(true);
|
map.setTilt(35);
|
|
var track = new Track.View(map, {
|
lineLayerOptions: {
|
style: {
|
strokeWeight: 8,
|
strokeLineJoin: 'round',
|
strokeLineCap: 'round'
|
},
|
}
|
});
|
|
var trackData = [];
|
var colorOffset = [];
|
for (var item of temp) {
|
var point = new BMapGL.Point(item.lon, item.lat);
|
var trackPoint = new Track.TrackPoint(point);
|
trackData.push(trackPoint);
|
// 不同速度区间对应颜色
|
var choose = [0.9, 0.5, 0.1];
|
var color = choose[Math.floor(Math.random() * choose.length)];
|
colorOffset.push(color);
|
}
|
var startMarker = new BMapGL.Marker(trackData[0].getPoint(), {
|
icon: new BMapGL.Icon('https://mapopen-pub-jsapi.bj.bcebos.com/jsapiGlgeo/img/start.png', new BMapGL.Size(25, 40)),
|
offset: new BMapGL.Size(0, -16),
|
});
|
map.addOverlay(startMarker);
|
var endMarker = new BMapGL.Marker(trackData[trackData.length-1].getPoint(), {
|
icon: new BMapGL.Icon('https://mapopen-pub-jsapi.bj.bcebos.com/jsapiGlgeo/img/end.png', new BMapGL.Size(25, 40)),
|
offset: new BMapGL.Size(0, -16),
|
|
});
|
map.addOverlay(endMarker);
|
var duration = 60000;
|
var step = duration / trackData.length;
|
|
var trackRoad = new Track.LiveTrack({
|
// visible: false,
|
duration: step,
|
linearTexture: [[0, '#f45e0c'], [0.5, '#f6cd0e'], [1, '#2ad61d']],
|
guideStyle: {
|
style:{
|
traceDisappear: false,
|
traceStart: true,
|
sequence: true,
|
marginLength: 32,
|
arrowColor: '#fff',
|
strokeColor: 'rgba(27, 142, 236, 1)',
|
strokeTextureUrl: 'https://mapopen-pub-jsapi.bj.bcebos.com/jsapiGlgeo/img/down.png',
|
strokeTextureWidth: 64,
|
strokeTextureHeight: 32,
|
}
|
},
|
});
|
|
trackRoad.setGuidTrackPath(trackData);
|
trackRoad.on(Track.LineCodes.GUIDE_STATUS, (e) => {
|
if (e.status === Track.GuidCodes.ADD_TO_MAP) {
|
var guidTrack = trackRoad.getGuidTrack();
|
guidTrack.on(Track.LineCodes.STATUS, (status) => {
|
switch (status) {
|
case Track.StatusCodes.FINISH:
|
var box = trackRoad.getBBox();
|
if(box){
|
var bounds = [new BMapGL.Point(box[0], box[1]), new BMapGL.Point(box[2], box[3])];
|
map.setViewport(bounds);
|
}
|
break;
|
default:
|
break;
|
}
|
});
|
}
|
});
|
var movePoint = new Track.ModelPoint({ point: trackData[0].getPoint(), style:{
|
url: 'https://mapopen-pub-jsapi.bj.bcebos.com/jsapiGlgeo/img/bus.glb',
|
scale: 9,
|
level: 18,
|
rotationX: 90,
|
rotationY: 90,
|
rotationZ: 0
|
} });
|
movePoint.setRotation(trackRoad.getGuidTrack().getStepInfoByIndex(0).angle);
|
|
trackRoad.setMovePoint(movePoint);
|
|
track.addTrackLine(trackRoad);
|
track.focusTrack(trackRoad);
|
|
var ani;
|
var start = null;
|
var index = 0;
|
var finishIndex = 0;
|
|
|
function startAnimation(timestamp) {
|
if (!start) start = timestamp;
|
var progress = timestamp - start;
|
var next = step * (index - finishIndex);
|
|
if(progress > next){
|
if(index<trackData.length){
|
movePoint.moveTo(trackData[index]);
|
var obj = trackRoad.getGuidTrack().getStepInfoByIndex(index);
|
trackRoad.setGradientColors(colorOffset.slice(0,index+1));
|
index++;
|
}else{
|
pauseAnimation();
|
}
|
|
}
|
ani = requestAnimationFrame(startAnimation);
|
}
|
|
|
function stopAnimation() {
|
pauseAnimation();
|
index = 0;
|
finishIndex = index;
|
|
start = null;
|
trackRoad.clearTrackPoint();
|
movePoint.setPoint(trackData[0].getPoint());
|
movePoint.setRotation(trackRoad.getGuidTrack().getStepInfoByIndex(0).angle);
|
}
|
function pauseAnimation() {
|
cancelAnimationFrame(ani);
|
finishIndex = index;
|
start = null;
|
}
|
function resumeAnimation() {
|
startAnimation();
|
}
|
</script>
|
@}
|
