部分接口对接

.env.development

@@ -16,7 +16,7 @@ VITE_GLOB_INFO_IMAGE_URL=http://120.222.154.48:6050
 # Interface prefix
 VITE_GLOB_API_URL_PREFIX=
 
-VITE_GLOB_APP_TITLE = 林业防火平台
+VITE_GLOB_APP_TITLE = 费县智慧林业防灭火平台
 
 VITE_GLOB_APP_LOGO = /logo.png
 

.env.linyefanghuo

@@ -24,7 +24,7 @@ VITE_GLOB_UPLOAD_URL=http://120.222.154.7:6050
 
 VITE_GLOB_API_URL_PREFIX=
 
-VITE_GLOB_APP_TITLE = 林业防火平台
+VITE_GLOB_APP_TITLE = 费县智慧林业防灭火平台
 
 VITE_GLOB_APP_LOGO = /logo.png
 

src/api/application/layer.ts

@@ -1,6 +1,10 @@
 import { defHttp } from '@/utils/http/axios';
 
-import { TableDataByTableNameParams, TempeleteByTableNameParams } from './model/index';
+import {
+  TableDataByTableNameParams,
+  TempeleteByTableNameParams,
+  UploadSldStyleParams,
+} from './model/index';
 
 enum Api {
   // 获取列表数据
@@ -9,6 +13,8 @@ enum Api {
   TempeleteByTableName = '/api/Layer/TempeleteByTableName',
   //   更新单条数据
   UpdateTableData = '/api/Layer/UpdateTableData',
+  // 上传样式
+  UploadSldStyle = '/api/Layer/UploadSldStyle',
 }
 /**
  * @description: 获取打卡点列表
@@ -27,11 +33,20 @@ export function updateTableData(params: any) {
   });
 }
 /**
- * @description: 编辑打卡点
+ * @description: 下载模板
  */
 export function tempeleteByTableName(params: TempeleteByTableNameParams) {
-  return defHttp.post({
+  return defHttp.get({
     url: Api.TempeleteByTableName,
     params,
   });
 }
+/**
+ * @description: 下载模板
+ */
+export function uploadSldStyle(params: UploadSldStyleParams) {
+  return defHttp.get({
+    url: Api.UploadSldStyle,
+    params,
+  });
+}

src/api/application/model/index.ts

@@ -30,4 +30,11 @@ export interface TableDataByTableNameParams {
 }
 export interface TempeleteByTableNameParams {
   tablename: string;
+  type: number;
+}
+
+export interface UploadSldStyleParams {
+  filepath: string;
+  tablename: string;
+  styleName: string;
 }

src/packages/components/Decorates/Titles/Titles01/config.ts

@@ -5,7 +5,7 @@ import { Titles01Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
-  borderTitle: '费县林业防火平台',
+  borderTitle: '费县智慧林业防灭火平台',
   borderTitleWidth: 1920,
   borderTitleHeight: 98,
   borderTitleSize: 18,

src/views/demo/layer/EditorModel.vue

@@ -26,6 +26,7 @@
   import axios from 'axios';
   import { getAppEnvConfig } from '@/utils/env';
   import { fun_Delete } from '@/api/demo/files';
+  import { uploadSldStyle } from '@/api/application/layer';
 
   const { VITE_GLOB_API_URL } = getAppEnvConfig();
   async function fetchXMLDataWithAxios(url) {
@@ -40,7 +41,12 @@
   const { createMessage, createConfirm } = useMessage();
   defineOptions({ name: 'MenuDrawer' });
   const editorJson = ref();
+  const params: any = ref({});
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    console.log(data);
+    params.value.filepath = data.urlData.url;
+    params.value.styleName = data.styleName;
+    params.value.tablename = data.tableName;
     setModalProps({ confirmLoading: false });
     fileData.value = data.urlData;
     // 使用方法
@@ -150,7 +156,18 @@
   const changeHandle = (value) => {
     editorJson.value = value;
   };
-  const editorSubmit = () => {};
+  const editorSubmit = () => {
+    console.log(params.value);
+    uploadSldStyle(params.value).then((res) => {
+      console.log(res);
+      if (res) {
+        closeModal();
+        createMessage.success('提交成功!');
+      } else {
+        createMessage.error('提交失败!');
+      }
+    });
+  };
 </script>
 <style lang="less" scoped>
   .v-json-box {

src/views/demo/layer/TempeleteModel.vue

@@ -0,0 +1,50 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="下载模板" :showOkBtn="false">
+    <a-button type="primary" @click="downloadFile(0)">下载Excel模板</a-button>
+    <a-button type="primary" @click="downloadFile(1)">下载Shp模板</a-button>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { getAppEnvConfig } from '@/utils/env';
+  import axios from 'axios';
+
+  const { VITE_GLOB_API_URL } = getAppEnvConfig();
+  defineOptions({ name: 'MenuDrawer' });
+
+  const props = defineProps(['tableName']);
+
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: false });
+  });
+  const downloadFile = (type) => {
+    const fileName = type == 0 ? 'Excel模板' : 'Shp模板';
+    const params = {
+      type,
+      tableName: props.tableName,
+    };
+    axios({
+      method: 'get',
+      url: VITE_GLOB_API_URL + '/api/Layer/TempeleteByTableName',
+      params: params,
+      headers: {
+        'X-Token': localStorage.getItem('X-Token'),
+      },
+      responseType: 'blob',
+    }).then((res) => {
+      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);
+    });
+  };
+</script>
+<style lang="less" scoped>
+  button {
+    margin: 10px;
+  }
+</style>

src/views/demo/layer/index.vue

@@ -24,7 +24,7 @@
             style="width: 200px; margin-right: 10px"
           />
           <a-button type="primary" @click="getList"> 查询 </a-button>
-          <a-button type="primary" @click="handleCreate"> 导出模版 </a-button>
+          <a-button type="primary" @click="exportTemplate"> 导出模版 </a-button>
           <a-button type="primary" @click="handleItem"> 数据导入 </a-button>
           <a-button type="primary" @click="changeBatchProcessingModal(true)"> 批量操作 </a-button>
           <a-button type="primary" @click="styleHandle"> 样式配置 </a-button>
@@ -101,6 +101,8 @@
       <!-- 样式配置 -->
       <div class="data-style" v-if="showTable == 'style'">
         <div class="img-box">
+          <a-input v-model:value="styleName" placeholder="样式名称" style="margin-bottom: 10px" />
+          <p style="color: #ed6f6f" v-if="styleName == ''">请输入样式名称</p>
           <a-upload-dragger
             v-model:fileList="fileList"
             name="file"
@@ -144,17 +146,18 @@
         @changeBatchProcessingModal="changeBatchProcessingModal"
       />
     </a-modal>
+    <TempeleteModel @register="registerTempeleteModel" :tableName="tableName" />
   </PageWrapper>
 </template>
 <script setup lang="ts">
-  import { LayerTree, AddModel, Map, EditorModel } from './page';
+  import { LayerTree, AddModel, Map, EditorModel, TempeleteModel } from './page';
   import { ref, UnwrapRef, reactive, onMounted } from 'vue';
   import { PageWrapper } from '@/components/Page';
   import { useModal } from '@/components/Modal';
   import { CloseOutlined, InboxOutlined } from '@ant-design/icons-vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { columns } from './data';
-  import { tableDataByTableName, updateTableData } from '@/api/application/layer';
+  import { tableDataByTableName, updateTableData, uploadSldStyle } 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';
@@ -171,6 +174,8 @@
   const batchProcessingModalOpen = ref(false);
   const [registerAddModal, { openModal: openAddModal }] = useModal();
   const [registerEditorModal, { openModal: openEditorModal }] = useModal();
+  const [registerTempeleteModel, { openModal: openTempeleteModel }] = useModal();
+
   const labelCol = { span: 6 };
   const wrapperCol = { span: 18 };
   const keyWord = ref(null);
@@ -212,6 +217,7 @@
 
   const formState = ref({});
   const tableName = ref();
+  const styleName = ref();
   const rules = {
     name: [
       { required: true, message: 'Please input Activity name', trigger: 'blur' },
@@ -312,15 +318,19 @@
       },
     });
   };
+  const fileUrl = ref('');
+  const fileUrlView: any = ref({});
   const posData = (record) => {};
   const styleHandle = () => {
+    fileUrl.value = '';
+    fileUrlView.value = {};
+    styleName.value = '';
     showTable.value = 'style';
   };
   const handleChange = (info) => {
     fileList.value = info.fileList;
   };
-  const fileUrl = ref('');
-  const fileUrlView: any = ref({});
+
   // 上传文件接口
   const handleCustomRequest = (options) => {
     fileList.value = [];
@@ -330,7 +340,7 @@
     uploadFile(formData)
       .then((res: any) => {
         fileUrl.value = res[0].filePath;
-        fileUrlView.value.url = VITE_GLOB_API_URL + '/' + res[0].filePath;
+        fileUrlView.value.url = res[0].filePath;
         fileUrlView.value.id = res[0].id;
         createMessage.success('上传成功!');
       })
@@ -339,7 +349,23 @@
       });
   };
   const styleSubmit = () => {
-    console.log(fileUrl.value);
+    if (!styleName.value) {
+      return createMessage.warning('样式名称不能为空!');
+    }
+    const params = {
+      filepath: fileUrl.value,
+      styleName: styleName.value,
+      tablename: tableName.value,
+    };
+    uploadSldStyle(params).then((res) => {
+      console.log(res);
+      if (res) {
+        showTable.value = '';
+        createMessage.success('提交成功!');
+      } else {
+        createMessage.error('提交失败!');
+      }
+    });
   };
   const styleCancel = () => {
     if (fileUrlView.value.id) {
@@ -360,8 +386,13 @@
     }
   };
   const editorHandle = () => {
+    if (!styleName.value) {
+      return createMessage.warning('样式名称不能为空!');
+    }
     openEditorModal(true, {
       urlData: fileUrlView.value,
+      styleName: styleName.value,
+      tableName: tableName.value,
     });
   };
   const changeBatchProcessingModal = (type: boolean) => {
@@ -397,6 +428,9 @@
       setColumns(arr);
     });
   };
+  const exportTemplate = () => {
+    openTempeleteModel(true);
+  };
   onMounted(() => {});
 </script>
 

src/views/demo/layer/page.ts

@@ -2,3 +2,4 @@ export { default as LayerTree } from './LayerTree.vue';
 export { default as AddModel } from './AddModel.vue';
 export { default as Map } from './Map.vue';
 export { default as EditorModel } from './EditorModel.vue';
+export { default as TempeleteModel } from './TempeleteModel.vue';