9 changed files with 435 additions and 368 deletions
@ -1,226 +1,226 @@
|
||||
<template> |
||||
<basic-container> |
||||
<div class="avue-crud"> |
||||
<div class="maboxviews"> |
||||
<div class="bmap" id="container"></div> |
||||
<div class="checks"> |
||||
<!-- @change="handleCheckedCitiesChange"--> |
||||
<el-checkbox-group v-model="reservationIds"> |
||||
<el-col v-for="(item, index) in reservationData"> |
||||
<el-checkbox :label="item.id" :key="item.id"> |
||||
<div class="spanstime"> |
||||
{{ item.consignee }} {{ item.deliveryAddress }} {{ item.deliveryPhone }} |
||||
</div> |
||||
</el-checkbox> |
||||
</el-col> |
||||
</el-checkbox-group> |
||||
<div class="mabxmp"> |
||||
<div class="mapbox"> |
||||
<div class="bmap" id="container"></div> |
||||
</div> |
||||
<div class="maplists"> |
||||
<el-scrollbar> |
||||
<div class="mbx"> |
||||
<el-text v-for="item in datalists" class="mx-1 txbx" type="primary"> |
||||
{{ item.content }}--时间:{{ item.time }}--距离:{{ item.distance }}公里({{ |
||||
item.items.handQuantity |
||||
}}件) |
||||
</el-text> |
||||
</div> |
||||
</el-scrollbar> |
||||
</div> |
||||
</div> |
||||
<div style="margin-left: 40%; margin-top: 5%; float: bottom"> |
||||
<el-button type="primary" icon="el-icon-circle-close" @click="checkgoto" v-if="type" |
||||
>确认(转配送页面)</el-button |
||||
> |
||||
<div style="display: flex; align-items: center; justify-content: center"> |
||||
<el-button icon="el-icon-circle-close" @click="back">返 回</el-button> |
||||
</div> |
||||
</div> |
||||
</basic-container> |
||||
</template> |
||||
|
||||
<script> |
||||
<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 { ref } from 'vue' |
||||
export default { |
||||
data() { |
||||
return { |
||||
type: true, |
||||
}; |
||||
}, |
||||
|
||||
mounted() { |
||||
let router = useRouter(); |
||||
let type = router.currentRoute.value.query.type; |
||||
console.log('router>>>>>>>>', router.currentRoute.value.query.type); |
||||
this.type = true; |
||||
if (type == '2') { |
||||
this.type = false; |
||||
} |
||||
}, |
||||
setup() { |
||||
let router = useRouter(); |
||||
const useStores=useStore() |
||||
let details = reactive({ |
||||
name: 'BmapDemo', |
||||
loading: true, |
||||
ids: null, |
||||
error: null, |
||||
addressList: [], |
||||
reservationData: [], |
||||
reservationIds: [], |
||||
mapLoc: null, |
||||
markersarr: [], |
||||
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; |
||||
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(); |
||||
} |
||||
}); |
||||
onMounted(() => { |
||||
details.ids = router.currentRoute.value.query.id; |
||||
initMap(router.currentRoute.value.query.id); |
||||
init(); |
||||
// setTimeout(()=>{ |
||||
// details.mapLoc.clearOverlays(); |
||||
|
||||
// },9500) |
||||
details.drivingarrs = []; |
||||
details.datalists = []; |
||||
init(data); |
||||
}); |
||||
// setTimeout(() => { |
||||
// init(); |
||||
// }, 5000); |
||||
}); |
||||
function initmap() { |
||||
details.mapLoc = new AMap.Map('container', { |
||||
viewMode: '2D', // 默认使用 2D 模式 |
||||
zoom: 9, //初始化地图层级 |
||||
center: [104.293242, 30.582939], //初始化地图中心点 |
||||
}); |
||||
} |
||||
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), |
||||
}); |
||||
watch( |
||||
() => [details.reservationIds, details.reservationData], |
||||
(newValue, oldValue) => { |
||||
console.log('watch 已触发', newValue); |
||||
if (details.mapLoc) { |
||||
details.mapLoc.remove(details.markersarr); |
||||
details.markersarr=[] |
||||
} |
||||
details.reservationIds.map((item, index) => { |
||||
details.reservationData.map(ite => { |
||||
if (item == ite.id) { |
||||
console.log(ite); |
||||
maplabel(ite, index); |
||||
} |
||||
}); |
||||
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, |
||||
}); |
||||
}, |
||||
{ |
||||
immediate: true, |
||||
if (index + 1 == data.length) { |
||||
maker(geocodess); |
||||
Driving(geocodess); |
||||
} |
||||
} |
||||
); |
||||
// watchEffect(() => { |
||||
// if(details.mapLoc){ |
||||
// details.mapLoc.remove(details.markersarr) |
||||
// } |
||||
// details.reservationIds.map((item, index) => { |
||||
// details.reservationData.map(ite => { |
||||
// if (item == ite.id) { |
||||
// console.log(ite); |
||||
// maplabel(ite, index); |
||||
// } |
||||
// }); |
||||
// }); |
||||
// // details.reservationData |
||||
// }); |
||||
function init() { |
||||
details.mapLoc = new AMap.Map('container', { |
||||
viewMode: '2D', // 默认使用 2D 模式 |
||||
zoom: 9, //初始化地图层级 |
||||
center: [104.293242, 30.582939], //初始化地图中心点 |
||||
}); |
||||
} |
||||
function maplabel(item, index) { |
||||
console.log(item); |
||||
var geocoder = new AMap.Geocoder({}); |
||||
console.log(item.deliveryAddress); |
||||
geocoder.getLocation(item.deliveryAddress, (status, result) => { |
||||
if (status === 'complete' && result.info === 'OK') { |
||||
// result中对应详细地理坐标信息 |
||||
console.log(result.geocodes[0].location); |
||||
var marker = new AMap.Marker({ |
||||
map: details.mapLoc, |
||||
position: result.geocodes[0].location, |
||||
offset: new AMap.Pixel(0, 0), |
||||
}); |
||||
marker.setMap(details.mapLoc); |
||||
marker.setLabel({ |
||||
offset: new AMap.Pixel(0, -5), //设置文本标注偏移量 |
||||
content: `<div class='info'>${item.consignee}</div>`, //设置文本标注内容 |
||||
direction: 'top', //设置文本标注方位 |
||||
}); |
||||
details.markersarr.push(marker); |
||||
}); |
||||
}); |
||||
} |
||||
//地图标点 |
||||
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.distance=result.routes[0].distance/1000 |
||||
details.datalists.push(item); |
||||
} else { |
||||
console.log('获取驾车数据失败：' + result); |
||||
} |
||||
}); |
||||
} |
||||
// init() |
||||
function initMap(ids) { |
||||
if (ids.length > 1) { |
||||
ids.split(','); |
||||
} |
||||
details.loading = true; |
||||
getReservationAddr(ids).then(res => { |
||||
res.data.data.records.forEach(item => { |
||||
details.ids.split(',').forEach(id => { |
||||
if (item.id == id) { |
||||
details.reservationIds.push(item.id); |
||||
} |
||||
}); |
||||
}); |
||||
console.log(details.reservationIds); |
||||
details.reservationData = res.data.data.records; |
||||
|
||||
details.addressList = res.data.data.records; |
||||
}); |
||||
details.loading = false; |
||||
} |
||||
function checkgoto() { |
||||
console.log('>>>>>>>>>>>', details.reservationIds); |
||||
let ids = details.reservationIds.join(','); |
||||
router.push({ |
||||
path: '/distribution/turndelivery/deliveryMarket', |
||||
query: { |
||||
id: ids, |
||||
name: '市配计划', |
||||
}, |
||||
}); |
||||
} |
||||
function back() { |
||||
useStores.commit('DEL_TAG_CURRENT'); |
||||
router.back(-1) |
||||
} |
||||
return { |
||||
back, |
||||
checkgoto, |
||||
init, |
||||
initMap, |
||||
...toRefs(details), |
||||
}; |
||||
}, |
||||
}; |
||||
); |
||||
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> |
||||
.maboxviews { |
||||
.bmap { |
||||
width: 100%; |
||||
height: 500px; |
||||
margin-bottom: 60px; |
||||
/* border: 1px solid pink; */ |
||||
} |
||||
.mabxmp { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
justify-content: center; |
||||
.spanstime { |
||||
word-wrap: break-word !important; |
||||
word-break: break-all !important; |
||||
overflow-wrap: break-word !important; |
||||
font-size: 12px !important; |
||||
> .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; |
||||
} |
||||
} |
||||
} |
||||
// .el-checkbox__input { |
||||
// display: inline-grid; |
||||
// white-space: pre-line; |
||||
// word-wrap: break-word; |
||||
// overflow: hidden; |
||||
// line-height: 20px; |
||||
// } |
||||
::v-deep .el-checkbox__label { |
||||
width: 95%; |
||||
word-break: break-all; |
||||
word-wrap: break-word; |
||||
white-space: pre-wrap !important; |
||||
} |
||||
.el-checkbox-option { |
||||
word-wrap: break-word; |
||||
word-break: break-all; |
||||
.info { |
||||
font-size: 10px !important; |
||||
} |
||||
.checks { |
||||
width: 48%; |
||||
.txbx { |
||||
padding: 5px 0px; |
||||
box-sizing: border-box; |
||||
margin-left: 20px; |
||||
} |
||||
.bmap { |
||||
width: 50%; |
||||
height: 600px; |
||||
/* border: 1px solid pink; */ |
||||
width: 100%; |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue