kanglai
/
kicc-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

🅰 地图设计器初步完稿

master
wangxiang 3 years ago
parent
7f766fa283
commit
daf839b17a
4 changed files with 106 additions and 82 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 171
      src/components/AMap/src/AMapDesigner/index.vue
  2. 3
      src/components/AMap/src/components/MapTaskModal.vue
  3. 2
      src/components/AMap/src/components/MapTaskPresetModal.vue
  4. 12
      src/views/common/mapLogistic/MapLogisticModal.vue

171
src/components/AMap/src/AMapDesigner/index.vue
Unescape View File

@ -9,7 +9,7 @@
@point="handleOpenMapPoint" @point="handleOpenMapPoint"
@zoomIn="handleMapZoomIn" @zoomIn="handleMapZoomIn"
@zoomOut="handleMapZoomOut" @zoomOut="handleMapZoomOut"
@reset="handleMapReset" @reset="mapReset"
/> />
<div id="mapview" ref="mapview"> <div id="mapview" ref="mapview">
<div v-show="navigatePanel" id="mapPanel" ref="mapPanel"/> <div v-show="navigatePanel" id="mapPanel" ref="mapPanel"/>
@ -89,7 +89,7 @@
watch, watch,
toRefs, toRefs,
nextTick, nextTick,
toRaw toRaw,
} from 'vue'; } from 'vue';
import { operatePanelColumns, MapPointType } from '../amap.data'; import { operatePanelColumns, MapPointType } from '../amap.data';
import hospital from '/@/assets/images/hospital.svg'; import hospital from '/@/assets/images/hospital.svg';
@ -103,7 +103,7 @@
import MapPointModal from '../components/MapPointModal.vue'; import MapPointModal from '../components/MapPointModal.vue';
import { propTypes } from '/@/utils/propTypes'; import { propTypes } from '/@/utils/propTypes';
import { listHospital } from '/@/api/platform/common/controller/hospital'; 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 { listOrg } from '/@/api/platform/common/controller/org';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
import { split, divide, subtract, merge, isEmpty, cloneDeep, add } from 'lodash-es'; import { split, divide, subtract, merge, isEmpty, cloneDeep, add } from 'lodash-es';
@ -188,7 +188,7 @@
}, },
/** 面板(显示/隐藏)状态 */ /** 面板(显示/隐藏)状态 */
toggleStatus: true, toggleStatus: true,
/** 收样员集合收样员集合 */ /** 收样员集合 */
courierUserList: [], courierUserList: [],
/** 下级医院集合 */ /** 下级医院集合 */
hospitalList: [], hospitalList: [],
@ -250,42 +250,12 @@
onBeforeMount(() => { onBeforeMount(() => {
if (!instance) return; if (!instance) return;
mapState.loading = true; 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({ AMapLoader.load({
key: mapState.mapConfig.amapKey, key: mapState.mapConfig.amapKey,
version: '2.0', version: '2.0',
plugins: ['AMap.MarkerCluster', 'AMap.Driving'] plugins: ['AMap.MarkerCluster', 'AMap.Driving']
}).then(AMap => { }).then(async AMap => {
// 创建地图实例 // 创建地图实例
map = new AMap.Map(instance.refs.mapview, mapState.mapConfig.options); map = new AMap.Map(instance.refs.mapview, mapState.mapConfig.options);
map.plugin(['AMap.ToolBar', 'AMap.MapType', 'AMap.ControlBar', 'AMap.Scale'], () => { map.plugin(['AMap.ToolBar', 'AMap.MapType', 'AMap.ControlBar', 'AMap.Scale'], () => {
@ -317,16 +287,15 @@
mapState.defaultZoom = subtract(divide(map.getZoom(),2), 1); mapState.defaultZoom = subtract(divide(map.getZoom(),2), 1);
}); });
// 医检机构集群标记点 // 医院集群标记点
orgMarkerCluster = new AMap.MarkerCluster(map, [], { hospitalMarkerCluster = new AMap.MarkerCluster(map, [], {
gridSize: 80, gridSize: 80,
maxZoom: 14, maxZoom: 14,
renderMarker(ctx) { renderMarker(ctx) {
const { marker, data } = ctx; const { marker, data } = ctx;
if (Array.isArray(data) && data[0]) { if (Array.isArray(data) && data[0]) {
const { label, mapOrientation } = data[0]; const { label, mapOrientation, mapNotify } = data[0];
const content = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(mapOrientation)}deg);" src='${redFlag}'/>`; let content = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(mapOrientation)}deg);" src='${hospital}'/>`;
marker.setContent(content);
marker.setLabel({ marker.setLabel({
direction: 'bottom', direction: 'bottom',
// 设置文本标注偏移量 // 设置文本标注偏移量
@ -335,13 +304,20 @@
content: `<div>${label}</div>` content: `<div>${label}</div>`
}); });
marker.setOffset(new AMap.Pixel(-18, -10)); marker.setOffset(new AMap.Pixel(-18, -10));
if (mapNotify) {
content = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(mapOrientation)}deg);" src='${hospitalTwinkle}'/>`;
}
marker.setContent(content);
} }
}, },
renderClusterMarker(ctx) { renderClusterMarker(ctx) {
const { clusterData, marker, count } = ctx; const { clusterData, marker, count } = ctx;
const content = `<img width="30px" height="30px" src='${redFlag}'/>`; let content = `<img width="30px" height="30px" src='${hospital}'/>`;
if(clusterData.some(item => item.mapNotify)){
content = `<img width="30px" height="30px" src='${hospitalTwinkle}'/>`;
}
marker.setContent(content); marker.setContent(content);
const label = count == 1 ? clusterData[0].label : `医检机构数量:${count}`; const label = count == 1 ? clusterData[0].label : `医院数量:${count}`;
marker.setLabel({ marker.setLabel({
direction: 'bottom', direction: 'bottom',
// 设置文本标注偏移量 // 设置文本标注偏移量
@ -352,24 +328,21 @@
marker.setOffset(new AMap.Pixel(-18, -10)); marker.setOffset(new AMap.Pixel(-18, -10));
} }
}); });
orgMarkerCluster.on('click', ctx => { hospitalMarkerCluster.on('click', ctx => {
const { lnglat } = ctx; const { lnglat } = ctx;
map.setZoomAndCenter(18, lnglat); 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, gridSize: 80,
maxZoom: 14, maxZoom: 14,
renderMarker(ctx) { renderMarker(ctx) {
const { marker, data } = ctx; const { marker, data } = ctx;
if (Array.isArray(data) && data[0]) { if (Array.isArray(data) && data[0]) {
const { label, mapOrientation, mapNotify } = data[0]; const { label, mapOrientation } = data[0];
let content = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(mapOrientation)}deg);" src='${hospital}'/>`; const content = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(mapOrientation)}deg);" src='${redFlag}'/>`;
marker.setContent(content);
marker.setLabel({ marker.setLabel({
direction: 'bottom', direction: 'bottom',
// 设置文本标注偏移量 // 设置文本标注偏移量
@ -378,20 +351,13 @@
content: `<div>${label}</div>` content: `<div>${label}</div>`
}); });
marker.setOffset(new AMap.Pixel(-18, -10)); marker.setOffset(new AMap.Pixel(-18, -10));
if (mapNotify) {
content = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(mapOrientation)}deg);" src='${hospitalTwinkle}'/>`;
}
marker.setContent(content);
} }
}, },
renderClusterMarker(ctx) { renderClusterMarker(ctx) {
const { clusterData, marker, count } = ctx; const { clusterData, marker, count } = ctx;
let content = `<img width="30px" height="30px" src='${hospital}'/>`; const content = `<img width="30px" height="30px" src='${redFlag}'/>`;
if(clusterData.some(item => item.mapNotify)){
content = `<img width="30px" height="30px" src='${hospitalTwinkle}'/>`;
}
marker.setContent(content); marker.setContent(content);
const label = count == 1 ? clusterData[0].label : `医院数量:${count}`; const label = count == 1 ? clusterData[0].label : `医检机构数量:${count}`;
marker.setLabel({ marker.setLabel({
direction: 'bottom', direction: 'bottom',
// 设置文本标注偏移量 // 设置文本标注偏移量
@ -402,14 +368,10 @@
marker.setOffset(new AMap.Pixel(-18, -10)); marker.setOffset(new AMap.Pixel(-18, -10));
} }
}); });
hospitalMarkerCluster.on('click', ctx => { orgMarkerCluster.on('click', ctx => {
const { lnglat } = ctx; const { lnglat } = ctx;
map.setZoomAndCenter(18, lnglat); map.setZoomAndCenter(18, lnglat);
}); });
const hospitalPoints = mapState.hospitalList.map(hospital => ({
lnglat: [hospital.mapLng, hospital.mapLat], ...hospital
}));
hospitalMarkerCluster?.setData(hospitalPoints);
// 收样员集群标记点 // 收样员集群标记点
courierUserMarkerCluster = new AMap.MarkerCluster(map, [], { courierUserMarkerCluster = new AMap.MarkerCluster(map, [], {
@ -450,10 +412,6 @@
const { lnglat } = ctx; const { lnglat } = ctx;
map.setZoomAndCenter(18, lnglat); map.setZoomAndCenter(18, lnglat);
}); });
const courierUserPoints = mapState.courierUserList.map(courierUser => ({
lnglat: [courierUser.mapLng, courierUser.mapLat], ...courierUser
}));
courierUserMarkerCluster?.setData(courierUserPoints);
// 扫描收样员园形范围 // 扫描收样员园形范围
scanCourierUserCircleRange = new AMap.Circle({ scanCourierUserCircleRange = new AMap.Circle({
@ -475,13 +433,39 @@
panel: instance.refs.mapPanel 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(); complete();
}).catch(error => { }).catch(error => {
mapState.loading = false; mapState.loading = false;
throw error; throw error;
}); });
}); });
onUnmounted(() => { onUnmounted(() => {
@ -498,6 +482,7 @@
mapState.loading = false; mapState.loading = false;
mapState.first = true; mapState.first = true;
setMapDataJson(mapProps.options); setMapDataJson(mapProps.options);
handleSetCourierUserList();
}); });
} }
} }
@ -512,8 +497,14 @@
watch(toRefs(mapProps).options, (newValue) => { watch(toRefs(mapProps).options, (newValue) => {
if (mapState.first) { if (mapState.first) {
setMapDataJson(newValue); setMapDataJson(newValue);
handleSetCourierUserList();
} }
}, { deep: true }); }, { deep: true });
watch([() => toRefs(mapProps).isEdit, () => mapState.mapData.courierUserId], () => {
if (mapState.first) {
handleSetCourierUserList();
}
});
watch([() => mapState.mapData.sendOrderId, () => mapState.mapData.sendOrderTaskType], watch([() => mapState.mapData.sendOrderId, () => mapState.mapData.sendOrderTaskType],
([sendOrderIdValue,sendOrderTaskTypeValue], [sendOrderIdOldValue, sendOrderTaskTypeOldValue]) => { ([sendOrderIdValue,sendOrderTaskTypeValue], [sendOrderIdOldValue, sendOrderTaskTypeOldValue]) => {
if (!sendOrderIdValue || !sendOrderTaskTypeValue) return; 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) { function handleCourierUserSearch(hospitalId: string) {
// 查找当前下级医院数据 // 查找当前下级医院数据
@ -628,7 +650,6 @@
duration: 2 duration: 2
}); });
} else mapTaskOpenModal(true, { mapData: mapState.mapData, options: { } else mapTaskOpenModal(true, { mapData: mapState.mapData, options: {
courierUserList: mapState.courierUserList,
hospitalList: mapState.hospitalList, hospitalList: mapState.hospitalList,
orgList: mapState.orgList orgList: mapState.orgList
}}); }});
@ -669,7 +690,7 @@
options = null; options = null;
} }
} }
handleMapReset(); mapReset();
nextTick(() => { nextTick(() => {
mapState.mapData = cloneDeep(merge(defaultMapData(), options)); mapState.mapData = cloneDeep(merge(defaultMapData(), options));
// 处理数据格式转换 // 处理数据格式转换
@ -810,7 +831,6 @@
item?.mapTaskPreset?.forEach(childItem => { item?.mapTaskPreset?.forEach(childItem => {
const childHospital = childItem.orginPresetId && mapState.hospitalList.find(e => e.value == childItem.orginPresetId), const childHospital = childItem.orginPresetId && mapState.hospitalList.find(e => e.value == childItem.orginPresetId),
childOrg = childItem.destinationPresetId && mapState.orgList.find(e => e.value == childItem.destinationPresetId); childOrg = childItem.destinationPresetId && mapState.orgList.find(e => e.value == childItem.destinationPresetId);
childItem.courierUserId = mapData.courierUserId;
childHospital && Object.assign(childItem,{ childHospital && Object.assign(childItem,{
orginPresetName: childHospital.label, orginPresetName: childHospital.label,
orginPresetLat: childHospital.mapLat, orginPresetLat: childHospital.mapLat,
@ -830,7 +850,7 @@
} }
/** 处理地图重置 */ /** 处理地图重置 */
function handleMapReset() { function mapReset() {
nextTick(()=> { nextTick(()=> {
// 清除地图 // 清除地图
map?.resize(); map?.resize();
@ -858,7 +878,8 @@
drawMapNavigate, drawMapNavigate,
getMapDataJson, getMapDataJson,
setMapDataJson, setMapDataJson,
formClearValidate formClearValidate,
mapReset
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

3
src/components/AMap/src/components/MapTaskModal.vue
Unescape View File

@ -72,7 +72,6 @@
/** 类型规范统一声明定义区域 */ /** 类型规范统一声明定义区域 */
type OptionsType = { type OptionsType = {
courierUserList: Nullable<MapPointType[]>;
hospitalList:Nullable<MapPointType[]>; hospitalList:Nullable<MapPointType[]>;
orgList: Nullable<MapPointType[]>; orgList: Nullable<MapPointType[]>;
}; };
@ -89,7 +88,6 @@
taskPresetCurrentEditRowRef: null, taskPresetCurrentEditRowRef: null,
mapData: defaultMapData(), mapData: defaultMapData(),
options: { options: {
courierUserList: null,
hospitalList: null, hospitalList: null,
orgList: null orgList: null
} }
@ -365,7 +363,6 @@
/** 处理打开交接任务 */ /** 处理打开交接任务 */
function handleOpenTaskPreset(record) { function handleOpenTaskPreset(record) {
openModal(true, { row: record, options: { openModal(true, { row: record, options: {
courierUserList: state.options.courierUserList,
orgList: state.options.orgList, orgList: state.options.orgList,
courierUserId: state.mapData.courierUserId courierUserId: state.mapData.courierUserId
}}); }});

2
src/components/AMap/src/components/MapTaskPresetModal.vue
Unescape View File

@ -57,7 +57,6 @@
/** 类型规范统一声明定义区域 */ /** 类型规范统一声明定义区域 */
type OptionsType = { type OptionsType = {
courierUserId: string; courierUserId: string;
courierUserList: Nullable<MapPointType[]>;
orgList: Nullable<MapPointType[]>; orgList: Nullable<MapPointType[]>;
}; };
interface WindowState { interface WindowState {
@ -76,7 +75,6 @@
}, },
options: { options: {
courierUserId: '', courierUserId: '',
courierUserList: null,
orgList: null orgList: null
} }
}); });

12
src/views/common/mapLogistic/MapLogisticModal.vue
Unescape View File

@ -5,7 +5,11 @@
:showCancelBtn="false" :showCancelBtn="false"
@register="registerModal" @register="registerModal"
> >
<AMapDesigner :options="state.mapData" :isEdit="state.isEdit" @success="handleSubmit"/> <AMapDesigner ref="aMapDesigner"
:options="state.mapData"
:isEdit="state.isEdit"
@success="handleSubmit"
/>
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -18,7 +22,7 @@
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal'; import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
import { AMapDesigner } from '/@/components/AMap'; import { AMapDesigner } from '/@/components/AMap';
import { getMapDataByCourierUserId } from '/@/api/platform/common/controller/mapLogistic'; import { getMapDataByCourierUserId } from '/@/api/platform/common/controller/mapLogistic';
import { reactive } from 'vue'; import {reactive, ref} from 'vue';
import { MapLogistic } from '/@/api/platform/common/entity/mapLogistic'; import { MapLogistic } from '/@/api/platform/common/entity/mapLogistic';
/** 类型规范统一声明定义区域 */ /** 类型规范统一声明定义区域 */
@ -34,10 +38,14 @@
mapData: null, mapData: null,
isEdit: false isEdit: false
}); });
const aMapDesigner = ref();
/** https://v3.cn.vuejs.org/api/options-data.html#emits */ /** https://v3.cn.vuejs.org/api/options-data.html#emits */
const emit = defineEmits(['success', 'register']); const emit = defineEmits(['success', 'register']);
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' }) => { const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' }) => {
// 处理清除脏数据
aMapDesigner.value.mapReset();
aMapDesigner.value.formClearValidate();
// 处理设置数据 // 处理设置数据
state.tag = data._tag; state.tag = data._tag;
const courierUserId = data.record?.courierUserId; const courierUserId = data.record?.courierUserId;

Write Preview
Loading…
Cancel
Save