first commit
This commit is contained in:
11
html/sub/home-tab-bluetooth.html
Normal file
11
html/sub/home-tab-bluetooth.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>简介内容</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>关于我们</h1>
|
||||
<p>这里是简介页面,可以介绍公司的背景、发展历程、团队成员等信息。</p>
|
||||
</body>
|
||||
</html>
|
||||
131
html/sub/home-tab-conf.html
Normal file
131
html/sub/home-tab-conf.html
Normal file
@@ -0,0 +1,131 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>数据项管理页面</title>
|
||||
<!-- 引入Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- 引入自定义样式 -->
|
||||
<style>
|
||||
.data-table {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
text-align: center;
|
||||
}
|
||||
.settings-form {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-5">
|
||||
<h1>数据项管理页面</h1>
|
||||
|
||||
<!-- 数据项列表区域 -->
|
||||
<div class="data-table">
|
||||
<table class="table table-bordered table-striped" id="data-items-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>数据项名称</th>
|
||||
<th>数据ID</th>
|
||||
<th>数据类型</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- 数据项列表将通过JavaScript动态生成 -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 添加数据项表单 -->
|
||||
<div class="settings-form">
|
||||
<form id="add-item-form">
|
||||
<div class="mb-3">
|
||||
<label for="item-name" class="form-label">数据项名称</label>
|
||||
<input type="text" class="form-control" id="item-name" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="item-id" class="form-label">数据ID</label>
|
||||
<input type="text" class="form-control" id="item-id" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="item-type" class="form-label">数据类型</label>
|
||||
<select class="form-select" id="item-type" required>
|
||||
<option value="温度">温度</option>
|
||||
<option value="湿度">湿度</option>
|
||||
<option value="压力">压力</option>
|
||||
<!-- 可以根据需要添加更多选项 -->
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">添加数据项</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 引入Bootstrap JS和依赖的Popper.js -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
|
||||
<!-- 引入自定义脚本 -->
|
||||
<script>
|
||||
// 模拟数据项列表
|
||||
let dataItems = [
|
||||
{ name: '温度', id: '1', type: '温度' },
|
||||
{ name: '湿度', id: '2', type: '湿度' },
|
||||
{ name: '压力', id: '3', type: '压力' }
|
||||
];
|
||||
|
||||
// 初始化数据项列表
|
||||
function initDataItemsTable() {
|
||||
const tableBody = document.getElementById('data-items-table').getElementsByTagName('tbody')[0];
|
||||
tableBody.innerHTML = '';
|
||||
dataItems.forEach(item => {
|
||||
const row = tableBody.insertRow();
|
||||
row.insertCell(0).textContent = item.name;
|
||||
row.insertCell(1).textContent = item.id;
|
||||
row.insertCell(2).textContent = item.type;
|
||||
const actionsCell = row.insertCell(3);
|
||||
actionsCell.innerHTML = `
|
||||
<button class="btn btn-warning btn-sm" onclick="editItem('${item.id}')">编辑</button>
|
||||
<button class="btn btn-danger btn-sm" onclick="deleteItem('${item.id}')">删除</button>
|
||||
`;
|
||||
});
|
||||
}
|
||||
|
||||
// 添加数据项
|
||||
document.getElementById('add-item-form').addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
const itemName = document.getElementById('item-name').value;
|
||||
const itemId = document.getElementById('item-id').value;
|
||||
const itemType = document.getElementById('item-type').value;
|
||||
dataItems.push({ name: itemName, id: itemId, type: itemType });
|
||||
initDataItemsTable();
|
||||
this.reset();
|
||||
});
|
||||
|
||||
// 编辑数据项
|
||||
function editItem(itemId) {
|
||||
const item = dataItems.find(item => item.id === itemId);
|
||||
if (item) {
|
||||
document.getElementById('item-name').value = item.name;
|
||||
document.getElementById('item-id').value = item.id;
|
||||
document.getElementById('item-type').value = item.type;
|
||||
dataItems = dataItems.filter(item => item.id !== itemId);
|
||||
initDataItemsTable();
|
||||
}
|
||||
}
|
||||
|
||||
// 删除数据项
|
||||
function deleteItem(itemId) {
|
||||
dataItems = dataItems.filter(item => item.id !== itemId);
|
||||
initDataItemsTable();
|
||||
}
|
||||
|
||||
// 初始化数据项列表
|
||||
initDataItemsTable();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
161
html/sub/home-tab-normal.html
Normal file
161
html/sub/home-tab-normal.html
Normal file
@@ -0,0 +1,161 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>数据仿真页面</title>
|
||||
<!-- 引入Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- 引入自定义样式 -->
|
||||
<style>
|
||||
.data-table {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
text-align: center;
|
||||
}
|
||||
.settings-form {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-5">
|
||||
<h1>数据仿真页面</h1>
|
||||
|
||||
<!-- 数据展示区域 -->
|
||||
<div class="data-table">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>数据名称</th>
|
||||
<th>数据值</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>温度</td>
|
||||
<td id="temperature-value">25°C</td>
|
||||
<td>
|
||||
<button class="btn btn-primary" onclick="editData('temperature')">编辑</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>湿度</td>
|
||||
<td id="humidity-value">60%</td>
|
||||
<td>
|
||||
<button class="btn btn-primary" onclick="editData('humidity')">编辑</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- 可以根据需要添加更多数据行 -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 数据设置区域 -->
|
||||
<div class="settings-form" id="settings-form" style="display: none;">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="data-name" class="form-label">数据名称</label>
|
||||
<input type="text" class="form-control" id="data-name" readonly>
|
||||
</div>
|
||||
<div id="data-input-container"></div>
|
||||
<button type="button" class="btn btn-success" onclick="saveData()">保存</button>
|
||||
<button type="button" class="btn btn-secondary" onclick="cancelEdit()">取消</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 引入Bootstrap JS和依赖的Popper.js -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
|
||||
<!-- 引入自定义脚本 -->
|
||||
<script>
|
||||
// 编辑数据
|
||||
function editData(dataType) {
|
||||
const dataNameInput = document.getElementById('data-name');
|
||||
const dataInputContainer = document.getElementById('data-input-container');
|
||||
const settingsForm = document.getElementById('settings-form');
|
||||
|
||||
dataNameInput.value = dataType === 'temperature' ? '温度' : '湿度';
|
||||
|
||||
// 清空之前的输入控件
|
||||
dataInputContainer.innerHTML = '';
|
||||
|
||||
if (dataType === 'temperature') {
|
||||
// 创建编辑框输入控件
|
||||
const input = document.createElement('input');
|
||||
input.type = 'text';
|
||||
input.className = 'form-control';
|
||||
input.id = 'data-value';
|
||||
input.value = document.getElementById('temperature-value').textContent.replace('°C', '');
|
||||
dataInputContainer.appendChild(input);
|
||||
} else if (dataType === 'humidity') {
|
||||
// 创建下拉列表选择控件
|
||||
const select = document.createElement('select');
|
||||
select.className = 'form-select';
|
||||
select.id = 'data-value';
|
||||
const options = ['30%', '40%', '50%', '60%', '70%', '80%', '90%']; // 可以根据需要添加更多选项
|
||||
options.forEach(option => {
|
||||
const optionElement = document.createElement('option');
|
||||
optionElement.value = option;
|
||||
optionElement.textContent = option;
|
||||
if (option === document.getElementById('humidity-value').textContent) {
|
||||
optionElement.selected = true;
|
||||
}
|
||||
select.appendChild(optionElement);
|
||||
});
|
||||
dataInputContainer.appendChild(select);
|
||||
}
|
||||
|
||||
settingsForm.style.display = 'block';
|
||||
}
|
||||
|
||||
// 保存数据
|
||||
function saveData() {
|
||||
const dataNameInput = document.getElementById('data-name');
|
||||
const dataValueInput = document.getElementById('data-value');
|
||||
const settingsForm = document.getElementById('settings-form');
|
||||
|
||||
const data = {
|
||||
name: dataNameInput.value,
|
||||
value: dataValueInput.value
|
||||
};
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', '/save_data', true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/json');
|
||||
xhr.onreadystatechange = function() {
|
||||
if (xhr.readyState === XMLHttpRequest.DONE) {
|
||||
if (xhr.status === 200) {
|
||||
const response = JSON.parse(xhr.responseText);
|
||||
if (response.success) {
|
||||
if (data.name === '温度') {
|
||||
document.getElementById('temperature-value').textContent = data.value + '°C';
|
||||
} else if (data.name === '湿度') {
|
||||
document.getElementById('humidity-value').textContent = data.value;
|
||||
}
|
||||
settingsForm.style.display = 'none';
|
||||
console.log('数据保存成功');
|
||||
} else {
|
||||
console.log('数据保存失败: ' + response.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.send(JSON.stringify(data));
|
||||
}
|
||||
|
||||
// 取消编辑
|
||||
function cancelEdit() {
|
||||
const settingsForm = document.getElementById('settings-form');
|
||||
settingsForm.style.display = 'none';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
11
html/sub/home-tab-tire.html
Normal file
11
html/sub/home-tab-tire.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>联系内容</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>联系我们</h1>
|
||||
<p>这里是联系页面,可以提供联系方式、地址、在线客服等信息。</p>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user