457 lines
15 KiB
JavaScript
457 lines
15 KiB
JavaScript
// 视觉记录系统前端逻辑
|
|
|
|
const API_BASE = '';
|
|
let currentImageId = null;
|
|
let refreshTimer = null;
|
|
let refreshInterval = 5;
|
|
|
|
// ============== 初始化 ==============
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadConfig();
|
|
refreshAll();
|
|
startAutoRefresh();
|
|
});
|
|
|
|
function startAutoRefresh() {
|
|
if (refreshTimer) {
|
|
clearInterval(refreshTimer);
|
|
}
|
|
refreshTimer = setInterval(refreshAll, refreshInterval * 1000);
|
|
document.getElementById('refresh-info').textContent = `刷新间隔: ${refreshInterval}秒`;
|
|
}
|
|
|
|
function refreshAll() {
|
|
loadStatus();
|
|
loadDateFolders();
|
|
loadImages();
|
|
loadEvents();
|
|
}
|
|
|
|
// ============== 配置相关 ==============
|
|
|
|
async function loadConfig() {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/config`);
|
|
const config = await res.json();
|
|
|
|
refreshInterval = config.refresh_interval || 5;
|
|
startAutoRefresh();
|
|
|
|
// 更新显示数量提示
|
|
document.getElementById('display-limit-note')?.textContent =
|
|
`显示最近 ${config.display_limit || 20} 条`;
|
|
} catch (e) {
|
|
console.error('加载配置失败:', e);
|
|
}
|
|
}
|
|
|
|
function openSettingsModal() {
|
|
loadSettingsForm();
|
|
document.getElementById('settings-modal').classList.add('active');
|
|
}
|
|
|
|
function closeSettingsModal() {
|
|
document.getElementById('settings-modal').classList.remove('active');
|
|
}
|
|
|
|
async function loadSettingsForm() {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/config`);
|
|
const config = await res.json();
|
|
|
|
document.getElementById('setting-images-dir').value = config.images_dir || '';
|
|
document.getElementById('setting-interval').value = config.capture_interval || 60;
|
|
document.getElementById('setting-camera-index').value = config.camera_index || 0;
|
|
document.getElementById('setting-auto-analyze').checked = config.auto_analyze !== false;
|
|
document.getElementById('setting-display-limit').value = config.display_limit || 20;
|
|
document.getElementById('setting-refresh-interval').value = config.refresh_interval || 5;
|
|
document.getElementById('setting-api-url').value = config.vision_api_url || '';
|
|
document.getElementById('setting-api-key').value = config.vision_api_key || '';
|
|
document.getElementById('setting-model').value = config.vision_model || '';
|
|
} catch (e) {
|
|
console.error('加载设置失败:', e);
|
|
}
|
|
}
|
|
|
|
async function saveSettings() {
|
|
const settings = {
|
|
images_dir: document.getElementById('setting-images-dir').value,
|
|
capture_interval: parseInt(document.getElementById('setting-interval').value),
|
|
camera_index: parseInt(document.getElementById('setting-camera-index').value),
|
|
auto_analyze: document.getElementById('setting-auto-analyze').checked,
|
|
display_limit: parseInt(document.getElementById('setting-display-limit').value),
|
|
refresh_interval: parseInt(document.getElementById('setting-refresh-interval').value),
|
|
vision_api_url: document.getElementById('setting-api-url').value,
|
|
vision_api_key: document.getElementById('setting-api-key').value,
|
|
vision_model: document.getElementById('setting-model').value
|
|
};
|
|
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/config`, {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify(settings)
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (data.success) {
|
|
alert('设置已保存！');
|
|
|
|
// 更新刷新间隔
|
|
refreshInterval = settings.refresh_interval;
|
|
startAutoRefresh();
|
|
|
|
closeSettingsModal();
|
|
refreshAll();
|
|
}
|
|
} catch (e) {
|
|
alert('保存失败: ' + e.message);
|
|
}
|
|
}
|
|
|
|
function browseImagesDir() {
|
|
// 提示用户手动输入路径
|
|
alert('请手动输入图片保存目录路径\n例如: D:\\vision-images\n每天的图片会自动保存到日期子文件夹');
|
|
}
|
|
|
|
// ============== 状态相关 ==============
|
|
|
|
async function loadStatus() {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/status`);
|
|
const data = await res.json();
|
|
|
|
updateStatusBar(data.scheduler);
|
|
updateStats(data.stats);
|
|
|
|
// 更新按钮状态
|
|
const startBtn = document.getElementById('start-btn');
|
|
const stopBtn = document.getElementById('stop-btn');
|
|
|
|
if (data.scheduler.running) {
|
|
startBtn.disabled = true;
|
|
stopBtn.disabled = false;
|
|
document.getElementById('scheduler-status').innerHTML =
|
|
`状态: <span style="color: #4CAF50;">✓ 运行中</span>`;
|
|
} else {
|
|
startBtn.disabled = false;
|
|
stopBtn.disabled = true;
|
|
document.getElementById('scheduler-status').innerHTML =
|
|
`状态: <span style="color: #f44336;">⏹ 已停止</span>`;
|
|
}
|
|
|
|
document.getElementById('capture-count').textContent =
|
|
`拍照次数: ${data.scheduler.capture_count}`;
|
|
|
|
} catch (e) {
|
|
console.error('加载状态失败:', e);
|
|
}
|
|
}
|
|
|
|
function updateStats(stats) {
|
|
document.getElementById('total-images').textContent = stats.total_images;
|
|
document.getElementById('analyzed-images').textContent = stats.analyzed_images;
|
|
document.getElementById('total-events').textContent = stats.total_events;
|
|
|
|
// 更新事件类型筛选
|
|
const eventFilter = document.getElementById('event-filter');
|
|
const currentValue = eventFilter.value;
|
|
|
|
eventFilter.innerHTML = '<option value="all">全部类型</option>';
|
|
stats.event_types.forEach(item => {
|
|
const opt = document.createElement('option');
|
|
opt.value = item.type;
|
|
opt.textContent = `${item.type} (${item.count})`;
|
|
eventFilter.appendChild(opt);
|
|
});
|
|
|
|
eventFilter.value = currentValue;
|
|
}
|
|
|
|
// ============== 控制相关 ==============
|
|
|
|
async function startScheduler() {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/scheduler/start`, {
|
|
method: 'POST'
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (data.success) {
|
|
alert('启动成功！');
|
|
refreshAll();
|
|
} else {
|
|
alert('启动失败: ' + data.error);
|
|
}
|
|
} catch (e) {
|
|
alert('请求失败: ' + e.message);
|
|
}
|
|
}
|
|
|
|
async function stopScheduler() {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/scheduler/stop`, {
|
|
method: 'POST'
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (data.success) {
|
|
alert('已停止！');
|
|
refreshAll();
|
|
}
|
|
} catch (e) {
|
|
alert('请求失败: ' + e.message);
|
|
}
|
|
}
|
|
|
|
async function captureNow() {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/capture`, {
|
|
method: 'POST'
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (data.success) {
|
|
alert(`拍照成功！\n图片ID: #${data.image_id}\n保存到: ${data.date_folder}`);
|
|
refreshAll();
|
|
} else {
|
|
alert('拍照失败: ' + data.error);
|
|
}
|
|
} catch (e) {
|
|
alert('请求失败: ' + e.message);
|
|
}
|
|
}
|
|
|
|
async function analyzeUnanalyzed() {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/analyze/unanalyzed`, {
|
|
method: 'POST'
|
|
});
|
|
const data = await res.json();
|
|
|
|
alert(`分析了 ${data.results.length} 张图片`);
|
|
refreshAll();
|
|
} catch (e) {
|
|
alert('请求失败: ' + e.message);
|
|
}
|
|
}
|
|
|
|
// ============== 日期文件夹相关 ==============
|
|
|
|
async function loadDateFolders() {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/date-folders`);
|
|
const data = await res.json();
|
|
|
|
const dateFilter = document.getElementById('date-filter');
|
|
const currentValue = dateFilter.value;
|
|
|
|
dateFilter.innerHTML = '<option value="all">全部日期</option>';
|
|
data.folders.forEach(item => {
|
|
const opt = document.createElement('option');
|
|
opt.value = item.date;
|
|
opt.textContent = `${item.date} (${item.count}张)`;
|
|
dateFilter.appendChild(opt);
|
|
});
|
|
|
|
dateFilter.value = currentValue;
|
|
} catch (e) {
|
|
console.error('加载日期文件夹失败:', e);
|
|
}
|
|
}
|
|
|
|
// ============== 图片相关 ==============
|
|
|
|
async function loadImages() {
|
|
const dateFilter = document.getElementById('date-filter').value;
|
|
const imageFilter = document.getElementById('image-filter').value;
|
|
const analyzedOnly = imageFilter === 'analyzed';
|
|
|
|
try {
|
|
let url = `${API_BASE}/api/images?limit=100&analyzed_only=${analyzedOnly}`;
|
|
if (dateFilter !== 'all') {
|
|
url += `&date_folder=${dateFilter}`;
|
|
}
|
|
|
|
const res = await fetch(url);
|
|
const data = await res.json();
|
|
|
|
renderImagesList(data.images);
|
|
} catch (e) {
|
|
console.error('加载图片失败:', e);
|
|
}
|
|
}
|
|
|
|
function renderImagesList(images) {
|
|
const list = document.getElementById('images-list');
|
|
list.innerHTML = '';
|
|
|
|
if (images.length === 0) {
|
|
list.innerHTML = '<p style="color: #888; text-align: center;">暂无图片记录</p>';
|
|
return;
|
|
}
|
|
|
|
images.forEach((img, index) => {
|
|
const item = document.createElement('div');
|
|
item.className = `image-item ${img.analyzed ? 'analyzed' : 'unanalyzed'}`;
|
|
item.onclick = () => openImageModal(img.id);
|
|
|
|
const time = new Date(img.timestamp).toLocaleString('zh-CN');
|
|
|
|
item.innerHTML = `
|
|
<span class="image-number">#${img.id}</span>
|
|
<span class="image-time">${time}</span>
|
|
<span class="image-status ${img.analyzed ? 'analyzed' : 'unanalyzed'}">
|
|
${img.analyzed ? '✓ 已分析' : '○ 未分析'}
|
|
</span>
|
|
<span class="image-events-summary">${img.events_summary || '无事件'}</span>
|
|
`;
|
|
|
|
list.appendChild(item);
|
|
});
|
|
}
|
|
|
|
async function openImageModal(imageId) {
|
|
currentImageId = imageId;
|
|
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/images/${imageId}`);
|
|
const data = await res.json();
|
|
|
|
const modal = document.getElementById('image-modal');
|
|
const modalImg = document.getElementById('modal-image');
|
|
const modalTitle = document.getElementById('modal-title');
|
|
const modalTime = document.getElementById('modal-time');
|
|
const modalFolder = document.getElementById('modal-folder');
|
|
const modalEvents = document.getElementById('modal-events');
|
|
|
|
// 获取图片文件名
|
|
const filename = data.path.split('/').pop().split('\\').pop();
|
|
modalImg.src = `/images/${filename}`;
|
|
modalTitle.textContent = `图片 #${data.id}`;
|
|
modalTime.textContent = `时间: ${new Date(data.timestamp).toLocaleString('zh-CN')}`;
|
|
modalFolder.textContent = `日期文件夹: ${data.date_folder || '未知'}`;
|
|
|
|
modalEvents.innerHTML = '';
|
|
if (data.events && data.events.length > 0) {
|
|
data.events.forEach(event => {
|
|
const eventDiv = document.createElement('div');
|
|
eventDiv.className = 'modal-event';
|
|
eventDiv.innerHTML = `
|
|
<strong>${event.event_type}</strong>
|
|
<span class="event-confidence">${event.confidence}</span>
|
|
<div>${event.description}</div>
|
|
`;
|
|
modalEvents.appendChild(eventDiv);
|
|
});
|
|
} else {
|
|
modalEvents.innerHTML = '<p style="color: #888;">暂无事件记录</p>';
|
|
}
|
|
|
|
modal.classList.add('active');
|
|
} catch (e) {
|
|
console.error('加载图片详情失败:', e);
|
|
}
|
|
}
|
|
|
|
function closeImageModal() {
|
|
document.getElementById('image-modal').classList.remove('active');
|
|
currentImageId = null;
|
|
}
|
|
|
|
async function analyzeCurrentImage() {
|
|
if (!currentImageId) return;
|
|
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/analyze/${currentImageId}`, {
|
|
method: 'POST'
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (data.success) {
|
|
alert('分析完成！');
|
|
openImageModal(currentImageId);
|
|
refreshAll();
|
|
} else {
|
|
alert('分析失败: ' + data.error);
|
|
}
|
|
} catch (e) {
|
|
alert('请求失败: ' + e.message);
|
|
}
|
|
}
|
|
|
|
async function deleteCurrentImage() {
|
|
if (!currentImageId) return;
|
|
|
|
if (!confirm('确定删除此图片？')) return;
|
|
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/images/${currentImageId}`, {
|
|
method: 'DELETE'
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (data.success) {
|
|
closeImageModal();
|
|
refreshAll();
|
|
}
|
|
} catch (e) {
|
|
alert('请求失败: ' + e.message);
|
|
}
|
|
}
|
|
|
|
// ============== 事件相关 ==============
|
|
|
|
async function loadEvents() {
|
|
const filter = document.getElementById('event-filter').value;
|
|
const eventType = filter === 'all' ? '' : filter;
|
|
|
|
try {
|
|
let url = `${API_BASE}/api/events?limit=100`;
|
|
if (eventType) {
|
|
url += `&event_type=${encodeURIComponent(eventType)}`;
|
|
}
|
|
|
|
const res = await fetch(url);
|
|
const data = await res.json();
|
|
|
|
renderEvents(data.events);
|
|
} catch (e) {
|
|
console.error('加载事件失败:', e);
|
|
}
|
|
}
|
|
|
|
function renderEvents(events) {
|
|
const list = document.getElementById('events-list');
|
|
list.innerHTML = '';
|
|
|
|
if (events.length === 0) {
|
|
list.innerHTML = '<p style="color: #888; text-align: center;">暂无事件记录</p>';
|
|
return;
|
|
}
|
|
|
|
events.forEach(event => {
|
|
const card = document.createElement('div');
|
|
card.className = `event-card type-${event.event_type}`;
|
|
|
|
const time = new Date(event.timestamp).toLocaleString('zh-CN');
|
|
|
|
card.innerHTML = `
|
|
<div class="event-header">
|
|
<span class="event-type">${event.event_type}</span>
|
|
<span class="event-time">${time}</span>
|
|
</div>
|
|
<div class="event-desc">${event.description}</div>
|
|
<div class="event-confidence">${event.confidence}</div>
|
|
`;
|
|
|
|
card.onclick = () => openImageModal(event.image_id);
|
|
list.appendChild(card);
|
|
});
|
|
}
|
|
|
|
// 筛选变化监听
|
|
document.getElementById('date-filter').addEventListener('change', loadImages);
|
|
document.getElementById('image-filter').addEventListener('change', loadImages);
|
|
document.getElementById('event-filter').addEventListener('change', loadEvents); |