企业官网建设流程全解析

一、 项目概述

1.1 系统简介

本项目是一个集成图像识别、数据分析、智能问答的现代化环境监测系统。系统采用Vue3+Flask前后端分离架构，运用多模态深度学习技术，为用户提供实时空气质量监测、历史数据分析、城市对比、趋势预测、天气图像识别和智能问答等综合服务。

1.2 核心功能

• 实时监测： 24小时不间断监测全国31个主要城市空气质量
• AI图像识别： 基于EfficientNetB0深度学习模型的天气图像识别
• 数据分析： 历史数据查询、城市横向对比、趋势预测分析
• 智能问答： 集成百度文心一言API的环境咨询服务

1.3 技术特色

• 多模态融合： 图像、数值、文本三种数据模态的深度融合
• 前后端分离： 现代化架构设计，提升开发效率和系统可维护性
• AI驱动： 深度学习+自然语言处理双重技术驱动
• 可视化增强： 专业级ECharts图表展示

二、 完整项目目录结构

天气系统前后端分离vue+Flask/ ├── 前端模块 (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

五、演示视频