# AI 智能报表功能实现文档 ## 📋 项目概述 基于 mh-ui 能耗监测控制系统，新增 AI 智能报表功能，通过自然语言交互实现智能化的报表生成和数据分析。 ## 🎯 功能目标 1. **自然语言交互**: 用户可通过文字描述快速生成所需报表 2. **智能报表生成**: 支持 4 类核心报表的自动生成 3. **可视化展示**: 集成 ECharts 实现丰富的图表展示 4. **前端独立实现**: 报表生成和打印完全在前端完成 (符合项目规范要求) ## 🏗️ 架构设计 ### 技术栈 - **前端框架**: Vue 2.6.12 + Element UI 2.15.14 - **图表库**: ECharts 5.4.0 - **HTTP 客户端**: Axios 0.28.1 - **状态管理**: Vuex 3.6.0 ### 系统架构 ``` ┌─────────────────────────────────────────┐ │ 用户界面层 │ │ ┌───────────┐ ┌──────────────┐ │ │ │ 聊天窗口 │ │ 报表展示区 │ │ │ │ (左侧) │ │ (右侧) │ │ │ └───────────┘ └──────────────┘ │ └─────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────┐ │ 业务逻辑层 │ │ ┌─────────────────────────────────┐ │ │ │ AI 对话处理 / 报表数据格式化 │ │ │ │ 图表渲染 / 打印导出 │ │ │ └─────────────────────────────────┘ │ └─────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────┐ │ API 接口层 │ │ ┌───────────┐ ┌──────────────┐ │ │ │ AI 对话 │ │ 报表数据 │ │ │ │ /ai/chat │ │ /ai/reports/ │ │ │ └───────────┘ └──────────────┘ │ └─────────────────────────────────────────┘ ``` ## 📁 文件结构 ### 修改的文件 ``` src/ ├── api/ │ └── ai.js # AI 相关 API 接口 (已扩展) ├── assets/ │ └── icons/ │ └── svg/ │ └── ai.svg # 新增：AI 机器人图标 └── views/ └── ai/ └── index.vue # 新增：AI报表主页面 ``` ## 🔧 核心功能实现 ### 1. AI 对话接口 (`src/api/ai.js`) ```javascript /** * AI 对话接口（实时交互） */ export function chat(message, conversationId) { return request({ url: "/ai/chat", method: "post", data: { message, conversationId, }, }); } /** * 获取 AI报表数据 */ export function getReportData(reportType, params) { return request({ url: `/ai/reports/${reportType}/data`, method: "get", params: params, }); } ``` ### 2. 报表类型映射 ```javascript reportTypeMap: { comprehensive: "项目综合分析报告", airConditioning: "空调制冷系统分析报告", lighting: "照明系统分析报告", pump: "水泵系统分析报告", } ``` ### 3. 报表数据结构 ```javascript { title: string, // 报表标题 generateTime: string, // 生成时间 summary: string, // 报告摘要 projectInfo: { // 项目情况 description: string, configTable: [], configTableColumns: [] }, equipmentOverview: { // 设备概述 description: string, charts: [] // 设备相关图表 }, operationData: { // 运行数据 charts: [], // 运行数据图表 dataTable: [], // 数据表格 tableColumns: [] }, analysisSummary: { // 分析总结 points: [], // 分析要点 suggestions: [] // 优化建议 } } ``` ### 4. 图表配置示例 ```javascript // 饼图配置 getChartData(refKey, container) { if (refKey.includes('pie')) { return { title: { text: '能耗占比', ... }, tooltip: { trigger: 'item' }, series: [{ type: 'pie', radius: '50%', data: [...] }] }; } // 折线图、柱状图类似配置... } ``` ## 💻 功能演示 ### 使用流程 1. **进入页面** - 访问 `/ai` 路由 - 看到欢迎消息和快捷报表按钮 2. **生成报表** ``` 方式 1: 点击快捷报表按钮 方式 2: 输入自然语言，如"生成上个月的空调系统分析报告" 方式 3: 点击快捷查询标签 ``` 3. **查看报表** - 左侧显示对话历史 - 右侧显示报表详情 (包含图表和表格) 4. **打印/导出** - 点击"打印"按钮预览并打印 - 点击"导出"按钮下载报表 ### 界面布局 ``` ┌────────────────────────────────────────────┐ │ AI 智能报表 │ ├──────────────┬─────────────────────────────┤ │ │ 报表预览 │ │ 聊天窗口 │ [导出] [打印] │ │ ┌────────┐ ├─────────────────────────────┤ │ │ AI 回复 │ │ │ │ │ 用户问 │ │ 报表内容区 │ │ │ AI 回复 │ │ - 报告摘要 │ │ └────────┘ │ - 项目情况 │ │ │ - 设备概述 (图表) │ │ [输入框...] │ - 运行数据 (图表 + 表格) │ │ [发送] │ - 分析总结 │ │ │ │ └──────────────┴─────────────────────────────┘ ``` ## 🔌 后端接口要求 ### 1. AI 对话接口 **请求:** ```http POST /ai/chat Content-Type: application/json { "message": "生成上个月的空调系统分析报告", "conversationId": "uuid-xxx-xxx" } ``` **响应:** ```json { "code": 200, "conversationId": "uuid-xxx-xxx", "data": { "content": "好的，正在为您生成空调系统分析报告...", "needGenerateReport": true, "reportType": "airConditioning", "params": { "startTime": "2024-02-01 00:00:00", "endTime": "2024-02-29 23:59:59" } } } ``` ### 2. 报表数据接口 **请求:** ```http GET /ai/reports/airConditioning/data?startTime=2024-02-01&endTime=2024-02-29 ``` **响应:** ```json { "code": 200, "data": { "summary": "本月空调系统运行正常，能效比平均值为 6.2...", "projectInfo": { "description": "项目包含 3 个冷站，8 台冷水机组...", "configTable": [...], "configTableColumns": [ {"prop": "name", "label": "设备名称"}, {"prop": "model", "label": "型号"} ] }, "equipmentOverview": { "description": "主要设备包括冷冻泵、冷却泵、冷水机组...", "charts": [ {"type": "pie", "data": [...]}, {"type": "line", "data": [...]} ] }, "operationData": { "charts": [...], "dataTable": [...], "tableColumns": [...] }, "analysisSummary": { "points": [ "能效比较上月提升 5.2%", "用电峰值出现在月中旬" ], "suggestions": [ "建议在夜间低谷期增加蓄冷", "优化冷却塔风机运行策略" ] } } } ``` ## 🎨 样式特点 ### 响应式布局 - 聊天窗口固定宽度 400px - 报表区域自适应剩余空间 - 支持 1200px 以下分辨率自动调整 ### 主题配色 - 主色调：紫色渐变 (#667eea → #764ba2) - 辅助色：Element UI 标准色 - 图表色：ECharts 默认配色方案 ### 动画效果 - 消息出现淡入动画 - 加载状态旋转动画 - 图表渲染平滑过渡 ## ✅ 测试验证 ### 功能测试清单 - [x] 聊天消息发送和接收 - [x] 快捷报表按钮点击 - [x] 快捷查询标签点击 - [x] 报表数据加载 - [x] ECharts 图表渲染 - [x] 报表打印预览 - [x] 组件销毁时清理资源 ### 兼容性测试 - [x] Chrome 90+ - [x] Edge 90+ - [x] Firefox 88+ - [ ] Safari 14+ (待测试) ## 🚀 部署说明 ### 开发环境 ```bash # 启动开发服务 npm run dev # 访问地址 http://localhost:80/ai ``` ### 生产环境 ```bash # 构建生产版本 npm run build:prod # 部署到服务器 将 dist 目录部署到静态服务器 ``` ## 📝 注意事项 ### 开发注意 1. 所有报表生成功能都在前端实现 2. 图表需要根据实际数据调整配置 3. 打印功能会替换页面内容，需重新加载恢复 4. 组件销毁时必须清理 ECharts 实例 ### 后端配合 1. 需要实现 AI 对话接口 (`/ai/chat`) 2. 需要实现报表数据接口 (`/ai/reports/{type}/data`) 3. 接口返回数据需符合约定格式 4. 支持跨域请求和 Token 认证 ### 性能优化 1. 大数据量时使用降采样策略 2. 图表按需渲染，避免一次性加载过多 3. 使用虚拟滚动优化长列表 4. 合理设置缓存策略 ## 🔮 扩展方向 ### 功能扩展 - [ ] 支持更多报表类型 (锅炉、热回收等) - [ ] 报表模板自定义配置 - [ ] 定时自动生成报表 - [ ] 报表对比分析 - [ ] 移动端适配 ### 技术优化 - [ ] 接入真实 AI 模型 (如 ChatGPT) - [ ] 实现离线缓存 - [ ] 添加报表版本管理 - [ ] 支持多人协作编辑 - [ ] 集成语音输入 ## 📚 参考资料 - [Vue.js 官方文档](https://cn.vuejs.org/) - [Element UI 组件库](https://element.eleme.cn/) - [ECharts 配置手册](https://echarts.apache.org/zh/index.html) - [项目架构说明文档](./README.md) ## 👥 联系方式 如有问题或建议，请联系: - 开发团队：铭汉科技前端组 - 技术支持：tech@minghan.com --- **版本**: v1.0.0 **更新日期**: 2026-03-05 **文档状态**: 已完成 ✅