图层加载,图斑点击查看编辑

src/views/demo/layer/index.vue

@@ -50,14 +50,6 @@
           </a-dropdown>
 
           <a-button type="primary" @click="exportTemplate"> 导出模版 </a-button>
-          <a-upload
-            :accept="'.xlsx,.csv,.xls,.zip'"
-            :showUploadList="false"
-            :custom-request="customRequest"
-            style="margin-right: 0px"
-          >
-            <a-button type="primary"> 数据导入 </a-button>
-          </a-upload>
           <a-button type="primary" @click="changeBatchProcessingModal(true)"> 批量操作 </a-button>
           <a-button type="primary" @click="styleHandle"> 样式配置 </a-button>
         </div>
@@ -147,14 +139,13 @@
             :multiple="false"
             :maxCount="1"
             :customRequest="handleCustomRequest"
-            v-if="!fileUrl"
           >
             <p class="ant-upload-drag-icon">
               <inbox-outlined></inbox-outlined>
             </p>
             <p class="ant-upload-text">上传SLD文件</p>
           </a-upload-dragger>
-          <div v-else>
+          <div v-if="fileUrl">
             <p>{{ fileUrlView.name }}</p>
             <a-button type="primary" @click="editorHandle">在编辑器中打开</a-button>
           </div>
@@ -167,7 +158,7 @@
       </div>
     </div>
     <AddModel @register="registerAddModal" :treeData="treeData" @success="handleSuccess" />
-    <EditorModel @register="registerEditorModal" />
+    <EditorModel @register="registerEditorModal" @editorCancel="editorCancel" />
     <a-modal
       :keyboard="false"
       :maskClosable="false"
@@ -197,7 +188,13 @@
   import { CloseOutlined, InboxOutlined } from '@ant-design/icons-vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { columns } from './data';
-  import { tableDataByTableName, updateTableData, addTableData, uploadSldStyle } from '@/api/application/layer';
+  import {
+    tableDataByTableName,
+    updateTableData,
+    addTableData,
+    uploadSldStyle,
+    getSldFilePath,
+  } from '@/api/application/layer';
   import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
   import { useMessage } from '@/hooks/web/useMessage';
   import { uploadFile, fun_Delete } from '@/api/demo/files';
@@ -208,7 +205,16 @@
 
   import { EventBus } from '@/utils/eventBus';
 
-  import {GetGeometryCenter,EditDrawingGeometry,AddDrawingGeometry,PreviewDrawingGeometry,DrawingEnd,GeojsonToWkt} from "./geometryHandler.ts"
+
+  import {
+    GetGeometryCenter,
+    EditDrawingGeometry,
+    AddDrawingGeometry,
+    PreviewDrawingGeometry,
+    DrawingEnd,
+    GeojsonToWkt
+  } from './geometryHandler.ts';
+
 
   import * as mars3d from 'mars3d';
 
@@ -217,28 +223,17 @@
   let globalMap: mars3d.Map;
 
   const onMapLoad = (map) => {
-
     globalMap = map;
-    
+  };
-    // 单击和双击事件
-    globalMap.on(mars3d.EventType.click,(e)=>{
-      // 点击查询
-
-    })
-
-    
-  }
   
   EventBus.on("editLayerEnd",function(e){
     formState.value.geom = e;
-  })
+  });
-
 
   // 加载图层
+
   const handlerLoadLayer = (record) => {
 
-    console.log("record",record);
-    //
     let layer = globalMap.getLayerById(record.id);
 
     if(layer){
@@ -252,7 +247,7 @@
           layers: "my_workspace:"+record.tableName,
           parameters: {
             transparent: true,
-          format: "image/png"
+            format: 'image/png',
           },
           getFeatureInfoParameters: {
             feature_count: 10
@@ -272,21 +267,15 @@
           popup: "all",
           flyTo: true,
           featureToGraphic:function(e){   // 获取点击查询到的数据
-          console.log("e.data",e.data);
               let wkt = GeojsonToWkt(e.data.geometry);
-
               let editData = {...e.data.properties}
               editData.geom = wkt;
               viewData(editData)
           }
       })
-      // getClickFeature(tileLayer);
       globalMap.addLayer(tileLayer);
-
-    }
-
-
     }
+  };
 
   const { VITE_GLOB_API_URL } = getAppEnvConfig();
   const { createConfirm, createMessage } = useMessage();
@@ -389,7 +378,6 @@
             }
           });
         } else if (showTable.value == 'add') {
-
           params.list = [];
 
           headData.value?.forEach((item, index) => {
@@ -397,8 +385,8 @@
               name: item.dataIndex,
               value: formState.value[item] ? formState.value[item] : null,
             });
-          })
+          });
-          console.log("params",params.list);
+          console.log('params', params.list);
 
           addTableData(params).then((res) => {
             console.log('res', res);
@@ -424,9 +412,6 @@
   };
 
   const handleSelect = (record) => {
-
-
-
     tableName.value = record.tableName;
     applicationName.value = record.applicationName;
     tableVisible.value = true;
@@ -447,21 +432,22 @@
       isUpdate: false,
     });
   };
+
   const checkedLayer = (e) => {
     console.log("e123",e);
     handlerLoadLayer(e);
   }
   
-  const hanlerLoadLayer = () => {
 
-  }
+
+  const hanlerLoadLayer = () => {};
   const handleSuccess = () => {
     treeRef.value.fetch();
   };
   const addData = (type) => {
     AddDrawingGeometry(globalMap, type);
     showTable.value = 'add';
-  }
+  };
   const detailData = ref([]);
   const editData = (record) => {
     selectVal.value = record;
@@ -472,7 +458,6 @@
   };
 
   const viewData = (record) => {
-
     PreviewDrawingGeometry(globalMap,record.geom);
     selectVal.value = record;
     formState.value = record;
@@ -522,10 +507,20 @@
   };
 
   const styleHandle = () => {
+    showTable.value = 'style';
+    getSldFilePath({ tablename: tableName.value }).then((res) => {
+      if (res) {
+        fileUrlView.value.name = res.filepath;
+        fileUrl.value = res.filepath;
+        fileUrlView.value.url = res.filepath;
+        fileUrlView.value.id = res.fileid;
+        styleName.value = res.stylename;
+      } else {
         fileUrl.value = '';
         fileUrlView.value = {};
         styleName.value = '';
-    showTable.value = 'style';
+      }
+    });
   };
   const handleChange = (info) => {
     fileList.value = info.fileList;
@@ -556,6 +551,7 @@
       filepath: fileUrl.value,
       styleName: styleName.value,
       tablename: tableName.value,
+      id: fileUrlView.value.id,
     };
     uploadSldStyle(params).then((res) => {
       console.log(res);
@@ -636,34 +632,10 @@
     openTempeleteModel(true);
   };
   onMounted(() => {});
-  const customRequest = (file) => {
+  const editorCancel = () => {
-    console.log('handleCustomRequest', file);
+    fileList.value = [];
-    const name = file.file.name.toLowerCase();
+    fileUrlView.value = {};
-    if (name.endsWith('.zip')) {
+    fileUrl.value = '';
-      const formData = new FormData();
-      formData.append('files', file.file);
-      Upload(formData).then((res) => {
-        console.log(res);
-        const filePath = res[0].filePath;
-        let params = {
-          tableName: tableName.value,
-          zipFilePath: filePath,
-        };
-        UploadShape(params).then((result) => {
-          message.success('导入成功');
-          reload();
-        });
-      });
-    } else {
-      const formData = new FormData();
-      formData.append('file', file.file);
-      UploadExcelAll({ File: formData, tableName: tableName.value }).then((res) => {
-        message.success('导入成功');
-        reload();
-      });
-    }
-    // procedure.value ++
-    return false;
   };
 </script>