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
Split 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 @@ @@ -9,7 +9,7 @@
@point="handleOpenMapPoint"
@zoomIn="handleMapZoomIn"
@zoomOut="handleMapZoomOut"
@reset="handleMapReset"
@reset="mapReset"
/>
<div id="mapview" ref="mapview">
<div v-show="navigatePanel" id="mapPanel" ref="mapPanel"/>
@ -89,7 +89,7 @@ @@ -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 @@ @@ -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 @@ @@ -188,7 +188,7 @@
},
/** 面板(显示/隐藏)状态 */
toggleStatus: true,
/** 收样员集合收样员集合 */
/** 收样员集合 */
courierUserList: [],
/** 下级医院集合 */
hospitalList: [],
@ -250,42 +250,12 @@ @@ -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 @@ @@ -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 = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(mapOrientation)}deg);" src='${redFlag}'/>`;
marker.setContent(content);
const { label, mapOrientation, mapNotify } = data[0];
let content = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(mapOrientation)}deg);" src='${hospital}'/>`;
marker.setLabel({
direction: 'bottom',
// 设置文本标注偏移量
@ -335,13 +304,20 @@ @@ -335,13 +304,20 @@
content: `<div>${label}</div>`
});
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) {
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);
const label = count == 1 ? clusterData[0].label : `医检机构数量:${count}`;
const label = count == 1 ? clusterData[0].label : `医院数量:${count}`;
marker.setLabel({
direction: 'bottom',
// 设置文本标注偏移量
@ -352,24 +328,21 @@ @@ -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 = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(mapOrientation)}deg);" src='${hospital}'/>`;
const { label, mapOrientation } = data[0];
const content = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(mapOrientation)}deg);" src='${redFlag}'/>`;
marker.setContent(content);
marker.setLabel({
direction: 'bottom',
// 设置文本标注偏移量
@ -378,20 +351,13 @@ @@ -378,20 +351,13 @@
content: `<div>${label}</div>`
});
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) {
const { clusterData, marker, count } = ctx;
let content = `<img width="30px" height="30px" src='${hospital}'/>`;
if(clusterData.some(item => item.mapNotify)){
content = `<img width="30px" height="30px" src='${hospitalTwinkle}'/>`;
}
const content = `<img width="30px" height="30px" src='${redFlag}'/>`;
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 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -498,6 +482,7 @@
mapState.loading = false;
mapState.first = true;
setMapDataJson(mapProps.options);
handleSetCourierUserList();
});
}
}
@ -512,8 +497,14 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -669,7 +690,7 @@
options = null;
}
}
handleMapReset();
mapReset();
nextTick(() => {
mapState.mapData = cloneDeep(merge(defaultMapData(), options));
// 处理数据格式转换
@ -810,7 +831,6 @@ @@ -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 @@ @@ -830,7 +850,7 @@
}
/** 处理地图重置 */
function handleMapReset() {
function mapReset() {
nextTick(()=> {
// 清除地图
map?.resize();
@ -858,7 +878,8 @@ @@ -858,7 +878,8 @@
drawMapNavigate,
getMapDataJson,
setMapDataJson,
formClearValidate
formClearValidate,
mapReset
});
</script>
<style lang="less" scoped>

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save