history echart

main.py

@@ -30,6 +30,7 @@ from jose import JWTError, jwt
 from fastapi_jwt_auth import AuthJWT
 from fastapi_jwt_auth.exceptions import AuthJWTException
 from fastapi.security import OAuth2AuthorizationCodeBearer, OAuth2PasswordRequestForm
+import numpy as np
 import pymysql
 pymysql.install_as_MySQLdb()
 
@@ -210,6 +211,80 @@ async def get_health(date: str):
     return fake_data[date]
 
 
+@app.get('/history_data')
+async def get_history(time_end: str):
+    """ 透過終點時間，抓取歷史資料。 """
+    date = str(datetime.strptime(time_end, "%Y-%m-%d"))[:10]
+    print(date)
+    print(str(datetime.today()))
+    print(str(datetime.today()-timedelta(days=1)))
+
+
+    fake_data = {
+        str(datetime.today())[:10]: {
+            'curr_history': {
+                'RPM_1X': list(np.random.rand(13)),
+                'RPM_2X': list(np.random.rand(13)),
+                'RPM_3X': list(np.random.rand(13)),
+                'RPM_4X': list(np.random.rand(13)),
+                'RPM_5X': list(np.random.rand(13)),
+                'RPM_6X': list(np.random.rand(13)),
+                'RPM_7X': list(np.random.rand(13)),
+                'RPM_8X': list(np.random.rand(13)),
+                'Gear_1X': list(np.random.rand(13)),
+                'Gear_2X': list(np.random.rand(13)),
+                'Gear_3X': list(np.random.rand(13)),
+                'Gear_4X': list(np.random.rand(13)),
+            },
+            'past_history': {
+                'RPM_1X': list(np.random.rand(13)),
+                'RPM_2X': list(np.random.rand(13)),
+                'RPM_3X': list(np.random.rand(13)),
+                'RPM_4X': list(np.random.rand(13)),
+                'RPM_5X': list(np.random.rand(13)),
+                'RPM_6X': list(np.random.rand(13)),
+                'RPM_7X': list(np.random.rand(13)),
+                'RPM_8X': list(np.random.rand(13)),
+                'Gear_1X': list(np.random.rand(13)),
+                'Gear_2X': list(np.random.rand(13)),
+                'Gear_3X': list(np.random.rand(13)),
+                'Gear_4X': list(np.random.rand(13)),
+            }
+        },
+        str(datetime.today()-timedelta(days=1))[:10]: {
+            'curr_history': {
+                'RPM_1X': list(np.random.rand(13)),
+                'RPM_2X': list(np.random.rand(13)),
+                'RPM_3X': list(np.random.rand(13)),
+                'RPM_4X': list(np.random.rand(13)),
+                'RPM_5X': list(np.random.rand(13)),
+                'RPM_6X': list(np.random.rand(13)),
+                'RPM_7X': list(np.random.rand(13)),
+                'RPM_8X': list(np.random.rand(13)),
+                'Gear_1X': list(np.random.rand(13)),
+                'Gear_2X': list(np.random.rand(13)),
+                'Gear_3X': list(np.random.rand(13)),
+                'Gear_4X': list(np.random.rand(13)),
+            },
+            'past_history': {
+                'RPM_1X': list(np.random.rand(13)),
+                'RPM_2X': list(np.random.rand(13)),
+                'RPM_3X': list(np.random.rand(13)),
+                'RPM_4X': list(np.random.rand(13)),
+                'RPM_5X': list(np.random.rand(13)),
+                'RPM_6X': list(np.random.rand(13)),
+                'RPM_7X': list(np.random.rand(13)),
+                'RPM_8X': list(np.random.rand(13)),
+                'Gear_1X': list(np.random.rand(13)),
+                'Gear_2X': list(np.random.rand(13)),
+                'Gear_3X': list(np.random.rand(13)),
+                'Gear_4X': list(np.random.rand(13)),
+            }
+        },
+    }
+    return fake_data[date]
+
+
 
 
 

templates/vibration.html

@@ -9,10 +9,15 @@
     <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}`)
@@ -186,6 +191,348 @@
                 };
                 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>