|
|
|
|
@ -19,7 +19,7 @@
|
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</el-scrollbar> |
|
|
|
|
<span class="txbxSpan">当前总条数:{{datalists.length}}  当前勾选条数:{{Checkthebox.length}}</span> |
|
|
|
|
<span class="txbxSpan">总条数:{{CheckthMax.length}}  地址正确总条数:{{datalists.length}}  <span v-if="Checkthebox.length"> 当前勾选条数:{{Checkthebox.length}} </span></span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div style="display: flex; align-items: center; justify-content: center"> |
|
|
|
|
@ -57,6 +57,7 @@ let details = reactive({
|
|
|
|
|
// datalist:[] |
|
|
|
|
}); |
|
|
|
|
const Checkthebox=ref([]); |
|
|
|
|
const CheckthMax=ref([]); |
|
|
|
|
onMounted(() => { |
|
|
|
|
initmap(); |
|
|
|
|
}); |
|
|
|
|
@ -65,8 +66,10 @@ watchEffect(() => {
|
|
|
|
|
details.item = router.currentRoute.value.query.id; |
|
|
|
|
if (!details.item) return; |
|
|
|
|
getReservationAddr(details.item).then(res => { |
|
|
|
|
|
|
|
|
|
console.log(res.data.data,'参数接受的'); |
|
|
|
|
Checkthebox.value = res.data.data;//统计当前勾选 |
|
|
|
|
CheckthMax.value = res.data.data;//统计当前勾选 |
|
|
|
|
|
|
|
|
|
const data = res.data.data; |
|
|
|
|
details.reservationData = res.data.data; |
|
|
|
|
details.mapLoc.remove(details.markersarr); |
|
|
|
|
@ -78,7 +81,7 @@ watchEffect(() => {
|
|
|
|
|
details.drivingarrs = []; |
|
|
|
|
// details.datalists = []; |
|
|
|
|
init(res.data.data); |
|
|
|
|
Dtloading.value=false |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
function initmap() { |
|
|
|
|
@ -87,10 +90,12 @@ function initmap() {
|
|
|
|
|
viewMode: '2D', // 默认使用 2D 模式 |
|
|
|
|
zoom: 9, //初始化地图层级 |
|
|
|
|
center: [104.293242, 30.582939], //初始化地图中心点 |
|
|
|
|
zooms:[3,16], //设置缩放级别范围 3-20 级 |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
function checkgoto() { |
|
|
|
|
|
|
|
|
|
let ids = []; |
|
|
|
|
details.datalists.map(item => { |
|
|
|
|
console.log('item>>>>>>>>>>>>>>', item); |
|
|
|
|
@ -112,57 +117,129 @@ function checkgoto() {
|
|
|
|
|
}); |
|
|
|
|
useStores.commit('DEL_TAG_CURRENT'); |
|
|
|
|
} |
|
|
|
|
// async function init(data) { |
|
|
|
|
// if (details.mapLoc) { |
|
|
|
|
|
|
|
|
|
// await details.mapLoc.clearMap(); //重置地图标记 |
|
|
|
|
|
|
|
|
|
// // maplabel() |
|
|
|
|
// let geocodess = []; |
|
|
|
|
// var geocoder = new AMap.Geocoder({}); |
|
|
|
|
// data.map(async (item, index) => { |
|
|
|
|
// if (!item.jingdu || !item.weidu) { |
|
|
|
|
// return ElMessage.warning('地址有问题'); |
|
|
|
|
// } |
|
|
|
|
// var marker = new AMap.Marker({ |
|
|
|
|
// map: details.mapLoc, |
|
|
|
|
// position: [item.jingdu, item.weidu], |
|
|
|
|
// icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', |
|
|
|
|
// anchor: 'bottom-center', |
|
|
|
|
// offset: new AMap.Pixel(0, 0), |
|
|
|
|
// }); |
|
|
|
|
// await marker.setMap(details.mapLoc); |
|
|
|
|
// await marker.setLabel({ |
|
|
|
|
// offset: new AMap.Pixel(0, -5), //设置文本标注偏移量 |
|
|
|
|
// content: `<div class='info'>${item.warehouseName}</div>`, //设置文本标注内容 |
|
|
|
|
// direction: 'top', //设置文本标注方位 |
|
|
|
|
// }); |
|
|
|
|
// // details.markersarr=[]//修改过 |
|
|
|
|
// details.markersarr.push(marker); |
|
|
|
|
// await geocoder.getLocation(item.deliveryAddress, (status, result) => { |
|
|
|
|
// console.log(status,'status'); |
|
|
|
|
// console.log(result,'result'); |
|
|
|
|
// if (status == 'complete' && result.info == 'OK') { |
|
|
|
|
// // result中对应详细地理坐标信息 |
|
|
|
|
// details.mapLoc.setCenter([ |
|
|
|
|
// result.geocodes[0].location.lng, |
|
|
|
|
// result.geocodes[0].location.lat, |
|
|
|
|
// ]); |
|
|
|
|
// geocodess.push({ |
|
|
|
|
// pontion: result.geocodes[0].location, |
|
|
|
|
// content: item.consignee + '--' + item.deliveryAddress + '' + '--' + item.deliveryPhone, |
|
|
|
|
// items: item, |
|
|
|
|
// }); |
|
|
|
|
// // if (index + 1 == data.length) { |
|
|
|
|
// // console.log(geocodess,'geocodess'); |
|
|
|
|
// // maker(geocodess); |
|
|
|
|
// // Driving(geocodess); |
|
|
|
|
// // } |
|
|
|
|
// // 修改过 |
|
|
|
|
// console.log(geocodess,'geocodess'); |
|
|
|
|
// maker(geocodess); |
|
|
|
|
// Driving(geocodess); |
|
|
|
|
// } |
|
|
|
|
// }); |
|
|
|
|
// }); |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
async function init(data) { |
|
|
|
|
await details.mapLoc.clearMap(); //重置地图标记 |
|
|
|
|
// maplabel() |
|
|
|
|
console.log(details.mapLoc); |
|
|
|
|
if (!details.mapLoc) { |
|
|
|
|
return; // 如果没有地图对象，则直接返回 |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
await details.mapLoc.clearMap(); // 重置地图标记 |
|
|
|
|
let geocodess = []; |
|
|
|
|
var geocoder = new AMap.Geocoder({}); |
|
|
|
|
data.map(async (item, index) => { |
|
|
|
|
const geocoder = new AMap.Geocoder({}); |
|
|
|
|
details.markersarr = []; // 确保这是一个空数组 |
|
|
|
|
|
|
|
|
|
// 使用 for...of 循环替代 map，因为需要异步操作 |
|
|
|
|
for (let item of data) { |
|
|
|
|
if (!item.jingdu || !item.weidu) { |
|
|
|
|
console.log(item.jingdu); |
|
|
|
|
return ElMessage.warning('地址有问题'); |
|
|
|
|
ElMessage.warning('地址有问题'); |
|
|
|
|
continue; // 如果经纬度有问题，跳过此次循环 |
|
|
|
|
} |
|
|
|
|
var marker = new AMap.Marker({ |
|
|
|
|
|
|
|
|
|
const marker = new AMap.Marker({ |
|
|
|
|
map: details.mapLoc, |
|
|
|
|
position: [item.jingdu, item.weidu], |
|
|
|
|
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', |
|
|
|
|
anchor: 'bottom-center', |
|
|
|
|
offset: new AMap.Pixel(0, 0), |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
await marker.setMap(details.mapLoc); |
|
|
|
|
await marker.setLabel({ |
|
|
|
|
offset: new AMap.Pixel(0, -5), //设置文本标注偏移量 |
|
|
|
|
content: `<div class='info'>${item.warehouseName}</div>`, //设置文本标注内容 |
|
|
|
|
direction: 'top', //设置文本标注方位 |
|
|
|
|
marker.setLabel({ |
|
|
|
|
offset: new AMap.Pixel(0,0), // 设置文本标注偏移量 |
|
|
|
|
content: `<div class='info'>${item.warehouseName}</div>`, // 设置文本标注内容 |
|
|
|
|
direction: 'top', // 设置文本标注方位 |
|
|
|
|
}); |
|
|
|
|
// details.markersarr=[]//修改过 |
|
|
|
|
details.markersarr.push(marker); |
|
|
|
|
await geocoder.getLocation(item.deliveryAddress, (status, result) => { |
|
|
|
|
console.log(status,'status'); |
|
|
|
|
console.log(result,'result'); |
|
|
|
|
if (status === 'complete' && result.info === 'OK') { |
|
|
|
|
// result中对应详细地理坐标信息 |
|
|
|
|
details.mapLoc.setCenter([ |
|
|
|
|
result.geocodes[0].location.lng, |
|
|
|
|
result.geocodes[0].location.lat, |
|
|
|
|
]); |
|
|
|
|
geocodess.push({ |
|
|
|
|
pontion: result.geocodes[0].location, |
|
|
|
|
content: item.consignee + '--' + item.deliveryAddress + '' + '--' + item.deliveryPhone, |
|
|
|
|
items: item, |
|
|
|
|
}); |
|
|
|
|
if (index + 1 == data.length) { |
|
|
|
|
maker(geocodess); |
|
|
|
|
Driving(geocodess); |
|
|
|
|
|
|
|
|
|
details.markersarr.push(marker); // 将标记添加到数组中 |
|
|
|
|
// 对 geocoder.getLocation 的调用现在是同步的，使用 await 等待回调结果 |
|
|
|
|
const result = await new Promise((resolve) => { |
|
|
|
|
geocoder.getLocation(item.deliveryAddress, (status, response) => { |
|
|
|
|
if (status === 'complete' && response.info === 'OK') { |
|
|
|
|
resolve(response); |
|
|
|
|
} else { |
|
|
|
|
resolve(null); // 如果获取位置失败，则返回 null |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
if (result) { |
|
|
|
|
details.mapLoc.setCenter([ |
|
|
|
|
result.geocodes[0].location.lng, |
|
|
|
|
result.geocodes[0].location.lat, |
|
|
|
|
]); |
|
|
|
|
geocodess.push({ |
|
|
|
|
pontion: result.geocodes[0].location, |
|
|
|
|
content: `${item.consignee}--${item.deliveryAddress}--${item.deliveryPhone}`, |
|
|
|
|
items: item, |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (geocodess.length > 0) { |
|
|
|
|
maker(geocodess); |
|
|
|
|
Driving(geocodess); |
|
|
|
|
}else{ |
|
|
|
|
Dtloading.value=false |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
//地图标点 |
|
|
|
|
function maker(geocodess) { |
|
|
|
|
geocodess.map(item => { |
|
|
|
|
async function maker (geocodess) { |
|
|
|
|
await geocodess.map(item => { |
|
|
|
|
if (item.pontion) { |
|
|
|
|
console.log(item, 'item====='); |
|
|
|
|
var marker = new AMap.Marker({ |
|
|
|
|
@ -181,6 +258,8 @@ function maker(geocodess) {
|
|
|
|
|
details.markersarr.push(marker); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
Dtloading.value=false |
|
|
|
|
} |
|
|
|
|
//地图公里数和时间计算 |
|
|
|
|
// 假设 seenIds 在适当的作用域中已经初始化 |
|
|
|
|
@ -196,6 +275,7 @@ function Driving(geocodess) {
|
|
|
|
|
new AMap.LngLat(item.items.jingdu, item.items.weidu), |
|
|
|
|
new AMap.LngLat(item.pontion.lng, item.pontion.lat), |
|
|
|
|
function (status, result) { |
|
|
|
|
console.log(status); |
|
|
|
|
if (status === 'complete') { |
|
|
|
|
// console.log(result.routes[0]); |
|
|
|
|
item.time = formatSeconds(result.routes[0].time); |
|
|
|
|
@ -237,13 +317,15 @@ function back() {
|
|
|
|
|
} |
|
|
|
|
const { datalists } = toRefs(details); |
|
|
|
|
const ListChange = val => { |
|
|
|
|
console.log(val,'val===='); |
|
|
|
|
Dtloading.value=true |
|
|
|
|
console.log(details.datalists, '最新的数据'); |
|
|
|
|
let data = details.datalists.filter(item => item.isck === true).map(item => item.items); |
|
|
|
|
let data = details.datalists.filter(item => item.isck === true).map(item => item.items); |
|
|
|
|
init(data); |
|
|
|
|
Checkthebox.value = data;//统计当前勾选 |
|
|
|
|
console.log(details.datalists, '数据'); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
|
