|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>ZFBOX</title>
|
|
|
|
|
<link rel="stylesheet" href="{{ url_for('main.static', filename='css/bootstrap.min.css') }}">
|
|
|
|
|
<link href="../static/resources/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
header {
|
|
|
|
|
background-color: #007bff;
|
|
|
|
|
color: white;
|
|
|
|
|
padding: 10px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.navbar-nav .nav-link {
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
main {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex: 1;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tree-view {
|
|
|
|
|
border-right: 1px solid #ddd;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.video-content {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
footer {
|
|
|
|
|
background-color: #f8f9fa;
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 10px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.video-frame {
|
|
|
|
|
background-color: #f8f9fa;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.video-frame img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.video-grid {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
|
|
gap: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.video-grid.eight {
|
|
|
|
|
grid-template-columns: repeat(4, 1fr);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle-buttons {
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<header>
|
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-light">
|
|
|
|
|
<div class="container-fluid">
|
|
|
|
|
<a class="navbar-brand" href="#">智凡BOX</a>
|
|
|
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
|
|
|
<span class="navbar-toggler-icon"></span>
|
|
|
|
|
</button>
|
|
|
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
|
|
|
<ul class="navbar-nav">
|
|
|
|
|
<li class="nav-item">
|
|
|
|
|
<a class="nav-link" href="#">实时预览</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="nav-item">
|
|
|
|
|
<a class="nav-link" href="#">通道管理</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="nav-item">
|
|
|
|
|
<a class="nav-link" href="#">算法管理</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="nav-item">
|
|
|
|
|
<a class="nav-link" href="#">系统管理</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="nav-item">
|
|
|
|
|
<a class="nav-link" href="#">用户管理</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<ul class="navbar-nav ms-auto">
|
|
|
|
|
<li class="nav-item">
|
|
|
|
|
<a class="nav-link" href="#">张三 退出</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</nav>
|
|
|
|
|
</header>
|
|
|
|
|
<main>
|
|
|
|
|
<div class="tree-view col-md-3">
|
|
|
|
|
<ul class="list-group">
|
|
|
|
|
<li class="list-group-item">一区
|
|
|
|
|
<ul class="list-group">
|
|
|
|
|
<li class="list-group-item">北门通道一</li>
|
|
|
|
|
<li class="list-group-item">南门通道二</li>
|
|
|
|
|
<li class="list-group-item">通道三</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="list-group-item">二区域
|
|
|
|
|
<ul class="list-group">
|
|
|
|
|
<li class="list-group-item">通道一</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="video-content col-md-9">
|
|
|
|
|
<div class="toggle-buttons">
|
|
|
|
|
<button id="fourView" class="btn btn-primary">四画面</button>
|
|
|
|
|
<button id="eightView" class="btn btn-secondary">八画面</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="videoGrid" class="video-grid">
|
|
|
|
|
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
|
|
|
|
|
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
|
|
|
|
|
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
|
|
|
|
|
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
<footer>
|
|
|
|
|
© 2024 ZFKJ All Rights Reserved
|
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
<script src="{{ url_for('main.static', filename='js/bootstrap.bundle.min.js') }}"></script>
|
|
|
|
|
<script>
|
|
|
|
|
document.getElementById('fourView').addEventListener('click', function() {
|
|
|
|
|
const videoGrid = document.getElementById('videoGrid');
|
|
|
|
|
videoGrid.classList.remove('eight');
|
|
|
|
|
videoGrid.classList.add('four');
|
|
|
|
|
videoGrid.innerHTML = `
|
|
|
|
|
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
|
|
|
|
|
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
|
|
|
|
|
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
|
|
|
|
|
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
|
|
|
|
|
`;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById('eightView').addEventListener('click', function() {
|
|
|
|
|
const videoGrid = document.getElementById('videoGrid');
|
|
|
|
|
videoGrid.classList.remove('four');
|
|
|
|
|
videoGrid.classList.add('eight');
|
|
|
|
|
videoGrid.innerHTML = `
|
|
|
|
|
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
|
|
|
|
|
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
|
|
|
|
|
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
|
|
|
|
|
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
|
|
|
|
|
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
|
|
|
|
|
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
|
|
|
|
|
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
|
|
|
|
|
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
|
|
|
|
|
`;
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
