obscura/zydi-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复了时间轴事件显示不全的问题

Browse Source
This commit is contained in:
zydi
2025-01-14 03:25:34 +00:00
parent ef39d7014c
commit ebb2409d75
1 changed files with 95 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web.html
+95 -95
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="cls-1.8.js" type="module"></script>
<script src="cls-2.js" type="module"></script>
<title>智能视频分析系统</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
@@ -1107,7 +1107,7 @@
// 修改处理人脸数据的函数
function processFaceData(faceData) {
const faceMap = new Map();
const personSet = new Set(['unknown']); // 将 unknown 添加到人员集合中
const personSet = new Set(['未知','unknown']); // 将 unknown 添加到人员集合中
if (faceData?.data) {
Object.values(faceData.data).forEach(imageData => {
@@ -1115,17 +1115,25 @@
if (data.face_analysis) {
const timestamp = data.timestamp;
const faces = [];
// 遍历face_analysis中的所有人脸数据，包括 unknown
Object.entries(data.face_analysis).forEach(([personId, faceInfo]) => {
faces.push({
id: personId,
similarity: faceInfo.similarity,
fileName: faceInfo.file_name
// 检查是否有人脸分析数据
if (data.face_analysis && Object.keys(data.face_analysis).length > 0) {
// 遍历face_analysis中的所有人脸数据，包括 unknown
Object.entries(data.face_analysis).forEach(([personId, faceInfo]) => {
faces.push({
id: personId,
similarity: faceInfo.similarity,
fileName: faceInfo.file_name
});
personSet.add(personId);
});
personSet.add(personId);
});
} else {
// 如果没有人脸分析数据，添加"未知"
faces.push({
id: '未知',
similarity: null,
fileName: null
});
}
// 保存所有人脸数据到faceMap
if (faces.length > 0) {
faceMap.set(timestamp, faces);
@@ -1201,6 +1209,7 @@
}
// 处理事件数据
let eventCount = 0;
if (data) {
Object.values(data).forEach(cameraData => {
Object.entries(cameraData).forEach(([timestamp, value]) => {
@@ -1209,7 +1218,9 @@
const hour = eventTime.getHours();
const minute = eventTime.getMinutes();
const actions = value.video_analysis['qwen-7B'].extracted_info.actions;
if (Array.isArray(actions)) {
eventCount += actions.length;
}
// 获取该时间点的人脸数据
const faces = faceMap.get(value.timestamp) || [];
const personIds = faces.length > 0
@@ -1252,39 +1263,78 @@
});
});
}
// 更新图例
updateLegend(behaviorColors);
}
// 更新图例函数
// 添加筛选状态管理
let activeFilters = {
persons: new Set(), // 当前激活的人员
categories: new Set() // 当前激活的行为类别
};
function filterTimelineEvents() {
const events = document.querySelectorAll('.timeline .event');
// 获取激活的人员和行为类别
const activePersons = Array.from(document.querySelectorAll('.person-legend-item.active'))
.map(item => item.querySelector('span').textContent);
const activeCategories = Array.from(document.querySelectorAll('.legend-item.active'))
.map(item => item.querySelector('span').textContent);
let visibleCount = 0;
events.forEach(event => {
const eventPersons = event.getAttribute('data-person').split(', ');
const eventBehavior = event.getAttribute('data-behavior');
// 如果没有任何筛选条件被激活，显示所有事件
if (activePersons.length === 0 && activeCategories.length === 0) {
event.style.display = 'block';
event.style.opacity = '1';
visibleCount++;
return;
}
// 检查人员匹配
const matchesPerson = activePersons.length === 0 ||
eventPersons.some(person => activePersons.includes(person));
// 检查行为类别匹配
const matchesCategory = activeCategories.length === 0 ||
activeCategories.includes(eventBehavior);
if (matchesPerson && matchesCategory) {
event.style.display = 'block';
event.style.opacity = '1';
visibleCount++;
} else {
event.style.display = 'none';
event.style.opacity = '0';
}
});
}
function updateLegend(behaviorColors) {
const legend = document.getElementById('legend');
legend.innerHTML = '';
// 按行为名称排序
const sortedBehaviors = Array.from(behaviorColors.entries())
.sort((a, b) => a[0].localeCompare(b[0], 'zh'));
// 创建图例容器
const legendContainer = document.createElement('div');
legendContainer.className = 'legend-container';
// 添加所有行为的图例
sortedBehaviors.forEach(([behavior, color]) => {
const legendItem = document.createElement('div');
legendItem.className = 'legend-item';
// 添加 active 类作为默认状态
legendItem.classList.add('active');
legendItem.className = 'legend-item active';
legendItem.innerHTML = `
<div class="legend-color" style="background: ${color}"></div>
<span>${behavior}</span>
`;
// 添加点击事件
legendItem.addEventListener('click', () => {
legendItem.classList.toggle('active');
filterTimelineEvents(); // 使用组合筛选函数
filterTimelineEvents();
});
legendContainer.appendChild(legendItem);
@@ -1293,45 +1343,31 @@
legend.appendChild(legendContainer);
}
function updatePersonLegend(persons) {
const personLegend = document.getElementById('person-legend');
personLegend.innerHTML = '';
// 添加筛选状态管理
let activeFilters = {
persons: new Set(), // 当前激活的人员
categories: new Set() // 当前激活的行为类别
};
const legendContainer = document.createElement('div');
legendContainer.className = 'person-legend-container';
// 更新筛选函数
function filterTimelineEvents() {
const events = document.querySelectorAll('.timeline .event');
const activePersons = Array.from(document.querySelectorAll('.person-legend-item.active'))
.map(item => item.querySelector('span').textContent);
const activeCategories = Array.from(document.querySelectorAll('.legend-item.active'))
.map(item => item.querySelector('span').textContent);
persons.sort().forEach(person => {
const legendItem = document.createElement('div');
legendItem.className = 'person-legend-item active';
legendItem.innerHTML = `
<div class="person-icon">${person.charAt(0).toUpperCase()}</div>
<span>${person}</span>
`;
// 更新筛选状态
activeFilters.persons = new Set(activePersons);
activeFilters.categories = new Set(activeCategories);
legendItem.addEventListener('click', () => {
legendItem.classList.toggle('active');
filterTimelineEvents();
});
events.forEach(event => {
const eventPerson = event.getAttribute('data-person');
const eventBehavior = event.getAttribute('data-behavior');
// 检查是否满足所有激活的筛选条件
const matchesPerson = activePersons.length === 0 || activePersons.includes(eventPerson);
const matchesCategory = activeCategories.length === 0 ||
activeCategories.some(category => eventBehavior.includes(category));
// 只有同时满足人员和行为类别的筛选条件才显示
if (matchesPerson && matchesCategory) {
event.style.display = 'block';
event.style.opacity = '1';
} else {
event.style.display = 'none';
event.style.opacity = '0.4';
}
legendContainer.appendChild(legendItem);
});
}
personLegend.appendChild(legendContainer);
}
// 添加按人员筛选时间轴事件的函数
function filterTimelineByPerson() {
const events = document.querySelectorAll('.timeline .event');
@@ -1354,11 +1390,10 @@
function getRandomColor() {
// 预定义的备用颜色
const fallbackColors = [
'#E91E63', // 粉红色
'#9C27B0', // 紫色
'#673AB7', // 深紫色
'#F6DE00', // 黄色
'#8470FF', // 紫色
'#00BCD4', // 青色
'#FF5722', // 深橙色
'#F4A460', // 深橙色
'#607D8B', // 蓝灰色
'#4CAF50' // 翠绿色
];
@@ -2369,41 +2404,6 @@
clearInterval(autoRefreshTimer);
}
});
// 添加人员图例更新函数
function updatePersonLegend(persons) {
const personLegend = document.getElementById('person-legend');
personLegend.innerHTML = '';
if (persons.length === 0) {
personLegend.innerHTML = '<div class="person-legend-container"><div class="person-legend-item">暂无人员数据</div></div>';
return;
}
const legendContainer = document.createElement('div');
legendContainer.className = 'person-legend-container';
persons.sort().forEach(person => {
const legendItem = document.createElement('div');
legendItem.className = 'person-legend-item active';
legendItem.innerHTML = `
<div class="person-icon">${person.charAt(0).toUpperCase()}</div>
<span>${person}</span>
`;
legendItem.addEventListener('click', () => {
legendItem.classList.toggle('active');
filterTimelineEvents();
});
legendContainer.appendChild(legendItem);
});
personLegend.appendChild(legendContainer);
}
// 修改行为图例点击事件
</script>
</body>
</html>