IrisVega/RQteafactory-NodeJS
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modified: static/js/sensor-1.js

Browse Source
This commit is contained in:
IrisVega 2024-07-20 16:46:26 +08:00
parent 13b080cc47
commit d4bf879721
1 changed files with 42 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
static/js/sensor-1.js
View File

@ -2,62 +2,53 @@ document.addEventListener('DOMContentLoaded', function () {
var chartContainer = document.getElementById('chart-container'); var chartContainer = document.getElementById('chart-container');
var myChart = echarts.init(chartContainer); var myChart = echarts.init(chartContainer);
var timestamps = []; var timestamps = [], temperatures = [];
var temperatures = [];
function fetchAndUpdateData() { function fetchInitialData() {
fetch('http://111.230.197.156:8000/get_sensor_data') fetch('http://111.230.197.156:8000/get_sensor_data')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
timestamps = data.timestamps.slice(-200); // 只保留最新的200个数据 timestamps = data.timestamps.slice(-200); // 只保留最新的200个时间戳
temperatures = data.temperatures.slice(-200); // 只保留最新的200个数据 temperatures = data.temperatures.slice(-200); // 只保留最新的200个温度数据
var option = { updateChart();
title: {
text: '温度数据',
textStyle: {
color: 'white'
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['温度'],
textStyle: {
color: 'white'
}
},
xAxis: {
type: 'category',
data: timestamps,
axisLabel: {
color: 'white'
}
},
yAxis: {
type: 'value',
axisLabel: {
color: 'white'
}
},
series: [
{
name: '温度',
type: 'line',
data: temperatures
}
]
};
myChart.setOption(option);
// 更新最新的温度
document.getElementById('temperature').textContent = `当前温度: ${temperatures.slice(-1)}℃`;
}); });
} }
// 每5秒刷新一次数据 function fetchLatestData() {
setInterval(fetchAndUpdateData, 1000); fetch('http://111.230.197.156:8000/get_latest_data')
fetchAndUpdateData(); .then(response => response.json())
}); .then(data => {
// 如果已有200个数据则移除最旧的一条
if (timestamps.length >= 200) {
timestamps.shift();
temperatures.shift();
}
// 添加新的数据
timestamps.push(data.timestamp);
temperatures.push(data.temperature);
updateChart();
});
}
function updateChart() {
var option = {
title: { text: '温度数据', textStyle: { color: 'white' } },
tooltip: { trigger: 'axis' },
legend: { data: ['温度'], textStyle: { color: 'white' } },
xAxis: { type: 'category', data: timestamps, axisLabel: { color: 'white' } },
yAxis: { type: 'value', axisLabel: { color: 'white' } },
series: [{ name: '温度', type: 'line', data: temperatures }]
};
myChart.setOption(option);
document.getElementById('temperature').textContent = `当前温度: ${temperatures[temperatures.length - 1]}℃`;
}
// 初始化时获取所有数据
fetchInitialData();
// 每5秒获取最新的数据
setInterval(fetchLatestData, 5000);
});