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);})
document.addEventListener('DOMContentLoaded', function () {
    var chartContainer = document.getElementById('chart-container');
    var myChart = echarts.init(chartContainer);

    var timestamps = [], pressure = [];

    function fetchInitialData() {
        fetch('http://111.230.197.156:8000/get_sensor_data')
            .then(response => response.json())
            .then(data => {
                var maxDataPoints = window.innerWidth <= 768 ? 50 : 200; // 根据屏幕宽度决定数据量
                timestamps = data.timestamps.slice(-maxDataPoints);
                pressure = data.pressure.slice(-maxDataPoints);
                
                updateChart();
            });
    }

    function fetchLatestData() {
        fetch('http://111.230.197.156:8000/get_latest_sensor_data')
            .then(response => response.json())
            .then(data => {
                // 如果已有200个数据则移除最旧的一条
                if (timestamps.length >= 200) {
                    timestamps.shift();
                    pressure.shift();
                }

                // 添加新的数据
                timestamps.push(data.timestamps);
                pressure.push(data.pressure);

                updateChart();
            });
    }

    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('pressure').textContent = `当前压力: ${pressure[pressure.length - 1]}Pa`;
    }

    // 初始化时获取所有数据
    fetchInitialData();

    // 每5秒获取最新的数据
    setInterval(fetchLatestData, 1000);
});