停车场车牌识别系统会将识别到的车牌信息实时推送到前端，大屏作为信息展示的核心载体，需要把最新的车牌结果快速呈现给管理人员，同时要对特殊车辆进行高亮标记，方便现场快速处理异常。基于jQuery实现这套功能不需要引入过重的前端框架，开发成本低，适配性好，适合各类停车场的大屏改造项目。
大屏展示区域的布局与基础样式设计
首先需要搭建车牌展示的容器结构，大屏通常采用横向或纵向的滚动列表，这里以纵向滚动为例，容器需要设置固定高度，超出部分隐藏，为后续滚动动画预留空间。车牌条目的基础样式要清晰明了，字体大小要适配大屏分辨率，确保在远距离也能看清车牌内容。每个车牌条目需要包含车牌号、识别时间、车辆状态等基础字段，状态字段后续会用来判断是否需要高亮。
滚动容器的CSS样式需要设置overflow: hidden，内部的列表项用position: relative定位，方便后续做位移动画。车牌条目的默认样式可以设置为浅色背景，文字颜色为深灰色，高亮样式则设置为红色背景或者加粗黄色文字，不同状态对应不同的高亮方案，比如黑名单车辆用红色高亮，未缴费车辆用橙色高亮。以下是基础的HTML结构和CSS样式代码：
<style>
/* 大屏整体容器 */
#lpr-screen {
width: 100%;
height: 800px;
background-color: #0a1a3a;
padding: 20px;
box-sizing: border-box;
}
/* 滚动列表容器 */
#lpr-list-wrap {
height: 700px;
overflow: hidden;
position: relative;
}
/* 车牌列表 */
#lpr-list {
position: absolute;
top: 0;
left: 0;
width: 100%;
transition: top 0.5s ease-in-out;
}
/* 单个车牌条目默认样式 */
.lpr-item {
height: 80px;
line-height: 80px;
padding: 0 30px;
margin-bottom: 10px;
background-color: #1a2b4a;
color: #e0e0e0;
font-size: 36px;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
}
/* 黑名单车辆高亮样式 */
.lpr-item.black-list {
background-color: #ff4444;
color: #ffffff;
font-weight: bold;
}
/* 未缴费车辆高亮样式 */
.lpr-item.unpaid {
background-color: #ffa500;
color: #ffffff;
}
/* 车牌号样式 */
.lpr-plate {
font-size: 42px;
letter-spacing: 4px;
}
/* 识别时间样式 */
.lpr-time {
font-size: 28px;
color: #a0a0a0;
}
</style>
<div id="lpr-screen">
<div id="lpr-list-wrap">
<div id="lpr-list">
<!-- 车牌条目会动态插入到这里 -->
</div>
</div>
</div>
布局设计时要注意大屏的分辨率适配，现在很多停车场大屏采用1920*1080或者更高的分辨率，字体大小不能太小，否则远距离观看会模糊。同时容器的高度计算要准确，如果大屏需要展示10条车牌信息，每条条目高度80px，加上间距10px，那么列表容器的高度至少是10*(80+10) - 10 = 890px，避免内容被截断。
车牌识别数据的实时接入与DOM更新逻辑
车牌识别结果通常通过WebSocket或者定时轮询的方式推送到前端，这里以WebSocket为例，建立连接后监听服务端的消息推送，每次收到新的车牌数据就触发DOM更新逻辑。jQuery的$.ajax或者原生的WebSocket都可以实现数据接入，WebSocket的实时性更好，适合高频推送的场景。服务端推送的数据格式通常包含车牌号、识别时间戳、车辆状态等字段，需要提前和后端约定好数据格式，避免解析出错。
收到新数据后，首先要判断当前列表的长度，如果列表已经达到了大屏最大展示条数，需要先移除最旧的一条数据，再把新的车牌条目插入到列表的最顶部，这样最新的结果会显示在最上方。插入新元素时可以用jQuery的prepend方法，同时给新元素添加对应的状态类，比如黑名单车辆就添加black-list类，让高亮样式生效。以下是数据接入和DOM更新的代码实现：
// 大屏最大展示车牌条数
const MAX_SHOW_NUM = 10;
// 建立WebSocket连接，地址根据实际后端接口调整
const ws = new WebSocket('ws://127.0.0.1:8080/lpr/push');
// 存储当前车牌列表数据，方便后续管理
let lprDataList = [];
ws.onopen = function() {
console.log('车牌推送WebSocket连接成功');
};
ws.onmessage = function(event) {
// 解析服务端推送的JSON数据
const newLprData = JSON.parse(event.data);
// 处理新的车牌数据，更新DOM
handleNewLprData(newLprData);
};
ws.onerror = function(error) {
console.error('WebSocket连接出错：', error);
// 出错时可以切换为定时轮询的方式兜底
startPolling();
};
// 处理新车牌数据的函数
function handleNewLprData(data) {
// 格式化识别时间，转为可读字符串
const formatTime = new Date(data.timestamp).toLocaleTimeString('zh-CN', {
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
// 根据车辆状态确定高亮类名
let statusClass = '';
if (data.status === 'black_list') {
statusClass = 'black-list';
} else if (data.status === 'unpaid') {
statusClass = 'unpaid';
}
// 拼接车牌条目的HTML
const itemHtml = `
<div class="lpr-item ${statusClass}" data-plate="${data.plate}">
<span class="lpr-plate">${data.plate}</span>
<span class="lpr-time">${formatTime}</span>
</div>
`;
// 将新数据插入到列表最顶部
$('#lpr-list').prepend(itemHtml);
// 把新数据存入数组
lprDataList.unshift(data);
// 如果列表长度超过最大展示数，移除最旧的一条
if (lprDataList.length > MAX_SHOW_NUM) {
$('#lpr-list .lpr-item:last').remove();
lprDataList.pop();
}
}
// 定时轮询兜底方案，每2秒请求一次最新数据
function startPolling() {
setInterval(function() {
$.ajax({
url: 'http://127.0.0.1:8080/api/lpr/latest',
type: 'GET',
success: function(res) {
if (res.code === 0 && res.data) {
handleNewLprData(res.data);
}
}
});
}, 2000);
}
数据接入时要注意异常处理，比如WebSocket断开后要有重连机制，避免数据推送中断。可以在onclose事件中添加重连逻辑，使用指数退避的方式控制重连间隔，避免短时间内频繁请求服务端。另外，车牌数据的校验也很重要，比如车牌号格式是否符合规则，时间戳是否有效，避免无效数据插入到列表中影响展示效果。
滚动动画与高亮效果的优化实现
新数据插入后，如果列表长度超过了容器的展示范围，需要实现自动滚动效果，让最新的内容始终可见。这里的滚动逻辑是调整#lpr-list的top值，每插入一条新数据，就把top值向上移动一个条目的高度，配合CSS的transition属性实现平滑的滚动动画。如果列表长度没有超过容器高度，就不需要滚动，直接展示所有内容即可。
高亮效果除了基础的背景色和文字颜色设置，还可以添加呼吸灯动画，让特殊车辆的车牌条目更醒目。可以用CSS的@keyframes定义闪烁动画，给高亮的条目添加动画类，每2秒闪烁一次，吸引管理人员的注意。同时，高亮规则可以支持动态配置，比如后续增加了预约车辆、军警车辆等新的状态，只需要修改状态类对应的CSS样式和判断逻辑即可，不需要改动整体架构。以下是滚动和高亮的优化代码：
/* 呼吸灯高亮动画 */
@keyframes breath {
0% { opacity: 1; }
50% { opacity: 0.7; }
100% { opacity: 1; }
}
/* 高亮条目添加呼吸动画 */
.lpr-item.black-list, .lpr-item.unpaid {
animation: breath 2s infinite;
}
// 优化后的新数据处理函数，增加滚动逻辑
function handleNewLprData(data) {
const formatTime = new Date(data.timestamp).toLocaleTimeString('zh-CN', {
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
let statusClass = '';
if (data.status === 'black_list') {
statusClass = 'black-list';
} else if (data.status === 'unpaid') {
statusClass = 'unpaid';
}
const itemHtml = `
<div class="lpr-item ${statusClass}" data-plate="${data.plate}">
<span class="lpr-plate">${data.plate}</span>
<span class="lpr-time">${formatTime}</span>
</div>
`;
$('#lpr-list').prepend(itemHtml);
lprDataList.unshift(data);
// 计算单个条目的高度，包含margin-bottom
const itemHeight = $('.lpr-item:first').outerHeight(true);
// 如果列表总高度超过容器高度，触发滚动
const listTotalHeight = lprDataList.length * itemHeight;
const wrapHeight = $('#lpr-list-wrap').height();
if (listTotalHeight > wrapHeight) {
// 计算需要滚动的距离，保持最新条目可见
const scrollTop = (lprDataList.length - Math.floor(wrapHeight / itemHeight)) * itemHeight * -1;
$('#lpr-list').css('top', scrollTop + 'px');
} else {
// 不需要滚动，重置top为0
$('#lpr-list').css('top', '0px');
}
// 超出最大展示数，移除旧数据
if (lprDataList.length > MAX_SHOW_NUM) {
$('#lpr-list .lpr-item:last').remove();
lprDataList.pop();
}
}
滚动动画的时长可以根据实际效果调整，0.5秒的缓动效果已经比较平滑，不会显得太突兀。如果大屏的刷新频率很高，比如每秒有3-5条新的车牌数据，那么滚动动画的时长可以适当缩短到0.3秒，避免动画堆积。另外，高亮效果的对比度要足够，停车场大屏通常放在光线较亮的环境下，红色和橙色的背景在大屏上的辨识度很高，不要使用浅色的高亮方案，否则远处看不清楚。
整个功能实现后，可以做一下性能测试，如果是普通的停车场，每秒推送的车牌数据不超过10条，jQuery的DOM操作完全可以支撑，不会出现卡顿。如果数据量特别大，比如大型货运停车场每秒有几十条识别结果，可以对DOM更新做节流处理，把100毫秒内的多次数据更新合并成一次DOM操作，减少重绘和回流的次数，提升大屏的流畅度。