wangdongpo/carbit_test_service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

89
html/demo.html Normal file
View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tab View</title>
<style>
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
.tab button:hover {
background-color: #7187f3;
}
.tab button.active {
background-color: #186af0;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Tab1')">常规</button>
<button class="tablinks" onclick="openTab(event, 'Tab2')">蓝牙</button>
<button class="tablinks" onclick="openTab(event, 'Tab3')">胎压</button>
<button class="tablinks" onclick="openTab(event, 'Tab4')">配置</button>
</div>
<div id="Tab1" class="tabcontent">
<h3>Tab 1 Content</h3>
<p>This is the content of Tab 1.</p>
</div>
<div id="Tab2" class="tabcontent">
<h3>Tab 2 Content</h3>
<p>This is the content of Tab 2.</p>
</div>
<div id="Tab3" class="tabcontent">
<h3>Tab 3 Content</h3>
<p>This is the content of Tab 3.</p>
</div>
<div id="Tab4" class="tabcontent">
<h3>Tab 4 Content</h3>
<p>This is the content of Tab 4.</p>
</div>
<script>
function initPage(){
openTab(event, 'Tab1');
}
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace("active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
window.onload = initPage;
</script>
</body>
</html>

48
html/index.html Normal file
View File

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仪表数据仿真</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.3/jquery.min.js"></script>
<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>
</head>
<body>
<div class="container mt-5">
<!-- Tab导航栏 -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="normal-tab" data-bs-toggle="tab" data-bs-target="#normal" type="button" role="tab" aria-controls="normal" aria-selected="true">常规</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="bluetooth-tab" data-bs-toggle="tab" data-bs-target="#bluetooth" type="button" role="tab" aria-controls="bluetooth" aria-selected="false">蓝牙</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tire-tab" data-bs-toggle="tab" data-bs-target="#tire" type="button" role="tab" aria-controls="tire" aria-selected="false">胎压</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="conf-tab" data-bs-toggle="tab" data-bs-target="#conf" type="button" role="tab" aria-controls="conf" aria-selected="false">配置</button>
</li>
</ul>
<!-- Tab内容区域 -->
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="normal" role="tabpanel" aria-labelledby="normal-tab">
<iframe src="sub/home-tab-normal.html" width="100%" height="800px" frameborder="0"></iframe>
</div>
<div class="tab-pane fade" id="bluetooth" role="tabpanel" aria-labelledby="bluetooth-tab">
<iframe src="sub/home-tab-bluetooth.html" width="100%" height="800px" frameborder="0"></iframe>
</div>
<div class="tab-pane fade" id="tire" role="tabpanel" aria-labelledby="tire-tab">
<iframe src="sub/home-tab-tire.html" width="100%" height="800px" frameborder="0"></iframe>
</div>
<div class="tab-pane fade" id="conf" role="tabpanel" aria-labelledby="conf-tab">
<iframe src="sub/home-tab-conf.html" width="100%" height="800px" frameborder="0"></iframe>
</div>
</div>
</div>
</body>
</html>

11
html/sub/home-tab-bluetooth.html Normal file
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>

161
html/sub/home-tab-normal.html Normal file
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>

11
html/sub/home-tab-tire.html Normal file
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>