|
|
|
|
@ -11,15 +11,21 @@
|
|
|
|
|
<el-checkbox |
|
|
|
|
v-for="item in datalists" |
|
|
|
|
v-model="item.isck" |
|
|
|
|
:label="`${item.content}--时间:${item.time}--距离:${item.distance}公里(${ |
|
|
|
|
item.items.reservationNum + item.items.reservationStockListNum |
|
|
|
|
:label="`${item.warehouseName}-- ${item.consignee}--${item.deliveryAddress}--时间:${ |
|
|
|
|
item.time |
|
|
|
|
}--距离:${item.distance}公里(${ |
|
|
|
|
item.reservationNum + item.reservationStockListNum |
|
|
|
|
}件)`" |
|
|
|
|
size="large" |
|
|
|
|
@change="ListChange" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</el-scrollbar> |
|
|
|
|
<span class="txbxSpan">总条数:{{CheckthMax.length}}  地址正确总条数:{{datalists.length}}  <span v-if="Checkthebox.length"> 当前勾选条数:{{Checkthebox.length}} </span></span> |
|
|
|
|
<span class="txbxSpan" |
|
|
|
|
>总条数:{{ CheckthMax.length }}  <span v-if="Checkthebox.length"> |
|
|
|
|
当前勾选条数:{{ Checkthebox.length }} |
|
|
|
|
</span></span |
|
|
|
|
> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div style="display: flex; align-items: center; justify-content: center"> |
|
|
|
|
@ -66,11 +72,8 @@ watchEffect(() => {
|
|
|
|
|
details.item = router.currentRoute.value.query.id; |
|
|
|
|
if (!details.item) return; |
|
|
|
|
getReservationAddr(details.item).then(res => { |
|
|
|
|
|
|
|
|
|
console.log(res.data.data, '参数接受的'); |
|
|
|
|
CheckthMax.value = res.data.data; //统计当前勾选 |
|
|
|
|
|
|
|
|
|
const data = res.data.data; |
|
|
|
|
details.reservationData = res.data.data; |
|
|
|
|
details.mapLoc.remove(details.markersarr); |
|
|
|
|
details.drivingarrs.map(item => { |
|
|
|
|
@ -81,7 +84,6 @@ watchEffect(() => {
|
|
|
|
|
details.drivingarrs = []; |
|
|
|
|
// details.datalists = []; |
|
|
|
|
init(res.data.data); |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
function initmap() { |
|
|
|
|
@ -92,15 +94,25 @@ function initmap() {
|
|
|
|
|
center: [104.293242, 30.582939], //初始化地图中心点 |
|
|
|
|
zooms: [3, 16], //设置缩放级别范围 3-20 级 |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
function checkgoto() { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function checkgoto() { |
|
|
|
|
let ids = []; |
|
|
|
|
details.datalists.map(item => { |
|
|
|
|
console.log('item>>>>>>>>>>>>>>', item); |
|
|
|
|
if (item.isck) { |
|
|
|
|
ids.push(item.items.id); |
|
|
|
|
ids.push(item.id); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
console.log('ids>>>>>>>>>>>', ids); |
|
|
|
|
@ -117,135 +129,6 @@ 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) { |
|
|
|
|
// // 检查地图对象是否存在 |
|
|
|
|
// if (!details.mapLoc) { |
|
|
|
|
// console.warn('No map object available.'); |
|
|
|
|
// return; |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
// await details.mapLoc.clearMap(); // 清空地图 |
|
|
|
|
// details.markersarr = []; // 重置标记数组 |
|
|
|
|
// const geocoder = new AMap.Geocoder({}); |
|
|
|
|
// let geocodess = []; |
|
|
|
|
|
|
|
|
|
// // 使用 Promise.all 来并发执行所有地址解析，以提高效率 |
|
|
|
|
// const geocodeResults = await Promise.all(data.map(item => geocodeItem(item, geocoder))); |
|
|
|
|
|
|
|
|
|
// // 过滤掉未成功解析的结果 |
|
|
|
|
// geocodess = geocodeResults.filter(result => result !== null); |
|
|
|
|
|
|
|
|
|
// // 如果有有效地理编码结果，设置中心点并处理标记 |
|
|
|
|
// if (geocodess.length > 0) { |
|
|
|
|
// // 设置地图中心为第一个地址的位置 |
|
|
|
|
// const firstLocation = geocodess[0].pontion; |
|
|
|
|
// details.mapLoc.setCenter([firstLocation.lng, firstLocation.lat]); |
|
|
|
|
|
|
|
|
|
// // 处理所有有效的地理编码结果 |
|
|
|
|
// geocodess.forEach(({ pontion, content, items }) => { |
|
|
|
|
// const marker = createMarker(pontion, items, details.mapLoc); |
|
|
|
|
// details.markersarr.push(marker); // 将标记添加到数组中 |
|
|
|
|
// }); |
|
|
|
|
|
|
|
|
|
// // 替换这里的maker和Driving函数调用逻辑，如果它们是用来处理markers的 |
|
|
|
|
// maker(geocodess); // 假设这是设置标记的函数 |
|
|
|
|
// Driving(geocodess); // 假设这是根据地址驱动路径的函数 |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async function init(data) { |
|
|
|
|
// 检查地图对象是否存在 |
|
|
|
|
if (!details.mapLoc) { |
|
|
|
|
console.warn('No map object available.'); |
|
|
|
|
Dtloading.value = false; // 如果地图对象不存在，立即停止加载 |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
await details.mapLoc.clearMap(); // 清空地图 |
|
|
|
|
details.markersarr = []; // 重置标记数组 |
|
|
|
|
const geocoder = new AMap.Geocoder({}); |
|
|
|
|
let geocodess = []; |
|
|
|
|
|
|
|
|
|
// 使用 Promise.all 来并发执行所有地址解析，以提高效率 |
|
|
|
|
const geocodeResults = await Promise.all(data.map(item => geocodeItem(item, geocoder))); |
|
|
|
|
|
|
|
|
|
// 过滤掉未成功解析的结果 |
|
|
|
|
geocodess = geocodeResults.filter(result => result !== null); |
|
|
|
|
|
|
|
|
|
if (geocodess.length > 0) { |
|
|
|
|
const firstLocation = geocodess[0].pontion; |
|
|
|
|
details.mapLoc.setCenter([firstLocation.lng, firstLocation.lat]); |
|
|
|
|
|
|
|
|
|
geocodess.forEach(({ pontion, content, items }) => { |
|
|
|
|
const marker = createMarker(pontion, items, details.mapLoc); |
|
|
|
|
details.markersarr.push(marker); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
maker(geocodess); // 处理标记 |
|
|
|
|
await Driving(geocodess); // 处理驾车路线，确保此处 await 正确等待驾车路线完成 |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
Dtloading.value = false; // 在所有操作完成后关闭加载效果 |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 创建标记的函数 |
|
|
|
|
function createMarker(location, item, mapLoc) { |
|
|
|
|
@ -254,117 +137,101 @@ function createMarker(location, item, mapLoc) {
|
|
|
|
|
position: [location.lng, location.lat], |
|
|
|
|
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', |
|
|
|
|
anchor: 'bottom-center', |
|
|
|
|
offset: new AMap.Pixel(0, 0), |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
marker.setLabel({ |
|
|
|
|
offset: new AMap.Pixel(0, 0), |
|
|
|
|
content: `<div class='info'>${item.warehouseName}</div>`, |
|
|
|
|
direction: 'top', |
|
|
|
|
offset: new AMap.Pixel(0, -5), |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
return marker; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 地址解析函数，返回解析结果或null |
|
|
|
|
async function geocodeItem(item, geocoder) { |
|
|
|
|
const address = item.deliveryAddress ? item.deliveryAddress : '北京市'; |
|
|
|
|
try { |
|
|
|
|
const response = await new Promise((resolve, reject) => { |
|
|
|
|
geocoder.getLocation(address, (status, response) => { |
|
|
|
|
if (status === 'complete' && response.info === 'OK') { |
|
|
|
|
resolve(response); |
|
|
|
|
} else { |
|
|
|
|
console.log(response, '错误的地址已经切换默认地址'); |
|
|
|
|
// 使用默认地址 |
|
|
|
|
geocoder.getLocation('北京市', (defaultStatus, defaultResponse) => { |
|
|
|
|
if (defaultStatus === 'complete' && defaultResponse.info === 'OK') { |
|
|
|
|
resolve(defaultResponse); // 如果默认地址获取成功，则返回默认地址结果 |
|
|
|
|
} else { |
|
|
|
|
resolve(null); // 如果默认地址也失败，则返回 null |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
// 初始化函数 |
|
|
|
|
async function init(data) { |
|
|
|
|
// 检查地图对象是否存在 |
|
|
|
|
if (!details.mapLoc) { |
|
|
|
|
Dtloading.value = false; |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
Dtloading.value = false; |
|
|
|
|
await details.mapLoc.clearMap();//重新绘制地图 |
|
|
|
|
details.markersarr = []; |
|
|
|
|
|
|
|
|
|
return { |
|
|
|
|
pontion: response.geocodes[0].location, |
|
|
|
|
content: `${item.consignee}--${item.deliveryAddress}--${item.deliveryPhone}`, |
|
|
|
|
items: item, |
|
|
|
|
}; |
|
|
|
|
} catch (error) { |
|
|
|
|
console.warn(`Geocode failed for address: ${address} with error:`, error); |
|
|
|
|
return null; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
maker(data); // 处理标记 |
|
|
|
|
Driving(data); // 处理驾车路线 |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 地图标点 |
|
|
|
|
function maker(geocodess) { |
|
|
|
|
// 直接使用 forEach 代替 map，因为我们不需要返回一个新数组，仅仅是迭代并执行操作 |
|
|
|
|
geocodess.forEach(item => { |
|
|
|
|
// 确保 item.pontion 存在 |
|
|
|
|
if (item.pontion) { |
|
|
|
|
console.log(item, 'item====='); |
|
|
|
|
function maker(data) { |
|
|
|
|
data.forEach(item => { |
|
|
|
|
const location = item.mapInfo || { lng: item.jingdu, lat: item.weidu }; |
|
|
|
|
|
|
|
|
|
const marker = new AMap.Marker({ |
|
|
|
|
map: details.mapLoc, |
|
|
|
|
position: [item.pontion.lng, item.pontion.lat], |
|
|
|
|
position: [location.lng, location.lat], |
|
|
|
|
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', |
|
|
|
|
anchor: 'bottom-center', |
|
|
|
|
offset: new AMap.Pixel(0, 0), |
|
|
|
|
offset: new AMap.Pixel(0, -5), |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 根据最新的AMap API文档，setMap方法在创建Marker时已经通过构造函数的map属性设置了地图对象，所以这里可以不需要再次调用 |
|
|
|
|
// marker.setMap(details.mapLoc); |
|
|
|
|
|
|
|
|
|
marker.setLabel({ |
|
|
|
|
offset: new AMap.Pixel(0, -5), // 设置文本标注偏移量 |
|
|
|
|
content: `<div class='info'>${item.content}</div>`, // 设置文本标注内容 |
|
|
|
|
direction: 'top', // 设置文本标注方位 |
|
|
|
|
offset: new AMap.Pixel(0, -5), |
|
|
|
|
content: `<div class='info'>${item.consignee}--${item.deliveryAddress}--${item.deliveryPhone}</div>`, // 可以根据需求调整这里的内容 |
|
|
|
|
direction: 'top', |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
details.markersarr.push(marker); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
Dtloading.value = false; // 假设这是用于控制加载状态的变量 |
|
|
|
|
Dtloading.value = false; |
|
|
|
|
} |
|
|
|
|
//地图公里数和时间计算 |
|
|
|
|
// 假设 seenIds 在适当的作用域中已经初始化 |
|
|
|
|
const seenIds = {}; |
|
|
|
|
function Driving(geocodess) { |
|
|
|
|
// 根据起终点经纬度规划驾车导航路线 |
|
|
|
|
geocodess.map(item => { |
|
|
|
|
// 驾车路线处理函数 |
|
|
|
|
function Driving(data) { |
|
|
|
|
data.forEach(item => { |
|
|
|
|
const startLocation = { lng: item.jingdu, lat: item.weidu }; |
|
|
|
|
const endLocation = item.mapInfo || startLocation; |
|
|
|
|
var driving = new AMap.Driving({ |
|
|
|
|
map: details.mapLoc, |
|
|
|
|
hideMarkers: true, |
|
|
|
|
}); |
|
|
|
|
driving.search( |
|
|
|
|
new AMap.LngLat(item.items.jingdu, item.items.weidu), |
|
|
|
|
new AMap.LngLat(item.pontion.lng, item.pontion.lat), |
|
|
|
|
new AMap.LngLat(startLocation.lng, startLocation.lat), |
|
|
|
|
new AMap.LngLat(endLocation.lng, endLocation.lat), |
|
|
|
|
function (status, result) { |
|
|
|
|
console.log(status); |
|
|
|
|
if (status === 'complete') { |
|
|
|
|
// console.log(result.routes[0]); |
|
|
|
|
item.time = formatSeconds(result.routes[0].time); |
|
|
|
|
item.distance = result.routes[0].distance / 1000; |
|
|
|
|
item.isck = true; |
|
|
|
|
// item.distance=result.routes[0].distance/1000 |
|
|
|
|
// 在执行 push 之前检查 seenIds |
|
|
|
|
if (!seenIds.hasOwnProperty(item.items.id)) { |
|
|
|
|
console.log(item, 'item参数==='); |
|
|
|
|
if (!seenIds.hasOwnProperty(item.id)) { |
|
|
|
|
item.time = formatSeconds(result.routes[0].time); |
|
|
|
|
item.distance = result.routes[0].distance / 1000; |
|
|
|
|
item.isck = true; |
|
|
|
|
details.datalists.push(item); |
|
|
|
|
seenIds[item.items.id] = true; // 标记该 ID |
|
|
|
|
seenIds[item.id] = true; // 标记该 ID |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
console.log('获取驾车数据失败：' + result); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
); |
|
|
|
|
details.drivingarrs.push(driving); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
let $_a = {lng:data[0].jingdu,lat: data[0].weidu}; |
|
|
|
|
console.log( $_a,' $_a=data'); |
|
|
|
|
const firstLocation ={ lng: $_a.lng, lat: $_a.lat }; |
|
|
|
|
console.log(firstLocation,'firstLocation'); |
|
|
|
|
details.mapLoc.setCenter([firstLocation.lng, firstLocation.lat]); |
|
|
|
|
var marker = new AMap.Marker({ |
|
|
|
|
map: details.mapLoc, |
|
|
|
|
position: [firstLocation.lng, firstLocation.lat], |
|
|
|
|
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', |
|
|
|
|
anchor: 'bottom-center', |
|
|
|
|
offset: new AMap.Pixel(0, -5), |
|
|
|
|
}); |
|
|
|
|
marker.setLabel({ |
|
|
|
|
offset: new AMap.Pixel(0, -5), |
|
|
|
|
content: `${data[0].storeName}`, |
|
|
|
|
direction: 'top', |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//将秒数转化为多少小时多少分 |
|
|
|
|
@ -374,7 +241,7 @@ function formatSeconds(seconds) {
|
|
|
|
|
const minutes = Math.floor((seconds % 3600) / 60); |
|
|
|
|
|
|
|
|
|
// 构建字符串 |
|
|
|
|
let result = hours > 0 ? `${hours.toString().padStart(2, '0')}小时` : ""; |
|
|
|
|
let result = hours > 0 ? `${hours.toString().padStart(2, '0')}小时` : ''; |
|
|
|
|
result += `${minutes.toString().padStart(2, '0')}分钟`; |
|
|
|
|
|
|
|
|
|
return result; |
|
|
|
|
@ -385,18 +252,15 @@ function back() {
|
|
|
|
|
} |
|
|
|
|
const { datalists } = toRefs(details); |
|
|
|
|
const ListChange = val => { |
|
|
|
|
Dtloading.value=true |
|
|
|
|
Dtloading.value = true; |
|
|
|
|
setTimeout(() => { |
|
|
|
|
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); |
|
|
|
|
init(data); |
|
|
|
|
Checkthebox.value = data; //统计当前勾选 |
|
|
|
|
console.log(details.datalists, '数据'); |
|
|
|
|
},0) |
|
|
|
|
|
|
|
|
|
}, 0); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
|
