2025-01-05 09:59:40 +08:00
|
|
|
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');
|
2025-01-13 08:46:49 +08:00
|
|
|
let wait_time = item.wait_time
|
|
|
|
if (wait_time < 60) {
|
|
|
|
wait_time = `${Math.round(wait_time)}秒`
|
|
|
|
} else if (wait_time < 3600) {
|
|
|
|
wait_time = `${Math.round(wait_time / 60)}分钟`
|
|
|
|
} else {
|
|
|
|
wait_time = `${Math.round(wait_time / 3600)}小时${Math.round(wait_time % 3600 / 60)}分钟`
|
|
|
|
}
|
2025-01-05 09:59:40 +08:00
|
|
|
queueItem.className = 'queue-item';
|
|
|
|
queueItem.innerHTML = `
|
2025-01-13 08:46:49 +08:00
|
|
|
<span class="queue-user">${item.user}</span>
|
|
|
|
<span class="queue-time">${wait_time}</span>
|
2025-01-05 09:59:40 +08:00
|
|
|
`;
|
|
|
|
queueList.appendChild(queueItem);
|
|
|
|
});
|
|
|
|
|
|
|
|
container.appendChild(queueList);
|
|
|
|
return container;
|
|
|
|
}
|