调整地图设计器数据结构

src/components/AMap/src/AMapDesigner/index.vue

@@ -1,7 +1,8 @@
-`<template>
+<template>
   <div class="amap-designer">
-    <div class="headToolbar">
-      <ATooltip title="保存并发布"
+    <div v-show="mapProps.sidebarControl" class="headToolbar">
+      <ATooltip v-if="toolbar.includes('save')"
+                title="保存并发布"
                 placement="bottom"
                 :arrowPointAtCenter="true"
       >
@@ -9,7 +10,8 @@
           <Icon icon="fa6-regular:floppy-disk" size="13"/>保存
         </a-button>
       </ATooltip>
-      <ATooltip title="新增任务"
+      <ATooltip v-if="toolbar.includes('addTask')"
+                title="新增任务"
                 placement="bottom"
                 :arrowPointAtCenter="true"
       >
@@ -17,7 +19,8 @@
           <Icon icon="fa6-regular:window-restore" size="13"/>任务
         </a-button>
       </ATooltip>
-      <ATooltip title="调整标记点"
+      <ATooltip v-if="toolbar.includes('point')"
+                title="调整标记点"
                 placement="bottom"
                 :arrowPointAtCenter="true"
       >
@@ -25,7 +28,8 @@
           <Icon icon="fa6-solid:location-dot" size="13"/>标记点
         </a-button>
       </ATooltip>
-      <ATooltip title="放大"
+      <ATooltip v-if="toolbar.includes('zoomIn')"
+                title="放大"
                 placement="bottom"
                 :arrowPointAtCenter="true"
       >
@@ -36,7 +40,8 @@
       <a-button>
         {{ Math.ceil(mapState.defaultZoom * 10 * 1.1) + "%" }}
       </a-button>
-      <ATooltip title="缩小"
+      <ATooltip v-if="toolbar.includes('zoomOut')"
+                title="缩小"
                 placement="bottom"
                 :arrowPointAtCenter="true"
       >
@@ -44,7 +49,8 @@
           <Icon icon="fa6-solid:magnifying-glass-minus" size="13"/>
         </a-button>
       </ATooltip>
-      <ATooltip title="重置"
+      <ATooltip v-if="toolbar.includes('reset')"
+                title="重置"
                 placement="bottom"
                 :arrowPointAtCenter="true"
       >
@@ -111,7 +117,7 @@
 </template>
 <script lang="ts" setup>
   import AMapLoader from '@amap/amap-jsapi-loader';
-  import {reactive, watchEffect, getCurrentInstance, onBeforeMount, onUnmounted, ref, PropType} from 'vue';
+  import { reactive, watchEffect, getCurrentInstance, onBeforeMount, onUnmounted, ref, PropType, watch, toRefs, nextTick } from 'vue';
   import { operatePanelColumns, MapData, MapPointType } from '../amap.data';
   import hospital from '/@/assets/images/hospital.svg';
   import medicalKit from '/@/assets/images/medical-kit.svg';
@@ -129,13 +135,13 @@
   import AButton from '/@/components/Button/src/BasicButton.vue';
   import { Icon } from '/@/components/Icon';
   import { useUserStore } from '/@/store/modules/user';
-  import { split, divide, subtract, merge, isEmpty } from 'lodash-es';
+  import { split, divide, subtract, merge, isEmpty, cloneDeep } from 'lodash-es';
   import componentSetting from '/@/settings/componentSetting';
   import { BasicUpload } from '/@/components/Upload';
   import { commonUpload } from '/@/api/platform/core/controller/upload';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { listMapTaskPreset } from '/@/api/platform/common/controller/mapTaskPreset';
-  import { getMapLogistic } from '/@/api/platform/common/controller/mapLogistic';
+  import { defaultMapData } from '/@/enums/amapEnum';
 
   /** 类型规范统一声明定义区域 */
   interface MapState {
@@ -155,15 +161,18 @@
   }
 
   const mapProps = defineProps({
-    mapId: propTypes.string.def(''),
-    mapPoint: {
-      type: Array as PropType<{
-        lng: number | string;
-        lat: number | string;
-      }[]>,
-      default: () => [],
+    options: {
+      type: [Object, String] as PropType<MapData | string>,
+      default: () => ({})
     },
-    sidebarControl: propTypes.bool.def(true)
+    sidebarControl: propTypes.bool.def(true),
+    siderWidth: propTypes.number.def(371),
+    toolbar: {
+      type: Array as PropType<string[]>,
+      default: () => ['save', 'addTask', 'point', 'zoomIn', 'zoomOut', 'reset']
+    },
+    toolbarHeight: propTypes.number.def(48),
+    toolbarControl: propTypes.bool.def(true),
   });
 
   let map;
@@ -186,7 +195,8 @@
     toggleOperatePanelClass: {
       span: 'none',
       p: 'block',
-      siderWidth: 371
+      siderWidth: 0,
+      toolbarHeight: 0
     },
     /** 面板(显示/隐藏)状态 */
     toggleStatus: true,
@@ -210,28 +220,7 @@
       }
     },
     /** 地图物流数据 */
-    mapData: {
-      name: '',
-      courierUserId: '',
-      courierUserName: '',
-      courierLng: undefined,
-      courierLat: undefined,
-      sendOrderId: '',
-      sendOrderName: '',
-      sendOrderLng: undefined,
-      sendOrderLat: undefined,
-      fileId: [],
-      estimateTime: '',
-      requireTime: '',
-      /** 地图任务数据 */
-      mapTask: [{
-        name: '宇宙任务',
-        taskType: '0',
-        mapTaskPreset: []
-      }],
-      /** 地图预览点数据 */
-      mapLogisticPoint: [],
-    },
+    mapData: defaultMapData(),
     /** 表单校验 */
     rulesRef: {
       name: [
@@ -369,9 +358,8 @@
         const { lnglat } = ctx;
         map.setZoomAndCenter(18, lnglat);
       });
-      const orgPoints = mapState.orgList.map((e: any) => ({
-        lnglat: [e.mapLng, e.mapLat],
-        ...e
+      const orgPoints = mapState.orgList.map((org: any) => ({
+        lnglat: [org.mapLng, org.mapLat], ...org
       }));
       orgMarkerCluster?.setData(orgPoints);
 
@@ -420,9 +408,8 @@
         const { lnglat } = ctx;
         map.setZoomAndCenter(18, lnglat);
       });
-      const hospitalPoints = mapState.hospitalList.map((e: any) => ({
-        lnglat: [e.mapLng, e.mapLat],
-        ...e
+      const hospitalPoints = mapState.hospitalList.map((hospital: any) => ({
+        lnglat: [hospital.mapLng, hospital.mapLat], ...hospital
       }));
       hospitalMarkerCluster?.setData(hospitalPoints);
 
@@ -465,9 +452,8 @@
         const { lnglat } = ctx;
         map.setZoomAndCenter(18, lnglat);
       });
-      const courierUserPoints = mapState.courierUserList.map((e: any) => ({
-        lnglat: [e.mapLng, e.mapLat],
-        ...e
+      const courierUserPoints = mapState.courierUserList.map((courierUser: any) => ({
+        lnglat: [courierUser.mapLng, courierUser.mapLat], ...courierUser
       }));
       courierUserMarkerCluster?.setData(courierUserPoints);
 
@@ -492,27 +478,8 @@
       });
 
       // 加载地图数据,并且绘制路线
-      handleMapReset();
-      if (mapProps.mapId) {
-        getMapLogistic(mapProps.mapId).then(mapLogistic =>  {
-          if (!isEmpty(mapLogistic)) {
-            mapState.mapData = merge(mapState.mapData, mapLogistic);
-            const lngLatData = mapState.mapData.mapLogisticPoint.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);
-              }
-            });
-          }
-        });
-      } else {
-        // 绘制手动设置的地图路线,前提是没有传地图ID
-        const lngLatData = mapProps.mapPoint.map(item => new AMap.LngLat(item.lng, item.lat));
+      if (!isEmpty(mapState.mapData.mapLogisticPoint)) {
+        const lngLatData = mapState.mapData.mapLogisticPoint.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
@@ -541,6 +508,7 @@
     }
   });
 
+
   /** 地图创建完成(动画关闭) */
   function complete () {
     if (map) {
@@ -552,7 +520,16 @@
 
   /** 监听内部响应式数据 */
   watchEffect(() => {
+    mapState.toggleOperatePanelClass.siderWidth = mapProps.siderWidth;
+    mapState.toggleOperatePanelClass.toolbarHeight = mapProps.toolbarHeight;
     if (!mapProps.sidebarControl) mapState.toggleOperatePanelClass.siderWidth = 0;
+    if (!mapProps.toolbarControl) mapState.toggleOperatePanelClass.toolbarHeight = 0;
+  });
+  watch(toRefs(mapProps).options, (newValue)=>{
+    setMapDataJson(newValue);
+  }, {
+    immediate: true,
+    deep: true
   });
 
   /** 处理切换操作面板 */
@@ -561,7 +538,7 @@
     if (mapState.toggleStatus) {
       mapState.toggleOperatePanelClass.span='none';
       mapState.toggleOperatePanelClass.p = 'block';
-      mapState.toggleOperatePanelClass.siderWidth = 371;
+      mapState.toggleOperatePanelClass.siderWidth = mapProps.siderWidth;
     } else {
       mapState.toggleOperatePanelClass.span='block';
       mapState.toggleOperatePanelClass.p = 'none';
@@ -632,6 +609,26 @@
     map.zoomOut();
   }
 
+  /** 设置地图数据json */
+  function setMapDataJson(data) {
+    let options = data;
+    if (typeof options === 'string') {
+      try {
+        options = eval('(' + options + ')');
+      } catch (e) {
+        console.error('非法配置');
+        options = {};
+      }
+    }
+    handleMapReset();
+    mapState.mapData = cloneDeep(merge(defaultMapData(), options));
+  }
+
+  /** 获取部件表单数据 */
+  function getMapDataJson () {
+    return cloneDeep(mapState.mapData);
+  }
+
   /** 处理地图任务数据 */
   async function handleMapTask() {
     setTableData(mapState.mapData.mapTask);
@@ -710,24 +707,27 @@
 
   /** 处理地图重置 */
   function handleMapReset() {
-    // 清除地图
-    map.clearMap();
-    // 清除表单数据
-    formElRef.value.resetFields();
-    formElRef.value.clearValidate();
-    // 清除地图数据
-    mapState.mapData.courierUserName = '';
-    mapState.mapData.courierLng = undefined;
-    mapState.mapData.courierLat = undefined;
-    mapState.mapData.sendOrderName = '';
-    mapState.mapData.sendOrderLng = undefined;
-    mapState.mapData.sendOrderLat = undefined;
-    mapState.mapData.mapTask = [];
-    mapState.mapData.mapLogisticPoint = [];
-    setTableData([]);
-    // 重置地图画布
-    map.setZoomAndCenter(mapState.mapConfig.options.zoom, mapState.mapConfig.options.center);
-    mapState.defaultZoom = mapState.mapConfig.options.zoom;
+    nextTick(()=> {
+      // 清除地图
+      map.resize();
+      map.clearMap();
+      // 清除表单数据
+      formElRef.value.resetFields();
+      formElRef.value.clearValidate();
+      // 清除地图数据
+      mapState.mapData.courierUserName = '';
+      mapState.mapData.courierLng = undefined;
+      mapState.mapData.courierLat = undefined;
+      mapState.mapData.sendOrderName = '';
+      mapState.mapData.sendOrderLng = undefined;
+      mapState.mapData.sendOrderLat = undefined;
+      mapState.mapData.mapTask = [];
+      mapState.mapData.mapLogisticPoint = [];
+      setTableData([]);
+      // 重置地图画布
+      map.setZoomAndCenter(mapState.mapConfig.options.zoom, mapState.mapConfig.options.center);
+      mapState.defaultZoom = mapState.mapConfig.options.zoom;
+    });
   }
 
 </script>
@@ -735,13 +735,13 @@
 
 // 地图设计器总样式
 .amap-designer {
-  @headerHeight: 48px;
+  @toolbarHeight: v-bind('mapState.toggleOperatePanelClass.toolbarHeight + "px"');;
   @siderWidth: v-bind('mapState.toggleOperatePanelClass.siderWidth + "px"');
   @borderColor: #e0e0e0;
 
   #mapview {
     position: absolute;
-    top: @headerHeight;
+    top: @toolbarHeight;
     left: 0;
     right: @siderWidth;
     bottom: 0;
@@ -814,7 +814,6 @@
     padding: 0 20px;
     background-color: white;
     border: 1px solid @borderColor;
-    height: @headerHeight;
     position: absolute;
     top: 0;
     left: 0;

src/enums/amapEnum.ts

@@ -0,0 +1,32 @@
+/**
+ * @program: kicc-ui
+ * @description: 地图常量枚举
+ * @author: entfrm开发团队-王翔
+ * @create: 2022/4/9
+ */
+
+import { MapData } from '/@/components/AMap/src/amap.data';
+import { cloneDeep } from 'lodash-es';
+
+export const defaultMapData: ()=> MapData = ()=> cloneDeep({
+  name: '',
+  courierUserId: '',
+  courierUserName: '',
+  courierLng: undefined,
+  courierLat: undefined,
+  sendOrderId: '',
+  sendOrderName: '',
+  sendOrderLng: undefined,
+  sendOrderLat: undefined,
+  fileId: [],
+  estimateTime: '',
+  requireTime: '',
+  /** 地图任务数据 */
+  mapTask: [{
+    name: '宇宙任务',
+    taskType: '0',
+    mapTaskPreset: []
+  }],
+  /** 地图预览点数据 */
+  mapLogisticPoint: [],
+});