task#10514,调度app详情地图展示
This commit is contained in:
@ -19,6 +19,7 @@
|
||||
<div><span>司机姓名:</span><span>{{ detailInfo.driverName }}</span></div>
|
||||
<div><span>车牌号:</span><span>{{ detailInfo.plateNumber }}</span></div>
|
||||
</div>
|
||||
<div class="mapContainer" id="container"></div>
|
||||
</div>
|
||||
<div class="wiadgeWrap">
|
||||
<div class="lineWrap">
|
||||
@ -119,9 +120,9 @@
|
||||
<script>
|
||||
import {myMixins} from "@/utils/myMixins";
|
||||
import {reimburseOrderDetail,reimburseOrderAudit} from "@/api/reimbursementBatch"
|
||||
import minePosition from "@/assets/minePosition.png";
|
||||
import vehiclePosition from "@/assets/vehiclePosition.png";
|
||||
import desitationPosition from "@/assets/desitationPosition.png";
|
||||
import minePosition from "@/assets/realApoint.png";
|
||||
import vehiclePosition from "@/assets/realBpoint.png";
|
||||
import desitationPosition from "@/assets/realCpoint.png";
|
||||
export default {
|
||||
name: "caseDetail",
|
||||
mixins: [myMixins],
|
||||
@ -137,6 +138,9 @@ export default {
|
||||
detailInfo:{},
|
||||
noClick:true,
|
||||
state:'',//审核状态
|
||||
map: '',
|
||||
abPath:[],
|
||||
bcPath:[]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -156,19 +160,34 @@ export default {
|
||||
viewMode:'2D',//使用3D视图
|
||||
})
|
||||
this.map.on('complete', () => {
|
||||
console.log("地图加载完成")
|
||||
this.mapMarkers();
|
||||
});
|
||||
},
|
||||
mapMarkers(){
|
||||
if(this.abPath && this.abPath.length>0){
|
||||
console.log("创建折现1")
|
||||
let polyline1 = new AMap.Polyline({
|
||||
path: [...this.bcPath],
|
||||
strokeColor: '#005DC7', // 路径线颜色
|
||||
strokeWeight: 9 // 路径线宽度
|
||||
});
|
||||
this.map.add(polyline1);
|
||||
}
|
||||
if(this.bcPath && this.bcPath.length>0){
|
||||
let polyline2 = new AMap.Polyline({
|
||||
path: [...this.bcPath],
|
||||
strokeColor: '#005DC7 ', // 路径线颜色
|
||||
strokeWeight: 5 // 路径线宽度
|
||||
});
|
||||
this.map.add(polyline2);
|
||||
}
|
||||
// 车辆位置，a点
|
||||
let marker = new AMap.Marker({
|
||||
position: [this.detailInfo?.apointLongtitude,this.detailInfo?.apointLatitude
|
||||
],
|
||||
position: [this.detailInfo?.apointLongtitude,this.detailInfo?.apointLatitude],
|
||||
icon: new AMap.Icon({
|
||||
image: minePosition, // 图片的相对路径
|
||||
size: new AMap.Size(22, 32), // 图标的尺寸
|
||||
imageSize: new AMap.Size(22, 32) // 图片的实际尺寸
|
||||
size: new AMap.Size(43, 43), // 图标的尺寸
|
||||
imageSize: new AMap.Size(43, 43) // 图片的实际尺寸
|
||||
}),
|
||||
});
|
||||
this.map.add(marker);
|
||||
@ -177,22 +196,40 @@ export default {
|
||||
position: [this.detailInfo?.bpointLongtitude,this.detailInfo?.bpointLatitude],
|
||||
icon: new AMap.Icon({
|
||||
image: vehiclePosition, // 图片的相对路径
|
||||
size: new AMap.Size(26, 28), // 图标的尺寸
|
||||
imageSize: new AMap.Size(26, 28) // 图片的实际尺寸
|
||||
size: new AMap.Size(43, 43), // 图标的尺寸
|
||||
imageSize: new AMap.Size(43, 43) // 图片的实际尺寸
|
||||
})
|
||||
});
|
||||
this.map.add(marker1);
|
||||
let marker2 = new AMap.Marker({
|
||||
position: [this.detailInfo?.cpointLongtitude,this.detailInfo?.cpointLatitude],
|
||||
let marker2=''
|
||||
if(this.detailInfo.cpointLongtitude && this.detailInfo.cpointLatitude){
|
||||
marker2 = new AMap.Marker({
|
||||
position: [this.detailInfo?.cpointLongtitude,this.detailInfo?.cpointLatitude],
|
||||
icon: new AMap.Icon({
|
||||
image: desitationPosition, // 图片的相对路径
|
||||
size: new AMap.Size(28, 28), // 图标的尺寸
|
||||
imageSize: new AMap.Size(28, 28) // 图片的实际尺寸
|
||||
})
|
||||
});
|
||||
this.map.add(marker2);
|
||||
}
|
||||
if(this.detailInfo.cpointLongtitude && this.detailInfo.cpointLatitude){
|
||||
this.map.setFitView([marker,marker1,marker2])
|
||||
}else{
|
||||
this.map.setFitView([marker,marker1])
|
||||
}
|
||||
|
||||
},
|
||||
/* setMarker(lng,lat,imgIcon){
|
||||
new AMap.Marker({
|
||||
position: [lng,lat],
|
||||
icon: new AMap.Icon({
|
||||
image: desitationPosition, // 图片的相对路径
|
||||
size: new AMap.Size(28, 28), // 图标的尺寸
|
||||
imageSize: new AMap.Size(28, 28) // 图片的实际尺寸
|
||||
image: imgIcon, // 图片的相对路径
|
||||
size: new AMap.Size(43, 43), // 图标的尺寸
|
||||
imageSize: new AMap.Size(43, 43) // 图片的实际尺寸
|
||||
})
|
||||
});
|
||||
this.map.add(marker2);
|
||||
this.map.setFitView([marker,marker1,marker2])
|
||||
},
|
||||
},*/
|
||||
async submitHandle(){
|
||||
if(!this.states){
|
||||
this.$toast('审核结果必选')
|
||||
@ -214,11 +251,11 @@ export default {
|
||||
console.log("ressssss",res)
|
||||
},
|
||||
getValue(){
|
||||
console.log("other",this.other)
|
||||
// console.log("other",this.other)
|
||||
},
|
||||
isUse(e){
|
||||
this.states=e
|
||||
console.log("this.states",this.states)
|
||||
// console.log("this.states",this.states)
|
||||
if(this.states == 1){
|
||||
this.state=2
|
||||
}else if(this.states == 2){
|
||||
@ -231,9 +268,17 @@ export default {
|
||||
},
|
||||
async getOrderDetail(){
|
||||
let res=await reimburseOrderDetail({
|
||||
id:this.id
|
||||
id:8//this.id
|
||||
})
|
||||
this.detailInfo=res.data
|
||||
this.detailInfo?.gpsTrackQOsAB.forEach((item)=>{
|
||||
let tempArr = new AMap.LngLat(item.lon, item.lat);
|
||||
this.abPath.push(tempArr)
|
||||
})
|
||||
this.detailInfo?.gpsTrackQOsBC.forEach((item)=>{
|
||||
this.bcPath.push([item.lon,item.lat])
|
||||
})
|
||||
console.log("this.abPath",this.abPath)
|
||||
},
|
||||
}
|
||||
}
|
||||
@ -293,6 +338,9 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.mapContainer{
|
||||
@include wh(100%,173px)
|
||||
}
|
||||
}
|
||||
}
|
||||
.wiadgeWrap{
|
||||
@ -439,4 +487,10 @@ export default {
|
||||
@include widHeiMar(16px,16px,6px)
|
||||
}
|
||||
}
|
||||
::v-deep .amap-copyright{
|
||||
display: none !important;
|
||||
}
|
||||
::v-deep .amap-logo{
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user