105 lines
3.0 KiB
JavaScript
105 lines
3.0 KiB
JavaScript
// 多摄像头监控系统前端逻辑
|
|
|
|
function refreshCamera(cameraId) {
|
|
const frame = document.getElementById(`frame-${cameraId}`);
|
|
const status = document.getElementById(`status-${cameraId}`);
|
|
|
|
status.textContent = '🔄 刷新中...';
|
|
|
|
// 添加时间戳避免缓存
|
|
const originalSrc = frame.src.split('?')[0];
|
|
frame.src = originalSrc + `?t=${Date.now()}`;
|
|
|
|
setTimeout(() => {
|
|
status.textContent = '✅ 在线';
|
|
}, 2000);
|
|
}
|
|
|
|
function refreshAllCameras() {
|
|
document.querySelectorAll('.camera-status').forEach(status => {
|
|
status.textContent = '🔄 刷新中...';
|
|
});
|
|
|
|
for (let i = 1; i <= 6; i++) {
|
|
refreshCamera(i);
|
|
}
|
|
}
|
|
|
|
function toggleFullscreen(cameraId) {
|
|
const frame = document.getElementById(`frame-${cameraId}`);
|
|
|
|
if (!document.fullscreenElement) {
|
|
if (frame.requestFullscreen) {
|
|
frame.requestFullscreen();
|
|
} else if (frame.webkitRequestFullscreen) {
|
|
frame.webkitRequestFullscreen();
|
|
} else if (frame.msRequestFullscreen) {
|
|
frame.msRequestFullscreen();
|
|
}
|
|
} else {
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
} else if (document.webkitExitFullscreen) {
|
|
document.webkitExitFullscreen();
|
|
} else if (document.msExitFullscreen) {
|
|
document.msExitFullscreen();
|
|
}
|
|
}
|
|
}
|
|
|
|
function switchCameraNumber(event, cameraId, cameraNumber) {
|
|
const frame = document.getElementById(`frame-${cameraId}`);
|
|
const controls = document.getElementById(`controls-${cameraId}`);
|
|
const buttons = controls.querySelectorAll('.selector-btn');
|
|
|
|
// 更新按钮状态
|
|
buttons.forEach(btn => {
|
|
btn.classList.remove('active');
|
|
});
|
|
event.target.classList.add('active');
|
|
|
|
// 更新摄像头URL
|
|
const currentUrl = frame.src;
|
|
const baseUrl = currentUrl.split('?')[0];
|
|
const params = new URLSearchParams(currentUrl.split('?')[1]);
|
|
const room = params.get('room');
|
|
|
|
// 构建新的URL
|
|
let newUrl;
|
|
if (cameraNumber === 'mixed') {
|
|
newUrl = `${baseUrl}?room=${room}&camera=mixed&t=${Date.now()}`;
|
|
} else {
|
|
newUrl = `${baseUrl}?room=${room}&camera=camera-${cameraNumber}&t=${Date.now()}`;
|
|
}
|
|
frame.src = newUrl;
|
|
|
|
// 更新状态显示
|
|
const status = document.getElementById(`status-${cameraId}`);
|
|
status.textContent = '🔄 切换中...';
|
|
|
|
setTimeout(() => {
|
|
status.textContent = '✅ 在线';
|
|
}, 1000);
|
|
}
|
|
|
|
function updateCurrentTime() {
|
|
const now = new Date();
|
|
const timeString = now.toLocaleString('zh-CN', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit',
|
|
hour12: false
|
|
});
|
|
document.getElementById('currentTime').textContent = timeString;
|
|
}
|
|
|
|
// 每秒更新当前时间
|
|
setInterval(updateCurrentTime, 1000);
|
|
|
|
// 页面加载时更新时间
|
|
window.onload = function() {
|
|
updateCurrentTime();
|
|
}; |