From efc40453bedaaf468116aa10a36fdf3ff20dae5c Mon Sep 17 00:00:00 2001 From: IrisVega Date: Sat, 20 Jul 2024 19:52:14 +0800 Subject: [PATCH] modified: static/js/sensor-2.js modified: static/js/sensor-3.js modified: static/js/sensor-4.js --- static/js/sensor-2.js | 179 ++++++++++++++++++++++++++-------------- static/js/sensor-3.js | 188 +++++++++++++++++++++++++++--------------- static/js/sensor-4.js | 186 ++++++++++++++++++++++++++--------------- 3 files changed, 357 insertions(+), 196 deletions(-) diff --git a/static/js/sensor-2.js b/static/js/sensor-2.js index 7958e80..154ef66 100644 --- a/static/js/sensor-2.js +++ b/static/js/sensor-2.js @@ -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 () { var chartContainer = document.getElementById('chart-container'); var myChart = echarts.init(chartContainer); - var timestamps = []; - var humidities = []; + var timestamps = [], humidities = []; - function fetchAndUpdateData() { - fetchLatestSensorData() + function fetchInitialData() { 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个数据 + timestamps = data.timestamps.slice(-200); // 只保留最新的200个时间戳 + humidities = 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); + updateChart(); }); + } + + function fetchLatestData() { fetch('http://111.230.197.156:8000/get_latest_sensor_data') .then(response => response.json()) .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); +}); diff --git a/static/js/sensor-3.js b/static/js/sensor-3.js index bd5c56f..02f1a08 100644 --- a/static/js/sensor-3.js +++ b/static/js/sensor-3.js @@ -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 () { var chartContainer = document.getElementById('chart-container'); var myChart = echarts.init(chartContainer); - var timestamps = []; - var co2 = []; + var timestamps = [], 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); - }); + function fetchInitialData() { + 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个CO2数据 + + updateChart(); + }); + } + + function fetchLatestData() { 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)}%`; + // 如果已有200个数据则移除最旧的一条 + if (timestamps.length >= 200) { + timestamps.shift(); + co2.shift(); + } + + // 添加新的数据 + timestamps.push(data.timestamps); + co2.push(data.co2); + + 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('co2').textContent = `当前co2: ${co2.slice(-1)}%`; + function updateChart() { + 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); + 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()) - .then(data => { - fetchLatestSensorData(); // 初始加载数据 - document.addEventListener('DOMContentLoaded', fetchLatestSensorData); - }) \ No newline at end of file + + // 初始化时获取所有数据 + fetchInitialData(); + + // 每5秒获取最新的数据 + setInterval(fetchLatestData, 1000); +}); \ No newline at end of file diff --git a/static/js/sensor-4.js b/static/js/sensor-4.js index 9b7426f..25d766c 100644 --- a/static/js/sensor-4.js +++ b/static/js/sensor-4.js @@ -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 () { var chartContainer = document.getElementById('chart-container'); var myChart = echarts.init(chartContainer); - var timestamps = []; - var pressure = []; + var timestamps = [], 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个数据 + function fetchInitialData() { + 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 - - } - ] - }; + updateChart(); + }); + } - myChart.setOption(option); - }); + function fetchLatestData() { 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`; + // 如果已有200个数据则移除最旧的一条 + if (timestamps.length >= 200) { + timestamps.shift(); + pressure.shift(); + } + + // 添加新的数据 + timestamps.push(data.timestamps); + pressure.push(data.pressure); + + 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('pressure').textContent = `当前压力: ${pressure.slice(-1)}Pa`; + 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: 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()) - .then(data => { - fetchLatestSensorData(); // 初始加载数据 - document.addEventListener('DOMContentLoaded', fetchLatestSensorData);}) \ No newline at end of file + + // 初始化时获取所有数据 + fetchInitialData(); + + // 每5秒获取最新的数据 + setInterval(fetchLatestData, 1000); +}); \ No newline at end of file