114 lines
4.7 KiB
HTML
114 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>视觉记录系统</title>
|
||
<link rel="stylesheet" href="/static/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 头部 -->
|
||
<header class="header">
|
||
<h1>📷 视觉记录系统</h1>
|
||
<div class="status-bar">
|
||
<span id="scheduler-status">状态: 加载中...</span>
|
||
<span id="capture-count">拍照次数: 0</span>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 控制面板 -->
|
||
<section class="control-panel">
|
||
<div class="panel-section">
|
||
<h3>📹 摄像头控制</h3>
|
||
<div class="control-row">
|
||
<label>拍照间隔 (秒):</label>
|
||
<input type="number" id="interval-input" value="60" min="10" max="3600">
|
||
<button onclick="setInterval()">设置</button>
|
||
</div>
|
||
<div class="control-row">
|
||
<label>自动分析:</label>
|
||
<input type="checkbox" id="auto-analyze" checked>
|
||
</div>
|
||
<div class="control-buttons">
|
||
<button onclick="startScheduler()" id="start-btn" class="btn-primary">▶ 启动</button>
|
||
<button onclick="stopScheduler()" id="stop-btn" class="btn-danger">⏹ 停止</button>
|
||
<button onclick="captureNow()" class="btn-secondary">📸 立即拍照</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel-section">
|
||
<h3>📊 系统统计</h3>
|
||
<div class="stats-grid" id="stats-display">
|
||
<div class="stat-item">
|
||
<span class="stat-label">总图片数</span>
|
||
<span class="stat-value" id="total-images">0</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">已分析</span>
|
||
<span class="stat-value" id="analyzed-images">0</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">总事件数</span>
|
||
<span class="stat-value" id="total-events">0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 主内容区 -->
|
||
<div class="main-content">
|
||
<!-- 图片时间线 -->
|
||
<section class="images-section">
|
||
<h2>📷 图片时间线</h2>
|
||
<div class="filter-bar">
|
||
<select id="image-filter">
|
||
<option value="all">全部</option>
|
||
<option value="analyzed">已分析</option>
|
||
<option value="unanalyzed">未分析</option>
|
||
</select>
|
||
<button onclick="analyzeUnanalyzed()" class="btn-small">分析未分析图片</button>
|
||
</div>
|
||
<div class="images-grid" id="images-grid">
|
||
<!-- 图片卡片将通过 JS 动态加载 -->
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 事件列表 -->
|
||
<section class="events-section">
|
||
<h2>📋 事件列表</h2>
|
||
<div class="filter-bar">
|
||
<select id="event-filter">
|
||
<option value="all">全部类型</option>
|
||
<!-- 动态加载事件类型 -->
|
||
</select>
|
||
</div>
|
||
<div class="events-list" id="events-list">
|
||
<!-- 事件卡片将通过 JS 动态加载 -->
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- 图片详情模态框 -->
|
||
<div class="modal" id="image-modal">
|
||
<div class="modal-content">
|
||
<span class="modal-close" onclick="closeModal()">×</span>
|
||
<img id="modal-image" src="" alt="图片详情">
|
||
<div class="modal-info">
|
||
<h3 id="modal-title">图片详情</h3>
|
||
<p id="modal-time">时间: </p>
|
||
<div id="modal-events" class="modal-events">
|
||
<!-- 事件详情 -->
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button onclick="analyzeCurrentImage()" class="btn-secondary">🔍 分析</button>
|
||
<button onclick="deleteCurrentImage()" class="btn-danger">🗑 删除</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/static/app.js"></script>
|
||
</body>
|
||
</html> |