eemcs_ui/src/views/ai

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)

/**
 * 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. 报表类型映射

reportTypeMap: {
  comprehensive: "项目综合分析报告",
  airConditioning: "空调制冷系统分析报告",
  lighting: "照明系统分析报告",
  pump: "水泵系统分析报告",
}

3. 报表数据结构

{
  title: string,              // 报表标题
  generateTime: string,       // 生成时间
  summary: string,            // 报告摘要
  projectInfo: {              // 项目情况
    description: string,
    configTable: [],
    configTableColumns: []
  },
  equipmentOverview: {        // 设备概述
    description: string,
    charts: []                // 设备相关图表
  },
  operationData: {            // 运行数据
    charts: [],               // 运行数据图表
    dataTable: [],            // 数据表格
    tableColumns: []
  },
  analysisSummary: {          // 分析总结
    points: [],               // 分析要点
    suggestions: []           // 优化建议
  }
}

4. 图表配置示例

// 饼图配置
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 对话接口

请求:

POST /ai/chat
Content-Type: application/json

{
  "message": "生成上个月的空调系统分析报告",
  "conversationId": "uuid-xxx-xxx"
}

响应:

{
  "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. 报表数据接口

请求:

GET /ai/reports/airConditioning/data?startTime=2024-02-01&endTime=2024-02-29

响应:

{
  "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 默认配色方案

动画效果

• 消息出现淡入动画
• 加载状态旋转动画
• 图表渲染平滑过渡

✅ 测试验证

功能测试清单

• 聊天消息发送和接收
• 快捷报表按钮点击
• 快捷查询标签点击
• 报表数据加载
• ECharts 图表渲染
• 报表打印预览
• 组件销毁时清理资源

兼容性测试

• Chrome 90+
• Edge 90+
• Firefox 88+
• Safari 14+ (待测试)

🚀 部署说明

开发环境

# 启动开发服务
npm run dev

# 访问地址
http://localhost:80/ai

生产环境

# 构建生产版本
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 官方文档
• Element UI 组件库
• ECharts 配置手册
• 项目架构说明文档

👥 联系方式

如有问题或建议，请联系:

• 开发团队：铭汉科技前端组
• 技术支持：tech@minghan.com

---

版本: v1.0.0
更新日期: 2026-03-05
文档状态: 已完成 ✅