modified: static/js/sensor-1.js

modified:   static/js/sensor-2.js
	modified:   static/js/sensor-3.js
	modified:   static/js/sensor-4.js
This commit is contained in:
IrisVega 2024-07-20 14:48:48 +08:00
parent ad08fb9cdd
commit 6db2ee1434
4 changed files with 36 additions and 42 deletions

View File

@ -7,12 +7,12 @@ document.addEventListener('DOMContentLoaded', function () {
var temperatures = []; var temperatures = [];
function fetchAndUpdateData() { function fetchAndUpdateData() {
fetch('http://127.0.0.1:8000/get_sensor_data') fetchLatestSensorData()
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 = { var option = {
title: { title: {
text: '温度数据', text: '温度数据',
@ -54,10 +54,10 @@ document.addEventListener('DOMContentLoaded', function () {
myChart.setOption(option); myChart.setOption(option);
}); });
fetch('http://127.0.0.1:8000/get_latest_sensor_data') fetch('http://111.230.197.156:8000/get_latest_sensor_data')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
document.getElementById('temperature').textContent = `当前温度: ${data.temperature}°C`; document.getElementById('temperature').textContent = `当前温度: ${temperatures.slice(-1)}°C`;
}); });
} }
@ -69,14 +69,11 @@ document.addEventListener('DOMContentLoaded', function () {
//获取当前的湿度 //获取当前的湿度
async function fetchLatestSensorData() { async function fetchLatestSensorData() {
const response = await fetch('http://127.0.0.1:8000/get_latest_sensor_data'); const response = await fetch('http://111.230.197.156:8000/get_latest_sensor_data');
const data = await response.json(); const data = await response.json();
document.getElementById('temperature').textContent = `当前温度: ${data.temperature}`; document.getElementById('temperature').textContent = `当前温度: ${temperatures.slice(-1)}`;
} }
// 每秒刷新一次数据
fetch('http://127.0.0.1:8000/get_latest_sensor_data')
.then(response => response.json())
.then(data => {
fetchLatestSensorData();// 初始加载数据
document.getElementById('temperature').textContent = `当前温度: ${data.temperature}°C`;
})

View File

@ -7,11 +7,12 @@ document.addEventListener('DOMContentLoaded', function () {
var humidities = []; var humidities = [];
function fetchAndUpdateData() { function fetchAndUpdateData() {
fetch('http://127.0.0.1:8000/get_sensor_data') fetchLatestSensorData()
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.humidities.slice(-200); // 只保留最新的200个数据 humidity = data.humidities.slice(-200); // 只保留最新的200个数据
var option = { var option = {
title: { title: {
@ -31,7 +32,7 @@ document.addEventListener('DOMContentLoaded', function () {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: data.timestamps, data: timestamps,
axisLabel: { axisLabel: {
color: 'white' color: 'white'
} }
@ -46,7 +47,7 @@ document.addEventListener('DOMContentLoaded', function () {
{ {
name: '湿度', name: '湿度',
type: 'line', type: 'line',
data: data.humidities data: humidity
} }
] ]
@ -54,10 +55,10 @@ document.addEventListener('DOMContentLoaded', function () {
myChart.setOption(option); myChart.setOption(option);
}); });
fetch('http://127.0.0.1:8000/get_latest_sensor_data') fetch('http://111.230.197.156:8000/get_latest_sensor_data')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
document.getElementById('humidity').textContent = `当前湿度: ${data.humidity}°C`; document.getElementById('humidity').textContent = `当前湿度: ${humidity.slice(-1)}%`;
}); });
} }
@ -70,13 +71,9 @@ document.addEventListener('DOMContentLoaded', function () {
//获取当前的湿度 //获取当前的湿度
async function fetchLatestSensorData() { async function fetchLatestSensorData() {
const response = await fetch('http://127.0.0.1:8000/get_latest_sensor_data'); const response = await fetch('http://111.230.197.156:8000/get_latest_sensor_data');
const data = await response.json(); const data = await response.json();
document.getElementById('humidity').textContent = `当前湿度: ${data.humidity}%`; document.getElementById('humidity').textContent = `当前湿度: ${humidity.slice(-1)}%`;
} }
// 每5秒刷新一次数据 // 每5秒刷新一次数据
fetch('http://127.0.0.1:8000/get_latest_sensor_data')
.then(response => response.json())
.then(data => {
fetchLatestSensorData(); // 初始加载数据
document.addEventListener('DOMContentLoaded', fetchLatestSensorData);})

View File

@ -7,7 +7,7 @@ document.addEventListener('DOMContentLoaded', function () {
var co2 = []; var co2 = [];
function fetchAndUpdateData() { function fetchAndUpdateData() {
fetch('http://127.0.0.1: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个数据
@ -30,7 +30,7 @@ function fetchAndUpdateData() {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: data.timestamps, data: timestamps,
axisLabel: { axisLabel: {
color: 'white' color: 'white'
} }
@ -45,17 +45,17 @@ function fetchAndUpdateData() {
{ {
name: 'co2', name: 'co2',
type: 'line', type: 'line',
data: data.co2 data: co2
} }
] ]
}; };
myChart.setOption(option); myChart.setOption(option);
}); });
fetch('http://127.0.0.1:8000/get_latest_sensor_data') fetch('http://111.230.197.156:8000/get_latest_sensor_data')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
document.getElementById('co2').textContent = `当前co2: ${data.co2}°C`; document.getElementById('co2').textContent = `当前co2: ${co2.slice(-1)}%`;
}); });
} }
// 每5秒刷新一次数据 // 每5秒刷新一次数据
@ -66,12 +66,12 @@ function fetchAndUpdateData() {
//获取当前的湿度 //获取当前的湿度
async function fetchLatestSensorData() { async function fetchLatestSensorData() {
const response = await fetch('http://127.0.0.1:8000/get_latest_sensor_data'); const response = await fetch('http://111.230.197.156:8000/get_latest_sensor_data');
const data = await response.json(); const data = await response.json();
document.getElementById('co2').textContent = `当前co2: ${data.co2}%`; document.getElementById('co2').textContent = `当前co2: ${co2.slice(-1)}%`;
} }
// 每5秒刷新一次数据 // 每5秒刷新一次数据
fetch('http://127.0.0.1:8000/get_latest_sensor_data') fetch('http://111.230.197.156:8000/get_latest_sensor_data')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
fetchLatestSensorData(); // 初始加载数据 fetchLatestSensorData(); // 初始加载数据

View File

@ -7,7 +7,7 @@ document.addEventListener('DOMContentLoaded', function () {
var pressure = []; var pressure = [];
function fetchAndUpdateData() { function fetchAndUpdateData() {
fetch('http://127.0.0.1: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个数据
@ -31,7 +31,7 @@ function fetchAndUpdateData() {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: data.timestamps, data: timestamps,
axisLabel: { axisLabel: {
color: 'white' color: 'white'
} }
@ -46,7 +46,7 @@ function fetchAndUpdateData() {
{ {
name: 'pressure', name: 'pressure',
type: 'line', type: 'line',
data: data.pressure data: pressure
} }
] ]
@ -54,10 +54,10 @@ function fetchAndUpdateData() {
myChart.setOption(option); myChart.setOption(option);
}); });
fetch('http://127.0.0.1:8000/get_latest_sensor_data') fetch('http://111.230.197.156:8000/get_latest_sensor_data')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
document.getElementById('pressure').textContent = `当前压力: ${data.pressure}Pa`; document.getElementById('pressure').textContent = `当前压力: ${pressure.slice(-1)}Pa`;
}); });
} }
// 每5秒刷新一次数据 // 每5秒刷新一次数据
@ -68,12 +68,12 @@ function fetchAndUpdateData() {
//获取当前的湿度 //获取当前的湿度
async function fetchLatestSensorData() { async function fetchLatestSensorData() {
const response = await fetch('http://127.0.0.1:8000/get_latest_sensor_data'); const response = await fetch('http://111.230.197.156:8000/get_latest_sensor_data');
const data = await response.json(); const data = await response.json();
document.getElementById('pressure').textContent = `当前压力: ${data.pressure}Pa`; document.getElementById('pressure').textContent = `当前压力: ${pressure.slice(-1)}Pa`;
} }
// 每5秒刷新一次数据 // 每5秒刷新一次数据
fetch('http://127.0.0.1:8000/get_latest_sensor_data') fetch('http://111.230.197.156:8000/get_latest_sensor_data')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
fetchLatestSensorData(); // 初始加载数据 fetchLatestSensorData(); // 初始加载数据