first commit

This commit is contained in:
wangdongpo
2025-01-14 19:49:51 +08:00
commit 2cd80133b3
85 changed files with 36565 additions and 0 deletions

View 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
View 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>

View 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>

View 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>