diff --git a/node_modules/.vite/deps/_metadata.json b/node_modules/.vite/deps/_metadata.json
index d617eac..18ee4f0 100644
--- a/node_modules/.vite/deps/_metadata.json
+++ b/node_modules/.vite/deps/_metadata.json
@@ -1,49 +1,49 @@
 {
-  "hash": "25a37344",
-  "configHash": "ec38f6fa",
+  "hash": "b6c330c5",
+  "configHash": "e57f8d4c",
   "lockfileHash": "74076ca5",
-  "browserHash": "8bfb7e71",
+  "browserHash": "ed3d8378",
   "optimized": {
     "@element-plus/icons-vue": {
       "src": "../../@element-plus/icons-vue/dist/index.js",
       "file": "@element-plus_icons-vue.js",
-      "fileHash": "53709748",
+      "fileHash": "de153aba",
       "needsInterop": false
     },
     "axios": {
       "src": "../../axios/index.js",
       "file": "axios.js",
-      "fileHash": "8bc11b32",
+      "fileHash": "c19fdb3e",
       "needsInterop": false
     },
     "echarts": {
       "src": "../../echarts/index.js",
       "file": "echarts.js",
-      "fileHash": "bf5b1683",
+      "fileHash": "a8d7111b",
       "needsInterop": false
     },
     "element-plus": {
       "src": "../../element-plus/es/index.mjs",
       "file": "element-plus.js",
-      "fileHash": "6f7bcfbf",
+      "fileHash": "10cb780f",
       "needsInterop": false
     },
     "pinia": {
       "src": "../../pinia/dist/pinia.js",
       "file": "pinia.js",
-      "fileHash": "c89feaca",
+      "fileHash": "82d3c424",
       "needsInterop": false
     },
     "vue-router": {
       "src": "../../vue-router/dist/vue-router.js",
       "file": "vue-router.js",
-      "fileHash": "a9a2c9fa",
+      "fileHash": "1b68fa4e",
       "needsInterop": false
     },
     "vue": {
       "src": "../../vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "53d5f754",
+      "fileHash": "7e296374",
       "needsInterop": false
     }
   },
diff --git a/src/views/asset/ledger/CategoryView.vue b/src/views/asset/ledger/CategoryView.vue
index da476c9..29e056c 100644
--- a/src/views/asset/ledger/CategoryView.vue
+++ b/src/views/asset/ledger/CategoryView.vue
@@ -2,13 +2,287 @@
   <div class="page-container">
     <el-card>
       <template #header>
-        <span>分类管理视图</span>
+        <div class="card-header">
+          <span>设备分类与状态管理</span>
+        </div>
       </template>
-      <el-empty description="分类管理视图 - 功能开发中" />
+
+      <el-tabs v-model="activeTab">
+        <!-- ============ 设备分类管理视图 ============ -->
+        <el-tab-pane label="分类管理视图" name="category">
+          <div class="category-layout">
+            <div class="category-left">
+              <el-radio-group v-model="dimension" size="small" @change="buildTree">
+                <el-radio-button value="Type">设备类型</el-radio-button>
+                <el-radio-button value="Department">使用部门</el-radio-button>
+                <el-radio-button value="Location">存放位置</el-radio-button>
+              </el-radio-group>
+              <el-input v-model="treeFilter" placeholder="输入关键字过滤" clearable class="tree-filter" />
+              <el-tree ref="treeRef" :data="treeData" :props="{ label: 'label', children: 'children' }"
+                node-key="key" highlight-current default-expand-all :filter-node-method="filterNode"
+                @node-click="onNodeClick">
+                <template #default="{ data }">
+                  <span class="tree-node">
+                    <span>{{ data.label }}</span>
+                    <el-tag size="small" type="info" round>{{ data.count }}</el-tag>
+                  </span>
+                </template>
+              </el-tree>
+            </div>
+
+            <div class="category-right">
+              <div class="filter-tip">
+                <el-tag v-if="selectedNode" closable @close="clearSelection">
+                  {{ dimensionLabel }}：{{ selectedNode.label }}（{{ filteredList.length }} 台）
+                </el-tag>
+                <span v-else class="tip-text">点击左侧分类节点进行筛选</span>
+              </div>
+              <el-table :data="filteredList" border stripe v-loading="loading" max-height="560">
+                <el-table-column prop="Code" label="设备编号" width="130" />
+                <el-table-column prop="Name" label="设备名称" min-width="140" show-overflow-tooltip />
+                <el-table-column prop="Type" label="设备类型" width="110" />
+                <el-table-column prop="Department" label="使用部门" width="110" />
+                <el-table-column prop="Location" label="存放位置" min-width="130" show-overflow-tooltip />
+                <el-table-column label="状态" width="95">
+                  <template #default="{ row }">
+                    <el-tag :type="statusTag(row.Status)">{{ statusLabel(row.Status) }}</el-tag>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </div>
+        </el-tab-pane>
+
+        <!-- ============ 设备状态管理视图 ============ -->
+        <el-tab-pane label="状态管理视图" name="status">
+          <el-row :gutter="12" class="status-cards">
+            <el-col :span="8" v-for="item in statusOptions" :key="item.value" class="status-card-col">
+              <div class="status-card" :class="{ active: statusFilter === item.value }" @click="toggleStatus(item.value)">
+                <div class="status-count">{{ statusCounts[item.value] || 0 }}</div>
+                <el-tag :type="statusTag(item.value)">{{ item.label }}</el-tag>
+              </div>
+            </el-col>
+          </el-row>
+
+          <el-table :data="statusFilteredList" border stripe v-loading="loading" class="status-table">
+            <el-table-column prop="Code" label="设备编号" width="130" />
+            <el-table-column prop="Name" label="设备名称" min-width="140" show-overflow-tooltip />
+            <el-table-column prop="Department" label="使用部门" width="110" />
+            <el-table-column prop="Location" label="存放位置" min-width="130" show-overflow-tooltip />
+            <el-table-column label="当前状态" width="100">
+              <template #default="{ row }">
+                <el-tag :type="statusTag(row.Status)">{{ statusLabel(row.Status) }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="更新时间" width="170">
+              <template #default="{ row }">{{ fmtDateTime(row.UpdateTime || row.CreateTime) }}</template>
+            </el-table-column>
+            <el-table-column label="操作" width="160" fixed="right">
+              <template #default="{ row }">
+                <el-button link type="primary" size="small" @click="openRecords(row)">变更记录</el-button>
+                <el-button link type="warning" size="small" @click="openStatus(row)">变更状态</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
     </el-card>
+
+    <!-- 状态变更对话框 -->
+    <el-dialog v-model="statusVisible" title="变更设备状态" width="460px">
+      <el-form label-width="90px">
+        <el-form-item label="当前状态">
+          <el-tag :type="statusTag(currentRow?.Status)">{{ statusLabel(currentRow?.Status) }}</el-tag>
+        </el-form-item>
+        <el-form-item label="目标状态" required>
+          <el-select v-model="statusForm.Status" style="width: 100%">
+            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"
+              :disabled="item.value === currentRow?.Status" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="操作人">
+          <el-input v-model="statusForm.Operator" />
+        </el-form-item>
+        <el-form-item label="变更原因">
+          <el-input v-model="statusForm.Remark" type="textarea" :rows="2" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="statusVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="handleStatusChange">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 变更记录抽屉 -->
+    <el-drawer v-model="recordsVisible" :title="`状态变更记录 - ${currentRow?.Name || ''}`" size="45%">
+      <el-table :data="statusRecords" border stripe v-loading="recordLoading">
+        <el-table-column label="变更" min-width="180">
+          <template #default="{ row }">
+            <el-tag :type="statusTag(row.FromStatus)" size="small">{{ statusLabel(row.FromStatus) }}</el-tag>
+            <el-icon style="margin: 0 6px"><Right /></el-icon>
+            <el-tag :type="statusTag(row.ToStatus)" size="small">{{ statusLabel(row.ToStatus) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="时间" width="165">
+          <template #default="{ row }">{{ fmtDateTime(row.ChangeTime) }}</template>
+        </el-table-column>
+        <el-table-column prop="Operator" label="操作人" width="90" />
+        <el-table-column prop="Remark" label="原因" min-width="120" show-overflow-tooltip />
+      </el-table>
+    </el-drawer>
   </div>
 </template>
 
 <script setup>
-// TODO: 实现分类管理视图功能
+import { ref, reactive, computed, watch, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import {
+  getAllEquipment, changeEquipmentStatus, getStatusRecords,
+  statusOptions, statusLabel, statusTag
+} from '@/api/equipment'
+import { fmtDateTime } from '@/utils/format'
+
+const loading = ref(false)
+const activeTab = ref('category')
+const allEquipments = ref([])
+
+async function loadAll() {
+  loading.value = true
+  try {
+    allEquipments.value = await getAllEquipment()
+    buildTree()
+  } finally {
+    loading.value = false
+  }
+}
+
+// ===== 分类管理视图 =====
+const DIMENSION_LABELS = { Type: '设备类型', Department: '使用部门', Location: '存放位置' }
+const dimension = ref('Type')
+const dimensionLabel = computed(() => DIMENSION_LABELS[dimension.value])
+const treeRef = ref()
+const treeFilter = ref('')
+const treeData = ref([])
+const selectedNode = ref(null)
+
+watch(treeFilter, (val) => treeRef.value?.filter(val))
+
+function buildTree() {
+  selectedNode.value = null
+  const groups = {}
+  for (const item of allEquipments.value) {
+    const key = item[dimension.value] || '未分类'
+    groups[key] = (groups[key] || 0) + 1
+  }
+  treeData.value = [
+    { key: '__all__', label: '全部设备', count: allEquipments.value.length, children: [] },
+    ...Object.entries(groups)
+      .sort((a, b) => b[1] - a[1])
+      .map(([label, count], idx) => ({ key: `node-${idx}`, label, count, children: [] }))
+  ]
+}
+
+function filterNode(value, data) {
+  if (!value) return true
+  return data.label.includes(value)
+}
+
+function onNodeClick(data) {
+  selectedNode.value = data.key === '__all__' ? null : data
+}
+function clearSelection() { selectedNode.value = null }
+
+const filteredList = computed(() => {
+  if (!selectedNode.value) return allEquipments.value
+  return allEquipments.value.filter(item => (item[dimension.value] || '未分类') === selectedNode.value.label)
+})
+
+// ===== 状态管理视图 =====
+const statusFilter = ref(null)
+const statusCounts = computed(() => {
+  const counts = {}
+  for (const item of allEquipments.value) {
+    counts[item.Status] = (counts[item.Status] || 0) + 1
+  }
+  return counts
+})
+const statusFilteredList = computed(() =>
+  statusFilter.value == null ? allEquipments.value : allEquipments.value.filter(e => e.Status === statusFilter.value)
+)
+function toggleStatus(value) {
+  statusFilter.value = statusFilter.value === value ? null : value
+}
+
+// ===== 状态变更 =====
+const statusVisible = ref(false)
+const saving = ref(false)
+const currentRow = ref(null)
+const statusForm = reactive({ Status: null, Operator: '', Remark: '' })
+
+function openStatus(row) {
+  currentRow.value = row
+  statusForm.Status = null
+  statusForm.Operator = ''
+  statusForm.Remark = ''
+  statusVisible.value = true
+}
+
+async function handleStatusChange() {
+  if (!statusForm.Status) {
+    ElMessage.warning('请选择目标状态')
+    return
+  }
+  saving.value = true
+  try {
+    await changeEquipmentStatus(currentRow.value.Id, {
+      Status: statusForm.Status,
+      Operator: statusForm.Operator,
+      Remark: statusForm.Remark
+    })
+    ElMessage.success('状态变更成功')
+    statusVisible.value = false
+    loadAll()
+  } finally {
+    saving.value = false
+  }
+}
+
+// ===== 变更记录 =====
+const recordsVisible = ref(false)
+const recordLoading = ref(false)
+const statusRecords = ref([])
+
+async function openRecords(row) {
+  currentRow.value = row
+  recordsVisible.value = true
+  recordLoading.value = true
+  try {
+    statusRecords.value = await getStatusRecords(row.Id)
+  } finally {
+    recordLoading.value = false
+  }
+}
+
+onMounted(loadAll)
 </script>
+
+<style scoped>
+.card-header { display: flex; justify-content: space-between; align-items: center; }
+.category-layout { display: flex; gap: 16px; }
+.category-left { width: 280px; flex-shrink: 0; border-right: 1px solid var(--el-border-color-light); padding-right: 16px; }
+.category-right { flex: 1; min-width: 0; }
+.tree-filter { margin: 12px 0; }
+.tree-node { display: flex; align-items: center; gap: 8px; flex: 1; }
+.filter-tip { margin-bottom: 12px; }
+.tip-text { color: var(--el-text-color-secondary); font-size: 13px; }
+.status-cards { margin-bottom: 16px; }
+.status-card-col { margin-bottom: 10px; }
+.status-card {
+  border: 1px solid var(--el-border-color-light); border-radius: 6px; padding: 12px;
+  text-align: center; cursor: pointer; transition: all 0.2s;
+}
+.status-card:hover { border-color: var(--el-color-primary); }
+.status-card.active { border-color: var(--el-color-primary); background: var(--el-color-primary-light-9); }
+.status-count { font-size: 22px; font-weight: 600; margin-bottom: 6px; }
+.status-table { margin-top: 4px; }
+</style>
diff --git a/src/views/asset/ledger/ComplianceView.vue b/src/views/asset/ledger/ComplianceView.vue
index cd1b346..b2bba92 100644
--- a/src/views/asset/ledger/ComplianceView.vue
+++ b/src/views/asset/ledger/ComplianceView.vue
@@ -2,13 +2,158 @@
   <div class="page-container">
     <el-card>
       <template #header>
-        <span>合规管理视图</span>
+        <div class="card-header">
+          <span>设备合规管理</span>
+          <div class="header-right">
+            <el-input v-model="keyword" placeholder="设备编号/名称" clearable style="width: 200px" />
+            <el-switch v-model="onlyOverdue" active-text="只看超期" />
+          </div>
+        </div>
       </template>
-      <el-empty description="合规管理视图 - 功能开发中" />
+
+      <!-- 合规概览卡片 -->
+      <el-row :gutter="16" class="summary-row">
+        <el-col :span="6">
+          <el-card shadow="never" class="summary-card">
+            <div class="summary-count">{{ allEquipments.length }}</div>
+            <div class="summary-label">设备总数</div>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card shadow="never" class="summary-card" :class="{ danger: overdueCounts.calibration > 0 }">
+            <div class="summary-count">{{ overdueCounts.calibration }}</div>
+            <div class="summary-label">校准超期</div>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card shadow="never" class="summary-card" :class="{ danger: overdueCounts.inspection > 0 }">
+            <div class="summary-count">{{ overdueCounts.inspection }}</div>
+            <div class="summary-label">检定超期</div>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card shadow="never" class="summary-card" :class="{ danger: overdueCounts.maintenance > 0 }">
+            <div class="summary-count">{{ overdueCounts.maintenance }}</div>
+            <div class="summary-label">保养超期</div>
+          </el-card>
+        </el-col>
+      </el-row>
+
+      <!-- 合规明细表 -->
+      <el-table :data="filteredList" border stripe v-loading="loading">
+        <el-table-column prop="Code" label="设备编号" width="130" />
+        <el-table-column prop="Name" label="设备名称" min-width="140" show-overflow-tooltip />
+        <el-table-column label="校准状态" width="95">
+          <template #default="{ row }">
+            <el-tag :type="calibrationOverdue(row) ? 'danger' : 'success'">
+              {{ calibrationOverdue(row) ? '超期' : '正常' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="校准日期" width="110">
+          <template #default="{ row }">{{ fmtDate(row.LastCalibrationDate) || '-' }}</template>
+        </el-table-column>
+        <el-table-column label="校准到期" width="110">
+          <template #default="{ row }">
+            <span :class="{ 'overdue-text': isOverdue(row.NextCalibrationDate) }">
+              {{ fmtDate(row.NextCalibrationDate) || '-' }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="检定日期" width="110">
+          <template #default="{ row }">{{ fmtDate(row.InspectionDate) || '-' }}</template>
+        </el-table-column>
+        <el-table-column label="检定到期" width="110">
+          <template #default="{ row }">
+            <span :class="{ 'overdue-text': isOverdue(row.NextInspectionDate) }">
+              {{ fmtDate(row.NextInspectionDate) || '-' }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="保养状态" width="95">
+          <template #default="{ row }">
+            <el-tag :type="maintenanceOverdue(row) ? 'danger' : 'success'">
+              {{ maintenanceOverdue(row) ? '超期' : '正常' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="保养日期" width="110">
+          <template #default="{ row }">{{ fmtDate(row.LastMaintenanceDate) || '-' }}</template>
+        </el-table-column>
+        <el-table-column label="保养周期到期" width="120">
+          <template #default="{ row }">
+            <span :class="{ 'overdue-text': isOverdue(row.NextMaintenanceDate) }">
+              {{ fmtDate(row.NextMaintenanceDate) || '-' }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="保修到期" width="110">
+          <template #default="{ row }">
+            <span :class="{ 'overdue-text': isOverdue(row.WarrantyExpireDate) }">
+              {{ fmtDate(row.WarrantyExpireDate) || '-' }}
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
     </el-card>
   </div>
 </template>
 
 <script setup>
-// TODO: 实现合规管理视图功能
+import { ref, computed, onMounted } from 'vue'
+import { getAllEquipment } from '@/api/equipment'
+import { fmtDate, isOverdue } from '@/utils/format'
+
+const loading = ref(false)
+const allEquipments = ref([])
+const keyword = ref('')
+const onlyOverdue = ref(false)
+
+async function loadAll() {
+  loading.value = true
+  try {
+    allEquipments.value = await getAllEquipment()
+  } finally {
+    loading.value = false
+  }
+}
+
+// 合规判定：设置了到期日期且早于今天即为超期
+const calibrationOverdue = (row) => isOverdue(row.NextCalibrationDate)
+const maintenanceOverdue = (row) => isOverdue(row.NextMaintenanceDate)
+const anyOverdue = (row) =>
+  calibrationOverdue(row) || maintenanceOverdue(row) || isOverdue(row.NextInspectionDate) || isOverdue(row.WarrantyExpireDate)
+
+const overdueCounts = computed(() => ({
+  calibration: allEquipments.value.filter(calibrationOverdue).length,
+  inspection: allEquipments.value.filter(row => isOverdue(row.NextInspectionDate)).length,
+  maintenance: allEquipments.value.filter(maintenanceOverdue).length
+}))
+
+const filteredList = computed(() => {
+  let list = allEquipments.value
+  if (onlyOverdue.value) {
+    list = list.filter(anyOverdue)
+  }
+  if (keyword.value) {
+    const kw = keyword.value.toLowerCase()
+    list = list.filter(e =>
+      (e.Code || '').toLowerCase().includes(kw) || (e.Name || '').toLowerCase().includes(kw)
+    )
+  }
+  return list
+})
+
+onMounted(loadAll)
 </script>
+
+<style scoped>
+.card-header { display: flex; justify-content: space-between; align-items: center; }
+.header-right { display: flex; align-items: center; gap: 16px; }
+.summary-row { margin-bottom: 16px; }
+.summary-card { text-align: center; }
+.summary-card.danger .summary-count { color: var(--el-color-danger); }
+.summary-count { font-size: 26px; font-weight: 600; }
+.summary-label { color: var(--el-text-color-secondary); margin-top: 4px; font-size: 13px; }
+.overdue-text { color: var(--el-color-danger); font-weight: 600; }
+</style>
diff --git a/src/views/asset/ledger/LifecycleView.vue b/src/views/asset/ledger/LifecycleView.vue
index 362fdef..357c446 100644
--- a/src/views/asset/ledger/LifecycleView.vue
+++ b/src/views/asset/ledger/LifecycleView.vue
@@ -2,13 +2,153 @@
   <div class="page-container">
     <el-card>
       <template #header>
-        <span>全生命周期视图</span>
+        <div class="card-header">
+          <div class="header-left">
+            <span class="title">资产全生命周期</span>
+            <el-select v-model="equipmentId" filterable placeholder="请选择设备" style="width: 300px; margin-left: 16px"
+              @change="loadData">
+              <el-option v-for="item in equipmentOptions" :key="item.Id"
+                :label="`${item.Code} - ${item.Name}`" :value="item.Id" />
+            </el-select>
+          </div>
+          <el-tag v-if="equipment" :type="statusTag(equipment.Status)" size="large">
+            {{ statusLabel(equipment.Status) }}
+          </el-tag>
+        </div>
       </template>
-      <el-empty description="全生命周期视图 - 功能开发中" />
+
+      <el-empty v-if="!equipment" description="请选择设备查看生命周期" />
+
+      <el-row v-else :gutter="20">
+        <!-- 左侧：设备卡片 -->
+        <el-col :span="8">
+          <el-card shadow="never" class="device-card">
+            <div class="device-name">{{ equipment.Name }}</div>
+            <div class="device-code">{{ equipment.Code }}</div>
+            <el-descriptions :column="1" size="small" class="device-desc">
+              <el-descriptions-item label="设备类型">{{ equipment.Type || '-' }}</el-descriptions-item>
+              <el-descriptions-item label="使用部门">{{ equipment.Department || '-' }}</el-descriptions-item>
+              <el-descriptions-item label="存放位置">{{ equipment.Location || '-' }}</el-descriptions-item>
+              <el-descriptions-item label="责任人">{{ equipment.ResponsiblePerson || '-' }}</el-descriptions-item>
+              <el-descriptions-item label="供应商">{{ equipment.Supplier || '-' }}</el-descriptions-item>
+              <el-descriptions-item label="使用年限">
+                {{ equipment.ServiceLifeYears ? `${equipment.ServiceLifeYears} 年` : '-' }}
+              </el-descriptions-item>
+            </el-descriptions>
+          </el-card>
+        </el-col>
+
+        <!-- 右侧：生命周期时间线 -->
+        <el-col :span="16">
+          <el-tabs v-model="activeTab">
+            <el-tab-pane label="生命周期阶段" name="lifecycle">
+              <el-timeline>
+                <el-timeline-item v-for="stage in lifecycleStages" :key="stage.name"
+                  :type="stage.reached ? 'primary' : 'info'" :hollow="!stage.reached" size="large">
+                  <div class="stage-line">
+                    <span class="stage-name" :class="{ unreached: !stage.reached }">{{ stage.name }}</span>
+                    <el-tag v-if="stage.reached" size="small">{{ fmtDate(stage.date) }}</el-tag>
+                    <el-tag v-else size="small" type="info">未发生</el-tag>
+                    <span v-if="stage.extra" class="stage-extra">{{ stage.extra }}</span>
+                  </div>
+                </el-timeline-item>
+              </el-timeline>
+            </el-tab-pane>
+
+            <el-tab-pane label="状态流转记录" name="records">
+              <el-empty v-if="statusRecords.length === 0" description="暂无状态变更记录" :image-size="80" />
+              <el-timeline v-else>
+                <el-timeline-item v-for="record in statusRecords" :key="record.Id" type="primary">
+                  <div class="stage-line">
+                    <el-tag :type="statusTag(record.FromStatus)" size="small">{{ statusLabel(record.FromStatus) }}</el-tag>
+                    <el-icon style="margin: 0 8px"><Right /></el-icon>
+                    <el-tag :type="statusTag(record.ToStatus)" size="small">{{ statusLabel(record.ToStatus) }}</el-tag>
+                  </div>
+                  <div class="record-meta">
+                    {{ fmtDateTime(record.ChangeTime) }}
+                    <span v-if="record.Operator"> · 操作人：{{ record.Operator }}</span>
+                  </div>
+                  <div v-if="record.Remark" class="record-remark">{{ record.Remark }}</div>
+                </el-timeline-item>
+              </el-timeline>
+            </el-tab-pane>
+          </el-tabs>
+        </el-col>
+      </el-row>
     </el-card>
   </div>
 </template>
 
 <script setup>
-// TODO: 实现全生命周期视图功能
+import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import {
+  getAllEquipment, getEquipmentDetail, getStatusRecords,
+  statusLabel, statusTag
+} from '@/api/equipment'
+import { fmtDate, fmtDateTime } from '@/utils/format'
+
+const route = useRoute()
+
+const equipmentId = ref(null)
+const equipment = ref(null)
+const equipmentOptions = ref([])
+const activeTab = ref('lifecycle')
+const statusRecords = ref([])
+
+async function loadOptions() {
+  equipmentOptions.value = await getAllEquipment()
+  // 雪花 Id 以字符串传输（防止 JS 精度丢失），这里不做 Number 转换
+  const queryId = route.query.id || null
+  if (queryId && equipmentOptions.value.some(e => e.Id === queryId)) {
+    equipmentId.value = queryId
+  } else if (equipmentOptions.value.length > 0) {
+    equipmentId.value = equipmentOptions.value[0].Id
+  }
+  if (equipmentId.value) await loadData(equipmentId.value)
+}
+
+async function loadData(id) {
+  if (!id) return
+  equipment.value = await getEquipmentDetail(id)
+  statusRecords.value = await getStatusRecords(id)
+}
+
+// 生命周期阶段：采购 → 验收 → 启用 → 保养 → 校准 → 检定 → 报废
+// 已发生的阶段按时间正序排列在前，未发生的阶段置灰在后
+const lifecycleStages = computed(() => {
+  if (!equipment.value) return []
+  const e = equipment.value
+  const defs = [
+    { name: '采购', date: e.PurchaseDate, extra: e.Supplier ? `供应商：${e.Supplier}` : '' },
+    { name: '验收', date: e.AcceptanceDate },
+    { name: '启用', date: e.EnableDate },
+    { name: '保养', date: e.LastMaintenanceDate, extra: e.NextMaintenanceDate ? `下次：${fmtDate(e.NextMaintenanceDate)}` : '' },
+    { name: '校准', date: e.LastCalibrationDate, extra: e.NextCalibrationDate ? `下次：${fmtDate(e.NextCalibrationDate)}` : '' },
+    { name: '检定', date: e.InspectionDate, extra: e.NextInspectionDate ? `下次：${fmtDate(e.NextInspectionDate)}` : '' },
+    { name: '报废', date: e.ScrapDate }
+  ]
+  const reached = defs.filter(s => s.date).sort((a, b) => new Date(a.date) - new Date(b.date))
+    .map(s => ({ ...s, reached: true }))
+  const unreached = defs.filter(s => !s.date).map(s => ({ ...s, reached: false }))
+  return [...reached, ...unreached]
+})
+
+onMounted(loadOptions)
 </script>
+
+<style scoped>
+.card-header { display: flex; justify-content: space-between; align-items: center; }
+.header-left { display: flex; align-items: center; }
+.title { font-size: 16px; font-weight: 600; }
+.device-card { position: sticky; top: 0; }
+.device-name { font-size: 18px; font-weight: 600; }
+.device-code { color: var(--el-text-color-secondary); margin: 4px 0 12px; }
+.device-desc { margin-top: 8px; }
+.stage-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.stage-name { font-weight: 600; }
+.stage-name.unreached { color: var(--el-text-color-secondary); font-weight: normal; }
+.stage-extra { color: var(--el-text-color-secondary); font-size: 12px; }
+.record-meta { color: var(--el-text-color-secondary); font-size: 12px; margin-top: 4px; }
+.record-remark { color: var(--el-text-color-regular); font-size: 13px; margin-top: 2px; }
+</style>
diff --git a/src/views/asset/ledger/Statistics.vue b/src/views/asset/ledger/Statistics.vue
index e0c8916..687427c 100644
--- a/src/views/asset/ledger/Statistics.vue
+++ b/src/views/asset/ledger/Statistics.vue
@@ -1,14 +1,206 @@
 <template>
   <div class="page-container">
-    <el-card>
+    <el-card v-loading="loading">
       <template #header>
-        <span>分类统计</span>
+        <div class="card-header">
+          <span>资产分类统计</span>
+          <el-button @click="loadAll">
+            <el-icon><Refresh /></el-icon> 刷新
+          </el-button>
+        </div>
       </template>
-      <el-empty description="分类统计 - 功能开发中" />
+
+      <!-- 概览指标 -->
+      <el-row :gutter="16" class="summary-row">
+        <el-col :span="6">
+          <el-card shadow="never" class="summary-card">
+            <div class="summary-count">{{ allEquipments.length }}</div>
+            <div class="summary-label">设备总数（台）</div>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card shadow="never" class="summary-card">
+            <div class="summary-count">{{ totalValue }}</div>
+            <div class="summary-label">资产总值（元）</div>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card shadow="never" class="summary-card">
+            <div class="summary-count">{{ inUseCount }}</div>
+            <div class="summary-label">使用中（台）</div>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card shadow="never" class="summary-card">
+            <div class="summary-count">{{ avgYears }}</div>
+            <div class="summary-label">平均使用年限（年）</div>
+          </el-card>
+        </el-col>
+      </el-row>
+
+      <!-- 图表区 -->
+      <el-row :gutter="16">
+        <el-col :span="12">
+          <el-card shadow="never" class="chart-card">
+            <template #header><span>按状态统计</span></template>
+            <div ref="statusChartRef" class="chart"></div>
+          </el-card>
+        </el-col>
+        <el-col :span="12">
+          <el-card shadow="never" class="chart-card">
+            <template #header><span>按设备类型统计</span></template>
+            <div ref="typeChartRef" class="chart"></div>
+          </el-card>
+        </el-col>
+      </el-row>
+      <el-row :gutter="16" class="mt-16">
+        <el-col :span="12">
+          <el-card shadow="never" class="chart-card">
+            <template #header><span>按使用部门统计</span></template>
+            <div ref="departmentChartRef" class="chart"></div>
+          </el-card>
+        </el-col>
+        <el-col :span="12">
+          <el-card shadow="never" class="chart-card">
+            <template #header><span>按使用年限统计</span></template>
+            <div ref="yearsChartRef" class="chart"></div>
+          </el-card>
+        </el-col>
+      </el-row>
     </el-card>
   </div>
 </template>
 
 <script setup>
-// TODO: 实现分类统计功能
+import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getAllEquipment, statusOptions } from '@/api/equipment'
+
+const loading = ref(false)
+const allEquipments = ref([])
+
+const statusChartRef = ref()
+const typeChartRef = ref()
+const departmentChartRef = ref()
+const yearsChartRef = ref()
+let charts = []
+
+// ===== 概览指标 =====
+const totalValue = computed(() =>
+  allEquipments.value.reduce((sum, e) => sum + (e.PurchasePrice || 0), 0).toLocaleString()
+)
+const inUseCount = computed(() => allEquipments.value.filter(e => e.Status === 2).length)
+const avgYears = computed(() => {
+  const dated = allEquipments.value.filter(e => e.PurchaseDate)
+  if (dated.length === 0) return '-'
+  const now = Date.now()
+  const years = dated.reduce((sum, e) => sum + (now - new Date(e.PurchaseDate).getTime()) / (365 * 24 * 3600 * 1000), 0)
+  return (years / dated.length).toFixed(1)
+})
+
+// ===== 数据加载与图表渲染 =====
+async function loadAll() {
+  loading.value = true
+  try {
+    allEquipments.value = await getAllEquipment()
+    await nextTick()
+    renderCharts()
+  } finally {
+    loading.value = false
+  }
+}
+
+function countBy(field) {
+  const groups = {}
+  for (const item of allEquipments.value) {
+    const key = item[field] || '未分类'
+    groups[key] = (groups[key] || 0) + 1
+  }
+  return Object.entries(groups).sort((a, b) => b[1] - a[1])
+}
+
+function makeChart(domRef) {
+  let chart = charts.find(c => c.getDom() === domRef)
+  if (!chart) {
+    chart = echarts.init(domRef)
+    charts.push(chart)
+  }
+  return chart
+}
+
+function renderCharts() {
+  // 按状态统计（饼图）
+  const statusData = statusOptions
+    .map(s => ({ name: s.label, value: allEquipments.value.filter(e => e.Status === s.value).length }))
+    .filter(s => s.value > 0)
+  makeChart(statusChartRef.value).setOption({
+    tooltip: { trigger: 'item', formatter: '{b}: {c} 台（{d}%）' },
+    legend: { bottom: 0 },
+    series: [{ type: 'pie', radius: ['35%', '65%'], data: statusData, label: { formatter: '{b}\n{c} 台' } }]
+  }, true)
+
+  // 按设备类型统计（柱状图）
+  const typeData = countBy('Type')
+  makeChart(typeChartRef.value).setOption({
+    tooltip: { trigger: 'axis' },
+    grid: { left: 40, right: 20, top: 20, bottom: 60 },
+    xAxis: { type: 'category', data: typeData.map(d => d[0]), axisLabel: { interval: 0, rotate: 30 } },
+    yAxis: { type: 'value', minInterval: 1 },
+    series: [{ type: 'bar', data: typeData.map(d => d[1]), barMaxWidth: 40, itemStyle: { color: '#409EFF' } }]
+  }, true)
+
+  // 按使用部门统计（饼图）
+  const deptData = countBy('Department').map(d => ({ name: d[0], value: d[1] }))
+  makeChart(departmentChartRef.value).setOption({
+    tooltip: { trigger: 'item', formatter: '{b}: {c} 台（{d}%）' },
+    legend: { bottom: 0 },
+    series: [{ type: 'pie', radius: '60%', data: deptData, label: { formatter: '{b}\n{c} 台' } }]
+  }, true)
+
+  // 按使用年限统计（柱状图）
+  const buckets = { '1年以内': 0, '1-3年': 0, '3-5年': 0, '5-10年': 0, '10年以上': 0, '无购置日期': 0 }
+  const now = Date.now()
+  for (const e of allEquipments.value) {
+    if (!e.PurchaseDate) { buckets['无购置日期']++; continue }
+    const years = (now - new Date(e.PurchaseDate).getTime()) / (365 * 24 * 3600 * 1000)
+    if (years < 1) buckets['1年以内']++
+    else if (years < 3) buckets['1-3年']++
+    else if (years < 5) buckets['3-5年']++
+    else if (years < 10) buckets['5-10年']++
+    else buckets['10年以上']++
+  }
+  makeChart(yearsChartRef.value).setOption({
+    tooltip: { trigger: 'axis' },
+    grid: { left: 40, right: 20, top: 20, bottom: 40 },
+    xAxis: { type: 'category', data: Object.keys(buckets) },
+    yAxis: { type: 'value', minInterval: 1 },
+    series: [{ type: 'bar', data: Object.values(buckets), barMaxWidth: 40, itemStyle: { color: '#67C23A' } }]
+  }, true)
+}
+
+function handleResize() {
+  charts.forEach(c => c.resize())
+}
+
+onMounted(() => {
+  loadAll()
+  window.addEventListener('resize', handleResize)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+  charts.forEach(c => c.dispose())
+  charts = []
+})
 </script>
+
+<style scoped>
+.card-header { display: flex; justify-content: space-between; align-items: center; }
+.summary-row { margin-bottom: 16px; }
+.summary-card { text-align: center; }
+.summary-count { font-size: 26px; font-weight: 600; }
+.summary-label { color: var(--el-text-color-secondary); margin-top: 4px; font-size: 13px; }
+.chart-card :deep(.el-card__header) { padding: 10px 16px; font-weight: 600; }
+.chart { height: 320px; }
+.mt-16 { margin-top: 16px; }
+</style>