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

<template>
    <div class="default-main">
        <el-tabs v-model="activeName" type="border-card" class="demo-tabs">
            <el-tab-pane label="设备告警" name="1">
                <Device v-if="activeName == '1'" :deviceTree="deviceTree" />
            </el-tab-pane>
            <el-tab-pane label="稳态越限告警" name="2">
                <Steady v-if="activeName == '2'" :deviceTree="deviceTree" />
            </el-tab-pane>
            <el-tab-pane label="暂态事件" name="3">
                <Transient v-if="activeName == '3'" :deviceTree="deviceTree" />
            </el-tab-pane>
            <el-tab-pane label="异常事件" name="4">
                <Abnormal v-if="activeName == '4'" :deviceTree="deviceTree" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide } from 'vue'
import Steady from './Steady.vue'
import Transient from './Transient.vue'
import Device from './Device.vue'
import Abnormal from './Abnormal.vue'
import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
defineOptions({
    name: 'govern/alarm/index'
})
const deviceTree = ref([])
const activeName = ref('1')
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
})
onMounted(() => {})

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