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 loaction">{{ item.location }}</div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { getRealtimeAlarm } from '@/api/homeIndex/index';
let alarmTimer = null;
// 模拟报警数据
const alarmData = ref([
]);
const getRealtimeAlarmData = () => {
    getRealtimeAlarm().then((res) => {
        alarmData.value = res.data;
    });
}
const startAlarmTimer = () => {
    if (alarmTimer) {
        clearInterval(alarmTimer);
    }
    getRealtimeAlarmData();
    alarmTimer = setInterval(getRealtimeAlarmData, 60 * 1000);
};
const clearAlarmTimer = () => {
    if (alarmTimer) {
        clearInterval(alarmTimer);
        alarmTimer = null;
    }
};
const tableBody = ref(null);

onMounted(() => {
    startAlarmTimer();
    // 启动滚动动画
    if (tableBody.value) {
        tableBody.value.style.animationName = 'scroll';
        tableBody.value.style.animationIterationCount = 'infinite';
    }
});
onUnmounted(() => {
    clearAlarmTimer(); // 组件销毁时清除定时器
})
</script>
<style scoped lang="scss">
.alarm-table-container {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4vh;
    padding: 1vw 0vw;
}

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

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

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

/* Webkit浏览器滚动条样式 */
.alarm-table-body::-webkit-scrollbar {
    width: 8px;
}

.alarm-table-body::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

.alarm-table-body::-webkit-scrollbar-thumb {
    background: #267AD0;
    border-radius: 4px;
}

.alarm-table-body::-webkit-scrollbar-thumb:hover {
    background: #267AD0;
}

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

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

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

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

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