feat: 第一题基本完成

app.py

@@ -1,4 +1,88 @@
+"""
+TODO 
+"""
+# 首先计算相对路径
+from pathlib import Path
+this_file = Path(__file__).resolve()
+this_directory = this_file.parent
+data_cangzhou_folder = this_directory / "data/Cangzhou"
+data_static_folder = data_cangzhou_folder / "static"
+
+# 数据文件夹路径
+data_folder = data_static_folder
+
+# 然后
 import streamlit as st
+import pandas as pd
+import os
+from datetime import datetime
+
+# 设置页面配置为宽屏模式，以便更好地显示三个图表
+st.set_page_config(layout="wide")
+
+# 设置应用标题
+st.title("多图表可视化展示")
+
+# 创建三个等宽的列
+col1, col2, col3 = st.columns(3)
+
+
+# 加载和过滤数据的函数
+def load_and_filter_data(file_path):
+    # 根据提供的CSV格式，第一列是时间戳但没有列名
+    df = pd.read_csv(file_path, header=0, names=['timestamp', 'pm2d5', 'lat', 'lon'])
+    
+    # 确保时间戳列是datetime格式
+    df['timestamp'] = pd.to_datetime(df['timestamp'])
+    
+    # 过滤2019-01-01 00:00:00到2019-01-01 12:00:00之间的数据
+    start_time = datetime(2019, 1, 1, 0, 0, 0)
+    end_time = datetime(2019, 1, 1, 12, 0, 0)
+    filtered_df = df[(df['timestamp'] >= start_time) & (df['timestamp'] <= end_time)]
+    
+    return filtered_df
+
+# 第一列：PM2.5随时间变化的折线图
+with col1:
+    st.header("PM2.5随时间变化")
+    
+    # 获取数据文件夹中的所有CSV文件
+    csv_files = [f for f in os.listdir(data_folder) if f.endswith('.csv')]
+    
+    # 创建字典存储每个传感器的数据
+    sensor_data = {}
+    
+    # 加载并过滤每个传感器的数据
+    for file in csv_files:
+        file_path = os.path.join(data_folder, file)
+        sensor_name = file.split('.')[0]  # 从文件名提取传感器名称
+        sensor_data[sensor_name] = load_and_filter_data(file_path)
+    
+    # 准备可视化数据
+    # 创建一个以时间戳为索引，每个传感器的PM2.5值为列的数据框
+    chart_data = pd.DataFrame()
+    
+    for sensor, data in sensor_data.items():
+        # 使用pm2d5列作为PM2.5数据
+        chart_data[sensor] = data.set_index('timestamp')['pm2d5']
+    
+    # 绘制折线图
+    st.line_chart(
+        chart_data,
+        x=None,  # 使用索引(timestamp)作为x轴
+        y=list(sensor_data.keys()),  # 使用所有传感器名称作为y列
+        x_label="时间",
+        y_label="PM2.5水平"
+    )
+
+# 第二列：第二个图表（您可以根据需要自定义）
+with col2:
+    st.header("第二个图表")
+    # 这里添加第二个图表的代码
+    st.write("在这里添加您的第二个图表")
 
-x = st.slider('Select a value')
-st.write(x, 'squared is', x * x)
+# 第三列：第三个图表（您可以根据需要自定义）
+with col3:
+    st.header("第三个图表")
+    # 这里添加第三个图表的代码
+    st.write("在这里添加您的第三个图表")