pelma_analyse_service/public/script/http/lora2.js

var device_list = [];

const app = {
    data() {
        return {
            device_list: [],
            show_category1:false,
            show_category2:true,
            menu_selected:1,
            compare:{
                compare1:true,
                compare2:false,
                compare3:false,
                compare4:false,
                compare5:false,
            },
        }
    },
    mounted() {
        var _this = this;
        axios
            .get('/loraDeviceList')
            .then(function (response) {
                device_list = response.data
                _this.device_list = device_list;
            })
            .catch(function (error) { // 请求失败处理
                console.log(error);
            });

        // 每隔5分钟定时刷新
        this.timer = setInterval(() => {
            this.getFxItemlist();
        }, 1000 * 3)
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
    methods: {
        toggleCompare(click_compare) {
            if (click_compare == 1){
                this.show_category = true
            } else {
                this.show_category = false
            }
            this.menu_selected = click_compare;

            for(key in this.compare){
                this.compare[key] = false
                this.compare['compare' + click_compare] = true
            }
        },
        toggleDevice(device_mac){
            console.log(device_mac)
        },
        //定时刷新设备在线状态
        getFxItemlist() {
            this.device_list = device_list
            this.$forceUpdate();
        }
    },
    computed: {
        menuSelected(menu_selected_num) {
            return {
                'menu-button-selected': true,
            }

        }
    }
}

Vue.createApp(app).mount('#app')

var mac = '616162626363';
var clear = 0;
//默认显示各项对比
var show_type = 1;
//1血氧
var compare_type = 1;

var dom1 = document.getElementById('container1');
var dom2 = document.getElementById('container2');
var dom4 = document.getElementById('container4');

var data_blood = [];
var data_temperature = [];
var data_heart = [];
var data_humidity = [];
var data_total = [];

buildCompare(dom1);
buildRadar(dom2);
buildDevice(dom4);

function hideDiv() {
    $("#container1").toggle();
    $("#container2").toggle();
    $("#container3").toggle();

    clear = 1
    show_type = (show_type == 1) ? 2 : 1;
}

/**
 * 各项对比
 * @param dom
 */
function buildCompare(dom) {
    var myChart = echarts.init(dom, 'dark', {
        renderer: 'canvas',
        useDirtyRect: false
    });

    var option = {
        color: ['#2ec7c9', '#5ab1ef', '#f5994e', '#c05050', '#c14089', '#9a7fd1'],
        backgroundColor:'',
        grid: {
            left: '25%'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: [
                {
                    name: '血氧',
                    textStyle: {
                        color: 'auto'
                    }
                },
                {
                    name: '温度',
                    textStyle: {
                        color: 'auto'
                    }
                },
                {
                    name: '心率',
                    textStyle: {
                        color: 'auto'
                    }
                },
                {
                    name: '湿度',
                    textStyle: {
                        color: 'auto'
                    }
                },
                {
                    name: '总体',
                    textStyle: {
                        color: 'auto'
                    }
                }
            ],
            textStyle: {
                fontSize: 20
            }
        },
        xAxis: {
            type: 'time',
            name: '时间（/s）',
            axisLabel: {
                fontSize: 16,
                formatter: function (value) {
                    return echarts.format.formatTime('mm:ss', new Date(value));
                }
            },
            nameTextStyle: {
                fontSize: 16
            }
        },
        yAxis: [
            {
                name: '血氧',
                min: 0,
                max: 100,
                position: 'left',
                nameTextStyle: {
                    align: 'right',
                    color: '#2ec7c9',
                    fontSize: 16
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#2ec7c9'
                    }
                },
                axisLabel: {
                    formatter: '{value}%',
                    color: '#2ec7c9',
                    fontSize: 16
                },
            },
            {
                type: 'value',
                name: '温度',
                min: 30,
                max: 45,
                position: 'left',
                offset: 50,
                nameTextStyle: {
                    align: 'right',
                    color: '#5ab1ef',
                    fontSize: 16
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#5ab1ef'
                    }
                },
                axisLabel: {
                    formatter: '{value}°C',
                    color: '#5ab1ef',
                    fontSize: 16
                },
            },
            {
                type: 'value',
                name: '心率',
                min: 0,
                max: 150,
                position: 'left',
                offset: 100,
                nameTextStyle: {
                    align: 'right',
                    color: '#f5994e',
                    fontSize: 16
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#f5994e'
                    }
                },
                axisLabel: {
                    formatter: '{value}次',
                    color: '#f5994e',
                    fontSize: 16
                },
            },
            {
                type: 'value',
                name: '湿度',
                min: 0,
                max: 100,
                position: 'left',
                offset: 150,
                nameTextStyle: {
                    align: 'right',
                    color: '#c05050',
                    fontSize: 16
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#c05050'
                    }
                },
                axisLabel: {
                    formatter: '{value}%',
                    color: '#c05050',
                    fontSize: 16
                },
            },
            {
                type: 'value',
                name: '总体',
                min: 0,
                max: 100,
                position: 'left',
                offset: 200,
                nameTextStyle: {
                    align: 'right',
                    color: '#c14089',
                    fontSize: 16
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#c14089'
                    }
                },
                axisLabel: {
                    formatter: '{value}%',
                    color: '#c14089',
                    fontSize: 16
                },
            }
        ],
        series: [
            {
                name: '血氧',
                type: 'scatter',
                symbolSize: 10,
                yAxisIndex: 0,
                tooltip: {
                    valueFormatter: (value) => value.toFixed(2) + ' %'
                }
            },
            {
                name: '温度',
                type: 'scatter',
                symbolSize: 10,
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: (value) => value.toFixed(2) + ' ℃'
                }
            },
            {
                name: '心率',
                type: 'scatter',
                symbolSize: 10,
                yAxisIndex: 2,
                tooltip: {
                    valueFormatter: (value) => value.toFixed(2) + ' 次'
                }
            },
            {
                name: '湿度',
                type: 'scatter',
                symbolSize: 10,
                yAxisIndex: 3,
                tooltip: {
                    valueFormatter: (value) => value.toFixed(2) + ' %'
                }
            },
            {
                name: '总体',
                type: 'line',
                smooth: true,
                tooltip: {
                    valueFormatter: (value) => value.toFixed(2) + ' %'
                }
            }
        ],

    };


    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);


    setInterval(function () {
        if (show_type != 1) {
            if (clear == 1) {
                data_blood = []
                data_temperature = [];
                data_heart = [];
                data_humidity = [];
                data_total = [];
                clear = 0;
            }

            return;
        }

        $.get('/loraData2?mac=' + mac).done(function (rawData) {
            if (!rawData || rawData.length == 0){
                return;
            }

            let limit = 5
            if (data_blood.length >= limit) {
                data_blood.shift();
            }
            if (data_temperature.length >= limit) {
                data_temperature.shift();
            }
            if (data_heart.length >= limit) {
                data_heart.shift();
            }
            if (data_humidity.length >= limit) {
                data_humidity.shift();
            }
            if (data_total.length >= 10 * limit) {
                data_total.splice(0, 10);
            }
            rawData.blood.forEach(value => data_blood.push(value));
            rawData.temperature.forEach(value => data_temperature.push(value));
            rawData.heart.forEach(value => data_heart.push(value));
            rawData.humidity.forEach(value => data_humidity.push(value));
            // rawData.total_data.forEach(value => data_total.push(value));

            myChart.setOption({
                series: [
                    {
                        name: '血氧',
                        data: data_blood
                    }, {
                        name: '温度',
                        data: data_temperature
                    }, {
                        name: '心率',
                        data: data_heart
                    }, {
                        name: '湿度',
                        data: data_humidity
                    },
                    // {
                    //     name: '总体',
                    //     data: data_total
                    // }
                ]
            });
        });

    }, 2000);
}

/**
 * 雷达图
 * @param dom
 */
function buildRadar(dom) {
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false,
    });
    // window.onresize = function() {
    //     myChart.resize();
    // };

    var option = {
        color: ['#2ec7c9', '#5ab1ef', '#f5994e', '#c05050', '#c14089', '#9a7fd1'],
        backgroundColor:'',

        radar: {
            // shape: 'circle',
            indicator: [
                {name: '血氧', max: 100},
                {name: '温度', max: 45},
                {name: '心率', max: 150},
                {name: '湿度', max: 100},
            ],
            axisName: {
                fontSize: 18,
                color: '#2ec7c9',
            },
        },
        series: [
            {
                type: 'radar',
            }
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);

    setInterval(buildData, 1000 * 5);

    function buildData() {
        if (show_type != 1 || data_blood.length == 0) {
            return;
        }

        let blood = data_blood.slice(-1)[0][1];
        let temperature = data_temperature.slice(-1)[0][1];
        let heart = data_temperature.slice(-1)[0][1];
        let humidity = data_humidity.slice(-1)[0][1];

        myChart.setOption({
            series: [
                {
                    data: [
                        {
                            value: [blood, temperature, heart, humidity],
                            areaStyle: {
                                color: 'rgba(255, 228, 52, 0.6)'
                            },
                            label: {
                                show: true,
                                textStyle: {
                                    color: '#2ec7c9',
                                    fontSize: 16,
                                },
                                formatter: function (params) {
                                    return params.value;
                                }
                            }
                        }

                    ]
                }
            ]
        });
    }
}

function buildDevice(dom) {
    var myChart = echarts.init(dom, 'dark', {
        renderer: 'canvas',
        useDirtyRect: false
    });

    var option = {
        backgroundColor:'',
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['设备1', '设备2', '设备3',],
            textStyle: {
                fontSize: 20
            }
        },
        xAxis: {
            type: 'time',
            name: '时间（/s）',
            axisLabel: {
                fontSize: 16,
                formatter: function (value) {
                    return echarts.format.formatTime('mm:ss', new Date(value));
                }
            },
            nameTextStyle: {
                fontSize: 16
            }
        },
        yAxis: [
            {
                type: 'value',
                min: 0,
                max: 100,
                nameTextStyle: {
                    align: 'right',
                    fontSize: 16
                },
                axisLine: {
                    show: true,
                },
                axisLabel: {
                    formatter: '{value}%',
                    fontSize: 16
                },
            }
        ],

    };


    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);

    let special_compare_data = [];
    setInterval(function () {
        // if (show_type != 2) {
        //     if (clear == 1) {
        //         special_compare_data = [];
        //         clear = 0;
        //     }
        //
        //     return;
        // }


        let chart_data = [];
        let expire = 0;
        $.get('/getSpecialCompare?compare_type=' + compare_type).done(function (rawData) {
            //追加数据
            device_list.forEach(function (item, key) {
                let name = item.name;
                let device_data = rawData[name];
                if (device_data) {
                    device_list[key].online = 1
                    if (special_compare_data[name]) {
                        device_data.forEach(value => special_compare_data[name].push(value));
                    } else {
                        device_data.forEach(function (value) {
                            special_compare_data[name] = [value]
                        });
                    }

                    if (special_compare_data[name].length > 5) {
                        if (special_compare_data[name][0][0] > expire) {
                            expire = special_compare_data[name][0][0];
                        }

                    }
                } else {
                    device_list[key].online = 0
                }
            })

            //删除过期时间，构建图表数据
            for (key in special_compare_data) {
                if (special_compare_data[key]
                    && special_compare_data[key].length > 0
                    && special_compare_data[key][0][0] <= expire) {
                    special_compare_data[key].shift()
                }

                chart_data.push({
                    name: key,
                    data: special_compare_data[key],
                    type: 'line',
                    smooth: true,
                })
            }

            myChart.setOption({
                series: chart_data
            });
        });

    }, 1000 * 2);
}