diff --git a/topology/server/handler/handler.go b/topology/server/handler/handler.go
index 8ffc2bc63013a1f796981b389fcc57d9860b4e43..dd987a7bc4b16a663711564dbb7300e4812d0423 100644
--- a/topology/server/handler/handler.go
+++ b/topology/server/handler/handler.go
@@ -76,6 +76,7 @@ func MultiHostHandle(ctx *gin.Context) {
 			"error": err,
 			"data":  nil,
 		})
+		return
 	}
 
 	ctx.JSON(http.StatusOK, gin.H{
diff --git a/topology/web/package.json b/topology/web/package.json
index 2d0cab9842ca206db03baf8796a62fff953a7abc..7cc93f8aa6bb83fe68069561312d04c9c71b1963 100644
--- a/topology/web/package.json
+++ b/topology/web/package.json
@@ -13,6 +13,7 @@
     "@antv/g6": "^4.8.21",
     "@vue/reactivity": "^3.3.4",
     "@vue/shared": "^3.3.4",
+    "axios": "^1.5.0",
     "element-plus": "^2.3.12",
     "pinia": "^2.1.4",
     "vue": "^3.3.4",
diff --git a/topology/web/src/request/api.ts b/topology/web/src/request/api.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d420679c15edbe8ebe4f24098205adba4e1a8674
--- /dev/null
+++ b/topology/web/src/request/api.ts
@@ -0,0 +1,22 @@
+import request from './request';
+
+export const topo = {
+  async multi_host_topo() {
+    try {
+      const response = await request.get('/multi_host');
+      return response.data;
+    } catch (error) {
+      throw error;
+    }
+  },
+  async single_host_topo(node:string) {
+    try {
+      const response = await request.get('/single_host/'+node);
+      return response.data;
+    } catch (error) {
+      throw error;
+    }
+  },
+  
+  // 添加其他API请求方法
+};
diff --git a/topology/web/src/request/request.ts b/topology/web/src/request/request.ts
new file mode 100644
index 0000000000000000000000000000000000000000..23f6ae02fa29f0411e6abc6062a27a25ca97f47d
--- /dev/null
+++ b/topology/web/src/request/request.ts
@@ -0,0 +1,10 @@
+import axios from 'axios';
+import { type AxiosInstance } from 'axios';
+
+const request: AxiosInstance = axios.create({
+  // baseURL: 'http://192.168.241.129:9991/plugin/api/', // 根据你的API地址进行配置
+  baseURL: '/plugin/api/', // 根据你的API地址进行配置
+  timeout: 10000, // 设置超时时间
+});
+
+export default request;
diff --git a/topology/web/src/views/ClusterView.vue b/topology/web/src/views/ClusterView.vue
index c88a6156ddd37eb537a72011faca6c13b3d47941..314b1cefe830dc1ef336d0f06a725c1c14251433 100644
--- a/topology/web/src/views/ClusterView.vue
+++ b/topology/web/src/views/ClusterView.vue
@@ -9,7 +9,7 @@
 <script setup lang="ts">
 import G6 from '@antv/g6';
 import { ref, onMounted } from "vue";
-
+import { topo } from '../request/api';
 
 let drawer = ref(false)
 const direction = 'rtl'
@@ -19,45 +19,53 @@ function handleClose() {
   drawer.value = false
 }
 
-onMounted(() => {
-  initGraph();
-})
+onMounted(async () => {
+  try {
+    const data = await topo.multi_host_topo();
+    console.log(data.data);
+    let d = data.data
+    for (let i = 0; i < d.edges.length; i++) {
+      d.edges[i].source = d.edges[i].Src
+      d.edges[i].target = d.edges[i].Dst
+    }
 
-function initGraph() {
-  const data = {
-    canvasWidth: 0,
-    canvasHeight: 0,
+    initGraph(d);
+  } catch (error) {
+    console.error(error)
+  }
+})
 
-    // 节点
-    nodes: [
-      {
-        id: 'node1',
-        x: 100,
-        y: 200,
-      },
-      {
-        id: 'node2',
-        x: 300,
-        y: 200,
-      },
-    ],
-    // 边集
-    edges: [
-      // 表示一条从 node1 节点连接到 node2 节点的边
-      {
-        source: 'node1',
-        target: 'node2',
-      },
-    ],
-  };
+function initGraph(data: any) {
+  // const data = {
+  //   // 节点
+  //   nodes: [
+  //     {
+  //       id: 'node1',
+  //       x: 100,
+  //       y: 200,
+  //     },
+  //     {
+  //       id: 'node2',
+  //       x: 300,
+  //       y: 200,
+  //     },
+  //   ],
+  //   // 边集
+  //   edges: [
+  //     // 表示一条从 node1 节点连接到 node2 节点的边
+  //     {
+  //       source: 'node1',
+  //       target: 'node2',
+  //     },
+  //   ],
+  // };
 
   let graph = new G6.Graph({
     container: "topo-container",
     width: document.getElementById("topo-container")!.clientWidth,
     height: document.getElementById("topo-container")!.clientHeight,
     modes: {
-      default: ['drag-canvas', 'zoom-canvas', "click-select",
-      ],
+      default: ['drag-canvas', 'zoom-canvas', "click-select", "drag-node"],
     },
   });
   graph.on("nodeselectchange", (e) => {
diff --git a/topology/web/src/views/NodeView.vue b/topology/web/src/views/NodeView.vue
index 31f774a750e9d5368dc58bfac580c767582e7970..ecc2f360125080b1f3d7beba4fb4433c7205221f 100644
--- a/topology/web/src/views/NodeView.vue
+++ b/topology/web/src/views/NodeView.vue
@@ -10,7 +10,7 @@
 <script setup lang="ts">
 import G6 from '@antv/g6';
 import { ref, onMounted } from "vue";
-
+import { topo } from '../request/api';
 
 let drawer = ref(false)
 const direction = 'rtl'
@@ -20,127 +20,187 @@ function handleClose() {
   drawer.value = false
 }
 
-onMounted(() => {
-  initGraph()
+onMounted(async () => {
+  try {
+    const data = await topo.single_host_topo("8140418e-dd3e-44f6-b769-1b2b9e562a3e");
+    console.log(data.data);
+    let d = data.data
 
+    initGraph(parse(d));
+  } catch (error) {
+    console.error(error)
+  }
 })
 
-function initGraph() {
-  const data = {
-    "id": "Modeling Methods",
-    "children": [
+function parse(data: any) {
+  let root = {
+    id: "8140418e-dd3e-44f6-b769-1b2b9e562a3e",
+    children: [
       {
-        "id": "Classification",
-        "children": [
-          {
-            "id": "Logistic regression"
-          },
-          {
-            "id": "Linear discriminant analysis"
-          },
-          {
-            "id": "Rules"
-          },
-          {
-            "id": "Decision trees"
-          },
-          {
-            "id": "Naive Bayes"
-          },
-          {
-            "id": "K nearest neighbor"
-          },
-          {
-            "id": "Probabilistic neural network"
-          },
-          {
-            "id": "Support vector machine"
-          }
-        ]
+        id: "process",
+        children: [] as any[],
       },
       {
-        "id": "Consensus",
-        "children": [
-          {
-            "id": "Models diversity",
-            "children": [
-              {
-                "id": "Different initializations"
-              },
-              {
-                "id": "Different parameter choices"
-              },
-              {
-                "id": "Different architectures"
-              },
-              {
-                "id": "Different modeling methods"
-              },
-              {
-                "id": "Different training sets"
-              },
-              {
-                "id": "Different feature sets"
-              }
-            ]
-          },
-          {
-            "id": "Methods",
-            "children": [
-              {
-                "id": "Classifier selection"
-              },
-              {
-                "id": "Classifier fusion"
-              }
-            ]
-          },
-          {
-            "id": "Common",
-            "children": [
-              {
-                "id": "Bagging"
-              },
-              {
-                "id": "Boosting"
-              },
-              {
-                "id": "AdaBoost"
-              }
-            ]
-          }
-        ]
+        id: "resource",
+        children: [] as any[],
       },
-      {
-        "id": "Regression",
-        "children": [
-          {
-            "id": "Multiple linear regression"
-          },
-          {
-            "id": "Partial least squares"
-          },
-          {
-            "id": "Multi-layer feedforward neural network"
-          },
-          {
-            "id": "General regression neural network"
-          },
-          {
-            "id": "Support vector regression"
-          }
-        ]
-      }
-    ]
+    ],
   }
 
+  for (const node of data.nodes) {
+    const words: string[] = node.id.split("_");
+    // let id = words[0];
+    let resource_type = words[1];
+    let resource = words[2];
+
+    if (resource_type == "process") {
+      root.children[0].children.push(node)
+    } else if (resource_type == "resource") {
+      root.children[1].children.push(node)
+    }
+  }
+
+  // for (const node of data.nodes) {
+  //   const words:string[] = node.id.split("_");
+  //   let id = words[0];
+  //   let resource_type = words[1];
+  //   let resource = words[2];
+  //   if (resource_type == "net") {
+
+  //   } else if (resource_type == "thread") {
+
+  //   }
+  // }
+
+  return root
+}
+
+function initGraph(data: any) {
+  // const data = {
+  //   "id": "Modeling Methods",
+  //   "children": [
+  //     {
+  //       "id": "Classification",
+  //       "children": [
+  //         {
+  //           "id": "Logistic regression"
+  //         },
+  //         {
+  //           "id": "Linear discriminant analysis"
+  //         },
+  //         {
+  //           "id": "Rules"
+  //         },
+  //         {
+  //           "id": "Decision trees"
+  //         },
+  //         {
+  //           "id": "Naive Bayes"
+  //         },
+  //         {
+  //           "id": "K nearest neighbor"
+  //         },
+  //         {
+  //           "id": "Probabilistic neural network"
+  //         },
+  //         {
+  //           "id": "Support vector machine"
+  //         }
+  //       ]
+  //     },
+  //     {
+  //       "id": "Consensus",
+  //       "children": [
+  //         {
+  //           "id": "Models diversity",
+  //           "children": [
+  //             {
+  //               "id": "Different initializations"
+  //             },
+  //             {
+  //               "id": "Different parameter choices"
+  //             },
+  //             {
+  //               "id": "Different architectures"
+  //             },
+  //             {
+  //               "id": "Different modeling methods"
+  //             },
+  //             {
+  //               "id": "Different training sets"
+  //             },
+  //             {
+  //               "id": "Different feature sets"
+  //             }
+  //           ]
+  //         },
+  //         {
+  //           "id": "Methods",
+  //           "children": [
+  //             {
+  //               "id": "Classifier selection"
+  //             },
+  //             {
+  //               "id": "Classifier fusion"
+  //             }
+  //           ]
+  //         },
+  //         {
+  //           "id": "Common",
+  //           "children": [
+  //             {
+  //               "id": "Bagging"
+  //             },
+  //             {
+  //               "id": "Boosting"
+  //             },
+  //             {
+  //               "id": "AdaBoost"
+  //             }
+  //           ]
+  //         }
+  //       ]
+  //     },
+  //     {
+  //       "id": "Regression",
+  //       "children": [
+  //         {
+  //           "id": "Multiple linear regression"
+  //         },
+  //         {
+  //           "id": "Partial least squares"
+  //         },
+  //         {
+  //           "id": "Multi-layer feedforward neural network"
+  //         },
+  //         {
+  //           "id": "General regression neural network"
+  //         },
+  //         {
+  //           "id": "Support vector regression"
+  //         }
+  //       ]
+  //     }
+  //   ]
+  // }
+
+  // let graph = new G6.Graph({
   let graph = new G6.TreeGraph({
     container: "topo-container",
     width: document.getElementById("topo-container")!.clientWidth,
     height: document.getElementById("topo-container")!.clientHeight,
     modes: {
-      default: ['drag-canvas', 'zoom-canvas', "click-select",
-       ],
+      default: ['drag-canvas', 'zoom-canvas', "click-select", "drag-node",
+      // default: ['drag-canvas', 'zoom-canvas',
+        {
+          type: 'collapse-expand',
+          onChange: function onChange(item, collapsed) {
+            const data = item.getModel();
+            data.collapsed = collapsed;
+            return true;
+          },
+        },
+      ],
     },
     layout: {
       type: 'dendrogram',
@@ -150,18 +210,19 @@ function initGraph() {
     },
   });
   graph.node(function (node) {
-      return {
-        label: node.id,
-        labelCfg: {
-          position: node.children && node.children.length > 0 ? 'left' : 'right',
-          offset: 5,
-        },
-      };
-    });
+    return {
+      label: node.id,
+      labelCfg: {
+        position: node.children && node.children.length > 0 ? 'left' : 'right',
+        offset: 5,
+      },
+    };
+  });
   graph.on("nodeselectchange", (e) => {
     if (e.select) {
-      let node_id = (e.target as any)._cfg!.id
-      console.log("click node:", node_id);
+      let node = (e.target as any)._cfg!;
+      let node_id = node.id
+      console.log("click node:", node_id, e);
 
       title.value = "I am " + node_id;
       drawer.value = drawer.value ? false : true;
diff --git a/topology/web/vite.config.ts b/topology/web/vite.config.ts
index 5c45e1d9b4e65e3a35bb0435436935a3090b5591..e84065a4c041040281a44710da9776b8720487c6 100644
--- a/topology/web/vite.config.ts
+++ b/topology/web/vite.config.ts
@@ -12,5 +12,14 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
+  },
+  server:{
+    proxy:{
+      "/plugin/api": {
+        target: 'http://192.168.241.129:9991',
+        changeOrigin:true,
+        // rewrite: (path)=> path.replace("/^\/api/", ""),
+      }
+    }
   }
 })
diff --git a/topology/web/yarn.lock b/topology/web/yarn.lock
index ada40ef46d81008dae32467fe7910d94a4b53964..cc3de9d955bc3777e6c229710740963b127ee952 100644
--- a/topology/web/yarn.lock
+++ b/topology/web/yarn.lock
@@ -681,11 +681,25 @@ async-validator@^4.2.5:
   resolved "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz#c96ea3332a521699d0afaaceed510a54656c6339"
   integrity sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
 available-typed-arrays@^1.0.5:
   version "1.0.5"
   resolved "https://registry.npmmirror.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
   integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
 
+axios@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.npmmirror.com/axios/-/axios-1.5.0.tgz#f02e4af823e2e46a9768cfc74691fdd0517ea267"
+  integrity sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -756,6 +770,13 @@ color@^3.1.3:
     color-convert "^1.9.3"
     color-string "^1.6.0"
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -854,6 +875,11 @@ define-properties@^1.1.3, define-properties@^1.1.4, define-properties@^1.2.0:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 detect-browser@^5.0.0, detect-browser@^5.1.0:
   version "5.3.0"
   resolved "https://registry.npmmirror.com/detect-browser/-/detect-browser-5.3.0.tgz#9705ef2bddf46072d0f7265a1fe300e36fe7ceca"
@@ -1008,6 +1034,11 @@ fecha@~4.2.0:
   resolved "https://registry.npmmirror.com/fecha/-/fecha-4.2.3.tgz#4d9ccdbc61e8629b259fdca67e65891448d569fd"
   integrity sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==
 
+follow-redirects@^1.15.0:
+  version "1.15.2"
+  resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
+  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.npmmirror.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
@@ -1015,6 +1046,15 @@ for-each@^0.3.3:
   dependencies:
     is-callable "^1.1.3"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
@@ -1336,6 +1376,18 @@ memorystream@^0.3.1:
   resolved "https://registry.npmmirror.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
   integrity sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==
 
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
 minimatch@^3.0.4:
   version "3.1.2"
   resolved "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -1513,6 +1565,11 @@ probe.gl@^3.1.1:
     "@probe.gl/log" "3.6.0"
     "@probe.gl/stats" "3.6.0"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 read-pkg@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"