<template>
|
<div>
|
<el-dialog title="订单详情" :visible.sync="dialogVisible" width="50%" :modal-append-to-body="false"
|
:close-on-press-escape="false" :close-on-click-modal="false" @close="closeClick">
|
<el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
|
<el-radio-button label="order">订单信息</el-radio-button>
|
<el-radio-button label="track">行程轨迹</el-radio-button>
|
<!-- <el-radio-button label="monitoring">行程监控</el-radio-button> -->
|
</el-radio-group>
|
<!-- 订单信息 -->
|
<div v-show="tabPosition == 'order'">
|
<el-descriptions title="" :column="3">
|
<el-descriptions-item label="公司名称">{{ orderData.enterpriseName }}</el-descriptions-item>
|
<el-descriptions-item label="发起地区划">{{ orderData.drivingLicenseNumber }}</el-descriptions-item>
|
<el-descriptions-item label="订单编号">{{ orderData.code }}</el-descriptions-item>
|
<el-descriptions-item label="机动车驾驶证编号">{{ orderData.drivingLicenseNumber }}</el-descriptions-item>
|
<el-descriptions-item label="驾驶员手机号">{{ orderData.driverPhone }}</el-descriptions-item>
|
<el-descriptions-item label="车辆号牌">{{ orderData.vehicleNumber }}</el-descriptions-item>
|
<el-descriptions-item label="派单时间">{{ orderData.orderDeliveryTime }}</el-descriptions-item>
|
<el-descriptions-item label="订单发起时间">{{ orderData.orderTime }}</el-descriptions-item>
|
<el-descriptions-item label="乘客备注">{{ orderData.remark }}</el-descriptions-item>
|
<el-descriptions-item label="出发地点">{{ orderData.orderPlace }}</el-descriptions-item>
|
<el-descriptions-item label="下车地点">{{ orderData.dropOffPoint }}</el-descriptions-item>
|
<el-descriptions-item label="运价类型编号">{{ orderData.tariffType }}</el-descriptions-item>
|
<el-descriptions-item label="订单金额">￥{{ orderData.orderAmount }}</el-descriptions-item>
|
<el-descriptions-item label="实付价">￥{{ orderData.paymentAmount }}</el-descriptions-item>
|
<el-descriptions-item label="支付方式">{{ orderData.paymentMode }}</el-descriptions-item>
|
</el-descriptions>
|
</div>
|
<!-- 行程轨迹 -->
|
<div v-if="tabPosition == 'track'">
|
<div class="mapContainer" id="mapContainer"></div>
|
</div>
|
<!-- 行程监控 -->
|
<!-- <div v-if="tabPosition == 'monitoring'">
|
<PlayLive :serverIp="monitoringData.serverIp" :serverPort="monitoringData.serverPort"
|
:urlLink="monitoringData.url" :carId="orderData.carId" />
|
</div> -->
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
export default {
|
data() {
|
return {
|
dialogVisible: false,
|
tabPosition: 'order',
|
orderData: {},
|
monitoringData: {},
|
travelData: [],
|
};
|
},
|
computed: {},
|
watch: {
|
tabPosition(val) {
|
if (val == 'track') {
|
this.$nextTick(() => {
|
this.initMap();
|
})
|
return
|
}
|
}
|
},
|
methods: {
|
initData(orderData = {}, monitoringData = {}, travelData = []) {
|
this.orderData = orderData
|
// this.monitoringData = monitoringData
|
this.travelData = travelData
|
this.dialogVisible = true
|
},
|
initMap() {
|
window._AMapSecurityConfig = {
|
securityJsCode: this.$secretKey,
|
};
|
AMapLoader.load({
|
key: this.$mapKey,
|
version: "2.0",
|
plugins: [
|
"AMap.ToolBar",
|
],
|
})
|
.then((AMap) => {
|
// 转换 travelData 中的坐标
|
const wgs84Path = this.travelData.map(item => [item.longitude, item.latitude]);
|
const batchSize = 40; // 每次转换 40 对坐标
|
const batches = [];
|
|
// 分批处理
|
for (let i = 0; i < wgs84Path.length; i += batchSize) {
|
batches.push(wgs84Path.slice(i, i + batchSize));
|
}
|
|
const gcj02Path = [];
|
const promises = batches.map(batch => {
|
return new Promise((resolve, reject) => {
|
AMap.convertFrom(batch, 'gps', (status, result) => {
|
if (status === 'complete' && result.locations) {
|
resolve(result.locations);
|
} else {
|
reject(result);
|
}
|
});
|
});
|
});
|
|
// 等待所有批次转换完成
|
Promise.all(promises)
|
.then(results => {
|
results.forEach(batchResult => {
|
gcj02Path.push(...batchResult);
|
});
|
|
// 开始绘制地图
|
this.map = new AMap.Map("mapContainer", {
|
center: gcj02Path[Math.floor(gcj02Path.length / 2)], // 使用转换后的中点坐标
|
zoom: 12,
|
});
|
this.map.addControl(new AMap.ToolBar());
|
|
// 添加起点和终点标记
|
const marker = [
|
new AMap.Marker({
|
content: `<div class="custom-content-marker">起点</div>`,
|
position: gcj02Path[0],
|
offset: new AMap.Pixel(-35, -25),
|
}),
|
new AMap.Marker({
|
content: `<div class="custom-content-marker-two">终点</div>`,
|
position: gcj02Path[gcj02Path.length - 1],
|
offset: new AMap.Pixel(-35, -25),
|
}),
|
];
|
this.map.add(marker);
|
|
// 绘制路径
|
const polyline = new AMap.Polyline({
|
path: gcj02Path,
|
strokeWeight: 3,
|
strokeColor: "red",
|
lineJoin: "round",
|
});
|
this.map.add(polyline);
|
|
// 强制刷新地图
|
this.$nextTick(() => {
|
this.map.resize();
|
});
|
})
|
.catch(error => {
|
console.error('坐标转换失败', error);
|
});
|
})
|
.catch((e) => {
|
console.log(e);
|
});
|
},
|
closeClick() {
|
this.dialogVisible = false
|
this.tabPosition = 'order'
|
this.orderData = {}
|
this.monitoringData = {}
|
this.travelData = []
|
},
|
},
|
};
|
</script>
|
<style>
|
.custom-content-marker {
|
width: 50px;
|
height: 50px;
|
background-color: blue;
|
color: #fff;
|
border-radius: 50%;
|
line-height: 50px;
|
text-align: center;
|
}
|
|
.custom-content-marker-two {
|
width: 50px;
|
height: 50px;
|
background-color: orange;
|
color: #fff;
|
border-radius: 50%;
|
line-height: 50px;
|
text-align: center;
|
}
|
|
.custom-content-marker img {
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
<style scoped lang="less">
|
::v-deep .el-descriptions .el-descriptions-item__cell {
|
padding-bottom: 25px;
|
}
|
|
#mapContainer {
|
width: 100%;
|
height: 500px;
|
}
|
</style>
|
