diff --git a/src/components/AMap/src/AMapDesigner/index.vue b/src/components/AMap/src/AMapDesigner/index.vue index 998f909..71770ab 100644 --- a/src/components/AMap/src/AMapDesigner/index.vue +++ b/src/components/AMap/src/AMapDesigner/index.vue @@ -9,7 +9,7 @@ @point="handleOpenMapPoint" @zoomIn="handleMapZoomIn" @zoomOut="handleMapZoomOut" - @reset="handleMapReset" + @reset="mapReset" />
@@ -89,7 +89,7 @@ watch, toRefs, nextTick, - toRaw + toRaw, } from 'vue'; import { operatePanelColumns, MapPointType } from '../amap.data'; import hospital from '/@/assets/images/hospital.svg'; @@ -103,7 +103,7 @@ import MapPointModal from '../components/MapPointModal.vue'; import { propTypes } from '/@/utils/propTypes'; import { listHospital } from '/@/api/platform/common/controller/hospital'; - import { getCourierUserList } from '/@/api/platform/system/controller/user'; + import { getCourierUserList, listUser } from '/@/api/platform/system/controller/user'; import { listOrg } from '/@/api/platform/common/controller/org'; import { useUserStore } from '/@/store/modules/user'; import { split, divide, subtract, merge, isEmpty, cloneDeep, add } from 'lodash-es'; @@ -188,7 +188,7 @@ }, /** 面板(显示/隐藏)状态 */ toggleStatus: true, - /** 收样员集合收样员集合 */ + /** 收样员集合 */ courierUserList: [], /** 下级医院集合 */ hospitalList: [], @@ -250,42 +250,12 @@ onBeforeMount(() => { if (!instance) return; mapState.loading = true; - // 初始化地图组件所需数据 - listHospital({ size: 40, mapNotify: '1' }).then(res => { - mapState.hospitalList = res.data?.map(item => ({ - value: item.id, - label: item.name, - mapLat: item.mapLat, - mapLng: item.mapLng, - mapNotify: !!~~item.mapNotify, - mapOrientation: item.mapOrientation - })); - }); - getCourierUserList().then(res => { - mapState.courierUserList = res?.map(item => ({ - value: item.id, - label: item.nickName, - mapOrientation: item.mapOrientation, - // todo: 采用SSE服务器发生事件技术刷新安卓GPS位置 - mapLat: 28.295114, - mapLng: 112.913864 - })); - }); - listOrg({ size: 40 }).then(res => { - mapState.orgList = res.data?.map(item => ({ - value: item.id, - label: item.name, - mapOrientation: item.mapOrientation, - mapLat: item.mapLat, - mapLng: item.mapLng - })); - }); // 初始化高德地图组件 AMapLoader.load({ key: mapState.mapConfig.amapKey, version: '2.0', plugins: ['AMap.MarkerCluster', 'AMap.Driving'] - }).then(AMap => { + }).then(async AMap => { // 创建地图实例 map = new AMap.Map(instance.refs.mapview, mapState.mapConfig.options); map.plugin(['AMap.ToolBar', 'AMap.MapType', 'AMap.ControlBar', 'AMap.Scale'], () => { @@ -317,16 +287,15 @@ mapState.defaultZoom = subtract(divide(map.getZoom(),2), 1); }); - // 医检机构集群标记点 - orgMarkerCluster = new AMap.MarkerCluster(map, [], { + // 医院集群标记点 + hospitalMarkerCluster = new AMap.MarkerCluster(map, [], { gridSize: 80, maxZoom: 14, renderMarker(ctx) { const { marker, data } = ctx; if (Array.isArray(data) && data[0]) { - const { label, mapOrientation } = data[0]; - const content = ``; - marker.setContent(content); + const { label, mapOrientation, mapNotify } = data[0]; + let content = ``; marker.setLabel({ direction: 'bottom', // 设置文本标注偏移量 @@ -335,13 +304,20 @@ content: `
${label}
` }); marker.setOffset(new AMap.Pixel(-18, -10)); + if (mapNotify) { + content = ``; + } + marker.setContent(content); } }, renderClusterMarker(ctx) { const { clusterData, marker, count } = ctx; - const content = ``; + let content = ``; + if(clusterData.some(item => item.mapNotify)){ + content = ``; + } marker.setContent(content); - const label = count == 1 ? clusterData[0].label : `医检机构数量:${count}`; + const label = count == 1 ? clusterData[0].label : `医院数量:${count}`; marker.setLabel({ direction: 'bottom', // 设置文本标注偏移量 @@ -352,24 +328,21 @@ marker.setOffset(new AMap.Pixel(-18, -10)); } }); - orgMarkerCluster.on('click', ctx => { + hospitalMarkerCluster.on('click', ctx => { const { lnglat } = ctx; map.setZoomAndCenter(18, lnglat); }); - const orgPoints = mapState.orgList.map(org => ({ - lnglat: [org.mapLng, org.mapLat], ...org - })); - orgMarkerCluster?.setData(orgPoints); - // 小医院集群标记点 - hospitalMarkerCluster = new AMap.MarkerCluster(map, [], { + // 医检机构集群标记点 + orgMarkerCluster = new AMap.MarkerCluster(map, [], { gridSize: 80, maxZoom: 14, renderMarker(ctx) { const { marker, data } = ctx; if (Array.isArray(data) && data[0]) { - const { label, mapOrientation, mapNotify } = data[0]; - let content = ``; + const { label, mapOrientation } = data[0]; + const content = ``; + marker.setContent(content); marker.setLabel({ direction: 'bottom', // 设置文本标注偏移量 @@ -378,20 +351,13 @@ content: `
${label}
` }); marker.setOffset(new AMap.Pixel(-18, -10)); - if (mapNotify) { - content = ``; - } - marker.setContent(content); } }, renderClusterMarker(ctx) { const { clusterData, marker, count } = ctx; - let content = ``; - if(clusterData.some(item => item.mapNotify)){ - content = ``; - } + const content = ``; marker.setContent(content); - const label = count == 1 ? clusterData[0].label : `医院数量:${count}`; + const label = count == 1 ? clusterData[0].label : `医检机构数量:${count}`; marker.setLabel({ direction: 'bottom', // 设置文本标注偏移量 @@ -402,14 +368,10 @@ marker.setOffset(new AMap.Pixel(-18, -10)); } }); - hospitalMarkerCluster.on('click', ctx => { + orgMarkerCluster.on('click', ctx => { const { lnglat } = ctx; map.setZoomAndCenter(18, lnglat); }); - const hospitalPoints = mapState.hospitalList.map(hospital => ({ - lnglat: [hospital.mapLng, hospital.mapLat], ...hospital - })); - hospitalMarkerCluster?.setData(hospitalPoints); // 收样员集群标记点 courierUserMarkerCluster = new AMap.MarkerCluster(map, [], { @@ -450,10 +412,6 @@ const { lnglat } = ctx; map.setZoomAndCenter(18, lnglat); }); - const courierUserPoints = mapState.courierUserList.map(courierUser => ({ - lnglat: [courierUser.mapLng, courierUser.mapLat], ...courierUser - })); - courierUserMarkerCluster?.setData(courierUserPoints); // 扫描收样员园形范围 scanCourierUserCircleRange = new AMap.Circle({ @@ -475,13 +433,39 @@ panel: instance.refs.mapPanel }); + // 初始化地图组件所需数据 + const hospitalList = await listHospital({ size: 40, mapNotify: '1' }); + mapState.hospitalList = hospitalList.data?.map(item => ({ + value: item.id, + label: item.name, + mapLat: item.mapLat, + mapLng: item.mapLng, + mapNotify: !!~~item.mapNotify, + mapOrientation: item.mapOrientation + })); + const hospitalPoints = mapState.hospitalList.map(hospital => ({ + lnglat: [hospital.mapLng, hospital.mapLat], ...hospital + })); + hospitalMarkerCluster?.setData(hospitalPoints); + const orgList = await listOrg({ size: 40 }); + mapState.orgList = orgList.data?.map(item => ({ + value: item.id, + label: item.name, + mapOrientation: item.mapOrientation, + mapLat: item.mapLat, + mapLng: item.mapLng + })); + const orgPoints = mapState.orgList.map(org => ({ + lnglat: [org.mapLng, org.mapLat], ...org + })); + orgMarkerCluster?.setData(orgPoints); + // 加载完毕 complete(); }).catch(error => { mapState.loading = false; throw error; }); - }); onUnmounted(() => { @@ -498,6 +482,7 @@ mapState.loading = false; mapState.first = true; setMapDataJson(mapProps.options); + handleSetCourierUserList(); }); } } @@ -512,8 +497,14 @@ watch(toRefs(mapProps).options, (newValue) => { if (mapState.first) { setMapDataJson(newValue); + handleSetCourierUserList(); } }, { deep: true }); + watch([() => toRefs(mapProps).isEdit, () => mapState.mapData.courierUserId], () => { + if (mapState.first) { + handleSetCourierUserList(); + } + }); watch([() => mapState.mapData.sendOrderId, () => mapState.mapData.sendOrderTaskType], ([sendOrderIdValue,sendOrderTaskTypeValue], [sendOrderIdOldValue, sendOrderTaskTypeOldValue]) => { if (!sendOrderIdValue || !sendOrderTaskTypeValue) return; @@ -569,6 +560,37 @@ } } + /** 处理设置收样员集合 */ + function handleSetCourierUserList() { + nextTick(async ()=>{ + // 修改时查询当前快递员,只需要渲染自己的收样图标 + mapProps.isEdit ? await listUser({ userType: '1', id: mapState.mapData.courierUserId }).then(res => { + mapState.courierUserList = res.data?.map(item => ({ + value: item.id, + label: item.nickName, + mapOrientation: item.mapOrientation, + // todo: 采用SSE服务器发生事件技术刷新安卓GPS位置 + mapLat: 28.295114, + mapLng: 112.913864 + })); + // 新增时查询没有地图任务的快递员,渲染能创建地图的快递员收样图标 + }) : await getCourierUserList().then(res => { + mapState.courierUserList = res?.map(item => ({ + value: item.id, + label: item.nickName, + mapOrientation: item.mapOrientation, + // todo: 采用SSE服务器发生事件技术刷新安卓GPS位置 + mapLat: 28.295114, + mapLng: 112.913864 + })); + }); + const courierUserPoints = mapState.courierUserList.map(courierUser => ({ + lnglat: [courierUser.mapLng, courierUser.mapLat], ...courierUser + })); + courierUserMarkerCluster?.setData(courierUserPoints); + }); + } + /** 处理收样员搜索 */ function handleCourierUserSearch(hospitalId: string) { // 查找当前下级医院数据 @@ -628,7 +650,6 @@ duration: 2 }); } else mapTaskOpenModal(true, { mapData: mapState.mapData, options: { - courierUserList: mapState.courierUserList, hospitalList: mapState.hospitalList, orgList: mapState.orgList }}); @@ -669,7 +690,7 @@ options = null; } } - handleMapReset(); + mapReset(); nextTick(() => { mapState.mapData = cloneDeep(merge(defaultMapData(), options)); // 处理数据格式转换 @@ -810,7 +831,6 @@ item?.mapTaskPreset?.forEach(childItem => { const childHospital = childItem.orginPresetId && mapState.hospitalList.find(e => e.value == childItem.orginPresetId), childOrg = childItem.destinationPresetId && mapState.orgList.find(e => e.value == childItem.destinationPresetId); - childItem.courierUserId = mapData.courierUserId; childHospital && Object.assign(childItem,{ orginPresetName: childHospital.label, orginPresetLat: childHospital.mapLat, @@ -830,7 +850,7 @@ } /** 处理地图重置 */ - function handleMapReset() { + function mapReset() { nextTick(()=> { // 清除地图 map?.resize(); @@ -858,7 +878,8 @@ drawMapNavigate, getMapDataJson, setMapDataJson, - formClearValidate + formClearValidate, + mapReset });