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.
286 lines
16 KiB
286 lines
16 KiB
{% extends 'base.html' %}
|
|
|
|
{% block title %}ZFBOX{% endblock %}
|
|
|
|
{% block style %}
|
|
.btn-blue {
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
.btn-blue:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
|
|
.table-container {
|
|
min-height: 300px; /* 设置最小高度，可以根据需要调整 */
|
|
}
|
|
/* 缩小表格行高 */
|
|
.table-sm th,
|
|
.table-sm td {
|
|
padding: 0.2rem; /* 调整这里的值来改变行高 */
|
|
}
|
|
.pagination {
|
|
justify-content: flex-end; /* 右对齐 */
|
|
}
|
|
|
|
.section-title {
|
|
position: relative;
|
|
margin: 20px 0;
|
|
}
|
|
.section-title hr {
|
|
margin: 0;
|
|
border-color: #000; /* You can change the color of the line if needed */
|
|
}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container d-flex flex-column" >
|
|
<!-- 模态框区域 -->
|
|
<!-- 配置IP模态框-->
|
|
<div class="modal fade" id="ipConfigModal" tabindex="-1" aria-labelledby="ipConfigModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="ipConfigModalLabel">IP地址配置</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<!-- Tabs for Wired and Wireless IP -->
|
|
<ul class="nav nav-tabs" id="ipTab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="wired-tab" data-bs-toggle="tab" data-bs-target="#wired" type="button" role="tab" aria-controls="wired" aria-selected="true">有线IP</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="wireless-tab" data-bs-toggle="tab" data-bs-target="#wireless" type="button" role="tab" aria-controls="wireless" aria-selected="false">无线IP</button>
|
|
</li>
|
|
</ul>
|
|
<!-- Tab content -->
|
|
<div class="tab-content mt-3" id="ipTabContent">
|
|
<!-- Wired IP Configuration -->
|
|
<div class="tab-pane fade show active" id="wired" role="tabpanel" aria-labelledby="wired-tab">
|
|
<div class="mb-3">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="ip_lan"
|
|
id="dhcp_lan" checked onclick="handleRadioClick_lan(event)">
|
|
<label class="form-check-label" for="dhcp_lan">自动获取</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="ip_lan"
|
|
id="static_lan" onclick="handleRadioClick_lan(event)">
|
|
<label class="form-check-label" for="static_lan">静态IP</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="wiredIpAddress" class="form-label">有线IP地址</label>
|
|
<input type="text" class="form-control" id="wiredIpAddress" placeholder="例如: 192.168.1.2">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="wiredSubnetMask" class="form-label">子网掩码</label>
|
|
<input type="text" class="form-control" id="wiredSubnetMask" placeholder="例如: 255.255.255.0">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="wiredGateway" class="form-label">网关</label>
|
|
<input type="text" class="form-control" id="wiredGateway" placeholder="例如: 192.168.1.1">
|
|
</div>
|
|
<div>
|
|
<label for="wirelessGateway" class="form-label">DNS</label>
|
|
<input type="text" class="form-control" id="wiredDNS" placeholder="例如: 114.114.114.114">
|
|
</div>
|
|
</div>
|
|
<!-- Wireless IP Configuration -->
|
|
<div class="tab-pane fade" id="wireless" role="tabpanel" aria-labelledby="wireless-tab">
|
|
<div class="mb-2">
|
|
<label for="wirelessNetwork" class="form-label">选择无线网络</label>
|
|
<select class="form-select" id="wirelessNetwork">
|
|
<!-- 数据动态填充 -->
|
|
</select>
|
|
</div>
|
|
<div class="mb-4">
|
|
<div class="row justify-content-center align-items-center">
|
|
<div class="col-2"><label for="wirelessSubnetMask" class="form-label">密码:</label></div>
|
|
<div class="col-8"><input type="password" class="form-control" id="wifi_passwd"></div>
|
|
<div class="col-2"><button type="button" class="btn btn-primary" id="connectWifi">连接</button></div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="ip_wifi"
|
|
id="dhcp_wifi" checked onclick="handleRadioClick_wifi(event)">
|
|
<label class="form-check-label" for="dhcp_wifi">自动获取</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="ip_wifi"
|
|
id="static_wifi" onclick="handleRadioClick_wifi(event)">
|
|
<label class="form-check-label" for="static_wifi">静态IP</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label for="wirelessIpAddress" class="form-label">无线IP地址</label>
|
|
<input type="text" class="form-control" id="wirelessIpAddress" placeholder="例如: 192.168.1.3">
|
|
</div>
|
|
<div class="mb-2">
|
|
<label for="wirelessSubnetMask" class="form-label">子网掩码</label>
|
|
<input type="text" class="form-control" id="wirelessSubnetMask" placeholder="例如: 255.255.255.0">
|
|
</div>
|
|
<div class="mb-2">
|
|
<label for="wirelessGateway" class="form-label">网关</label>
|
|
<input type="text" class="form-control" id="wirelessGateway" placeholder="例如: 192.168.1.1">
|
|
</div>
|
|
<div>
|
|
<label for="wirelessGateway" class="form-label">DNS</label>
|
|
<input type="text" class="form-control" id="wirelessDNS" placeholder="例如: 114.114.114.114">
|
|
</div>
|
|
</div>
|
|
</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="saveIPConfig">保存设置</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 修改服务器IP模态框-->
|
|
<div class="modal fade" id="ServerIPModal" tabindex="-1" aria-labelledby="ServerIPModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">服务器IP地址配置</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label for="serviceIP_model" class="form-label">服务器IP</label>
|
|
<input type="text" class="form-control" id="serviceIP_model" placeholder="例如: 127.0.0.1">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="servicePort_model" class="form-label">端口号</label>
|
|
<input type="text" class="form-control" id="servicePort_model" placeholder="例如: 8085">
|
|
</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="saveServerIP">保存设置</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 新增区域模态框-->
|
|
<div class="modal fade" id="addAreaModal" tabindex="-1" aria-labelledby="AreaModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="area_modal_title_id">新增区域</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label for="area_name" class="form-label">区域名称</label>
|
|
<input type="text" class="form-control" id="area_name">
|
|
</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="addArea">保存设置</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 修改区域模态框-->
|
|
<div class="modal fade" id="modifyAreaModal" tabindex="-1" aria-labelledby="AreaModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">修改区域</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label for="area_name" class="form-label">区域名称</label>
|
|
<input type="text" class="form-control" id="area_name_modif">
|
|
</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="modifArea">保存设置</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 系统信息区域 -->
|
|
<div class="container mt-4">
|
|
<div class="row justify-content-center align-items-center">
|
|
<div class="col-md-3 text-end"><label class="col-form-label form-label">系统版本号：</label></div>
|
|
<div class="col-md-9"><p class="form-control-plaintext" id="system_version">1.0.0.1</p></div>
|
|
</div>
|
|
<div class="row justify-content-center align-items-center">
|
|
<div class="col-md-3 text-end"><label class="col-form-label form-label">升级包：</label></div>
|
|
<div class="col-md-6"><input type="file" class="form-control" id="upgrade-system"></div>
|
|
<div class="col-md-3"><button class="btn btn-blue" id="upsystem">升级</button></div>
|
|
</div>
|
|
<div class="row justify-content-center align-items-center">
|
|
<div class="col-md-3 text-end"><label class="col-form-label form-label">设备ID：</label></div>
|
|
<div class="col-md-9"><p class="form-control-plaintext" id="dev_ID">1.0.0.1</p></div>
|
|
</div>
|
|
<div class="row justify-content-center align-items-center">
|
|
<div class="col-md-3 text-end"><label class="col-form-label form-label">设备IP：</label></div>
|
|
<div class="col-md-6"><p class="form-control-plaintext" id="dev_IP">
|
|
有线--192.168.3.45 WIFI--192.168.3.45 5G--192.168.3.45</p></div>
|
|
<div class="col-md-3"><button class="btn btn-blue" id="showIPConfig">配置</button></div>
|
|
</div>
|
|
<div class="row justify-content-center align-items-center">
|
|
<div class="col-md-3 text-end"><label class="col-form-label form-label">服务器IP：</label></div>
|
|
<div class="col-md-3"><input type="text" class="form-control" id="service_ip"></div>
|
|
<div class="col-md"><label class="col-form-label form-label">端口号：</label></div>
|
|
<div class="col-md"><input type="text" class="form-control" id="service_port"></div>
|
|
<div class="col-md-3"><button class="btn btn-blue" id="showServerIP">修改</button></div>
|
|
</div>
|
|
</div>
|
|
<!-- 区域管理区域 -->
|
|
<div class="section-title">
|
|
<hr>
|
|
</div>
|
|
<div class="mb-3">
|
|
<button id="addAreaButton" type="button" class="btn btn-primary">
|
|
新增区域
|
|
</button>
|
|
</div>
|
|
<div class="table-container">
|
|
<table class="table">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col" style="width: 20%;">ID</th>
|
|
<th scope="col" style="width: 50%;">区域名称</th>
|
|
<th scope="col" style="width: 30%;">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="table-body-area" class="table-group-divider">
|
|
<!-- 表格数据动态填充 -->
|
|
</tbody>
|
|
</table>
|
|
<nav>
|
|
<ul id="pagination-area" 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/system_manager.js') }}"></script>
|
|
{% endblock %}
|