feat: 前端区分显示本地分析和AI分析结果
This commit is contained in:
@@ -208,16 +208,59 @@ function openImageModal(imageId) {
|
||||
eventsDiv.innerHTML = '';
|
||||
|
||||
if (data.events && data.events.length > 0) {
|
||||
// 分组显示
|
||||
var localEvents = [];
|
||||
var aiEvents = [];
|
||||
|
||||
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);
|
||||
if (event.event_type.indexOf('(本地)') >= 0) {
|
||||
localEvents.push(event);
|
||||
} else if (event.event_type.indexOf('(AI)') >= 0) {
|
||||
aiEvents.push(event);
|
||||
} else {
|
||||
localEvents.push(event);
|
||||
}
|
||||
});
|
||||
|
||||
// 本地分析结果
|
||||
if (localEvents.length > 0) {
|
||||
var localSection = document.createElement('div');
|
||||
localSection.className = 'modal-events-section';
|
||||
localSection.innerHTML = '<h4 class="section-title local">Local Analysis (' + localEvents.length + ') </h4>';
|
||||
|
||||
localEvents.forEach(function(event) {
|
||||
var div = document.createElement('div');
|
||||
div.className = 'modal-event source-local';
|
||||
var eventType = event.event_type.replace('(本地)', '').trim();
|
||||
div.innerHTML = '<span class="event-type">' + eventType + '</span> ' +
|
||||
'<span class="event-confidence">' + event.confidence + '</span>' +
|
||||
'<div>' + event.description + '</div>';
|
||||
localSection.appendChild(div);
|
||||
});
|
||||
|
||||
eventsDiv.appendChild(localSection);
|
||||
}
|
||||
|
||||
// AI分析结果
|
||||
if (aiEvents.length > 0) {
|
||||
var aiSection = document.createElement('div');
|
||||
aiSection.className = 'modal-events-section';
|
||||
aiSection.innerHTML = '<h4 class="section-title ai">AI Analysis (' + aiEvents.length + ') </h4>';
|
||||
|
||||
aiEvents.forEach(function(event) {
|
||||
var div = document.createElement('div');
|
||||
div.className = 'modal-event source-ai';
|
||||
var eventType = event.event_type.replace('(AI)', '').trim();
|
||||
div.innerHTML = '<span class="event-type">' + eventType + '</span> ' +
|
||||
'<span class="event-confidence">' + event.confidence + '</span>' +
|
||||
'<div>' + event.description + '</div>';
|
||||
aiSection.appendChild(div);
|
||||
});
|
||||
|
||||
eventsDiv.appendChild(aiSection);
|
||||
}
|
||||
} else {
|
||||
eventsDiv.innerHTML = '<p style="color:#888;">No events</p>';
|
||||
eventsDiv.innerHTML = '<p style="color:#888;">No events recorded</p>';
|
||||
}
|
||||
|
||||
document.getElementById('image-modal').classList.add('active');
|
||||
@@ -289,21 +332,63 @@ function renderEvents(events) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 分组显示：本地分析和AI分析
|
||||
var localEvents = [];
|
||||
var aiEvents = [];
|
||||
|
||||
events.forEach(function(event) {
|
||||
var card = document.createElement('div');
|
||||
card.className = 'event-card type-' + event.event_type;
|
||||
card.onclick = function() { openImageModal(event.image_id); };
|
||||
|
||||
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>';
|
||||
|
||||
list.appendChild(card);
|
||||
if (event.event_type.indexOf('(本地)') >= 0 || event.event_type.indexOf('(local)') >= 0) {
|
||||
localEvents.push(event);
|
||||
} else if (event.event_type.indexOf('(AI)') >= 0) {
|
||||
aiEvents.push(event);
|
||||
} else {
|
||||
localEvents.push(event);
|
||||
}
|
||||
});
|
||||
|
||||
// 显示本地分析结果
|
||||
if (localEvents.length > 0) {
|
||||
var localHeader = document.createElement('div');
|
||||
localHeader.className = 'events-header';
|
||||
localHeader.innerHTML = '<span class="header-label local">Local Analysis</span><span class="header-count">' + localEvents.length + ' events</span>';
|
||||
list.appendChild(localHeader);
|
||||
|
||||
localEvents.forEach(function(event) {
|
||||
var card = createEventCard(event, 'local');
|
||||
list.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
// 显示AI分析结果
|
||||
if (aiEvents.length > 0) {
|
||||
var aiHeader = document.createElement('div');
|
||||
aiHeader.className = 'events-header';
|
||||
aiHeader.innerHTML = '<span class="header-label ai">AI Analysis</span><span class="header-count">' + aiEvents.length + ' events</span>';
|
||||
list.appendChild(aiHeader);
|
||||
|
||||
aiEvents.forEach(function(event) {
|
||||
var card = createEventCard(event, 'ai');
|
||||
list.appendChild(card);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function createEventCard(event, source) {
|
||||
var card = document.createElement('div');
|
||||
card.className = 'event-card type-' + event.event_type.replace('(本地)', '').replace('(AI)', '').trim() + ' source-' + source;
|
||||
card.onclick = function() { openImageModal(event.image_id); };
|
||||
|
||||
var time = new Date(event.timestamp).toLocaleString();
|
||||
var eventType = event.event_type.replace('(本地)', '').replace('(AI)', '').trim();
|
||||
|
||||
card.innerHTML = '<div class="event-header">' +
|
||||
'<span class="event-type">' + eventType + '</span>' +
|
||||
'<span class="event-source">' + (source === 'local' ? 'Local' : 'AI') + '</span>' +
|
||||
'<span class="event-time">' + time + '</span></div>' +
|
||||
'<div class="event-desc">' + event.description + '</div>' +
|
||||
'<div class="event-confidence">' + event.confidence + '</div>';
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
// Filter listeners
|
||||
|
||||
@@ -261,6 +261,34 @@ button {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.events-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.header-label {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.header-label.local {
|
||||
color: #2196F3;
|
||||
}
|
||||
|
||||
.header-label.ai {
|
||||
color: #9C27B0;
|
||||
}
|
||||
|
||||
.header-count {
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.event-card {
|
||||
background: #f9f9f9;
|
||||
padding: 12px;
|
||||
@@ -274,10 +302,24 @@ button {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.event-card.source-local {
|
||||
border-left-color: #2196F3;
|
||||
background: #f5faff;
|
||||
}
|
||||
|
||||
.event-card.source-ai {
|
||||
border-left-color: #9C27B0;
|
||||
background: #f9f5ff;
|
||||
}
|
||||
|
||||
.event-card.type-人物活动 {
|
||||
border-left-color: #e91e63;
|
||||
}
|
||||
|
||||
.event-card.type-运动检测 {
|
||||
border-left-color: #ff9800;
|
||||
}
|
||||
|
||||
.event-card.type-物体变化 {
|
||||
border-left-color: #ff9800;
|
||||
}
|
||||
@@ -298,6 +340,7 @@ button {
|
||||
.event-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
@@ -306,6 +349,23 @@ button {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.event-source {
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
.event-card.source-local .event-source {
|
||||
background: #e3f2fd;
|
||||
color: #2196F3;
|
||||
}
|
||||
|
||||
.event-card.source-ai .event-source {
|
||||
background: #f3e5f5;
|
||||
color: #9C27B0;
|
||||
}
|
||||
|
||||
.event-time {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
@@ -385,11 +445,48 @@ button {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.modal-events-section {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.section-title.local {
|
||||
color: #2196F3;
|
||||
border-bottom: 2px solid #2196F3;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.section-title.ai {
|
||||
color: #9C27B0;
|
||||
border-bottom: 2px solid #9C27B0;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.modal-event {
|
||||
background: #f5f5f5;
|
||||
padding: 10px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 5px;
|
||||
border-left: 3px solid #ccc;
|
||||
}
|
||||
|
||||
.modal-event.source-local {
|
||||
background: #f5faff;
|
||||
border-left-color: #2196F3;
|
||||
}
|
||||
|
||||
.modal-event.source-ai {
|
||||
background: #f9f5ff;
|
||||
border-left-color: #9C27B0;
|
||||
}
|
||||
|
||||
.modal-event .event-type {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
|
||||
Reference in New Issue
Block a user