feat(taskConfig): download

src/api/qgis.ts

@@ -3,51 +3,52 @@
  * @Author: Chris
  * @Date: 2024/7/2
  */
-import {AxiosInstanceConfig, createAxiosInstance} from "@/api/axios.ts";
+import { AxiosInstanceConfig, createAxiosInstance } from "@/api/axios.ts";
 
 const BASE_URL = "http://47.96.77.183:8000/";
 
 const axiosConfig: AxiosInstanceConfig = {
   baseURL: BASE_URL,
-}
+};
 
-const axiosInstance = createAxiosInstance(axiosConfig)
+const axiosInstance = createAxiosInstance(axiosConfig);
 
 /**
  * 获取指定路径的目录
  * @param dir
  */
 export function fetchDir(dir: string) {
-  return axiosInstance.get("qgis/process/list_dir_with_structure/?dir=" + dir)
+  return axiosInstance.get("qgis/process/list_dir_with_structure/?dir=" + dir);
 }
 
 /**
  * 清空工作空间
  */
 export function clearWorkspace() {
-  return axiosInstance.delete("qgis/process/clear_qgis_temp_dir/")
+  return axiosInstance.delete("qgis/process/clear_qgis_temp_dir/");
 }
 
 /**
  * 上传多文件
  * @param files
  */
 export function uploadFiles(files: File[]) {
-  let formData = new FormData()
-  files.forEach(file => {
-    formData.append("file_list", file)
-  })
+  let formData = new FormData();
+  files.forEach((file) => {
+    formData.append("file_list", file);
+  });
 
   const config = {
     headers: {
-      'Content-Type': 'multipart/form-data'
-    }
-  }
-  return axiosInstance.post("qgis/process/upload_files/", formData, config)
+      "Content-Type": "multipart/form-data",
+    },
+  };
+  return axiosInstance.post("qgis/process/upload_files/", formData, config);
 }
 
 // TODO download file
-export function downloadFile() {
+export function downloadFile(fileName: string) {
+  return axiosInstance.get("qgis/process/download_file/?filepath=" + fileName);
 }
 
 /**
@@ -59,6 +60,6 @@ export function process(toolId: string, inputs: {}) {
   const data = {
     algorithm_id: toolId,
     parameter_dictionary: inputs,
-  }
-  return axiosInstance.post("qgis/process/qgis_process", data)
+  };
+  return axiosInstance.post("qgis/process/qgis_process", data);
 }

src/components/taskConfig/index.vue

@@ -3,7 +3,7 @@ import { Close, Download } from "@element-plus/icons-vue";
 import { useTaskStore } from "@/store/task.ts";
 import { storeToRefs } from "pinia";
 import { reactive, ref } from "vue";
-import { process } from "@/api";
+import { downloadFile, process } from "@/api";
 
 const taskStore = useTaskStore();
 const { tool } = storeToRefs(taskStore);
@@ -46,8 +46,14 @@ function onCancel() {
   taskStore.close();
 }
 
-function handleClick() {
-  console.log("click");
+async function download() {
+  console.log(res.value);
+  const response = await downloadFile(res.value.data.OUTPUT);
+  const url = window.URL.createObjectURL(new Blob([response.data]));
+  const link = document.createElement("a");
+  link.href = url;
+  link.setAttribute("download", "sample.txt");
+  link.click();
 }
 </script>
 <template>
@@ -99,7 +105,7 @@ function handleClick() {
               circle
               v-if="res.message"
               style="float: right"
-              @click="handleClick"
+              @click="download()"
             />
           </template>
           {{ res?.message }}

src/constant/index.ts

@@ -54,4 +54,4 @@ export const TOOL_EXAMPLE = {
   ],
 };
 export const MOCK_JOB = `{"task":"Extract water body from Landsat-8 images","subtasks":[{"task":"Import Landsat-8 imagery into QGIS","toolId":"gdal:translate","subtasks":[],"toolName":"gdal:translate"},{"task":"Assign projection to the imported raster if it does not already have one","toolId":"gdal:assignprojection","subtasks":[],"toolName":"gdal:assignprojection"},{"task":"Select an appropriate spectral band combination for water body extraction","toolId":"gdal:rearrange_bands","subtasks":[],"toolName":"gdal:rearrange_bands"},{"task":"Apply threshold to identify water bodies","toolId":"gdal:rastercalculator","subtasks":[],"toolName":"gdal:rastercalculator"},{"task":"Convert the raster of threshold values to vector format for precise delineation","toolId":"gdal:polygonize","subtasks":[],"toolName":"gdal:polygonize"},{"task":"Refine the resultant vector layer by removing small erroneous polygons","toolId":"native:deleteholes","subtasks":[],"toolName":"native:deleteholes"}],"toolId":"","toolName":""}`;
-export const MOCK_TOOL = `{"id":"qgis:basicstatisticsforfields","name":"Basic_statistics_for_fields","description":"Generates basic statistics for a field of the attribute table of a vector layer.","args":[{"name":"INPUT_LAYER","type":"[vector: any]","description":"Vector layer to calculate the statistics on.","required":true},{"name":"FIELD_NAME","type":"[tablefield: any]","description":"The name of the field that will be added to the input table.","required":true},{"name":"OUTPUT_HTML_FILE","type":"[html]","description":"Specification of the file for the calculated statistics. One of: Skip Output,Save to a Temporary File,Save to File.","required":false}]}`;
+export const MOCK_TOOL = `{"id":"qgis:randompointsinsidepolygons","name":"qgis:randompointsinsidepolygons","description":"Generates basic statistics for a field of the attribute table of a vector layer.","args":[{"name":"INPUT","type":"[vector: any]","description":"Vector layer to calculate the statistics on.","required":true},{"name":"POINTS_NUMBER","type":"[html]","description":"Specification of the file for the calculated statistics. One of: Skip Output,Save to a Temporary File,Save to File.","required":false},{"name":"MIN_DISTANCE","type":"[html]","description":"Specification of the file for the calculated statistics. One of: Skip Output,Save to a Temporary File,Save to File.","required":false},{"name":"OUTPUT","description":"xxxxxxx"}]}`;