From 1ac54dc92d21f3f1d6711c8f2e3a86b732caee5e Mon Sep 17 00:00:00 2001
From: Gzx1999 <guozhengxin@kylinos.cn>
Date: Sun, 19 Nov 2023 22:33:17 +0800
Subject: [PATCH] add PGTree component

---
 frontend/src/components/PGTree.vue     | 21 +++++++++++++++++++++
 frontend/src/views/Cluster/Cluster.vue |  5 ++++-
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/PGTree.vue

diff --git a/frontend/src/components/PGTree.vue b/frontend/src/components/PGTree.vue
new file mode 100644
index 0000000..64c2861
--- /dev/null
+++ b/frontend/src/components/PGTree.vue
@@ -0,0 +1,21 @@
+<template>
+    <p>PGTree</p>
+    <el-tree :data="data" :props="defaultProps"></el-tree>
+</template>
+
+<script lang="ts" setup>
+
+const props = defineProps({
+    data: Array,
+    defaultProps: {
+        type: Object,
+        default: {
+            children: 'children',
+            label: 'label',
+        }
+    },
+})
+
+</script>
+
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/frontend/src/views/Cluster/Cluster.vue b/frontend/src/views/Cluster/Cluster.vue
index 0a65591..9ffaf37 100644
--- a/frontend/src/views/Cluster/Cluster.vue
+++ b/frontend/src/views/Cluster/Cluster.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="container">
         <div class="department">
-            <p>department panel</p>
+            <PGTree :data="department"/>
         </div>
         <div class="cluster">
             <PGTable :data="machines" title="机器列表" :showSelect="showSelect">
@@ -58,10 +58,13 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import PGTable from "@/components/PGTable.vue";
+import PGTree from "@/components/PGTree.vue";
 
 const machines = ref([])
 const showSelect = ref(true)
 
+const department = ref<any[]>([])
+
 </script>
 
 <style lang="scss" scoped>
-- 
Gitee