33 lines
1.1 KiB
JavaScript
33 lines
1.1 KiB
JavaScript
|
export function createQueueDisplay(queueData) {
|
||
|
const container = document.createElement('div');
|
||
|
container.className = 'queue-container';
|
||
|
|
||
|
const title = document.createElement('h2');
|
||
|
title.textContent = '排队情况';
|
||
|
title.className = 'queue-title';
|
||
|
container.appendChild(title);
|
||
|
|
||
|
if (!queueData || queueData.length === 0) {
|
||
|
const emptyMessage = document.createElement('p');
|
||
|
emptyMessage.className = 'queue-empty';
|
||
|
emptyMessage.textContent = '当前无人排队';
|
||
|
container.appendChild(emptyMessage);
|
||
|
return container;
|
||
|
}
|
||
|
|
||
|
const queueList = document.createElement('div');
|
||
|
queueList.className = 'queue-list';
|
||
|
|
||
|
queueData.forEach(item => {
|
||
|
const queueItem = document.createElement('div');
|
||
|
queueItem.className = 'queue-item';
|
||
|
queueItem.innerHTML = `
|
||
|
<span class="queue-user">${item.userName}</span>
|
||
|
<span class="queue-time">${item.waitTime}</span>
|
||
|
`;
|
||
|
queueList.appendChild(queueItem);
|
||
|
});
|
||
|
|
||
|
container.appendChild(queueList);
|
||
|
return container;
|
||
|
}
|