task#10514,调度app详情地图展示
This commit is contained in:
@ -28,6 +28,6 @@
|
||||
serviceHost: 'https://api.sinoassist.com/_AMapService',
|
||||
}
|
||||
</script>
|
||||
<script src="https://webapi.amap.com/maps?v=1.4.15&key=2560bbf04daef66c810c5e6a97e8c508"></script>
|
||||
<script src="https://webapi.amap.com/maps?v=1.4.15&key=2560bbf04daef66c810c5e6a97e8c508&plugin=AMap.Polyline"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
BIN
src/assets/realApoint.png
Normal file
BIN
src/assets/realApoint.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.4 KiB |
BIN
src/assets/realBpoint.png
Normal file
BIN
src/assets/realBpoint.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.1 KiB |
BIN
src/assets/realCpoint.png
Normal file
BIN
src/assets/realCpoint.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.4 KiB |
@ -15,12 +15,18 @@ let token = urlParams.get('token') ;
|
||||
localStorage.setItem('token', token);
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
let reqUrl=config.url
|
||||
config.data = config.contentType ? config.data : qs.stringify(config.data)
|
||||
config.headers['Content-Type'] = config.contentType || 'application/x-www-form-urlencoded'
|
||||
const token = localStorage.getItem('token');
|
||||
// let token='eyJhbGciOiJIUzI1NilsInR5cCI6IkpXVCJ9.eyJzdWliOiJiZXNoaTAxliwiYXVkljpblnN1cHBsaWVyLWFwcCJdLCJuYmYiOiE2OTQwNzYzNTQsInVzZXJfaW5mbyl6eyJ1c2VySWQiOjUONTg4LCJwaG9uZSI6ljE4MTE2MzMOOTAyliwibmFtZSI6lumXg-a1i-ivleWViilsInN1cHBsaWVyTmFtZSI6luS4iua1t-a1i-ivleS-m-W6l0WVhilsInN1cHBsaWVySWQiOiMzMDQxLCJzdXBwbGcIR5cGUiOiEsInVzZXJuYW1lljoiY2VzaGkwMSIsInVzZXJUeXBlljoicmVzY3VIQXBwliwiYXVOaG9yaXRpZXMiOltdfSwic2NvcGUiOlsiYWxsllOsImlzcyl6Imh0dHBzOi8vc2lub2Fzc2lzdC5ib20iLCJleHAiOiE20TQxNjl3NTQsImlhdC16MTY5NDA3NiM1NHo.bPzhfNNw-VLnNJcmR9OpWPavX6hWYNOTOsHD1oMvZ3A'
|
||||
// const token = localStorage.getItem('token');
|
||||
// let token='28adfbc810248f777b062e9a9177f273'
|
||||
let token='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJzb25nIiwiYXVkIjpbInN1cHBsaWVyLWFwcCJdLCJuYmYiOjE3MDY1ODU2NzIsInVzZXJfaW5mbyI6eyJ1c2VySWQiOjU0NjU0LCJwaG9uZSI6IjE3NjMwMDM1NjU4IiwibmFtZSI6InNvbmciLCJzdXBwbGllck5hbWUiOiLkuIrmtbfmtYvor5XmnI3liqHllYYiLCJzdXBwbGllcklkIjozMzA0MSwic3VwcGxpZXJUeXBlIjoxLCJ1c2VybmFtZSI6InNvbmciLCJ1c2VyVHlwZSI6InJlc2N1ZUFwcCIsImRldmljZUlkIjoiMjJiNDljYTIwZjliODMzMGQ5ODcyMTczZjM5ZWE2OGJjIiwiYXV0aG9yaXRpZXMiOltdfSwic2NvcGUiOlsiYWxsIl0sImlzcyI6Imh0dHBzOi8vc2lub2Fzc2lzdC5jb20iLCJleHAiOjE3MDY2NzIwNzIsImlhdCI6MTcwNjU4NTY3Mn0.8pvEpomf59DxeB71s2kPB5CAvKCqxuyn2RycQ-ScYLU'
|
||||
if (reqUrl.includes("/driverApp")) {
|
||||
config.headers['token'] = `${token}`;
|
||||
} else {
|
||||
console.log("调度app")
|
||||
config.headers['Authorization'] = `${token}`;
|
||||
// alert(token)
|
||||
}
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
|
@ -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,12 +196,14 @@ 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({
|
||||
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, // 图片的相对路径
|
||||
@ -191,8 +212,24 @@ export default {
|
||||
})
|
||||
});
|
||||
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: imgIcon, // 图片的相对路径
|
||||
size: new AMap.Size(43, 43), // 图标的尺寸
|
||||
imageSize: new AMap.Size(43, 43) // 图片的实际尺寸
|
||||
})
|
||||
});
|
||||
},*/
|
||||
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>
|
||||
|
@ -17,6 +17,7 @@
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh" v-show="!show" style="min-height: 80%;position: relative">-->
|
||||
<div class="listWrap">
|
||||
<div class="itemWrap" v-for="(item,index) in pageList" :key="index">
|
||||
<div class="contentWrap" @click="goDetail">
|
||||
@ -35,9 +36,99 @@
|
||||
</div>
|
||||
<img v-show="activeIndex == 0" class="checkImg" @click="toggleSelection(item)" :src="item.isSelected ? require('@/assets/baoxiao_check.png') : require('@/assets/baoxiao_uncheck.png')">
|
||||
</div>
|
||||
<s v-show="activeIndex == 0" class="submitBtn" @click="noMultipleClicks(submitHandle)">提交</s>
|
||||
<div class="itemWrap" v-for="(item,index) in pageList" :key="index">
|
||||
<div class="contentWrap" @click="goDetail">
|
||||
<div class="line1">
|
||||
<div><span>订单编号:</span><span>{{item.userOrderCode}}</span></div>
|
||||
<div class="right">
|
||||
<img class="commonImg" :src="getStatus(item.state)">
|
||||
<div :class="getStatusColor(item.state)">{{item.stateStr}}</div>
|
||||
<img class="rightArrImg" src="@/assets/list_rightArrow.png">
|
||||
</div>
|
||||
</div>
|
||||
<div><span>报销金额:</span><span>{{item.reimburseAmount}}</span></div>
|
||||
<div v-show="activeIndex == 2"><span>审核备注:</span><span style="color: #FF5D2E">{{item.auditRemark}}</span></div>
|
||||
<div v-show="activeIndex != 0"><span>审核人员:</span><span>{{item.auditUser}}</span></div>
|
||||
<div v-show="activeIndex != 0"><span>审核时间:</span><span>{{item.auditTime}}</span></div>
|
||||
</div>
|
||||
<img v-show="activeIndex == 0" class="checkImg" @click="toggleSelection(item)" :src="item.isSelected ? require('@/assets/baoxiao_check.png') : require('@/assets/baoxiao_uncheck.png')">
|
||||
</div>
|
||||
<div class="itemWrap" v-for="(item,index) in pageList" :key="index">
|
||||
<div class="contentWrap" @click="goDetail">
|
||||
<div class="line1">
|
||||
<div><span>订单编号:</span><span>{{item.userOrderCode}}</span></div>
|
||||
<div class="right">
|
||||
<img class="commonImg" :src="getStatus(item.state)">
|
||||
<div :class="getStatusColor(item.state)">{{item.stateStr}}</div>
|
||||
<img class="rightArrImg" src="@/assets/list_rightArrow.png">
|
||||
</div>
|
||||
</div>
|
||||
<div><span>报销金额:</span><span>{{item.reimburseAmount}}</span></div>
|
||||
<div v-show="activeIndex == 2"><span>审核备注:</span><span style="color: #FF5D2E">{{item.auditRemark}}</span></div>
|
||||
<div v-show="activeIndex != 0"><span>审核人员:</span><span>{{item.auditUser}}</span></div>
|
||||
<div v-show="activeIndex != 0"><span>审核时间:</span><span>{{item.auditTime}}</span></div>
|
||||
</div>
|
||||
<img v-show="activeIndex == 0" class="checkImg" @click="toggleSelection(item)" :src="item.isSelected ? require('@/assets/baoxiao_check.png') : require('@/assets/baoxiao_uncheck.png')">
|
||||
</div>
|
||||
<div class="itemWrap" v-for="(item,index) in pageList" :key="index">
|
||||
<div class="contentWrap" @click="goDetail">
|
||||
<div class="line1">
|
||||
<div><span>订单编号:</span><span>{{item.userOrderCode}}</span></div>
|
||||
<div class="right">
|
||||
<img class="commonImg" :src="getStatus(item.state)">
|
||||
<div :class="getStatusColor(item.state)">{{item.stateStr}}</div>
|
||||
<img class="rightArrImg" src="@/assets/list_rightArrow.png">
|
||||
</div>
|
||||
</div>
|
||||
<div><span>报销金额:</span><span>{{item.reimburseAmount}}</span></div>
|
||||
<div v-show="activeIndex == 2"><span>审核备注:</span><span style="color: #FF5D2E">{{item.auditRemark}}</span></div>
|
||||
<div v-show="activeIndex != 0"><span>审核人员:</span><span>{{item.auditUser}}</span></div>
|
||||
<div v-show="activeIndex != 0"><span>审核时间:</span><span>{{item.auditTime}}</span></div>
|
||||
</div>
|
||||
<img v-show="activeIndex == 0" class="checkImg" @click="toggleSelection(item)" :src="item.isSelected ? require('@/assets/baoxiao_check.png') : require('@/assets/baoxiao_uncheck.png')">
|
||||
</div>
|
||||
<div class="itemWrap" v-for="(item,index) in pageList" :key="index">
|
||||
<div class="contentWrap" @click="goDetail">
|
||||
<div class="line1">
|
||||
<div><span>订单编号:</span><span>{{item.userOrderCode}}</span></div>
|
||||
<div class="right">
|
||||
<img class="commonImg" :src="getStatus(item.state)">
|
||||
<div :class="getStatusColor(item.state)">{{item.stateStr}}</div>
|
||||
<img class="rightArrImg" src="@/assets/list_rightArrow.png">
|
||||
</div>
|
||||
</div>
|
||||
<div><span>报销金额:</span><span>{{item.reimburseAmount}}</span></div>
|
||||
<div v-show="activeIndex == 2"><span>审核备注:</span><span style="color: #FF5D2E">{{item.auditRemark}}</span></div>
|
||||
<div v-show="activeIndex != 0"><span>审核人员:</span><span>{{item.auditUser}}</span></div>
|
||||
<div v-show="activeIndex != 0"><span>审核时间:</span><span>{{item.auditTime}}</span></div>
|
||||
</div>
|
||||
<img v-show="activeIndex == 0" class="checkImg" @click="toggleSelection(item)" :src="item.isSelected ? require('@/assets/baoxiao_check.png') : require('@/assets/baoxiao_uncheck.png')">
|
||||
</div>
|
||||
<div class="itemWrap" v-for="(item,index) in pageList" :key="index">
|
||||
<div class="contentWrap" @click="goDetail">
|
||||
<div class="line1">
|
||||
<div><span>订单编号:</span><span>{{item.userOrderCode}}</span></div>
|
||||
<div class="right">
|
||||
<img class="commonImg" :src="getStatus(item.state)">
|
||||
<div :class="getStatusColor(item.state)">{{item.stateStr}}</div>
|
||||
<img class="rightArrImg" src="@/assets/list_rightArrow.png">
|
||||
</div>
|
||||
</div>
|
||||
<div><span>报销金额:</span><span>{{item.reimburseAmount}}</span></div>
|
||||
<div v-show="activeIndex == 2"><span>审核备注:</span><span style="color: #FF5D2E">{{item.auditRemark}}</span></div>
|
||||
<div v-show="activeIndex != 0"><span>审核人员:</span><span>{{item.auditUser}}</span></div>
|
||||
<div v-show="activeIndex != 0"><span>审核时间:</span><span>{{item.auditTime}}</span></div>
|
||||
</div>
|
||||
<img v-show="activeIndex == 0" class="checkImg" @click="toggleSelection(item)" :src="item.isSelected ? require('@/assets/baoxiao_check.png') : require('@/assets/baoxiao_uncheck.png')">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- </van-pull-refresh>-->
|
||||
<!-- <div v-show="activeIndex == 0" class="submitBtn" @click="noMultipleClicks(submitHandle)">提交</div>-->
|
||||
<!-- <div class="bgEmptyImg" v-show="show" >-->
|
||||
<!-- <img src="@/assets/empty.png" />-->
|
||||
</div>
|
||||
<!-- </div>-->
|
||||
|
||||
</template>
|
||||
|
||||
@ -54,20 +145,35 @@ export default {
|
||||
pageList:[],
|
||||
pageNum:1,
|
||||
pageSize:10,
|
||||
total: 0,
|
||||
isCheck:false,
|
||||
driverId: 78948,
|
||||
submitData:[],
|
||||
noClick:true,
|
||||
loading:false,
|
||||
isLoading: false,
|
||||
finished: false,
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
show() {
|
||||
return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
},
|
||||
methods:{
|
||||
onRefresh() {
|
||||
this.pageNum=1;
|
||||
// this.getDriverList()
|
||||
setTimeout(() => {
|
||||
this.$toast('刷新成功');
|
||||
this.isLoading = false;
|
||||
}, 1000);
|
||||
},
|
||||
toggleSelection(item) {
|
||||
item.isSelected = !item.isSelected; // 切换 isSelected 属性的值
|
||||
console.log("item",item)
|
||||
},
|
||||
async submitHandle(){
|
||||
this.pageList.forEach((item)=>{
|
||||
@ -86,8 +192,9 @@ export default {
|
||||
},
|
||||
async changeTab(index) {
|
||||
this.activeIndex = index
|
||||
this.total = 0;
|
||||
this.pageNum = 1
|
||||
this.pageList = [];
|
||||
this.orderList = [];
|
||||
await this.getList()
|
||||
},
|
||||
goDetail(){
|
||||
@ -264,4 +371,15 @@ export default {
|
||||
.garyColor{
|
||||
color: #9C9C9C;
|
||||
}
|
||||
.bgEmptyImg{
|
||||
@include flexTwoCenter;
|
||||
height: 90% ;
|
||||
background-color: #FAFAFA;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
//::v-deep .van-pull-refresh__track{
|
||||
// position: static !important;
|
||||
//}
|
||||
</style>
|
||||
|
@ -34,7 +34,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-pull-refresh v-model="isLoading" @refresh="onRefresh" v-show="!show" style="min-height: 80%;">
|
||||
<van-pull-refresh v-model="isLoading" @refresh="onRefresh" v-show="!show" >
|
||||
<div >
|
||||
<div class="content_wrap" v-for="(item,index) in orderList" :key="index">
|
||||
<div class="codeTxt common">
|
||||
|
Reference in New Issue
Block a user