DataReport 数据报表平台

简介

DataReport 是 AJ-report 的 React 全新重构版本，采用前后端分离架构。前端基于 React + Vite + Ant Design 构建，提供流畅的拖拽式可视化编辑体验；后端基于 Node.js + Egg 框架打造高性能数据服务。平台提供完整的权限管理体系，支持用户、角色与权限的灵活绑定，实现路由缓存、动态路由及按钮级权限校验。通过 JSON 配置可自动生成增删改查页面，配合拖拽式大屏设计器，助力开发者快速构建专业数据可视化应用。

在线体验

在线演示: http://qianlishi.xyz
体验账号: guest / 123456

功能特性

核心能力

权限管理: 完整的用户、角色、菜单权限管理体系，支持细粒度权限控制
大屏设计: 拖拽式可视化大屏编辑器，支持多种图表组件与装饰元素
数据报表: JSON 配置驱动的增删改查页面生成，降低开发成本
数据服务: 支持多种数据源（MySQL、PostgreSQL、HTTP API 等），内置数据转换与加工能力
报表分享: 支持生成短链接与密码保护的分享功能

输入图片说明

组件库

平台内置丰富的可视化组件，涵盖以下类别：

类别	组件示例
图表	折线图、柱状图、饼图、雷达图、散点图、面积图、漏斗图、词云
信息	基础文本、链接文本、滚动文本、翻转文本、时间文本
媒体	图片、视频
地图	地理地图
装饰	边框（13种）、装饰元素（12种）、点阵、增长线、旋转圆环
其他	IFrame 嵌入、表格、日历、轮播

技术栈

前端技术

构建工具: Vite - 下一代前端构建工具
框架: React 18 + TypeScript
UI 组件库: Ant Design
状态管理: Zustand
路由: React Router DOM
图表引擎: ECharts
拖拽组件: react-beautiful-dnd
标尺组件: @scena/react-ruler

后端技术

框架: Egg.js（阿里系企业级 Node.js 框架）
ORM: Sequelize
认证: JWT（egg-jwt）
跨域: egg-cors
对象存储: 支持七牛云、MinIO

项目结构

DataReport/
├── report-node/                 # 后端服务（Egg.js）
│   ├── app/
│   │   ├── controller/          # 控制器层
│   │   │   ├── accessMenu.js    # 菜单权限管理
│   │   │   ├── accessRole.js    # 角色权限管理
│   │   │   ├── accessUser.js    # 用户管理
│   │   │   ├── report.js        # 报表管理
│   │   │   ├── reportDashboard.js # 大屏设计
│   │   │   ├── reportDataSet.js # 数据集
│   │   │   ├── reportDataSource.js # 数据源
│   │   │   ├── reportShare.js   # 报表分享
│   │   │   ├── sysDict.js       # 字典管理
│   │   │   ├── sysDictItem.js   # 字典项
│   │   │   └── sysFile.js       # 文件管理
│   │   ├── model/               # 数据模型
│   │   ├── service/             # 业务逻辑层
│   │   ├── middleware/          # 中间件
│   │   ├── utils/               # 工具函数
│   │   └── router.js            # 路由配置
│   ├── config/                  # 配置文件
│   └── database/                # 数据库迁移脚本
│
└── report-ui/                   # 前端应用（React）
    ├── src/
    │   ├── api/                 # API 接口定义
    │   ├── components/          # 公共组件
    │   │   ├── scrComponents/   # 可视化组件库
    │   │   │   ├── Chart/       # 图表组件
    │   │   │   ├── Info/        # 信息组件
    │   │   │   ├── Media/       # 媒体组件
    │   │   │   ├── Map/         # 地图组件
    │   │   │   ├── Ornament/    # 装饰组件
    │   │   │   └── Web/         # Web 组件
    │   │   └── common/          # 通用配置组件
    │   ├── views/               # 页面视图
    │   │   ├── screenDesign/    # 大屏设计器
    │   │   ├── report/          # 报表相关页面
    │   │   ├── access/          # 权限管理页面
    │   │   ├── system/          # 系统管理页面
    │   │   └── Login/           # 登录页面
    │   ├── router/              # 路由配置
    │   ├── store/               # 状态管理
    │   ├── hooks/               # 自定义 Hooks
    │   └── layouts/             # 布局组件
    └── electron/                # Electron 桌面应用入口

快速开始

环境要求

Node.js >= 18
npm 或 yarn
MySQL 5.7+ / PostgreSQL

后端部署

# 进入后端目录
cd report-node

# 安装依赖
npm install

# 配置数据库连接
# 编辑 database/config.json

# 执行数据库迁移
npx sequelize db:migrate

# 启动服务
npm run dev

前端部署

# 进入前端目录
cd report-ui

# 安装依赖
npm install

# 启动开发服务器
npm run dev

文档与资源

贡献指南

我们欢迎社区贡献者参与项目改进：

提交 Pull Request 到 dev 分支
PR 可以包含新功能、bug 修复或性能优化
请确保代码符合项目规范

如有任何问题，欢迎提交 Issue 反馈。

技术支持

如有问题，请提交 Issue

许可证

本项目遵循 MIT 许可证开源。

如果这个项目对您有帮助，请帮忙点个 Star，您的支持是我们最大的动力！ ⭐