modified: static/js/sensor-2.js
modified: static/js/sensor-3.js modified: static/js/sensor-4.js
This commit is contained in:
parent
c23b8b6675
commit
efc40453be
@ -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);
|
||||
});
|
||||
|
||||
@ -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);
|
||||
})
|
||||
|
||||
// 初始化时获取所有数据
|
||||
fetchInitialData();
|
||||
|
||||
// 每5秒获取最新的数据
|
||||
setInterval(fetchLatestData, 1000);
|
||||
});
|
||||
@ -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);})
|
||||
|
||||
// 初始化时获取所有数据
|
||||
fetchInitialData();
|
||||
|
||||
// 每5秒获取最新的数据
|
||||
setInterval(fetchLatestData, 1000);
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user