# bi-frontend

**Repository Path**: dwbf/bi-frontend

## Basic Information

- **Project Name**: bi-frontend
- **Description**: 智能 BI 平台前端
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2023-08-24
- **Last Updated**: 2025-10-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 智能 BI 平台

> 作者：dwbf - 多喝水能美颜

## 介绍

本项目是基于 React+ Spring Boot + RabbitMQ + AIGC 的智能 BI 数据分析平台

来自 [编程导航](https://yupi.icu/)

参考 [猫十二懿](https://github.com/kongshier)

> AIGC ：Artificial Intelligence Generation Content（AI 生成内容）

区别于传统的 BI，数据分析者只需要导入最原始的数据集，输入想要进行分析的目标，就能利用 AI 自动生成一个符合要求的图表以及分析结论。此外，还会有图表管理、异步生成、AI 对话等功能。只需输入分析目标、原始数据和原始问题，利用 AI 就能一键生成可视化图表、分析结论和问题解答，大幅降低人工数据分析成本。

**优势：** 让不会数据分析的用户也可以通过输入目标快速完成数据分析，大幅节约人力成本，将会用到 AI 接口生成分析结果

## 项目架构图

### 基础架构

基础架构：客户端输入分析诉求和原始数据，向业务后端发送请求。业务后端利用 AI 服务处理客户端数据，保持到数据库，并生成图表。处理后的数据由业务后端发送给 AI 服务，AI 服务生成结果并返回给后端，最终将结果返回给客户端展示。

![img.png](doc%2Fimg%2Fimg.png)

### 优化项目架构-异步化处理

优化流程（异步化）：客户端输入分析诉求和原始数据，向业务后端发送请求。业务后端将请求事件放入消息队列，并为客户端生成取餐号，让要生成图表的客户端去排队，消息队列根据 I 服务负载情况，定期检查进度，如果 AI 服务还能处理更多的图表生成请求，就向任务处理模块发送消息。

任务处理模块调用 AI 服务处理客户端数据，AI 服务异步生成结果返回给后端并保存到数据库，当后端的 AI 工服务生成完毕后，可以通过向前端发送通知的方式，或者通过业务后端监控数据库中图表生成服务的状态，来确定生成结果是否可用。若生成结果可用，前端即可获取并处理相应的数据，最终将结果返回给客户端展示。在此期间，用户可以去做自己的事情

![img_1.png](doc%2Fimg%2Fimg_1.png)

## 项目运行

### Install `node_modules`:

```shell
npm install
```

OR

```shell
yarn
```

### 启动项目

```shell
npm start
```

### 构建项目

```shell
npm run dev
```

## 项目技术栈

### 前端

1. React 18
2. Umi 4 前端框架
3. Ant Design Pro 5.x 脚手架
4. Ant Design 组件库
5. OpenAPI 代码生成：自动生成后端调用代码（来自鱼聪明开发平台）
6. EChart 图表生成

### 后端

1. Java Spring Boot
2. MySQL 数据库
3. Redis：Redisson 限流控制
4. MyBatis-Plus 数据库访问结构
5. IDEA 插件 MyBatisX ： 根据数据库表自动生成
6. **RabbitMQ：消息队列**
7. AI SDK：AI 接口开发
8. JDK 线程池及异步化
9. Easy Excel：表格数据处理
10. Swagger + Knife4j 项目文档
11. Hutool 、Apache Common Utils 等工具库

## 项目功能

1. 用户登录
2. 智能分析（同步）。调用 AI 根据用户上传 csv 文件生成对应的 JSON 数据，并使用 ECharts 图表 将分析结果可视化展示
3. 智能分析（异步）。使用了线程池异步生成图表，最后将线程池改造成使用 RabbitMQ 消息队列 保证消息的可靠性，实现消息重试机制
4. 用户限流。本项目使用到令牌桶限流算法，使用 Redisson 实现简单且高效分布式限流，限制用户每秒只能调用一次数据分析接口，防止用户恶意占用系统资源
5. 调用 AI 进行数据分析，并控制 AI 的输出
6. 由于 AIGC 的输入 Token 限制，使用 Easy Excel 解析用户上传的 XLSX 表格数据文件并压缩为 CSV，实测提高了 20%的单次输入数据量、并节约了成本。
7. 后端自定义 Prompt 预设模板并封装用户输入的数据和分析诉求，通过对接 AIGC 接口生成可视化图表 JSON 配置和分析结论，返回给前端渲染。

### 新增功能

1. 新增用户注册功能
2. 新增删除图表
3. 优化 我的图表 页面

## BI 项目展示

### 用户登录注册

![img_2.png](doc%2Fimg%2Fimg_2.png) ![img_3.png](doc%2Fimg%2Fimg_3.png)

### 同步分析数据生成图表

![img_4.png](doc%2Fimg%2Fimg_4.png) ![image-20230826150825652.png](doc%2Fimg%2Fimage-20230826150825652.png)

### 异步分析数据生成图表

![img_6.png](doc%2Fimg%2Fimg_6.png)

### 我的图表

![img_5.png](doc%2Fimg%2Fimg_5.png)