feat: 统计图表功能 - 人数时间线曲线图、事件类型分布、历史趋势
This commit is contained in:
@@ -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()">
|
||||
|
||||
Reference in New Issue
Block a user