diff --git a/src/api/demo/formModule.ts b/src/api/demo/formModule.ts
index 631cc344..235c16a2 100644
--- a/src/api/demo/formModule.ts
+++ b/src/api/demo/formModule.ts
@@ -25,6 +25,8 @@ enum Api {
   Post_UpdateForm = '/api/FormModule/UpdateForm',
   // 获取字典分类列表
   Get_SysDataItemLoad = '/api/SysDataItem/Load',
+  // 判断数据表字段重复
+  Get_ExistFiled = '/api/FormModule/ExistFiled',
 }
 
 // 获取分页列表
@@ -78,3 +80,11 @@ export function Get_SysDataItemLoad() {
     url: Api.Get_SysDataItemLoad,
   });
 }
+
+// 判断数据表字段重复
+export function Get_Get_ExistFiled(params) {
+  return defHttp.get<responsesmodel>({
+    url: Api.Get_ExistFiled,
+    params,
+  });
+}
diff --git a/src/components/Container/src/collapse/CollapseContainer.vue b/src/components/Container/src/collapse/CollapseContainer.vue
index c3a43c88..7535d8c0 100644
--- a/src/components/Container/src/collapse/CollapseContainer.vue
+++ b/src/components/Container/src/collapse/CollapseContainer.vue
@@ -31,6 +31,10 @@
      * Delayed loading time
      */
     lazyTime: { type: Number, default: 0 },
+    /**
+     * Title is Bold?
+     */
+    isTitleBold: { type: Boolean, default: false },
   };
 
   export type CollapseContainerProps = ExtractPropTypes<typeof collapseContainerProps>;
@@ -65,6 +69,7 @@
             v-slots={{
               title: slots.title,
               action: slots.action,
+              isTitleBold: slots.isTitleBold,
             }}
           />
 
diff --git a/src/components/Container/src/collapse/CollapseHeader.vue b/src/components/Container/src/collapse/CollapseHeader.vue
index b49bb2a0..d2e73ad1 100644
--- a/src/components/Container/src/collapse/CollapseHeader.vue
+++ b/src/components/Container/src/collapse/CollapseHeader.vue
@@ -6,6 +6,7 @@
   const collapseHeaderProps = {
     prefixCls: String,
     title: String,
+    isTitleBold: Boolean,
     show: Boolean,
     canExpan: Boolean,
     helpMessage: {
@@ -24,21 +25,40 @@
     setup(props, { slots, attrs, emit }) {
       const { prefixCls } = useDesign('collapse-container');
       const _prefixCls = computed(() => props.prefixCls || unref(prefixCls));
-      return () => (
-        <div class={[`${unref(_prefixCls)}__header px-2 py-5`, attrs.class]}>
-          <BasicTitle helpMessage={props.helpMessage} normal>
-            {slots.title?.() || props.title}
-          </BasicTitle>
+      // v-if="props.isTitleBold" 无效
+      if (props.isTitleBold) {
+        return () => (
+          <div class={[`${unref(_prefixCls)}__header px-2 py-5`, attrs.class]}>
+            <BasicTitle helpMessage={props.helpMessage} normal>
+              <strong>{slots.title?.() || props.title}</strong>
+            </BasicTitle>
 
-          <div class={`${unref(_prefixCls)}__action`}>
-            {slots.action
-              ? slots.action({ expand: props.show, onClick: () => emit('expand') })
-              : props.canExpan && (
-                  <BasicArrow up expand={props.show} onClick={() => emit('expand')} />
-                )}
+            <div class={`${unref(_prefixCls)}__action`}>
+              {slots.action
+                ? slots.action({ expand: props.show, onClick: () => emit('expand') })
+                : props.canExpan && (
+                    <BasicArrow up expand={props.show} onClick={() => emit('expand')} />
+                  )}
+            </div>
           </div>
-        </div>
-      );
+        );
+      } else {
+        return () => (
+          <div class={[`${unref(_prefixCls)}__header px-2 py-5`, attrs.class]}>
+            <BasicTitle helpMessage={props.helpMessage} normal>
+              {slots.title?.() || props.title}
+            </BasicTitle>
+
+            <div class={`${unref(_prefixCls)}__action`}>
+              {slots.action
+                ? slots.action({ expand: props.show, onClick: () => emit('expand') })
+                : props.canExpan && (
+                    <BasicArrow up expand={props.show} onClick={() => emit('expand')} />
+                  )}
+            </div>
+          </div>
+        );
+      }
     },
   });
 </script>
diff --git a/src/components/MapboxMaps/MapComponent.vue b/src/components/MapboxMaps/MapComponent.vue
index ad8c453d..9a1dba96 100644
--- a/src/components/MapboxMaps/MapComponent.vue
+++ b/src/components/MapboxMaps/MapComponent.vue
@@ -1,816 +1,791 @@
 <template>
-    <div class="map-container">
-      <div id="mapContainer" class="map-box"></div>
-  
-      <!-- 图层控制 -->
-      <div class="layer-control-center">
-        <a-collapse v-model:activeKey="activeKey" accordion expandIconPosition="end" expandIcon="">
-          <a-collapse-panel key="1" header="图层">
-            <p v-for="(item, index) in props.mapConfig.layers">
-              <a-checkbox v-model:checked="item.checked" @change="handlerCheckboxChange(item)">{{
-                item.name
-              }}</a-checkbox>
-            </p>
-            <p v-for="(item, index) in props.mapConfig.baseLayers">
-              <a-checkbox v-model:checked="item.checked" @change="handlerCheckboxChange(item)">{{
-                item.name
-              }}</a-checkbox>
-            </p>
-          </a-collapse-panel>
-        </a-collapse>
-      </div>
+  <div class="map-container">
+    <div id="mapContainer" class="map-box"></div>
 
-      <!-- 绘图控制 -->
-      <div class="draw-control-center" v-show="drawing">
-        <div class="draw-btn" @click="handlerCancleDraw"> 取消 </div>
-        <div class="draw-btn" @click="handlerDrawComplete"> 保存 </div>
-      </div>
+    <!-- 图层控制 -->
+    <div class="layer-control-center">
+      <a-collapse v-model:activeKey="activeKey" accordion expandIconPosition="end" expandIcon="">
+        <a-collapse-panel key="1" header="图层">
+          <p v-for="(item, index) in props.mapConfig.layers" :key="index">
+            <a-checkbox v-model:checked="item.checked" @change="handlerCheckboxChange(item)">{{
+              item.name
+            }}</a-checkbox>
+          </p>
+          <p v-for="(item, index) in props.mapConfig.baseLayers" :key="index">
+            <a-checkbox v-model:checked="item.checked" @change="handlerCheckboxChange(item)">{{
+              item.name
+            }}</a-checkbox>
+          </p>
+        </a-collapse-panel>
+      </a-collapse>
     </div>
-  </template>
-  
-  <script lang="ts" setup>
-    import {
-      onMounted,
-      onUnmounted,
-      defineProps,
-      defineEmits,
-      reactive,
-      ref,
-      defineExpose,
-    } from 'vue';
 
-    import { useMessage } from '@/hooks/web/useMessage';
+    <!-- 绘图控制 -->
+    <div class="draw-control-center" v-show="drawing">
+      <div class="draw-btn" @click="handlerCancleDraw"> 取消 </div>
+      <div class="draw-btn" @click="handlerDrawComplete"> 保存 </div>
+    </div>
+  </div>
+</template>
 
-    import mapboxgl, { Map, Popup } from 'mapbox-gl';
-  
-    // 图形绘制工具类
-    import MapboxDraw from '@mapbox/mapbox-gl-draw';
-    
-    import { generateUUID,getGeometryCenter } from './src/tool'
+<script lang="ts" setup>
+  import {
+    onMounted,
+    onUnmounted,
+    defineProps,
+    defineEmits,
+    reactive,
+    ref,
+    defineExpose,
+  } from 'vue';
 
-    // 测量工具
-    import { SwitchLayerControl,MeasureControl } from 'mapbox-extensions'
-    import 'mapbox-extensions/dist/index.css'
+  import { useMessage } from '@/hooks/web/useMessage';
 
-    import U from 'mapbox-gl-utils';
-    import 'mapbox-gl/dist/mapbox-gl.css';
-    import './src/index.less';
-    import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from './src/config';
-    import { MP } from './src/MP';
-    import { DrawingType } from '@/enums/mapEnum';
-  
-    import {
-      SnapPolygonMode,
-      SnapPointMode,
-      SnapLineMode,
-      SnapModeDrawStyles,
-      SnapDirectSelect,
-    } from 'mapbox-gl-draw-snap-mode';
-  
-    import { customDrawStyles } from './Styles/Styles';
-    import Drawtool from '@/views/datamaintenance/components/drawtool.vue';
-    import { WktToGeojson, GeojsonToWkt } from './src/WktGeojsonTransform';
-    import { features } from 'process';
-  
-    const openModal = ref(false);
-    const insertShpModal = ref(false);
-    const changeOpenModal = (value) => {
-      openModal.value = value;
-    };
-    const changeOpenInsertShpModal = (value) => {
-      insertShpModal.value = value;
-    };
-  
-    // map参数类型
-    interface MapboxOptionsInterface {
-      mapOptions: mapboxgl.MapboxOptions;
-      control: DrawingType[];
-    }
-  
-    const props = defineProps({
-      mapConfig:{
-        type:Object,
-        default:{}
-      },
-      layers: {
-        type: Array,
-        default: [],
-      },
-      location: {
-        type: Array,
-        default: [],
-      },
-      type: {
-        type: String,
-        default: '',
-      },
-      feature: {
-        type: String,
-        default: '',
-      },
-    });
+  import mapboxgl, { Map, Popup } from 'mapbox-gl';
 
-    console.log("mapConfig",props.mapConfig);
-  
-    let nextMapControl: Array<any> = reactive([]);
-    nextMapControl = props.control
-      ? props.control.map((item) => {
-          return MapControlConfig[item];
-        })
-      : [];
-  
-    // 定义地图容器
-    let map: Map;
-    let drawTool: any;
-    let popup: Popup;
-    let clickPoisition: Array<number> = [];
-    let selectFeature: Object = {};
-    let mp: any = null;
-    let geojson = reactive({
-      geojson: {},
-    });
-    let drawing = ref(false);
-  
-    let drawGeojson = reactive({
-      geojson: {
-        type: 'FeatureCollection',
-        features: [],
-      },
-    });
-  
-    const { createConfirm, createMessage } = useMessage();
-  
-    // 定义地图回调emit
-    // 地图加载完成回调
-    const emit = defineEmits(['mapOnLoad', 'mapDraw', 'handlerDrawComplete']);
-  
-    onMounted(() => {
-      mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
-      map = initMap();
-      map.on('load', () => {
+  // 图形绘制工具类
+  import MapboxDraw from '@mapbox/mapbox-gl-draw';
 
-        // 根据地图配置信息加载地形数据
-        if(props.mapConfig.mode == "3D"){
-          handlerLoadTerrain();
-        }
+  import { generateUUID, getGeometryCenter } from './src/tool';
 
-        // 初始化绘图空间
-        // handlerInitDrawTool(null);
-  
-        map.on('click', (e) => {
-          // handlerPreviewFeatureInfo(e);
-          clickPoisition = e.lngLat;
-        });
-  
-        map.on('draw.selectionchange', (e) => {
-          // handlerCopyToTargetLayer(e);
-        });
-        emit('mapOnLoad', map);
-  
-        // 设置绘图监听事件
-        map.on('draw.create', function (e) {
-          drawGeojson.geojson.features = e.features;
-          handlerDealFeature(e.features[0]);
-        });
-  
-        map.on('draw.update', function (e) {
-          drawGeojson.geojson = e.features;
-          handlerDealFeature(e.features[0]);
-        });
-  
-        map.on('draw.delete', function (e) {
-          handlerDeleteFeature(e.features[0]);
-        });
-  
-        window.handlerCopyFeature = handlerCopyFeature;
+  // 测量工具
+  import { SwitchLayerControl, MeasureControl } from 'mapbox-extensions';
+  import 'mapbox-extensions/dist/index.css';
 
-        // 测量工具
-        map.addControl(new MeasureControl({
-            horizontal : true,         //default false   
-            btnBgColor : '#ffffff',        //default '#ffffff'
-            btnActiveColor:'#ddd',      //default '#ddd'
-            geometryClick:true,        //defualt false 
-            enableModes:['Point','LineString','Polygon'],//default all
-            onStart:()=>{},            
-            onStop:()=>{},             
-            measurePointOptions:{      
+  import U from 'mapbox-gl-utils';
+  import 'mapbox-gl/dist/mapbox-gl.css';
+  import './src/index.less';
+  import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from './src/config';
+  import { MP } from './src/MP';
+  import { DrawingType } from '@/enums/mapEnum';
 
-            },
-            measureLineStringOptions:{ 
-            },
-            measurePolygonOptions:{    
-            }
-        }),"top-right")
-      });
-    });
-    // 销毁地图
+  import {
+    SnapPolygonMode,
+    SnapPointMode,
+    SnapLineMode,
+    SnapModeDrawStyles,
+    SnapDirectSelect,
+  } from 'mapbox-gl-draw-snap-mode';
 
-    // 加载地形
-    const handlerLoadTerrain = () => {
-        map.addSource('mapbox-dem', {
-            'type': 'raster-dem',
-            'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
-            'tileSize': 512,
-            'maxzoom': 14
-        });
+  import { customDrawStyles } from './Styles/Styles';
+  import Drawtool from '@/views/datamaintenance/components/drawtool.vue';
+  import { WktToGeojson, GeojsonToWkt } from './src/WktGeojsonTransform';
+  import { features } from 'process';
 
-        map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });
-    }
-    // 移除地图实例
-    onUnmounted(() => {
-      map ? map.remove() : null;
-    });
-  
-    // 数据绘制完成判断
-    const handlerDealFeature = (feature) => {
-      let existFeature = geojson.geojson.features.find((item, index) => {
-        return item.id == feature.id;
-      });
-  
-      if (existFeature) {
-        // 如果查找到了 则替换数据
-        for (let i = 0; i < geojson.geojson.features.length; i++) {
-          if (geojson.geojson.features[i].id == feature.id) {
-            geojson.geojson.features[i] = feature;
-          }
-        }
-      } else {
-        // 如果没找到数据则添加到数组
-        geojson.geojson.features.push(feature);
+  const openModal = ref(false);
+  const insertShpModal = ref(false);
+  const changeOpenModal = (value) => {
+    openModal.value = value;
+  };
+  const changeOpenInsertShpModal = (value) => {
+    insertShpModal.value = value;
+  };
+
+  // map参数类型
+  interface MapboxOptionsInterface {
+    mapOptions: mapboxgl.MapboxOptions;
+    control: DrawingType[];
+  }
+
+  const props = defineProps({
+    mapConfig: {
+      type: Object,
+      default: {},
+    },
+    layers: {
+      type: Array,
+      default: [],
+    },
+    location: {
+      type: Array,
+      default: [],
+    },
+    type: {
+      type: String,
+      default: '',
+    },
+    feature: {
+      type: String,
+      default: '',
+    },
+  });
+
+  console.log('mapConfig', props.mapConfig);
+
+  let nextMapControl: Array<any> = reactive([]);
+  nextMapControl = props.control
+    ? props.control.map((item) => {
+        return MapControlConfig[item];
+      })
+    : [];
+
+  // 定义地图容器
+  let map: Map;
+  let drawTool: any;
+  let popup: Popup;
+  let clickPoisition: Array<number> = [];
+  let selectFeature: Object = {};
+  let mp: any = null;
+  let geojson = reactive({
+    geojson: {},
+  });
+  let drawing = ref(false);
+
+  let drawGeojson = reactive({
+    geojson: {
+      type: 'FeatureCollection',
+      features: [],
+    },
+  });
+
+  const { createConfirm, createMessage } = useMessage();
+
+  // 定义地图回调emit
+  // 地图加载完成回调
+  const emit = defineEmits(['mapOnLoad', 'mapDraw', 'handlerDrawComplete']);
+
+  onMounted(() => {
+    mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
+    map = initMap();
+    map.on('load', () => {
+      // 根据地图配置信息加载地形数据
+      if (props.mapConfig.mode == '3D') {
+        handlerLoadTerrain();
       }
-      // 自动将数据返回给父组件
-      handlerDrawComplete();
-    };
-  
-    // 删除数据
-    const handlerDeleteFeature = (feature) => {
+
+      // 初始化绘图空间
+      // handlerInitDrawTool(null);
+
+      map.on('click', (e) => {
+        // handlerPreviewFeatureInfo(e);
+        clickPoisition = e.lngLat;
+      });
+
+      map.on('draw.selectionchange', (e) => {
+        // handlerCopyToTargetLayer(e);
+      });
+      emit('mapOnLoad', map);
+
+      // 设置绘图监听事件
+      map.on('draw.create', function (e) {
+        drawGeojson.geojson.features = e.features;
+        handlerDealFeature(e.features[0]);
+      });
+
+      map.on('draw.update', function (e) {
+        drawGeojson.geojson = e.features;
+        handlerDealFeature(e.features[0]);
+      });
+
+      map.on('draw.delete', function (e) {
+        handlerDeleteFeature(e.features[0]);
+      });
+
+      window.handlerCopyFeature = handlerCopyFeature;
+
+      // 测量工具
+      map.addControl(
+        new MeasureControl({
+          horizontal: true, //default false
+          btnBgColor: '#ffffff', //default '#ffffff'
+          btnActiveColor: '#ddd', //default '#ddd'
+          geometryClick: true, //defualt false
+          enableModes: ['Point', 'LineString', 'Polygon'], //default all
+          onStart: () => {},
+          onStop: () => {},
+          measurePointOptions: {},
+          measureLineStringOptions: {},
+          measurePolygonOptions: {},
+        }),
+        'top-right',
+      );
+    });
+  });
+  // 销毁地图
+
+  // 加载地形
+  const handlerLoadTerrain = () => {
+    map.addSource('mapbox-dem', {
+      type: 'raster-dem',
+      url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
+      tileSize: 512,
+      maxzoom: 14,
+    });
+
+    map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 });
+  };
+  // 移除地图实例
+  onUnmounted(() => {
+    map ? map.remove() : null;
+  });
+
+  // 数据绘制完成判断
+  const handlerDealFeature = (feature) => {
+    let existFeature = geojson.geojson.features.find((item, index) => {
+      return item.id == feature.id;
+    });
+
+    if (existFeature) {
+      // 如果查找到了 则替换数据
       for (let i = 0; i < geojson.geojson.features.length; i++) {
         if (geojson.geojson.features[i].id == feature.id) {
-          geojson.geojson.features.splice(i, 1);
+          geojson.geojson.features[i] = feature;
         }
       }
-      // handlerDrawComplete();
-    };
-  
-    // 初始化地图 返回地图实例
-    const initMap = () => {
-      return new mapboxgl.Map({
-        container: 'mapContainer',
-        language: 'zh-cmn',
-        projection: 'equirectangular', // wgs84参考系
-        style: MapboxDefaultStyle,
-        maxZoom: props.mapConfig.maxZoom ? props.mapConfig.maxZoom:18,
-        minZoom: props.mapConfig.minZoom ? props.mapConfig.minZoom:1,
-        zoom: props.mapConfig.zoom ? props.mapConfig.zoom:12,
-        pitch:props.mapConfig.angle ? props.mapConfig.angle:0,
-        center: props.mapConfig.center?.split(","),
+    } else {
+      // 如果没找到数据则添加到数组
+      geojson.geojson.features.push(feature);
+    }
+    // 自动将数据返回给父组件
+    handlerDrawComplete();
+  };
 
-      });
-    };
-  
-    const handlerMapControlClick = (handler: string) => {
-      handler === 'handlerDrawPoint' && handlerDrawPoint();
-      handler === 'handlerDrawLineString' && handlerDrawLineString();
-      handler === 'handlerDrawPolygon' && handlerDrawPolygon();
-    };
-    //绘制点
-    const handlerDrawPoint = () => {
-      mp.draw('Point');
-      mp.on('Point', function (e) {
-        emit('mapDraw', 'Point', e);
-      });
-    };
-    //绘制线
-    const handlerDrawLineString = () => {
-      mp.draw('LineString');
-      mp.on('LineString', function (e) {
-        emit('mapDraw', 'LineString', e);
-      });
-    };
-    //绘制面
-    const handlerDrawPolygon = () => {
-      mp.draw('Polygon');
-      mp.on('Polygon', function (e) {
-        emit('mapDraw', 'Polygon', e);
-      });
-    };
-    //删除标记
-    const handlerUnDraw = () => {
-      mp.deleteDraw();
-      emit('mapDraw', 'cancel');
-    };
-  
-    // 初始化绘图空间
-    const handlerInitDrawTool = (feature, bool) => {
-
-        // if (feature.features.length > 0) {
-            
-        //     feature.features.forEach((item) => {
-
-        //         if (item.geometry.type == 'MultiPolygon') {
-        //             let arr: any = ref([]);
-        //             item.geometry.coordinates.forEach((val) => {
-        //                 arr.value.push(val[0]);
-        //             });
-        //             item.geometry.coordinates = arr.value;
-        //             item.geometry.type = 'Polygon';
-        //         }
-        //     });
-
-        // }
-  
-        geojson.geojson = feature;
-
-
-        if (drawTool) {
-            drawTool.deleteAll();
-            if (feature.features) {
-                drawTool.set(geojson.geojson);
-            }
-        } else {
-            drawTool = new MapboxDraw({
-                modes: {
-                    ...MapboxDraw.modes,
-                    draw_point: SnapPointMode,
-                    draw_polygon: SnapPolygonMode,
-                    draw_line_string: SnapLineMode,
-                    direct_select: SnapDirectSelect,
-                },
-                styles: customDrawStyles,
-                userProperties: true,
-                snap: true,
-                snapOptions: {
-                    snapPx: 12, // defaults to 15
-                    snapToMidPoints: true, // defaults to false
-                    snapVertexPriorityDistance: 0.0025, // defaults to 1.25
-                },
-                guides: false,
-            });
-
-            map.addControl(drawTool, 'top-right');
-
-            if (feature.features) {
-                drawTool.set(geojson.geojson);
-            }
-        }
-
-        // 正在绘制
-        // if (bool) {
-        //     drawing.value = true;
-        // } else {
-        //     drawing.value = false;
-        // }
-
-        drawing.value = true;
-    };
-  
-    // 将图斑复制到指定图层
-    const handlerCopyToTargetLayer = (e) => {
-      if (e.features.length > 0) {
-        if (popup) {
-          popup.remove();
-          popup = null;
-        }
-  
-        selectFeature = e.features[0];
-  
-        popup = new mapboxgl.Popup({
-          closeButton: false,
-          closeOnClick: false,
-        });
-  
-        // 设置 popup 的位置和内容
-        popup
-          .setLngLat(clickPoisition)
-          .setHTML(
-            `
-                    <div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="handlerCopyFeature();">复制当前图斑</div>`,
-          )
-          .addTo(map);
-      } else {
-        popup.remove();
+  // 删除数据
+  const handlerDeleteFeature = (feature) => {
+    for (let i = 0; i < geojson.geojson.features.length; i++) {
+      if (geojson.geojson.features[i].id == feature.id) {
+        geojson.geojson.features.splice(i, 1);
       }
-    };
-  
-    const handlerCopyFeature = () => {
-      popup.remove();
-      createMessage.success('复制成功！');
-    };
-  
-    // 添加到图层
-    const handlerAddToLayerList = (layer) => {
-      handlerCheckLayerExist(layer);
-    };
-  
-    // 判断图层列表中是否一定添加
-    const handlerCheckLayerExist = (layer) => {
-      for (let i = 0; i < layerList.length; i++) {
-        if (layerList[i] == layer.id) {
-          return;
-        }
-      }
-      layerList.push(layer);
-    };
-  
-    const handlerCheckboxChange = (item) => {
-      console.log("itemitemitem",item);
-      handlerPreviewLayer(item);
-    };
-  
-    // 控制图层是否显示
-    const handlerPreviewLayer = (layer) => {
-      console.log("layersss",layer);
-      handlerLayerControler(layer);
-    };
-  
-    // 图层控制中心
-    const handlerLayerControler = (layerInfo) => {
+    }
+    // handlerDrawComplete();
+  };
 
-      layerInfo.layer = layerInfo.layer? layerInfo.layer : JSON.parse(layerInfo.style);
+  // 初始化地图 返回地图实例
+  const initMap = () => {
+    return new mapboxgl.Map({
+      container: 'mapContainer',
+      language: 'zh-cmn',
+      projection: 'equirectangular', // wgs84参考系
+      style: MapboxDefaultStyle,
+      maxZoom: props.mapConfig.maxZoom ? props.mapConfig.maxZoom : 18,
+      minZoom: props.mapConfig.minZoom ? props.mapConfig.minZoom : 1,
+      zoom: props.mapConfig.zoom ? props.mapConfig.zoom : 12,
+      pitch: props.mapConfig.angle ? props.mapConfig.angle : 0,
+      center: props.mapConfig.center?.split(','),
+    });
+  };
 
-      if (map.getSource(layerInfo.layer.id)) {
-        if (layerInfo.checked) {
-          map.setLayoutProperty(layerInfo.layer.id, 'visibility', 'visible');
-        } else {
-          map.setLayoutProperty(layerInfo.layer.id, 'visibility', 'none');
-        }
-      } else {
-        map.addLayer(layerInfo.layer);
-        map.on('click', layerInfo.layer.id, function (e) {
-          handlerPreviewFeatureInfo(e);
-        });
-      }
-    };
-  
-    // 查看列表数据
-    const handlerDataList = () => {};
-  
-    // 图斑属性查看
-    const handlerPreviewFeatureInfo = (e) => {
-      if (e.features) {
-        isOpen.value = true;
-      }
-    };
-  
-    const handlerClose = (e) => {
-      isOpen.value = e;
-    };
-  
-    // 图斑定位
-    const handlerLocation = (lngLat) => {
-      map.flyTo({
-        center: lngLat,
-        zoom: 17,
-        speed: 10, // 飞行速度
-        curve: 1, // 飞行曲线
-        easing(t) {
-          // 飞行动画函数
-          return t;
-        },
-      });
-    };
-  
-    // 编辑图斑
-    const handlerEdit = (info) => {
-      initDraw(info);
-    };
-  
-    const initDraw = (layerInfo) => {
+  const handlerMapControlClick = (handler: string) => {
+    handler === 'handlerDrawPoint' && handlerDrawPoint();
+    handler === 'handlerDrawLineString' && handlerDrawLineString();
+    handler === 'handlerDrawPolygon' && handlerDrawPolygon();
+  };
+  //绘制点
+  const handlerDrawPoint = () => {
+    mp.draw('Point');
+    mp.on('Point', function (e) {
+      emit('mapDraw', 'Point', e);
+    });
+  };
+  //绘制线
+  const handlerDrawLineString = () => {
+    mp.draw('LineString');
+    mp.on('LineString', function (e) {
+      emit('mapDraw', 'LineString', e);
+    });
+  };
+  //绘制面
+  const handlerDrawPolygon = () => {
+    mp.draw('Polygon');
+    mp.on('Polygon', function (e) {
+      emit('mapDraw', 'Polygon', e);
+    });
+  };
+  //删除标记
+  const handlerUnDraw = () => {
+    mp.deleteDraw();
+    emit('mapDraw', 'cancel');
+  };
 
-      // 实例化绘图工具
+  // 初始化绘图空间
+  const handlerInitDrawTool = (feature, bool) => {
+    // if (feature.features.length > 0) {
+
+    //     feature.features.forEach((item) => {
+
+    //         if (item.geometry.type == 'MultiPolygon') {
+    //             let arr: any = ref([]);
+    //             item.geometry.coordinates.forEach((val) => {
+    //                 arr.value.push(val[0]);
+    //             });
+    //             item.geometry.coordinates = arr.value;
+    //             item.geometry.type = 'Polygon';
+    //         }
+    //     });
+
+    // }
+
+    geojson.geojson = feature;
+
+    if (drawTool) {
+      drawTool.deleteAll();
+      if (feature.features) {
+        drawTool.set(geojson.geojson);
+      }
+    } else {
       drawTool = new MapboxDraw({
         modes: {
           ...MapboxDraw.modes,
           draw_point: SnapPointMode,
-          // draw_polygon: SnapPolygonMode,
-          // draw_line_string: SnapLineMode,
+          draw_polygon: SnapPolygonMode,
+          draw_line_string: SnapLineMode,
           direct_select: SnapDirectSelect,
         },
         styles: customDrawStyles,
         userProperties: true,
         snap: true,
         snapOptions: {
-          snapPx: 15, // defaults to 15
+          snapPx: 12, // defaults to 15
           snapToMidPoints: true, // defaults to false
           snapVertexPriorityDistance: 0.0025, // defaults to 1.25
         },
         guides: false,
       });
-  
+
       map.addControl(drawTool, 'top-right');
-  
-      // let geojson:Object = {};
-      // if (layerInfo.dataType == "面") {
-      //     geojson.type = "Polygon";
-      //     geojson.coordinates = geojson.coordinates[0];
-      // } else if (layerInfo.dataType == "点") {
-      //     geojson.type = "Point";
-      //     geojson.coordinates = geojson.coordinates;
-      // } else if (layerInfo.dataType == "线") {
-      //   geojson.type = "LineString";
-      //   geojson.coordinates = geojson.coordinates[0];
-      // }
-      // if (formData.lat && formData.lng) {
-      //   formData.lat = geojson.coordinates[1];
-      //   formData.lng = geojson.coordinates[0];
-      // }
-      // geojson = {
-      //   type: "FeatureCollection",
-      //   features: [
-      //     {
-      //       type: "Feature",
-      //       geometry: geojson,
-      //     },
-      //   ],
-      // };
-      // map.setLayoutProperty("pbfLayer", "visibility", "none");
-      // drawTool.set(geojson);
-    };
-  
-    const handlerDrawComplete = () => {
-      let arr = [];
-      geojson.geojson.features.forEach((item, index) => {
-        let wktStr = GeojsonToWkt(item.geometry);
-        let obj = {
-          columnName: 'mapgeom',
-          value: wktStr,
-        };
-        arr.push(obj);
-      });
-      console.log('aaaa', arr);
-      emit('handlerDrawComplete', arr);
-    };
-  
-    const handlerCancleDraw = () => {
 
-      map.removeControl(drawTool);
-      drawTool = null;
-      drawing.value = false;
+      if (feature.features) {
+        drawTool.set(geojson.geojson);
+      }
+    }
 
-      // 清空详情图层
-      if(map.getSource("detailsSource")){
-        map.getSource("detailsSource").setData({
-          type: 'FeatureCollection',
-          features: [],
-        })
+    // 正在绘制
+    // if (bool) {
+    //     drawing.value = true;
+    // } else {
+    //     drawing.value = false;
+    // }
+
+    drawing.value = true;
+  };
+
+  // 将图斑复制到指定图层
+  const handlerCopyToTargetLayer = (e) => {
+    if (e.features.length > 0) {
+      if (popup) {
+        popup.remove();
+        popup = null;
       }
 
-    };
-  
-    /**
-     * 
-     * 查看图斑
-     * 
-     * 添加图斑
-     * 
-     * 编辑图斑
-     * 
-     * status 操作类型
-     * 
-     * features 空间数据
-     * 
-     * [
-     *  {id:"8448048304dofhaofh0af0q4",geom:""}
-     * ]
-     * */ 
-    const handlerDraw = (status:string,features = null, bool = false) => {
-      let geo = {
+      selectFeature = e.features[0];
+
+      popup = new mapboxgl.Popup({
+        closeButton: false,
+        closeOnClick: false,
+      });
+
+      // 设置 popup 的位置和内容
+      popup
+        .setLngLat(clickPoisition)
+        .setHTML(
+          `
+                    <div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="handlerCopyFeature();">复制当前图斑</div>`,
+        )
+        .addTo(map);
+    } else {
+      popup.remove();
+    }
+  };
+
+  const handlerCopyFeature = () => {
+    popup.remove();
+    createMessage.success('复制成功！');
+  };
+
+  // 添加到图层
+  const handlerAddToLayerList = (layer) => {
+    handlerCheckLayerExist(layer);
+  };
+
+  // 判断图层列表中是否一定添加
+  const handlerCheckLayerExist = (layer) => {
+    for (let i = 0; i < layerList.length; i++) {
+      if (layerList[i] == layer.id) {
+        return;
+      }
+    }
+    layerList.push(layer);
+  };
+
+  const handlerCheckboxChange = (item) => {
+    console.log('itemitemitem', item);
+    handlerPreviewLayer(item);
+  };
+
+  // 控制图层是否显示
+  const handlerPreviewLayer = (layer) => {
+    console.log('layersss', layer);
+    handlerLayerControler(layer);
+  };
+
+  // 图层控制中心
+  const handlerLayerControler = (layerInfo) => {
+    layerInfo.layer = layerInfo.layer ? layerInfo.layer : JSON.parse(layerInfo.style);
+
+    if (map.getSource(layerInfo.layer.id)) {
+      if (layerInfo.checked) {
+        map.setLayoutProperty(layerInfo.layer.id, 'visibility', 'visible');
+      } else {
+        map.setLayoutProperty(layerInfo.layer.id, 'visibility', 'none');
+      }
+    } else {
+      map.addLayer(layerInfo.layer);
+      map.on('click', layerInfo.layer.id, function (e) {
+        handlerPreviewFeatureInfo(e);
+      });
+    }
+  };
+
+  // 查看列表数据
+  const handlerDataList = () => {};
+
+  // 图斑属性查看
+  const handlerPreviewFeatureInfo = (e) => {
+    if (e.features) {
+      isOpen.value = true;
+    }
+  };
+
+  const handlerClose = (e) => {
+    isOpen.value = e;
+  };
+
+  // 图斑定位
+  const handlerLocation = (lngLat) => {
+    map.flyTo({
+      center: lngLat,
+      zoom: 17,
+      speed: 10, // 飞行速度
+      curve: 1, // 飞行曲线
+      easing(t) {
+        // 飞行动画函数
+        return t;
+      },
+    });
+  };
+
+  // 编辑图斑
+  const handlerEdit = (info) => {
+    initDraw(info);
+  };
+
+  const initDraw = (layerInfo) => {
+    // 实例化绘图工具
+    drawTool = new MapboxDraw({
+      modes: {
+        ...MapboxDraw.modes,
+        draw_point: SnapPointMode,
+        // draw_polygon: SnapPolygonMode,
+        // draw_line_string: SnapLineMode,
+        direct_select: SnapDirectSelect,
+      },
+      styles: customDrawStyles,
+      userProperties: true,
+      snap: true,
+      snapOptions: {
+        snapPx: 15, // defaults to 15
+        snapToMidPoints: true, // defaults to false
+        snapVertexPriorityDistance: 0.0025, // defaults to 1.25
+      },
+      guides: false,
+    });
+
+    map.addControl(drawTool, 'top-right');
+
+    // let geojson:Object = {};
+    // if (layerInfo.dataType == "面") {
+    //     geojson.type = "Polygon";
+    //     geojson.coordinates = geojson.coordinates[0];
+    // } else if (layerInfo.dataType == "点") {
+    //     geojson.type = "Point";
+    //     geojson.coordinates = geojson.coordinates;
+    // } else if (layerInfo.dataType == "线") {
+    //   geojson.type = "LineString";
+    //   geojson.coordinates = geojson.coordinates[0];
+    // }
+    // if (formData.lat && formData.lng) {
+    //   formData.lat = geojson.coordinates[1];
+    //   formData.lng = geojson.coordinates[0];
+    // }
+    // geojson = {
+    //   type: "FeatureCollection",
+    //   features: [
+    //     {
+    //       type: "Feature",
+    //       geometry: geojson,
+    //     },
+    //   ],
+    // };
+    // map.setLayoutProperty("pbfLayer", "visibility", "none");
+    // drawTool.set(geojson);
+  };
+
+  const handlerDrawComplete = () => {
+    let arr = [];
+    geojson.geojson.features.forEach((item, index) => {
+      let wktStr = GeojsonToWkt(item.geometry);
+      let obj = {
+        columnName: 'mapgeom',
+        value: wktStr,
+      };
+      arr.push(obj);
+    });
+    console.log('aaaa', arr);
+    emit('handlerDrawComplete', arr);
+  };
+
+  const handlerCancleDraw = () => {
+    map.removeControl(drawTool);
+    drawTool = null;
+    drawing.value = false;
+
+    // 清空详情图层
+    if (map.getSource('detailsSource')) {
+      map.getSource('detailsSource').setData({
         type: 'FeatureCollection',
         features: [],
-      };
-      // 清空详情图斑
-      if(map.getSource("detailsSource")){
-        map.getSource("detailsSource").setData({
-          type: 'FeatureCollection',
-          features: [],
-        })
-      }
-      if (features == null) {
-        bool = true;
-      } else {
-        if (features.length > 0) {
-          for (let i = 0; i < features.length; i++) {
-            try {
-              let featureTemp = WktToGeojson(features[i]?.mapgeom);
-              let feature = {
-                    id: generateUUID(),
-                    type: 'Feature',
-                    properties: {},
-                    geometry: featureTemp,
-              };
-              geo.features.push(feature);
+      });
+    }
+  };
 
-              // 获取第一个图斑的中心点跳转定位
-              if(i == 0){
-                let lngLat = getGeometryCenter(feature);
-                handlerLocation(lngLat);
-              }
-            } catch (e) {
-              createMessage.error("WKT数据格式解析错误，请检查WKT数据格式是否有误！");
+  /**
+   *
+   * 查看图斑
+   *
+   * 添加图斑
+   *
+   * 编辑图斑
+   *
+   * status 操作类型
+   *
+   * features 空间数据
+   *
+   * [
+   *  {id:"8448048304dofhaofh0af0q4",geom:""}
+   * ]
+   * */
+  const handlerDraw = (status: string, features = null, bool = false) => {
+    let geo = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+    // 清空详情图斑
+    if (map.getSource('detailsSource')) {
+      map.getSource('detailsSource').setData({
+        type: 'FeatureCollection',
+        features: [],
+      });
+    }
+    if (features == null) {
+      bool = true;
+    } else {
+      if (features.length > 0) {
+        for (let i = 0; i < features.length; i++) {
+          try {
+            let featureTemp = WktToGeojson(features[i]?.mapgeom);
+            let feature = {
+              id: generateUUID(),
+              type: 'Feature',
+              properties: {},
+              geometry: featureTemp,
+            };
+            geo.features.push(feature);
+
+            // 获取第一个图斑的中心点跳转定位
+            if (i == 0) {
+              let lngLat = getGeometryCenter(feature);
+              handlerLocation(lngLat);
             }
+          } catch (e) {
+            createMessage.error('WKT数据格式解析错误，请检查WKT数据格式是否有误！');
           }
         }
       }
-      switch(status){
-        case "Add": 
-            handlerInitDrawTool(geo, bool);
-          break;
-        case "Edit":
-            handlerInitDrawTool(geo, bool);
-          break;
-        case "Details":
-            handlerDetails(geo);
-          break;
-        default:
-          createMessage.error("请传入操作类型！");
-      }
-    };
-
-    // 查看图斑详情
-    const handlerDetails = (geojson) => {
-      if(map.getSource("detailsSource")){
-        map.getSource("detailsSource").setData(geojson);
-      }else{
-        map.addSource("detailsSource",{
-          type:"geojson",
-          data:geojson
-        })
-        map.addLayer(
-          {
-            "id": "detailsLayer",
-            "type": "fill",
-            "source": "detailsSource",
-            'layout':{
-
-            },
-            'paint': {
-              //填充颜色
-              'fill-color': '#3badc9', 
-              //透明度设置
-              "fill-opacity": 0.4,
-            }
-          }
-        )
-
-        map.addLayer(
-          {
-            "id": "detailsLayerLine",
-            "type": "line",
-            "source": "detailsSource",
-            'layout':{
-
-            },
-            'paint': {
-              'line-color': '#3badc9',
-              'line-width': 2
-            }
-          }
-        )
-      }
     }
+    switch (status) {
+      case 'Add':
+        handlerInitDrawTool(geo, bool);
+        break;
+      case 'Edit':
+        handlerInitDrawTool(geo, bool);
+        break;
+      case 'Details':
+        handlerDetails(geo);
+        break;
+      default:
+        createMessage.error('请传入操作类型！');
+    }
+  };
 
-    // 创建查看图斑图层
+  // 查看图斑详情
+  const handlerDetails = (geojson) => {
+    if (map.getSource('detailsSource')) {
+      map.getSource('detailsSource').setData(geojson);
+    } else {
+      map.addSource('detailsSource', {
+        type: 'geojson',
+        data: geojson,
+      });
+      map.addLayer({
+        id: 'detailsLayer',
+        type: 'fill',
+        source: 'detailsSource',
+        layout: {},
+        paint: {
+          //填充颜色
+          'fill-color': '#3badc9',
+          //透明度设置
+          'fill-opacity': 0.4,
+        },
+      });
 
+      map.addLayer({
+        id: 'detailsLayerLine',
+        type: 'line',
+        source: 'detailsSource',
+        layout: {},
+        paint: {
+          'line-color': '#3badc9',
+          'line-width': 2,
+        },
+      });
+    }
+  };
 
-  
+  // 创建查看图斑图层
 
-    defineExpose({
-      handlerDraw,
-      handlerLocation,
-      handlerCancleDraw,
-    });
-    
-  </script>
-  
-  <style>
-    .map-container {
-      width: 100%;
-      height: 100%;
-    }
+  defineExpose({
+    handlerDraw,
+    handlerLocation,
+    handlerCancleDraw,
+  });
+</script>
 
-    .map-box {
-      width: 100%;
-      height: 100%;
-    }
+<style>
+  .map-container {
+    width: 100%;
+    height: 100%;
+  }
 
-    .layer-control-center {
-      position: absolute;
-      top: 15px;
-      left: 15px;
-      background:#fff;
-      border-radius: 8px;
-    }
+  .map-box {
+    width: 100%;
+    height: 100%;
+  }
 
-    .layer-control-center p {
-      margin: 0px;
-    }
+  .layer-control-center {
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    background: #fff;
+    border-radius: 8px;
+  }
 
-    .layer-control-center .ant-checkbox-wrapper{
+  .layer-control-center p {
+    margin: 0px;
+  }
 
-    }
+  .layer-control-center .ant-checkbox-wrapper {
+  }
 
-    .draw-control-center {
-      position: absolute;
-      padding: 8px;
-      top: 15px;
-      right: 15px;
-      background: #ffffff;
-      border-radius: 12px;
-    }
+  .draw-control-center {
+    position: absolute;
+    padding: 8px;
+    top: 15px;
+    right: 15px;
+    background: #ffffff;
+    border-radius: 12px;
+  }
 
-    .draw-control-center .draw-btn {
-      float: left;
-      margin: 0px 7px;
-      padding: 5px;
-      border-radius: 5px;
-    }
-  
-    .draw-control-center .draw-btn:hover {
-      background-color: rgb(0 0 0/5%);
-      cursor: pointer;
-    }
+  .draw-control-center .draw-btn {
+    float: left;
+    margin: 0px 7px;
+    padding: 5px;
+    border-radius: 5px;
+  }
 
-    .mapboxgl-ctrl-group:not(:empty) {
-      box-shadow: none;
-    }
+  .draw-control-center .draw-btn:hover {
+    background-color: rgb(0 0 0/5%);
+    cursor: pointer;
+  }
 
-    .mapboxgl-ctrl-group {
-      padding: 10px;
-      border-radius: 12px;
-      position: relative;
-      right: 140px;
-      top: 5px;
-    }
-    .mapbox-gl-draw_ctrl-draw-btn {
-      width: 20px !important;
-      height: 20px !important;
-      float: left;
-    }
+  .mapboxgl-ctrl-group:not(:empty) {
+    box-shadow: none;
+  }
 
-    .mapboxgl-ctrl-top-right {
+  .mapboxgl-ctrl-group {
+    padding: 10px;
+    border-radius: 12px;
+    position: relative;
+    right: 140px;
+    top: 5px;
+  }
+  .mapbox-gl-draw_ctrl-draw-btn {
+    width: 20px !important;
+    height: 20px !important;
+    float: left;
+  }
 
-    }
-  
-    .mapboxgl-ctrl-group button + button {
-      border: 0px;
-      margin: 0px 6px;
-    }
-  
-    .mapbox-gl-draw_ctrl-draw-btn:hover {
-      transform: scale(1.2);
-    }
+  .mapboxgl-ctrl-top-right {
+  }
 
-    .mapbox-gl-draw_polygon {
-      background-image: url(/polygon.png);
-      background-size: 100% 100%;
-      width: 100px;
-      height: 100px;
-    }
-    .mapbox-gl-draw_point {
-      background-image: url(/point.png);
-      background-size: 100% 100%;
-      width: 100px;
-      height: 100px;
-    }
-    .mapbox-gl-draw_line {
-      background-image: url(/line.png);
-      background-size: 100% 100%;
-      width: 100px;
-      height: 100px;
-      margin: 0px 6px;
-    }
-  
-    .mapbox-gl-draw_trash {
-      background-image: url(/del.png);
-      background-size: 100% 100%;
-      width: 100px;
-      height: 100px;
-    }
-  
-    .mapbox-gl-draw_combine {
-      background-image: url(/combine.png);
-      background-size: 100% 100%;
-      width: 100px;
-      height: 100px;
-    }
-  
-    .mapbox-gl-draw_uncombine {
-      background-image: url(/uncombine.png);
-      background-size: 100% 100%;
-      width: 100px;
-      height: 100px;
-    }
+  .mapboxgl-ctrl-group button + button {
+    border: 0px;
+    margin: 0px 6px;
+  }
 
-    .jas-ctrl-measure{
-        position:relative;
-        top:6px;
-        right:10px;
-    }
+  .mapbox-gl-draw_ctrl-draw-btn:hover {
+    transform: scale(1.2);
+  }
 
-    .jas-ctrl-measure-item{
-        height:22px;
-        color: #fff;
-    }
+  .mapbox-gl-draw_polygon {
+    background-image: url(/polygon.png);
+    background-size: 100% 100%;
+    width: 100px;
+    height: 100px;
+  }
+  .mapbox-gl-draw_point {
+    background-image: url(/point.png);
+    background-size: 100% 100%;
+    width: 100px;
+    height: 100px;
+  }
+  .mapbox-gl-draw_line {
+    background-image: url(/line.png);
+    background-size: 100% 100%;
+    width: 100px;
+    height: 100px;
+    margin: 0px 6px;
+  }
 
-  </style>
-  
\ No newline at end of file
+  .mapbox-gl-draw_trash {
+    background-image: url(/del.png);
+    background-size: 100% 100%;
+    width: 100px;
+    height: 100px;
+  }
+
+  .mapbox-gl-draw_combine {
+    background-image: url(/combine.png);
+    background-size: 100% 100%;
+    width: 100px;
+    height: 100px;
+  }
+
+  .mapbox-gl-draw_uncombine {
+    background-image: url(/uncombine.png);
+    background-size: 100% 100%;
+    width: 100px;
+    height: 100px;
+  }
+
+  .jas-ctrl-measure {
+    position: relative;
+    top: 6px;
+    right: 10px;
+  }
+
+  .jas-ctrl-measure-item {
+    height: 22px;
+    color: #fff;
+  }
+</style>
diff --git a/src/components/MapboxMaps/MapboxMap.vue b/src/components/MapboxMaps/MapboxMap.vue
index f6ea28b4..e0e0598d 100644
--- a/src/components/MapboxMaps/MapboxMap.vue
+++ b/src/components/MapboxMaps/MapboxMap.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="map-container">
-      <div id="mapContainer" class="map-box"></div>
-      <!-- <div class="map-control">
+  <div class="map-container">
+    <div id="mapContainer" class="map-box"></div>
+    <!-- <div class="map-control">
         <img
           v-for="(item, index) in nextMapControl"
           :key="index"
@@ -11,238 +11,236 @@
         />
         <img v-show="nextMapControl.length > 0" @click="handlerUnDraw" src="/del.png" title="清除" />
       </div> -->
-      <LayerComponent
-        @changeOpenModal="changeOpenModal"
-        @changeOpenInsertShpModal="changeOpenInsertShpModal"
-      />
-      <LayerControl @draw="handlerDrawPolygon" />
-      <UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal" />
+    <LayerComponent
+      @changeOpenModal="changeOpenModal"
+      @changeOpenInsertShpModal="changeOpenInsertShpModal"
+    />
+    <LayerControl @draw="handlerDrawPolygon" />
+    <UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal" />
 
-      <InsertShp v-model:openModal="insertShpModal" />
+    <InsertShp v-model:openModal="insertShpModal" />
 
-      <!-- <AddLayer v-model:openModal="insertShpModal" /> -->
-      
-      <DataListComponent />
-      <RightShowInfo v-model:openModal="openRightInfo" />
-    </div>
-  </template>
-  
-  <script lang="ts" setup>
-    import { onMounted, onUnmounted, defineProps, reactive, ref,defineExpose } from 'vue';
-    import { useMessage } from '@/hooks/web/useMessage';
-    import mapboxgl, { Map, Popup } from 'mapbox-gl';
-  
-    // 图形绘制工具类
-    import MapboxDraw from '@mapbox/mapbox-gl-draw';
-  
-    import U from 'mapbox-gl-utils';
-    import 'mapbox-gl/dist/mapbox-gl.css';
-    import './src/index.less';
-    import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from './src/config';
-    import { MP } from './src/MP';
-    import { DrawingType } from '@/enums/mapEnum';
-  
-    import {
-      SnapPolygonMode,
-      SnapPointMode,
-      SnapLineMode,
-      SnapModeDrawStyles,
-      SnapDirectSelect,
-    } from 'mapbox-gl-draw-snap-mode';
-    import LayerComponent from './LayerComponent/index.vue';
-    import LayerControl from './LayerControl/index.vue';
-    import UseModal from './Modal/index.vue';
-    import InsertShp from './InsertShp/index.vue';
-    import AddLayer from './AddLayer/index.vue'
-    import DataListComponent from './DataListComponent/index.vue';
-    import RightShowInfo from './RightShowInfo/index.vue';
-  
-    const openModal = ref(false);
-    const insertShpModal = ref(false);
-    const openRightInfo = ref(false);
-    const changeOpenModal = (value) => {
-      openModal.value = value;
-    };
-    const changeOpenInsertShpModal = (value) => {
-      insertShpModal.value = value;
-    };
-  
-    // map参数类型
-    interface MapboxOptionsInterface {
-      mapOptions: mapboxgl.MapboxOptions;
-      control: DrawingType[];
-    }
-    const props = defineProps<MapboxOptionsInterface>();
-  
-    let nextMapControl: Array<any> = reactive([]);
-    nextMapControl = props.control
-      ? props.control.map((item) => {
-          console.log('item::: ', item);
-          return MapControlConfig[item];
-        })
-      : [];
-  
-    console.log('nextMapControl::: ', nextMapControl);
-  
-    // 定义地图容器
-    let map: Map;
-    let popup: Popup;
-    let clickPoisition: Array<number> = [];
-    let selectFeature: Object = {};
-    let mp: any = null;
-  
-    const { createConfirm, createMessage } = useMessage();
-  
-    // 定义地图回调emit
-    // 地图加载完成回调
-    const emit = defineEmits(['mapOnLoad', 'mapDraw']);
-  
-    onMounted(() => {
-      mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
-      map = initMap();
-      map.on('load', () => {
-        //挂载mapbox-gl-utils
-        // U.init(map);
-        mp = new MP(map);
-        emit('mapOnLoad', map);
-  
-        // 初始化绘图空间
-        handlerInitDrawTool();
-  
-        map.on('click', (e) => {
-          clickPoisition = e.lngLat;
-        });
-  
-        map.on('draw.selectionchange', (e) => {
-          handlerCopyToTargetLayer(e);
-        });
-  
-        window.handlerCopyFeature = handlerCopyFeature;
+    <!-- <AddLayer v-model:openModal="insertShpModal" /> -->
+
+    <DataListComponent />
+    <RightShowInfo v-model:openModal="openRightInfo" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, onUnmounted, defineProps, reactive, ref, defineExpose } from 'vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import mapboxgl, { Map, Popup } from 'mapbox-gl';
+
+  // 图形绘制工具类
+  import MapboxDraw from '@mapbox/mapbox-gl-draw';
+
+  import U from 'mapbox-gl-utils';
+  import 'mapbox-gl/dist/mapbox-gl.css';
+  import './src/index.less';
+  import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from './src/config';
+  import { MP } from './src/MP';
+  import { DrawingType } from '@/enums/mapEnum';
+
+  import {
+    SnapPolygonMode,
+    SnapPointMode,
+    SnapLineMode,
+    SnapModeDrawStyles,
+    SnapDirectSelect,
+  } from 'mapbox-gl-draw-snap-mode';
+  import LayerComponent from './LayerComponent/index.vue';
+  import LayerControl from './LayerControl/index.vue';
+  import UseModal from './Modal/index.vue';
+  import InsertShp from './InsertShp/index.vue';
+  import AddLayer from './AddLayer/index.vue';
+  import DataListComponent from './DataListComponent/index.vue';
+  import RightShowInfo from './RightShowInfo/index.vue';
+
+  const openModal = ref(false);
+  const insertShpModal = ref(false);
+  const openRightInfo = ref(false);
+  const changeOpenModal = (value) => {
+    openModal.value = value;
+  };
+  const changeOpenInsertShpModal = (value) => {
+    insertShpModal.value = value;
+  };
+
+  // map参数类型
+  interface MapboxOptionsInterface {
+    mapOptions: mapboxgl.MapboxOptions;
+    control: DrawingType[];
+  }
+  const props = defineProps<MapboxOptionsInterface>();
+
+  let nextMapControl: Array<any> = reactive([]);
+  nextMapControl = props.control
+    ? props.control.map((item) => {
+        console.log('item::: ', item);
+        return MapControlConfig[item];
+      })
+    : [];
+
+  console.log('nextMapControl::: ', nextMapControl);
+
+  // 定义地图容器
+  let map: Map;
+  let popup: Popup;
+  let clickPoisition: Array<number> = [];
+  let selectFeature: Object = {};
+  let mp: any = null;
+
+  const { createConfirm, createMessage } = useMessage();
+
+  // 定义地图回调emit
+  // 地图加载完成回调
+  const emit = defineEmits(['mapOnLoad', 'mapDraw']);
+
+  onMounted(() => {
+    mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
+    map = initMap();
+    map.on('load', () => {
+      //挂载mapbox-gl-utils
+      // U.init(map);
+      mp = new MP(map);
+      emit('mapOnLoad', map);
+
+      // 初始化绘图空间
+      handlerInitDrawTool();
+
+      map.on('click', (e) => {
+        clickPoisition = e.lngLat;
       });
+
+      map.on('draw.selectionchange', (e) => {
+        handlerCopyToTargetLayer(e);
+      });
+
+      window.handlerCopyFeature = handlerCopyFeature;
     });
-    // 销毁地图
-    // 移除地图实例
-    onUnmounted(() => {
-      map ? map.remove() : null;
+  });
+  // 销毁地图
+  // 移除地图实例
+  onUnmounted(() => {
+    map ? map.remove() : null;
+  });
+  // 初始化地图
+  // 返回地图实例
+  const initMap = () => {
+    return new mapboxgl.Map({
+      container: 'mapContainer',
+      language: 'zh-cmn',
+      projection: 'equirectangular', // wgs84参考系
+      style: MapboxDefaultStyle,
+      maxZoom: 22,
+      minZoom: 6,
+      ...props.mapOptions,
     });
-    // 初始化地图
-    // 返回地图实例
-    const initMap = () => {
-      return new mapboxgl.Map({
-        container: 'mapContainer',
-        language: 'zh-cmn',
-        projection: 'equirectangular', // wgs84参考系
-        style: MapboxDefaultStyle,
-        maxZoom: 22,
-        minZoom: 6,
-        ...props.mapOptions,
-      });
-    };
-  
-    const handlerMapControlClick = (handler: string) => {
-      handler === 'handlerDrawPoint' && handlerDrawPoint();
-      handler === 'handlerDrawLineString' && handlerDrawLineString();
-      handler === 'handlerDrawPolygon' && handlerDrawPolygon();
-    };
-    //绘制点
-    const handlerDrawPoint = () => {
-      mp.draw('Point');
-      mp.on('Point', function (e) {
-        emit('mapDraw', 'Point', e);
-      });
-    };
-    //绘制线
-    const handlerDrawLineString = () => {
-      mp.draw('LineString');
-      mp.on('LineString', function (e) {
-        emit('mapDraw', 'LineString', e);
-      });
-    };
-    //绘制面
-    const handlerDrawPolygon = () => {
-      mp.draw('Polygon');
-      mp.on('Polygon', function (e) {
-        emit('mapDraw', 'Polygon', e);
-      });
-    };
-    //删除标记
-    const handlerUnDraw = () => {
-      mp.deleteDraw();
-      emit('mapDraw', 'cancel');
-    };
-  
-    // 初始化绘图空间
-    const handlerInitDrawTool = () => {
-      let drawTool = new MapboxDraw({
-        modes: {
-          ...MapboxDraw.modes,
-          draw_point: SnapPointMode,
-          draw_polygon: SnapPolygonMode,
-          draw_line_string: SnapLineMode,
-          direct_select: SnapDirectSelect,
-        },
-        // Styling guides
-        styles: SnapModeDrawStyles,
-        userProperties: true,
-        // Config snapping features
-        snap: true,
-        snapOptions: {
-          snapPx: 15, // defaults to 15
-          snapToMidPoints: true, // defaults to false
-          snapVertexPriorityDistance: 0.0025, // defaults to 1.25
-        },
-        guides: true,
-      });
-  
-      map.addControl(drawTool, 'top-right');
-    };
-  
-    // 将图斑复制到指定图层
-    const handlerCopyToTargetLayer = (e) => {
-      if (e.features.length > 0) {
-        if (popup) {
-          popup.remove();
-          popup = null;
-        }
-  
-        selectFeature = e.features[0];
-  
-        popup = new mapboxgl.Popup({
-          closeButton: false,
-          closeOnClick: false,
-        });
-  
-        // 设置 popup 的位置和内容
-        popup
-          .setLngLat(clickPoisition)
-          .setHTML(
-            `
-                  <div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="handlerCopyFeature();">复制当前图斑</div>`,
-          )
-          .addTo(map);
-      } else {
+  };
+
+  const handlerMapControlClick = (handler: string) => {
+    handler === 'handlerDrawPoint' && handlerDrawPoint();
+    handler === 'handlerDrawLineString' && handlerDrawLineString();
+    handler === 'handlerDrawPolygon' && handlerDrawPolygon();
+  };
+  //绘制点
+  const handlerDrawPoint = () => {
+    mp.draw('Point');
+    mp.on('Point', function (e) {
+      emit('mapDraw', 'Point', e);
+    });
+  };
+  //绘制线
+  const handlerDrawLineString = () => {
+    mp.draw('LineString');
+    mp.on('LineString', function (e) {
+      emit('mapDraw', 'LineString', e);
+    });
+  };
+  //绘制面
+  const handlerDrawPolygon = () => {
+    mp.draw('Polygon');
+    mp.on('Polygon', function (e) {
+      emit('mapDraw', 'Polygon', e);
+    });
+  };
+  //删除标记
+  const handlerUnDraw = () => {
+    mp.deleteDraw();
+    emit('mapDraw', 'cancel');
+  };
+
+  // 初始化绘图空间
+  const handlerInitDrawTool = () => {
+    let drawTool = new MapboxDraw({
+      modes: {
+        ...MapboxDraw.modes,
+        draw_point: SnapPointMode,
+        draw_polygon: SnapPolygonMode,
+        draw_line_string: SnapLineMode,
+        direct_select: SnapDirectSelect,
+      },
+      // Styling guides
+      styles: SnapModeDrawStyles,
+      userProperties: true,
+      // Config snapping features
+      snap: true,
+      snapOptions: {
+        snapPx: 15, // defaults to 15
+        snapToMidPoints: true, // defaults to false
+        snapVertexPriorityDistance: 0.0025, // defaults to 1.25
+      },
+      guides: true,
+    });
+
+    // map.addControl(drawTool, 'top-right');
+  };
+
+  // 将图斑复制到指定图层
+  const handlerCopyToTargetLayer = (e) => {
+    if (e.features.length > 0) {
+      if (popup) {
         popup.remove();
+        popup = null;
       }
-    };
-  
-    const handlerCopyFeature = () => {
-      console.log(selectFeature);
+
+      selectFeature = e.features[0];
+
+      popup = new mapboxgl.Popup({
+        closeButton: false,
+        closeOnClick: false,
+      });
+
+      // 设置 popup 的位置和内容
+      popup
+        .setLngLat(clickPoisition)
+        .setHTML(
+          `
+                  <div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="handlerCopyFeature();">复制当前图斑</div>`,
+        )
+        .addTo(map);
+    } else {
       popup.remove();
-      createMessage.success('复制成功！');
-    };
-
-    const handlerRenderLayer = (layer) => {
-      console.log("layerInfo",layer)
     }
+  };
 
-    defineExpose({
-      handlerRenderLayer
-    });
+  const handlerCopyFeature = () => {
+    console.log(selectFeature);
+    popup.remove();
+    createMessage.success('复制成功！');
+  };
 
+  const handlerRenderLayer = (layer) => {
+    console.log('layerInfo', layer);
+  };
 
-  </script>
-  
-  <style>
+  defineExpose({
+    handlerRenderLayer,
+  });
+</script>
+
+<style>
   .layer-control-center p {
     margin: 0px;
   }
@@ -286,7 +284,6 @@
   }
 
   .mapboxgl-ctrl-top-right {
-
   }
 
   .mapboxgl-ctrl-group button + button {
@@ -338,5 +335,4 @@
     width: 100px;
     height: 100px;
   }
-  </style>
-  
\ No newline at end of file
+</style>
diff --git a/src/components/MapboxMaps/Styles/Styles.ts b/src/components/MapboxMaps/Styles/Styles.ts
index 790eea59..c5b8f82b 100644
--- a/src/components/MapboxMaps/Styles/Styles.ts
+++ b/src/components/MapboxMaps/Styles/Styles.ts
@@ -1,231 +1,229 @@
-let customDrawStyles = [{
-	"id": "gl-draw-polygon-fill-inactive",
-	"type": "fill",
-	"filter": ["all", ["==", "active", "false"],
-		["==", "$type", "Polygon"],
-		["!=", "mode", "static"]
-	],
-	"paint": {
-		"fill-color": "#3bb2d0",
-		"fill-outline-color": "#6495ed",
-		"fill-opacity": 0.5
-	}
-}, {
-	"id": "gl-draw-polygon-fill-active",
-	"type": "fill",
-	"filter": ["all", ["==", "active", "true"],
-		["==", "$type", "Polygon"]
-	],
-	"paint": {
-		"fill-color": "#fbb03b",
-		"fill-outline-color": "#fbb03b",
-		"fill-opacity": 0.5
-	}
-}, {
-	"id": "gl-draw-polygon-midpoint",
-	"type": "circle",
-	"filter": ["all", ["==", "$type", "Point"],
-		["==", "meta", "midpoint"]
-	],
-	"paint": {
-		"circle-radius": 3,
-		"circle-color": "#fbb03b"
-	}
-}, {
-	"id": "gl-draw-polygon-stroke-inactive",
-	"type": "line",
-	"filter": ["all", ["==", "active", "false"],
-		["==", "$type", "Polygon"],
-		["!=", "mode", "static"]
-	],
-	"layout": {
-		"line-cap": "round",
-		"line-join": "round"
-	},
-	"paint": {
-		"line-color": "#3bb2d0",
-		"line-width": 2
-	}
-}, {
-	"id": "gl-draw-polygon-stroke-active",
-	"type": "line",
-	"filter": ["all", ["==", "active", "true"],
-		["==", "$type", "Polygon"]
-	],
-	"layout": {
-		"line-cap": "round",
-		"line-join": "round"
-	},
-	"paint": {
-		"line-color": "#fbb03b",
-		"line-dasharray": [0.2, 2],
-		"line-width": 2
-	}
-}, {
-	"id": "gl-draw-line-inactive",
-	"type": "line",
-	"filter": ["all", ["==", "active", "false"],
-		["==", "$type", "LineString"],
-		["!=", "mode", "static"],
-		["!=", "user_isSnapGuide", "true"]
-	],
-	"layout": {
-		"line-cap": "round",
-		"line-join": "round"
-	},
-	"paint": {
-		"line-color": "#3bb2d0",
-		"line-width": 2
-	}
-}, {
-	"id": "gl-draw-line-active",
-	"type": "line",
-	"filter": ["all", ["==", "$type", "LineString"],
-		["==", "active", "true"]
-	],
-	"layout": {
-		"line-cap": "round",
-		"line-join": "round"
-	},
-	"paint": {
-		"line-color": "#fbb03b",
-		"line-dasharray": [0.2, 2],
-		"line-width": 2
-	}
-}, {
-	"id": "gl-draw-polygon-and-line-vertex-stroke-inactive",
-	"type": "circle",
-	"filter": ["all", ["==", "meta", "vertex"],
-		["==", "$type", "Point"],
-		["!=", "mode", "static"]
-	],
-	"paint": {
-		"circle-radius": 5,
-		"circle-color": "#fff"
-	}
-}, {
-	"id": "gl-draw-polygon-and-line-vertex-inactive",
-	"type": "circle",
-	"filter": ["all", ["==", "meta", "vertex"],
-		["==", "$type", "Point"],
-		["!=", "mode", "static"]
-	],
-	"paint": {
-		"circle-radius": 3,
-		"circle-color": "#fbb03b"
-	}
-}, {
-	"id": "gl-draw-point-point-stroke-inactive",
-	"type": "circle",
-	"filter": ["all", ["==", "active", "false"],
-		["==", "$type", "Point"],
-		["==", "meta", "feature"],
-		["!=", "mode", "static"]
-	],
-	"paint": {
-		"circle-radius": 5,
-		"circle-opacity": 1,
-		"circle-color": "#fff"
-	}
-}, {
-	"id": "gl-draw-point-inactive",
-	"type": "circle",
-	"filter": ["all", ["==", "active", "false"],
-		["==", "$type", "Point"],
-		["==", "meta", "feature"],
-		["!=", "mode", "static"]
-	],
-	"paint": {
-		"circle-radius": 3,
-		"circle-color": "#3bb2d0"
-	}
-}, {
-	"id": "gl-draw-point-stroke-active",
-	"type": "circle",
-	"filter": ["all", ["==", "$type", "Point"],
-		["==", "active", "true"],
-		["!=", "meta", "midpoint"]
-	],
-	"paint": {
-		"circle-radius": 7,
-		"circle-color": "#fff"
-	}
-}, {
-	"id": "gl-draw-point-active",
-	"type": "circle",
-	"filter": ["all", ["==", "$type", "Point"],
-		["!=", "meta", "midpoint"],
-		["==", "active", "true"]
-	],
-	"paint": {
-		"circle-radius": 5,
-		"circle-color": "#fbb03b"
-	}
-}, {
-	"id": "gl-draw-polygon-fill-static",
-	"type": "fill",
-	"filter": ["all", ["==", "mode", "static"],
-		["==", "$type", "Polygon"]
-	],
-	"paint": {
-		"fill-color": "#404040",
-		"fill-outline-color": "#404040",
-		"fill-opacity": 0.1
-	}
-}, {
-	"id": "gl-draw-polygon-stroke-static",
-	"type": "line",
-	"filter": ["all", ["==", "mode", "static"],
-		["==", "$type", "Polygon"]
-	],
-	"layout": {
-		"line-cap": "round",
-		"line-join": "round"
-	},
-	"paint": {
-		"line-color": "#404040",
-		"line-width": 2
-	}
-}, {
-	"id": "gl-draw-line-static",
-	"type": "line",
-	"filter": ["all", ["==", "mode", "static"],
-		["==", "$type", "LineString"]
-	],
-	"layout": {
-		"line-cap": "round",
-		"line-join": "round"
-	},
-	"paint": {
-		"line-color": "#404040",
-		"line-width": 2
-	}
-}, {
-	"id": "gl-draw-point-static",
-	"type": "circle",
-	"filter": ["all", ["==", "mode", "static"],
-		["==", "$type", "Point"]
-	],
-	"paint": {
-		"circle-radius": 5,
-		"circle-color": "#404040"
-	}
-}, {
-	"id": "guide",
-	"type": "line",
-	"filter": ["all", ["==", "$type", "LineString"],
-		["==", "user_isSnapGuide", "true"]
-	],
-	"layout": {
-		"line-cap": "round",
-		"line-join": "round"
-	},
-	"paint": {
-		"line-color": "#c00c00",
-		"line-width": 1,
-		"line-dasharray": [5, 5]
-	}
-}]
+const customDrawStyles = [
+  {
+    id: 'gl-draw-polygon-fill-inactive',
+    type: 'fill',
+    filter: [
+      'all',
+      ['==', 'active', 'false'],
+      ['==', '$type', 'Polygon'],
+      ['!=', 'mode', 'static'],
+    ],
+    paint: {
+      'fill-color': '#3bb2d0',
+      'fill-outline-color': '#6495ed',
+      'fill-opacity': 0.5,
+    },
+  },
+  {
+    id: 'gl-draw-polygon-fill-active',
+    type: 'fill',
+    filter: ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
+    paint: {
+      'fill-color': '#fbb03b',
+      'fill-outline-color': '#fbb03b',
+      'fill-opacity': 0.5,
+    },
+  },
+  {
+    id: 'gl-draw-polygon-midpoint',
+    type: 'circle',
+    filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']],
+    paint: {
+      'circle-radius': 3,
+      'circle-color': '#fbb03b',
+    },
+  },
+  {
+    id: 'gl-draw-polygon-stroke-inactive',
+    type: 'line',
+    filter: [
+      'all',
+      ['==', 'active', 'false'],
+      ['==', '$type', 'Polygon'],
+      ['!=', 'mode', 'static'],
+    ],
+    layout: {
+      'line-cap': 'round',
+      'line-join': 'round',
+    },
+    paint: {
+      'line-color': '#3bb2d0',
+      'line-width': 2,
+    },
+  },
+  {
+    id: 'gl-draw-polygon-stroke-active',
+    type: 'line',
+    filter: ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
+    layout: {
+      'line-cap': 'round',
+      'line-join': 'round',
+    },
+    paint: {
+      'line-color': '#fbb03b',
+      'line-dasharray': [0.2, 2],
+      'line-width': 2,
+    },
+  },
+  {
+    id: 'gl-draw-line-inactive',
+    type: 'line',
+    filter: [
+      'all',
+      ['==', 'active', 'false'],
+      ['==', '$type', 'LineString'],
+      ['!=', 'mode', 'static'],
+      ['!=', 'user_isSnapGuide', 'true'],
+    ],
+    layout: {
+      'line-cap': 'round',
+      'line-join': 'round',
+    },
+    paint: {
+      'line-color': '#3bb2d0',
+      'line-width': 2,
+    },
+  },
+  {
+    id: 'gl-draw-line-active',
+    type: 'line',
+    filter: ['all', ['==', '$type', 'LineString'], ['==', 'active', 'true']],
+    layout: {
+      'line-cap': 'round',
+      'line-join': 'round',
+    },
+    paint: {
+      'line-color': '#fbb03b',
+      'line-dasharray': [0.2, 2],
+      'line-width': 2,
+    },
+  },
+  {
+    id: 'gl-draw-polygon-and-line-vertex-stroke-inactive',
+    type: 'circle',
+    filter: ['all', ['==', 'meta', 'vertex'], ['==', '$type', 'Point'], ['!=', 'mode', 'static']],
+    paint: {
+      'circle-radius': 5,
+      'circle-color': '#fff',
+    },
+  },
+  {
+    id: 'gl-draw-polygon-and-line-vertex-inactive',
+    type: 'circle',
+    filter: ['all', ['==', 'meta', 'vertex'], ['==', '$type', 'Point'], ['!=', 'mode', 'static']],
+    paint: {
+      'circle-radius': 3,
+      'circle-color': '#fbb03b',
+    },
+  },
+  {
+    id: 'gl-draw-point-point-stroke-inactive',
+    type: 'circle',
+    filter: [
+      'all',
+      ['==', 'active', 'false'],
+      ['==', '$type', 'Point'],
+      ['==', 'meta', 'feature'],
+      ['!=', 'mode', 'static'],
+    ],
+    paint: {
+      'circle-radius': 5,
+      'circle-opacity': 1,
+      'circle-color': '#fff',
+    },
+  },
+  {
+    id: 'gl-draw-point-inactive',
+    type: 'circle',
+    filter: [
+      'all',
+      ['==', 'active', 'false'],
+      ['==', '$type', 'Point'],
+      ['==', 'meta', 'feature'],
+      ['!=', 'mode', 'static'],
+    ],
+    paint: {
+      'circle-radius': 3,
+      'circle-color': '#3bb2d0',
+    },
+  },
+  {
+    id: 'gl-draw-point-stroke-active',
+    type: 'circle',
+    filter: ['all', ['==', '$type', 'Point'], ['==', 'active', 'true'], ['!=', 'meta', 'midpoint']],
+    paint: {
+      'circle-radius': 7,
+      'circle-color': '#fff',
+    },
+  },
+  {
+    id: 'gl-draw-point-active',
+    type: 'circle',
+    filter: ['all', ['==', '$type', 'Point'], ['!=', 'meta', 'midpoint'], ['==', 'active', 'true']],
+    paint: {
+      'circle-radius': 5,
+      'circle-color': '#fbb03b',
+    },
+  },
+  {
+    id: 'gl-draw-polygon-fill-static',
+    type: 'fill',
+    filter: ['all', ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
+    paint: {
+      'fill-color': '#404040',
+      'fill-outline-color': '#404040',
+      'fill-opacity': 0.1,
+    },
+  },
+  {
+    id: 'gl-draw-polygon-stroke-static',
+    type: 'line',
+    filter: ['all', ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
+    layout: {
+      'line-cap': 'round',
+      'line-join': 'round',
+    },
+    paint: {
+      'line-color': '#404040',
+      'line-width': 2,
+    },
+  },
+  {
+    id: 'gl-draw-line-static',
+    type: 'line',
+    filter: ['all', ['==', 'mode', 'static'], ['==', '$type', 'LineString']],
+    layout: {
+      'line-cap': 'round',
+      'line-join': 'round',
+    },
+    paint: {
+      'line-color': '#404040',
+      'line-width': 2,
+    },
+  },
+  {
+    id: 'gl-draw-point-static',
+    type: 'circle',
+    filter: ['all', ['==', 'mode', 'static'], ['==', '$type', 'Point']],
+    paint: {
+      'circle-radius': 5,
+      'circle-color': '#404040',
+    },
+  },
+  {
+    id: 'guide',
+    type: 'line',
+    filter: ['all', ['==', '$type', 'LineString'], ['==', 'user_isSnapGuide', 'true']],
+    layout: {
+      'line-cap': 'round',
+      'line-join': 'round',
+    },
+    paint: {
+      'line-color': '#c00c00',
+      'line-width': 1,
+      'line-dasharray': [5, 5],
+    },
+  },
+];
 
-
-export {customDrawStyles}
\ No newline at end of file
+export { customDrawStyles };
diff --git a/src/components/ProcessDesigner/package/penal/startEvent/index.vue b/src/components/ProcessDesigner/package/penal/startEvent/index.vue
index 6b7708fe..9176c269 100644
--- a/src/components/ProcessDesigner/package/penal/startEvent/index.vue
+++ b/src/components/ProcessDesigner/package/penal/startEvent/index.vue
@@ -405,125 +405,134 @@
     });
     return result;
   };
+  const getRFields = (dataList, rFieldList,fieldList) => {
+    dataList.forEach((element: { label?: string; field?: string; component: any; itemProps: any }) => {
+      if (['InputGuid'].includes(element.component)) {
+        rFieldList.push({
+          label: element.label,
+          // value:element.prop
+          value: element.field,
+        });
+      }
+      if(element.component === 'Tabs'){
+        element.componentProps.options.forEach(childElement => {
+          const {rFieldList:rField, fieldList:field} = getRFields(childElement.children,rFieldList,fieldList)
+          rFieldList = rField
+          fieldList = field
+        })
+      }else if (
+        ![
+          'Divider',
+          'Grid',
+          'Card',
+          'CreateUser',
+          'CreateTime',
+          'ModifyUser',
+          'ModifyTime',
+          'CardGroup',
+        ].includes(element.component) &&
+        !element.itemProps.hidden
+      ) {
+        let obj: any = element;
+        obj.required = element.itemProps.required;
+        // obj.componentProps.disabled = false;
+        obj.disabled = true;
+        obj.ifShow = true;
+        obj.fieldName = element.componentProps.fieldName;
+        fieldList.push(obj);
+      } else if (['Grid'].includes(element.component) || element.type == 'subTable') {
+        console.log('gridtable');
+        fieldList.push({
+          field: `${element.field}_add`,
+          label: `${element.label || '表格'}-添加按钮`,
+          required: false,
+          disabled: true,
+          ifShow: false,
+          type: 'grid',
+        });
+        fieldList.push({
+          field: `${element.field}_remove`,
+          label: `${element.label || '表格'}-删除按钮`,
+          required: false,
+          disabled: true,
+          ifShow: false,
+          type: 'grid',
+        });
+
+        fieldList.push({
+          field: `${element.field}_required`,
+          label: `${element.label || '表格'}-数据`,
+          required: element.itemProps.required,
+          disabled: false,
+          ifShow: false,
+          type: 'gridrequired',
+        });
+        element.columns.forEach((child) => {
+          child.children.forEach((t) => {
+            fieldList.push({
+              gridprop: element.field,
+              field: t.field,
+              label: `${element.label || '表格'}-${t.label}`,
+              required: t.itemProps.required,
+              disabled: true,
+              ifShow: true,
+              fieldName: t.componentProps.fieldName,
+              ...t,
+            });
+          });
+        });
+      } else if (['Card'].includes(element.component)) {
+        console.log(3);
+        element.columns.forEach((child) => {
+          child.children.forEach((t) => {
+            fieldList.push({
+              gridprop: element.field,
+              field: t.field,
+              required: t.itemProps.required,
+              disabled: true,
+              ifShow: true,
+              fieldName: t.componentProps.fieldName,
+              ...t,
+            });
+          });
+        });
+      } else if (
+        ['CreateUser', 'CreateTime', 'ModifyUser', 'ModifyTime'].includes(element.component) &&
+        element.display
+      ) {
+        let obj: any = element;
+        obj.required = element.itemProps.required;
+        // obj.componentProps.disabled = false;
+        obj.disabled = true;
+        obj.ifShow = true;
+        obj.fieldName = element.componentProps.fieldName;
+        fieldList.push(obj);
+      } else if (['CardGroup'].includes(element.component)) {
+        let obj: any = element;
+        obj.required = element.itemProps.required;
+        // obj.componentProps.disabled = false;
+        obj.disabled = true;
+        obj.ifShow = true;
+        obj.fieldName = element.componentProps.fieldName;
+        obj.label = `卡片组-${element.label}`;
+        fieldList.push(obj);
+        fieldList = cardComponentChild(element.componentProps.options, fieldList);
+      }
+    },);
+    return {rFieldList,fieldList}
+  }
   function loadFormScheme(strScheme, isChange) {
     const scheme = JSON.parse(strScheme);
     let fields: any[] = [];
-    const rfields: {
+    let rfields: {
       label?: string;
       value?: string;
     }[] = [];
     scheme.formInfo.tabList = cardNestStructure(scheme.formInfo.tabList);
-    console.log(scheme.formInfo.tabList);
     scheme.formInfo.tabList.forEach((tabElement) => {
-      tabElement.schemas.forEach(
-        (element: { label?: string; field?: string; component: any; itemProps: any }) => {
-          if (['InputGuid'].includes(element.component)) {
-            rfields.push({
-              label: element.label,
-              // value:element.prop
-              value: element.field,
-            });
-          }
-          if (
-            ![
-              'Divider',
-              'Grid',
-              'Card',
-              'CreateUser',
-              'CreateTime',
-              'ModifyUser',
-              'ModifyTime',
-              'CardGroup',
-            ].includes(element.component) &&
-            !element.itemProps.hidden
-          ) {
-            let obj: any = element;
-            obj.required = element.itemProps.required;
-            // obj.componentProps.disabled = false;
-            obj.disabled = true;
-            obj.ifShow = true;
-            obj.fieldName = element.componentProps.fieldName;
-            fields.push(obj);
-          } else if (['Grid'].includes(element.component) || element.type == 'subTable') {
-            console.log('gridtable');
-            fields.push({
-              field: `${element.field}_add`,
-              label: `${element.label || '表格'}-添加按钮`,
-              required: false,
-              disabled: true,
-              ifShow: false,
-              type: 'grid',
-            });
-            fields.push({
-              field: `${element.field}_remove`,
-              label: `${element.label || '表格'}-删除按钮`,
-              required: false,
-              disabled: true,
-              ifShow: false,
-              type: 'grid',
-            });
-
-            fields.push({
-              field: `${element.field}_required`,
-              label: `${element.label || '表格'}-数据`,
-              required: element.itemProps.required,
-              disabled: false,
-              ifShow: false,
-              type: 'gridrequired',
-            });
-            element.columns.forEach((child) => {
-              child.children.forEach((t) => {
-                fields.push({
-                  gridprop: element.field,
-                  field: t.field,
-                  label: `${element.label || '表格'}-${t.label}`,
-                  required: t.itemProps.required,
-                  disabled: true,
-                  ifShow: true,
-                  fieldName: t.componentProps.fieldName,
-                  ...t,
-                });
-              });
-            });
-          } else if (['Card'].includes(element.component)) {
-            console.log(3);
-            element.columns.forEach((child) => {
-              child.children.forEach((t) => {
-                fields.push({
-                  gridprop: element.field,
-                  field: t.field,
-                  required: t.itemProps.required,
-                  disabled: true,
-                  ifShow: true,
-                  fieldName: t.componentProps.fieldName,
-                  ...t,
-                });
-              });
-            });
-          } else if (
-            ['CreateUser', 'CreateTime', 'ModifyUser', 'ModifyTime'].includes(element.component) &&
-            element.display
-          ) {
-            let obj: any = element;
-            obj.required = element.itemProps.required;
-            // obj.componentProps.disabled = false;
-            obj.disabled = true;
-            obj.ifShow = true;
-            obj.fieldName = element.componentProps.fieldName;
-            fields.push(obj);
-          } else if (['CardGroup'].includes(element.component)) {
-            let obj: any = element;
-            obj.required = element.itemProps.required;
-            // obj.componentProps.disabled = false;
-            obj.disabled = true;
-            obj.ifShow = true;
-            obj.fieldName = element.componentProps.fieldName;
-            obj.label = `卡片组-${element.label}`;
-            fields.push(obj);
-            fields = cardComponentChild(element.componentProps.options, fields);
-          }
-        },
-      );
+      const {rFieldList, fieldList} = getRFields(tabElement.schemas,rfields,fields)
+      rfields = rFieldList
+      fields = fieldList
     });
     data.formRelations = rfields;
     if (isChange) {
diff --git a/src/views/dashboard/analysis/index.vue b/src/views/dashboard/analysis/index.vue
index ecd419c9..713fae45 100644
--- a/src/views/dashboard/analysis/index.vue
+++ b/src/views/dashboard/analysis/index.vue
@@ -95,19 +95,19 @@ let drawFeatures = [
   const MapboxComponent = ref()
 
   // 添加 或者 编辑图斑
-  setTimeout(function(){
-    // 添加图斑
-    // MapboxComponent.value.handlerDraw()
-    // 编辑图斑
-    MapboxComponent.value.handlerDraw(drawFeatures)
-  },3000)
+  // setTimeout(function(){
+  //   // 添加图斑
+  //   // MapboxComponent.value.handlerDraw()
+  //   // 编辑图斑
+  //   MapboxComponent.value.handlerDraw(drawFeatures)
+  // },3000)
 
   
 
 
-  setTimeout(function(){
-    // MapboxComponent.value.handlerDraw()
-  },6000)
+  // setTimeout(function(){
+  //   // MapboxComponent.value.handlerDraw()
+  // },6000)
 
   // 图斑定位
   // setTimeout(function(){
diff --git a/src/views/demo/form-design/components/VFormDesign/index.vue b/src/views/demo/form-design/components/VFormDesign/index.vue
index de47f4a2..cfcb109f 100644
--- a/src/views/demo/form-design/components/VFormDesign/index.vue
+++ b/src/views/demo/form-design/components/VFormDesign/index.vue
@@ -18,7 +18,7 @@
       breakpoint="md"
     >
       <div class="collapseItem-box">
-        <CollapseContainer title="基础控件">
+        <CollapseContainer title="基础控件" isTitleBold="true">
           <CollapseItem
             :list="baseComponents"
             :handleListPush="handleListPushDrag"
@@ -26,7 +26,7 @@
             @handle-list-push="handleListPush"
           />
         </CollapseContainer>
-        <CollapseContainer title="自定义控件">
+        <CollapseContainer title="自定义控件" isTitleBold="true">
           <CollapseItem
             :list="customComponents"
             @add-attrs="handleAddAttrs"
@@ -34,7 +34,7 @@
             @handle-list-push="handleListPush"
           />
         </CollapseContainer>
-        <CollapseContainer title="布局控件">
+        <CollapseContainer title="布局控件" isTitleBold="true">
           <CollapseItem
             :list="layoutComponents"
             :handleListPush="handleListPushDrag"
@@ -451,4 +451,8 @@
     height: calc(100vh - 55px);
     overflow: auto;
   }
+
+  .vben-basic-title {
+    font-weight: bold;
+  }
 </style>
diff --git a/src/views/demo/form-design/components/VFormDesign/modules/Toolbar.vue b/src/views/demo/form-design/components/VFormDesign/modules/Toolbar.vue
index 0bca6dd6..3abfd83b 100644
--- a/src/views/demo/form-design/components/VFormDesign/modules/Toolbar.vue
+++ b/src/views/demo/form-design/components/VFormDesign/modules/Toolbar.vue
@@ -7,20 +7,25 @@
     <!-- 操作左侧区域 start -->
     <div class="left-btn-box" style="text-indent: 20px">
       <Tooltip v-for="item in toolbarsConfigs" :title="item.title" :key="item.icon">
-        <a @click="$emit(item.event)" class="toolbar-text">
-          <Icon :icon="item.icon" :style="{ fontSize: '21px' }" />
-        </a>
+        <a-button @click="$emit(item.event)" id="button">
+          <template #icon>
+            <Icon :icon="item.icon" :style="{ fontSize: '16px' }" />
+          </template>
+        </a-button>
       </Tooltip>
-      <Divider type="vertical" />
       <Tooltip title="撤销">
-        <a :class="{ disabled: !canUndo }" :disabled="!canUndo" @click="undo">
-          <Icon icon="ant-design:undo-outlined" :style="{ fontSize: '21px' }" />
-        </a>
+        <a-button :class="{ disabled: !canUndo }" :disabled="!canUndo" @click="undo" id="button">
+          <template #icon>
+            <Icon icon="ant-design:undo-outlined" :style="{ fontSize: '16px' }" />
+          </template>
+        </a-button>
       </Tooltip>
       <Tooltip title="重做">
-        <a :class="{ disabled: !canRedo }" :disabled="!canRedo" @click="redo">
-          <Icon icon="ant-design:redo-outlined" :style="{ fontSize: '21px' }" />
-        </a>
+        <a-button :class="{ disabled: !canRedo }" @click="redo" id="button">
+          <template #icon>
+            <Icon icon="ant-design:redo-outlined" :style="{ fontSize: '16px' }" />
+          </template>
+        </a-button>
       </Tooltip>
     </div>
   </div>
@@ -30,7 +35,7 @@
   import { defineComponent, inject, reactive, toRefs } from 'vue';
   import { UseRefHistoryReturn } from '@vueuse/core';
   import { IFormConfig } from '../../../typings/v-form-component';
-  import { Tooltip, Divider } from 'ant-design-vue';
+  import { Tooltip } from 'ant-design-vue';
   import Icon from '@/components/Icon/Icon.vue';
 
   interface IToolbarsConfig {
@@ -45,7 +50,6 @@
     components: {
       Tooltip,
       Icon,
-      Divider,
     },
     setup() {
       const state = reactive<{
@@ -56,7 +60,7 @@
             title: '预览-支持布局',
             type: 'preview',
             event: 'handlePreview',
-            icon: 'ant-design:chrome-filled',
+            icon: 'bi:life-preserver',
           },
           // {
           //   title: '预览-不支持布局',
@@ -113,9 +117,10 @@
     line-height: @operating-area-height;
     text-align: left;
 
-    a {
+    #button {
       margin: 0 5px;
-      color: #666;
+      width: 32px;
+      height: 32px;
 
       &.disabled,
       &.disabled:hover {
@@ -127,7 +132,6 @@
       }
 
       > span {
-        padding-left: 2px;
         font-size: 14px;
       }
     }
diff --git a/src/views/demo/form-design/components/VFormDesign/styles/drag.less b/src/views/demo/form-design/components/VFormDesign/styles/drag.less
index 0f806340..38f5e62c 100644
--- a/src/views/demo/form-design/components/VFormDesign/styles/drag.less
+++ b/src/views/demo/form-design/components/VFormDesign/styles/drag.less
@@ -1,11 +1,14 @@
 .draggable-box {
   height: 100%;
   overflow: auto;
+  background-color: @background-color;
+  
 
   :deep(.list-main) {
     position: relative;
     padding: 5px;
     overflow: hidden;
+    border-radius: 4px;
 
     .moving {
       position: relative;
@@ -21,7 +24,7 @@
         top: 0;
         right: 0;
         width: 100%;
-        height: 5px;
+        height: 3px;
         background-color: @primary-color;
       }
     }
@@ -33,6 +36,7 @@
       padding: 8px;
       overflow: hidden;
       transition: all 0.3s;
+      border-radius: 3px;
 
       &:hover {
         background-color: @primary-hover-bg-color;
@@ -44,14 +48,16 @@
         position: absolute;
         top: 0;
         right: -100%;
-        width: 100%;
-        height: 5px;
+        width: 0%;
+        height: 3px;
         transition: all 0.3s;
+        outline: 3px solid @primary-color;
         background-color: @primary-color;
       }
 
       &.active {
-        outline-offset: 0;
+        outline: 3px solid @primary-color;
+        // outline-offset: 0;
         background-color: @primary-hover-bg-color;
 
         &::before {
@@ -84,7 +90,7 @@
       .show-key-box {
         // 显示key
         position: absolute;
-        right: 5px;
+        right: 3px;
         bottom: 2px;
         // z-index: 999;
         color: @primary-color;
@@ -133,6 +139,12 @@
       overflow: hidden;
       transition: all 0.3s;
       background-color: @layout-background-color;
+      border-radius: 3px;
+
+      // 鼠标划过
+      &:hover {
+        background-color: @layout-hover-bg-color;
+      }
 
       .form-item-box {
         position: relative;
@@ -170,14 +182,15 @@
         position: absolute;
         top: 0;
         right: -100%;
-        width: 100%;
-        height: 5px;
+        width: 0%;
+        height: 3px;
         transition: all 0.3s;
         background: transparent;
       }
 
       &.active {
-        outline-offset: 0;
+        outline: 3px solid @layout-color;
+        // outline-offset: 0;
         background-color: @layout-hover-bg-color;
 
         &::before {
diff --git a/src/views/demo/form-design/components/VFormDesign/styles/variable.less b/src/views/demo/form-design/components/VFormDesign/styles/variable.less
index 8749dce1..d7badaf5 100644
--- a/src/views/demo/form-design/components/VFormDesign/styles/variable.less
+++ b/src/views/demo/form-design/components/VFormDesign/styles/variable.less
@@ -1,11 +1,11 @@
 // 表单设计器样式
-@primary-color: #13c2c2;
-@layout-color: #9867f7;
+@background-color: #EBEDF1;
+@primary-color: #1E5EFFFF;
+@layout-color: #A91EFFFF;
 
-@primary-background-color: fade(@primary-color, 6%);
-@primary-hover-bg-color: fade(@primary-color, 20%);
-@layout-background-color: fade(@layout-color, 12%);
-@layout-hover-bg-color: fade(@layout-color, 24%);
+@primary-hover-bg-color: #DFEAFC;
+@layout-background-color: #E9E4F5;
+@layout-hover-bg-color: #d7d2ff;
 
 @title-text-color: #fff;
 @border-color: #ccc;
diff --git a/src/views/demo/form-design/core/formItemConfig.ts b/src/views/demo/form-design/core/formItemConfig.ts
index 01d78423..ab7cd760 100644
--- a/src/views/demo/form-design/core/formItemConfig.ts
+++ b/src/views/demo/form-design/core/formItemConfig.ts
@@ -453,7 +453,7 @@ export const baseComponents: IVFormComponent[] = [
   {
     component: 'Cascader',
     label: '级联选择',
-    icon: 'ant-design:check-outlined',
+    icon: 'ant-design:block-outlined',
     field: '',
     colProps: { span: 24 },
     componentProps: {
diff --git a/src/views/demo/onlineform/formCall/index.vue b/src/views/demo/onlineform/formCall/index.vue
index 51ba9b82..2f27a3b2 100644
--- a/src/views/demo/onlineform/formCall/index.vue
+++ b/src/views/demo/onlineform/formCall/index.vue
@@ -526,12 +526,7 @@
         if (rows.length == 0) {
           return createMessage.warn('请选择一条数据查看详情');
         }
-<<<<<<< HEAD
-
         console.log("DetailsRow",formConfig,rows);
-=======
-        console.log('DetailsRow', rows);
->>>>>>> 2d727b56b33f5b20ec09e72b777cfa6a88e157e9
         let toProps = {
           isDetail: true,
           isUpdate: false,
@@ -548,41 +543,12 @@
           openShowFormModal.value = true;
 
           // 根据ids获取图斑
-<<<<<<< HEAD
+
           try{
             console.log("formConfig",formConfig);
             handlerShowGeomtrys(formConfig,rows[0])
           }catch(e){
             createMessage.error("当前数据没有图斑！");
-=======
-          try {
-            let getGeomPrams: GeomParams = {
-              TableName: 'drone_shp_data',
-              FieldName: 'geom',
-              // FieldValue:row[].split(","),
-              FiledValue: [1315, 1308],
-            };
-            getGeom(getGeomPrams).then((res) => {
-              let geoms = [];
-              if (res) {
-                if (res.items?.length > 0) {
-                  res.items.forEach((item, index) => {
-                    let geom = {
-                      key: item.gid,
-                      mapgeom: item.geom,
-                    };
-                    geoms.push(geom);
-                  });
-                }
-                // MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
-                MapboxComponent.value.handlerDraw(status, geoms, false);
-              } else {
-                createMessage.error('当前数据没有图斑！');
-              }
-            });
-          } catch (e) {
-            createMessage.error('当前数据没有图斑！');
->>>>>>> 2d727b56b33f5b20ec09e72b777cfa6a88e157e9
           }
         } else {
           openModal(true, toProps);
@@ -597,7 +563,7 @@
     }
   };
 
-<<<<<<< HEAD
+
   async function handlerShowGeomtrys(currentNode,rows){
 
     let info = currentNode.value.schemas?.find((item,index)=>{
@@ -656,8 +622,6 @@
     }
   }
 
-=======
->>>>>>> 2d727b56b33f5b20ec09e72b777cfa6a88e157e9
   function handleSelect(selectedKeys: any, selected: any) {
     const rel = selected.node.dataRef;
     const obj: any = {};
diff --git a/src/views/demo/onlineform/formModule/modalForm.vue b/src/views/demo/onlineform/formModule/modalForm.vue
index aaa6e400..4ae4c802 100644
--- a/src/views/demo/onlineform/formModule/modalForm.vue
+++ b/src/views/demo/onlineform/formModule/modalForm.vue
@@ -74,9 +74,10 @@
   import { useMessage } from '@/hooks/web/useMessage';
   import { getMenuList } from '@/api/demo/system';
   import { useI18n } from '@/hooks/web/useI18n';
-
+  import { FormInstance } from 'ant-design-vue';
   import ModuleModal from './modalForm-Modal.vue';
   import { functionGetSchemePageList, functionGetForm } from '@/api/demo/formScheme';
+  import { Get_Get_ExistFiled } from '@/api/demo/formModule';
 
   // emit
   const emit = defineEmits(['change-form-verisons', 'set-steps-current']);
@@ -110,7 +111,7 @@
   // 表单选择声明
   const [registerModal, { openModal }] = useModal();
   // 表单ref
-  const formModuleRef = ref<any>();
+  let formModuleRef: FormInstance | null = null;
   // 版本options
   const formVerisons = ref([]);
   // 上级options
@@ -134,12 +135,147 @@
   });
   // 规则
   let rules = {
-    code: [{ required: true, message: '请输入' }],
-    name: [{ required: true, message: '请输入' }],
-    icon: [{ component: 'IconPicker', required: true, message: '请输入' }],
-    formCodeName: [{ required: true, message: '请输入' }],
-    formVerison: [{ required: true, message: '请选择版本' }],
-    pmoduleId: [{ required: true, message: '请输入' }],
+    code: [
+      {
+        required: true,
+        asyncValidator: async (rule, value, callback) => {
+          // 验证逻辑
+          if (value) {
+            try {
+              let filedsJson = {
+                Code: formData.value.code,
+              };
+              if (props.isEdit) {
+                // 编辑
+                let query: any = {
+                  keyValue: props.editData.record.id,
+                  tableName: 'form_module',
+                  keyName: 'Id',
+                  filedsJson: JSON.stringify(filedsJson),
+                };
+                await Get_Get_ExistFiled(query).then((res) => {
+                  if (res) {
+                    callback();
+                  } else {
+                    callback(new Error('编号重复'));
+                  }
+                });
+              } else {
+                // 新增
+                let query: any = {
+                  tableName: 'form_module',
+                  keyName: 'Id',
+                  filedsJson: JSON.stringify(filedsJson),
+                };
+                await Get_Get_ExistFiled(query).then((res) => {
+                  if (res) {
+                    callback();
+                  } else {
+                    callback(new Error('编号重复'));
+                  }
+                });
+              }
+            } catch (error) {
+              ('验证出错');
+            }
+          } else {
+            callback(new Error('请输入编号'));
+          }
+        },
+        trigger: ['blur'],
+      },
+    ],
+    name: [
+      {
+        required: true,
+        validator: (rule, value, callback) => {
+          try {
+            // 验证逻辑
+            if (value) {
+              callback();
+            } else {
+              callback(new Error('请输入名称'));
+            }
+          } catch (error) {
+            console.log(error);
+          }
+        },
+        trigger: ['blur'],
+      },
+    ],
+    icon: [
+      {
+        component: 'IconPicker',
+        required: true,
+        validator: (rule, value, callback) => {
+          try {
+            // 验证逻辑
+            if (value) {
+              callback();
+            } else {
+              callback(new Error('请选择图标'));
+            }
+          } catch (error) {
+            console.log(error);
+          }
+        },
+        trigger: ['blur'],
+      },
+    ],
+    formCodeName: [
+      {
+        required: true,
+        validator: (rule, value, callback) => {
+          try {
+            // 验证逻辑
+            if (value) {
+              callback();
+            } else {
+              callback(new Error('请选择表单'));
+            }
+          } catch (error) {
+            console.log(error);
+          }
+        },
+        trigger: ['blur'],
+      },
+    ],
+    formVerison: [
+      {
+        required: true,
+        validator: (rule, value, callback) => {
+          try {
+            // 验证逻辑
+            if (value) {
+              callback();
+            } else {
+              callback(new Error('请选择表单版本'));
+            }
+          } catch (error) {
+            console.log(error);
+          }
+        },
+        trigger: ['blur'],
+      },
+    ],
+    pmoduleId: [
+      {
+        required: true,
+        validator: (rule, value, callback) => {
+          try {
+            // 验证逻辑
+            if (value) {
+              callback();
+            } else {
+              callback(new Error('请选择上级'));
+            }
+          } catch (error) {
+            console.log(error);
+          }
+        },
+        trigger: ['blur'],
+      },
+    ],
     enabledMark: [{ required: true }],
   };
 
@@ -159,21 +295,34 @@
   // 监视props
   watch(
     () => props.isNextSteps,
-    () => {
-      // 基本配置页数据是否填完整
+    async () => {
       if (props.isNextSteps) {
-        let checkdata = formData.value;
+        // if (formModuleRef) {
+        //   try {
+        //     await formModuleRef.validate();
+        //   } catch (error) {
+        //     console.log(error);
+        //   }
+        // }
         if (
-          checkdata.code === '' ||
-          checkdata.formCode === '' ||
-          checkdata.name === '' ||
-          checkdata.formVerison === '' ||
-          checkdata.pmoduleId === ''
+          formData.value.code === '' ||
+          formData.value.name === '' ||
+          formData.value.icon === '' ||
+          formData.value.formCode === '' ||
+          formData.value.formVerison === '' ||
+          formData.value.pmoduleId === ''
         ) {
-          createMessage.error(t('数据未填完整'));
+          createMessage.error(t('数据未填写完整'));
           emit('set-steps-current', false);
         } else {
-          emit('set-steps-current', true);
+          // 验证通过后的逻辑
+          let res = await checkExistFiled();
+          if (res) {
+            emit('set-steps-current', true);
+          } else {
+            createMessage.error(t('表单的编号值重复'));
+            emit('set-steps-current', false);
+          }
         }
       }
     },
@@ -238,6 +387,59 @@
     getSchemeRow(result.info);
   }
 
+  // 验证通过后的逻辑
+  async function checkExistFiled() {
+    try {
+      let filedsJson = {
+        Code: formData.value.code,
+      };
+      let result = false;
+      if (props.isEdit) {
+        // 编辑
+        let query: any = {
+          keyValue: props.editData.record.id,
+          tableName: 'form_module',
+          keyName: 'Id',
+          filedsJson: JSON.stringify(filedsJson),
+        };
+        await Get_Get_ExistFiled(query)
+          .then((res) => {
+            if (res) {
+              result = true;
+            } else {
+              result = false;
+            }
+          })
+          .catch((error) => {
+            createMessage.error('验证出错' + error);
+            result = true;
+          });
+      } else {
+        // 新增
+        let query: any = {
+          tableName: 'form_module',
+          keyName: 'Id',
+          filedsJson: JSON.stringify(filedsJson),
+        };
+        await Get_Get_ExistFiled(query)
+          .then((res) => {
+            if (res) {
+              result = true;
+            } else {
+              result = false;
+            }
+          })
+          .catch((error) => {
+            createMessage.error('验证出错' + error);
+            result = false;
+          });
+      }
+      return result;
+    } catch (error) {
+      ('验证出错');
+    }
+  }
+
   defineExpose({
     formData,
   });