You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
263 lines
7.3 KiB
263 lines
7.3 KiB
<template> |
|
<basic-container> |
|
<div class="avue-crud"> |
|
<div class="mabxmp"> |
|
<div class="mapbox"> |
|
<div class="bmap" id="container"></div> |
|
</div> |
|
<div class="maplists"> |
|
<el-scrollbar> |
|
<div class="mbx"> |
|
<el-checkbox |
|
v-for="item in datalists" |
|
v-model="item.isck" |
|
:label="`${item.content}--时间:${item.time}--距离:${item.distance}公里(${ |
|
item.items.reservationNum + item.items.reservationStockListNum |
|
}件)`" |
|
size="large" |
|
/> |
|
<!-- <el-text class="mx-1 txbx" type="primary"> |
|
{{ item.content }}--时间:{{ item.time }}--距离:{{ item.distance }}公里({{ |
|
item.items.handQuantity |
|
}}件) |
|
</el-text> --> |
|
</div> |
|
</el-scrollbar> |
|
</div> |
|
</div> |
|
<div style="display: flex; align-items: center; justify-content: center"> |
|
<el-button @click="checkgoto">确认(转配送)</el-button> |
|
<el-button icon="el-icon-circle-close" @click="back">返 回</el-button> |
|
</div> |
|
</div> |
|
</basic-container> |
|
</template> |
|
|
|
<script setup> |
|
import { useStore } from 'vuex'; |
|
import { getReservationAddr } from '@/api/distribution/distributionReservation'; |
|
import { getDictionaryBiz } from '@/api/system/dict'; |
|
import { onMounted, reactive, toRefs, watchEffect } from 'vue'; |
|
import { useRouter } from 'vue-router'; |
|
import { selectStockArticleAtlasInfo } from '@/api/distribution/distributionDeliveryList'; |
|
// import { getReservationAddr } from '@/api/distribution/distributionReservation'; |
|
let router = useRouter(); |
|
let useStores = useStore(); |
|
let details = reactive({ |
|
name: 'BmapDemo', |
|
item: null, |
|
error: null, |
|
addressList: [], |
|
reservationData: [], |
|
reservationIds: [], |
|
mapLoc: null, |
|
markersarr: [], |
|
lng: '', |
|
lat: '', |
|
datalists: [], |
|
abbreviation: '', |
|
drivingarrs: [], |
|
// datalist:[] |
|
}); |
|
onMounted(() => { |
|
initmap(); |
|
}); |
|
watchEffect(() => { |
|
console.log(router.currentRoute.value.query.id); |
|
details.item = router.currentRoute.value.query.id; |
|
if (!details.item) return; |
|
getReservationAddr(details.item).then(res => { |
|
// selectStockArticleAtlasInfo(details.item.id).then(res => { |
|
console.log(res.data.data); |
|
const data = res.data.data; |
|
// details.lng = res.data.data[0].jingdu; |
|
// details.lat = res.data.data[0].weidu; |
|
// details.abbreviation=res?.data?.data[0]?.warehouseName |
|
// console.log('res------------->', data); |
|
details.reservationData = data; |
|
details.mapLoc.remove(details.markersarr); |
|
details.drivingarrs.map(item => { |
|
if (item) { |
|
item.clear(); |
|
} |
|
}); |
|
details.drivingarrs = []; |
|
details.datalists = []; |
|
init(data); |
|
}); |
|
// setTimeout(() => { |
|
// init(); |
|
// }, 5000); |
|
}); |
|
function initmap() { |
|
|
|
AMap.plugin("AMap.Geocoder",function(){ |
|
details.mapLoc = new AMap.Map('container', { |
|
viewMode: '2D', // 默认使用 2D 模式 |
|
zoom: 9, //初始化地图层级 |
|
center: [104.293242, 30.582939], //初始化地图中心点 |
|
}); |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
function checkgoto() { |
|
let ids = []; |
|
details.datalists.map(item => { |
|
if (item.isck) { |
|
ids.push(item.items.id); |
|
} |
|
}); |
|
if (ids.length == 0) { |
|
return; |
|
} |
|
let stids = ids.join(','); |
|
router.push({ |
|
path: '/distribution/turndelivery/deliveryMarket', |
|
query: { |
|
id: stids, |
|
name: '市配计划', |
|
}, |
|
}); |
|
} |
|
function init(data) { |
|
// maplabel() |
|
console.log(details.mapLoc); |
|
let geocodess = []; |
|
var geocoder = new AMap.Geocoder({}); |
|
data.map(async (item, index) => { |
|
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), |
|
}); |
|
marker.setMap(details.mapLoc); |
|
marker.setLabel({ |
|
offset: new AMap.Pixel(0, -5), //设置文本标注偏移量 |
|
content: `<div class='info'>${item.warehouseName}</div>`, //设置文本标注内容 |
|
direction: 'top', //设置文本标注方位 |
|
}); |
|
details.markersarr.push(marker); |
|
await geocoder.getLocation(item.deliveryAddress, (status, 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); |
|
} |
|
} |
|
}); |
|
}); |
|
} |
|
//地图标点 |
|
function maker(geocodess) { |
|
geocodess.map(item => { |
|
var marker = new AMap.Marker({ |
|
map: details.mapLoc, |
|
position: item.pontion, |
|
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', |
|
anchor: 'bottom-center', |
|
offset: new AMap.Pixel(0, 0), |
|
}); |
|
marker.setMap(details.mapLoc); |
|
marker.setLabel({ |
|
offset: new AMap.Pixel(0, -5), //设置文本标注偏移量 |
|
content: `<div class='info'>${item.content}</div>`, //设置文本标注内容 |
|
direction: 'top', //设置文本标注方位 |
|
}); |
|
details.markersarr.push(marker); |
|
}); |
|
} |
|
//地图公里数和时间计算 |
|
function Driving(geocodess) { |
|
// 根据起终点经纬度规划驾车导航路线 |
|
geocodess.map(item => { |
|
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), |
|
function (status, result) { |
|
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 |
|
details.datalists.push(item); |
|
} else { |
|
console.log('获取驾车数据失败：' + result); |
|
} |
|
} |
|
); |
|
details.drivingarrs.push(driving); |
|
}); |
|
} |
|
//将秒数转化为多少小时多少分 |
|
function formatSeconds(seconds) { |
|
var hours = Math.floor(seconds / 3600); |
|
var minutes = Math.floor((seconds % 3600) / 60); |
|
var remainingSeconds = seconds % 60; |
|
var result = ''; |
|
if (hours > 0) { |
|
result += hours.toString().padStart(2, '0') + '小时'; |
|
} |
|
result += minutes.toString().padStart(2, '0') + '分钟'; |
|
return result; |
|
} |
|
function back() { |
|
useStores.commit('DEL_TAG_CURRENT'); |
|
router.back(-1); |
|
} |
|
const { datalists } = toRefs(details); |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.bmap { |
|
width: 100%; |
|
height: 500px; |
|
margin-bottom: 60px; |
|
/* border: 1px solid pink; */ |
|
} |
|
.mabxmp { |
|
display: flex; |
|
align-items: flex-start; |
|
> .mapbox { |
|
width: 50%; |
|
} |
|
> .maplists { |
|
width: 50%; |
|
height: 500px; |
|
padding: 0 20px; |
|
box-sizing: border-box; |
|
.mbx { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: flex-start; |
|
} |
|
} |
|
} |
|
.info { |
|
font-size: 10px !important; |
|
} |
|
.txbx { |
|
padding: 5px 0px; |
|
box-sizing: border-box; |
|
width: 100%; |
|
} |
|
</style>
|
|
|