设备维修统计报表

src/views/inspection/report/Index.vue

@@ -1,14 +1,45 @@
 <template>
   <div class="page-container">
-    <el-card>
-      <template #header>
-        <span>统计报表</span>
-      </template>
-      <el-empty description="统计报表 - 功能开发中" />
-    </el-card>
+    <el-tabs v-model="activeTab" @tab-change="onTabChange">
+      <el-tab-pane label="设备统计报表" name="device">
+        <DeviceStatistics />
+      </el-tab-pane>
+      <el-tab-pane label="设备维护报表" name="maintenance">
+        <MaintenanceReport />
+      </el-tab-pane>
+      <el-tab-pane label="维修类报表" name="repair">
+        <RepairReport />
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script setup>
-// TODO: 实现统计报表功能
+import { ref, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import DeviceStatistics from './DeviceStatistics.vue'
+import MaintenanceReport from './MaintenanceReport.vue'
+import RepairReport from './RepairReport.vue'
+
+const router = useRouter()
+const route = useRoute()
+const activeTab = ref('device')
+
+function onTabChange(name) {
+  router.push({ name: `${name.charAt(0).toUpperCase() + name.slice(1)}Report` })
+}
+
+onMounted(() => {
+  // 根据路由参数切换Tab
+  const path = route.path
+  if (path.includes('maintenance')) activeTab.value = 'maintenance'
+  else if (path.includes('repair')) activeTab.value = 'repair'
+  else activeTab.value = 'device'
+})
 </script>
+
+<style scoped>
+.page-container { padding: 0; }
+:deep(.el-tabs__header) { margin-bottom: 0; }
+:deep(.el-tabs__content) { padding-top: 16px; }
+</style>