@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 type="hidden" id="id" name="id" value="${item.id}">
|
<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}"/>
|
@}
|
@if(item.payManner == 1){
|
<#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="${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="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 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>
|
|
</div>
|
</div>
|
</div>
|
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=t5pcBZB5G4D11G9MzHq8Kik7jqzlTrAL"></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 type="text/javascript" src="//mapopen-pub-jsapi.bj.bcebos.com/jsapiGlgeo/track.js"></script>
|
<script src="${ctxPath}/static/modular/system/tOrderTaxi/tOrderTaxi_info.js"></script>
|
<!--<script>-->
|
<!-- getTrajectory();-->
|
<!-- function getTrajectory() {-->
|
<!-- $.ajax({-->
|
<!-- url: Feng.ctxPath + '/tOrderTaxi/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 map = new BMapGL.Map('allmap', {-->
|
<!-- style: 'grayed-out',-->
|
<!-- displayOptions: {-->
|
<!-- indoor: false,-->
|
<!-- poiText: false,-->
|
<!-- poiIcon: false,-->
|
<!-- building: false,-->
|
<!-- }-->
|
<!-- });-->
|
<!-- var point = new BMapGL.Point(demo_data[0][0], demo_data[0][1]);-->
|
|
<!-- 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 demo_data) {-->
|
<!-- var point = new BMapGL.Point(item[0], item[1]);-->
|
<!-- 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>-->
|
@}
|
