diff --git a/frontend/src/components/PGTree.vue b/frontend/src/components/PGTree.vue
new file mode 100644
index 0000000000000000000000000000000000000000..64c2861d5e572f20fe5c2f5dc3369f1b07727518
--- /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 0a65591a3552203cea307643dca6ec10cd16aa6a..9ffaf374ab5d5717bf65ab3dc528dc5f47b991f6 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>