101 lines
3.2 KiB
HTML
101 lines
3.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>气体浓度和温度实时显示</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
margin: 20px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(2, 1fr);
|
||
|
|
gap: 20px;
|
||
|
|
max-width: 800px;
|
||
|
|
}
|
||
|
|
.data-box {
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
border-radius: 5px;
|
||
|
|
padding: 15px;
|
||
|
|
background-color: #f9f9f9;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.data-title {
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
.data-value {
|
||
|
|
font-size: 24px;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
.data-unit {
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>气体浓度和温度实时显示</h1>
|
||
|
|
<div class="container">
|
||
|
|
<div class="data-box">
|
||
|
|
<div class="data-title">甲烷浓度</div>
|
||
|
|
<div class="data-value" id="methane-value">0</div>
|
||
|
|
<div class="data-unit">ppm</div>
|
||
|
|
</div>
|
||
|
|
<div class="data-box">
|
||
|
|
<div class="data-title">乙烷浓度</div>
|
||
|
|
<div class="data-value" id="ethane-value">0</div>
|
||
|
|
<div class="data-unit">ppm</div>
|
||
|
|
</div>
|
||
|
|
<div class="data-box">
|
||
|
|
<div class="data-title">二氧化碳浓度</div>
|
||
|
|
<div class="data-value" id="co2-value">0</div>
|
||
|
|
<div class="data-unit">ppm</div>
|
||
|
|
</div>
|
||
|
|
<div class="data-box">
|
||
|
|
<div class="data-title">温度</div>
|
||
|
|
<div class="data-value" id="temperature-value">0</div>
|
||
|
|
<div class="data-unit">°C</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
|
||
|
|
<script>
|
||
|
|
// 连接到Flask-SocketIO服务器
|
||
|
|
const socket = io('http://127.0.0.1:8000');
|
||
|
|
|
||
|
|
// 获取DOM元素
|
||
|
|
const methaneValue = document.getElementById('methane-value');
|
||
|
|
const ethaneValue = document.getElementById('ethane-value');
|
||
|
|
const co2Value = document.getElementById('co2-value');
|
||
|
|
const temperatureValue = document.getElementById('temperature-value');
|
||
|
|
|
||
|
|
// 接收甲烷浓度数据
|
||
|
|
socket.on('methane_data', function(data) {
|
||
|
|
methaneValue.textContent = data.value;
|
||
|
|
console.log('接收到甲烷浓度数据:', data.value);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 接收乙烷浓度数据
|
||
|
|
socket.on('ethane_data', function(data) {
|
||
|
|
ethaneValue.textContent = data.value;
|
||
|
|
console.log('接收到乙烷浓度数据:', data.value);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 接收二氧化碳浓度数据
|
||
|
|
socket.on('co2_data', function(data) {
|
||
|
|
co2Value.textContent = data.value;
|
||
|
|
console.log('接收到二氧化碳浓度数据:', data.value);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 接收温度数据
|
||
|
|
socket.on('temperature_data', function(data) {
|
||
|
|
temperatureValue.textContent = data.value;
|
||
|
|
console.log('接收到温度数据:', data.value);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|