大屏数据实时
This commit is contained in:
fengerli
@ -5,66 +5,171 @@
|
||||
<div class="header-item">设备类型</div>
|
||||
<div class="header-item">设备IMEI</div>
|
||||
<div class="header-item">报警事件</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 class="alarm-table-body">
|
||||
<div ref="tableBody" class="alarm-table-body-inner">
|
||||
<!-- 第一份数据 -->
|
||||
<div v-for="(item, index) in displayData" :key="`first-${getKey(item, 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">
|
||||
{{ getEventName(item.deviceAction) }}
|
||||
</div>
|
||||
<div class="item-cell loaction">{{ item.location }}</div>
|
||||
</div>
|
||||
<!-- 第二份数据（用于无缝滚动） -->
|
||||
<div v-for="(item, index) in displayData" :key="`second-${getKey(item, 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">
|
||||
{{ getEventName(item.deviceAction) }}
|
||||
</div>
|
||||
<div class="item-cell loaction">{{ item.location }}</div>
|
||||
</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 alarmData = ref([]);
|
||||
const displayData = ref([]); // 显示的数据（复制一份用于无缝滚动）
|
||||
const tableBody = ref(null);
|
||||
const isScrolling = ref(true);
|
||||
const animationId = ref(null);
|
||||
const scrollPosition = ref(0);
|
||||
const itemHeight = ref(0); // 动态计算每个条目的高度
|
||||
|
||||
// 获取报警事件名称
|
||||
const getEventName = (action) => {
|
||||
const eventMap = {
|
||||
0: '强制报警',
|
||||
1: '撞击闯入',
|
||||
2: '自动报警',
|
||||
3: '电子围栏告警'
|
||||
};
|
||||
return eventMap[action] || '未知报警';
|
||||
};
|
||||
|
||||
// 获取实时报警数据
|
||||
const getRealtimeAlarmData = () => {
|
||||
getRealtimeAlarm().then((res) => {
|
||||
alarmData.value = res.data;
|
||||
if (res.data && res.data.length > 0) {
|
||||
// 新数据插入到最前面
|
||||
alarmData.value = [...res.data, ...alarmData.value];
|
||||
|
||||
// 限制数据量，避免性能问题
|
||||
if (alarmData.value.length > 10) {
|
||||
alarmData.value = alarmData.value.slice(0, 10);
|
||||
}
|
||||
// 更新显示数据
|
||||
updateDisplayData();
|
||||
// 新数据插入时重置滚动位置
|
||||
scrollPosition.value = 0;
|
||||
if (tableBody.value) {
|
||||
tableBody.value.style.transform = `translateY(0)`;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 更新显示数据（复制一份用于无缝滚动）
|
||||
const updateDisplayData = () => {
|
||||
displayData.value = [...alarmData.value];
|
||||
// 计算每个条目的实际高度
|
||||
nextTick(() => {
|
||||
const items = document.querySelectorAll('.alarm-item');
|
||||
if (items.length > 0) {
|
||||
itemHeight.value = items[0].offsetHeight;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 生成唯一的key
|
||||
const getKey = (item, index) => {
|
||||
return `${item.deviceImei}_${item.startTime}_${index}`;
|
||||
};
|
||||
|
||||
// 开始滚动动画
|
||||
const startScroll = () => {
|
||||
if (!tableBody.value || displayData.value.length === 0) return;
|
||||
stopScroll(); // 先停止之前的动画
|
||||
const scrollSpeed = 0.3; // 滚动速度
|
||||
const animate = () => {
|
||||
if (!isScrolling.value) {
|
||||
animationId.value = requestAnimationFrame(animate);
|
||||
return;
|
||||
}
|
||||
|
||||
scrollPosition.value += scrollSpeed;
|
||||
|
||||
// 当滚动超过一份数据的高度时，重置位置
|
||||
if (itemHeight.value > 0 && scrollPosition.value >= itemHeight.value * displayData.value.length) {
|
||||
scrollPosition.value = 0;
|
||||
}
|
||||
|
||||
// 应用滚动效果
|
||||
if (tableBody.value) {
|
||||
tableBody.value.style.transform = `translateY(-${scrollPosition.value}px)`;
|
||||
}
|
||||
|
||||
animationId.value = requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
animationId.value = requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
// 停止滚动动画
|
||||
const stopScroll = () => {
|
||||
if (animationId.value) {
|
||||
cancelAnimationFrame(animationId.value);
|
||||
animationId.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
// 开始报警定时器
|
||||
const startAlarmTimer = () => {
|
||||
if (alarmTimer) {
|
||||
clearInterval(alarmTimer);
|
||||
}
|
||||
getRealtimeAlarmData();
|
||||
alarmTimer = setInterval(getRealtimeAlarmData, 60 * 1000);
|
||||
alarmTimer = setInterval(getRealtimeAlarmData, 30 * 10000);
|
||||
};
|
||||
|
||||
// 清除报警定时器
|
||||
const clearAlarmTimer = () => {
|
||||
if (alarmTimer) {
|
||||
clearInterval(alarmTimer);
|
||||
alarmTimer = null;
|
||||
}
|
||||
};
|
||||
const tableBody = ref(null);
|
||||
|
||||
// 监听数据变化
|
||||
watch(displayData, (newData) => {
|
||||
if (newData.length > 0) {
|
||||
// 延迟一点确保DOM已更新
|
||||
setTimeout(() => {
|
||||
startScroll();
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
startAlarmTimer();
|
||||
// 启动滚动动画
|
||||
if (tableBody.value) {
|
||||
tableBody.value.style.animationName = 'scroll';
|
||||
tableBody.value.style.animationIterationCount = 'infinite';
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
clearAlarmTimer(); // 组件销毁时清除定时器
|
||||
})
|
||||
clearAlarmTimer();
|
||||
stopScroll();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.alarm-table-container {
|
||||
width: 100%;
|
||||
@ -90,28 +195,13 @@ onUnmounted(() => {
|
||||
|
||||
.alarm-table-body {
|
||||
height: 18vh;
|
||||
/* 可根据需求调整高度 */
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 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-table-body-inner {
|
||||
transition: transform 0.1s linear;
|
||||
}
|
||||
|
||||
.alarm-item {
|
||||
@ -120,6 +210,8 @@ onUnmounted(() => {
|
||||
font-size: 0.6vw;
|
||||
align-items: center;
|
||||
padding: 0.8vw;
|
||||
height: 7vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.item-cell {
|
||||
@ -127,22 +219,17 @@ onUnmounted(() => {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// .item-cell.loaction{
|
||||
// color: #267AD0;
|
||||
// }
|
||||
.alarm-event {
|
||||
color: #ff5252;
|
||||
/* 报警事件红色显示 */
|
||||
}
|
||||
|
||||
/* 滚动动画 */
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
/* 隐藏滚动条 */
|
||||
.alarm-table-body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.alarm-table-body {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user