gapinyc@
DESKTOP-9QS7RL5:/mnt/c/Users/pc$ curl -v http://192.168.110.204:8080/AI-rotator.html
curl -v http://192.168.110.204:8079/
* Trying 192.168.110.204:8080...
* connect to 192.168.110.204 port 8080 failed:
Connection refused
* Failed to connect to 192.168.110.204 port 8080 after 0 ms:
Connection refused
* Closing
connection 0
curl: (7) Failed to connect to 192.168.110.204 port 8080 after 0 ms:
Connection refused
* Trying 192.168.110.204:8079...
* Connected to 192.168.110.204 (192.168.110.204) port 8079 (#0)
> GET / HTTP/1.1
> Host: 192.168.110.204:8079
> User-Agent: curl/7.81.0
> Accept: */*
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Server: nginx/1.18.0 (Ubuntu)
< Date: Thu, 27 Nov 2025 07:45:40 GMT
< Content-Type: text/html; charset=utf-8
< Content-Length: 8366
<
Connection: keep-alive
<
<!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=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #0a1120;
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-weight: 700;
letter-spacing: 1px;
border-bottom: 1px solid #00eaff;
display: flex;
justify-content: space-between;
align-items: center;
}
.title {
white-space: nowrap;
}
.clock {
font-size: 16px;
color: #aaffff;
}
.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);
}
.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-size: 13px;
color: #aaffff;
}
.progress-line {
display: flex;
align-items: center;
}
.stop-point {
width: 24px;
height: 24px;
border-radius: 50%;
margin: 0 6px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: white;
font-size: 12px;
}
.stop-point.completed {
background: #52c41a;
}
.stop-point.current {
background: #faad14;
}
.stop-point.upcoming {
background: #cccccc;
color: #333;
}
.line {
flex-grow: 1;
height: 3px;
background: rgba(200, 200, 200, 0.4);
border-radius: 1.5px;
}
.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="lastUpdate">加载中...</span></span>
</div>
</div>
<script>
const content = document.getElementById('content');
const contentClone = document.getElementById('contentClone');
const dualContent = document.getElementById('dualContent');
const totalCount = document.getElementById('totalCount');
const lastUpdate = document.getElementById('lastUpdate');
const clockEl = document.getElementById('clock');
let currentY = 0;
let scrollInterval;
// 更新时钟
function updateClock() {
const now = new Date();
const dateStr = now.toLocaleDateString();
const timeStr = now.toLocaleTimeString();
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const weekday = weekdays[now.getDay()];
clockEl.textContent = `${dateStr} ${timeStr} ${weekday}`;
}
setInterval(updateClock, 1000);
updateClock();
// 获取数据
async function fetchData() {
try {
const res = await fetch('/api/data');
return await res.json();
} catch (err) {
console.error("获取数据失败:", err);
return [];
}
}
// 渲染到指定元素
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 startInfiniteScroll() {
clearInterval(scrollInterval);
scrollInterval = setInterval(() => {
const singleHeight = content.scrollHeight;
if (singleHeight <= 0) return;
currentY += 1.5; // 滚动速度
dualContent.style.transform = `translateY(-${currentY}px)`;
// 回到起点，实现无缝循环
if (currentY >= singleHeight * 2) {
dualContent.style.transition = 'none';
dualContent.style.transform = 'translateY(0)';
currentY = 0;
// 恢复过渡（保持性能）
requestAnimationFrame(() => {
requestAnimationFrame(() => {
dualContent.style.transition = 'transform 0s';
});
});
}
}, 50); // 每 50ms 移动一次
}
// 初始化
async function init() {
let data = await fetchData();
renderToElement(content, data);
renderToElement(contentClone, data);
totalCount.textContent = data.length;
lastUpdate.textContent = new Date().toLocaleTimeString();
startInfiniteScroll();
// 每 10 秒自动刷新数据
setInterval(async () => {
data = await fetchData();
renderToElement(content, data);
renderToElement(contentClone, data);
totalCount.textContent = data.length;
lastUpdate.textContent = new Date().toLocaleTimeString();
}, 10000);
}
// 启动应用
init();
</script>
</body>
*
Connection #0 to host 192.168.110.204 left intact
</html>gapinyc@
DESKTOP-9QS7RL5:/mnt/c/Users/pc$
ubuntu@VM-0-6-ubuntu:~$ sudo netstat -tulnp | grep -E ':(8080|8088|8079)'
tcp 0 0 0.0.0.0:8088 0.0.0.0:* LISTEN 492708/sshd: ubuntu
tcp 0 0 0.0.0.0:8080 0.0.0.0:* LISTEN 492708/sshd: ubuntu
tcp6 0 0 :::8088 :::* LISTEN 492708/sshd: ubuntu
tcp6 0 0 :::8080 :::* LISTEN 492708/sshd: ubuntu
ubuntu@VM-0-6-ubuntu:~$ sudo netstat -tulnp | grep -E ':(8080|8079|8088)'
tcp 0 0 0.0.0.0:8088 0.0.0.0:* LISTEN 492708/sshd: ubuntu
tcp 0 0 0.0.0.0:8080 0.0.0.0:* LISTEN 492708/sshd: ubuntu
tcp6 0 0 :::8088 :::* LISTEN 492708/sshd: ubuntu
tcp6 0 0 :::8080 :::* LISTEN 492708/sshd: ubuntu
ubuntu@VM-0-6-ubuntu:~$
本文介绍了解决远程桌面连接中字体出现锯齿化的方法，包括调整连接速度和启用FontSmoothing选项。
扫一扫
1934
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
