pvlking
/
zfbox
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
19 Commits
4 Branches
0 Tags
120 MiB
 
 
 
 
Tree: 69663f45ee
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '69663f45ee'
${ noResults }
zfbox/web/main/templates/channel_manager.html

288 lines
13 KiB
Raw Blame History

{% extends 'base.html' %}
{% block title %}ZFBOX{% endblock %}
{% block style %}
.pagination {
justify-content: flex-end; /* 右对齐 */
}
.page-item .page-link {
padding: 0.25rem 0.5rem; /* 缩小按钮 */
font-size: 0.875rem; /* 调整字体大小 */
}
.btn-group-sm > .btn, .btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
}
.btn-group-sm .btn {
margin-right: 5px; /* 按钮之间的间距 */
}
.form-group-right h5 {
text-align: right;
margin-bottom: 0;
}
.table-container {
min-height: 400px; /* 设置最小高度，可以根据需要调整 */
}
.video-area {
width: 100%;
position: relative;
background-color: #000;
border: 1px solid #ddd;
}
.video-area::before {
content: "";
display: block;
padding-top: 75%; /* 4:3 ratio */
}
.video-area canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.schedule-table {
width: 100%;
table-layout: fixed;
}
.schedule-table th, .schedule-table td {
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid #dee2e6;
padding: 8px;
}
.schedule-table td.allowed {
background-color: white;
}
.schedule-table td.blocked {
background-color: blue;
}
/* 缩小表格行高 */
.table-sm th,
.table-sm td {
padding: 0.2rem; /* 调整这里的值来改变行高 */
}
canvas {
border: 1px solid black;
}
{% endblock %}
{% block content %}
<div class="container d-flex flex-column" >
<div class="row justify-content-center align-items-center mb-3">
<div class="col-md-2 text-end"><label class="col-form-label form-label">所属区域:</label></div>
<div class="col-md-3">
<select id="areaSelect" class="form-select mr-2" aria-label="Default select example"></select></div>
<div class="col-md-2 text-end"><label class="col-form-label form-label">通道名称:</label></div>
<div class="col-md-3"><input id="channelNameInput" type="text" class="form-control"></div>
<div class="col-md-2"><button id="searchButton" type="button" class="btn btn-primary">查 询</button></div>
</div>
<div class="mb-3">
<button id="addChannelButton" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#channelModal">
新增通道
</button>
</div>
<!-- 新增通道模态框 -->
<div class="modal fade" id="channelModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="add_channel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="channelModalLabel">新增通道</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="areaSelect_M" class="form-label">所属区域:</label>
<select id="areaSelect_M" class="form-select" aria-label="D">
<!-- 数据动态填充 -->
</select>
</div>
<div class="form-group">
<label for="CNameInput" class="form-label">通道名称:</label>
<input type="text" class="form-control" id="CNameInput">
</div>
<div class="form-group">
<label for="RTSPInput" class="form-label">RTSP地址:</label>
<input type="text" class="form-control" id="RTSPInput">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="saveButton">保存</button>
</div>
</div>
</div>
</div>
<!-- 修改通道模态框 -->
<div class="modal fade" id="ChangeC" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="change_c" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ChangeChannel">修改通道</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="areaSelect_CC" class="form-label">所属区域:</label>
<select id="areaSelect_CC" class="form-select" aria-label="D">
<!-- 数据动态填充 -->
</select>
</div>
<div class="form-group">
<label for="CNameInput_cc" class="form-label">通道名称:</label>
<input type="text" class="form-control" id="CNameInput_cc">
</div>
<div class="form-group">
<label for="RTSPInput_cc" class="form-label">RTSP地址:</label>
<input type="text" class="form-control" id="RTSPInput_cc">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="saveButton_cc">保存</button>
</div>
</div>
</div>
</div>
<!-- 算法管理模态框 -->
<div class="modal fade" id="MX_M" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="m_mx" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="MX_Title">配置算法</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-6">
<div class="video-area">
<!-- <img id="video-mx" alt="Video Stream" />-->
<canvas id="backgroundCanvas" style="display: none;"></canvas>
<canvas id="myCanvas"></canvas>
</div>
</div>
<div class="col-6 ms-auto">
<!-- 配置算法 -->
<div class="row align-items-center mb-2">
<div class="col-3"><label for="model_select">配置算法:</label></div>
<div class="col-9">
<select id="model_select" class="form-select" aria-label="D">
<!-- 数据动态填充 -->
</select>
</div>
</div>
<!-- 检测区域 -->
<div class="row align-items-center mb-2">
<div class="col-3"><label for="model_select">检测区域:</label></div>
<div class="col-9">
<div class="row">
<div class="col-6">
<div class="form-check">
<input class="form-check-input" type="radio" name="jcqy"
id="qjjc" checked onclick="handleRadioClick(event)">
<label class="form-check-label" for="qjjc">全画面生效</label>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input" type="radio" name="jcqy"
id="zdjc" onclick="handleRadioClick(event)">
<label class="form-check-label" for="zdjc">指定区域</label>
</div>
</div>
</div>
<div class="row">
<button type="button" class="btn btn-primary" id="but_hzqy" style="--bs-btn-padding-y:.20rem; --bs-btn-font-size: .70rem;">
绘制区域</button>
</div>
</div>
</div>
<!-- 检测阈值 -->
<div class="row align-items-center mb-2">
<div class="col-3">
<label>置信阈值:</label>
</div>
<div class="col-3">
<input type="text" class="form-control" id="zxyz">
</div>
<div class="col-3">
<label>IOU阈值:</label>
</div>
<div class="col-3">
<input type="text" class="form-control" id="iouyz">
</div>
</div>
<!-- 布放计划 -->
<div class="row form-group">
<label for="11">布防计划:</label>
<div id="11">
<table class="schedule-table table table-sm table-bordered" style="font-size: 7px;">
<thead>
<tr>
<th></th><th>00</th><th>01</th><th>02</th><th>03</th><th>04</th>
<th>05</th><th>06</th><th>07</th><th>08</th><th>09</th><th>10</th>
<th>11</th><th>12</th><th>13</th><th>14</th><th>15</th><th>16</th>
<th>17</th><th>18</th><th>19</th><th>20</th><th>21</th><th>22</th>
<th>23</th>
</tr>
</thead>
<tbody id="schedule-body">
<!-- 表格数据将由JavaScript动态填充 -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" id="cancelButton_mx">取消</button>
<button type="button" class="btn btn-primary" id="saveButton_mx">保存</button>
</div>
</div>
</div>
</div>
<div class="table-container">
<table class="table">
<thead class="table-light">
<tr>
<th scope="col">ID</th>
<th scope="col">所属区域</th>
<th scope="col">通道名称</th>
<th scope="col">RTSP地址</th>
<th scope="col">配置算法</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody id="table-body" class="table-group-divider">
<!-- 表格数据动态填充 -->
</tbody>
</table>
<nav>
<ul id="pagination" class="pagination">
<!-- 分页控件将动态生成 -->
</ul>
</nav>
</div>
</div>
{% endblock %}
{% block script %}
<script src="{{ url_for('main.static', filename='scripts/jquery-3.2.1.slim.min.js') }}"></script>
<script src="{{ url_for('main.static', filename='scripts/popper.min.js') }}"></script>
<script src="{{ url_for('main.static', filename='scripts/channel_manager.js') }}"></script>
{% endblock %}