diff --git a/frontend/src/components/PGTree.vue b/frontend/src/components/PGTree.vue
index 44baee485e2f662b07866c789c24ed5d6f285089..51e290dc254431da557294c397485b44f2e976af 100644
--- a/frontend/src/components/PGTree.vue
+++ b/frontend/src/components/PGTree.vue
@@ -1,8 +1,10 @@
 <template>
-    <div class="header">
-        <slot name="header"></slot>
+    <div>
+        <div class="header">
+            <slot name="header"></slot>
+        </div>
+        <el-tree :data="data" :props="defaultProps"></el-tree>
     </div>
-    <el-tree :data="data" :props="defaultProps"></el-tree>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/views/Cluster/components/ChangeDepart.vue b/frontend/src/views/Cluster/components/ChangeDepart.vue
index 33928cbd17017058ce7a76faf91f283e74a85652..833c8c2e6554085fc59b64043a38908775c9d89f 100644
--- a/frontend/src/views/Cluster/components/ChangeDepart.vue
+++ b/frontend/src/views/Cluster/components/ChangeDepart.vue
@@ -1,22 +1,24 @@
 <template>
-    <div>
-        <div>
-            <span>已选机器列表</span>
-        </div>
-        <div>
-            <el-table>
-                <el-table-column prop="ip" label="ip">
-                </el-table-column>
-                <el-table-column prop="department" label="原部门">
-                </el-table-column>
-            </el-table>
-            <PGTree :data="department">
+    <div class="container">
+        <div class="selector">
+            <div style="width: 50%;">
+                <div>
+                    <span>已选机器列表</span>
+                </div>
+                <el-table>
+                    <el-table-column prop="ip" label="ip">
+                    </el-table-column>
+                    <el-table-column prop="department" label="原部门">
+                    </el-table-column>
+                </el-table>
+            </div>
+            <PGTree class="tree" :data="department">
                 <template v-slot:header>
                     <p>部门</p>
                 </template>
             </PGTree>
         </div>
-        <div>
+        <div class="footer">
             <el-button>取 消</el-button>
             <el-button type="primary">确 定</el-button>
         </div>
@@ -25,7 +27,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
+import { ElMessage } from 'element-plus';
+
+import { getSubDepartment } from "@/request/cluster";
+import { RespCodeOK } from "@/request/request";
 
 import PGTree from "@/components/PGTree.vue";
 
@@ -33,6 +39,41 @@ import PGTree from "@/components/PGTree.vue";
 const department = ref([{}])
 const departmentID = ref(1)
 
+onMounted(() => {
+    getSubDepartment({
+        DepartID: departmentID.value,
+    }).then((resp: any) => {
+        if (resp.code === RespCodeOK) {
+            department.value = [resp.data]
+        } else {
+            ElMessage.error("failed to get department info: " + resp.msg)
+        }
+    }).catch((err: any) => {
+        ElMessage.error("failed to get department info:" + err.msg)
+    })
+})
+
 </script>
 
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+.container {
+    display: flex;
+    flex-direction: column;
+
+    .selector {
+        height: 500px;
+        width: 100%;
+        display: flex;
+    }
+
+    .tree {
+        width: 100%;
+        margin-left: 5px;
+    }
+
+    .footer {
+        display: flex;
+        justify-content: end;
+    }
+}
+</style>
\ No newline at end of file