logpm_page/src/views/distribution/reservation/atlas.vue

<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>