fix: 重写 app.js 使用传统语法避免 Windows 编码问题
This commit is contained in:
@@ -1,14 +1,11 @@
|
||||
// 视觉记录系统前端逻辑
|
||||
// Vision Record System - Frontend Logic
|
||||
|
||||
const API_BASE = '';
|
||||
let currentImageId = null;
|
||||
let refreshTimer = null;
|
||||
let refreshInterval = 5;
|
||||
var API_BASE = '';
|
||||
var currentImageId = null;
|
||||
var refreshTimer = null;
|
||||
|
||||
// ============== 初始化 ==============
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadConfig();
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
refreshAll();
|
||||
startAutoRefresh();
|
||||
});
|
||||
@@ -17,342 +14,178 @@ function startAutoRefresh() {
|
||||
if (refreshTimer) {
|
||||
clearInterval(refreshTimer);
|
||||
}
|
||||
refreshTimer = setInterval(refreshAll, refreshInterval * 1000);
|
||||
document.getElementById('refresh-info').textContent = `刷新间隔: ${refreshInterval}秒`;
|
||||
refreshTimer = setInterval(refreshAll, 5000);
|
||||
}
|
||||
|
||||
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)
|
||||
// Status
|
||||
function loadStatus() {
|
||||
fetch(API_BASE + '/api/status')
|
||||
.then(function(res) { return res.json(); })
|
||||
.then(function(data) {
|
||||
updateUI(data);
|
||||
})
|
||||
.catch(function(e) {
|
||||
console.error('Load status failed:', e);
|
||||
});
|
||||
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;
|
||||
function updateUI(data) {
|
||||
var startBtn = document.getElementById('start-btn');
|
||||
var stopBtn = document.getElementById('stop-btn');
|
||||
|
||||
// 更新事件类型筛选
|
||||
const eventFilter = document.getElementById('event-filter');
|
||||
const currentValue = eventFilter.value;
|
||||
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';
|
||||
}
|
||||
|
||||
eventFilter.innerHTML = '<option value="all">全部类型</option>';
|
||||
stats.event_types.forEach(item => {
|
||||
const opt = document.createElement('option');
|
||||
document.getElementById('capture-count').textContent = 'Capture count: ' + 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 = '<option value="all">All types</option>';
|
||||
data.stats.event_types.forEach(function(item) {
|
||||
var opt = document.createElement('option');
|
||||
opt.value = item.type;
|
||||
opt.textContent = `${item.type} (${item.count})`;
|
||||
opt.textContent = item.type + ' (' + item.count + ')';
|
||||
eventFilter.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
// Control
|
||||
function startScheduler() {
|
||||
fetch(API_BASE + '/api/scheduler/start', {method: 'POST'})
|
||||
.then(function(res) { return res.json(); })
|
||||
.then(function(data) {
|
||||
if (data.success) {
|
||||
alert('Started!');
|
||||
refreshAll();
|
||||
} else {
|
||||
alert('Failed: ' + data.error);
|
||||
}
|
||||
})
|
||||
.catch(function(e) { alert('Error: ' + e.message); });
|
||||
}
|
||||
|
||||
function stopScheduler() {
|
||||
fetch(API_BASE + '/api/scheduler/stop', {method: 'POST'})
|
||||
.then(function(res) { return res.json(); })
|
||||
.then(function(data) {
|
||||
if (data.success) {
|
||||
alert('Stopped!');
|
||||
refreshAll();
|
||||
}
|
||||
})
|
||||
.catch(function(e) { alert('Error: ' + e.message); });
|
||||
}
|
||||
|
||||
function captureNow() {
|
||||
fetch(API_BASE + '/api/capture', {method: 'POST'})
|
||||
.then(function(res) { return res.json(); })
|
||||
.then(function(data) {
|
||||
if (data.success) {
|
||||
alert('Capture success! Image ID: ' + data.image_id);
|
||||
refreshAll();
|
||||
} else {
|
||||
alert('Capture failed: ' + data.error);
|
||||
}
|
||||
})
|
||||
.catch(function(e) { alert('Error: ' + e.message); });
|
||||
}
|
||||
|
||||
function analyzeUnanalyzed() {
|
||||
fetch(API_BASE + '/api/analyze/unanalyzed', {method: 'POST'})
|
||||
.then(function(res) { return res.json(); })
|
||||
.then(function(data) {
|
||||
alert('Analyzed ' + data.results.length + ' images');
|
||||
refreshAll();
|
||||
})
|
||||
.catch(function(e) { alert('Error: ' + e.message); });
|
||||
}
|
||||
|
||||
// Images
|
||||
function loadImages() {
|
||||
var filter = document.getElementById('image-filter').value;
|
||||
var analyzedOnly = filter === 'analyzed';
|
||||
|
||||
eventFilter.value = currentValue;
|
||||
fetch(API_BASE + '/api/images?limit=50&analyzed_only=' + analyzedOnly)
|
||||
.then(function(res) { return res.json(); })
|
||||
.then(function(data) {
|
||||
renderImages(data.images);
|
||||
})
|
||||
.catch(function(e) { console.error('Load images failed:', e); });
|
||||
}
|
||||
|
||||
// ============== 控制相关 ==============
|
||||
|
||||
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');
|
||||
function renderImages(images) {
|
||||
var list = document.getElementById('images-list');
|
||||
list.innerHTML = '';
|
||||
|
||||
if (images.length === 0) {
|
||||
list.innerHTML = '<p style="color: #888; text-align: center;">暂无图片记录</p>';
|
||||
list.innerHTML = '<p style="color:#888;text-align:center;">No images</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
images.forEach((img, index) => {
|
||||
const item = document.createElement('div');
|
||||
item.className = `image-item ${img.analyzed ? 'analyzed' : 'unanalyzed'}`;
|
||||
item.onclick = () => openImageModal(img.id);
|
||||
images.forEach(function(img) {
|
||||
var item = document.createElement('div');
|
||||
item.className = 'image-item ' + (img.analyzed ? 'analyzed' : 'unanalyzed');
|
||||
item.onclick = function() { openImageModal(img.id); };
|
||||
|
||||
const time = new Date(img.timestamp).toLocaleString('zh-CN');
|
||||
var time = new Date(img.timestamp).toLocaleString();
|
||||
var status = img.analyzed ? 'Analyzed' : 'Unanalyzed';
|
||||
var events = img.events_summary || 'No events';
|
||||
|
||||
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>
|
||||
`;
|
||||
item.innerHTML = '<span class="image-number">#' + img.id + '</span>' +
|
||||
'<span class="image-time">' + time + '</span>' +
|
||||
'<span class="image-status">' + status + '</span>' +
|
||||
'<span class="image-events-summary">' + events + '</span>';
|
||||
|
||||
list.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
async function openImageModal(imageId) {
|
||||
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);
|
||||
}
|
||||
fetch(API_BASE + '/api/images/' + imageId)
|
||||
.then(function(res) { return res.json(); })
|
||||
.then(function(data) {
|
||||
var filename = data.path.split('/').pop().split('\\').pop();
|
||||
document.getElementById('modal-image').src = '/images/' + filename;
|
||||
document.getElementById('modal-title').textContent = 'Image #' + data.id;
|
||||
document.getElementById('modal-time').textContent = 'Time: ' + new Date(data.timestamp).toLocaleString();
|
||||
|
||||
var eventsDiv = document.getElementById('modal-events');
|
||||
eventsDiv.innerHTML = '';
|
||||
|
||||
if (data.events && data.events.length > 0) {
|
||||
data.events.forEach(function(event) {
|
||||
var div = document.createElement('div');
|
||||
div.className = 'modal-event';
|
||||
div.innerHTML = '<strong>' + event.event_type + '</strong> ' +
|
||||
'<span class="event-confidence">' + event.confidence + '</span>' +
|
||||
'<div>' + event.description + '</div>';
|
||||
eventsDiv.appendChild(div);
|
||||
});
|
||||
} else {
|
||||
eventsDiv.innerHTML = '<p style="color:#888;">No events</p>';
|
||||
}
|
||||
|
||||
document.getElementById('image-modal').classList.add('active');
|
||||
})
|
||||
.catch(function(e) { console.error('Load image failed:', e); });
|
||||
}
|
||||
|
||||
function closeImageModal() {
|
||||
@@ -360,98 +193,82 @@ function closeImageModal() {
|
||||
currentImageId = null;
|
||||
}
|
||||
|
||||
async function analyzeCurrentImage() {
|
||||
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);
|
||||
}
|
||||
fetch(API_BASE + '/api/analyze/' + currentImageId, {method: 'POST'})
|
||||
.then(function(res) { return res.json(); })
|
||||
.then(function(data) {
|
||||
if (data.success) {
|
||||
alert('Analyzed!');
|
||||
openImageModal(currentImageId);
|
||||
refreshAll();
|
||||
} else {
|
||||
alert('Failed: ' + data.error);
|
||||
}
|
||||
})
|
||||
.catch(function(e) { alert('Error: ' + e.message); });
|
||||
}
|
||||
|
||||
async function deleteCurrentImage() {
|
||||
function deleteCurrentImage() {
|
||||
if (!currentImageId) return;
|
||||
if (!confirm('Delete this image?')) 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);
|
||||
}
|
||||
fetch(API_BASE + '/api/images/' + currentImageId, {method: 'DELETE'})
|
||||
.then(function(res) { return res.json(); })
|
||||
.then(function(data) {
|
||||
if (data.success) {
|
||||
closeImageModal();
|
||||
refreshAll();
|
||||
}
|
||||
})
|
||||
.catch(function(e) { alert('Error: ' + e.message); });
|
||||
}
|
||||
|
||||
// ============== 事件相关 ==============
|
||||
|
||||
async function loadEvents() {
|
||||
const filter = document.getElementById('event-filter').value;
|
||||
const eventType = filter === 'all' ? '' : filter;
|
||||
// Events
|
||||
function loadEvents() {
|
||||
var filter = document.getElementById('event-filter').value;
|
||||
var 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);
|
||||
var url = API_BASE + '/api/events?limit=50';
|
||||
if (eventType) {
|
||||
url += '&event_type=' + encodeURIComponent(eventType);
|
||||
}
|
||||
|
||||
fetch(url)
|
||||
.then(function(res) { return res.json(); })
|
||||
.then(function(data) {
|
||||
renderEvents(data.events);
|
||||
})
|
||||
.catch(function(e) { console.error('Load events failed:', e); });
|
||||
}
|
||||
|
||||
function renderEvents(events) {
|
||||
const list = document.getElementById('events-list');
|
||||
var list = document.getElementById('events-list');
|
||||
list.innerHTML = '';
|
||||
|
||||
if (events.length === 0) {
|
||||
list.innerHTML = '<p style="color: #888; text-align: center;">暂无事件记录</p>';
|
||||
list.innerHTML = '<p style="color:#888;text-align:center;">No events</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
events.forEach(event => {
|
||||
const card = document.createElement('div');
|
||||
card.className = `event-card type-${event.event_type}`;
|
||||
events.forEach(function(event) {
|
||||
var card = document.createElement('div');
|
||||
card.className = 'event-card type-' + event.event_type;
|
||||
card.onclick = function() { openImageModal(event.image_id); };
|
||||
|
||||
const time = new Date(event.timestamp).toLocaleString('zh-CN');
|
||||
var time = new Date(event.timestamp).toLocaleString();
|
||||
|
||||
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.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);
|
||||
// Filter listeners
|
||||
document.getElementById('image-filter').addEventListener('change', loadImages);
|
||||
document.getElementById('event-filter').addEventListener('change', loadEvents);
|
||||
Reference in New Issue
Block a user