admin-sjzx/src/views/pqs/runManage/cleaning/components/alarmDetails.vue

<template>
    <el-dialog draggable width="1300px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
        <div style="display: flex">
            <el-tabs v-model="activeName" type="border-card" class="mr10" style="width: 450px">
                <el-tab-pane label="告警监测点详情" name="first">
                    <div :style="height">
                        <vxe-table height="auto" :data="TableData" v-bind="defaultAttribute">
                            <vxe-column type="seq" title="序号" width="60px"></vxe-column>
                            <vxe-column field="time" title="日期">
                                <template #default="{ row }">
                                    <span class="time">{{ row.time }}</span>
                                </template>
                            </vxe-column>
                            <vxe-column field="name" title="监测点名称" width="120px"></vxe-column>
                            <vxe-column field="fz" title="告警时间(分钟)" width="80px"></vxe-column>
                        </vxe-table>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <el-tabs v-model="activeName" type="border-card" style="width: 820px">
                <el-tab-pane :label="`变电站1 > 测试监测点1_告警指标详情`" name="first">
                    <div :style="height">
                        <vxe-table height="auto" :data="TableData1" v-bind="defaultAttribute">
                            <vxe-column type="seq" title="序号" width="60px"></vxe-column>
                            <vxe-column field="time" title="时间" min-width="120px"></vxe-column>
                            <vxe-column field="indexType" title="指标类型" min-width="100px"></vxe-column>
                            <vxe-column field="phase" title="相别" width="60px"></vxe-column>
                            <vxe-column field="range" title="合理范围" min-width="60px"></vxe-column>
                            <vxe-column field="max" title="最大" width="60px"></vxe-column>
                            <vxe-column field="min" title="最小" width="60px"></vxe-column>
                            <vxe-column field="average" title="平均" width="60px"></vxe-column>
                            <vxe-column field="cp95" title="CP95" width="60px"></vxe-column>
                        </vxe-table>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { ElMessage } from 'element-plus'
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
import { mainHeight } from '@/utils/layout'
const dialogVisible = ref(false)
const height = mainHeight(10, 2)
const title = ref('')
const activeName = 'first'
const TableData = ref([
    {
        time: '2025-01-01',
        name: '测试监测点1',
        fz: 100
    },
    {
        time: '2025-01-01',
        name: '测试监测点2',
        fz: 100
    },
    {
        time: '2025-01-01',
        name: '测试监测点3',
        fz: 100
    },
    {
        time: '2025-01-01',
        name: '测试监测点4',
        fz: 100
    }
])
const TableData1 = ref([
    {
        num: 1,
        time: '2025/01/01 11:10:00',
        indexType: '频率',
        phase: 'T',
        range: '42.5~57.5',
        max: '/',
        min: '/',
        average: 60,
        cp95: '/'
    },
    {
        num: 2,
        time: '2025/01/01 11:20:00',
        indexType: '频率',
        phase: 'T',
        range: '42.5~57.5',
        max: '/',
        min: '/',
        average: 60,
        cp95: '/'
    },
    {
        num: 3,
        time: '2025/01/01 11:30:00',
        indexType: '频率',
        phase: 'T',
        range: '42.5~57.5',
        max: 65,
        min: 60,
        average: 62,
        cp95: 61
    },
    {
        num: 4,
        time: '2025/01/01 11:40:00',
        indexType: '频率',
        phase: 'T',
        range: '42.5~57.5',
        max: 65,
        min: 60,
        average: 62,
        cp95: 61
    },
    {
        num: 5,
        time: '2025/01/01 11:50:00',
        indexType: '相电压',
        phase: 'A',
        range: '42.5~57.5',
        max: '/',
        min: 290,
        average: '/',
        cp95: '/'
    },
    {
        num: 6,
        time: '2025/01/01 12:10:00',
        indexType: '相电压',
        phase: 'B',
        range: '42.5~57.5',
        max: 220,
        min: 290,
        average: 220,
        cp95: 220
    },
    {
        num: 7,
        time: '2025/01/01 12:20:00',
        indexType: '相电压',
        phase: 'C',
        range: '42.5~57.5',
        max: '/',
        min: 290,
        average: '/',
        cp95: '/'
    },
    {
        num: 8,
        time: '2025/01/01 12:30:00',
        indexType: '相电压',
        phase: 'A',
        range: '42.5~57.5',
        max: 220,
        min: 290,
        average: 220,
        cp95: 220
    }
])

const open = (data: anyObj) => {
    title.value = data.name + '_告警详情展示'
    dialogVisible.value = true
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
.time {
    color: var(--el-color-primary);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
}

</style>