|
|
@ -111,7 +111,7 @@ |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<script lang="ts" setup> |
|
|
|
<script lang="ts" setup> |
|
|
|
import AMapLoader from '@amap/amap-jsapi-loader'; |
|
|
|
import AMapLoader from '@amap/amap-jsapi-loader'; |
|
|
|
import { reactive, watchEffect, getCurrentInstance, onBeforeMount, onUnmounted, ref } from 'vue'; |
|
|
|
import {reactive, watchEffect, getCurrentInstance, onBeforeMount, onUnmounted, ref, PropType} from 'vue'; |
|
|
|
import { operatePanelColumns, MapData, MapPointType } from '../amap.data'; |
|
|
|
import { operatePanelColumns, MapData, MapPointType } from '../amap.data'; |
|
|
|
import hospital from '/@/assets/images/hospital.svg'; |
|
|
|
import hospital from '/@/assets/images/hospital.svg'; |
|
|
|
import medicalKit from '/@/assets/images/medical-kit.svg'; |
|
|
|
import medicalKit from '/@/assets/images/medical-kit.svg'; |
|
|
@ -129,12 +129,13 @@ |
|
|
|
import AButton from '/@/components/Button/src/BasicButton.vue'; |
|
|
|
import AButton from '/@/components/Button/src/BasicButton.vue'; |
|
|
|
import { Icon } from '/@/components/Icon'; |
|
|
|
import { Icon } from '/@/components/Icon'; |
|
|
|
import { useUserStore } from '/@/store/modules/user'; |
|
|
|
import { useUserStore } from '/@/store/modules/user'; |
|
|
|
import { split, divide, subtract } from 'lodash-es'; |
|
|
|
import { split, divide, subtract, merge, isEmpty } from 'lodash-es'; |
|
|
|
import componentSetting from '/@/settings/componentSetting'; |
|
|
|
import componentSetting from '/@/settings/componentSetting'; |
|
|
|
import { BasicUpload } from '/@/components/Upload'; |
|
|
|
import { BasicUpload } from '/@/components/Upload'; |
|
|
|
import { commonUpload } from '/@/api/platform/core/controller/upload'; |
|
|
|
import { commonUpload } from '/@/api/platform/core/controller/upload'; |
|
|
|
import { useMessage } from '/@/hooks/web/useMessage'; |
|
|
|
import { useMessage } from '/@/hooks/web/useMessage'; |
|
|
|
import { listMapTaskPreset } from '/@/api/platform/common/controller/mapTaskPreset'; |
|
|
|
import { listMapTaskPreset } from '/@/api/platform/common/controller/mapTaskPreset'; |
|
|
|
|
|
|
|
import { getMapLogistic } from '/@/api/platform/common/controller/mapLogistic'; |
|
|
|
|
|
|
|
|
|
|
|
/** 类型规范统一声明定义区域 */ |
|
|
|
/** 类型规范统一声明定义区域 */ |
|
|
|
interface MapState { |
|
|
|
interface MapState { |
|
|
@ -155,6 +156,13 @@ |
|
|
|
|
|
|
|
|
|
|
|
const mapProps = defineProps({ |
|
|
|
const mapProps = defineProps({ |
|
|
|
mapId: propTypes.string.def(''), |
|
|
|
mapId: propTypes.string.def(''), |
|
|
|
|
|
|
|
mapPoint: { |
|
|
|
|
|
|
|
type: Array as PropType<{ |
|
|
|
|
|
|
|
lng: number | string; |
|
|
|
|
|
|
|
lat: number | string; |
|
|
|
|
|
|
|
}[]>, |
|
|
|
|
|
|
|
default: () => [], |
|
|
|
|
|
|
|
}, |
|
|
|
sidebarControl: propTypes.bool.def(true) |
|
|
|
sidebarControl: propTypes.bool.def(true) |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
@ -361,9 +369,9 @@ |
|
|
|
const { lnglat } = ctx; |
|
|
|
const { lnglat } = ctx; |
|
|
|
map.setZoomAndCenter(18, lnglat); |
|
|
|
map.setZoomAndCenter(18, lnglat); |
|
|
|
}); |
|
|
|
}); |
|
|
|
const orgPoints = mapState.orgList.map((v: any) => ({ |
|
|
|
const orgPoints = mapState.orgList.map((e: any) => ({ |
|
|
|
lnglat: [v.mapLng, v.mapLat], |
|
|
|
lnglat: [e.mapLng, e.mapLat], |
|
|
|
...v |
|
|
|
...e |
|
|
|
})); |
|
|
|
})); |
|
|
|
orgMarkerCluster?.setData(orgPoints); |
|
|
|
orgMarkerCluster?.setData(orgPoints); |
|
|
|
|
|
|
|
|
|
|
@ -412,9 +420,9 @@ |
|
|
|
const { lnglat } = ctx; |
|
|
|
const { lnglat } = ctx; |
|
|
|
map.setZoomAndCenter(18, lnglat); |
|
|
|
map.setZoomAndCenter(18, lnglat); |
|
|
|
}); |
|
|
|
}); |
|
|
|
const hospitalPoints = mapState.hospitalList.map((v: any) => ({ |
|
|
|
const hospitalPoints = mapState.hospitalList.map((e: any) => ({ |
|
|
|
lnglat: [v.mapLng, v.mapLat], |
|
|
|
lnglat: [e.mapLng, e.mapLat], |
|
|
|
...v |
|
|
|
...e |
|
|
|
})); |
|
|
|
})); |
|
|
|
hospitalMarkerCluster?.setData(hospitalPoints); |
|
|
|
hospitalMarkerCluster?.setData(hospitalPoints); |
|
|
|
|
|
|
|
|
|
|
@ -457,9 +465,9 @@ |
|
|
|
const { lnglat } = ctx; |
|
|
|
const { lnglat } = ctx; |
|
|
|
map.setZoomAndCenter(18, lnglat); |
|
|
|
map.setZoomAndCenter(18, lnglat); |
|
|
|
}); |
|
|
|
}); |
|
|
|
const courierUserPoints = mapState.courierUserList.map((v: any) => ({ |
|
|
|
const courierUserPoints = mapState.courierUserList.map((e: any) => ({ |
|
|
|
lnglat: [v.mapLng, v.mapLat], |
|
|
|
lnglat: [e.mapLng, e.mapLat], |
|
|
|
...v |
|
|
|
...e |
|
|
|
})); |
|
|
|
})); |
|
|
|
courierUserMarkerCluster?.setData(courierUserPoints); |
|
|
|
courierUserMarkerCluster?.setData(courierUserPoints); |
|
|
|
|
|
|
|
|
|
|
@ -483,18 +491,39 @@ |
|
|
|
panel: instance.refs.mapPanel |
|
|
|
panel: instance.refs.mapPanel |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
// todo: 修改时候才能加载 |
|
|
|
// 加载地图数据,并且绘制路线 |
|
|
|
// 根据起终点经纬度规划驾车导航路线 |
|
|
|
handleMapReset(); |
|
|
|
driving.search(new AMap.LngLat(112.913864, 28.295114), new AMap.LngLat(112.918119, 28.282891), { |
|
|
|
if (mapProps.mapId) { |
|
|
|
waypoints:[new AMap.LngLat(112.919165, 28.289924)] |
|
|
|
getMapLogistic(mapProps.mapId).then(mapLogistic => { |
|
|
|
}, function(status, result) { |
|
|
|
if (!isEmpty(mapLogistic)) { |
|
|
|
if (status === 'complete') { |
|
|
|
mapState.mapData = merge(mapState.mapData, mapLogistic); |
|
|
|
console.log('绘制驾车路线完成'); |
|
|
|
const lngLatData = mapState.mapData.mapLogisticPoint.map(item => new AMap.LngLat(item.lng, item.lat)); |
|
|
|
} else { |
|
|
|
const destination = lngLatData.pop(); |
|
|
|
console.error('获取驾车数据失败:' + result); |
|
|
|
destination && driving.search(new AMap.LngLat(mapState.mapData.courierLng, mapState.mapData.courierLat), destination, { |
|
|
|
} |
|
|
|
waypoints: lngLatData |
|
|
|
}); |
|
|
|
}, function(status, result) { |
|
|
|
|
|
|
|
if (status === 'complete') { |
|
|
|
|
|
|
|
console.log('绘制地图路线完成'); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
console.error('获取地图数据失败:' + result); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
// 绘制手动设置的地图路线,前提是没有传地图ID |
|
|
|
|
|
|
|
const lngLatData = mapProps.mapPoint.map(item => new AMap.LngLat(item.lng, item.lat)); |
|
|
|
|
|
|
|
const destination = lngLatData.pop(); |
|
|
|
|
|
|
|
destination && driving.search(new AMap.LngLat(mapState.mapData.courierLng, mapState.mapData.courierLat), destination, { |
|
|
|
|
|
|
|
waypoints: lngLatData |
|
|
|
|
|
|
|
}, function(status, result) { |
|
|
|
|
|
|
|
if (status === 'complete') { |
|
|
|
|
|
|
|
console.log('绘制地图路线完成'); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
console.error('获取地图数据失败:' + result); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 加载完毕 |
|
|
|
// 加载完毕 |
|
|
|
complete(); |
|
|
|
complete(); |
|
|
@ -662,9 +691,9 @@ |
|
|
|
waypoints: lngLatData |
|
|
|
waypoints: lngLatData |
|
|
|
}, function(status, result) { |
|
|
|
}, function(status, result) { |
|
|
|
if (status === 'complete') { |
|
|
|
if (status === 'complete') { |
|
|
|
console.log('绘制驾车路线完成'); |
|
|
|
console.log('绘制地图路线完成'); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
console.error('获取驾车数据失败:' + result); |
|
|
|
console.error('获取地图数据失败:' + result); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
@ -682,7 +711,6 @@ |
|
|
|
/** 处理地图重置 */ |
|
|
|
/** 处理地图重置 */ |
|
|
|
function handleMapReset() { |
|
|
|
function handleMapReset() { |
|
|
|
// 清除地图 |
|
|
|
// 清除地图 |
|
|
|
map.resize(); |
|
|
|
|
|
|
|
map.clearMap(); |
|
|
|
map.clearMap(); |
|
|
|
// 清除表单数据 |
|
|
|
// 清除表单数据 |
|
|
|
formElRef.value.resetFields(); |
|
|
|
formElRef.value.resetFields(); |
|
|
|