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.alarmTime }}</div>
                <div class="item-cell">{{ item.deviceType }}</div>
                <div class="item-cell">{{ item.deviceIMEI }}</div>
                <div class="item-cell alarm-event">{{ item.alarmEvent }}</div>
                <div class="item-cell">{{ item.alarmLocation }}</div>
            </div>
            <!-- 复制一份数据，实现无缝滚动 -->
            <div v-for="(item, index) in alarmData" :key="index + 'copy'" class="alarm-item">
                <div class="item-cell">{{ item.alarmTime }}</div>
                <div class="item-cell">{{ item.deviceType }}</div>
                <div class="item-cell">{{ item.deviceIMEI }}</div>
                <div class="item-cell alarm-event">{{ item.alarmEvent }}</div>
                <div class="item-cell">{{ item.alarmLocation }}</div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';

// 模拟报警数据
const alarmData = ref([
    {
        alarmTime: '2025-09-01 20:16:54',
        deviceType: 'BJQ6170',
        deviceIMEI: '123456789123456',
        alarmEvent: '强制报警',
        alarmLocation: '湖北省武汉市国际企业中心聚星楼'
    },
    {
        alarmTime: '2025-09-01 20:16:54',
        deviceType: 'BJQ6170',
        deviceIMEI: '123456789123456',
        alarmEvent: '强制报警',
        alarmLocation: '湖北省武汉市国际企业中心聚星楼'
    },
    {
        alarmTime: '2025-09-01 20:16:54',
        deviceType: 'BJQ6170',
        deviceIMEI: '123456789123456',
        alarmEvent: '强制报警',
        alarmLocation: '湖北省武汉市国际企业中心聚星楼'
    }
]);

const tableBody = ref(null);

onMounted(() => {
    // 启动滚动动画
    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: #267AD0;
    border-bottom: 1px dashed rgba(100, 150, 200, 0.3);
    font-size: 1vw;
}

.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>