pelma_analyse_service/public/script/http/lora2.js

var device_list = [];
var show_category = 1;
var mac_id = '';
var clear1 = 0;
var clear2 = 0;
var data_blood = [];
var data_temperature = [];
var data_heart = [];
var data_humidity = [];
var data_total = [];
var original2 = '';


const app = {
    data() {
        return {
            device_list : [],
            show_category : show_category,
            mac_id : mac_id,
            original2 : original2,
        }
    },
    mounted() {
        var _this = this;
        axios
            .get('/loraDeviceList')
            .then(function (response) {
                device_list = response.data
                _this.device_list = device_list;
                _this.mac_id = device_list[0].mac;
                mac_id = device_list[0].mac;
            })
            .catch(function (error) { // 请求失败处理
                console.log(error);
            });

        // 每隔5分钟定时刷新
        this.timer = setInterval(() => {
            this.getFxItemlist();
        }, 1000 * 3)
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
    methods: {
        toggleCompare(click_compare) {
            this.show_category = click_compare;
            show_category = click_compare;
            clear1 = 1;
            clear2 = 1;
        },
        toggleDevice(mac){
            this.show_category = 1;
            show_category = 1;
            clear1 = 1;
            clear2 = 1;
            this.mac_id = mac;
            mac_id = mac;

        },
        //定时刷新设备在线状态
        getFxItemlist() {
            this.device_list = device_list;
            this.data_blood = data_blood;
            this.data_temperature = data_temperature;
            this.data_heart = data_heart;
            this.data_humidity = data_humidity;
            this.data_total = data_total;
            this.original2 = original2;

            this.$forceUpdate();
        }
    }
}

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


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


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

/**
 * 各项对比
 * @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: 20,
                yAxisIndex: 0,
                tooltip: {
                    valueFormatter: (value) => value.toFixed(2) + ' %'
                }
            },
            {
                name: '温度',
                type: 'scatter',
                symbolSize: 20,
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: (value) => value.toFixed(2) + ' ℃'
                }
            },
            {
                name: '心率',
                type: 'scatter',
                symbolSize: 20,
                yAxisIndex: 2,
                tooltip: {
                    valueFormatter: (value) => value.toFixed(2) + ' 次'
                }
            },
            {
                name: '湿度',
                type: 'scatter',
                symbolSize: 20,
                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 (clear1 == 1) {
            data_blood = []
            data_temperature = [];
            data_heart = [];
            data_humidity = [];
            data_total = [];
            clear1 = 0;
            setData(data_blood, data_temperature, data_heart, data_humidity);
        }
        if (show_category != 1) {
            return;
        }

        $.get('/loraData2?node=' + mac_id).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));
            if (rawData.humidity && rawData.humidity.length > 0){
                rawData.humidity.forEach(value => data_humidity.push(value));
            }

            // rawData.total_data.forEach(value => data_total.push(value));
            setData(data_blood, data_temperature, data_heart, data_humidity);

        });

    }, 2000);

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

/**
 * 雷达图
 * @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_category != 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;
                                }
                            }
                        }

                    ]
                }
            ]
        });
    }
}

/**
 * 专项对比
 * @param dom
 */
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 (clear2 == 1) {
            special_compare_data = [];
            clear2 = 0;
        }
        // if (show_category == 1) {
        //     return;
        // }
        let compare_type = show_category - 1;

        let chart_data = [];
        original2 = '';
        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()
                }

                special_compare_data[key].forEach(function (item) {
                    original2 += item[1] + ' ';
                })

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

            let yAxis = [];

            switch (compare_type) {
                case 1:
                    yAxis = [
                        {
                            name: '血氧',
                            min: 0,
                            max: 100,
                            nameTextStyle: {
                                align: 'right',
                                color: '#2ec7c9',
                                fontSize: 16
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#2ec7c9'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}%',
                                color: '#2ec7c9',
                                fontSize: 16
                            },
                        },
                    ];
                    break;
                case 2:
                    yAxis = [
                        {
                            type: 'value',
                            name: '温度',
                            min: 30,
                            max: 45,
                            nameTextStyle: {
                                align: 'right',
                                color: '#5ab1ef',
                                fontSize: 16
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#5ab1ef'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}°C',
                                color: '#5ab1ef',
                                fontSize: 16
                            },
                        }
                    ];
                    break;
                case 3:
                    yAxis = [
                        {
                            type: 'value',
                            name: '心率',
                            min: 0,
                            max: 150,
                            nameTextStyle: {
                                align: 'right',
                                color: '#f5994e',
                                fontSize: 16
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#f5994e'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}次',
                                color: '#f5994e',
                                fontSize: 16
                            },
                        }
                    ];
                    break;
                case 4:
                    yAxis = [
                        {
                            type: 'value',
                            name: '湿度',
                            min: 0,
                            max: 100,
                            nameTextStyle: {
                                align: 'right',
                                color: '#c05050',
                                fontSize: 16
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#c05050'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}%',
                                color: '#c05050',
                                fontSize: 16
                            },
                        }
                    ];
                    break;
                default:

            };

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

    }, 1000 * 2);
}