From c37dd21f4431d272275684201f4893a767934372 Mon Sep 17 00:00:00 2001 From: martsi Date: Sat, 6 Jul 2024 23:42:11 +0800 Subject: [PATCH] refactor: access to the updated tool API --- src/api/index.ts | 4 +-- src/api/job.ts | 8 ++++-- src/api/mock.ts | 2 +- src/components/Case.vue | 24 ++++++++++------- src/constant/index.ts | 2 +- src/pages/Home/index.less | 5 ---- src/pages/Home/index.vue | 2 +- src/store/job.ts | 6 ++--- src/store/task.ts | 2 +- src/utils/graphUtil.ts | 57 ++++++++++++++++++++------------------- 10 files changed, 59 insertions(+), 53 deletions(-) diff --git a/src/api/index.ts b/src/api/index.ts index 5249f4a..e7b6ed0 100644 --- a/src/api/index.ts +++ b/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 diff --git a/src/api/job.ts b/src/api/job.ts index 8846126..ce4cb8e 100644 --- a/src/api/job.ts +++ b/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", + }, + }); } /** diff --git a/src/api/mock.ts b/src/api/mock.ts index 763202c..faca301 100644 --- a/src/api/mock.ts +++ b/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, ), ), diff --git a/src/components/Case.vue b/src/components/Case.vue index cef94af..ab87768 100644 --- a/src/components/Case.vue +++ b/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(() => { - + diff --git a/src/constant/index.ts b/src/constant/index.ts index 5862d3a..23a5232 100644 --- a/src/constant/index.ts +++ b/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"}]}`; diff --git a/src/pages/Home/index.less b/src/pages/Home/index.less index 2ff9d01..10d9d8c 100644 --- a/src/pages/Home/index.less +++ b/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; diff --git a/src/pages/Home/index.vue b/src/pages/Home/index.vue index 2b3ea16..03817d0 100644 --- a/src/pages/Home/index.vue +++ b/src/pages/Home/index.vue @@ -15,7 +15,7 @@ import Case from "@/components/Case.vue"; - + diff --git a/src/store/job.ts b/src/store/job.ts index 1311261..0f07a0c 100644 --- a/src/store/job.ts +++ b/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; diff --git a/src/store/task.ts b/src/store/task.ts index 4b4cb4d..ca93ada 100644 --- a/src/store/task.ts +++ b/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); } diff --git a/src/utils/graphUtil.ts b/src/utils/graphUtil.ts index a41b198..198ff3e 100644 --- a/src/utils/graphUtil.ts +++ b/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