feat: 统计图表功能 - 人数时间线曲线图、事件类型分布、历史趋势

This commit is contained in:
2026-04-17 11:34:10 +08:00
parent 7dea6fa38f
commit a7e005bc65
4 changed files with 415 additions and 0 deletions

View File

@@ -34,6 +34,11 @@
<button onclick="openPersonsModal()" class="btn-settings">查看人员库</button>
</div>
<div class="panel-section">
<h3>📊 统计图表</h3>
<button onclick="openStatsModal()" class="btn-settings">查看统计</button>
</div>
<div class="panel-section">
<h3>⚙️ 系统设置</h3>
<button onclick="openSettingsModal()" class="btn-settings">🔧 设置参数</button>
@@ -235,6 +240,45 @@
</div>
</div>
<!-- 统计图表模态框 -->
<div class="modal" id="stats-modal" onclick="closeModalOnBackground(event, 'stats-modal')">
<div class="modal-content stats-modal-content" onclick="event.stopPropagation()">
<span class="modal-close" onclick="closeStatsModal()">×</span>
<h2>📊 统计图表</h2>
<div class="stats-controls">
<select id="stats-date-select">
<option value="yesterday">Yesterday</option>
<option value="today">Today</option>
</select>
<button onclick="loadDailyStats()" class="btn-small">Refresh</button>
</div>
<div class="stats-summary-box" id="stats-summary">
<!-- 统计摘要 -->
</div>
<div class="chart-container">
<h4>👥 Person Count Timeline</h4>
<canvas id="person-chart"></canvas>
</div>
<div class="chart-container">
<h4>📋 Event Types Distribution</h4>
<div id="event-types-chart">
<!-- 事件类型图表 -->
</div>
</div>
<div class="chart-container">
<h4>📈 History (Last 7 Days)</h4>
<div id="history-chart">
<!-- 历史趋势 -->
</div>
</div>
</div>
</div>
<!-- 人员库模态框 -->
<div class="modal" id="persons-modal" onclick="closeModalOnBackground(event, 'persons-modal')">
<div class="modal-content settings-modal-content" onclick="event.stopPropagation()">