From 25642cd0c85fad9eb221ea5c695584a04f887025 Mon Sep 17 00:00:00 2001
From: Gzx1999 <guozhengxin@kylinos.cn>
Date: Thu, 23 Nov 2023 10:22:35 +0800
Subject: [PATCH] fetch machines data and display in cluster page

---
 frontend/src/views/Cluster/Cluster.vue | 40 ++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/frontend/src/views/Cluster/Cluster.vue b/frontend/src/views/Cluster/Cluster.vue
index b10bb07..6661106 100644
--- a/frontend/src/views/Cluster/Cluster.vue
+++ b/frontend/src/views/Cluster/Cluster.vue
@@ -8,7 +8,7 @@
             </PGTree>
         </div>
         <div class="cluster">
-            <PGTable :data="machines" title="机器列表" :showSelect="showSelect">
+            <PGTable :data="machines" title="机器列表" :showSelect="showSelect" :total="total" :currentPage="currentPage">
                 <template v-slot:action>
                     <el-dropdown>
                         <el-button type="primary">
@@ -45,8 +45,8 @@
                     <el-table-column prop="cpu" label="cpu">
                     </el-table-column>
                     <el-table-column label="状态">
-                        <template slot-scope="scope">
-                            <!-- <state-dot :state="scope.row.state"></state-dot> -->
+                        <template #default="scope">
+                            <state-dot :state="scope.row.state"></state-dot>
                         </template>
                     </el-table-column>
                     <el-table-column prop="tags" label="标签">
@@ -60,15 +60,45 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
+import { ElMessage } from 'element-plus';
+
 import PGTable from "@/components/PGTable.vue";
 import PGTree from "@/components/PGTree.vue";
+import StateDot from "@/components/StateDot.vue";
+
+import { getDepartMachines } from "@/request/cluster";
+import { RespCodeOK } from "@/request/request";
 
-const machines = ref([])
 const showSelect = ref(true)
 
 const department = ref<any[]>([])
 
+const machines = ref([])
+const departmentID = ref(1)
+const currentPage = ref(1)
+const pageSize= ref(10)
+const total = ref(0)
+
+onMounted(() => {
+    getDepartMachines({
+        page: currentPage.value,
+        size: pageSize.value,
+        DepartId: departmentID.value,
+    }).then((resp: any) => {
+        if (resp.code === RespCodeOK) {
+            total.value = resp.total
+            currentPage.value = resp.page
+            pageSize.value = resp.size
+            machines.value = resp.data
+        } else {
+            ElMessage.error("failed to get machines overview info: " + resp.msg)
+        }
+    }).catch((err: any) => {
+        ElMessage.error("failed to get machines overview info:" + err.msg)
+    })
+})
+
 </script>
 
 <style lang="scss" scoped>
-- 
Gitee