<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>路测控制面板</title>
|
<style>
|
body {
|
font-family: Arial, sans-serif;
|
padding: 20px;
|
margin: 0;
|
box-sizing: border-box;
|
background-color: #f8f8f8;
|
}
|
|
h2 {
|
text-align: center;
|
margin-bottom: 20px;
|
}
|
|
#status {
|
font-size: 18px;
|
margin-bottom: 20px;
|
color: #333;
|
text-align: center;
|
}
|
|
.controls {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
gap: 10px;
|
}
|
|
.input-group {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
gap: 10px;
|
flex-wrap: wrap;
|
justify-content: center;
|
}
|
|
input[type="text"] {
|
padding: 8px;
|
font-size: 16px;
|
border-radius: 4px;
|
border: 1px solid #ccc;
|
width: 120px;
|
}
|
|
button {
|
padding: 10px 20px;
|
font-size: 16px;
|
border: none;
|
background-color: #007bff;
|
color: white;
|
border-radius: 5px;
|
cursor: pointer;
|
}
|
|
button:hover {
|
background-color: #0056b3;
|
}
|
|
#result {
|
margin-top: 20px;
|
text-align: center;
|
font-size: 16px;
|
color: green;
|
}
|
|
@media (max-width: 600px) {
|
h2 {
|
font-size: 20px;
|
}
|
|
input[type="text"], button {
|
width: 90%;
|
font-size: 16px;
|
}
|
|
.input-group {
|
flex-direction: column;
|
}
|
}
|
</style>
|
</head>
|
<body>
|
|
<h2>🚗 路测状态监控</h2>
|
|
<div id="status">状态读取中...</div>
|
|
<div class="controls">
|
<div class="input-group">
|
<label>路线代码：</label>
|
<input type="text" id="routeCode" placeholder="如：line1">
|
<label>楼层代码：</label>
|
<input type="text" id="floorCode" placeholder="如：F1">
|
<label>区域代码：</label>
|
<input type="text" id="areaCode" placeholder="如：A">
|
</div>
|
|
<div class="input-group">
|
<button onclick="startCollection()">开始</button>
|
<button onclick="stopCollection()">停止</button>
|
</div>
|
</div>
|
|
<div id="result"></div>
|
|
<script>
|
function updateStatus() {
|
fetch('/status')
|
.then(response => response.json())
|
.then(data => {
|
document.getElementById('status').textContent =
|
`当前状态：${data.status.toUpperCase()}（check_line: ${data.check_line}）`;
|
})
|
.catch(() => {
|
document.getElementById('status').textContent = '❌ 无法获取状态';
|
});
|
}
|
|
function startCollection() {
|
const route = document.getElementById('routeCode').value.trim();
|
const floor = document.getElementById('floorCode').value.trim();
|
const area = document.getElementById('areaCode').value.trim();
|
const resultDiv = document.getElementById('result');
|
const regex = /^[a-zA-Z0-9]+$/;
|
|
// 校验三个输入框是否都非空，并且只包含字母或数字
|
if (!route || !floor || !area) {
|
resultDiv.textContent = '❌ 所有字段都必须填写';
|
resultDiv.style.color = 'red';
|
return;
|
}
|
|
if (!regex.test(route) || !regex.test(floor) || !regex.test(area)) {
|
resultDiv.textContent = '❌ 只允许输入字母或数字';
|
resultDiv.style.color = 'red';
|
return;
|
}
|
|
const checkLine = `${route}_${floor}_${area}`;
|
|
fetch(`/start?check_line=${encodeURIComponent(checkLine)}`)
|
.then(res => res.json())
|
.then(data => {
|
resultDiv.textContent = `✅ 开始接收: check_line=${data.check_line}`;
|
resultDiv.style.color = 'green';
|
updateStatus();
|
})
|
.catch(() => {
|
resultDiv.textContent = '❌ 启动失败';
|
resultDiv.style.color = 'red';
|
});
|
}
|
|
function stopCollection() {
|
fetch('/stop')
|
.then(res => res.json())
|
.then(() => {
|
document.getElementById('result').textContent = `🛑 接收已停止`;
|
updateStatus();
|
})
|
.catch(() => {
|
document.getElementById('result').textContent = '❌ 停止失败';
|
});
|
}
|
|
window.onload = updateStatus;
|
setInterval(updateStatus, 5000);
|
</script>
|
|
</body>
|
</html>
|
