打造智能报表分析助手：Vue + Node.js + open webui + AI 实战指南 🚀打造智能报表分析助手

打造智能报表分析助手：Vue + Node.js + open webui + AI 实战指南 🚀

还在为繁琐的报表分析发愁吗？让 AI 来解放你的双手吧！本文将带你一步步实现一个智能报表分析系统。

报表分析痛点

前篇必备

本地已经部署了 ollama 语言模型，可以参考ollama 部署
本地已经部署了 open webui，可以参考open webui 部署；官方文档参考open webui

一、项目背景 🤔

在日常工作中，我们经常需要分析各种报表数据。传统的方式通常是：

打开 Excel 📊
盯着数字发呆 😵‍💫
手动制作图表 📈
写分析报告 ✍️
改了又改... 😮‍💨
将数据发送给第三方平台又担心数据安全问题 😢

这个过程不仅耗时，而且容易出错。如果有一个 AI 助手能帮我们自动完成这些工作，那该多好啊！

二、解决方案 💡

2.1 技术选型

技术栈

前端：Vue.js + Element UI
后端：Node.js + Express
AI：Open WebUI REST API
图表：Mermaid.js
文件处理：Multer

2.2 系统架构

graph TD
    A[前端Vue应用] -->|上传CSV| B[后端Express服务]
    B -->|解析数据| C[数据处理层]
    C -->|构造提示词| D[AI服务]
    D -->|返回分析结果| C
    C -->|返回结果| B
    B -->|返回Mermaid代码| A
    A -->|渲染图表| E[用户界面]

三、核心功能实现 ⚙️

3.1 文件上传组件

<template>
  <el-upload
    class="upload-demo"
    drag
    :action="uploadUrl"
    :before-upload="beforeUpload"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  </el-upload>
</template>

3.2 AI 分析服务

async function analyzeWithAI(csvData, prompt) {
  try {
    const response = await axios.post(AI_API_URL, {
      messages: [
        { role: "system", prompt: getSystemPrompt() },
        { role: "user", prompt: getUserPrompt(csvData, prompt) },
      ],
    });
    return response.data;
  } catch (error) {
    console.error("AI分析失败 😢", error);
    throw error;
  }
}

3.3 图表渲染

  extractContent(content) {
    // 提取 Mermaid 代码和文字分析
    const mermaidMatch = content.match(/```mermaid\n([\s\S]*?)```/);
    const mermaidCode = mermaidMatch ? mermaidMatch[1].trim() : "";

    // 提取文字分析（Mermaid代码后的所有内容）
    let textAnalysis = "";
    if (mermaidMatch) {
      textAnalysis = content
        .slice(content.indexOf("```mermaid") + mermaidMatch[0].length)
        .trim();
    }

    return {
      mermaidCode,
      textAnalysis,
    };
  },
  async renderChart() {
      try {
        this.loading = true;
        this.error = null;
        // 提取 Mermaid 代码和文字分析
        const { mermaidCode, textAnalysis } = this.extractContent(this.content);

        // 清空之前的内容
        const chartContainer = this.$refs.mermaidChart;
        chartContainer.innerHTML = "";

        // 创建一个新的 pre 元素来包含 mermaid 代码
        const pre = document.createElement("pre");
        pre.className = "mermaid";
        pre.textContent = mermaidCode;
        chartContainer.appendChild(pre);

        // 渲染新图表
        await mermaid.run();

        // 设置文字分析内容
        this.textAnalysis = textAnalysis;

        this.loading = false;
      } catch (error) {
        console.error("图表渲染失败:", error);
        this.error = "图表渲染失败，请检查语法是否正确";
        this.loading = false;
      }
    }

四、使用效果 ✨

使用效果-文本分析

使用效果-文本分析

使用效果-图表分析

使用效果-图表分析

4.1 分析模式

文本分析 📝
- 自动生成分析报告
- 突出关键数据点
- 提供决策建议
图表分析 📊
- 饼图展示占比
- 折线图显示趋势
- XY 图分析关联

4.2 实际案例

假设我们有一份销售数据：

pie title 各校区销售占比
    "A测试校区" : 50
    "台北校区" : 22
    "其他校区" : 28

只需要上传 CSV 文件，选择分析模式，AI 就能自动生成这样的图表和分析报告！

五、未来规划 🎯

六、项目地址 🔗

git clone https://github.com/yuanyang749/report-analysis.git
/** 服务端 **/
npm install
npm run serve
/** 前端 **/
cd ./frontend
npm install
npm run dev

结语 🎉

正如某位不愿透露姓名的产品经理说过：

"这个需求很简单，就是要把 Excel 自动化..."

结果我们不仅实现了自动化，还加入了 AI 的魔法！🎨

希望这个项目能帮助到同样被报表分析困扰的你。如果觉得有帮助，别忘了点个 Star！⭐️

关注我们

想要获取更多有趣的技术文章和编程经验分享吗？

想要了解更多程序员职场和技术成长的干货吗？

快来扫描下方二维码关注我们吧！😊

技术指南针公众号二维码