diff --git a/topology/web/package.json b/topology/web/package.json
index 7cc93f8aa6bb83fe68069561312d04c9c71b1963..8d7286859985e9ae191e7714c9d79a1864afa3dc 100644
--- a/topology/web/package.json
+++ b/topology/web/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@antv/g6": "^4.8.21",
+    "@element-plus/icons-vue": "^2.1.0",
     "@vue/reactivity": "^3.3.4",
     "@vue/shared": "^3.3.4",
     "axios": "^1.5.0",
diff --git a/topology/web/src/main.ts b/topology/web/src/main.ts
index 59e06568019a6038ffaef5c26358c52d1c7bb1cb..b0a599a5fd09951e92c34abe4f83d108c2bf7a95 100644
--- a/topology/web/src/main.ts
+++ b/topology/web/src/main.ts
@@ -4,6 +4,7 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import App from './App.vue'
 import router from './router'
 
@@ -12,5 +13,8 @@ const app = createApp(App)
 app.use(createPinia())
 app.use(router)
 app.use(ElementPlus)
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+}
 
 app.mount('#app')
diff --git a/topology/web/src/request/api.ts b/topology/web/src/request/api.ts
index e61e89191c8006729624b5b63618d7a486c01fcd..229568509b437c525230a75920ae671cd8acd973 100644
--- a/topology/web/src/request/api.ts
+++ b/topology/web/src/request/api.ts
@@ -26,6 +26,15 @@ export const topo = {
       throw error;
     }
   },
+
+  async host_list() {
+    try {
+      const response = await request.get('/agentlist');
+      return response.data;
+    } catch (error) {
+      throw error;
+    }
+  },
   
   // 添加其他API请求方法
 };
diff --git a/topology/web/src/views/NodeView.vue b/topology/web/src/views/NodeView.vue
index d71741a66197f64c098c94cae1f022f965b2e333..412f48dfe44f24ee5db99df66faaebb96c573b85 100644
--- a/topology/web/src/views/NodeView.vue
+++ b/topology/web/src/views/NodeView.vue
@@ -1,21 +1,38 @@
 <template>
-  <h1 class="h1">单机拓扑图演示页面</h1>
-  <div id="topo-container" class="container"></div>
+  <div class="title">
+    <h1 class="h1">单机拓扑图演示页面</h1>
+    <el-dropdown class="dropdown" @command="handleNodeSelected">
+      <span class="el-dropdown-link">
+        选择主机
+        <el-icon class="el-icon--right">
+          <arrow-down />
+        </el-icon>
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item :command=node v-for="node in node_list">{{node.id}}</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
 
+  <div id="topo-container" class="container"></div>
   <el-drawer class="drawer" v-model="drawer" :title="title" :direction="direction" :before-close="handleClose">
-    <span>Hi, there!</span>
+    <span>Hi, there</span>
   </el-drawer>
 </template>
 
 <script setup lang="ts">
 import G6 from '@antv/g6';
-import { ref, onMounted } from "vue";
+import { ref,reactive, onMounted } from "vue";
 import { topo } from '../request/api';
 import server_logo from "@/assets/icon/server.png";
 
 let drawer = ref(false)
 const direction = 'rtl'
 const title = ref("")
+const node_list = reactive<any>([])
+let graph = ref()
 
 function handleClose() {
   drawer.value = false
@@ -23,8 +40,27 @@ function handleClose() {
 
 onMounted(async () => {
   try {
-    const data = await topo.single_host_tree("d6900229-971b-482c-b1a5-cf108777c6db");
-    console.log(data.data.tree);
+    updateNodeList()
+
+  } catch (error) {
+    console.error(error)
+  }
+})
+
+async function updateNodeList() {
+  const data = await topo.host_list()
+  // console.log(data);
+  for (let key in data.data.agentlist){
+    node_list.push({
+      id: key,
+    })
+  };
+
+}
+
+async function handleNodeSelected(node: any) {
+  const data = await topo.single_host_tree(node.id);
+    // console.log(data.data.tree);
 
     let root = data.data.tree
     root.img = server_logo;
@@ -32,13 +68,10 @@ onMounted(async () => {
     root.size = 40
 
     initGraph(data.data.tree);
-  } catch (error) {
-    console.error(error)
-  }
-})
+}
 
 function initGraph(data: any) {
-  let graph = new G6.TreeGraph({
+  graph.value = new G6.TreeGraph({
     container: "topo-container",
     width: document.getElementById("topo-container")!.clientWidth,
     height: document.getElementById("topo-container")!.clientHeight,
@@ -61,7 +94,7 @@ function initGraph(data: any) {
       rankSep: 100,
     },
   });
-  graph.node(function (node: any) {
+  graph.value.node(function (node: any) {
     // console.log(node);
     return {
       label: node.node.type + ":" + node.node.name,
@@ -71,7 +104,7 @@ function initGraph(data: any) {
       },
     };
   });
-  graph.on("nodeselectchange", (e) => {
+  graph.value.on("nodeselectchange", (e) => {
     if (e.select) {
       let node = (e.target as any)._cfg!;
       let node_id = node.id
@@ -84,26 +117,45 @@ function initGraph(data: any) {
     }
     return false
   });
-  graph.data(data);
-  graph.render();
-  graph.fitCenter();
+  graph.value.data(data);
+  graph.value.render();
+  graph.value.fitCenter();
 
   window.onresize = () => {
-    graph.changeSize(
+    graph.value.changeSize(
       document.getElementById("topo-container")!.clientWidth,
       document.getElementById("topo-container")!.clientHeight)
-    graph.fitCenter()
+    graph.value.fitCenter()
   }
 }
 
 </script>
 
 <style scoped>
+
+.title {
+  position:relative;
+}
 .h1 {
   width: 100%;
+  margin: 0;
+  padding-top: 10px;
+  padding-bottom: 10px;
   text-align: center;
 }
 
+.dropdown {
+  font-size: 120%;
+  position: absolute;
+  background-color: white;
+  right: 0;
+  bottom: 0;
+
+  margin-bottom: 3px;
+  margin-right: 10px;
+  padding-left: 10px;
+}
+
 .container {
   width: 100%;
   height: 100%;
diff --git a/topology/web/yarn.lock b/topology/web/yarn.lock
index cc3de9d955bc3777e6c229710740963b127ee952..9b47cd467d4d84f03da7fe98be4b88ae1368d133 100644
--- a/topology/web/yarn.lock
+++ b/topology/web/yarn.lock
@@ -280,7 +280,7 @@
   resolved "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz#b6c75a56a1947cc916ea058772d666a2c8932f31"
   integrity sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==
 
-"@element-plus/icons-vue@^2.0.6":
+"@element-plus/icons-vue@^2.0.6", "@element-plus/icons-vue@^2.1.0":
   version "2.1.0"
   resolved "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz#7ad90d08a8c0d5fd3af31c4f73264ca89614397a"
   integrity sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==