RQteafactory-NodeJS/static/js/sensor-4.js

//折线图
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);})