更新error的css

This commit is contained in:
murmur 2024-12-18 22:32:01 +08:00
parent dbd33056d3
commit 328adfb707

View File

@ -188,15 +188,20 @@ R"(<!DOCTYPE html>
}
.error {
font-weight: bold;
color: #dc3545;
background-color: yellow;
transition: color 0.3s ease;
}
.success {
color: #28a745;
transition: color 0.3s ease;
}
.warning {
color: #ffc107;
transition: color 0.3s ease;
}
@media screen and (max-width: 768px) {
@ -300,20 +305,46 @@ document.addEventListener('DOMContentLoaded', function() {
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;
element.className = 'error'; // 应用错误样式
}
});
});
}