refactor: access to the updated tool API

src/api/index.ts

@@ -5,8 +5,8 @@
  */
 
 // 手动修改 Mock 接口
-// export * from "./job.ts"
-export * from "./mock.ts";
+export * from "./job.ts";
+// export * from "./mock.ts";
 export * from "./qgis.ts";
 
 // TODO: interface definition of api

src/api/job.ts

@@ -5,7 +5,7 @@
  */
 import { AxiosInstanceConfig, createAxiosInstance } from "@/api/axios.ts";
 
-const BASE_URL = "http://121.196.198.27:32580/";
+const BASE_URL = "http://47.237.25.20:32580/";
 
 const axiosConfig: AxiosInstanceConfig = {
   baseURL: BASE_URL,
@@ -19,7 +19,11 @@ const axiosInstance = createAxiosInstance(axiosConfig);
  * @param data
  */
 export function fetchJob(data: string) {
-  return axiosInstance.post("gis_agent_backend/simple/task_plan/", data);
+  return axiosInstance.post("gis_agent_backend/simple/task_plan/", data, {
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
 }
 
 /**

src/api/mock.ts

@@ -13,7 +13,7 @@ export const fetchJob = (task: string) =>
         resolve({
           data: JSON.parse(
             MOCK_JOB.replace(
-              /"task":"Extract water body from Landsat-8 images/,
+              /"task":"Extract elevation data of Sri Lanka from multiple TIF files using the shape of the island from a vector file/,
               '"task":"' + task,
             ),
           ),

src/components/Case.vue

@@ -2,13 +2,11 @@
 import { useSessionStore } from "../store/session.ts";
 import { onMounted } from "vue";
 
-const props = defineProps<{
-  name: string;
-}>();
 const sessionStore = useSessionStore();
 
 function handleClick() {
-  sessionStore.session.question = "Calculation of Flood Affected Area";
+  sessionStore.session.question =
+    "Extract elevation data of Sri Lanka from multiple TIF files using the shape of the island from a vector file";
   sessionStore.chatted();
 }
 
@@ -18,11 +16,19 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-button @click="handleClick"
-    ><div>
-      {{ props.name }}
-    </div></el-button
+  <el-button
+    class="case-button"
+    @click="handleClick"
+    v-if="sessionStore.questionShow"
+    >Elevation of Sri Lanka</el-button
   >
+  <div></div>
 </template>
 
-<style scoped lang="less"></style>
+<style scoped lang="less">
+.case-button {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+}
+</style>

src/constant/index.ts

@@ -53,5 +53,5 @@ 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_JOB = `{"code":70200,"message":"Success!","data":{"task":"Extract elevation data of Sri Lanka from multiple TIF files using the shape of the island from a vector file","subtasks":[{"task":"Merge multiple TIF files into a single raster dataset","toolId":"gdal:merge","subtasks":[],"toolName":"gdal:merge"},{"task":"Clip the merged raster dataset using the shape of the island from the vector file to extract the relevant elevation data","toolId":"gdal:cliprasterbymasklayer","subtasks":[],"toolName":"gdal:cliprasterbymasklayer"}],"toolId":"","toolName":""}}`;
 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"}]}`;

src/pages/Home/index.less

@@ -23,11 +23,6 @@
     padding: 0;
   }
 }
-.case-button {
-  position: absolute;
-  bottom: 20px;
-  left: 20px;
-}
 .question-button{
   position: absolute;
   bottom: 20px;

src/pages/Home/index.vue

@@ -15,7 +15,7 @@ import Case from "@/components/Case.vue";
       <el-container>
         <el-aside width="30%">
           <LeftBox />
-          <Case class="case-button" name="Calculation of Flood Affected Area" />
+          <Case />
         </el-aside>
         <el-main>
           <RightBox />

src/store/job.ts

@@ -8,10 +8,10 @@ export const useJobStore = defineStore("job", () => {
   let _job: Task;
 
   async function updateData(question: string) {
-    const res = (await fetchJob(question)).data;
-    // localData = (await axios.fetchJob(`{"question":"${question}"}`)).data;
+    // const res = (await fetchJob(question)).data;
+    const res = (await fetchJob(`{ "task": "${question}" }`)).data;
     console.debug("res", res);
-    _job = convertData(res);
+    _job = convertData(res.data);
 
     function convertData(data: any) {
       const children = data.subtasks;

src/store/task.ts

@@ -14,7 +14,7 @@ export const useTaskStore = defineStore("node", () => {
     _task.value = task;
     // TODO Fetch the tool
     // const res = await fetchTool(node.tool.id).data;
-    _task.value.tool = (await fetchTool(_task.value.tool.id)).data;
+    _task.value.tool = (await fetchTool(_task.value.tool.id)).data.data;
     console.log(_task.value);
   }
 

src/utils/graphUtil.ts

@@ -3,14 +3,13 @@
  * @Author: Chris
  * @Date: 2024/6/7
  */
-import G6, {TreeGraphData} from "@antv/g6";
-import {EdgeConfig, GraphData, NodeConfig} from "@antv/g6-core/lib/types";
-import {Task} from "@/type.ts";
+import G6, { TreeGraphData } from "@antv/g6";
+import { EdgeConfig, GraphData, NodeConfig } from "@antv/g6-core/lib/types";
+import { Task } from "@/type.ts";
 
 export function job2G6TreeGraph(job: Task) {
-
   function buildTreeNode(task: Task) {
-    const {children} = task;
+    const { children } = task;
     const treeNode: TreeGraphData = {
       id: generateId(),
       label: task.name,
@@ -35,7 +34,7 @@ export function jobLeafNode2G6Graph(job: Task) {
   };
 
   function buildNode(task: Task) {
-    const {children} = task;
+    const { children } = task;
     const node: NodeConfig = {
       id: generateId(),
       label: task.name,
@@ -101,32 +100,34 @@ export function textWrapping(
   let res = "";
   const pattern = new RegExp("[\u4E00-\u9FA5]+"); // Chinese characters
 
-  str.split("").forEach((letter, i) => {
-    if (pattern.test(letter)) {
-      // Chinese character
-      newLineWidth += fontSize;
-    } else {
-      // non-Chinese character
-      newLineWidth += G6.Util.getLetterWidth(letter, fontSize);
-      // mark the space between characters (could break line here)
-      if (letter == " ") {
-        newSpaceIndex = i;
-        newSpaceIndexLineWidth = newLineWidth;
+  if (str) {
+    str.split("").forEach((letter, i) => {
+      if (pattern.test(letter)) {
+        // Chinese character
+        newLineWidth += fontSize;
+      } else {
+        // non-Chinese character
+        newLineWidth += G6.Util.getLetterWidth(letter, fontSize);
+        // mark the space between characters (could break line here)
+        if (letter == " ") {
+          newSpaceIndex = i;
+          newSpaceIndexLineWidth = newLineWidth;
+        }
       }
-    }
 
-    if (newLineWidth >= maxWidth) {
-      if (newSpaceIndex > newLineStartIndex) {
-        res += str.slice(newLineStartIndex, newSpaceIndex) + "\n";
-        newLineWidth -= newSpaceIndexLineWidth;
-        newLineStartIndex = newSpaceIndex + 1;
+      if (newLineWidth >= maxWidth) {
+        if (newSpaceIndex > newLineStartIndex) {
+          res += str.slice(newLineStartIndex, newSpaceIndex) + "\n";
+          newLineWidth -= newSpaceIndexLineWidth;
+          newLineStartIndex = newSpaceIndex + 1;
+        }
       }
-    }
 
-    if (i == str.length - 1) {
-      res += str.slice(newLineStartIndex);
-    }
-  });
+      if (i == str.length - 1) {
+        res += str.slice(newLineStartIndex);
+      }
+    });
+  }
   return res;
 }
 // calculation of flo|od affected area