2024-12-15 06:07:02 +00:00
|
|
|
R"(<!DOCTYPE html>
|
|
|
|
|
<html><head>
|
2024-12-15 08:14:52 +00:00
|
|
|
<meta charset="UTF-8">
|
2024-12-18 09:39:21 +00:00
|
|
|
<title>PETInfusion 监控</title>
|
2024-12-15 06:07:02 +00:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
font-family: Arial, sans-serif;
|
|
|
|
|
margin: 20px auto;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
background-color: #f5f5f5;
|
|
|
|
|
}
|
|
|
|
|
h2 {
|
|
|
|
|
color: #333;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
2024-12-26 16:08:45 +00:00
|
|
|
h3 {
|
|
|
|
|
margin: 0 0 10px 0;
|
|
|
|
|
color: #333;
|
|
|
|
|
font-size: 1.1em;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
2024-12-15 06:07:02 +00:00
|
|
|
form {
|
2024-12-26 16:08:45 +00:00
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
2024-12-15 06:07:02 +00:00
|
|
|
background: white;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
}
|
|
|
|
|
.form-group {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
2024-12-26 16:08:45 +00:00
|
|
|
margin-bottom: 15px;
|
2024-12-15 06:07:02 +00:00
|
|
|
}
|
2024-12-26 16:08:45 +00:00
|
|
|
.form-group label {
|
|
|
|
|
width: 120px;
|
|
|
|
|
text-align: right;
|
|
|
|
|
padding-right: 10px;
|
|
|
|
|
flex-shrink: 0;
|
2024-12-15 06:07:02 +00:00
|
|
|
}
|
2024-12-26 16:08:45 +00:00
|
|
|
.form-group input {
|
|
|
|
|
width: calc(100% - 130px);
|
|
|
|
|
height: 28px;
|
|
|
|
|
padding: 0 8px;
|
2024-12-15 06:07:02 +00:00
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
border-radius: 4px;
|
2024-12-26 16:08:45 +00:00
|
|
|
}
|
|
|
|
|
.form-group input:focus {
|
|
|
|
|
border-color: #007bff;
|
|
|
|
|
outline: none;
|
|
|
|
|
box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
|
|
|
|
|
}
|
|
|
|
|
.form-group input[type="number"] {
|
|
|
|
|
-moz-appearance: textfield;
|
|
|
|
|
}
|
|
|
|
|
.form-group input[type="number"]::-webkit-outer-spin-button,
|
|
|
|
|
.form-group input[type="number"]::-webkit-inner-spin-button {
|
|
|
|
|
-webkit-appearance: none;
|
|
|
|
|
margin: 0;
|
2024-12-15 06:07:02 +00:00
|
|
|
}
|
|
|
|
|
input[type='submit'] {
|
|
|
|
|
background-color: #4CAF50;
|
|
|
|
|
color: white;
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: block;
|
|
|
|
|
margin: 20px auto 0;
|
|
|
|
|
}
|
|
|
|
|
input[type='submit']:hover {
|
|
|
|
|
background-color: #45a049;
|
|
|
|
|
}
|
|
|
|
|
.status {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin: 20px auto;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
.connected {
|
|
|
|
|
background-color: #dff0d8;
|
|
|
|
|
color: #3c763d;
|
|
|
|
|
border: 1px solid #d6e9c6;
|
|
|
|
|
}
|
|
|
|
|
.disconnected {
|
|
|
|
|
background-color: #f2dede;
|
|
|
|
|
color: #a94442;
|
|
|
|
|
border: 1px solid #ebccd1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.loading {
|
|
|
|
|
display: none;
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.loading.active {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
form.submitting input {
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input[type='submit'].loading {
|
|
|
|
|
background-color: #cccccc;
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
}
|
2024-12-15 08:14:52 +00:00
|
|
|
|
|
|
|
|
.device-status,.network-config {
|
|
|
|
|
background: white;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
2024-12-26 16:08:45 +00:00
|
|
|
width: 70%;
|
2024-12-15 08:14:52 +00:00
|
|
|
margin: 20px auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-group {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-row {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
gap: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-item {
|
|
|
|
|
flex: 1;
|
|
|
|
|
min-width: 200px;
|
|
|
|
|
padding: 15px;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
2024-12-26 16:08:45 +00:00
|
|
|
|
2024-12-15 08:14:52 +00:00
|
|
|
|
|
|
|
|
.status-value {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin: 5px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-label {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #555;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.error {
|
2024-12-18 14:32:01 +00:00
|
|
|
font-weight: bold;
|
2024-12-15 08:14:52 +00:00
|
|
|
color: #dc3545;
|
2024-12-18 14:32:01 +00:00
|
|
|
background-color: yellow;
|
|
|
|
|
transition: color 0.3s ease;
|
2024-12-15 08:14:52 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.success {
|
|
|
|
|
color: #28a745;
|
2024-12-18 14:32:01 +00:00
|
|
|
transition: color 0.3s ease;
|
2024-12-15 08:14:52 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.warning {
|
|
|
|
|
color: #ffc107;
|
2024-12-18 14:32:01 +00:00
|
|
|
transition: color 0.3s ease;
|
2024-12-15 08:14:52 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-row.device-running {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
gap: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-row.device-running .status-item {
|
|
|
|
|
flex: 1;
|
|
|
|
|
min-width: 200px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (min-width: 900px) {
|
|
|
|
|
.status-row.device-running .status-item {
|
|
|
|
|
flex: 1;
|
|
|
|
|
min-width: 0;
|
|
|
|
|
width: calc(33.33% - 10px);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2024-12-26 16:08:45 +00:00
|
|
|
.device-params {
|
|
|
|
|
gap: 20px;
|
2024-12-15 08:14:52 +00:00
|
|
|
}
|
2024-12-26 16:08:45 +00:00
|
|
|
|
|
|
|
|
.device-row {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 20px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.motor-params {
|
|
|
|
|
flex: 1;
|
|
|
|
|
padding: 15px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-row {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
gap: 20px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2024-12-30 08:11:43 +00:00
|
|
|
/* 添加急停状态的特殊样式 */
|
|
|
|
|
|
|
|
|
|
.status-item.emergency-stop.success {
|
|
|
|
|
background-color: #28a745;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-item.emergency-stop.warning {
|
|
|
|
|
background-color: yellow;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-item.emergency-stop.error {
|
|
|
|
|
background-color: #dc3545;
|
|
|
|
|
}
|
|
|
|
|
|
2024-12-15 06:07:02 +00:00
|
|
|
</style>
|
|
|
|
|
<script>
|
2024-12-26 16:08:45 +00:00
|
|
|
// 参数配置模板
|
|
|
|
|
const motorParamFields = [
|
|
|
|
|
{ name: 'name', label: '名称', type: 'text', maxLength: 20 },
|
|
|
|
|
{ name: 'id', label: 'ID', type: 'number', min: 0, max: 255 },
|
|
|
|
|
{ name: 'speed', label: '满速(步/秒)', type: 'number' },
|
|
|
|
|
{ name: 'accel', label: '加速度', type: 'number' },
|
|
|
|
|
{ name: 'decel', label: '减速度', type: 'number' },
|
|
|
|
|
{ name: 'fullCount', label: '总步数', type: 'number' },
|
2024-12-30 08:11:43 +00:00
|
|
|
{ name: 'offsetPos', label: '偏移补偿', type: 'number' },
|
|
|
|
|
{ name: 'speedPercent', label: '速度(%)', type: 'number', min: 0, max: 100 },
|
2024-12-26 16:08:45 +00:00
|
|
|
{ name: 'torque', label: '堵转力矩(%)', type: 'number', min: 0, max: 100 },
|
|
|
|
|
{ name: 'timeout', label: '超时时间(秒)', type: 'number' }
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
// 生成单个设备的参数表单
|
|
|
|
|
function generateMotorParams(deviceType, index) {
|
|
|
|
|
const motorDiv = document.createElement('div');
|
|
|
|
|
motorDiv.className = 'motor-params';
|
2024-12-15 06:07:02 +00:00
|
|
|
|
2024-12-26 16:08:45 +00:00
|
|
|
const title = document.createElement('h3');
|
|
|
|
|
title.textContent = `${deviceType}${index + 1}参数`;
|
|
|
|
|
motorDiv.appendChild(title);
|
|
|
|
|
|
|
|
|
|
motorParamFields.forEach(field => {
|
|
|
|
|
const formGroup = document.createElement('div');
|
|
|
|
|
formGroup.className = 'form-group';
|
|
|
|
|
|
|
|
|
|
const label = document.createElement('label');
|
|
|
|
|
label.textContent = field.label + ':';
|
|
|
|
|
|
|
|
|
|
const input = document.createElement('input');
|
|
|
|
|
input.type = field.type;
|
|
|
|
|
input.name = `${deviceType}${index + 1}_${field.name}`;
|
|
|
|
|
|
|
|
|
|
// 设置输入限制
|
|
|
|
|
if (field.maxLength) input.maxLength = field.maxLength;
|
|
|
|
|
if (field.min !== undefined) input.min = field.min;
|
|
|
|
|
if (field.max !== undefined) input.max = field.max;
|
|
|
|
|
|
|
|
|
|
formGroup.appendChild(label);
|
|
|
|
|
formGroup.appendChild(input);
|
|
|
|
|
motorDiv.appendChild(formGroup);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return motorDiv;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 生成设备组的参数表单
|
|
|
|
|
function generateDeviceGroup(deviceType, count) {
|
|
|
|
|
const container = document.getElementById(`${deviceType}-container`);
|
|
|
|
|
container.innerHTML = ''; // 清空现有内容
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < count; i++) {
|
|
|
|
|
const motorParams = generateMotorParams(deviceType, i);
|
|
|
|
|
container.appendChild(motorParams);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 页面加载时初始化表单
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
// 初始化泵和阀的参数表单
|
|
|
|
|
generateDeviceGroup('pump', 2); // 生成2个泵的参数
|
|
|
|
|
generateDeviceGroup('valve', 2); // 生成2个阀的参数
|
|
|
|
|
|
|
|
|
|
// 获取设备参数并填充表单
|
|
|
|
|
fetch('/device-params')
|
2024-12-17 08:25:23 +00:00
|
|
|
.then(response => response.json())
|
|
|
|
|
.then(data => {
|
2024-12-26 16:08:45 +00:00
|
|
|
// 填充泵参数
|
|
|
|
|
data.pump.forEach((pump, index) => {
|
|
|
|
|
Object.keys(pump).forEach(key => {
|
|
|
|
|
const input = document.querySelector(`input[name="pump${index + 1}_${key}"]`);
|
|
|
|
|
if (input) {
|
|
|
|
|
if (key === 'name') {
|
|
|
|
|
input.value = new TextDecoder().decode(new Uint8Array(pump[key]));
|
|
|
|
|
} else {
|
|
|
|
|
input.value = pump[key];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 填充阀参数
|
|
|
|
|
data.valve.forEach((valve, index) => {
|
|
|
|
|
Object.keys(valve).forEach(key => {
|
|
|
|
|
const input = document.querySelector(`input[name="valve${index + 1}_${key}"]`);
|
|
|
|
|
if (input) {
|
|
|
|
|
if (key === 'name') {
|
|
|
|
|
input.value = new TextDecoder().decode(new Uint8Array(valve[key]));
|
|
|
|
|
} else {
|
|
|
|
|
input.value = valve[key];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
2024-12-17 08:25:23 +00:00
|
|
|
})
|
|
|
|
|
.catch(error => {
|
2024-12-26 16:08:45 +00:00
|
|
|
console.error('加载设备参数失败:', error);
|
2024-12-30 08:11:43 +00:00
|
|
|
|
|
|
|
|
// 获取所有泵和阀的输入框
|
|
|
|
|
const allInputs = document.querySelectorAll('input[name^="pump"], input[name^="valve"]');
|
|
|
|
|
|
|
|
|
|
// 将所有输入框的值设置为 # 并添加错误样式
|
|
|
|
|
allInputs.forEach(input => {
|
|
|
|
|
input.value = '-1';
|
|
|
|
|
input.classList.add('error');
|
|
|
|
|
});
|
2024-12-17 08:25:23 +00:00
|
|
|
});
|
2024-12-30 08:11:43 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function updateDeviceStatus() {
|
|
|
|
|
fetch('/status')
|
|
|
|
|
.then(response => {
|
|
|
|
|
return response.json();
|
|
|
|
|
})
|
|
|
|
|
.then(data => {
|
|
|
|
|
const deviceElement = document.getElementById('device-status');
|
|
|
|
|
deviceElement.textContent = data.deviceStatus ? '正常' : '异常';
|
|
|
|
|
deviceElement.className = data.deviceStatus ? 'success' : 'error';
|
|
|
|
|
|
|
|
|
|
const initStatus = ['等待', '成功', '失败'];
|
|
|
|
|
const initElement = document.getElementById('init-status');
|
|
|
|
|
initElement.textContent = initStatus[data.initStatus];
|
|
|
|
|
initElement.className = data.initStatus === 0 ? 'warning' : (data.initStatus === 1 ? 'success' : 'error');
|
|
|
|
|
|
|
|
|
|
const errorElement = document.getElementById('error-status');
|
|
|
|
|
errorElement.textContent = data.errorCode ? `Error: ${data.errorCode}` : '正常';
|
|
|
|
|
errorElement.className = data.errorCode ? 'error' : 'success';
|
|
|
|
|
|
|
|
|
|
const stopElement = document.getElementById('stop-status');
|
|
|
|
|
stopElement.textContent = data.stopStatus ? '停止' : '正常';
|
|
|
|
|
stopElement.className = data.stopStatus ? 'error' : 'success';
|
|
|
|
|
|
|
|
|
|
document.getElementById('valve1-angle').textContent = `${data.valves.angle1}°`;
|
|
|
|
|
document.getElementById('valve2-angle').textContent = `${data.valves.angle2}°`;
|
|
|
|
|
document.getElementById('valve1-angle').className = 'success';
|
|
|
|
|
document.getElementById('valve2-angle').className = 'success';
|
|
|
|
|
|
|
|
|
|
const pumpStatus = ['停止', '顺时针', '逆时针'];
|
|
|
|
|
document.getElementById('pump1-status').textContent =
|
|
|
|
|
`${pumpStatus[data.pumps.status1] || '#'} (${data.pumps.speed1}%)`;
|
|
|
|
|
document.getElementById('pump2-status').textContent =
|
|
|
|
|
`${pumpStatus[data.pumps.status2] || '#'} (${data.pumps.speed2}%)`;
|
|
|
|
|
document.getElementById('pump1-status').className = 'success';
|
|
|
|
|
document.getElementById('pump2-status').className = 'success';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const bubbleElement = document.getElementById('bubble-status');
|
|
|
|
|
bubbleElement.textContent = data.bubbleStatus ? '有' : '无';
|
|
|
|
|
bubbleElement.className = data.bubbleStatus ? 'error' : 'success';
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.error('Status update failed:', error);
|
|
|
|
|
|
|
|
|
|
// 修改状态值更新逻辑
|
|
|
|
|
const statusElements = {
|
|
|
|
|
'device-status': '#',
|
|
|
|
|
'init-status': '#',
|
|
|
|
|
'error-status': '#',
|
|
|
|
|
'stop-status': '#',
|
|
|
|
|
'valve1-angle': '#',
|
|
|
|
|
'valve2-angle': '#',
|
|
|
|
|
'pump1-status': '#',
|
|
|
|
|
'pump2-status': '#',
|
|
|
|
|
'bubble-status': '#'
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 更新所有状态值和样式
|
|
|
|
|
Object.entries(statusElements).forEach(([id, value]) => {
|
|
|
|
|
const element = document.getElementById(id);
|
|
|
|
|
if (element) {
|
|
|
|
|
element.textContent = value;
|
|
|
|
|
// 找到父级的 status-value 元素并应用样式
|
|
|
|
|
const statusValue = element.closest('.status-value');
|
|
|
|
|
if (statusValue) {
|
|
|
|
|
statusValue.className = 'status-value error';
|
|
|
|
|
} else {
|
|
|
|
|
element.className = 'error';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
const emergencyStopElement = document.querySelector('.status-item.emergency-stop');
|
|
|
|
|
if (emergencyStopElement) {
|
|
|
|
|
emergencyStopElement.classList.remove('success', 'warning', 'error');
|
|
|
|
|
emergencyStopElement.classList.add('warning');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setInterval(updateDeviceStatus, 1000);
|
2024-12-15 06:07:02 +00:00
|
|
|
});
|
2024-12-26 16:08:45 +00:00
|
|
|
|
|
|
|
|
// 如果需要动态添加新的泵或阀，可以调用：
|
|
|
|
|
// generateDeviceGroup('pump', 新的数量);
|
2024-12-15 06:07:02 +00:00
|
|
|
</script>
|
|
|
|
|
</head><body>
|
2024-12-15 08:14:52 +00:00
|
|
|
<div class='device-status'>
|
2024-12-18 09:39:21 +00:00
|
|
|
<h2>系统状态信息</h2>
|
2024-12-15 08:14:52 +00:00
|
|
|
|
|
|
|
|
<div class='status-group'>
|
|
|
|
|
<!-- 设备信息行 -->
|
|
|
|
|
<div class='status-row'>
|
|
|
|
|
<div class='status-item full-width'>
|
2024-12-26 16:08:45 +00:00
|
|
|
<h3>设备状态</h3>
|
2024-12-15 08:14:52 +00:00
|
|
|
<div class='status-value'>
|
2024-12-26 16:08:45 +00:00
|
|
|
<span class='status-label'>下挂设备状态</span>
|
2024-12-15 08:14:52 +00:00
|
|
|
<span id='device-status'>#</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class='status-value'>
|
2024-12-18 09:39:21 +00:00
|
|
|
<span class='status-label'>初始化状态</span>
|
2024-12-15 08:14:52 +00:00
|
|
|
<span id='init-status'>#</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 设备运行状态行 -->
|
|
|
|
|
<div class='status-row device-running'>
|
|
|
|
|
<div class='status-item'>
|
2024-12-18 09:39:21 +00:00
|
|
|
<h3>三通阀状态</h3>
|
2024-12-15 08:14:52 +00:00
|
|
|
<div class='status-value'>
|
2024-12-18 09:39:21 +00:00
|
|
|
<span class='status-label'>1#阀角度</span>
|
2024-12-15 08:14:52 +00:00
|
|
|
<span id='valve1-angle'>#</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class='status-value'>
|
2024-12-18 09:39:21 +00:00
|
|
|
<span class='status-label'>2#阀角度</span>
|
2024-12-15 08:14:52 +00:00
|
|
|
<span id='valve2-angle'>#</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class='status-item'>
|
2024-12-18 09:39:21 +00:00
|
|
|
<h3>泵状态</h3>
|
2024-12-15 08:14:52 +00:00
|
|
|
<div class='status-value'>
|
2024-12-18 09:39:21 +00:00
|
|
|
<span class='status-label'>1#泵</span>
|
2024-12-15 08:14:52 +00:00
|
|
|
<span id='pump1-status'>#</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class='status-value'>
|
2024-12-18 09:39:21 +00:00
|
|
|
<span class='status-label'>2#泵</span>
|
2024-12-15 08:14:52 +00:00
|
|
|
<span id='pump2-status'>#</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class='status-item'>
|
2024-12-18 09:39:21 +00:00
|
|
|
<h3>传感器状态</h3>
|
2024-12-15 08:14:52 +00:00
|
|
|
<div class='status-value'>
|
2024-12-18 09:39:21 +00:00
|
|
|
<span class='status-label'>气泡传感器</span>
|
2024-12-15 08:14:52 +00:00
|
|
|
<span id='bubble-status'>#</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2024-12-30 08:11:43 +00:00
|
|
|
<div class='status-item emergency-stop'>
|
2024-12-18 09:39:21 +00:00
|
|
|
<h3>急停</h3>
|
2024-12-15 08:14:52 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 错误状态行 -->
|
|
|
|
|
<div class='status-row'>
|
|
|
|
|
<div class='status-item full-width'>
|
2024-12-18 09:39:21 +00:00
|
|
|
<h3>错误状态</h3>
|
2024-12-15 08:14:52 +00:00
|
|
|
<div class='status-value'>
|
2024-12-18 09:39:21 +00:00
|
|
|
<span class='status-label'>错误信息</span>
|
2024-12-15 08:14:52 +00:00
|
|
|
<span id='error-status'>#</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
2024-12-26 16:08:45 +00:00
|
|
|
<div class='network-config'>
|
|
|
|
|
<h2>设备参数设置</h2>
|
|
|
|
|
<form method='post' action='/device-params'>
|
|
|
|
|
<div class='device-params'>
|
2024-12-30 08:11:43 +00:00
|
|
|
|
2024-12-26 16:08:45 +00:00
|
|
|
<div class='device-group' id='pump-group'>
|
2024-12-30 08:11:43 +00:00
|
|
|
<h3>传感器参数设置</h3>
|
|
|
|
|
<div class='form-group'>
|
|
|
|
|
<label>IP地址:</label>
|
|
|
|
|
<input type='text' name='ip' value='#.#.#.#'>
|
2024-12-26 16:08:45 +00:00
|
|
|
</div>
|
2024-12-30 08:11:43 +00:00
|
|
|
<div class='form-group'>
|
|
|
|
|
<label>路径:</label>
|
|
|
|
|
<input type='text' name='addr' value='#.#.#.#'>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
2024-12-26 16:08:45 +00:00
|
|
|
|
|
|
|
|
<div class='device-group' id='valve-group'>
|
|
|
|
|
<h3>阀参数设置</h3>
|
|
|
|
|
<div class='device-row' id='valve-container'>
|
|
|
|
|
<!-- 阀参数将由JS动态生成 -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-12-30 08:11:43 +00:00
|
|
|
|
|
|
|
|
<div class='device-group' id='pump-group'>
|
|
|
|
|
<h3>泵参数设置</h3>
|
|
|
|
|
<div class='device-row' id='pump-container'>
|
|
|
|
|
<!-- 泵参数将由JS动态生成 -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-12-26 16:08:45 +00:00
|
|
|
</div>
|
|
|
|
|
<input type='submit' value='保存设备参数'>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
|
2024-12-15 08:14:52 +00:00
|
|
|
<div class='network-config'>
|
|
|
|
|
<h2>参数设置</h2>
|
2024-12-15 06:07:02 +00:00
|
|
|
<form method='post' action='/config'>
|
|
|
|
|
<div class='form-group'>
|
2024-12-18 09:39:21 +00:00
|
|
|
<label>IP地址:</label>
|
2024-12-17 08:25:23 +00:00
|
|
|
<input type='text' name='ip' value='#.#.#.#'>
|
2024-12-15 06:07:02 +00:00
|
|
|
</div>
|
2024-12-18 09:39:21 +00:00
|
|
|
<input type='submit' value='保存配置'>
|
2024-12-15 06:07:02 +00:00
|
|
|
</form>
|
|
|
|
|
</div>
|
2024-12-15 08:14:52 +00:00
|
|
|
|
2024-12-15 06:07:02 +00:00
|
|
|
</body></html>)"
|
