From 35dd8cb6fc884a549647fd32ee324d1ae0d4ec36 Mon Sep 17 00:00:00 2001 From: xzg <4727863@qq.com> Date: Fri, 29 Mar 2024 19:43:54 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/distribution/reservation/atlas.vue | 336 ++++++------------ .../distribution/reservation/reservation.vue | 116 +++++- .../signfor/distributionSignforedt.vue | 9 +- .../distributionStockArticle.vue | 43 ++- 4 files changed, 244 insertions(+), 260 deletions(-) diff --git a/src/views/distribution/reservation/atlas.vue b/src/views/distribution/reservation/atlas.vue index 977d8f60..3f107364 100644 --- a/src/views/distribution/reservation/atlas.vue +++ b/src/views/distribution/reservation/atlas.vue @@ -1,5 +1,5 @@ @@ -56,8 +62,8 @@ let details = reactive({ drivingarrs: [], // datalist:[] }); -const Checkthebox=ref([]); -const CheckthMax=ref([]); +const Checkthebox = ref([]); +const CheckthMax = ref([]); onMounted(() => { initmap(); }); @@ -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; + console.log(res.data.data, '参数接受的'); + CheckthMax.value = 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() { @@ -90,17 +92,27 @@ function initmap() { viewMode: '2D', // 默认使用 2D 模式 zoom: 9, //初始化地图层级 center: [104.293242, 30.582939], //初始化地图中心点 - zooms:[3,16], //设置缩放级别范围 3-20 级 + 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: `
${item.warehouseName}
`, //设置文本标注内容 -// 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: `
${item.warehouseName}
`, - direction: 'top', + offset: new AMap.Pixel(0, -5), }); return marker; } +// 初始化函数 +async function init(data) { + // 检查地图对象是否存在 + if (!details.mapLoc) { + Dtloading.value = false; + return; + } + Dtloading.value = false; + await details.mapLoc.clearMap();//重新绘制地图 + details.markersarr = []; -// 地址解析函数，返回解析结果或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 - } - }); - } - }); - }); - 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====='); - const marker = new AMap.Marker({ - map: details.mapLoc, - position: [item.pontion.lng, item.pontion.lat], - icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', - anchor: 'bottom-center', - offset: new AMap.Pixel(0, 0), - }); - // 根据最新的AMap API文档，setMap方法在创建Marker时已经通过构造函数的map属性设置了地图对象，所以这里可以不需要再次调用 - // marker.setMap(details.mapLoc); +// 地图标点 +function maker(data) { + data.forEach(item => { + const location = item.mapInfo || { lng: item.jingdu, lat: item.weidu }; - marker.setLabel({ - offset: new AMap.Pixel(0, -5), // 设置文本标注偏移量 - content: `
${item.content}
`, // 设置文本标注内容 - direction: 'top', // 设置文本标注方位 - }); + const marker = new AMap.Marker({ + map: details.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, -5), + }); + marker.setLabel({ + offset: new AMap.Pixel(0, -5), + content: `
${item.consignee}--${item.deliveryAddress}--${item.deliveryPhone}
`, // 可以根据需求调整这里的内容 + direction: 'top', + }); - details.markersarr.push(marker); - } + 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 -setTimeout(()=>{ - console.log(details.datalists, '最新的数据'); - let data = details.datalists.filter(item => item.isck === true).map(item => item.items); - init(data); - Checkthebox.value = data;//统计当前勾选 - console.log(details.datalists, '数据'); -},0) - + Dtloading.value = true; + setTimeout(() => { + console.log(details.datalists, '最新的数据'); + let data = details.datalists.filter(item => item.isck === true); + init(data); + Checkthebox.value = data; //统计当前勾选 + console.log(details.datalists, '数据'); + }, 0); }; - - diff --git a/src/views/distribution/reservation/reservation.vue b/src/views/distribution/reservation/reservation.vue index 85cfbcc9..585daeb2 100644 --- a/src/views/distribution/reservation/reservation.vue +++ b/src/views/distribution/reservation/reservation.vue @@ -314,6 +314,19 @@ 确 定 + + + 是否需要展开地图进行线路查看？ +
+ +
+ +