<template>
|
<div class="app-container">
|
<el-card class="box-card">
|
<template #header>
|
<div class="card-header">
|
<span>空调控制系统</span>
|
</div>
|
</template>
|
<el-tabs v-model="activeTab">
|
<el-tab-pane label="空调列表" name="list">
|
<air-conditioner-list ref="airConditionerList" />
|
</el-tab-pane>
|
<el-tab-pane label="定时任务管理" name="schedule">
|
<air-conditioner-schedule ref="airConditionerSchedule" />
|
</el-tab-pane>
|
<el-tab-pane label="操作日志" name="log">
|
<air-conditioner-log ref="airConditionerLog" />
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
|
|
</div>
|
</template>
|
|
<script setup name="AirConditioner">
|
import { ref, onMounted, nextTick } from 'vue'
|
import AirConditionerList from './list.vue'
|
import AirConditionerSchedule from './schedule.vue'
|
import AirConditionerLog from './log.vue'
|
|
const activeTab = ref('list')
|
const airConditionerList = ref(null)
|
const airConditionerSchedule = ref(null)
|
const scheduleDialogRef = ref(null)
|
|
// 定时任务弹窗显示状态
|
const scheduleDialogVisible = ref(false)
|
|
// 处理从空调列表切换到定时任务页面的方法(通过Tab切换)
|
function handleTabSchedule(airConditionerId) {
|
activeTab.value = 'schedule'
|
// 等待DOM更新后调用定时任务组件的方法
|
nextTick(() => {
|
if (airConditionerSchedule.value) {
|
airConditionerSchedule.value.loadScheduleByAirConditioner(airConditionerId)
|
}
|
})
|
}
|
|
// 处理显示定时任务弹窗的方法(通过按钮点击)
|
function handleShowSchedule(airConditionerId) {
|
scheduleDialogVisible.value = true
|
// 等待DOM更新后调用定时任务组件的方法
|
nextTick(() => {
|
if (scheduleDialogRef.value) {
|
scheduleDialogRef.value.loadScheduleByAirConditioner(airConditionerId)
|
}
|
})
|
}
|
|
// 暴露方法给子组件调用
|
defineExpose({
|
activeTab,
|
handleShowSchedule,
|
handleTabSchedule
|
})
|
</script>
|
|
<style scoped>
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
</style>
|