From 931d17ee036e7e3d23d8ab698a4ddb84300314c0 Mon Sep 17 00:00:00 2001
From: Wangjunqi123 <wangjunqi@kylinos.cn>
Date: Fri, 10 Nov 2023 19:08:55 +0800
Subject: [PATCH] add machine dropdown component

---
 web/src/App.vue | 59 ++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 53 insertions(+), 6 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index dc993a1..5ed687d 100755
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="top_area">
     <el-dropdown>
-      <span class="el-dropdown-link">
+      <span class="dropdown">
         <el-icon><Menu /></el-icon>拓扑<el-icon class="el-icon--right"><arrow-down /></el-icon>
       </span>
       <template #dropdown>
@@ -10,9 +10,21 @@
           <el-dropdown-item @click="switch_single_topo">单机拓扑</el-dropdown-item>
         </el-dropdown-menu>
       </template>
-  </el-dropdown>
+    </el-dropdown>
+
+    <el-dropdown>
+      <span class="dropdown">
+        <el-icon><Monitor /></el-icon>机器<el-icon class="el-icon--right"><arrow-down /></el-icon>
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item @click="switch_single_topo(node)" v-for="node in node_list">{{ node.id }}</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
   </div>
   <RouterView />
+
 </template>
 
 <script setup lang="ts">
@@ -20,17 +32,52 @@ import { RouterLink, RouterView } from 'vue-router'
 import { ref, reactive, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { topo } from '@/request/api';
-import { More, Menu } from '@element-plus/icons-vue';
+import { More } from '@element-plus/icons-vue';
 
+const node_list = reactive<any>([])
 const router = useRouter()
 
+onMounted(async () => {
+  try {
+    updateNodeList()
+  } catch (error) {
+    console.error(error)
+  }
+})
+
+async function updateNodeList() {
+  //ttcode
+  const data = {
+		"code":  0,
+		"error": null,
+		"data": 
+			{"agentlist": {"070cb0b4-c415-4b6a-843b-efc51cff6b76": "10.44.55.66:9992"}}
+    }
+	
+  // const data = await topo.host_list()
+  // console.log(data);
+  for (let key in data.data.agentlist) {
+    node_list.push({
+      id: key,
+    })
+  };
+
+}
+
 function switch_multi_topo() {
   router.push("/cluster")
 }
 
-function switch_single_topo() {
-  router.push("/node")
+function switch_single_topo(node: any) {
+  // router.push("/node")
+  router.push({
+    path: "/node",
+    query: {
+      uuid: node.id
+    }
+  })
 }
+
 </script>
 
 <style scoped>
@@ -47,7 +94,7 @@ header {
   position: relative;
   background-color: #cfcaca;
 
-  .el-dropdown-link {
+  .dropdown {
     font-size: medium;
     cursor: pointer;
     color:rgb(79, 104, 104);
-- 
Gitee