云查询图层

src/api/demo/system.ts

@@ -413,7 +413,7 @@ export const ShpGeoLayerUpdateLayer = (params) =>
   defHttp.post({ url: Api.ShpGeoLayerUpdateLayer, params });
 
 export const ShpGeoLayerDelete = (params) =>
-  defHttp.post({ url: Api.ShpGeoLayerDelete, params });
+  defHttp.post({ url: Api.ShpGeoLayerDelete + '/' + params.id });
   
 export const ShpGeoLayerParseShpInfo = (params) =>
   defHttp.post({ url: Api.ShpGeoLayerParseShpInfo + "?srid=" + params.srid + "&tableName=" + params.tableName +  "&zipFilePath=" + params.zipFilePath });

src/views/demo/system/cloudManagement/cloudQueryManagement/Modal/modal.vue

@@ -28,7 +28,7 @@
         <a-form-item label="云查询分类" name="overlay">
           <a-select
             v-model:value="props.modalData.data.overlay"
-            :options="props.showLTree"
+            :options="props.showTree"
             :fieldNames="{ label: 'itemName', value: 'itemValue' }"
           />
         </a-form-item>
@@ -96,7 +96,7 @@
 
 <script setup lang="ts">
   import { defineProps, defineEmits, ref } from 'vue';
-  const props = defineProps(['modalData', 'showLTree']);
+  const props = defineProps(['modalData', 'showTree']);
   const emit = defineEmits(['closeModal', 'submit']);
   const formRef = ref();
   const treeRules = {

src/views/demo/system/cloudManagement/cloudQueryManagement/index.vue

@@ -20,13 +20,13 @@
         <div class="showTree">
           <BasicTree
             ref="treeRef"
-            :treeData="showLTree"
+            :treeData="showTree"
             :loading="lLoading"
             :fieldNames="{ key: 'itemValue', title: 'itemName' }"
             @select="
               (selectedKeys, { node }) => {
-                getLeftSelectId(node.itemDetailId);
+                getSelectId(node.itemDetailId);
-                changeTypeId(node.key);
+                changeTypeId(node.itemValue);
               }
             "
           />
@@ -39,8 +39,8 @@
           <PermissionBtn @btnEvent="buttonClick"></PermissionBtn>
         </template>
         <template #bodyCell="{ column, record }">
-          <template v-if="column.key == 'overlay'">
+          <template v-if="column.key == 'code'">
-            {{ getOverlay(record) }}
+            {{ getCode(record) }}
           </template>
           <template v-if="column.key == 'overlayList'">
             <div v-for="tag in record.overlayList" :key="tag">
@@ -60,7 +60,7 @@
       <UseModal
         ref="modalForm"
         :modalData="modalData"
-        :showLTree="showLTree"
+        :showTree="showTree"
         @closeModal="closeModal"
         @submit="submit"
       />
@@ -84,7 +84,13 @@
     Update,
     Delete,
   } from '@/api/sys/cloud';
-  import { columns, emptyRightItem, emptyLeftItem, searchFormSchema } from './util';
+  import {
+    columns,
+    emptyRightItem,
+    emptyLeftItem,
+    searchFormSchema_1,
+    searchFormSchema_2,
+  } from './util';
   import { Modal, message } from 'ant-design-vue';
   import dayjs from 'dayjs';
   import { cloneDeep, forEach } from 'lodash-es';
@@ -93,7 +99,7 @@
   let lLoading = ref(false);
   let typeId = ref('');
   let selectTreeId = ref('');
-  let showLTree = ref([]);
+  let showTree = ref([]);
   let openModal = ref(false);
   const modalData = reactive({
     title: '',
@@ -102,19 +108,36 @@
   });
   const treeRef = ref();
   const firstRequestCode = ref('');
+  const searchFormSchema = ref(searchFormSchema_1);
+
+  watch(
+    () => typeId.value,
+    (newVal) => {
+      if (newVal == 'imgage_data') {
+        searchFormSchema.value = searchFormSchema_2;
+      } else {
+        searchFormSchema.value = searchFormSchema_1;
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
 
   const [registerTable, { reload, getSelectRows }] = useTable({
     beforeFetch: (params) => {
-      console.log(firstRequestCode.value, 'before');
       if (firstRequestCode.value !== '') {
         params = { ...params, code: firstRequestCode.value };
-      } else {
+      } else if (typeId.value !== '') {
         params = { ...params, code: typeId.value };
+      } else {
+        params = { ...params };
       }
       return params;
     },
     api: LoadPage,
     columns,
+    title: '云查询管理',
     formConfig: {
       labelWidth: 120,
       schemas: searchFormSchema,
@@ -135,16 +158,18 @@
       return res;
     },
   });
-  const getLeftTreeData = (isMounted) => {
+
+  const getTreeData = (isMounted) => {
     lLoading.value = true;
     getLeftTree({ code: 'cloudQueryManagement' })
       .then((res) => {
-        showLTree.value = res;
+        showTree.value = res;
         lLoading.value = false;
         if (isMounted && res.length > 0) {
-          firstRequestCode.value = res[0].key;
+          firstRequestCode.value = res[0].itemValue;
-          typeId.value = res[0].key;
+          selectTreeId.value = res[0].itemDetailId;
-          unref(treeRef).setSelectedKeys([res[0].key]);
+          typeId.value = res[0].itemValue;
+          unref(treeRef).setSelectedKeys([res[0].itemValue]);
         }
         reload();
       })
@@ -153,16 +178,27 @@
       });
   };
   onMounted(() => {
-    getLeftTreeData(true);
+    getTreeData(true);
   });
-  const changeTypeId = (value) => {
+
-    typeId.value = value;
+  const changeTypeId = (itemValue) => {
-    reload();
+    if (typeId.value != itemValue) {
+      typeId.value = itemValue;
+      reload();
+    } else {
+      typeId.value = '';
+      reload();
+    }
   };
-  const getLeftSelectId = (value) => {
+  const getSelectId = (itemDetailId) => {
-    selectTreeId.value = value;
+    if (selectTreeId.value != itemDetailId) {
+      selectTreeId.value = itemDetailId;
+    } else {
+      selectTreeId.value = '';
+    }
   };
 
+  // 按钮分类
   const buttonClick = (diffType) => {
     let check = false;
     switch (diffType) {
@@ -185,7 +221,7 @@
           onOk() {
             return delLeftItem({ id: selectTreeId.value })
               .then((res) => {
-                getLeftTreeData(false);
+                getTreeData(false);
                 typeId.value = '';
                 reload();
               })
@@ -240,6 +276,7 @@
         break;
     }
   };
+  // 表单提交
   const submit = () => {
     let userName = localStorage.getItem('fireUserLoginName');
     switch (modalData.type) {
@@ -252,10 +289,10 @@
           createDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
           modifyDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
           enabledMark: 1,
-          sortCode: showLTree.value.length,
+          sortCode: showTree.value.length,
         })
           .then((res) => {
-            getLeftTreeData(false);
+            getTreeData(false);
             openModal.value = false;
           })
           .catch((err) => {
@@ -307,10 +344,10 @@
     modalForm.value = cloneDeep(emptyLeftItem);
   };
 
-  const getOverlay = (record) => {
+  const getCode = (record) => {
     let result = '';
-    showLTree.value.forEach((item: any) => {
+    showTree.value.forEach((item: any) => {
-      if (item.itemValue === record.overlay) {
+      if (item.itemValue === record.code) {
         result = item.itemName;
       }
     });

src/views/demo/system/cloudManagement/cloudQueryManagement/util.ts

@@ -1,3 +1,5 @@
+import dayjs from 'dayjs';
+
 export const columns = [
   {
     title: 'ID',
@@ -71,7 +73,8 @@ export const emptyRightItem = {
   areaField:'',
   isSum: false,
 };
-export const searchFormSchema = [
+
+export const searchFormSchema_1 = [
   {
     field: 'key',
     label: '关键字',
@@ -79,3 +82,23 @@ export const searchFormSchema = [
     colProps: { span: 8 },
   },
 ];
+
+export const searchFormSchema_2 = [
+  {
+    field: 'key',
+    label: '关键字',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    field: '[startTime, endTime]',
+    helpMessage: '查询范围只包含时序影像大类',
+    label: '日期范围',
+    component: 'RangePicker',
+    colProps: { span: 8 },
+    componentProps: {
+      format: 'YYYY-MM-DD',
+      placeholder: ['开始日期', '结束日期'],
+    },
+  },
+];

src/views/demo/system/cloudManagement/imageRelease/history.vue

@@ -1,45 +0,0 @@
-<template>
-  <div>
-    <BasicTable @register="registerTable">
-      <template #toolbar>
-        <a-button type="primary" @click="updateimage">更新最新影像</a-button>
-      </template>
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'enabledMark'">
-          <a-tag v-if="record.enabledMark" color="success">正常</a-tag>
-          <a-tag v-else color="error">停用</a-tag>
-        </template>
-      </template>
-    </BasicTable>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  // vben
-  import { useMessage } from '@/hooks/web/useMessage';
-  import { BasicTable, useTable } from '@/components/Table';
-  import { columns, searchFormSchema } from './util';
-
-  const { createMessage } = useMessage();
-
-  // 历史记录
-  const [registerTable, { reload, getSelectRows }] = useTable({
-    // api: getRightTable,
-    columns,
-    formConfig: {
-      labelWidth: 120,
-      schemas: searchFormSchema,
-    },
-    showIndexColumn: false,
-    rowSelection: {
-      type: 'radio',
-    },
-    useSearchForm: true,
-    bordered: true,
-    showTableSetting: true,
-    handleSearchInfoFn(info) {
-      return info;
-    },
-    immediate: false,
-  });
-</script>

src/views/demo/system/cloudManagement/imageRelease/imageBoundary.vue

@@ -1,233 +0,0 @@
-<template>
-  <div class="flex-column">
-    <a-row style="overflow-y: hidden">
-      <a-col :span="12" style="padding: 20px; border: 1px silver solid; margin-left: 10px">
-        <div class="upload-div">
-          <a-upload-dragger
-            style="height: 174px; width: 100%"
-            class="upload-dragger"
-            v-model:fileList="fileList"
-            name="imageBoundary_name"
-            :multiple="false"
-            :maxCount="1"
-            :before-upload="beforeUpload"
-            accept=".zip,.xlsx"
-          >
-            <p class="ant-upload-drag-icon">
-              <PlusOutlined />
-            </p>
-            <div style="opacity: 0.7"> 文件上传 </div>
-          </a-upload-dragger>
-        </div>
-        <p />
-        <p />
-        <p />
-        <div class="upload-span">
-          <div class="upload-span-content">
-            <div style="opacity: 0.7">将文件拖拽到这里或点击上传按钮</div>
-            <div style="color: #1e5eff">支持扩展名：zip,xlsx</div>
-            <div style="opacity: 0.7">zip中需要包含 .shp .shx .dbf 文件 且.shp文件大小小于10MB</div>
-          </div>
-        </div>
-        <p />
-        <a-form
-          ref="form"
-          v-modal:model="currentAppForm"
-          labelAlign="right"
-          label-width="80px"
-          :label-col="labelCol"
-          :wrapper-col="wrapperCol"
-          size="mini"
-        >
-          <a-form-item label="服务名称" name="serverName">
-            <a-input v-model:value="currentAppForm.serverName" placeholder="请输入服务名称" />
-          </a-form-item>
-          <a-form-item label="图斑数据" name="hasFeature">
-            <a-select
-              v-model:value="currentAppForm.hasFeature"
-              placeholder="请选择是否具有图斑数据"
-            >
-              <a-select-option value="1">是</a-select-option>
-              <a-select-option value="0">否</a-select-option>
-            </a-select>
-          </a-form-item>
-          <a-form-item label="空间参考" name="spaceType">
-            <a-select v-model:value="currentAppForm.spaceType" placeholder="请选择空间参考">
-              <a-select-option value="EPSG:4326">EPSG:4326</a-select-option>
-              <a-select-option value="3857">EPSG:3857</a-select-option>
-              <a-select-option value="900913">EPSG:900913</a-select-option>
-            </a-select>
-          </a-form-item>
-          <a-form-item label="数据类型" name="spaceType">
-            <a-select v-model:value="currentAppForm.layerType" placeholder="请选择数据类型">
-              <a-select-option value="point">点</a-select-option>
-              <a-select-option value="linestring">线</a-select-option>
-              <a-select-option value="polygon">面</a-select-option>
-            </a-select>
-          </a-form-item>
-          <a-form-item label="数据表名" name="tableName">
-            <a-input v-model:value="currentAppForm.tableName" placeholder="请输入表名" />
-          </a-form-item>
-          <a-form-item :wrapper-col="{ offset: 10, span: 14 }">
-            <a-button type="primary" @click="onSubmit">立即创建</a-button>
-          </a-form-item>
-        </a-form>
-      </a-col>
-    </a-row>
-  </div>
-</template>
-<script lang="ts" setup>
-  // vue
-  import { ref, onMounted } from 'vue';
-  // vben
-  import { useMessage } from '@/hooks/web/useMessage';
-  import {
-    DeleteOutlined,
-    UploadOutlined,
-    MinusOutlined,
-    CloseOutlined,
-    CloudDownloadOutlined,
-    PlusOutlined,
-  } from '@ant-design/icons-vue';
-  import { message, Upload } from 'ant-design-vue';
-  import type { UploadProps } from 'ant-design-vue';
-  import { BasicTable, useTable } from '@/components/Table';
-  import { useGlobSetting } from '@/hooks/setting';
-  // api
-  import { fun_GetUpdateFiles, fun_AddAppFiles } from '@/api/demo/version';
-  import { fun_Load, fun_Upload } from '@/api/demo/files';
-
-  const { createMessage } = useMessage();
-
-  // 表单栅格
-  const labelCol = { span: 4 };
-  const wrapperCol = { span: 20 };
-
-  // 影像边界shp
-  const currentAppForm = ref({
-    edition: '',
-    description: '',
-    filepath: '',
-    must_update: '',
-    project_name: '',
-    createuser: '',
-    createtime: '',
-  });
-
-  // 上传文件列表
-  let fileList: any = ref([]);
-  const imageBoundary_loading = ref<boolean>(false);
-  const imageBoundary_name = ref<string>('');
-  // 上传的文件
-  const fileName = ref('');
-  let filePath = '';
-
-  // 上传之前
-  const beforeUpload: UploadProps['beforeUpload'] = (file) => {
-    let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
-    let size = file.size / 1024 / 1024;
-    const isZip = extension === 'zip' || extension === 'xlsx';
-    const suitableSize = size < 10;
-
-    imageBoundary_name.value = file.name;
-    if (!isZip) {
-      createMessage.error('只能上传后缀是.zip或者.xlsx的文件');
-    }
-    if (!suitableSize) {
-      createMessage.error('文件大小不得超过10M');
-    }
-    if (isZip && suitableSize) {
-      imageBoundary_loading.value = true;
-    }
-    return (isZip && suitableSize) || Upload.LIST_IGNORE;
-  };
-
-  // 上传文件接口
-  const handleCustomRequest = (file, progress) => {
-    fileList.value = [];
-    fun_Upload(file, progress)
-      .then((res: any) => {
-        if (res.data.result.length > 0) {
-          fileName.value = res.data.result[0].fileName;
-          filePath = res.data.result[0].filePath;
-          imageBoundary_loading.value = false;
-        }
-      })
-      .catch((err) => {
-        imageBoundary_loading.value = false;
-        file.onError(err);
-        createMessage.error(err.message);
-      });
-  };
-
-  // 删除文件
-  function deleteFileName() {
-    // 影像边界shp-删除文件
-    fileName.value = '';
-    filePath = '';
-    fileList.value = [];
-  }
-
-  // 影像边界shp-立即创建
-  function onSubmit() {
-    if (fileName.value == '' || filePath == '') {
-      createMessage.warn(`请选择上传文件!`);
-      return;
-    }
-    if (currentAppForm.value.edition == '') {
-      createMessage.warn(`请先填写版本号!`);
-      return;
-    }
-    fun_Load({ key: fileName.value }).then((res) => {
-      if (res.items.length > 0) {
-        currentAppForm.value.filepath = res.items[0].filePath;
-        fun_AddAppFiles(currentAppForm.value).then((res2) => {
-          if (res2) {
-            createMessage.success(`上传成功!`);
-            currentAppForm.value = {
-              createtime: '',
-              createuser: '',
-              edition: '',
-              description: '',
-              filepath: '',
-              must_update: '',
-              project_name: '',
-            };
-            fileList.value = [];
-          } else {
-            createMessage.warn(`接口错误!`);
-          }
-        });
-      } else {
-        createMessage.warn(`上传文件出现错误!`);
-      }
-    });
-  }
-
-  // 影像边界shp-当前版本信息
-  let currentAppInfo = ref({});
-
-  onMounted(() => {});
-</script>
-<style lang="less" scoped>
-  .upload-div {
-    display: flex; /* 启用 Flexbox 布局 */
-    align-items: center; /* 垂直居中 */
-    justify-content: center; /* 水平居中 */
-
-    width: 100%; /* 使容器占据父元素的全部宽度 */
-  }
-
-  .upload-span-content {
-    position: relative;
-    left: calc(16.5%);
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-  .upload_span {
-    align-items: center;
-    text-align: center;
-    justify-content: center;
-  }
-</style>

src/views/demo/system/cloudManagement/imageRelease/imageRelease.vue

@@ -1,178 +0,0 @@
-<template>
-  <div class="flex-column">
-    <a-row style="overflow-y: hidden">
-      <a-col :span="12" style="padding: 20px; border: 1px silver solid; margin-left: 10px">
-        <a-form
-          ref="form"
-          v-model:model="currentAppForm"
-          labelAlign="right"
-          label-width="80px"
-          :label-col="labelCol"
-          :wrapper-col="wrapperCol"
-          size="mini"
-        >
-          <a-form-item label="当前版本">
-            <span style="font-size: 15px; font-weight: bold; color: #000">
-              <a-input :bordered="false" />
-            </span>
-          </a-form-item>
-          <a-form-item label="版本号">
-            <a-input-number v-model:value="currentAppForm.edition" />
-          </a-form-item>
-          <a-form-item label="项目名称">
-            <a-input v-model:value="currentAppForm.project_name" />
-          </a-form-item>
-          <a-form-item label="上传">
-            <a-upload
-              v-model:file-list="fileList"
-              :name="imageRelease_name"
-              :multiple="true"
-              :customRequest="handleCustomRequest"
-              :headers="headers"
-              :progress="progress"
-              :beforeUpload="beforeUpload"
-            >
-              <a-button :loading="imageRelease_loading"> 点击上传 </a-button>
-            </a-upload>
-            {{ fileName }}
-            <DeleteOutlined v-if="fileName != ''" @click="deleteFileName" />
-          </a-form-item>
-          <a-form-item label="描述信息">
-            <a-textarea type="textarea" v-model:value="currentAppForm.description" :rows="4" />
-          </a-form-item>
-          <a-form-item label="是否必须更新" label-width="120px">
-            <a-radio-group v-model:value="currentAppForm.must_update" size="medium">
-              <a-radio :bordered="false" :value="1">是</a-radio>
-              <a-radio :bordered="false" :value="0">否</a-radio>
-            </a-radio-group>
-          </a-form-item>
-          <a-form-item :wrapper-col="{ offset: 10, span: 14 }">
-            <a-button type="primary" @click="onFlyControlSubmit">立即创建</a-button>
-          </a-form-item>
-        </a-form>
-      </a-col>
-    </a-row>
-  </div>
-</template>
-<script lang="ts" setup>
-  // vue
-  import { ref, onMounted } from 'vue';
-  // vben
-  import { useMessage } from '@/hooks/web/useMessage';
-  import { DeleteOutlined, UploadOutlined } from '@ant-design/icons-vue';
-  import { message, Upload } from 'ant-design-vue';
-  import type { UploadProps } from 'ant-design-vue';
-  // api
-  import { fun_AddAppFiles } from '@/api/demo/version';
-  import { fun_Load, fun_Upload } from '@/api/demo/files';
-
-  const { createMessage } = useMessage();
-
-  // 表单栅格
-  const labelCol = { span: 6 };
-  const wrapperCol = { span: 18 };
-  // 上传文件列表
-  let fileList: any = ref([]);
-  const imageRelease_loading = ref<boolean>(false);
-  const imageRelease_name = ref<string>('');
-  // 上传的文件
-  const fileName = ref('');
-  let filePath = '';
-
-  // 影像发布事件
-  const currentAppForm = ref({
-    edition: '',
-    description: '',
-    filepath: '',
-    must_update: '',
-    project_name: '',
-    createuser: '',
-    createtime: '',
-  });
-
-  // 上传文件接口
-  const handleCustomRequest = (file, progress) => {
-    fileList.value = [];
-    fun_Upload(file, progress)
-      .then((res: any) => {
-        if (res.data.result.length > 0) {
-          fileName.value = res.data.result[0].fileName;
-          filePath = res.data.result[0].filePath;
-          imageRelease_loading.value = false;
-        }
-      })
-      .catch((err) => {
-        imageRelease_loading.value = false;
-        file.onError(err);
-        createMessage.error(err.message);
-      });
-  };
-
-  // 上传之前
-  const beforeUpload: UploadProps['beforeUpload'] = (file) => {
-    let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
-    let size = file.size / 1024 / 1024;
-    const isZip = extension === 'zip' || extension === 'xlsx';
-    const suitableSize = size < 10;
-
-    imageRelease_name.value = file.name;
-    if (!isZip) {
-      createMessage.error('只能上传后缀是.zip或者.xlsx的文件');
-    }
-    if (!suitableSize) {
-      createMessage.error('文件大小不得超过10M');
-    }
-    if (isZip && suitableSize) {
-      imageRelease_loading.value = true;
-    }
-    return (isZip && suitableSize) || Upload.LIST_IGNORE;
-  };
-
-  // 删除文件
-  function deleteFileName() {
-    // 影像发布事件-删除文件
-    fileName.value = '';
-    filePath = '';
-    fileList.value = [];
-  }
-
-  // 影像发布事件-立即创建
-  function onFlyControlSubmit() {
-    if (fileName.value == '' || filePath == '') {
-      createMessage.warn(`请选择上传文件!`);
-      return;
-    }
-    if (currentAppForm.value.edition == '') {
-      createMessage.warn(`请先填写版本号!`);
-      return;
-    }
-    if (currentAppForm.value.project_name == '') {
-      createMessage.warn(`请先填写项目名称!`);
-      return;
-    }
-    fun_Load({ key: fileName.value }).then((res) => {
-      if (res.items.length > 0) {
-        currentAppForm.value.filepath = res.items[0].filePath;
-        fun_AddAppFiles(currentAppForm.value).then((res2) => {
-          if (res2) {
-            createMessage.success(`上传成功!`);
-            currentAppForm.value = {
-              createtime: '',
-              createuser: '',
-              edition: '',
-              description: '',
-              filepath: '',
-              must_update: '',
-              project_name: '',
-            };
-            fileList.value = [];
-          } else {
-            createMessage.warn(`接口错误!`);
-          }
-        });
-      } else {
-        createMessage.warn(`上传文件出现错误!`);
-      }
-    });
-  }
-</script>

src/views/demo/system/cloudManagement/imageRelease/index.vue

@@ -1,34 +1,45 @@
 <template>
-  <div style="padding: 24px; overflow-y: hidden">
+  <div>
-    <a-tabs v-model:activeKey="activeKey">
+    <BasicTable @register="registerTable">
-      <a-tab-pane key="imageBoundary" tab="影像边界shp">
+      <template #toolbar>
-        <ImageBoundary />
+        <a-button type="primary" @click="updateimage">更新最新影像</a-button>
-      </a-tab-pane>
+      </template>
-      <a-tab-pane key="imageRelease" tab="影像发布事件">
+      <template #bodyCell="{ column, record }">
-        <ImageRelease />
+        <template v-if="column.key === 'enabledMark'">
-      </a-tab-pane>
+          <a-tag v-if="record.enabledMark" color="success">正常</a-tag>
-      <a-tab-pane key="history" tab="历史记录">
+          <a-tag v-else color="error">停用</a-tag>
-        <History />
+        </template>
-      </a-tab-pane>
+      </template>
-    </a-tabs>
+    </BasicTable>
   </div>
 </template>
 
 <script lang="ts" setup>
-  // vue
-  import { ref, onMounted } from 'vue';
   // vben
   import { useMessage } from '@/hooks/web/useMessage';
-  import { DeleteOutlined, UploadOutlined } from '@ant-design/icons-vue';
-  import { message, Upload } from 'ant-design-vue';
-  import type { UploadProps } from 'ant-design-vue';
   import { BasicTable, useTable } from '@/components/Table';
-  import { useGlobSetting } from '@/hooks/setting';
+  import { columns, searchFormSchema } from './util';
-  //
-  import ImageBoundary from './imageBoundary.vue';
-  import ImageRelease from './imageRelease.vue';
-  import History from './history.vue';
 
-  // 标签页
+  const { createMessage } = useMessage();
-  let activeKey = ref('imageBoundary');
+
+  // 历史记录
+  const [registerTable, { reload, getSelectRows }] = useTable({
+    // api: getRightTable,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    showIndexColumn: false,
+    rowSelection: {
+      type: 'radio',
+    },
+    useSearchForm: true,
+    bordered: true,
+    showTableSetting: true,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+    immediate: false,
+  });
 </script>

src/views/demo/system/geoservermanagement/clound/headersTable.vue

@@ -0,0 +1,142 @@
+<template>
+  <div>
+    <BasicTable @register="headersTable" :searchInfo="searchInfo">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'refName'">
+          <a-input
+            v-model:value="record.refName"
+            @change="record.refName = record.refName.toLowerCase()"
+          />
+          <p style="color: #ff0000; font-size: 12px" v-if="!regExp.test(record.refName)">
+            使用小写字母、数字、下划线的组合
+          </p>
+        </template>
+        <template v-if="column.key === 'initName'">
+          <a-input v-model:value="record.initName" />
+        </template>
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '删除',
+                onClick: () => {
+                  deleteRow(record);
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive, h, onMounted } from 'vue';
+  // vben
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+
+  import { headersColumns, headersSearchFormSchema } from './clound.data';
+  import axios from 'axios';
+  import { cloneDeep } from 'lodash-es';
+  import { getAppEnvConfig } from '@/utils/env';
+  const { VITE_GLOB_API_URL } = getAppEnvConfig();
+
+  const { createMessage } = useMessage();
+
+  const props = defineProps(['headers']);
+  const headers = ref(props.headers);
+  // 查询前的备份
+  const searchBeforeHeaders = ref();
+  const emit = defineEmits(['headersTableSubmit']);
+  // 正则表达式
+  let regExp = /^[a-z0-9_]+$/;
+
+  // 步骤2
+  const searchParams = ref();
+  const [headersTable, { reload, getDataSource }] = useTable({
+    dataSource: headers,
+    columns: headersColumns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: headersSearchFormSchema,
+    },
+    canResize: true,
+    useSearchForm: true,
+    showTableSetting: false,
+    pagination: true,
+    bordered: true,
+    showIndexColumn: true,
+    handleSearchInfoFn(info) {
+      if (info.name == undefined) {
+        // 重置
+        reset();
+      } else {
+        reset();
+        // 搜索
+        searchBeforeHeaders.value = cloneDeep(headers.value);
+        searchParams.value = info;
+        headers.value = headers.value.filter((item) => item.name.includes(info.name));
+      }
+      return info;
+    },
+  });
+
+  // 重置
+  function reset() {
+    if (searchBeforeHeaders.value) {
+      headers.value.forEach((item1) => {
+        searchBeforeHeaders.value.forEach((item2) => {
+          item2 = item1.name == item2.name ? item1 : item2;
+        });
+      });
+      headers.value = cloneDeep(searchBeforeHeaders.value);
+    }
+    searchBeforeHeaders.value = null;
+  }
+  // 删除
+  const deleteRow = (record) => {
+    headers.value = headers.value.filter((item) => {
+      return item.name != record.name;
+    });
+    if (searchBeforeHeaders.value) {
+      searchBeforeHeaders.value = searchBeforeHeaders.value.filter((item) => {
+        return item.name != record.name;
+      });
+    }
+  };
+  // 提交
+  const submit2 = () => {
+    reset();
+    let data = getDataSource();
+    let flag: Boolean = true;
+    data.forEach((item) => {
+      flag = regExp.test(item.refName);
+    });
+    if (flag) {
+      emit('headersTableSubmit', getDataSource());
+    } else {
+      createMessage.warn('提交的refName字段名中有不符合字段名命名规则的');
+    }
+  };
+
+  defineExpose({
+    submit2,
+  });
+</script>
+<style lang="less" scoped>
+  ::v-deep .ant-table-container table {
+    line-height: 1.1 !important;
+
+    .ant-table-row {
+      td {
+        padding-top: 8px !important;
+        padding-bottom: 8px !important;
+      }
+    }
+  }
+
+  ::v-deep .ant-table-body {
+    height: 410px !important;
+  }
+</style>

src/views/demo/system/geoservermanagement/clound/uploadFrom.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="current1">
+    <div class="upload-div w-1/2 xl:w-1/2 m-4 mr-0">
+      <a-upload-dragger
+        v-model:fileList="shpFileList"
+        name="shpFileName"
+        style="height: 274px; width: 300px"
+        class="upload-dragger"
+        :multiple="false"
+        :maxCount="1"
+        :before-upload="shpBeforeUpload"
+        :customRequest="shpCustomRequest"
+        accept=".zip,.xlsx"
+      >
+        <p class="ant-upload-drag-icon">
+          <PlusOutlined />
+        </p>
+        <div style="opacity: 0.7"> 文件上传 </div>
+        <div class="upload-span">
+          <div class="upload-span-content">
+            <div style="opacity: 0.7">将文件拖拽到这里或点击上传按钮</div>
+            <div style="color: #1e5eff">支持扩展名：zip、xls、xlsx</div>
+            <div style="opacity: 0.7"> zip中需要包含 .shp .shx .dbf 文件 </div>
+            <div style="opacity: 0.7"> 且.shp文件大小小于10MB </div>
+          </div>
+        </div>
+      </a-upload-dragger>
+    </div>
+    <div class="upload-form w-1/2 xl:w-1/2 m-4 mr-0">
+      <a-form
+        ref="formRef"
+        :model="uploadFrom"
+        :labelCol="{ width: '75px' }"
+        labelAlign="right"
+        :rules="uploadFormRules"
+      >
+        <a-form-item label="服务名称" name="serverName">
+          <a-input v-model:value="uploadFrom.serverName" placeholder="请输入服务名称" />
+        </a-form-item>
+        <a-form-item label="空间参考" name="spatialRef">
+          <a-select v-model:value="uploadFrom.spatialRef" placeholder="请选择空间参考">
+            <a-select-option value="EPSG:4326">EPSG:4326</a-select-option>
+            <a-select-option value="EPSG:3857">EPSG:3857</a-select-option>
+            <a-select-option value="EPSG:900913">EPSG:900913</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="数据表名" name="dataTable">
+          <a-input v-model:value="uploadFrom.dataTable" placeholder="请输入表名" />
+        </a-form-item>
+        <a-form-item label="图层样式" name="appendPath">
+          <a-upload
+            v-model:fileList="tucengFileList"
+            name="tucengFileName"
+            list-type="picture-card"
+            class="upload-dragger"
+            :multiple="false"
+            :maxCount="1"
+            :show-upload-list="false"
+            :before-upload="tucengBeforeUpload"
+            :custom-request="tucengCustomRequest"
+            accept=".sld"
+          >
+            <div>
+              <PlusOutlined />
+              <div class="ant-upload-text">上传图层样式</div>
+            </div>
+          </a-upload>
+          <div style="position: relative; top: -50px" v-if="tucengFileName">
+            {{ tucengFileName }}
+            <DeleteOutlined @click="deleteTuceng" />
+          </div>
+        </a-form-item>
+      </a-form>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive, h } from 'vue';
+  // vben
+  import { PermissionBtn } from '@/components/PermissionBtn/index';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import type { UploadProps } from 'ant-design-vue';
+  import { message, Upload } from 'ant-design-vue';
+  import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
+  import {
+    getStatisticalList,
+    ShpGeoLayerAdd,
+    ShpGeoLayerLoadPage,
+    ShpGeoLayerGet,
+    ShpGeoLayerUpdateLayer,
+    ShpGeoLayerDelete,
+    ShpGeoLayerParseShpInfo,
+  } from '@/api/demo/system';
+  import { CheckTableExist } from '@/api/database/index';
+
+  import axios from 'axios';
+  import { cloneDeep } from 'lodash-es';
+  import { getAppEnvConfig } from '@/utils/env';
+  const { VITE_GLOB_API_URL } = getAppEnvConfig();
+
+  const { createMessage } = useMessage();
+
+  const formRef = ref();
+
+  const props = defineProps(['uploadForm']);
+  const uploadFrom = ref(props.uploadForm);
+  const emit = defineEmits(['uploadFormSubmit', 'isZipOrXls']);
+
+  const uploadFormRules = reactive({
+    serverName: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
+    spatialRef: [{ required: true, message: '请选择空间参考', trigger: 'blur' }],
+    // dataType: [{ required: true, message: '请选择数据类型', trigger: 'blur' }],
+    appendPath: [{ required: true, message: '请上传图层样式', trigger: 'blur' }],
+    dataTable: [
+      { required: true, message: '请输入数据表名', trigger: 'blur' },
+      {
+        validator: (rule, value, callback) => {
+          let reg = /^[a-z]\w{0,28}$/;
+          if (value !== '' && !reg.test(value)) {
+            callback(
+              new Error('小写字母开头，可包含下划线，但不能有汉字和大写字母，不能超过30字符'),
+            );
+          }
+          callback();
+        },
+        trigger: 'blur',
+      },
+      {
+        validator: async (rule, value, callback) => {
+          try {
+            let query: any = { tableName: value };
+            const response = await CheckTableExist(query);
+            if (!response) {
+              callback(new Error('数据库已有此数据表名，请更换表名'));
+            }
+          } catch (error) {
+            callback(new Error('检查数据表名时发生错误'));
+          }
+        },
+        trigger: 'blur',
+      },
+    ],
+  });
+
+  // 步骤1-提交
+  const submit1 = () => {
+    formRef.value
+      .validate()
+      .then(() => {
+        let params = {
+          zipFilePath: uploadFrom.value.shpPath,
+          tableName: uploadFrom.value.dataTable,
+          srid: uploadFrom.value.spatialRef,
+        };
+        ShpGeoLayerParseShpInfo(params).then((res) => {
+          uploadFrom.value.dataType = res.dataType;
+          uploadFrom.value.headers = res.headers;
+          emit('uploadFormSubmit', uploadFrom.value);
+        });
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
+
+  // 步骤1-shp上传
+  const shpFileList = ref<UploadProps['fileList']>([]);
+  const shpFileName = ref<string>('');
+  let isUpload = false;
+  // 步骤1-shp上传之前
+  const shpBeforeUpload: UploadProps['beforeUpload'] = (file) => {
+    let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
+    let size = file.size / 1024 / 1024;
+    const isZipOrXls = extension === 'zip' || extension === 'xls' || extension === 'xlsx';
+    const suitableSize = size < 30;
+    if (!isZipOrXls) {
+      createMessage.error('只能上传后缀是.zip .xls或者.xlsx的文件');
+    }
+    if (extension == 'zip') {
+      emit('isZipOrXls', 'shp');
+    } else if (['xls', 'xlsx'].includes(extension)) {
+      emit('isZipOrXls', 'excel');
+    }
+    if (!suitableSize) {
+      createMessage.error('文件大小不得超过30M');
+    }
+    isUpload = isZipOrXls && suitableSize;
+    return isUpload;
+  };
+  // 步骤1-shp上传文件接口
+  const shpCustomRequest = (options) => {
+    if (isUpload) {
+      const formData = new FormData();
+      formData.append('files', options.file);
+      // 假设 Token 存储在 localStorage 中
+      const token = localStorage.getItem('X-Token');
+      // 设置请求头部，带上 Token
+      const headers = {
+        'X-Token': token,
+      };
+      axios
+        .post(VITE_GLOB_API_URL + '/api/Files/Upload', formData, { headers })
+        .then((response) => {
+          options.onSuccess(response.data, options.file);
+          shpFileName.value = response.data.result[0].fileName;
+          uploadFrom.value.shpPath = response.data.result[0].filePath;
+        })
+        .catch((error) => {
+          options.onError(error);
+        });
+    }
+  };
+
+  // 步骤1-图层样式上传
+  const tucengFileList = ref<UploadProps['fileList']>([]);
+  const tucengFileName = ref<string>('');
+  // 步骤1-图层上传之前
+  const tucengBeforeUpload: UploadProps['beforeUpload'] = (file) => {
+    let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
+    let size = file.size / 1024 / 1024;
+    const isSld = extension === 'sld';
+    const suitableSize = size < 1;
+
+    if (!isSld) {
+      createMessage.error('只能上传后缀是.sld的文件');
+    }
+    if (!suitableSize) {
+      createMessage.error('文件大小不得超过1M');
+    }
+    return (isSld && suitableSize) || Upload.LIST_IGNORE;
+  };
+  // 步骤1-图层上传文件接口
+  const tucengCustomRequest = (options) => {
+    const formData = new FormData();
+    formData.append('files', options.file);
+    // 假设 Token 存储在 localStorage 中
+    const token = localStorage.getItem('X-Token');
+    // 设置请求头部，带上 Token
+    const headers = {
+      'X-Token': token,
+    };
+    axios
+      .post(VITE_GLOB_API_URL + '/api/Files/Upload', formData, { headers })
+      .then((response) => {
+        options.onSuccess(response.data, options.file);
+        tucengFileName.value = response.data.result[0].fileName;
+        uploadFrom.value.appendPath = response.data.result[0].filePath;
+      })
+      .catch((error) => {
+        options.onError(error);
+      });
+  };
+  // 步骤1-删除图层样式
+  const deleteTuceng = () => {
+    tucengFileName.value = '';
+    uploadFrom.value.appendPath = '';
+  };
+  // 清除验证
+  const clearValidation = () => {
+    formRef.value.clearValidate();
+    shpFileName.value = '';
+    tucengFileName.value = '';
+  };
+
+  defineExpose({
+    submit1,
+    clearValidation,
+  });
+</script>
+<style lang="less" scoped>
+  .current1 {
+    display: flex;
+  }
+  .upload-div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    top: -30px;
+  }
+  .upload-span {
+    margin: 30px;
+  }
+  .upload-form {
+    margin-left: 100px;
+  }
+</style>

src/views/demo/system/geoservermanagement/index.vue

@@ -1,541 +1,309 @@
 <template>
   <div>
     <a-row ::gutter="0">
-      <a-col :span="12">
+      <a-col :span="24">
-        <BasicTable  @register="registerTable" :searchInfo="searchInfo">
+        <BasicTable @register="registerTable" :searchInfo="searchInfo">
           <template #toolbar>
             <PermissionBtn @btn-event="onBtnClicked" />
           </template>
         </BasicTable>
       </a-col>
-      <a-col :span="12">
+      <a-col :span="0">
         <div class="map-outer">
-          <MapboxMap
+          <!-- <MapboxMap
-          :geomsList="geomsList"
+            :geomsList="geomsList"
-          :mapConfig="mapConfig"
+            :mapConfig="mapConfig"
-          @handlerDrawComplete="handlerDrawComplete"
+            @handlerDrawComplete="handlerDrawComplete"
-          @mapOnLoad="onMapboxLoad"
+            @mapOnLoad="onMapboxLoad"
-          ref="MapboxComponent"
+            ref="MapboxComponent"
-        />
+          /> -->
         </div>
       </a-col>
     </a-row>
 
-    <div class="data-preview-container" v-if="showRecordList">
-      <a-tabs v-model:activeKey="activeKey"  hide-add type="editable-card" @edit="onEdit" @change="handleTabChange">
-        <a-tab-pane v-for="(pane,index) in tablist" :key="index.toString()" :tab="pane.streetname+'-'+pane.label" :closable="pane.closable">
-        </a-tab-pane>
-      </a-tabs>
-      <RecordList :tablist="tablist" :currentListQuery="currentListQuery.listQuery"></RecordList>
-
-      <div class="data-preview-container-option">
-        
-        <div @click="exportList()">
-          <CloudDownloadOutlined />
-        </div>
-        <div @click="handleCloseRecordList()">
-          <MinusOutlined />
-        </div>
-        <div @click="handleCloseAllRecordList()">
-          <CloseOutlined />
-        </div>
-      </div>
-    </div>
-
     <a-modal
-      v-model:open="addModalShow"
+      v-model:open="modalShow"
+      :maskClosable="false"
+      :afterClose="closeAndCreate"
       title="添加GeoServer服务"
-      width="800px"
+      width="1000px"
+      style="top: 20px"
       size="small"
     >
-    <div class="content">
+      <div class="content">
-      <div class="select-file-div">
+        <div>
-        <div class="upload-div">
+          <a-steps :current="current" size="small" label-placement="vertical" :items="items" />
-          <a-upload-dragger
-            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">
-              <a-button :icon="h(PlusOutlined)">文件上传</a-button>
-            </div>
-          </a-upload-dragger>
         </div>
-        <div class="upload-span">
+        <div class="current1" v-if="current == 0">
-          <div class="upload-span-content">
+          <UploadFrom
-            <div style="opacity: 0.7">将文件拖拽到这里或点击上传按钮</div>
+            ref="uploadFormRef"
-            <div style="color: #1e5eff">支持扩展名：zip,xlsx</div>
+            :uploadForm="uploadFrom"
-            <div style="opacity: 0.7">zip中需要包含 .shp .shx .dbf 文件 且.shp文件大小小于10MB</div>
+            @isZipOrXls="isZipOrXls"
-          </div>
+            @uploadFormSubmit="uploadFormSubmit"
+          />
         </div>
-        <div class="upload-form">
+        <div class="current2" v-if="current == 1 && uploadFrom.dataSourceType == 'shp'">
-
+          <HeadersTable
-          <a-form
+            ref="headersTableRef"
-            ref="formRef"
+            :headers="uploadFrom.headers"
-            :model="uploadFrom"
+            @headersTableSubmit="headersTableSubmit"
-            :label-col="{ style: { width: '75px' } }"
+          />
-            labelAlign="right"
+        </div>
-            :rules="uploadFormRules"
+        <div
+          class="current3"
+          v-if="current == 2 || (current == 1 && uploadFrom.dataSourceType == 'excel')"
+        >
+          <a-result
+            status="success"
+            title="图层创建成功"
+            subTitle="图层创建成功，请在云查询图层列表查看"
           >
-            <a-form-item label="服务名称" name="serverName">
+            <template #extra>
-              <a-input v-model:value="uploadFrom.serverName" placeholder="请输入服务名称" />
+              <a-button type="primary" @click="handleClose">再次创建</a-button>
-            </a-form-item>
+              <a-button @click="handleClose">关闭窗口</a-button>
-
+            </template>
-            <!-- 显示条件：文件类型为Excel时 -->
+          </a-result>
-            <a-form-item label="图斑数据" name="hasFeature" v-if="!isShp">
-              <a-select v-model:value="uploadFrom.hasFeature" placeholder="请选择是否具有图斑数据">
-                <a-select-option value="1">是</a-select-option>
-                <a-select-option value="0">否</a-select-option>
-              </a-select>
-            </a-form-item>
-
-            <!-- 显示条件：文件类型为shp 或者 类型为Excel时有图斑数据 -->
-            <a-form-item label="空间参考" name="spaceType" v-if="isShp || (!isShp && uploadFrom.hasFeature == '1')">
-              <a-select v-model:value="uploadFrom.spaceType" placeholder="请选择空间参考">
-                <a-select-option value="EPSG:4326">EPSG:4326</a-select-option>
-                <a-select-option value="3857">EPSG:3857</a-select-option>
-                <a-select-option value="900913">EPSG:900913</a-select-option>
-              </a-select>
-            </a-form-item>
-
-            <!-- 显示条件：文件类型为Excel有图斑时 -->
-            <a-form-item label="数据类型" name="spaceType" v-if="!isShp && uploadFrom.hasFeature == '1'">
-              <a-select v-model:value="uploadFrom.layerType" placeholder="请选择数据类型">
-                <a-select-option value="point">点</a-select-option>
-                <a-select-option value="linestring">线</a-select-option>
-                <a-select-option value="polygon">面</a-select-option>
-              </a-select>
-            </a-form-item>
-
-            <a-form-item label="数据表名" name="tableName">
-              <a-row :gutter="12">
-                <a-col :span="20">
-                  <a-input v-model:value="uploadFrom.tableName" placeholder="请输入表名" />
-                </a-col>
-                <a-col :span="4">
-                  <a-button type=""  :icon="h(PlusOutlined)" @click="handlerGetExistsTableList()"  />
-                </a-col>
-              </a-row>
-            </a-form-item>
-          </a-form>
-
-          <!-- <div class="upload-span-button">
-            <a-button type="primary" :icon="h(CloudUploadOutlined)" @click="submitShp">上传</a-button>
-          </div> -->
-
-          
         </div>
       </div>
-    </div>
-
       <template #footer>
-        <a-button type="default" >取消</a-button>
+        <a-button
-        <a-button type="primary" >添加</a-button>
+          type="default"
+          @click="handleClose"
+          v-if="
+            !(uploadFrom.dataSourceType == 'shp' && current == 3) ||
+            !(uploadFrom.dataSourceType == 'excel' && current == 2)
+          "
+        >
+          取消
+        </a-button>
+        <a-button
+          type="primary"
+          @click="nextStep"
+          v-if="
+            !(uploadFrom.dataSourceType == 'shp' && current == 3) ||
+            !(uploadFrom.dataSourceType == 'excel' && current == 2)
+          "
+        >
+          下一步
+        </a-button>
       </template>
     </a-modal>
-
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref,reactive,h } from 'vue';
+  import { ref, reactive, h } from 'vue';
-
+  // vben
-  import { BasicTable, useTable, TableAction } from '@/components/Table';
-  import { getStatisticalList, deleteRole } from '@/api/demo/system';
-
-	// import {DataPreivew} from './RecordList.vue'
-
-  import { useMessage } from '@/hooks/web/useMessage';
-  import { useModal } from '@/components/Modal';
-  import { RecordList } from './page';
-
   import { PermissionBtn } from '@/components/PermissionBtn/index';
-
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
-  import { columns, columnsDataPreview,searchFormSchema } from './statistical.data';
+  import { useMessage } from '@/hooks/web/useMessage';
-  import {MinusOutlined,CloseOutlined,CloudDownloadOutlined,PlusOutlined} from '@ant-design/icons-vue'
+  // 组件
-  import axios from 'axios';
+  import UploadFrom from './clound/uploadFrom.vue';
-  import print from "vue3-print-nb";
+  import HeadersTable from './clound/headersTable.vue';
-
-  import { getAppEnvConfig } from '@/utils/env';
   import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
-  import type { UploadProps } from 'ant-design-vue';
+  import {
+    indexColumns,
+    indexSearchFormSchema,
+    defaultData2,
+    items_shp,
+    items_excel,
+  } from './clound/clound.data';
+  import {
+    getStatisticalList,
+    ShpGeoLayerAdd,
+    ShpGeoLayerLoadPage,
+    ShpGeoLayerGet,
+    ShpGeoLayerUpdateLayer,
+    ShpGeoLayerDelete,
+    ShpGeoLayerParseShpInfo,
+  } from '@/api/demo/system';
 
-  const { VITE_GLOB_API_URL } = getAppEnvConfig();
+  import axios from 'axios';
-
+  import { cloneDeep } from 'lodash-es';
-  const addModalShow = ref<Boolean>(false);
-
-  const vPrint = print;
-
-  const printOpen = ref<boolean>(false);
-
-  const uploadFrom = ref({})
-  const uploadFormRules = reactive({
-    serverName: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
-    imageServerAddress: [{ required: true, message: '请输入服务地址', trigger: 'blur' }],
-    hasFeature: [{ required: true, message: '请选择是否有图斑数据', trigger: 'blur' }],
-    spaceType: [{ required: true, message: '请选择参考系', trigger: 'blur' }],
-    layerType: [{ required: true, message: '请选数据类型', trigger: 'blur' }],
-    tableName: [{ required: true, message: '请输入表名', trigger: 'blur' }],
-  });
-
-  const printObj = reactive({
-    id:"printMe",
-    popTitle: "",
-    beforeOpenCallback() {
-      
-    },
-    openCallback() {
-      
-    },
-    closeCallback() {
-      
-    }
-  })
-
-  const beforeUpload:UploadProps['beforeUpload'] = (file) => {
-    // file.type === FILETYPE.ZIP ? isShp.value = true: isShp.value = false
-    fileList.value = [file];
-    return false;
-  };
-
-  const fileList = ref<UploadProps['fileList']>([]);
-
-  
-  defineOptions({ name: 'RoleManagement' });
-  
-  let activeKey = ref('0')
 
   const { createConfirm, createMessage } = useMessage();
-  const [registerModal, { openModal: openRoleModal }] = useModal();
-  const [registerModulesModal, { openModal: openModulesModal }] = useModal();
-  const [registerAccountModal, { openModal: openAccountModal }] = useModal();
-  const searchInfo = reactive<Recordable>({
-    countyid:null
-  });
 
-  const currentOrgLevel = ref<string>("country")
+  // 页面表格
-
-  const showRecordList = ref<boolean>(false);
-
-  const panes = reactive<{ title: string; content: string; key: string; closable?: boolean}[]>([])
   const searchParams = ref();
-  const [registerTable, { reload, getSelectRows, clearSelectedRowKeys, updateTableData}] = useTable({
+  const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
-    // 表格名称
+    title: '云查询图层',
-    title: 'GeoServer服务管理',
+    api: ShpGeoLayerLoadPage,
-    // 获取数据的接口
+    columns: indexColumns,
-    api: getStatisticalList,
-    // 表单列信息 BasicColumn[]
-    columns,
-    rowKey: 'streetid',
     formConfig: {
       labelWidth: 120,
-      schemas: searchFormSchema,
+      schemas: indexSearchFormSchema,
     },
-    // 使用搜索表单
     useSearchForm: true,
-    // 显示表格设置工具
     showTableSetting: true,
-    // 是否显示分页
+    pagination: true,
-    pagination:true,
-    // 是否显示表格边框
     bordered: true,
-    // 序号列
     showIndexColumn: true,
-    // 勾选列
     rowSelection: {
       type: 'radio',
     },
-    // 搜索
     handleSearchInfoFn(info) {
       searchParams.value = info;
       return info;
     },
   });
 
-  const [registerPrintTable] = useTable({
+  // 步骤
-    // 表格名称
+  const current = ref(0);
-    title: '',
+  const items = ref(items_shp);
-    // 获取数据的接口
-    api: getStatisticalList,
-    // 表单列信息 BasicColumn[]
-    columns,
-    rowKey: 'id',
-    formConfig: {
-      labelWidth: 120,
-      schemas: searchFormSchema,
-    },
-    // 使用搜索表单
-    useSearchForm: false,
-    // 显示表格设置工具
-    showTableSetting: false,
-    // 是否显示分页
-    pagination:false,
-    // 是否显示表格边框
-    bordered: true,
-    // 序号列
-    showIndexColumn: false,
-    // 勾选列
-    rowSelection: false,
-    // 搜索
-    handleSearchInfoFn(info) {
-      searchParams.value = info;
-      return info;
-    },
-  });
 
-  
+  // 步骤1信息
+  const uploadFormRef = ref();
+  const uploadFromAdd = {
+    serverName: '',
+    spatialRef: '',
+    dataSourceType: '',
+    dataType: '',
+    dataTable: '',
+    shpPath: '',
+    appendPath: '',
+    headers: [] as any,
+  };
+  const uploadFrom = ref(uploadFromAdd);
 
-
+  // 确认上传的文件类型
-
+  function isZipOrXls(value) {
-  const [registerTableDataPreview,{ reloadDataPreview, getSelectRowsDataPreview, clearSelectedRowKeysDataPreview }] = useTable({
+    uploadFrom.value.dataSourceType = value;
-    // 表格名称
+    if (value === 'shp') {
-    title: '',
+      items.value = items_shp;
-    // 获取数据的接口
+    } else if (value === 'excel') {
-    api: getStatisticalList,
+      items.value = items_excel;
-    // 表单列信息 BasicColumn[]
+    }
-    columnsDataPreview,
-    rowKey: 'id',
-    formConfig: {
-      labelWidth: 120,
-    //   schemas: searchFormSchema,
-    },
-    // 使用搜索表单
-    useSearchForm: false,
-    // 显示表格设置工具
-    showTableSetting: false,
-    // 是否显示表格边框
-    bordered: true,
-    // 序号列
-    showIndexColumn: false,
-    // 勾选列
-    rowSelection: false,
-    // 搜索
-    handleSearchInfoFn(info) {
-      return info;
-    },
-  });
-  function handleCloseRecordList(){
-	  showRecordList.value = false;
-  }
-  function exportList(){
-    createMessage.success("接口待对接！")
   }
 
+  // 步骤1提交
+  function uploadFormSubmit(value) {
+    uploadFrom.value = value;
+    if (uploadFrom.value.headers) {
+      uploadFrom.value.headers.forEach((item) => {
+        item.refName = item.refName != null ? item.refName.toLowerCase() : item.name.toLowerCase();
+      });
+    }
+    current.value = 1;
+  }
+
+  // 步骤2提交
+  const headersTableRef = ref();
+  function headersTableSubmit(value) {
+    uploadFrom.value.headers = value;
+    if (isEdit) {
+      // 编辑
+      ShpGeoLayerUpdateLayer(uploadFrom.value)
+        .then((res) => {
+          console.log(res);
+          if (uploadFrom.value.dataSourceType == 'shp') {
+            current.value = 2;
+          } else if (uploadFrom.value.dataSourceType == 'excel') {
+            current.value = 1;
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    } else {
+      // 新增
+      ShpGeoLayerAdd(uploadFrom.value)
+        .then((res) => {
+          console.log(res);
+          if (uploadFrom.value.dataSourceType == 'shp') {
+            current.value = 2;
+          } else if (uploadFrom.value.dataSourceType == 'excel') {
+            current.value = 1;
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    }
+  }
+
+  // 下一步
+  function nextStep() {
+    // 新增状态下的
+    if (!isEdit && uploadFrom.value.dataSourceType == '') {
+      createMessage.warn('请先上传shp文件或者excel文件');
+      return;
+    }
+    if (current.value == 0 && uploadFrom.value.dataSourceType == 'shp') {
+      // uploadFormRef.value.submit1();
+      uploadFormSubmit(defaultData2);
+    } else if (current.value == 0 && uploadFrom.value.dataSourceType == 'excel') {
+      headersTableSubmit([]);
+    } else if (current.value == 1) {
+      headersTableRef.value.submit2();
+    }
+  }
+
+  // 按键
+  let isEdit: Boolean = false;
+  function onBtnClicked(domId) {
+    switch (domId) {
+      case 'btnAdd':
+        handleCreate();
+        isEdit = false;
+        break;
+      case 'btnEdit':
+        handleEdit();
+        isEdit = true;
+        break;
+      case 'btnDelete':
+        handleDelete();
+        break;
+      default:
+        break;
+    }
+  }
+
+  // 打开新增弹窗
+  const modalShow = ref<Boolean>(false);
   function handleCreate() {
-    addModalShow.value = true;
+    uploadFrom.value = cloneDeep(uploadFromAdd);
-  }
+    modalShow.value = true;
-  function viewAccount(record: Recordable) {
+    if (uploadFormRef.value) {
-    openAccountModal(true, {
+      uploadFormRef.value.clearValidation();
-      record,
-    });
-  }
-  function onEdit(targetKey: string){
-    tablist.splice(parseInt(targetKey),1);
-    if(tablist.length==0){
-      showRecordList.value = false;
     }
-    if(parseInt(targetKey)>1){
-      activeKey.value = (parseInt(targetKey)-1).toString();
-
-    }else{
-      activeKey.value = '0';
-    }
-    currentListQuery.listQuery = tablist[activeKey.value].listQuery
   }
-
+  // 关闭窗口
-  let currentListQuery = reactive({listQuery:{}});
+  function handleClose() {
-  
+    current.value = 0;
-  function handleTabChange(e){
+    modalShow.value = false;
-    currentListQuery.listQuery = tablist[e].listQuery
+    uploadFrom.value = cloneDeep(uploadFromAdd);
-
-    console.log(currentListQuery)
   }
-
+  // 再次创建
-
+  function closeAndCreate() {
-  // function remvoeTab(){
+    current.value = 0;
-
+    uploadFrom.value = cloneDeep(uploadFromAdd);
-  // }
+    if (uploadFormRef.value) {
-
+      uploadFormRef.value.clearValidation();
-  const tablist = reactive<{streetname:string;label:string;listQuery:searchListSchema}[]>([])
+    }
-  // 查询条件
-  interface searchListSchema{
-    is_intact?:number;
-    streetid?:number;
-    countyid?:number;
-    identification_start_time?:string;
-    identification_end_time?:string;
-    page?:number;
-    limit?:number;
-    is_deal?:number;
-    is_not_deal_hour24?:number;
-    is_drawback?:number;
-    typeid?:number;
-    is_illegal?:number;
-    is_complete?:number;
-    handle_status_id?:number;
-    out_time_flag?:number;
-  }
-
-
-
-  // const searchForm = reactive<searchListSchema>({
-
-  // })
-  
-  function handlePreViewData(column,record:Recordable){
-
-    const searchForm = reactive<searchListSchema>({
-      identification_start_time:searchParams.value?.identification_start_time,
-      identification_end_time:searchParams.value?.identification_end_time,
-      is_intact:1,
-      page:1,
-      limit:10,
-    })
-
-    if(currentOrgLevel.value == 'country'){
-      searchForm.countyid = record.streetid;
-    }else if(currentOrgLevel.value == 'street'){
-      searchForm.streetid = record.streetid;
-    }
-
-    console.log("searchForm",searchForm);
-
-    switch(column.dataIndex){
-      case 'allCount':
-        break;
-      case 'handleStatus':
-        searchForm.is_deal = 1;
-        break;
-      case 'notDealHour24':
-        searchForm.is_not_deal_hour24 = 1;
-        searchForm.is_drawback = 0;
-        break;
-      case 'notDealHour24':
-        searchForm.is_not_deal_hour24 = 1;
-        searchForm.is_drawback = 0;
-        break;
-      case 'typeFanxinCount':
-        searchForm.typeid = record.typeid
-      case 'typeJiagaiCount':
-        searchForm.typeid = record.typeid
-      case 'typeFanjianCount':
-        searchForm.typeid = record.typeid
-      case 'typeCunliangCount':
-        searchForm.typeid = record.typeid
-      case 'typeTuituCount':
-        searchForm.typeid = record.typeid
-      case 'illegal0Count':
-        searchForm.is_illegal = 0;
-        searchForm.is_deal = 1;
-        break;
-      case 'illegal1Count':
-        searchForm.is_illegal = 1;
-        searchForm.is_deal = 1;
-        break;
-      case 'illegal2Count':
-        searchForm.is_illegal = 2;
-        searchForm.is_deal = 1;
-        break;
-      case 'illegal1Count1':
-        searchForm.is_illegal = 1;
-        searchForm.is_deal = 1;
-        break;
-      case 'illegalHandle2Status':
-        searchForm.handle_status_id = 1;
-        searchForm.is_deal = 1;
-        break;
-      case 'illegalHandle01Status':
-        searchForm.is_illegal = 1;
-        searchForm.is_deal = 1;
-        searchForm.is_complete = 0;
-        break;
-      case 'notComplete3':
-        searchForm.is_illegal = 1;
-        searchForm.is_complete = 0;
-        searchForm.out_time_flag = 1;
-        break;
-      case 'notComplete7':
-        searchForm.is_illegal = 1;
-        searchForm.is_complete = 0;
-        searchForm.out_time_flag = 2;
-        break;
-      case 'notComplete30':
-        searchForm.is_illegal = 1;
-        searchForm.is_complete = 0;
-        searchForm.out_time_flag = 4;
-        break;
-      case 'notComplete30More':
-        searchForm.is_illegal = 1;
-        searchForm.is_complete = 0;
-        searchForm.out_time_flag = 5;
-        break;
-    }
-    
-    let tabItem = {
-      streetname:record.streetname,
-      label:column.title,
-      listQuery:searchForm,
-    }
-
-    tablist.push(tabItem)
-    activeKey.value = tablist.length > 1 ? (tablist.length-1).toString() : '0'; 
-
-    showRecordList.value = true;
-    currentListQuery.listQuery = searchForm
-
-  }
-
-  // 获取下级行政结构案件统计
-  function getOrgCaseList(column,record:Recordable){
-
-    if(currentOrgLevel.value == 'country'){
-      currentOrgLevel.value = 'street'
-    }else if(currentOrgLevel.value == 'street'){
-      currentOrgLevel.value = 'country'
-    }
-    searchInfo.countyid = record.streetid;
-    console.log("searchInfo",searchInfo);
-    reload();
-    console.log("searchInfo",searchInfo);
-  }
-  function handleCloseAllRecordList(){
-    for(let i=0;i<tablist.length;i++){
-      tablist.pop();
-    }
-    showRecordList.value = false;
-
   }
+  // 编辑
   function handleEdit() {
-    let rows = getSelectRows();
+    let rows: any = getSelectRows();
     if (rows.length == 0) {
-      return createMessage.warn('请勾选一个角色进行编辑');
+      return createMessage.warn('请勾选一个图层进行编辑');
     }
-    const record = rows[0];
+    uploadFrom.value = rows[0];
-    openRoleModal(true, {
+    isZipOrXls(uploadFrom.value.dataSourceType);
-      record,
+    modalShow.value = true;
-      isUpdate: true,
+    current.value = 0;
-    });
   }
-
+  // 删除
   async function handleDelete() {
     let rows = getSelectRows();
     if (rows.length == 0) {
-      return createMessage.warn('请勾选一个角色进行删除');
+      return createMessage.warn('请勾选一个图层进行删除');
     }
-    const query = [rows[0].id];
+    const query = { id: rows[0].id };
     createConfirm({
       iconType: 'info',
       title: '删除',
-      content: '确定要删除当前角色吗',
+      content: '确定要删除当前图层吗？',
       onOk: async () => {
-        const data = await deleteRole(query);
+        const data = await ShpGeoLayerDelete(query);
         if (data) {
           handleSuccess();
           createMessage.success('删除成功');
@@ -545,135 +313,20 @@
       },
     });
   }
-
+  // 刷新表格
-  function handlePrint(){
-    printOpen.value = true;
-  }
-
-  // 直接下载接口返回的二进制流 
-
-  function handleExport(){
-    let params = {...searchParams.value}
-    params.countyid = searchInfo?.countyid;
-    axios({
-      method:"post",
-      url:VITE_GLOB_API_URL+"/api/DroneCaseinfo/ExportCaseSynthesisCensusStreet",
-      params:params,
-      headers:{
-        "X-Token":localStorage.getItem("X-Token")
-      },
-      responseType:"blob"
-    }).then(res=>{
-        console.log("excel",res);
-        let fileName = "统计报表" + new Date().getTime() + ".xls";
-        const elink = document.createElement('a')
-        elink.download = fileName;
-        elink.style.display = 'none'
-        elink.href = URL.createObjectURL(res.data)
-        document.body.appendChild(elink)
-        elink.click()
-        URL.revokeObjectURL(elink.href)
-        document.body.removeChild(elink)
-
-    })
-  }
-
-  function handleExcelDownload(data) {
-      // 将二进制数据转换为Excel文件
-      const workbook = XLSX.read(data, { type: 'array' });
-
-      // 可以进一步处理workbook对象，例如提取工作表数据等
-      const firstSheetName = workbook.SheetNames[0];
-      const worksheet = workbook.Sheets[firstSheetName];
-      const excelData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
-
-      console.log('Excel Data:', excelData);
-
-      // 下载Excel文件
-      XLSX.writeFile(workbook, 'example.xlsx');
-    }
-
-
   function handleSuccess() {
     clearSelectedRowKeys();
     reload();
-	reloadDataPreview();
-  }
-  
-  function onBtnClicked(domId) {
-    switch (domId) {
-      case 'btnBack':
-        currentOrgLevel.value = 'street'
-        getOrgCaseList({},{streetid:null});
-        break;
-      case 'btnAdd':
-        handleCreate();
-        break;
-      case 'btnEdit':
-        handleEdit();
-        break;
-      case 'btnDelete':
-        handleDelete();
-        break;
-      case 'btnModules':
-        let rows = getSelectRows();
-        if (rows.length == 0) {
-          return createMessage.warn('请勾选一个角色进行编辑');
-        }
-        const record = rows[0];
-        openModulesModal(true, {
-          record,
-        });
-        break;
-	  case 'btnPrint':
-		  handlePrint();
-		break;
-      case 'btnExport':
-	  	handleExport();
-		break;
-      default:
-        break;
-    }
   }
 </script>
-<style>
+<style lang="less" scoped>
-.map-outer{
+  .content {
-  width:100%;
+    padding: 20px;
-  height: calc( 100vh - 80px);
+  }
-}
-.data-preview-container{
-	width:100%;
-	height: calc( 100% - 0px);
-	position:absolute;
-	padding:30px 10px;
-	top:0px;
-	left:0px;
-  background:#fff;
-}
-.data-preview-container-option{
-	width:120px;
-	height: 40px;
-	position:absolute;
-	top:30px;
-	right:0px;
-}
-.data-preview-container-option div{
-	width:40px;
-	height:40px;
-	line-height:40px;
-	float:left;
-	text-align: center;
-	cursor:pointer;
-}
 
-.content{
+  .current1 {
-  padding:20px;
+    margin-top: 30px;
-}
+    display: flex;
-
+    width: 800px;
-.upload-div{
+  }
-}
-
-.upload-span{
-  margin:30px auto;
-}
 </style>