46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<template>
|
|
<div class="page-container">
|
|
<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>
|
|
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>
|