From 975ca5e894f4a22948e147e56c54649c3cb63637 Mon Sep 17 00:00:00 2001 From: hubian <908234780@qq.com> Date: Fri, 17 Apr 2026 13:01:12 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=90=AF=E5=8A=A8/=E5=81=9C=E6=AD=A2?= =?UTF-8?q?=E5=90=88=E5=B9=B6=E4=B8=BA=E5=88=87=E6=8D=A2=E6=8C=89=E9=92=AE?= =?UTF-8?q?=20+=20=E8=AE=BE=E7=BD=AE=E5=8F=82=E6=95=B0=E6=94=B9=E4=B8=BA?= =?UTF-8?q?=E4=B8=AD=E6=96=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/static/app.js | 92 ++++++++++++++++++++++++++----------------- web/static/index.html | 69 +++++++++++++++++--------------- web/static/style.css | 13 ++++++ 3 files changed, 106 insertions(+), 68 deletions(-) diff --git a/web/static/app.js b/web/static/app.js index 90a58c4..7ef8433 100644 --- a/web/static/app.js +++ b/web/static/app.js @@ -73,27 +73,17 @@ function loadStatus() { } function updateUI(data) { - var startBtn = document.getElementById('start-btn'); - var stopBtn = document.getElementById('stop-btn'); + // 更新切换按钮状态 + updateToggleButton(data.scheduler.running); - if (data.scheduler.running) { - startBtn.disabled = true; - stopBtn.disabled = false; - document.getElementById('scheduler-status').innerHTML = 'Status: Running'; - } else { - startBtn.disabled = false; - stopBtn.disabled = true; - document.getElementById('scheduler-status').innerHTML = 'Status: Stopped'; - } - - document.getElementById('capture-count').textContent = 'Capture count: ' + data.scheduler.capture_count; + document.getElementById('capture-count').textContent = '拍照次数: ' + data.scheduler.capture_count; document.getElementById('total-images').textContent = data.stats.total_images; document.getElementById('analyzed-images').textContent = data.stats.analyzed_images; document.getElementById('total-events').textContent = data.stats.total_events; - // Event type filter + // 事件类型筛选 var eventFilter = document.getElementById('event-filter'); - eventFilter.innerHTML = ''; + eventFilter.innerHTML = ''; data.stats.event_types.forEach(function(item) { var opt = document.createElement('option'); opt.value = item.type; @@ -103,30 +93,58 @@ function updateUI(data) { } // Control -function startScheduler() { - fetch(API_BASE + '/api/scheduler/start', {method: 'POST'}) - .then(function(res) { return res.json(); }) - .then(function(data) { - if (data.success) { - showToast('Started!', 1500); - refreshAll(); - } else { - showToast('Failed: ' + data.error, 3000); - } - }) - .catch(function(e) { showToast('Error: ' + e.message, 3000); }); +function toggleScheduler() { + var btn = document.getElementById('toggle-btn'); + + if (btn.classList.contains('stopped')) { + // 当前已停止，启动 + fetch(API_BASE + '/api/scheduler/start', {method: 'POST'}) + .then(function(res) { return res.json(); }) + .then(function(data) { + if (data.success) { + btn.classList.remove('stopped'); + btn.classList.add('running'); + btn.innerHTML = '▶ 运行中'; + btn.style.background = '#4CAF50'; + showToast('已启动！', 1500); + refreshAll(); + } else { + showToast('启动失败: ' + data.error, 3000); + } + }) + .catch(function(e) { showToast('错误: ' + e.message, 3000); }); + } else { + // 当前运行中，停止 + fetch(API_BASE + '/api/scheduler/stop', {method: 'POST'}) + .then(function(res) { return res.json(); }) + .then(function(data) { + if (data.success) { + btn.classList.remove('running'); + btn.classList.add('stopped'); + btn.innerHTML = '⏹ 已停止'; + btn.style.background = '#f44336'; + showToast('已停止！', 1500); + refreshAll(); + } + }) + .catch(function(e) { showToast('错误: ' + e.message, 3000); }); + } } -function stopScheduler() { - fetch(API_BASE + '/api/scheduler/stop', {method: 'POST'}) - .then(function(res) { return res.json(); }) - .then(function(data) { - if (data.success) { - showToast('Stopped!', 1500); - refreshAll(); - } - }) - .catch(function(e) { showToast('Error: ' + e.message, 3000); }); +function updateToggleButton(running) { + var btn = document.getElementById('toggle-btn'); + + if (running) { + btn.classList.remove('stopped'); + btn.classList.add('running'); + btn.innerHTML = '▶ 运行中'; + btn.style.background = '#4CAF50'; + } else { + btn.classList.remove('running'); + btn.classList.add('stopped'); + btn.innerHTML = '⏹ 已停止'; + btn.style.background = '#f44336'; + } } function captureNow() { diff --git a/web/static/index.html b/web/static/index.html index 2e838ce..76a6c7f 100644 --- a/web/static/index.html +++ b/web/static/index.html @@ -23,8 +23,7 @@

📹 摄像头控制

- - +
@@ -102,108 +101,116 @@ diff --git a/web/static/style.css b/web/static/style.css index adc7f67..c171ce9 100644 --- a/web/static/style.css +++ b/web/static/style.css @@ -128,6 +128,19 @@ button { background: #f57c00; } +.btn-toggle { + min-width: 100px; + font-weight: bold; +} + +.btn-toggle.stopped { + background: #f44336; +} + +.btn-toggle.running { + background: #4CAF50; +} + /* 统计网格 */ .stats-grid { display: grid;