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="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-tab-pane label="稳态越限告警" name="3">
                <Steady v-if="activeName == '3'" :deviceTree="deviceTree" :key="key" />
            </el-tab-pane>
            <el-tab-pane label="暂态事件" name="4">
                <Transient v-if="activeName == '4'" :deviceTree="deviceTree" :key="key" />
            </el-tab-pane>
            <el-tab-pane label="异常事件" name="5">
                <Abnormal v-if="activeName == '5'" :deviceTree="deviceTree" :key="key" />
            </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 Front from './Front.vue'
import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
defineOptions({
    name: 'govern/alarm/index'
})

const deviceTree = ref([])
const activeName = ref('1')
const key = ref(0)
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 = '1'
})
onMounted(() => { })

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