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 { getLineTree } 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
    }
})
getLineTree({ type: 'engineering' }).then(res => {
   
    deviceTree.value = res.data
    key.value += 1
    activeName.value = '4'
})
onMounted(() => {})

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