227 lines
8.4 KiB
HTML
227 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>环视系统</title>
|
||
<link rel="stylesheet" href="/static/layui/css/layui.css">
|
||
<link href="https://vjs.zencdn.net/8.23.3/video-js.css" rel="stylesheet" />
|
||
<style>
|
||
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
|
||
#app { display: flex; height: 100vh; }
|
||
#sidebar { width: 200px; background: #393D49; color: white; padding: 20px 0; }
|
||
#main { flex: 1; position: relative; background: black; }
|
||
#video { width: 100%; height: 100%; object-fit: contain; }
|
||
#video-player { width: 100%; height: 100%; display: none; }
|
||
.menu-item { padding: 12px 20px; cursor: pointer; }
|
||
.menu-item:hover { background: #4B515D; }
|
||
.active { background: #009688 !important; }
|
||
.disk-info { padding: 10px; background: #4B515D; margin: 10px; border-radius: 5px; font-size: 12px; }
|
||
.disk-bar { width: 100%; height: 6px; background: #5a5e6a; border-radius: 3px; margin: 5px 0; overflow: hidden; }
|
||
.disk-fill { height: 100%; background: #009688; transition: width 0.3s; }
|
||
.control-panel { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.7); padding: 10px; border-radius: 5px; color: white; }
|
||
.playback-panel { position: absolute; top: 10px; left: 220px; background: rgba(0,0,0,0.7); padding: 10px; border-radius: 5px; color: white; display: none; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div id="sidebar">
|
||
<div class="menu-item active" data-view="all">全景鸟瞰</div>
|
||
<div class="menu-item" data-view="front">前视</div>
|
||
<div class="menu-item" data-view="back">后视</div>
|
||
<div class="menu-item" data-view="left">左视</div>
|
||
<div class="menu-item" data-view="right">右视</div>
|
||
<hr style="border-color:#5a5e6a;margin:15px 10px">
|
||
<div class="menu-item" id="live-view">实时监控</div>
|
||
<div class="menu-item" id="playback-view">视频回放</div>
|
||
<hr style="border-color:#5a5e6a;margin:15px 10px">
|
||
<div class="disk-info">
|
||
<div>硬盘使用率</div>
|
||
<div class="disk-bar"><div class="disk-fill" id="disk-fill" style="width: 0%"></div></div>
|
||
<div id="disk-text">0%</div>
|
||
</div>
|
||
<hr style="border-color:#5a5e6a;margin:15px 10px">
|
||
<div class="menu-item" onclick="logout()">退出登录</div>
|
||
</div>
|
||
<div id="main">
|
||
<img id="video" src="/video_feed" />
|
||
<video id="video-player" class="video-js vjs-default-skin" controls preload="auto" data-setup="{}">
|
||
<p class="vjs-no-js">
|
||
要查看此视频，请启用JavaScript，并考虑升级到支持HTML5视频的浏览器
|
||
<a href="https://videojs.com.cn/html5-video-support/" target="_blank">支持HTML5视频</a>
|
||
</p>
|
||
</video>
|
||
<div class="control-panel">
|
||
<div>当前模式：<span id="mode-text">实时监控</span></div>
|
||
</div>
|
||
<div class="playback-panel" id="playback-panel">
|
||
<div style="margin-bottom: 10px">
|
||
<label>选择日期：</label>
|
||
<input type="date" id="date-picker" style="padding: 5px; border-radius: 3px; border: 1px solid #ccc;">
|
||
<button onclick="loadVideos()" style="padding: 5px 10px; background: #009688; color: white; border: none; border-radius: 3px; cursor: pointer;">加载</button>
|
||
</div>
|
||
<div>
|
||
<label>选择视频：</label>
|
||
<select id="video-select" style="padding: 5px; border-radius: 3px; border: 1px solid #ccc; width: 200px;">
|
||
<option value="">请选择视频</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://vjs.zencdn.net/8.23.3/video.min.js"></script>
|
||
<script src="/static/layui/layui.js"></script>
|
||
<script>
|
||
// 初始化日期选择器为当前日期
|
||
document.getElementById('date-picker').value = new Date().toISOString().split('T')[0];
|
||
|
||
// 实时监控和回放模式切换
|
||
document.getElementById('live-view').addEventListener('click', function() {
|
||
setMode('live');
|
||
});
|
||
|
||
document.getElementById('playback-view').addEventListener('click', function() {
|
||
setMode('playback');
|
||
});
|
||
|
||
function setMode(mode) {
|
||
const liveViewBtn = document.getElementById('live-view');
|
||
const playbackViewBtn = document.getElementById('playback-view');
|
||
const videoImg = document.getElementById('video');
|
||
const videoPlayer = document.getElementById('video-player');
|
||
const playbackPanel = document.getElementById('playback-panel');
|
||
const modeText = document.getElementById('mode-text');
|
||
|
||
if (mode === 'live') {
|
||
liveViewBtn.classList.add('active');
|
||
playbackViewBtn.classList.remove('active');
|
||
videoImg.style.display = 'block';
|
||
videoPlayer.style.display = 'none';
|
||
playbackPanel.style.display = 'none';
|
||
modeText.textContent = '实时监控';
|
||
} else if (mode === 'playback') {
|
||
liveViewBtn.classList.remove('active');
|
||
playbackViewBtn.classList.add('active');
|
||
videoImg.style.display = 'none';
|
||
videoPlayer.style.display = 'block';
|
||
playbackPanel.style.display = 'block';
|
||
modeText.textContent = '视频回放';
|
||
loadVideos(); // 加载当天视频
|
||
}
|
||
}
|
||
|
||
// 加载指定日期的视频列表
|
||
function loadVideos() {
|
||
const datePicker = document.getElementById('date-picker');
|
||
const videoSelect = document.getElementById('video-select');
|
||
const selectedDate = datePicker.value;
|
||
|
||
if (!selectedDate) {
|
||
alert('请选择日期');
|
||
return;
|
||
}
|
||
|
||
// 清空视频选择器
|
||
videoSelect.innerHTML = '<option value="">请选择视频</option>';
|
||
|
||
// 请求视频列表
|
||
fetch('/api/videos')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.error) {
|
||
alert('获取视频列表失败：' + data.error);
|
||
return;
|
||
}
|
||
|
||
// 筛选指定日期的视频
|
||
const filteredVideos = data.videos.filter(video => video.date === selectedDate);
|
||
|
||
if (filteredVideos.length === 0) {
|
||
videoSelect.innerHTML += '<option value="">当天没有视频</option>';
|
||
return;
|
||
}
|
||
|
||
// 添加视频选项
|
||
filteredVideos.forEach(video => {
|
||
const option = document.createElement('option');
|
||
option.value = video.path;
|
||
option.textContent = video.time + ' (' + video.size + 'MB)';
|
||
videoSelect.appendChild(option);
|
||
});
|
||
|
||
// 监听选择变化，播放视频
|
||
videoSelect.addEventListener('change', function() {
|
||
const selectedPath = this.value;
|
||
if (selectedPath) {
|
||
playVideo(selectedPath);
|
||
}
|
||
});
|
||
})
|
||
.catch(error => {
|
||
console.error('获取视频列表出错：', error);
|
||
alert('获取视频列表失败');
|
||
});
|
||
}
|
||
|
||
// 播放选定的视频
|
||
function playVideo(videoPath) {
|
||
const videoElement = document.getElementById('video-player');
|
||
const player = videojs(videoElement);
|
||
|
||
// 根据文件扩展名设置视频类型
|
||
const videoType = videoPath.endsWith('.avi') ? 'video/x-msvideo' : 'video/mp4';
|
||
|
||
// 设置视频源
|
||
player.src({
|
||
src: '/api/video/' + videoPath,
|
||
type: videoType
|
||
});
|
||
|
||
// 播放视频
|
||
player.play();
|
||
}
|
||
|
||
// 更新磁盘使用率信息
|
||
function updateDiskUsage() {
|
||
fetch('/api/disk_usage')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.error) {
|
||
console.error('获取磁盘使用率失败：', data.error);
|
||
return;
|
||
}
|
||
|
||
const diskFill = document.getElementById('disk-fill');
|
||
const diskText = document.getElementById('disk-text');
|
||
const usagePercent = data.usage_percent;
|
||
|
||
diskFill.style.width = usagePercent + '%';
|
||
diskText.textContent = usagePercent + '% (' + data.used + 'GB / ' + data.total + 'GB)';
|
||
|
||
// 根据使用率设置不同颜色
|
||
if (usagePercent > 80) {
|
||
diskFill.style.background = '#FF5722'; // 红色
|
||
} else if (usagePercent > 60) {
|
||
diskFill.style.background = '#FFC107'; // 黄色
|
||
} else {
|
||
diskFill.style.background = '#009688'; // 绿色
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('获取磁盘使用率出错：', error);
|
||
});
|
||
}
|
||
|
||
// 初始化并定期更新磁盘使用率
|
||
updateDiskUsage();
|
||
setInterval(updateDiskUsage, 60000); // 每分钟更新一次
|
||
|
||
// 退出登录
|
||
function logout() {
|
||
if (confirm('确定退出？')) {
|
||
window.location.href = '/logout';
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |