<!-- templates/index
.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1
.0"/>
<title>🚚 智能配送看板</title>
<link href="https
://fonts
.googleapis
.com/css2?family=Orbitron
:wght@500;700&family=Roboto
:wght@300;400;700&display=swap" rel="stylesheet">
<style>
* {
margin
: 0;
padding
: 0;
box-sizing
: border-box;
}
body {
background
: linear-gradient
(135deg, #0a
1120, #1c2b4a
);
color
: #e0f7fa;
font-family
: 'Roboto', sans-serif;
overflow
: hidden;
height
: 100vh;
font-size
: 14px;
}
.container {
width
: 95%;
max-width
: 1600px;
margin
: 20px auto;
border-radius
: 12px;
overflow
: hidden;
box-shadow
: 0 8px 20px rgba
(0, 0, 0, 0
.6
);
}
header {
background
: #001f3f;
color
: #00eaff;
padding
: 12px 20px;
font-family
: 'Orbitron', sans-serif;
font-size
: 18px;
font-weight
: 700;
letter-spacing
: 1px;
text-shadow
: 0 0 8px rgba
(0, 234, 255, 0
.6
);
border-bottom
: 1px solid #00eaff;
display
: flex;
justify-content
: space-between;
align-items
: center;
}
.title {
white-space
: nowrap;
}
.clock {
font-family
: 'Orbitron', monospace;
font-size
: 16px;
color
: #aaffff;
text-align
: right;
}
.scroll-container {
height
: calc
(100vh - 120px
);
overflow
: hidden;
position
: relative;
}
.scroll-dual {
display
: flex;
flex-direction
: column;
transition
: transform 0s; /* 关键：无过渡，保持帧率稳定 */
}
.scroll-content {
display
: flex;
flex-direction
: column;
}
.waybill-item {
background
: rgba
(13, 96, 144, 0
.3
);
margin
: 6px 8px;
padding
: 12px;
border-radius
: 10px;
backdrop-filter
: blur
(6px
);
border
: 1px solid rgba
(0, 234, 255, 0
.15
);
box-shadow
: 0 3px 8px rgba
(0, 0, 0, 0
.3
);
transition
: all 0
.2s;
}
.waybill-item
:hover {
transform
: translateY
(-1px
);
box-shadow
: 0 5px 14px rgba
(0, 234, 255, 0
.25
);
}
.driver-info {
font-size
: 16px;
font-weight
: bold;
color
: #00eaff;
margin-bottom
: 10px;
display
: flex;
justify-content
: space-between;
align-items
: center;
}
.waybill-id {
font-family
: 'Orbitron', monospace;
font-size
: 13px;
color
: #aaffff;
}
.progress-line {
display
: flex;
align-items
: center;
position
: relative;
}
.stop-point {
width
: 28px;
height
: 28px;
border-radius
: 50%;
margin
: 0 6px;
display
: flex;
justify-content
: center;
align-items
: center;
font-weight
: bold;
color
: white;
font-family
: 'Orbitron', sans-serif;
z-index
: 2;
font-size
: 12px;
}
.stop-point
.completed {
background
: radial-gradient
(circle, #52c41a, #2f8514
);
box-shadow
: 0 0 12px rgba
(82, 196, 26, 0
.8
);
}
.stop-point
.current {
background
: radial-gradient
(circle, #faad14, #d48806
);
animation
: pulse 1
.5s infinite;
box-shadow
: 0 0 16px rgba
(250, 173, 20, 0
.9
);
transform
: scale
(1
.05
);
}
.stop-point
.upcoming {
background
: radial-gradient
(circle, #cccccc, #777777
);
color
: #333;
}
.line {
flex-grow
: 1;
height
: 4px;
background
: linear-gradient
(90deg, transparent, rgba
(0, 234, 255, 0
.4
), transparent
);
border-radius
: 2px;
position
: relative;
overflow
: hidden;
}
.line
::before {
content
: '';
position
: absolute;
left
: -100%;
top
: 0;
width
: 100%;
height
: 100%;
background
: linear-gradient
(90deg, transparent, rgba
(0, 234, 255, 0
.8
), transparent
);
animation
: shine 3s infinite;
}
@keyframes shine {
0% { transform
: translateX
(-100%
); }
100% { transform
: translateX
(100%
); }
}
@keyframes pulse {
0%, 50% { opacity
: 1; transform
: scale
(1
.05
); }
51%, 100% { opacity
: 0
.7; transform
: scale
(1
); }
}
@keyframes slideIn {
from {
opacity
: 0;
transform
: translateX
(-20px
) scale
(0
.98
);
}
to {
opacity
: 1;
transform
: translateX
(0
) scale
(1
);
}
}
.waybill-item
.new {
animation
: slideIn 0
.5s cubic-bezier
(0
.25, 0
.46, 0
.45, 0
.94
) forwards;
}
.footer {
text-align
: center;
padding
: 10px;
font-size
: 12px;
color
: rgba
(255, 255, 255, 0
.7
);
background
: rgba
(0, 0, 0, 0
.2
);
display
: flex;
justify-content
: space-between;
align-items
: center;
flex-wrap
: wrap;
gap
: 5px;
}
.empty-state {
text-align
: center;
padding
: 40px 20px;
color
: #aaa;
font-size
: 16px;
}
</style>
</head>
<body>
<div
class="container">
<header>
<div
class="title">🚀 智能物流 · 实时配送看板</div>
<div
class="clock" id="clock">加载中
...</div>
</header>
<div
class="scroll-container" id="scrollContainer">
<div
class="scroll-dual" id="dualContent">
<div
class="scroll-content" id="content"></div>
<div
class="scroll-content" id="contentClone"></div>
</div>
</div>
<div
class="footer">
<span>📊 当前共 <strong id="totalCount">0</strong> 个配送任务</span>
<span>最后更新
: <span id="lastUp
date">加载中
...</span></span>
</div>
</div>
<script>
const content = document
.getElementById
('content'
);
const contentClone = document
.getElementById
('contentClone'
);
const dualContent = document
.getElementById
('dualContent'
);
const lastUp
date = document
.getElementById
('lastUp
date'
);
const totalCount = document
.getElementById
('totalCount'
);
const clockEl = document
.getElementById
('clock'
);
let scrollInterval;
let currentY = 0;
let latestData = []; // 缓存最新数据用于复用
// 更新时钟
function up
dateClock
() {
const now = new
Date();
const
dateStr = now
.toLocale
DateString
();
const timeStr = now
.toLocaleTimeString
();
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const weekday = weekdays[now
.getDay
()];
clockEl
.textContent = `${
dateStr} ${timeStr} ${weekday}`;
}
setInterval
(up
dateClock, 1000
);
up
dateClock
();
// 获取最新数据（带缓存）
async function fetchLatestData
() {
try {
const res = await fetch
('/api/data'
);
const data = await res
.json
();
latestData = data
.sort
((a, b
) =>
a
.driver_name
.localeCompare
(b
.driver_name, 'zh'
) ||
a
.waybill_id
.localeCompare
(b
.waybill_id, 'zh'
)
);
return latestData;
} catch
(err
) {
console
.error
("API 请求失败
:", err
);
return latestData; // 失败时返回上一次成功数据
}
}
// 渲染到指定元素（绝不允许清空后不填充）
function renderToElement
(el, data
) {
el
.innerHTML = ''; // 先清空
if
(!data || data
.length === 0
) {
el
.innerHTML = '<div
class="empty-state">📭 当前无配送中的运单</div>';
return;
}
const fragment = document
.createDocumentFragment
();
data
.forEach
(order => {
const item = document
.createElement
('div'
);
item
.className = 'waybill-item';
item
.dataset
.waybillId = order
.waybill_id;
const driverInfo = document
.createElement
('div'
);
driverInfo
.className = 'driver-info';
const driverText = document
.createElement
('span'
);
driverText
.textContent = `🚛 ${order
.driver_name}`;
const waybillId = document
.createElement
('span'
);
waybillId
.className = 'waybill-id';
waybillId
.textContent = `#${order
.waybill_id}`;
driverInfo
.appendChild
(driverText
);
driverInfo
.appendChild
(waybillId
);
const progressLine = document
.createElement
('div'
);
progressLine
.className = 'progress-line';
(order
.stops || []
).forEach
((stop, index
) => {
const point = document
.createElement
('div'
);
point
.className = 'stop-point';
if
(stop
.is_completed
) point
.classList
.add
('completed'
);
else if
(stop
.is_current
) point
.classList
.add
('current'
);
else point
.classList
.add
('upcoming'
);
point
.textContent = stop
.sort ||
(index + 1
);
progressLine
.appendChild
(point
);
if
(index <
(order
.stops?
.length || 0
) - 1
) {
const line = document
.createElement
('div'
);
line
.className = 'line';
progressLine
.appendChild
(line
);
}
}
);
item
.appendChild
(driverInfo
);
item
.appendChild
(progressLine
);
fragment
.appendChild
(item
);
}
);
el
.appendChild
(fragment
);
}
// 启动无限滚动（真正永不空白）
function startSmoothInfiniteScroll
() {
clearInterval
(scrollInterval
);
scrollInterval = setInterval
(async
() => {
const singleHeight = content
.scrollHeight;
if
(singleHeight <= 0
) return;
// 🔁 持续向下滚动
currentY += 2;
dualContent
.style
.transform = `translateY
(-${currentY}px
)`;
// 🔄 计算当前处于第几个周期
const cycle = Math
.floor
(currentY / singleHeight
);
const isOddCycle = cycle % 2 === 1;
// 判断哪个块是“前面那个可以被替换”的
const frontBlock = isOddCycle ? content
: contentClone;
const backBlock = isOddCycle ? contentClone
: content;
// 只有当 backBlock 已经完全滚过去，并且 frontBlock 还没更新过本轮时才更新
if
(!frontBlock
.dataset
.up
datedInCycle || Number
(frontBlock
.dataset
.up
datedInCycle
) !== cycle
) {
frontBlock
.dataset
.updating = 'true';
const data = await fetchLatestData
(); // 必须先拿到数据再更新
renderToElement
(frontBlock, data
);
frontBlock
.dataset
.up
datedInCycle = cycle
.toString
();
delete frontBlock
.dataset
.updating;
// 更新底部统计
totalCount
.textContent = data
.length;
lastUp
date.textContent = new
Date().toLocaleTimeString
();
}
}, 40
);
}
// 初始化函数
async function init
() {
const data = await fetchLatestData
();
renderToElement
(content, data
);
renderToElement
(contentClone, data
);
setTimeout
(startSmoothInfiniteScroll, 100
);
}
// 每10秒刷新缓存数据（不影响滚动）
setInterval
(() => {
fetchLatestData
();
}, 10000
);
// 启动
init
();
</script>
</body>
</html>
将代码拆分
第二个完了之后，版面没有了数据，还不如跳转回去呢。能不能实现无限循环
扫一扫
1340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
