admin-govern/src/views/govern/alarm/index.vue

<template>
    <div class="default-main">
        <el-tabs v-model.trim="activeName" type="border-card" class="demo-tabs">
            <el-tab-pane label="暂态事件" name="4">
                <Transient
                    v-if="!showEventStatistics"
                    :deviceTree="deviceTree"
                    :key="key"
                    @statistics="showEventStatistics = true"
                />
                <eventStatistics v-else @back="showEventStatistics = false" />
            </el-tab-pane>
            <!-- <el-tab-pane label="事件统计" name="5">
              
            </el-tab-pane> -->
            <el-tab-pane label="稳态越限告警" name="3">
                <Steady v-if="activeName == '3'" :deviceTree="deviceTree" :key="key" />
            </el-tab-pane>
            <el-tab-pane label="设备告警" name="1">
                <Device v-if="activeName == '1'" :deviceTree="deviceTree" :key="key" />
            </el-tab-pane>
            <el-tab-pane label="前置告警" name="2">
                <Front v-if="activeName == '2'" :deviceTree="deviceTree" :key="key" />
            </el-tab-pane>



        </el-tabs>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import Steady from './Steady.vue'
import Transient from './Transient.vue'
import Device from './Device.vue'
import Front from './Front.vue'
import eventStatistics from './eventStatistics.vue'
import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
defineOptions({
    name: 'govern/alarm/index'
})

const deviceTree = ref([])
const activeName = ref('4')
const showEventStatistics = ref(false)
const key = ref(0)

watch(activeName, val => {
    if (val !== '4') {
        showEventStatistics.value = false
    }
})
// getDeviceTree().then(res => {
// res.data.forEach((item: any) => {
//     item.value = item.id
//     item.label = item.name
//     item.children.forEach((child: any) => {
//         child.value = child.id
//         child.label = child.name
//         child.children.forEach((grand: any) => {
//             grand.value = grand.id
//             grand.label = grand.name
//             delete grand.children
//         })
//     })
// })
//     deviceTree.value = res.data
//     key.value += 1
//     activeName.value = '4'
// })
onMounted(() => { })

const addMenu = () => { }
</script>
<style></style>