dyf-vue-ui/src/views/homeIndex/components/RealTimeAlarm.vue

<template>
    <div class="alarm-table-container">
        <div class="alarm-table-header">
            <div class="header-item">报警时间</div>
            <div class="header-item">设备类型</div>
            <div class="header-item">设备IMEI</div>
            <div class="header-item">报警事件</div>
            <div class="header-item">报警位置</div>
        </div>
        <div class="alarm-table-body" ref="tableBody"
            :style="{ animationDuration: `${alarmData.length * 2}s`, animationTimingFunction: 'linear' }">
            <div v-for="(item, index) in alarmData" :key="index" class="alarm-item">
                <div class="item-cell">{{ item.startTime }}</div>
                <div class="item-cell">{{ item.deviceTypeName }}</div>
                <div class="item-cell">{{ item.deviceImei }}</div>
                <div class="item-cell alarm-event">
                    {{ {
                        0: '强制报警',
                        1: '撞击闯入',
                        2: '自动报警',
                    3: '电子围栏告警'
                    }[item.deviceAction]}}
                  
                </div>
                <div class="item-cell">{{ item.location }}</div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { getRealtimeAlarm } from '@/api/homeIndex/index';

// 模拟报警数据
const alarmData = ref([
]);
const getRealtimeAlarmData = () => {
    getRealtimeAlarm().then((res) => {
        alarmData.value = res.data;
    });
}

const tableBody = ref(null);

onMounted(() => {
    getRealtimeAlarmData()
    // 启动滚动动画
    if (tableBody.value) {
        tableBody.value.style.animationName = 'scroll';
        tableBody.value.style.animationIterationCount = 'infinite';
    }
});
</script>
<style scoped lang="scss">
.alarm-table-container {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4vh;
    padding: 1.5vw;
}

.alarm-table-header {
    display: flex;
    color: #00C0FF;
    border-bottom: 1px dashed rgba(100, 150, 200, 0.3);
    font-size: 0.8vw;
}

.header-item {
    flex: 1;
    padding: 8px;
    text-align: center;
}

.alarm-table-body {
    height: 18vh;
    /* 可根据需求调整高度 */
    overflow: auto;
    color: #fff;
}

.alarm-item {
    display: flex;
    border-bottom: 1px dashed rgba(100, 150, 200, 0.3);
    font-size: 0.6vw;
    align-items: center;
    padding: 0.5vw;
}

.item-cell {
    flex: 1;
    text-align: center;
}

.alarm-event {
    color: #ff5252;
    /* 报警事件红色显示 */
}

/* 滚动动画 */
@keyframes scroll {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}
</style>