baoshiwei
2025-06-05 eb54eea87c39f35b5d0476f146bfd29d7c7841be
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<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>