一、 项目概述1.1 系统简介本项目是一个集成图像识别、数据分析、智能问答的现代化环境监测系统。系统采用Vue3Flask前后端分离架构运用多模态深度学习技术为用户提供实时空气质量监测、历史数据分析、城市对比、趋势预测、天气图像识别和智能问答等综合服务。1.2 核心功能实时监测 24小时不间断监测全国31个主要城市空气质量AI图像识别 基于EfficientNetB0深度学习模型的天气图像识别数据分析 历史数据查询、城市横向对比、趋势预测分析智能问答 集成百度文心一言API的环境咨询服务1.3 技术特色多模态融合 图像、数值、文本三种数据模态的深度融合前后端分离 现代化架构设计提升开发效率和系统可维护性AI驱动 深度学习自然语言处理双重技术驱动可视化增强 专业级ECharts图表展示二、 完整项目目录结构天气系统前后端分离vueFlask/ ├── 前端模块 (Vue3) │ ├── src/ │ │ ├── components/ │ │ │ └── NavBar.vue # 导航栏组件 │ │ ├── views/ # 页面视图组件 │ │ │ ├── LoginView.vue # 用户登录注册页面 │ │ │ ├── AdminDashboard.vue # 管理员后台管理 │ │ │ ├── Home.vue # 系统首页门户 │ │ │ ├── RealTimeView.vue # 实时空气质量监测 │ │ │ ├── HistoryView.vue # 历史数据查询分析 │ │ │ ├── CompareView.vue # 多城市对比分析 │ │ │ ├── PredictionView.vue # 趋势预测分析 │ │ │ ├── ImageAnalysisView.vue # AI图像识别分析 │ │ │ └── ChatView.vue # AI智能问答系统 │ │ ├── router/ │ │ │ └── index.js # Vue路由配置 │ │ ├── utils/ │ │ │ ├── api.js # API接口封装 │ │ │ ├── auth.js # 用户认证工具 │ │ │ ├── constants.js # 常量定义 │ │ │ └── helpers.js # 辅助函数 │ │ ├── style/ │ │ │ └── global.css # 全局样式文件 │ │ ├── App.vue # Vue根组件 │ │ └── main.js # 前端入口文件 │ ├── public/ │ │ └── vite.svg # 网站图标 │ ├── dist/ # 前端构建输出目录 │ │ ├── assets/ │ │ │ ├── index.css # 编译后的CSS │ │ │ └── index.js # 编译后的JS │ │ ├── index.html # 生产环境HTML │ │ └── vite.svg # 图标文件 │ ├── package.json # 前端依赖配置 │ ├── package-lock.json # 依赖锁定文件 │ ├── vite.config.js # Vite构建配置 │ └── index.html # 开发环境HTML模板 ├── 后端模块 (Flask) │ ├── weather/ │ │ ├── __pycache__/ # Python缓存目录 │ │ ├── app.py # Flask主应用程序 │ │ ├── air_quality.db # SQLite数据库文件 │ │ ├── config.json # 系统配置文件 │ │ ├── model/ │ │ │ └── weather_model.h5 # 训练好的AI模型 │ │ ├── frontend_performance_test_results.json # 前端性能测试结果 │ │ ├── optimized_performance_test_results.json # 优化后性能测试 │ │ ├── performance_test_results.json # 性能测试报告 │ │ └── simple_model_comparison_report.json # 模型对比报告 │ ├── requirements.txt # Python依赖包清单 │ └── test_baidu_api.py # 百度AI接口测试脚本 ├── AI训练模块 │ ├── data/ # 训练数据集目录 │ │ ├── sunny/ # 晴天图像数据集 │ │ ├── cloudy/ # 多云图像数据集 │ │ ├── rainy/ # 雨天图像数据集 │ │ ├── snow/ # 雪天图像数据集 │ │ ├── haze/ # 雾霾图像数据集 │ │ └── thunder/ # 雷雨图像数据集 │ ├── training_results_20250928_214513/ # 模型训练结果目录 │ │ ├── best_model_weights.h5 # 最佳模型权重文件 │ │ ├── confusion_matrix.png # 混淆矩阵可视化 │ │ └── training_history.png # 训练历史图表 │ ├── train.py # 深度学习模型训练脚本 │ └── 训练模型日志.txt # 训练过程日志记录 ├── 辅助工具 │ ├── weather_gui.py # GUI测试界面程序 │ ├── 1.py # 临时测试脚本 │ └── 天气.jpg # 背景图片 ├── 系统缓存 │ ├── __pycache__/ # Python字节码缓存 │ └── node_modules/ # Node.js依赖模块 └── 项目配置文件 ├── .gitignore # Git忽略规则 ├── README.md # 项目说明文档 └── LICENSE # 开源协议文件三、 核心功能模块详解3.1 用户登录注册 (LoginView.vue)功能定位 系统安全入口提供用户身份验证和账户管理核心功能用户注册账号创建、信息验证、邮箱验证用户登录身份认证、记住登录状态、错误提示密码安全强密码策略、密码加密存储表单验证实时输入验证、错误信息提示3.2 管理员后台 (AdminDashboard.vue)功能定位 系统管理中心提供用户管理和系统监控功能管理功能用户管理用户列表、权限设置、账户状态管理系统监控服务状态监控、性能指标展示数据统计用户活跃度、功能使用统计操作日志管理员操作记录、系统日志查看3.3 系统首页 (Home.vue )功能定位 系统入口门户提供功能导览和基础信息展示核心组件统计面板显示系统覆盖城市数量、数据天数、服务状态AQI等级说明6个空气质量等级的详细说明和颜色标识快捷入口直接跳转到实时监测和图像分析功能动效设计脉冲动画效果增强视觉吸引力3.4 实时监测 (RealTimeView.vue)功能定位 提供实时空气质量数据监测和展示服务主要功能城市选择器支持31个主要城市的实时数据查询AQI主显示大尺寸AQI数值展示配合彩色圆环和脉冲动画污染物详情6种主要污染物的实时浓度和图标展示气象信息温度、湿度、风向、风力等气象条件健康建议基于当前AQI值自动生成的户外活动建议3.5 历史数据查询 (HistoryView.vue)功能定位 提供历史空气质量数据的查询、分析和可视化展示核心功能灵活查询支持按城市、日期范围的自定义查询条件统计分析自动计算平均值、最大值、最小值及对应日期图表可视化ECharts折线图展示AQI和PM2.5变化趋势数据表格分页展示详细的每日数据记录数据导出支持CSV格式导出便于进一步分析3.6城市对比分析 (CompareView.vue )功能定位 提供多城市空气质量的横向对比分析功能对比维度城市选择最多支持5个城市的同时对比柱状图对比展示各城市的平均AQI、最大值、最小值饼图分布显示各城市AQI在总体中的占比关系排名系统自动按空气质量进行排序前三名特殊标识数据表格详细的统计数据对比表格3.7 趋势预测分析 (PredictionView.vue)功能定位 基于历史数据提供未来空气质量的智能预测分析预测能力多时间跨度支持3天、7天、14天、30天的预测周期预测图表带置信区间的预测趋势可视化展示风险评估低风险、中等风险、高风险的自动分级每日详情逐日预测结果和相应的生活建议模型信息展示预测算法、训练样本等模型详情3.8 图像识别分析 (ImageAnalysisView.vue)功能定位 基于深度学习的天气图像智能识别分析系统核心功能图像上传支持拖拽上传和点击选择兼容多种图像格式实时预测毫秒级AI识别响应即传即得结果置信度显示直观的置信度进度条和数值显示概率分布6种天气类型的详细概率分析环境评估天气质量、能见度、舒适度综合评分空气质量预测根据天气类型预估对应的空气质量状况AI模型架构 基于EfficientNetB0预训练模型添加自定义分类头支持6类天气识别class WeatherImageAnalyzer: 天气图像分析器 - 调用训练好的模型 def __init__(self): self.model None self.weather_classes [cloudy, haze, rainy, snow, sunny, thunder] self.weather_names { cloudy: 多云, haze: 雾霾, rainy: 雨天, snow: 雪天, sunny: 晴天, thunder: 雷雨 } self.img_size (224, 224) self.model_loaded False # 启动时自动加载训练好的模型 self.load_model() def load_model(self): 加载训练好的模型权重 try: # 模型权重文件路径 - 调用训练结果 training_results_dir os.path.join( os.path.dirname(os.path.dirname(__file__)), training_results_20250928_214513 ) weights_path os.path.join(training_results_dir, best_model_weights.h5) # 备用路径model目录 if not os.path.exists(weights_path): model_dir os.path.join(os.path.dirname(__file__), model) weights_path os.path.join(model_dir, best_model_weights.h5) if not HAS_TENSORFLOW: print(TensorFlow未安装使用模拟预测) self.model_loaded False return # 检查训练好的权重文件是否存在 if not os.path.exists(weights_path): print(f训练好的模型权重文件不存在: {weights_path}) self.model_loaded False return # 重建与训练时完全一致的模型架构 self.build_model() # 加载训练好的权重 self.model.load_weights(weights_path) print(f训练好的模型权重已加载: {weights_path}) self.model_loaded True print(天气图像分析模型加载完成) except Exception as e: print(f加载训练好的模型失败: {e}) self.model_loaded False四、 智能问答系统 (ChatView.vue)功能定位 基于AI大模型的环境相关智能问答服务核心特性自然对话支持多轮对话具备上下文理解能力专业知识环境科学、空气质量、健康防护等专业领域数据查询可查询具体城市的实时和历史空气质量数据建议问题动态生成相关建议问题引导用户深入了解对话历史完整保存对话记录支持对话清空功能AI集成 集成百度文心一言API提供专业环境咨询服务// 发送消息 const sendMessage async () { if (!currentMessage.value.trim()) return const userMessage { role: user, content: currentMessage.value, timestamp: new Date() } messages.value.push(userMessage) const messageToSend currentMessage.value currentMessage.value try { const response await axios.post(/api/ai/chat, { message: messageToSend, context: messages.value.slice(-5) // 最近5条消息作为上下文 }) if (response.data.success) { messages.value.push({ role: assistant, content: response.data.reply, timestamp: new Date() }) } } catch (error) { ElMessage.error(AI助手暂时无法回复) } } // 后端AI问答API app.route(/api/ai/chat, methods[POST]) login_required def ai_chat(): data request.get_json() message data.get(message) try: # 调用百度文心一言API response baidu_ai.chat(message) return jsonify({ success: True, reply: response.get(result, 抱歉我暂时无法回答这个问题) }) except Exception as e: return jsonify({ success: False, message: AI服务暂时不可用 }), 500五、演示视频天气