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

modified: static/js/sensor-2.js

Browse Source 
modified:   static/js/sensor-3.js
	modified:   static/js/sensor-4.js
This commit is contained in:
IrisVega 2024-07-20 19:52:14 +08:00
parent c23b8b6675
commit efc40453be
3 changed files with 357 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
static/js/sensor-2.js
View File

@ -1,79 +1,132 @@
//折线图 // //折线图
// document.addEventListener('DOMContentLoaded', function () {
// var chartContainer = document.getElementById('chart-container');
// var myChart = echarts.init(chartContainer);
// var timestamps = [];
// var humidities = [];
// function fetchAndUpdateData() {
// fetchLatestSensorData()
// fetch('http://111.230.197.156:8000/get_sensor_data')
// .then(response => response.json())
// .then(data => {
// timestamps = data.timestamps.slice(-200); // 只保留最新的200个数据
// humidity = data.humidities.slice(-200); // 只保留最新的200个数据
// 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: humidity
// }
// ]
// };
// myChart.setOption(option);
// });
// fetch('http://111.230.197.156:8000/get_latest_sensor_data')
// .then(response => response.json())
// .then(data => {
// document.getElementById('humidity').textContent = `当前湿度: ${humidity.slice(-1)}%`;
// });
// }
// // 每5秒刷新一次数据
// setInterval(fetchAndUpdateData, 1000);
// fetchAndUpdateData(); // 初始加载数据
// });
// //获取当前的湿度
// async function fetchLatestSensorData() {
// const response = await fetch('http://111.230.197.156:8000/get_latest_sensor_data');
// const data = await response.json();
// document.getElementById('humidity').textContent = `当前湿度: ${humidity.slice(-1)}%`;
// }
// // 每5秒刷新一次数据
document.addEventListener('DOMContentLoaded', function () { 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 = [], humidities = [];
var humidities = [];
function fetchAndUpdateData() { function fetchInitialData() {
fetchLatestSensorData()
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个时间戳
humidity = data.humidities.slice(-200); // 只保留最新的200个数据 humidities = data.humidities.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: humidity
}
]
};
myChart.setOption(option);
}); });
}
function fetchLatestData() {
fetch('http://111.230.197.156: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 = `当前湿度: ${humidity.slice(-1)}%`; // 如果已有200个数据则移除最旧的一条
if (timestamps.length >= 200) {
timestamps.shift();
humidities.shift();
}
// 添加新的数据
timestamps.push(data.timestamps);
humidities.push(data.humidities);
updateChart();
}); });
}
// 每5秒刷新一次数据
setInterval(fetchAndUpdateData, 1000);
fetchAndUpdateData(); // 初始加载数据
});
//获取当前的湿度
async function fetchLatestSensorData() {
const response = await fetch('http://111.230.197.156:8000/get_latest_sensor_data');
const data = await response.json();
document.getElementById('humidity').textContent = `当前湿度: ${humidity.slice(-1)}%`;
} }
// 每5秒刷新一次数据
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: humidities }]
};
myChart.setOption(option);
document.getElementById('temperature').textContent = `当前湿度: ${humidities[humidities.length - 1]}℃`;
}
// 初始化时获取所有数据
fetchInitialData();
// 每5秒获取最新的数据
setInterval(fetchLatestData, 1000);
});

186
static/js/sensor-3.js
View File

@ -1,79 +1,133 @@
//折线图 // //折线图
// document.addEventListener('DOMContentLoaded', function () {
// var chartContainer = document.getElementById('chart-container');
// var myChart = echarts.init(chartContainer);
// var timestamps = [];
// var co2 = [];
// function fetchAndUpdateData() {
// fetch('http://111.230.197.156:8000/get_sensor_data')
// .then(response => response.json())
// .then(data => {
// timestamps = data.timestamps.slice(-200); // 只保留最新的200个数据
// co2 = data.co2.slice(-200); // 只保留最新的200个数据
// var option = {
// title: {
// text: 'co2数据',
// textStyle: {
// color: 'white'
// }
// },
// tooltip: {
// trigger: 'axis'
// },
// legend: {
// data: ['co2'],
// textStyle: {
// color: 'white'
// }
// },
// xAxis: {
// type: 'category',
// data: timestamps,
// axisLabel: {
// color: 'white'
// }
// },
// yAxis: {
// type: 'value',
// axisLabel: {
// color: 'white'
// }
// },
// series: [
// {
// name: 'co2',
// type: 'line',
// data: co2
// }
// ]
// };
// myChart.setOption(option);
// });
// fetch('http://111.230.197.156:8000/get_latest_sensor_data')
// .then(response => response.json())
// .then(data => {
// document.getElementById('co2').textContent = `当前co2: ${co2.slice(-1)}%`;
// });
// }
// // 每5秒刷新一次数据
// setInterval(fetchAndUpdateData, 1000);
// fetchAndUpdateData(); // 初始加载数据
// });
// //获取当前的湿度
// async function fetchLatestSensorData() {
// const response = await fetch('http://111.230.197.156:8000/get_latest_sensor_data');
// const data = await response.json();
// document.getElementById('co2').textContent = `当前co2: ${co2.slice(-1)}%`;
// }
// // 每5秒刷新一次数据
// fetch('http://111.230.197.156:8000/get_latest_sensor_data')
// .then(response => response.json())
// .then(data => {
// fetchLatestSensorData(); // 初始加载数据
// document.addEventListener('DOMContentLoaded', fetchLatestSensorData);
// })
document.addEventListener('DOMContentLoaded', function () { 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 = [], co2 = [];
var co2 = [];
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个时间戳
co2 = data.co2.slice(-200); // 只保留最新的200个数据 co2 = data.co2.slice(-200); // 只保留最新的200个CO2数据
var option = {
title: {
text: 'co2数据',
textStyle: {
color: 'white'
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['co2'],
textStyle: {
color: 'white'
}
},
xAxis: {
type: 'category',
data: timestamps,
axisLabel: {
color: 'white'
}
},
yAxis: {
type: 'value',
axisLabel: {
color: 'white'
}
},
series: [
{
name: 'co2',
type: 'line',
data: co2
} updateChart();
] });
}; }
myChart.setOption(option);
}); function fetchLatestData() {
fetch('http://111.230.197.156: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: ${co2.slice(-1)}%`; // 如果已有200个数据则移除最旧的一条
if (timestamps.length >= 200) {
timestamps.shift();
co2.shift();
}
// 添加新的数据
timestamps.push(data.timestamps);
co2.push(data.co2);
updateChart();
}); });
} }
// 每5秒刷新一次数据
setInterval(fetchAndUpdateData, 1000);
fetchAndUpdateData(); // 初始加载数据
});
function updateChart() {
//获取当前的湿度 var option = {
async function fetchLatestSensorData() { title: { text: 'CO2数据', textStyle: { color: 'white' } },
const response = await fetch('http://111.230.197.156:8000/get_latest_sensor_data'); tooltip: { trigger: 'axis' },
const data = await response.json(); legend: { data: ['CO2'], textStyle: { color: 'white' } },
document.getElementById('co2').textContent = `当前co2: ${co2.slice(-1)}%`; xAxis: { type: 'category', data: timestamps, axisLabel: { color: 'white' } },
yAxis: { type: 'value', axisLabel: { color: 'white' } },
series: [{ name: 'CO2', type: 'line', data: co2 }]
};
myChart.setOption(option);
document.getElementById('temperature').textContent = `当前CO2: ${co2[co2.length - 1]}℃`;
} }
// 每5秒刷新一次数据
fetch('http://111.230.197.156:8000/get_latest_sensor_data') // 初始化时获取所有数据
.then(response => response.json()) fetchInitialData();
.then(data => {
fetchLatestSensorData(); // 初始加载数据 // 每5秒获取最新的数据
document.addEventListener('DOMContentLoaded', fetchLatestSensorData); setInterval(fetchLatestData, 1000);
}) });

186
static/js/sensor-4.js
View File

@ -1,80 +1,134 @@
//折线图 // //折线图
// document.addEventListener('DOMContentLoaded', function () {
// var chartContainer = document.getElementById('chart-container');
// var myChart = echarts.init(chartContainer);
// var timestamps = [];
// var pressure = [];
// function fetchAndUpdateData() {
// fetch('http://111.230.197.156:8000/get_sensor_data')
// .then(response => response.json())
// .then(data => {
// timestamps = data.timestamps.slice(-200); // 只保留最新的200个数据
// pressure = data.pressure.slice(-200); // 只保留最新的200个数据
// 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: 'pressure',
// type: 'line',
// data: pressure
// }
// ]
// };
// myChart.setOption(option);
// });
// fetch('http://111.230.197.156:8000/get_latest_sensor_data')
// .then(response => response.json())
// .then(data => {
// document.getElementById('pressure').textContent = `当前压力: ${pressure.slice(-1)}Pa`;
// });
// }
// // 每5秒刷新一次数据
// setInterval(fetchAndUpdateData, 1000);
// fetchAndUpdateData(); // 初始加载数据
// });
// //获取当前的湿度
// async function fetchLatestSensorData() {
// const response = await fetch('http://111.230.197.156:8000/get_latest_sensor_data');
// const data = await response.json();
// document.getElementById('pressure').textContent = `当前压力: ${pressure.slice(-1)}Pa`;
// }
// // 每5秒刷新一次数据
// fetch('http://111.230.197.156:8000/get_latest_sensor_data')
// .then(response => response.json())
// .then(data => {
// fetchLatestSensorData(); // 初始加载数据
// document.addEventListener('DOMContentLoaded', fetchLatestSensorData);})
document.addEventListener('DOMContentLoaded', function () { 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 = [], pressure = [];
var pressure = [];
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个时间戳
pressure = data.pressure.slice(-200); // 只保留最新的200个数据 pressure = data.pressure.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: 'pressure',
type: 'line',
data: pressure
} function fetchLatestData() {
]
};
myChart.setOption(option);
});
fetch('http://111.230.197.156: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 = `当前压力: ${pressure.slice(-1)}Pa`; // 如果已有200个数据则移除最旧的一条
if (timestamps.length >= 200) {
timestamps.shift();
pressure.shift();
}
// 添加新的数据
timestamps.push(data.timestamps);
pressure.push(data.pressure);
updateChart();
}); });
} }
// 每5秒刷新一次数据
setInterval(fetchAndUpdateData, 1000);
fetchAndUpdateData(); // 初始加载数据
});
function updateChart() {
//获取当前的湿度 var option = {
async function fetchLatestSensorData() { title: { text: '压力数据', textStyle: { color: 'white' } },
const response = await fetch('http://111.230.197.156:8000/get_latest_sensor_data'); tooltip: { trigger: 'axis' },
const data = await response.json(); legend: { data: ['压力'], textStyle: { color: 'white' } },
document.getElementById('pressure').textContent = `当前压力: ${pressure.slice(-1)}Pa`; xAxis: { type: 'category', data: timestamps, axisLabel: { color: 'white' } },
yAxis: { type: 'value', axisLabel: { color: 'white' } },
series: [{ name: '压力', type: 'line', data: pressure }]
};
myChart.setOption(option);
document.getElementById('temperature').textContent = `当前压力: ${pressure[pressure.length - 1]}℃`;
} }
// 每5秒刷新一次数据
fetch('http://111.230.197.156:8000/get_latest_sensor_data') // 初始化时获取所有数据
.then(response => response.json()) fetchInitialData();
.then(data => {
fetchLatestSensorData(); // 初始加载数据 // 每5秒获取最新的数据
document.addEventListener('DOMContentLoaded', fetchLatestSensorData);}) setInterval(fetchLatestData, 1000);
});