mechanical/templates/vibration.html

{% extends "index.html" %}
{% block title %}振動監控{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}


{% block body %}
    <div id="headlth_indicator">
        <div id="curr_health" style="width: 300px;height:300px;float:right"></div>
        <div id="pred_health" style="width: 300px;height:300px;float:right"></div>
        
    </div>
    <div id="history_record" style="width: 600px;height:600px;float:right"></div>
    
    <script>
        var curr_health = echarts.init(document.getElementById("curr_health"));
        var pred_health = echarts.init(document.getElementById("pred_health"));
        var history_record = echarts.init(document.getElementById("history_record"));


        let date = transform_time_to_string(new Date());
        fetch(`/health?date=${date}`)
            .then(function(response) {
                return response.json();
            })
            .then(function(myJson) {
                console.log(myJson);
                option = {
                    series: [{
                        type: 'gauge',
                        startAngle: 180,
                        endAngle: 0,
                        min: 0,
                        max: 1,
                        splitNumber: 8,
                        axisLine: {
                            lineStyle: {
                                width: 6,
                                color: [
                                    [0.25, '#FF6E76'],
                                    [0.5, '#FDDD60'],
                                    // [0.75, '#58D9F9'],
                                    [1, '#7CFFB2']
                                ]
                            }
                        },
                        pointer: {
                            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                            length: '70%',
                            width: 5,
                            offsetCenter: [0, '-60%'],
                            itemStyle: {
                                color: 'auto'
                            }
                        },
                        axisTick: {
                            length: 12,
                            lineStyle: {
                                color: 'auto',
                                width: 2
                            }
                        },
                        splitLine: {
                            length: 20,
                            lineStyle: {
                                color: 'auto',
                                width: 5
                            }
                        },
                        axisLabel: {
                            color: '#464646',
                            fontSize: 20,
                            distance: -60,
                            formatter: function (value) {
                                if (value === 1) {
                                    return '100';
                                }
                                // else if (value === 0.625) {
                                //     return '中';
                                // }
                                else if (value === 0.5) {
                                    return '50';
                                }
                                else if (value === 0.3) {
                                    return '30';
                                }
                            }
                        },
                        title: {
                            offsetCenter: [0, '-20%'],
                            fontSize: 30
                        },
                        detail: {
                            fontSize: 15,
                            offsetCenter: [0, '+20%'],
                            valueAnimation: true,
                            formatter: function (value) {
                                return '目前健康指標: ' + Math.round(value * 100) + '分';
                                // return '目前健康指標'
                            },
                            color: 'auto'
                        },
                        data: [{
                            value: myJson['curr_health'],
                            name: ''
                        }]
                    }]
                };
                pred_health.setOption(option);
                option = {
                    series: [{
                        type: 'gauge',
                        startAngle: 180,
                        endAngle: 0,
                        min: 0,
                        max: 1,
                        splitNumber: 8,
                        axisLine: {
                            lineStyle: {
                                width: 6,
                                color: [
                                    [0.25, '#FF6E76'],
                                    [0.5, '#FDDD60'],
                                    // [0.75, '#58D9F9'],
                                    [1, '#7CFFB2']
                                ]
                            }
                        },
                        pointer: {
                            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                            length: '70%',
                            width: 5,
                            offsetCenter: [0, '-60%'],
                            itemStyle: {
                                color: 'auto'
                            }
                        },
                        axisTick: {
                            length: 12,
                            lineStyle: {
                                color: 'auto',
                                width: 2
                            }
                        },
                        splitLine: {
                            length: 20,
                            lineStyle: {
                                color: 'auto',
                                width: 5
                            }
                        },
                        axisLabel: {
                            color: '#464646',
                            fontSize: 20,
                            distance: -60,
                            formatter: function (value) {
                                if (value === 1) {
                                    return '100';
                                }
                                // else if (value === 0.625) {
                                //     return '中';
                                // }
                                else if (value === 0.5) {
                                    return '50';
                                }
                                else if (value === 0.3) {
                                    return '30';
                                }
                            }
                        },
                        title: {
                            offsetCenter: [0, '-20%'],
                            fontSize: 30
                        },
                        detail: {
                            fontSize: 15,
                            offsetCenter: [0, '20%'],
                            valueAnimation: true,
                            formatter: function (value) {
                                return '預測健康指標: ' + Math.round(value * 100) + '分';
                                // return '目前健康指標'
                            },
                            color: 'auto'
                        },
                        data: [{
                            value: myJson['pred_health'],
                            name: ''
                        }]
                    }]
                };
                curr_health.setOption(option);
            });
        
            fetch(`/history_data?time_end=${date}`)
            .then(function(response) {
                return response.json();
            })
            .then(function(myJson) {
                console.log(myJson);
                option = {
                    // color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                    title: {
                        text: '歷史紀錄圖表'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['RPM_1X', 'RPM_2X', 'RPM_3X', 'RPM_4X', 'RPM_5X', 'RPM_6X', 'RPM_7X', 'RPM_8X', 'Gear_1X', 'Gear_2X', 'Gear_3X','Gear_4X']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: 'RPM_1X',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            lineStyle: {
                                width: 0
                            },
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                //     offset: 0,
                                //     color: 'rgba(128, 255, 165)'
                                // }, {
                                //     offset: 1,
                                //     color: 'rgba(1, 191, 236)'
                                // }])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: myJson['curr_history']['RPM_1X']
                        },
                        {
                            name: 'RPM_2X',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            lineStyle: {
                                width: 0
                            },
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                //     offset: 0,
                                //     color: 'rgba(128, 255, 165)'
                                // }, {
                                //     offset: 1,
                                //     color: 'rgba(1, 191, 236)'
                                // }])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: myJson['curr_history']['RPM_2X']
                        },
                        {
                            name: 'RPM_3X',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            lineStyle: {
                                width: 0
                            },
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                //     offset: 0,
                                //     color: 'rgba(128, 255, 165)'
                                // }, {
                                //     offset: 1,
                                //     color: 'rgba(1, 191, 236)'
                                // }])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: myJson['curr_history']['RPM_3X']
                        },
                        {
                            name: 'RPM_4X',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            lineStyle: {
                                width: 0
                            },
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                //     offset: 0,
                                //     color: 'rgba(128, 255, 165)'
                                // }, {
                                //     offset: 1,
                                //     color: 'rgba(1, 191, 236)'
                                // }])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: myJson['curr_history']['RPM_4X']
                        },
                        {
                            name: 'RPM_5X',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            lineStyle: {
                                width: 0
                            },
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                //     offset: 0,
                                //     color: 'rgba(128, 255, 165)'
                                // }, {
                                //     offset: 1,
                                //     color: 'rgba(1, 191, 236)'
                                // }])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: myJson['curr_history']['RPM_5X']
                        },
                        {
                            name: 'RPM_6X',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            lineStyle: {
                                width: 0
                            },
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                //     offset: 0,
                                //     color: 'rgba(128, 255, 165)'
                                // }, {
                                //     offset: 1,
                                //     color: 'rgba(1, 191, 236)'
                                // }])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: myJson['curr_history']['RPM_6X']
                        },
                        {
                            name: 'RPM_7X',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            lineStyle: {
                                width: 0
                            },
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                //     offset: 0,
                                //     color: 'rgba(128, 255, 165)'
                                // }, {
                                //     offset: 1,
                                //     color: 'rgba(1, 191, 236)'
                                // }])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: myJson['curr_history']['RPM_7X']
                        },
                        {
                            name: 'RPM_8X',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            lineStyle: {
                                width: 0
                            },
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                //     offset: 0,
                                //     color: 'rgba(128, 255, 165)'
                                // }, {
                                //     offset: 1,
                                //     color: 'rgba(1, 191, 236)'
                                // }])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: myJson['curr_history']['RPM_1X']
                        },
                        {
                            name: 'Gear_1X',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            lineStyle: {
                                width: 0
                            },
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                //     offset: 0,
                                //     color: 'rgba(128, 255, 165)'
                                // }, {
                                //     offset: 1,
                                //     color: 'rgba(1, 191, 236)'
                                // }])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: myJson['curr_history']['Gear_1X']
                        },
                        {
                            name: 'Gear_2X',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            lineStyle: {
                                width: 0
                            },
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                //     offset: 0,
                                //     color: 'rgba(128, 255, 165)'
                                // }, {
                                //     offset: 1,
                                //     color: 'rgba(1, 191, 236)'
                                // }])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: myJson['curr_history']['Gear_2X']
                        },
                        {
                            name: 'Gear_3X',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            lineStyle: {
                                width: 0
                            },
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                //     offset: 0,
                                //     color: 'rgba(128, 255, 165)'
                                // }, {
                                //     offset: 1,
                                //     color: 'rgba(1, 191, 236)'
                                // }])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: myJson['curr_history']['Gear_3X']
                        },
                        {
                            name: 'Gear_4X',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            lineStyle: {
                                width: 0
                            },
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                //     offset: 0,
                                //     color: 'rgba(128, 255, 165)'
                                // }, {
                                //     offset: 1,
                                //     color: 'rgba(1, 191, 236)'
                                // }])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: myJson['curr_history']['Gear_4X']
                        }
                    ]
                };
                history_record.setOption(option);
            });
        
            
    
        
    </script>
{% endblock %}