|
|
|
|
@ -1,13 +1,13 @@
|
|
|
|
|
<template> |
|
|
|
|
<basic-container> |
|
|
|
|
<div class="avue-crud"> |
|
|
|
|
<basic-container > |
|
|
|
|
<div class="avue-crud" v-loading="Dtloading" element-loading-text="数据正在加载中..."> |
|
|
|
|
<div class="mabxmp"> |
|
|
|
|
<div class="mapbox"> |
|
|
|
|
<div class="bmap" id="container"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="maplists"> |
|
|
|
|
<el-scrollbar> |
|
|
|
|
<div class="mbx"> |
|
|
|
|
<div class="mbx" > |
|
|
|
|
<el-checkbox |
|
|
|
|
v-for="item in datalists" |
|
|
|
|
v-model="item.isck" |
|
|
|
|
@ -17,20 +17,16 @@
|
|
|
|
|
size="large" |
|
|
|
|
@change="ListChange" |
|
|
|
|
/> |
|
|
|
|
<!-- <el-text class="mx-1 txbx" type="primary"> |
|
|
|
|
{{ item.content }}--时间:{{ item.time }}--距离:{{ item.distance }}公里({{ |
|
|
|
|
item.items.handQuantity |
|
|
|
|
}}件) |
|
|
|
|
</el-text> --> |
|
|
|
|
</div> |
|
|
|
|
</el-scrollbar> |
|
|
|
|
<span class="txbxSpan">当前总条数:{{datalists.length}}  当前勾选条数:{{Checkthebox.length}}</span> |
|
|
|
|
</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> |
|
|
|
|
</div> |
|
|
|
|
</basic-container> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
@ -40,11 +36,10 @@ 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 { ElMessage } from 'element-plus'; |
|
|
|
|
// import { getReservationAddr } from '@/api/distribution/distributionReservation'; |
|
|
|
|
let router = useRouter(); |
|
|
|
|
let useStores = useStore(); |
|
|
|
|
const Dtloading = ref(true); |
|
|
|
|
let details = reactive({ |
|
|
|
|
name: 'BmapDemo', |
|
|
|
|
item: null, |
|
|
|
|
@ -61,6 +56,7 @@ let details = reactive({
|
|
|
|
|
drivingarrs: [], |
|
|
|
|
// datalist:[] |
|
|
|
|
}); |
|
|
|
|
const Checkthebox=ref([]); |
|
|
|
|
onMounted(() => { |
|
|
|
|
initmap(); |
|
|
|
|
}); |
|
|
|
|
@ -69,14 +65,10 @@ watchEffect(() => {
|
|
|
|
|
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); |
|
|
|
|
console.log(res.data.data,'参数接受的'); |
|
|
|
|
Checkthebox.value = 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.reservationData = res.data.data; |
|
|
|
|
details.mapLoc.remove(details.markersarr); |
|
|
|
|
details.drivingarrs.map(item => { |
|
|
|
|
if (item) { |
|
|
|
|
@ -84,12 +76,10 @@ watchEffect(() => {
|
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
details.drivingarrs = []; |
|
|
|
|
details.datalists = []; |
|
|
|
|
init(data); |
|
|
|
|
// details.datalists = []; |
|
|
|
|
init(res.data.data); |
|
|
|
|
Dtloading.value=false |
|
|
|
|
}); |
|
|
|
|
// setTimeout(() => { |
|
|
|
|
// init(); |
|
|
|
|
// }, 5000); |
|
|
|
|
}); |
|
|
|
|
function initmap() { |
|
|
|
|
AMap.plugin('AMap.Geocoder', function () { |
|
|
|
|
@ -123,13 +113,14 @@ function checkgoto() {
|
|
|
|
|
useStores.commit('DEL_TAG_CURRENT'); |
|
|
|
|
} |
|
|
|
|
async function init(data) { |
|
|
|
|
await details.mapLoc.clearMap();//重置地图标记 |
|
|
|
|
await details.mapLoc.clearMap(); //重置地图标记 |
|
|
|
|
// maplabel() |
|
|
|
|
console.log(details.mapLoc); |
|
|
|
|
let geocodess = []; |
|
|
|
|
var geocoder = new AMap.Geocoder({}); |
|
|
|
|
data.map(async (item, index) => { |
|
|
|
|
if (!item.jingdu || !item.weidu) { |
|
|
|
|
console.log(item.jingdu); |
|
|
|
|
return ElMessage.warning('地址有问题'); |
|
|
|
|
} |
|
|
|
|
var marker = new AMap.Marker({ |
|
|
|
|
@ -139,15 +130,17 @@ async function init(data) {
|
|
|
|
|
anchor: 'bottom-center', |
|
|
|
|
offset: new AMap.Pixel(0, 0), |
|
|
|
|
}); |
|
|
|
|
await marker.setMap(details.mapLoc); |
|
|
|
|
await marker.setLabel({ |
|
|
|
|
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=[]//修改过 |
|
|
|
|
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([ |
|
|
|
|
@ -168,25 +161,26 @@ async function init(data) {
|
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
//地图标点 |
|
|
|
|
function maker (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); |
|
|
|
|
if (item.pontion) { |
|
|
|
|
console.log(item, '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); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
//地图公里数和时间计算 |
|
|
|
|
// 假设 seenIds 在适当的作用域中已经初始化 |
|
|
|
|
@ -208,8 +202,8 @@ function Driving(geocodess) {
|
|
|
|
|
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)) { |
|
|
|
|
// 在执行 push 之前检查 seenIds |
|
|
|
|
if (!seenIds.hasOwnProperty(item.items.id)) { |
|
|
|
|
item.time = formatSeconds(result.routes[0].time); |
|
|
|
|
item.distance = result.routes[0].distance / 1000; |
|
|
|
|
item.isck = true; |
|
|
|
|
@ -242,14 +236,14 @@ function back() {
|
|
|
|
|
router.back(-1); |
|
|
|
|
} |
|
|
|
|
const { datalists } = toRefs(details); |
|
|
|
|
const ListChange= (val)=>{ |
|
|
|
|
console.log(details.datalists,'最新的数据'); |
|
|
|
|
let data = details.datalists |
|
|
|
|
.filter(item => item.isck === true) |
|
|
|
|
.map(item => item.items); |
|
|
|
|
init(data) |
|
|
|
|
console.log(details.datalists,'数据'); |
|
|
|
|
} |
|
|
|
|
const ListChange = val => { |
|
|
|
|
console.log(val,'val===='); |
|
|
|
|
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, '数据'); |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
@ -285,4 +279,9 @@ console.log(details.datalists,'数据');
|
|
|
|
|
box-sizing: border-box; |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
.txbxSpan{ |
|
|
|
|
color: #d3832a; |
|
|
|
|
border-bottom: 1px solid; |
|
|
|
|
padding: 0 4px; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
