merege

src/api/demo/formScheme.ts

@@ -190,37 +190,6 @@ export function functionGetSchemePageList(params: schemePageListModel) {
   });
 }
 
-// 获取表单分页数据 【先不写】
-export function functionGetFormDataPage(params: AccountParams) {
-  return defHttp.post<FromSchemandAndInfoModel>({
-    url: Api.GetFormDataPage,
-    params,
-  });
-}
-// 获取表单分页数据【先不写】
-export function functionGetFormDataList(params: AccountParams) {
-  return defHttp.post<FromSchemandAndInfoModel>({
-    url: Api.GetFormDataList,
-    params,
-  });
-}
-
-// 获取表单数据【先不写】
-export function functionGetFormDataFormScheme(params: AccountParams) {
-  return defHttp.get<FromSchemandAndInfoModel>({
-    url: Api.GetFormDataFormScheme,
-    params,
-  });
-}
-
-// 保存自定表单数据【先不写】
-export function functionsaveForm(params: AccountParams) {
-  return defHttp.post<FromSchemandAndInfoModel>({
-    url: Api.saveForm,
-    params,
-  });
-}
-
 // CodeTable 数据对象模型管理
 // 获取CodeTable的分页数据
 export function function_Get_LoadCodeTablePage(
@@ -280,10 +249,10 @@ export function LoadFormScheme(params) {
 export function AddTable(params) {
   params.dbColumnInfoList.push({
     tableName: params.tableName,
-    dbColumnName: 'gemo',
+    dbColumnName: 'geom',
     dataType: 'geometry',
     length: 0,
-    columnDescription: 'gemo',
+    columnDescription: 'geom',
     isNullable: 0,
     isIdentity: 0,
     isPrimarykey: 0,
@@ -296,6 +265,7 @@ export function AddTable(params) {
 }
 
 // 创建字段
+
 export function AddColumn(params) {
   return defHttp.post({
     url: Api.AddColumn,

src/components/MapboxMaps/InsertShp/index.vue

@@ -1,5 +1,11 @@
 <template>
-  <a-modal class="insert-shp-modal" width="1290px" :destroyOnClose="true" v-model:open="props.openModal" @cancel="closeModal">
+  <a-modal
+    class="insert-shp-modal"
+    width="1290px"
+    :destroyOnClose="true"
+    v-model:open="props.openModal"
+    @cancel="closeModal"
+  >
     <template #closeIcon>
       <CloseCircleOutlined />
     </template>
@@ -9,36 +15,33 @@
         class="steps"
         :current="current"
         label-placement="vertical"
-        :items="[
+        :items="[{ title: '选择文件' }, { title: '编辑信息' }, { title: '完成' }]"
-          {title: '选择文件',},
-          {title: '编辑信息',},
-          {title: '完成',},
-        ]"
       ></a-steps>
       <div class="select-file-div" v-show="current === 0">
         <div class="upload-div">
           <a-upload-dragger
-            style="height: 174px; width: 174px;"
+            style="height: 174px; width: 174px"
             class="upload-dragger"
             v-model:fileList="fileList"
             name="file"
             :multiple="false"
             :maxCount="1"
             :before-upload="beforeUpload"
+            accept=".zip,.xlsx"
           >
             <p class="ant-upload-drag-icon">
               <inbox-outlined></inbox-outlined>
             </p>
-            <div style="opacity: 0.7;">
+            <div style="opacity: 0.7">
               <a-button :icon="h(PlusOutlined)">文件上传</a-button>
             </div>
           </a-upload-dragger>
         </div>
         <div class="upload-span">
           <div class="upload-span-content">
-            <div style="opacity: 0.7;">将文件拖拽到这里或点击上传按钮</div>
+            <div style="opacity: 0.7">将文件拖拽到这里或点击上传按钮</div>
-            <div style="color: #1E5EFF;">支持扩展名：zip</div>
+            <div style="color: #1e5eff">支持扩展名：zip,xlsx</div>
-            <div style="opacity: 0.7;">zip中需要包含 .shp .shx .dbf 文件 且.shp文件大小小于10MB</div>
+            <div style="opacity: 0.7">zip中需要包含 .shp .shx .dbf 文件 且.shp文件大小小于10MB</div>
           </div>
         </div>
         <div class="upload-form">
@@ -47,9 +50,10 @@
             :model="uploadFrom"
             :label-col="{ style: { width: '75px' } }"
             labelAlign="right"
-            :rules="uploadFormRules">
+            :rules="uploadFormRules"
+          >
             <a-form-item label="服务名称" name="serverName">
-              <a-input v-model:value="uploadFrom.serverName" placeholder="请输入服务名称"/>
+              <a-input v-model:value="uploadFrom.serverName" placeholder="请输入服务名称" />
             </a-form-item>
             <a-form-item label="空间参考" name="spaceType">
               <!-- <a-input v-model:value="uploadFrom.spaceType" /> -->
@@ -60,7 +64,7 @@
               </a-select>
             </a-form-item>
             <a-form-item label="表名" name="tableName">
-              <a-input v-model:value="uploadFrom.tableName" placeholder="请输入表名"/>
+              <a-input v-model:value="uploadFrom.tableName" placeholder="请输入表名" />
             </a-form-item>
           </a-form>
           <div class="upload-span-button">
@@ -69,10 +73,16 @@
         </div>
       </div>
       <div class="edit-info-div" v-show="current === 1">
-        <a-table :columns="columns" :data-source="dataList" :pagination="false" :bordered="true" :scroll="{y: 260}">
+        <a-table
+          :columns="columns"
+          :data-source="dataList"
+          :pagination="false"
+          :bordered="true"
+          :scroll="{ y: 260 }"
+        >
           <template #bodyCell="{ column, record }">
             <template v-if="column.key === 'type'">
-              <a-select v-model:value="record.type" style="width: 120px;">
+              <a-select v-model:value="record.type" style="width: 120px">
                 <a-select-option value="geometry">geometry</a-select-option>
                 <a-select-option value="varchar">varchar</a-select-option>
                 <a-select-option value="text">text</a-select-option>
@@ -97,13 +107,15 @@
         <div class="insert-list-button" @click="insertListItem">新增一条</div>
         <div class="footer-button">
           <a-button @click="current--">取消</a-button>
-          <a-button style="margin-left: 25px;" type="primary" @click="submitDataList">下一步</a-button>
+          <a-button style="margin-left: 25px" type="primary" @click="submitDataList"
+            >下一步</a-button
+          >
         </div>
       </div>
       <div class="submit-success" v-show="current === 2">
         <div class="success-content">
-          <CheckCircleOutlined style="font-size: 100px;color: #1FD286;margin-bottom:30px"/>
+          <CheckCircleOutlined style="font-size: 100px; color: #1fd286; margin-bottom: 30px" />
-          <div style="margin-bottom:19px;font-size:26px">导入成功</div>
+          <div style="margin-bottom: 19px; font-size: 26px">导入成功</div>
           <div><a-button type="primary">查看数据</a-button></div>
         </div>
       </div>
@@ -112,46 +124,53 @@
 </template>
 
 <script setup lang="ts">
-import { defineEmits, defineProps, ref, h, reactive, onUnmounted, toRaw } from "vue"
+  import { defineEmits, defineProps, ref, h, reactive, onUnmounted, toRaw } from 'vue';
-import { CloseCircleOutlined, PlusOutlined, DeleteOutlined,CheckCircleOutlined } from "@ant-design/icons-vue"
+  import {
-import './index.scss'
+    CloseCircleOutlined,
-import { InboxOutlined } from '@ant-design/icons-vue';
+    PlusOutlined,
-import { message } from 'ant-design-vue';
+    DeleteOutlined,
-import type { UploadChangeParam } from 'ant-design-vue';
+    CheckCircleOutlined,
-import type { UploadProps } from 'ant-design-vue';
+  } from '@ant-design/icons-vue';
-// import { uploadShp } from '@/api/sys/analysis.ts'
+  import './index.scss';
-import axios from 'axios'
+  import { InboxOutlined } from '@ant-design/icons-vue';
-import { v4 as uuidv4 } from 'uuid';
+  import { message } from 'ant-design-vue';
+  import type { UploadChangeParam } from 'ant-design-vue';
+  import type { UploadProps } from 'ant-design-vue';
+  // import { uploadShp } from '@/api/sys/analysis.ts'
+  import axios from 'axios';
+  import { v4 as uuidv4 } from 'uuid';
+import { FILETYPE } from '../util' 
 
-const current = ref(0)
+  const current = ref(0);
-const fileList = ref<UploadProps['fileList']>([]);
+  const fileList = ref<UploadProps['fileList']>([]);
-const props = defineProps(['openModal'])
+  const props = defineProps(['openModal']);
-const emits = defineEmits(['update:openModal'])
+  const emits = defineEmits(['update:openModal']);
-const uploadFrom = reactive({
+  const uploadFrom = reactive({
-  serverName:'',
+    serverName: '',
-  spaceType:null,
+    spaceType: null,
-  tableName:'',
+    tableName: '',
-})
+  });
-const formRef = ref()
+  const formRef = ref();
-const dataList = ref([])
+  const dataList = ref([]);
-const isShp = ref(false)
+  const isShp = ref(false);
-// todo
+  // todo
-const columns = [
+  const columns = [
-  {title: 'Shp原始字段',dataIndex: 'name',key: 'name'},
+    { title: 'Shp原始字段', dataIndex: 'name', key: 'name' },
-  {title: '数据类型',dataIndex: 'type',key: 'type'},
+    { title: '数据类型', dataIndex: 'type', key: 'type' },
-  {title: '数据长度',dataIndex: 'length',key: 'length'},
+    { title: '数据长度', dataIndex: 'length', key: 'length' },
-  {title: '英文名称',dataIndex: 'refName',key: 'refName'},
+    { title: '英文名称', dataIndex: 'refName', key: 'refName' },
-  {title: '中文名称',dataIndex: 'initName',key: 'initName'},
+    { title: '中文名称', dataIndex: 'initName', key: 'initName' },
-  {title: '操作',dataIndex: 'operation',key: 'operation'},
+    { title: '操作', dataIndex: 'operation', key: 'operation' },
-]
+  ];
-const uploadFormRules = {
+  const uploadFormRules = {
-  serverName: [{ required: true, message: '请输入服务名称', trigger: 'blur' },],
+    serverName: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
-  spaceType: [{ required: true, message: '请选择参考系', trigger: 'blur' },],
+    spaceType: [{ required: true, message: '请选择参考系', trigger: 'blur' }],
-  tableName: [{ required: true, message: '请输入表名', trigger: 'blur' },],
+    tableName: [{ required: true, message: '请输入表名', trigger: 'blur' }],
-}
+  };
 
 const beforeUpload: UploadProps['beforeUpload'] = (file) => {
   console.log('beforeUpload',file)
+  file.type === FILETYPE.ZIP? isShp.value = true: isShp.value = false
   fileList.value = [file];
   return false;
 };
@@ -168,31 +187,12 @@ const submitShp = () => {
     formData.append('serverName',uploadFrom.serverName)
     formData.append('spaceType',uploadFrom.spaceType)
     formData.append('tableName',uploadFrom.tableName)
-    axios.post('http://221.2.83.254:9006/geoserver/uploadFile',formData,{headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
+    let url = ""
-      console.log(res)
+    isShp.value? url = 'http://221.2.83.254:9006/geoserver/uploadFile': url = 'http://221.2.83.254:9006/geoserver/uploadExcelFile'
-      let data = {
+    axios.post(url,formData,{headers: {'Content-Type': 'multipart/form-data;charset=UTF-8'}}).then(res => {
-        "dataType": "线",
+      let data = res.data.data.heads
-        "heads": [
+      console.log(data)
-          {
+      let showData = data.map(item => {
-              "name": "geom",
-              "length": "",
-              "type": "geometry"
-          },
-          {
-              "name": "MINGCHENG",
-              "length": 319,
-              "type": "varchar"
-          },
-          {
-              "name": "CHANGDU",
-              "length": 319,
-              "type": "varchar"
-          }
-        ],
-        "styleName": null,
-        "tableName": "aa"
-      }
-      let showData = data.heads.map(item => {
         return {...item,refName:item.name.toLowerCase(),initName:item.name,key:uuidv4()}
       })
       dataList.value = showData
@@ -230,91 +230,91 @@ const submitDataList = () => {
 </script>
 
 <style lang="scss" scoped>
-.insert-shp-modal{
+  .insert-shp-modal {
-  .title{
+    .title {
-    height: 77px;
+      height: 77px;
-    border-bottom: 1px solid #D7DBEC;
+      border-bottom: 1px solid #d7dbec;
-    display: flex;
-    align-items: center;
-    padding-left: 63px;
-    font-size: 28px;
-  }
-  .content{
-    padding: 106px;
-  }
-  .steps{
-    // margin-bottom: 80px;
-  }
-  .select-file-div{
-    padding-left: 52px;
-    padding-top: 80px;
-    display: flex;
-    .upload-div{
-      width:200px;
-      height:200px;
-      background: #FFFFFF;
-      box-shadow: 0px 52px 103px 0px rgba(192,199,218,0.35);
-      border-radius: 4px;
       display: flex;
-      justify-content: center;
       align-items: center;
-      .upload-dragger{
+      padding-left: 63px;
-        height: 174px;
+      font-size: 28px;
-      }
     }
-    .upload-span{
+    .content {
-      margin-left: 40px;
+      padding: 106px;
+    }
+    .steps {
+      // margin-bottom: 80px;
+    }
+    .select-file-div {
+      padding-left: 52px;
+      padding-top: 80px;
       display: flex;
-      flex-direction: column;
+      .upload-div {
-      justify-content: space-between;
+        width: 200px;
-      .upload-span-content{
+        height: 200px;
-        font-size:16px;
+        background: #ffffff;
-        margin-top: 8px;
+        box-shadow: 0px 52px 103px 0px rgba(192, 199, 218, 0.35);
+        border-radius: 4px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .upload-dragger {
+          height: 174px;
+        }
+      }
+      .upload-span {
+        margin-left: 40px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .upload-span-content {
+          font-size: 16px;
+          margin-top: 8px;
+        }
+      }
+      .upload-form {
+        flex: 1;
+        margin-left: 40px;
+        .upload-span-button {
+          display: flex;
+          justify-content: flex-end;
+        }
       }
     }
-    .upload-form{
+    .edit-info-div {
-      flex: 1;
+      padding-top: 26px;
-      margin-left:40px;
+      .footer-button {
-      .upload-span-button{
+        margin-top: 20px;
         display: flex;
         justify-content: flex-end;
       }
+      .insert-list-button {
+        background-color: #91b0ff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        user-select: none;
+        cursor: pointer;
+        height: 30px;
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        font-weight: 400;
+        transition: 1s;
+      }
+      .insert-list-button:hover {
+        font-weight: 900;
+        color: #000;
+      }
+    }
+    .submit-success {
+      .success-content {
+        width: 200px;
+        align-items: center;
+        margin: auto;
+        display: flex;
+        flex-direction: column;
+      }
     }
   }
-  .edit-info-div{
-    padding-top:26px;
-    .footer-button{
-      margin-top: 20px;
-      display: flex;
-      justify-content: flex-end;
-    }
-    .insert-list-button{
-      background-color: #91b0ff;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: #fff;
-      user-select: none;
-      cursor: pointer;
-      height: 30px;
-      border-bottom-left-radius: 10px;
-      border-bottom-right-radius: 10px;
-      font-weight: 400;
-      transition: 1s;
-    }
-    .insert-list-button:hover{
-      font-weight: 900;
-      color:#000;
-    }
-  }
-  .submit-success{
-    .success-content{
-      width: 200px;
-      align-items: center;
-      margin: auto;
-      display: flex;
-      flex-direction: column;
-    }
-  }
-}
 </style>

src/components/MapboxMaps/LayerComponent/index.vue

@@ -2,7 +2,13 @@
   <div class="LayerComponent">
     <div class="title">图层</div>
     <div class="insert-layer">
-      <a-button class="add-layer-button" type="primary" :icon="h(PlusOutlined)" @click="openInsertShpModal">添加图层</a-button>
+      <a-button
+        class="add-layer-button"
+        type="primary"
+        :icon="h(PlusOutlined)"
+        @click="openInsertShpModal"
+        >添加图层</a-button
+      >
       <span class="clear-layer-button">清空</span>
     </div>
     <div class="show-current-layer">
@@ -12,21 +18,31 @@
       </div>
     </div>
     <div class="show-layers">
-      <div :class="`show-layer-item ${isSelected === item.id ? 'select-list-item': ''}`" 
+      <div
-        v-for="item in layerList" :key='item.id' @click="selectLayer(item.id)">
+        :class="`show-layer-item ${isSelected === item.id ? 'select-list-item' : ''}`"
-        <a-checkbox v-model:checked="item.checked" @change="handlerCheckboxChange(item)" />
+        v-for="item in dataList"
+        :key="item.id"
+        @click="selectLayer(item.id)"
+      >
+        <a-checkbox v-model:checked="item.checked" />
         <a-image
           :width="119"
           :height="87"
-          style="margin-left: 10px;border-radius: 5px;"
+          style="margin-left: 10px; border-radius: 5px"
           src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp"
           :preview="false"
-          :fallback="errorImage"/>
+          :fallback="errorImage"
+        />
         <div class="layer-item-text">
           <div class="item-title">名称： {{ item.name }}</div>
           <div class="item-control">
-            <a-button type="primary" size="small" style="background-color:#09B66D;margin-right: 7px;" @click="handlerPreviewLayer(item)">查看数据</a-button>
+            <a-button
-            <a-button type="primary" size="small" style="background-color: #0081FF;">操作</a-button>
+              type="primary"
+              size="small"
+              style="background-color: #09b66d; margin-right: 7px"
+              >查看数据</a-button
+            >
+            <a-button type="primary" size="small" style="background-color: #0081ff">操作</a-button>
           </div>
         </div>
       </div>
@@ -35,137 +51,158 @@
 </template>
 
 <script setup lang="ts">
-import { PlusOutlined } from '@ant-design/icons-vue'
+  import { PlusOutlined } from '@ant-design/icons-vue';
-import { h, defineEmits, ref,defineProps } from "vue"
+  import { h, defineEmits, ref } from 'vue';
-import { errorImage } from "../util.ts"
+  import { errorImage } from '../util.ts';
-const dataList = ref([])
+  const dataList = ref([
-const isSelected = ref()
+    {
-const props = defineProps({
+      id: 1,
-  layerList:{
+      name: '111',
-    type: Array,
+      checked: true,
-    required: true,
+    },
-    default: []
+    {
-  }
+      id: 2,
-})
+      name: '222',
-
+      checked: false,
-const emits = defineEmits(["changeOpenModal","changeOpenInsertShpModal","handlerPreviewLayer"])
+    },
-const changeClick = () => {
+    {
-  emits("changeOpenModal",true)
+      id: 3,
-}
+      name: '333',
-const openInsertShpModal = () => {
+      checked: false,
-  emits("changeOpenInsertShpModal",true)
+    },
-}
+    {
-const selectLayer = (id:number) => {
+      id: 4,
-  isSelected.value = id
+      name: '444',
-}
+      checked: false,
-
+    },
-// 叠加与定位图层
+    {
-const handlerCheckboxChange = (item) => {
+      id: 5,
-  handlerPreviewLayer(item)
+      name: '555',
-}
+      checked: false,
-
+    },
-const handlerPreviewLayer = (item)=>{
+    {
-  emits("handlerPreviewLayer",item);
+      id: 6,
-}
+      name: '666',
-
+      checked: false,
-
+    },
-
+    {
+      id: 7,
+      name: '777',
+      checked: false,
+    },
+    {
+      id: 8,
+      name: '888',
+      checked: false,
+    },
+  ]);
+  const isSelected = ref();
+  const emits = defineEmits(['changeOpenModal', 'changeOpenInsertShpModal']);
+  const changeClick = () => {
+    emits('changeOpenModal', true);
+  };
+  const openInsertShpModal = () => {
+    emits('changeOpenInsertShpModal', true);
+  };
+  const selectLayer = (id: number) => {
+    isSelected.value = id;
+  };
 </script>
 
 <style lang="scss" scoped>
-.LayerComponent{
+  .LayerComponent {
-  position: absolute;
+    position: absolute;
-  top: 0;
+    top: 0;
-  left: 0;
+    left: 0;
-  width: 356px;
+    width: 356px;
-  height: 100%;
+    height: 100%;
-  background-color: #E0E5ED;
+    background-color: #e0e5ed;
-  .title{
+    .title {
-    height:61px;
+      height: 61px;
-    font-size: 26px;
+      font-size: 26px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .insert-layer{
-    height:61px;
-    background-color: #fff;
-    padding-left: 16px;
-    padding-right: 14px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-    .add-layer-button{
-      background-color: #0081FF;
-    }
-    .clear-layer-button{
-      user-select: none;
-      cursor: pointer;
-    }
-  }
-  .show-current-layer{
-    padding-left: 15px;
-    padding-right: 15px;
-    .current-layer-div{
-      height: 37px;
       display: flex;
-      user-select: none;;
+      justify-content: center;
-      .current-layer-title{
+      align-items: center;
-        background-color: #fff;
+    }
-        flex: 1;
+    .insert-layer {
-        display: flex;
+      height: 61px;
-        align-items: center;
+      background-color: #fff;
-        border-top-left-radius: 5px;
+      padding-left: 16px;
-        border-bottom-left-radius: 5px;
+      padding-right: 14px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+      .add-layer-button {
+        background-color: #0081ff;
       }
-      .current-layer-title::before{
+      .clear-layer-button {
-        content: "";
+        user-select: none;
-        display: block;
-        width: 7px;
-        height: 7px;
-        background-color: #09B66D;
-        border-radius: 50%;
-        margin: 6px;
-      }
-      .create-new-layer-button{
-        width: 106px;
-        background-color: #0081FF;
-        color: #fff;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border-top-right-radius: 5px;
-        border-bottom-right-radius: 5px;
         cursor: pointer;
       }
     }
-  }
+    .show-current-layer {
-  .show-layers{
+      padding-left: 15px;
-    height: calc(100% - 179px);
+      padding-right: 15px;
-    padding-top: 14px;
+      .current-layer-div {
-    padding-left: 15px;
+        height: 37px;
-    padding-right: 15px;
-    overflow: auto;
-
-    .show-layer-item{
-      background-color: #fff;
-      height: 133px;
-      border-radius: 5px;
-      padding: 23px 10px;
-      display: flex;
-      margin-bottom: 14px;
-      .layer-item-text{
-        margin-left: 20px;
-        flex: 1;
         display: flex;
-        flex-direction: column;
+        user-select: none;
-        justify-content: space-between;
+        .current-layer-title {
+          background-color: #fff;
+          flex: 1;
+          display: flex;
+          align-items: center;
+          border-top-left-radius: 5px;
+          border-bottom-left-radius: 5px;
+        }
+        .current-layer-title::before {
+          content: '';
+          display: block;
+          width: 7px;
+          height: 7px;
+          background-color: #09b66d;
+          border-radius: 50%;
+          margin: 6px;
+        }
+        .create-new-layer-button {
+          width: 106px;
+          background-color: #0081ff;
+          color: #fff;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-top-right-radius: 5px;
+          border-bottom-right-radius: 5px;
+          cursor: pointer;
+        }
       }
     }
+    .show-layers {
+      height: calc(100% - 179px);
+      padding-top: 14px;
+      padding-left: 15px;
+      padding-right: 15px;
+      overflow: auto;
+
+      .show-layer-item {
+        background-color: #fff;
+        height: 133px;
+        border-radius: 5px;
+        padding: 23px 10px;
+        display: flex;
+        margin-bottom: 14px;
+        .layer-item-text {
+          margin-left: 20px;
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+        }
+      }
+    }
+    .select-list-item {
+      border: 1px solid;
+    }
   }
-  .select-list-item{
-    border:1px solid;
-  }
-}
 </style>

src/components/MapboxMaps/LayerControl/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="LayerControl">
-    <a-button type="primary" class="blue line-up" :icon="h(EditOutlined)">绘制</a-button>
+    <a-button type="primary" class="blue line-up" @click="drawClick" :icon="h(EditOutlined)"
+      >绘制</a-button
+    >
     <a-button type="primary" class="blue line-up" :icon="h(FormOutlined)">编辑</a-button>
     <a-button type="primary" class="blue last-line-up" :icon="h(BlockOutlined)">合并</a-button>
     <a-button type="primary" class="orange line-up" :icon="h(SplitCellsOutlined)">分割</a-button>
@@ -12,35 +14,47 @@
 </template>
 
 <script setup lang="ts">
-import { EditOutlined, FormOutlined, BlockOutlined, 
+  import {
-  SplitCellsOutlined, DragOutlined, DeleteOutlined, RollbackOutlined, CloseCircleOutlined, } from "@ant-design/icons-vue"
+    EditOutlined,
-import { h } from "vue"
+    FormOutlined,
+    BlockOutlined,
+    SplitCellsOutlined,
+    DragOutlined,
+    DeleteOutlined,
+    RollbackOutlined,
+    CloseCircleOutlined,
+  } from '@ant-design/icons-vue';
+  import { h } from 'vue';
+  const emit = defineEmits(['draw']);
+  function drawClick() {
+    emit('draw');
+  }
 </script>
 
 <style lang="scss" scoped>
-.LayerControl{
+  .LayerControl {
-  position: absolute;
+    position: absolute;
-  top: 20px;
+    top: 20px;
-  left: 386px;
+    left: 386px;
-  background-color: #fff;
+    background-color: #fff;
-  padding: 13px 13px 8px 13px;
+    padding: 13px 13px 8px 13px;
-  button{
+    button {
-    margin-bottom: 5px;
+      margin-bottom: 5px;
+    }
+  }
+  .blue {
+    background-color: #0081ff;
+  }
+  .orange {
+    background-color: #ff8a48;
+  }
+  .green {
+    background-color: #09b66d;
+  }
+  .line-up {
+    margin-right: 10px;
+  }
+  .last-line-up {
+    margin-right: 15px;
   }
-}
-.blue{
-  background-color: #0081FF;
-}
-.orange{
-  background-color: #FF8A48;
-}
-.green{
-  background-color: #09B66D;
-}
-.line-up{
-  margin-right: 10px;
-}
-.last-line-up{
-  margin-right: 15px
-}
 </style>

src/components/MapboxMaps/MapboxMap.vue

@@ -1,103 +1,66 @@
 <template>
-  <div class="map-container">
+    <div class="map-container">
-    <div id="mapContainer" class="map-box"></div>
+      <div id="mapContainer" class="map-box"></div>
-    <!-- <div class="map-control">
+      <!-- <div class="map-control">
-      <img
+        <img
-        v-for="(item, index) in nextMapControl"
+          v-for="(item, index) in nextMapControl"
-        :key="index"
+          :key="index"
-        :src="item.icon"
+          :src="item.icon"
-        :title="item.title"
+          :title="item.title"
-        @click="handlerMapControlClick(item.handler)"
+          @click="handlerMapControlClick(item.handler)"
+        />
+        <img v-show="nextMapControl.length > 0" @click="handlerUnDraw" src="/del.png" title="清除" />
+      </div> -->
+      <LayerComponent
+        @changeOpenModal="changeOpenModal"
+        @changeOpenInsertShpModal="changeOpenInsertShpModal"
       />
-      <img v-show="nextMapControl.length > 0" @click="handlerUnDraw" src="/del.png" title="清除" />
+      <LayerControl @draw="handlerDrawPolygon" />
-    </div> -->
+      <UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal" />
-    <LayerComponent @changeOpenModal="changeOpenModal" @changeOpenInsertShpModal="changeOpenInsertShpModal" :layerList="layerList" @handlerPreviewLayer="handlerPreviewLayer"/>
+      <InsertShp v-model:openModal="insertShpModal" />
-    <LayerControl />
+      <DataListComponent />
-    <UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal" @handlerAddToLayerList="handlerAddToLayerList"/>
+      <RightShowInfo v-model:openModal="openRightInfo" />
-    <InsertShp v-model:openModal="insertShpModal" />
+    </div>
-    <DataListComponent @handlerLocation="handlerLocation" @handlerEdit="handlerEdit"/>
+  </template>
-    <RightShowInfo :isOpen="isOpen" @handlerClose="handlerClose" />
-  </div>
-</template>
   
   <script lang="ts" setup>
     import { onMounted, onUnmounted, defineProps, reactive, ref } from 'vue';
     import { useMessage } from '@/hooks/web/useMessage';
-    import mapboxgl, { Map,Popup } from 'mapbox-gl';
+    import mapboxgl, { Map, Popup } from 'mapbox-gl';
-
+  
     // 图形绘制工具类
-    import MapboxDraw from "@mapbox/mapbox-gl-draw";
+    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,
+      SnapPolygonMode,
-        SnapPointMode,
+      SnapPointMode,
-        SnapLineMode,
+      SnapLineMode,
-        SnapModeDrawStyles,
+      SnapModeDrawStyles,
-        SnapDirectSelect,
+      SnapDirectSelect,
-    } from "mapbox-gl-draw-snap-mode";
+    } from 'mapbox-gl-draw-snap-mode';
-    
+    import LayerComponent from './LayerComponent/index.vue';
-    import {customDrawStyles} from './Styles/Styles'
+    import LayerControl from './LayerControl/index.vue';
-
+    import UseModal from './Modal/index.vue';
-    import LayerComponent from './LayerComponent/index.vue'
+    import InsertShp from './InsertShp/index.vue';
-    import LayerControl from './LayerControl/index.vue'
+    import DataListComponent from './DataListComponent/index.vue';
-    import UseModal from './Modal/index.vue'
+    import RightShowInfo from './RightShowInfo/index.vue';
-    import InsertShp from './InsertShp/index.vue'
+  
-    import DataListComponent from './DataListComponent/index.vue'
-    import RightShowInfo from './RightShowInfo/index.vue'
-
-    const isOpen = ref(false)
-    const layerList = reactive([
-        {
-                id:1,
-                name:"沂水县道路中心线",
-                checked:false,
-                layer:{
-                    'id': 'roadnetLine1',
-                    'type': 'line',
-                    'source': {
-                        type: 'vector',
-                        tiles: [ 'http://192.168.10.102:9020/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=yishuixian&X-Token=1ded3fe7'],
-                        minzoom: 1,
-                        maxzoom: 20
-                    },
-                    "source-layer": "yishuixian",
-                    'layout': {
-                        'line-join': 'round',
-                        'line-cap': 'round'
-                    },
-                    'paint': {
-                        'line-color': [
-                        "case",
-                        ["==", ["get", "handle_status_id"], 0],
-                        "#E6A23C",
-                        ["==", ["get", "handle_status_id"], 1],
-                        "#409EFF",
-                        ["==", ["get", "handle_status_id"], 2],
-                        "#67C23A",
-                        // 默认
-                        "#67C23A",
-                        ],
-                        'line-width': 1
-                    }
-                }
-            }
-    ])
-
     const openModal = ref(false);
-    const insertShpModal = ref(false)
+    const insertShpModal = ref(false);
+    const openRightInfo = ref(false);
     const changeOpenModal = (value) => {
-      openModal.value = value
+      openModal.value = value;
-    }
+    };
     const changeOpenInsertShpModal = (value) => {
-      insertShpModal.value = value
+      insertShpModal.value = value;
-    }
+    };
   
     // map参数类型
     interface MapboxOptionsInterface {
@@ -113,45 +76,43 @@
           return MapControlConfig[item];
         })
       : [];
-
+  
     console.log('nextMapControl::: ', nextMapControl);
   
     // 定义地图容器
     let map: Map;
-    let popup:Popup;
+    let popup: Popup;
-    let clickPoisition:Array<number> = [];
+    let clickPoisition: Array<number> = [];
-    let selectFeature:Object = {};
+    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);
+        mp = new MP(map);
-        // emit('mapOnLoad', map);
+        emit('mapOnLoad', map);
-
+  
         // 初始化绘图空间
-        // handlerInitDrawTool();
+        handlerInitDrawTool();
-
+  
-        map.on("click",(e)=>{
+        map.on('click', (e) => {
-            handlerPreviewFeatureInfo(e);
+          clickPoisition = e.lngLat;
-            clickPoisition = e.lngLat
+        });
-        })
+  
-
+        map.on('draw.selectionchange', (e) => {
-        map.on("draw.selectionchange",(e)=>{
+          handlerCopyToTargetLayer(e);
-            handlerCopyToTargetLayer(e);
+        });
-        })
+  
-
         window.handlerCopyFeature = handlerCopyFeature;
-
       });
     });
     // 销毁地图
@@ -204,260 +165,130 @@
       mp.deleteDraw();
       emit('mapDraw', 'cancel');
     };
-    
+  
     // 初始化绘图空间
     const handlerInitDrawTool = () => {
-        let drawTool = new MapboxDraw({
+      let drawTool = new MapboxDraw({
-            modes: {
+        modes: {
-                ...MapboxDraw.modes,
+          ...MapboxDraw.modes,
-                draw_point: SnapPointMode,
+          draw_point: SnapPointMode,
-                draw_polygon: SnapPolygonMode,
+          draw_polygon: SnapPolygonMode,
-                draw_line_string: SnapLineMode,
+          draw_line_string: SnapLineMode,
-                direct_select: SnapDirectSelect,
+          direct_select: SnapDirectSelect,
-            },
+        },
-          // Styling guides
+        // Styling guides
-            styles: customDrawStyles,
+        styles: SnapModeDrawStyles,
-            userProperties: true,
+        userProperties: true,
-            // Config snapping features
+        // Config snapping features
-            snap: true,
+        snap: true,
-            snapOptions: {
+        snapOptions: {
-                snapPx: 15, // defaults to 15
+          snapPx: 15, // defaults to 15
-                snapToMidPoints: true, // defaults to false
+          snapToMidPoints: true, // defaults to false
-                snapVertexPriorityDistance: 0.0025, // defaults to 1.25
+          snapVertexPriorityDistance: 0.0025, // defaults to 1.25
-            },
+        },
-            guides: false,
+        guides: true,
-        });
+      });
-
+  
-        map.addControl(drawTool, "top-right");
+      map.addControl(drawTool, 'top-right');
-    }
+    };
-
+  
     // 将图斑复制到指定图层
     const handlerCopyToTargetLayer = (e) => {
-        
+      if (e.features.length > 0) {
-        if(e.features.length>0){
+        if (popup) {
-            if(popup){
+          popup.remove();
-                popup.remove();
+          popup = null;
-                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();
         }
-    }
+  
-
+        selectFeature = e.features[0];
-    const handlerCopyFeature = () => {
+  
-        console.log("selectFeature",selectFeature);
+        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 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 handlerPreviewLayer = (layer) => {
-        handlerLayerControler(layer)
-    }
-
-    // 图层控制中心
-    const handlerLayerControler = (layerInfo)=>{
-        console.log("layerinfoinfo",layerInfo)
-        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){
-            console.log("EEEEEEE",e.features[0].layer.id,e.features[0].properties);
-            isOpen.value = true;
-        }
-    }
-
-    const handlerClose = (e) => {
-        isOpen.value = e;
-    }
-
-
-    // 图斑定位
-    const handlerLocation = (lngLat) => {
-        map.flyTo({
-          center: lngLat,
-          zoom: 16,
-          speed: 10, // 飞行速度
-          curve: 1, // 飞行曲线
-          easing(t) {
-            // 飞行动画函数
-            return t;
-          },
-        });
-    }
-
-    // 编辑图斑
-    const handlerEdit = (info) => {
-        initDraw(info);
-    }
-
-    const initDraw = (layerInfo)=> {
-        // 实例化绘图工具
-
-        let 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 handlerCopyFeature = () => {
+      console.log(selectFeature);
+      popup.remove();
+      createMessage.success('复制成功！');
+    };
   </script>
-
+  
-<style>
+  <style>
-.mapboxgl-ctrl-group:not(:empty){
+    .mapboxgl-ctrl-group:not(:empty) {
-    box-shadow: none;
+      box-shadow: none;
-}
+    }
-.mapboxgl-ctrl-group{
+    .mapboxgl-ctrl-group {
-    background:none!important;
+      background: none !important;
-}
+    }
-.mapbox-gl-draw_ctrl-draw-btn{
+    .mapbox-gl-draw_ctrl-draw-btn {
-    width:40px!important;
+      width: 40px !important;
-    height:40px!important;
+      height: 40px !important;
-    float:left;
+      float: left;
-    border-radius: 50%;
+      border-radius: 50%;
-}
+    }
-.mapboxgl-ctrl-top-right{
+    .mapboxgl-ctrl-top-right {
-}
+    }
-
+  
-.mapboxgl-ctrl-group button+button{
+    .mapboxgl-ctrl-group button + button {
-    border:0px;
+      border: 0px;
-    margin:0px 3px;
+      margin: 0px 3px;
-}
+    }
-
+  
-.mapbox-gl-draw_ctrl-draw-btn:hover{
+    .mapbox-gl-draw_ctrl-draw-btn:hover {
-    transform: scale(1.2);
+      transform: scale(1.2);
-}
+    }
-.mapbox-gl-draw_polygon{
+    .mapbox-gl-draw_polygon {
-    background-image:url(/polygon.png);
+      background-image: url(/polygon.png);
-    background-size:100% 100%;
+      background-size: 100% 100%;
-    width:100px;
+      width: 100px;
-    height:100px;
+      height: 100px;
-}
+    }
-.mapbox-gl-draw_point{
+    .mapbox-gl-draw_point {
-    background-image:url(/point.png);
+      background-image: url(/point.png);
-    background-size:100% 100%;
+      background-size: 100% 100%;
-    width:100px;
+      width: 100px;
-    height:100px;
+      height: 100px;
-}
+    }
-.mapbox-gl-draw_line{
+    .mapbox-gl-draw_line {
-    background-image:url(/line.png);
+      background-image: url(/line.png);
-    background-size:100% 100%;
+      background-size: 100% 100%;
-    width:100px;
+      width: 100px;
-    height:100px;
+      height: 100px;
-}
+    }
-
+  
-.mapbox-gl-draw_trash{
+    .mapbox-gl-draw_trash {
-    background-image:url(/del.png);
+      background-image: url(/del.png);
-    background-size:100% 100%;
+      background-size: 100% 100%;
-    width:100px;
+      width: 100px;
-    height:100px;
+      height: 100px;
-}
+    }
-
+  
-.mapbox-gl-draw_combine{
+    .mapbox-gl-draw_combine {
-    background-image:url(/combine.png);
+      background-image: url(/combine.png);
-    background-size:100% 100%;
+      background-size: 100% 100%;
-    width:100px;
+      width: 100px;
-    height:100px;
+      height: 100px;
-}
+    }
-
+  
-.mapbox-gl-draw_uncombine{
+    .mapbox-gl-draw_uncombine {
-    background-image:url(/uncombine.png);
+      background-image: url(/uncombine.png);
-    background-size:100% 100%;
+      background-size: 100% 100%;
-    width:100px;
+      width: 100px;
-    height:100px;
+      height: 100px;
-}
+    }
-
+  </style>
-</style>
   

src/components/MapboxMaps/Modal/ServeResource/index.vue

@@ -20,7 +20,7 @@
         </a-select>
       </div>
       <div class="content">
-        <div class="show-item" v-for="item in 10" :key="item"  @click="showInfo">
+        <div class="show-item" v-for="item in dataList" :key="item.id"  @click="showInfo(item)">
           <div class="info">
             <a-image
               :width="119"
@@ -31,15 +31,20 @@
               :fallback="errorImage"
             />
             <div class="show-text">
-              <div class="title">名称： {{ "费县行政边界" }}</div>
+              <div class="title">名称： {{ item.name }}</div>
-              <div class="sub-title">描述： {{ "山东省临沂市费县行政边界" }}</div>
+              <div class="sub-title">描述： {{ item.description }}</div>
             </div>
           </div>
           <div class="button">
-            <a-button type="primary" style="background-color:#09B66D;margin-right: 10px">
+            <!-- <a-button type="primary" style="background-color:#09B66D;margin-right: 10px">
               编辑 
+<<<<<<< HEAD
             </a-button>
             <a-button type="primary" @click="handlerAddToLayerList">
+=======
+            </a-button> -->
+            <a-button type="primary">
+>>>>>>> 2aed0750b8d9679d2f0bc47b0c629ecf78313c2c
               <template #icon>
                 <PlusOutlined />
               </template>
@@ -97,12 +102,28 @@ const key = ref('')
 const current = ref()
 const pageSize = ref()
 const jsonData = ref('')
+const dataList = ref([
+  {
+    id:1,
+    name:'test',
+    description:'test111asdf asdf asdf asdf s',
+    table:'test',
+  },
+  {
+    id:2,
+    name:'TEST',
+    description:'啊士大夫啊手动阀撒地方',
+    table:'a_test',
+  }
+])
 const mapOptions = {
   center: [116.404, 39.905],
   zoom: 8,
 };
 const mapDrawControl: DrawingType[] = [DrawingType.Polygon, DrawingType.Line];
+const useMap = ref()
 const mapOnLoad = (map) => {
+  useMap.value = map
   // map 对象
   console.log('map::: ', map);
   // mapU封装对象
@@ -122,7 +143,33 @@ const handlerMapDraw = (type: string, data: any) => {
   console.log('type::: ', type);
 };
 
-const showInfo = () => {
+const showInfo = (item) => {
+  // useMap.value.removeLayer('street-border')
+  // useMap.value.removeSource('wmsSource')
+  if (useMap.value.getLayer('street-border')) useMap.value.removeLayer('street-border')
+  if(useMap.value.getSource('wmsSource')) useMap.value.removeSource('wmsSource')
+  useMap.value.addSource("wmsSource",{
+    type: "raster",
+    tiles: [
+      "http://123.132.248.154:9235" +
+        "/geoserver/ksp/wms?service=WMS&version=1.1.0&request=GetMap&layers=ksp:" +
+        item.table +
+        "&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
+    ],
+  })
+  useMap.value.addLayer({
+    id: "street-border",
+    type: "raster",
+    source: "wmsSource",
+    layout: {
+      visibility: "visible",
+    },
+  });
+  console.log(item,useMap.value,'11111')
+  useMap.value.flyTo({
+    center:[117.9838535, 35.4819155],
+    zoom: 12,
+  })
   console.log(111111)
   let data = {
     sources:{
@@ -207,6 +254,7 @@ const handlerAddToLayerList = (item) => {
     max-height: 565px;
     overflow: auto;
     margin-bottom: 8px;
+    height: 565px;
     .show-item{
       background-color: #fff;
       height: 119px;

src/components/MapboxMaps/RightShowInfo/index.vue

@@ -1,5 +1,9 @@
 <template>
+<<<<<<< HEAD
   <a-drawer class="right-show-info" placement="right"  :open="isOpen" @close="handlerClose">
+=======
+  <a-drawer class="right-show-info" placement="right" :open="open" @close="() => (open = false)">
+>>>>>>> 2aed0750b8d9679d2f0bc47b0c629ecf78313c2c
     <div class="title">
       <div class="tag"></div>
       <div class="title-text">操作</div>
@@ -16,6 +20,7 @@
 </template>
 
 <script setup lang="ts">
+<<<<<<< HEAD
 import { ref,defineProps,defineEmits } from "vue"
 import './index.scss'
 
@@ -33,36 +38,48 @@ const handlerClose = () => {
 }
 
 
+=======
+  import { ref, defineProps, watch } from 'vue';
+  import './index.scss';
+  const open = ref(true);
+  const props = defineProps(['openModal']);
+  watch(
+    () => props.openModal,
+    (newValue) => {
+      open.value = newValue;
+    },
+  );
+>>>>>>> 2aed0750b8d9679d2f0bc47b0c629ecf78313c2c
 </script>
 
 <style lang="scss" scoped>
-.right-show-info {
+  .right-show-info {
-  position: absolute;
+    position: absolute;
-  top: 0;
+    top: 0;
-  right: 0;
+    right: 0;
-  width: 356px;
+    width: 356px;
-  height: 100%;
+    height: 100%;
-  background-color: #FFF;
+    background-color: #fff;
-  .title{
+    .title {
-    height: 61px;
+      height: 61px;
-    padding-left: 26px;
+      padding-left: 26px;
-    display:flex;
+      display: flex;
-    align-items: center;
+      align-items: center;
-    border-bottom: 1px solid #D9E2F2;
+      border-bottom: 1px solid #d9e2f2;
-    .tag{
+      .tag {
-      width: 3px;
+        width: 3px;
-      height: 23px;
+        height: 23px;
-      background-color:#0081FF;
+        background-color: #0081ff;
-      margin-right: 19px;
+        margin-right: 19px;
+      }
+      .title-text {
+        color: #141d27;
+        font-size: 24px;
+      }
     }
-    .title-text{
+    .content {
-      color: #141D27 ;
+      height: calc(100% - 61px);
-      font-size: 24px;
+      padding: 25px;
     }
   }
-  .content{
-    height: calc(100% - 61px);
-    padding: 25px;
-  }
-}
 </style>

src/components/MapboxMaps/util.ts

@@ -1 +1,5 @@
-export const errorImage = "data:image/png;base64,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"
+export const errorImage = "data:image/png;base64,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"
+export enum FILETYPE {
+  ZIP = 'application/x-zip-compressed',
+  XLSX = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+}

src/views/demo/form-design/components/VFormDesign/components/FormItemProps.vue

@@ -5,6 +5,35 @@
   <div class="properties-content">
     <div class="properties-body" v-if="formConfig.currentItem?.itemProps">
       <Empty class="hint-box" v-if="!formConfig.currentItem.key" description="未选择控件" />
+      <Form
+        v-else-if="formConfig.currentItem.field == 'MapGeom'"
+        label-align="left"
+        layout="vertical"
+        description="地图控件"
+      >
+        <FormItem label="地图宽度">
+          <a-input-number
+            v-model:value="formConfig.mapSetData.width"
+            placeholder="请输入地图宽度"
+            :min="1"
+            :max="100"
+            defaultValue="100"
+          >
+            <template #addonAfter><PercentageOutlined /></template>
+          </a-input-number>
+        </FormItem>
+        <!-- <FormItem label="选择图层">
+        </FormItem> -->
+        <FormItem label="是否允许添加图斑">
+          <Switch v-model:checked="formConfig.mapSetData.isAllowAddPolygon" />
+        </FormItem>
+        <FormItem label="是否允许编辑图斑">
+          <Switch v-model:checked="formConfig.mapSetData.isAllowEditPolygon" />
+        </FormItem>
+        <FormItem label="是否开启位置跳转">
+          <Switch v-model:checked="formConfig.mapSetData.isEnablePostionJump" />
+        </FormItem>
+      </Form>
       <Form v-else label-align="left" layout="vertical">
         <div v-for="item of baseFormItemProps" :key="item.name">
           <FormItem :label="item.label" v-if="showProps(item.exclude)">
@@ -14,10 +43,7 @@
               v-bind="item.componentProps"
               :is="item.component"
               v-model:value="formConfig.currentItem[item.name]"
-              :disabled="
+              :key="formConfig.currentItem.component + '===' + formConfig.currentItem.label"
-                formConfig.currentItem.field == 'MapGemo' &&
-                (item.name == 'field' || item.name == 'component' || item.name == 'label')
-              "
             />
           </FormItem>
         </div>
@@ -78,7 +104,7 @@
   } from '../../VFormDesign/config/formItemPropsConfig';
 
   import { Empty, Input, Form, FormItem, Switch, Checkbox, Col, SelectProps } from 'ant-design-vue';
-
+  import { PercentageOutlined } from '@ant-design/icons-vue';
   import RuleProps from './RuleProps.vue';
   import { useFormDesignState } from '../../../hooks/useFormDesignState';
   import { isArray } from 'lodash-es';
@@ -94,6 +120,7 @@
           formConfig.value.currentItem.itemProps.labelCol || {};
         formConfig.value.currentItem.itemProps.wrapperCol =
           formConfig.value.currentItem.itemProps.wrapperCol || {};
+        formConfig.value.mapSetData = formConfig.value.mapSetData || {};
       }
     },
     { deep: true, immediate: true },

src/views/demo/form-design/components/VFormDesign/config/formItemPropsConfig.ts

@@ -185,9 +185,11 @@ export const baseFormItemProps: IBaseFormAttrs[] = [
     label: '控件-FormItem',
     component: Select,
     componentProps: {
-      options: baseComponents
+      options: baseComponents.concat(customComponents[0]).map((item) => ({
-        .concat(customComponents)
+        value: item.component,
-        .map((item) => ({ value: item.component, label: item.label })),
+        label: item.label,
+        key: item.component + '===' + item.label,
+      })),
     },
   },
   {

src/views/demo/form-design/components/VFormItem/index.vue

@@ -28,7 +28,7 @@
       <div>
         <img
           src="/mars/img/onlineform/map.png"
-          v-if="schema.field == 'MapGemo'"
+          v-if="schema.field == 'MapGeom'"
           class="v-form-item-wrapper"
           :defaultValue="schema.defaultValue"
           v-bind="{ ...cmpProps, ...asyncProps }"

src/views/demo/form-design/core/formItemConfig.ts

@@ -135,10 +135,10 @@ export const customComponents: IVFormComponent[] = [
     },
   },
   {
-    component: 'InputGuid',
+    component: 'MapGeom',
     label: '地图',
     icon: 'ant-design:heat-map-outlined',
-    field: 'MapGemo',
+    field: 'MapGeom',
     colProps: { span: 24 },
     componentProps: {},
   },

src/views/demo/form-design/typings/v-form-component.ts

@@ -72,6 +72,37 @@ export interface IVFormComponent {
   columns?: Array<{ span: number; children: any[] }>;
 }
 
+/**
+ *  图层字段
+ */
+export interface LayerFields {
+  // GID字段
+  gidField?: string;
+  // 标注字段
+  labelField?: string;
+  // geom字段
+  geomField?: string;
+  // 标注字段options
+  labelFieldOptions?: any[];
+}
+/**
+ * 地图属性
+ */
+export interface MapComponent {
+  // 地图宽度
+  width?: string;
+  // 选择图层
+  chooseLayer: string;
+  // 图层字段解析
+  layerFields?: LayerFields;
+  // 是否允许添加图斑
+  isAllowAddPolygon?: boolean;
+  // 是否允许编辑图斑
+  isAllowEditPolygon?: boolean;
+  // 是否开启位置跳转
+  isEnablePostionJump?: boolean;
+}
+
 declare type namesType = string | string[];
 
 /**
@@ -98,6 +129,7 @@ export interface IFormConfig extends PickAntFormConfig {
   activeKey?: PropsTabKey;
   status?: string;
   defaultValue?: string;
+  mapSetData?: MapComponent;
 }
 
 export interface AForm {

src/views/demo/onlineform/formCall/CreateFlow.vue

@@ -100,6 +100,7 @@
         return {};
       },
     },
+    isUpdate: Boolean,
   });
   const emit = defineEmits(['closeModel']);
   const keyValue = ref('');
@@ -177,7 +178,7 @@
     var processId = buildGUID();
     var querys = {
       schemeId: designerData.formCurrentNode.formVerison,
-      isUpdate: false,
+      isUpdate: props.isUpdate,
       pkey: keyValue.value,
       pkeyValue: processId,
     };

src/views/demo/onlineform/formCall/index.vue

@@ -33,14 +33,20 @@
       :destroyOnClose="true"
     >
       <template #footer> </template>
-      <CreateFlow ref="posRef" :code="flowCode" @closeModel="closeMolder" :flowFormData="flowFormData"/>
+      <CreateFlow
+        ref="posRef"
+        :code="flowCode"
+        @closeModel="closeMolder"
+        :flowFormData="flowFormData"
+        :isUpdate="isUpdate"
+      />
     </a-modal>
   </PageWrapper>
 </template>
 <script lang="ts" setup>
   import { onMounted, ref, nextTick, unref, h } from 'vue';
   import { useRoute } from 'vue-router';
-  import { BasicTable, useTable, BasicColumn } from '@/components/Table';
+  import { BasicTable, useTable, BasicColumn, FormSchema } from '@/components/Table';
   import { BasicTree, TreeItem, TreeActionItem, TreeActionType } from '@/components/Tree';
   import { getFormsDesignData, getFormsPageData, delFormsData } from '@/api/formrender/index';
   import { getOutKeyList } from '@/api/formdesign/index';
@@ -68,6 +74,7 @@
   const addParamsArr: any = ref([]);
   const paramsCode = route.query.code;
   const callColumns: BasicColumn[] = [];
+  const searchFormSchema: FormSchema[] = ref([]);
   const btnList: any = ref([]);
   const treeData = ref<TreeItem[]>([]);
   const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
@@ -75,6 +82,106 @@
   const previewOpen = ref(false); //是否打开流程发起弹窗
   const flowCode = ref(''); //流程code
   const flowFormData = ref({}); //编辑时表单的数据
+  const isUpdate = ref(false); //是否是编辑
+  if (paramsCode == '数据统计') {
+    searchFormSchema.value = [
+      {
+        field: 'typeid',
+        component: 'ApiSelect',
+        label: '企业类型',
+        colProps: { span: 6 },
+        componentProps: () => {
+          return {
+            // api: getLoadCaseType, // 接口
+            // 接口参数
+            resultField: 'result',
+            labelField: 'itemName',
+            valueField: 'itemDetailId',
+          };
+        },
+      },
+      {
+        field: 'deal_username',
+        component: 'Input',
+        label: '面积（m²）',
+        colProps: { span: 6 },
+      },
+      {
+        field: '[report_start_time, report_end_time]',
+        component: 'RangePicker',
+        label: '成立时间',
+        componentProps: {
+          format: 'YYYY-MM-DD',
+          placeholder: ['开始时间', '结束时间'],
+        },
+        colProps: { span: 8 },
+      },
+      {
+        field: 'is_intact',
+        component: 'Select',
+        label: '是否纳税',
+        colProps: { span: 6 },
+        defaultValue: 1,
+        componentProps: {
+          options: [
+            { label: '未判读', value: 0, key: '0' },
+            { label: '已提交', value: 1, key: '1' },
+            { label: '已关闭', value: 99, key: '99' },
+            { label: '全部', value: null, key: '' },
+          ],
+        },
+      },
+    ];
+  } else if (paramsCode == '数据审核') {
+    searchFormSchema.value = [
+      {
+        field: 'typeid',
+        component: 'ApiSelect',
+        label: '企业类型',
+        colProps: { span: 6 },
+        componentProps: () => {
+          return {
+            // api: getLoadCaseType, // 接口
+            // 接口参数
+            resultField: 'result',
+            labelField: 'itemName',
+            valueField: 'itemDetailId',
+          };
+        },
+      },
+      {
+        field: 'deal_username',
+        component: 'Input',
+        label: '面积（m²）',
+        colProps: { span: 6 },
+      },
+      {
+        field: '[report_start_time, report_end_time]',
+        component: 'RangePicker',
+        label: '成立时间',
+        componentProps: {
+          format: 'YYYY-MM-DD',
+          placeholder: ['开始时间', '结束时间'],
+        },
+        colProps: { span: 8 },
+      },
+      {
+        field: 'is_intact',
+        component: 'Select',
+        label: '是否已审核',
+        colProps: { span: 6 },
+        defaultValue: 1,
+        componentProps: {
+          options: [
+            { label: '未判读', value: 0, key: '0' },
+            { label: '已提交', value: 1, key: '1' },
+            { label: '已关闭', value: 99, key: '99' },
+            { label: '全部', value: null, key: '' },
+          ],
+        },
+      },
+    ];
+  }
   const [registerModal, { openModal }] = useModal();
   const [registerTable, { reload, setColumns, getSelectRows, clearSelectedRowKeys }] = useTable({
     title: '表单列表',
@@ -83,6 +190,8 @@
     columns: callColumns,
     formConfig: {
       labelWidth: 120,
+      showAdvancedButton: false,
+      schemas: searchFormSchema,
     },
     rowSelection: {
       type: 'radio',
@@ -192,6 +301,7 @@
     }
     switch (status) {
       case 'Add':
+        console.log(btnList.valueField);
         btnList.value.forEach((element) => {
           if (element.prop === 'Add' && element.isWFlow) {
             flowCode.value = element.wFlowCode;
@@ -208,6 +318,7 @@
           });
         } else {
           previewOpen.value = true;
+          isUpdate.value = false;
         }
 
         break;
@@ -232,6 +343,7 @@
         } else {
           previewOpen.value = true;
           flowFormData.value = rows[0];
+          isUpdate.value = true;
         }
         break;
       case 'Delete':

src/views/demo/onlineform/formModule/FormModal.vue

@@ -41,6 +41,8 @@
           ref="modalFrom_formData"
           :editData="editData"
           :isNextSteps="isNextSteps"
+          :isEdit="isEdit"
+          :formVerison_now="formVerison_now"
           @set-steps-current="setStepsCurrent"
         />
         <ModalDesign
@@ -71,12 +73,14 @@
   // 提交按钮
   let isSubmitClick = ref(false);
   // 是否是编辑
-  let formEdit = false;
+  const isEdit = ref(false);
   // 子组件的暴露属性
   const modalFrom_formData = ref();
   const modalDesign_config = ref();
   // 编辑时发送给子组件的数据
   const editData = ref();
+  // 当前formVerison
+  const formVerison_now = ref();
 
   const defaultFormData = {
     type: 1,
@@ -95,8 +99,9 @@
   };
 
   const [registerModal, { closeModal }] = useModalInner((data: any) => {
-    formEdit = data.formEdit;
+    isEdit.value = data.isEdit;
-    if (formEdit) {
+    formVerison_now.value = data.formVerison;
+    if (isEdit.value) {
       editData.value = data;
     } else {
       data.record = defaultFormData;
@@ -136,7 +141,7 @@
   // 提交
   async function submitClick() {
     const postData = getForm();
-    if (formEdit) {
+    if (isEdit.value) {
       await Post_UpdateForm(postData);
     } else {
       await Post_AddForm(postData);

src/views/demo/onlineform/formModule/index.vue

@@ -52,6 +52,7 @@
   import { useMessage } from '@/hooks/web/useMessage';
   import { useModal } from '@/components/Modal';
   import { TreeItem } from '@/components/Tree';
+  import { cloneDeep } from 'lodash-es';
   // 子组件
   import MenuTree from './FormTree.vue';
   import FormModal from './FormModal.vue';
@@ -108,15 +109,16 @@
   function handleAddForm() {
     formModalVisible.value = true;
     openModal(true, {
-      formEdit: false,
+      isEdit: false,
     });
   }
   // 表单列表-编辑
   function handleEdit(record: Recordable) {
     formModalVisible.value = true;
     openModal(true, {
-      formEdit: true,
+      isEdit: true,
-      record: record,
+      record: cloneDeep(record),
+      formVerison: record.formVerison,
     });
   }
   // 表单列表-删除

src/views/demo/onlineform/formModule/modalDesign.vue

@@ -80,7 +80,7 @@
   const notInColumns = [
     'Divider',
     'InputGuid',
-    'MapGemo',
+    'MapGeom',
     'Upload',
     'slot',
     'Grid',
@@ -188,8 +188,6 @@
       }
     });
 
-    console.log(columns);
-
     const colunmsMap = {};
     columns.forEach((item) => {
       colunmsMap[item.field] = item;

src/views/demo/onlineform/formModule/modalForm.vue

@@ -94,6 +94,14 @@
       type: Boolean,
       default: () => false,
     },
+    isEdit: {
+      type: Boolean,
+      default: () => false,
+    },
+    formVerison_now: {
+      type: String,
+      default: () => '',
+    },
   });
   // 表单栅格
   const labelCol = { span: 4 };
@@ -139,7 +147,7 @@
   watch(
     () => props.editData,
     () => {
-      if (props.editData.formEdit) {
+      if (props.isEdit) {
         // 编辑
         setFormData(props.editData.record);
       } else {
@@ -198,9 +206,9 @@
     formVerisons.value = formVerisons_temp;
 
     // 编辑-按照旧的版本
-    if (props.editData.formEdit) {
+    if (props.isEdit) {
       formData.value.formVerison = formVerisons_temp.find((t) => {
-        return t.value === props.editData.record.formVerison;
+        return t.value === props.formVerison_now;
       });
     } else {
       // 新增-默认最新的版本
@@ -225,7 +233,7 @@
     const result: any = await functionGetForm(query);
     record.isSys = true;
     formData.value = record;
-    formData.value.formVerison = result.info.schemeId;
+    formData.value.formVerison = props.formVerison_now;
     getSchemeRow(result.info);
   }
 

src/views/demo/onlineform/formdesign/FormModal.vue

@@ -110,12 +110,13 @@
           tableNames: item.componentProps.dataTable,
         };
         getOutKeyList(params).then((res: Recordable) => {
-          console.log(res);
+          if (res.length > 0) {
-          res[0].db_codecolumnsList.forEach((val) => {
+            res[0].db_codecolumnsList.forEach((val) => {
-            if (item.componentProps.fieldName == val.dbColumnName) {
+              if (item.componentProps.fieldName == val.dbColumnName) {
-              item.csType = val.csType;
+                item.csType = val.csType;
-            }
+              }
-          });
+            });
+          }
         });
       }
       tabArr.push(item.componentProps.fieldName);

src/views/demo/onlineform/formdesign/modal/AutomaticModal.vue

@@ -10,14 +10,20 @@
     :showOkBtn="true"
     :useWrapper="false"
     @ok="submit"
+    @visible-change="
+      () => {
+        dbColumnInfo_new.value = [];
+        dbColumnInfo_new_list = [];
+      }
+    "
   >
-    <a-alert message="() 为主表，字段名可进行修改，数据格式默认为 varchar" type="info" />
+    <a-alert message="主表的字段名可进行修改，数据格式默认为 varchar" type="info" />
     <a-alert
       message="* 表名、字段名由数字、字母或下划线组成，且不能以数字，特殊字符串开头。"
       type="error"
     />
     <a-alert message="* 表名、字段名一旦生成不可修改。" type="error" />
-    <a-alert message="自动建表内的地图组件有专用gemo字段负责，无需配置" type="info" />
+    <a-alert message="自动建表内的地图组件有专用geom字段负责，无需配置" type="info" />
     <a-divider />
     <div style="align: center; width: 80%">
       <a-form ref="formRef" :model="tableInfo" :label-col="labelCol" :wrapper-col="wrapperCol">
@@ -34,7 +40,13 @@
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'dbColumnName'">
           <div>
-            <a-input v-model:value="record.dbColumnName" :disabled="!props.isAddVisible" />
+            <a-input
+              v-model:value="record.dbColumnName"
+              :disabled="
+                !props.isAddVisible &&
+                !dbColumnInfo_new_list.includes(record.dbColumnName + record.columnDescription)
+              "
+            />
           </div>
         </template>
         <template v-if="column.key === 'length'">
@@ -99,6 +111,7 @@
     decimalDigits: 0,
   };
   let dbColumnInfo_new: any = ref([]);
+  let dbColumnInfo_new_list: any = [];
   // 数据格式-下拉框
   let dataTypeOptions = [
     { label: '字符串', value: 'varchar' },
@@ -109,10 +122,11 @@
   ];
   // 不需要添加表结构的
   let componentArray = ['Divider'];
-  let fieldArray = ['MapGemo'];
+  let fieldArray = ['MapGeom'];
 
   // 异步传参
   const [automaticModal, { closeModal }] = useModalInner(async (data) => {
+    // 获取db
     if (!props.isAddVisible) {
       let query: any = { id: data.saveFormDatas.info.id };
       let result = await functionGetForm(query);
@@ -121,18 +135,19 @@
       data_json.db = result_json.db;
       data.saveFormDatas.scheme.scheme = JSON.stringify(data_json);
     }
+    // 表名和备注
     let scheme = JSON.parse(data.saveFormDatas.scheme.scheme);
     tableInfo.value.tableName = scheme.db[0].tableName;
     tableInfo.value.description = scheme.db[0].description;
     tableInfo.value.dbCode = data.saveFormDatas.info.DbCode;
-
+    // 制作表格
     let schemas = scheme.formInfo.schemas;
     tableInfo.value.dbColumnInfoList = [];
     schemas.forEach((item: any) => {
       if (!item.component.includes(componentArray)) {
-        if (item.field.includes(fieldArray)) {
+        if (fieldArray.includes(item.field)) {
           item.componentProps.dataTable = tableInfo.value.tableName;
-          item.componentProps.fieldName = 'gemo';
+          item.componentProps.fieldName = 'geom';
         } else if (!item.dbColumnInfo) {
           // 初始默认值
           let temp = cloneDeep(dbColumnInfo);
@@ -146,6 +161,7 @@
 
           // 编辑-添加新的行
           dbColumnInfo_new.value.push(temp);
+          dbColumnInfo_new_list.push(temp.dbColumnName + temp.columnDescription);
           item.componentProps.dataTable = tableInfo.value.tableName;
           item.componentProps.fieldName = temp.dbColumnName;
         } else {
@@ -153,6 +169,7 @@
         }
       }
     });
+    // 表格赋值
     setTableData(tableInfo.value.dbColumnInfoList);
     data.saveFormDatas.scheme.scheme = JSON.stringify(scheme);
     saveFormDatas = data.saveFormDatas;
@@ -174,6 +191,8 @@
         await AddColumn(item);
       });
     }
+    dbColumnInfo_new.value = [];
+    dbColumnInfo_new_list = [];
     getFromAndTable();
   }