161 lines
6.6 KiB
HTML
161 lines
6.6 KiB
HTML
<!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> |