diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index cb1897bb9f01ca6929e586aaf1bb5b1d4fdeac01..fba25dac13c929a562af8e51820c21a3fa528162 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -58,7 +58,7 @@ let sidebarRoutes = [
             }
           },
           {
-            path: '/cluster/machine/:detail',
+            path: '/cluster/machine/:uuid',
             name: 'MacDetail',
             component: () => import('../views/Cluster/MachineDetail/Index.vue'),
             meta: {
diff --git a/frontend/src/views/Batch/Detail.vue b/frontend/src/views/Batch/Detail.vue
index 6fa5a73843d3c0c13aadfcf9e7e1dfe356e5dd3f..f5337887f49fcced66da8d2ffe674cd0428c792b 100644
--- a/frontend/src/views/Batch/Detail.vue
+++ b/frontend/src/views/Batch/Detail.vue
@@ -46,7 +46,7 @@
 
 <script lang="ts" setup>
 import { ref, onMounted } from "vue";
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { ElMessage } from 'element-plus';
 
 import PGTable from "@/components/PGTable.vue";
diff --git a/frontend/src/views/Cluster/MachineDetail/Base.vue b/frontend/src/views/Cluster/MachineDetail/Base.vue
index 07b3878f86e346440fc39ce1ba9b59aaaa5cd81e..dfffb1e92258712ce56f7e5217452206d5142e39 100644
--- a/frontend/src/views/Cluster/MachineDetail/Base.vue
+++ b/frontend/src/views/Cluster/MachineDetail/Base.vue
@@ -1,25 +1,52 @@
 <template>
     <div class="content">
         <el-descriptions :column="2" border>
-            <el-descriptions-item label="机器IP"> IP </el-descriptions-item>
-            <el-descriptions-item label="所属部门"> dept </el-descriptions-item>
-            <el-descriptions-item label="监控状态"> status </el-descriptions-item>
-            <el-descriptions-item label="系统版本"> macPlatform </el-descriptions-item>
-            <el-descriptions-item label="架构"> mackernel </el-descriptions-item>
-            <el-descriptions-item label="cpu"> macCPU </el-descriptions-item>
-            <el-descriptions-item label="内存"> macMEM </el-descriptions-item>
-            <el-descriptions-item label="内核版本"> osVersion </el-descriptions-item>
-            <!-- <el-descriptions-item :label="item.device" :span="2" v-for="item in diskData" :key="item.$index">
+            <el-descriptions-item label="机器IP"> {{ machineInfo.ip }} </el-descriptions-item>
+            <el-descriptions-item label="所属部门"> {{ machineInfo.department }} </el-descriptions-item>
+            <el-descriptions-item label="监控状态"> {{ machineInfo.state === 1 ? '在线' : machineInfo.state === 2 ? '离线' :
+                'unknown' }} </el-descriptions-item>
+            <el-descriptions-item label="系统版本"> {{ machineInfo.platform + ' ' + machineInfo.platform_version }} </el-descriptions-item>
+            <el-descriptions-item label="架构"> {{ machineInfo.kernel_arch }} </el-descriptions-item>
+            <el-descriptions-item label="cpu"> {{ machineInfo.cpu_num + '核 ' + machineInfo.model_name }} </el-descriptions-item>
+            <el-descriptions-item label="内存"> {{ (machineInfo.memory_total / 1024 / 1024).toFixed(2) + 'G' }} </el-descriptions-item>
+            <el-descriptions-item label="内核版本"> {{ machineInfo.kernel_version }} </el-descriptions-item>
+            <el-descriptions-item :label="item.device" :span="2" v-for="item in machineInfo.disk_usage" :key="item.$index">
                 <span class="diskMount">{{ "挂载点：" + item.path + "(" + item.total + ")" }}</span>
                 <p class="progress">
                     <span :style="{ width: item.used_percent }">{{ item.used_percent }}</span>
                 </p>
-            </el-descriptions-item> -->
+            </el-descriptions-item>
         </el-descriptions>
     </div>
 </template>
 
 <script lang="ts" setup>
+import { ref, onMounted } from "vue";
+import { ElMessage } from 'element-plus';
+import { useRoute } from 'vue-router'
+
+import { getMachineOverview } from "@/request/cluster";
+import { RespCodeOK } from "@/request/request";
+
+const route = useRoute()
+
+const machineID = ref(route.params.uuid)
+
+const machineInfo = ref<any>({})
+
+onMounted(() => {
+    getMachineOverview({
+        uuid: machineID.value
+    }).then((resp: any) => {
+        if (resp.code === RespCodeOK) {
+            machineInfo.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>