# DataReport
**Repository Path**: qlsgr/DataReport
## Basic Information
- **Project Name**: DataReport
- **Description**: 一站式低代码数据可视化大屏设计平台，纯拖拽式零代码编辑，仅需三步即可快速搭建数据大屏：配置数据源→SQL 自定义数据集→拖拽组件生成可视化看板。内置完整开箱即用权限管理后台，助力企业管理层实时掌握全域业务动态，让每一项经营决策都有直观数据支撑。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 58
- **Forks**: 18
- **Created**: 2025-08-04
- **Last Updated**: 2026-08-06
## Categories & Tags
**Categories**: Uncategorized
**Tags**: 大屏设计, 可视化图表, 低代码可视化拖拽, 后台管理系统模版, BI报表
## README
# DataReport 数据报表平台
## 简介
DataReport 是 AJ-report 的 React 全新重构版本，采用前后端分离架构。前端基于 React + Vite + Ant Design 构建，提供流畅的拖拽式可视化编辑体验；后端基于 Node.js + Egg 框架打造高性能数据服务。平台提供完整的权限管理体系，支持用户、角色与权限的灵活绑定，实现路由缓存、动态路由及按钮级权限校验。通过 JSON 配置可自动生成增删改查页面，配合拖拽式大屏设计器，助力开发者快速构建专业数据可视化应用。
## 在线体验
- **在线演示**: [http://qianlishi.xyz](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
### 后端部署
```bash
# 进入后端目录
cd report-node
# 安装依赖
npm install
# 配置数据库连接
# 编辑 database/config.json
# 执行数据库迁移
npx sequelize db:migrate
# 启动服务
npm run dev
```
### 前端部署
```bash
# 进入前端目录
cd report-ui
# 安装依赖
npm install
# 启动开发服务器
npm run dev
```
## 文档与资源
- [快速使用指南](https://ajreport.beliefteam.cn/report-doc/guide/quicklyUse.html)
- [大屏案例展示](https://ajreport.beliefteam.cn/report-doc/guide/bigScreenCase.html)
- [资源下载中心](https://ajreport.beliefteam.cn/download/)
## 贡献指南
我们欢迎社区贡献者参与项目改进：
1. **提交 Pull Request** 到 `dev` 分支
2. PR 可以包含新功能、bug 修复或性能优化
3. 请确保代码符合项目规范
如有任何问题，欢迎提交 [Issue](https://gitee.com/qlsgr/DataReport/issues) 反馈。
## 技术支持
**如有问题，请提交 [Issue](https://gitee.com/qlsgr/DataReport/issues)
**
## 许可证
本项目遵循 MIT 许可证开源。
---
**如果这个项目对您有帮助，请帮忙点个 Star，您的支持是我们最大的动力！** ⭐