ruoyi-vue-pro 开发指南 ruoyi-vue-pro 开发指南
  • 萌新必读
  • 后端手册
  • 中间件手册
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 会员手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • 公众号手册
  • 系统手册
  • 运维手册
  • 前端手册 Vue 2.x
  • 前端手册 Vue 3.x
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 会员手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • 公众号手册
  • 系统手册
视频教程
  • Vue3 + element-plus (opens new window)
  • Vue3 + vben(ant-design-vue) (opens new window)
  • Vue2 + element-ui (opens new window)
微服务版 (opens new window)
作者博客 (opens new window)
GitHub (opens new window)
  • 萌新必读
  • 后端手册
  • 中间件手册
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 会员手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • 公众号手册
  • 系统手册
  • 运维手册
  • 前端手册 Vue 2.x
  • 前端手册 Vue 3.x
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 会员手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • 公众号手册
  • 系统手册
视频教程
  • Vue3 + element-plus (opens new window)
  • Vue3 + vben(ant-design-vue) (opens new window)
  • Vue2 + element-ui (opens new window)
微服务版 (opens new window)
作者博客 (opens new window)
GitHub (opens new window)
  • 萌新必读

    • 简介
    • 交流群
    • 视频教程
    • 功能列表
    • 快速启动(后端项目)
    • 快速启动(前端项目)
    • 接口文档
    • 技术选型
    • 项目结构
    • 代码热加载
    • 一键改包
    • 删除功能
    • 内网穿透
    • 达梦数据库专属
  • 后端手册

    • 新建模块
    • 代码生成【单表】(新增功能)
    • 代码生成【主子表】
    • 代码生成(树表)
    • 功能权限
    • 数据权限
    • 用户体系
    • 三方登录
    • OAuth 2.0(SSO 单点登录)
    • SaaS 多租户【字段隔离】
    • SaaS 多租户【数据库隔离】
    • WebSocket 实时通信
    • 异常处理(错误码)
    • 参数校验
    • 分页实现
    • 文件存储(上传下载)
    • Excel 导入导出
    • 系统日志
    • MyBatis 数据库
    • MyBatis 联表&分页查询
    • 多数据源(读写分离)
    • Redis 缓存
    • 本地缓存
    • 异步任务
    • 配置管理
    • 工具类 Util
    • 单元测试
    • 分布式锁
    • 幂等性(防重复提交)
    • 数据库文档
    • 验证码
  • 中间件手册

    • 定时任务
    • 消息队列(内存)
    • 消息队列(Redis)
    • 消息队列(RocketMQ)
    • 消息队列(RabbitMQ)
    • 消息队列(Kafka)
    • 限流熔断
  • 工作流手册

    • 工作流(Flowable)会签、或签
    • 工作流(达梦适配)
  • 大屏手册

    • 报表设计器
    • 大屏设计器
      • 1. 功能开启
        • 1.1 第一步,开启模块
        • 1.2 第二步,导入 SQL
        • 1.3 第三步,启动后端项目
        • 1.4 第四步,启动前端项目(AJ-Report)
        • 1.4 第四步,启动前端项目(Go-View)
      • 2. 如何使用?
        • 2.1 AJ-Report 大屏设计器
        • 2.2 Go-View 大屏设计器
  • 支付手册

    • 功能开启
    • 支付宝支付接入
    • 微信公众号支付接入
    • 微信小程序支付接入
    • 支付宝、微信退款接入
  • 会员手册

    • 功能开启
    • 微信公众号登录
    • 微信小程序登录
    • 会员用户、标签、分组
    • 会员等级、积分、签到
  • 商城手册

    • 商城演示
    • 功能开启
    • 商城装修
    • 【商品】商品分类
    • 【商品】商品属性
    • 【商品】商品 SPU 与 SKU
    • 【商品】商品评价
    • 【交易】购物车
    • 【交易】交易订单
    • 【交易】售后退款
    • 【交易】快递发货
    • 【交易】门店自提
    • 【交易】分销返佣
    • 【营销】优惠劵
    • 【营销】拼团活动
    • 【营销】秒杀活动
    • 【营销】砍价活动
    • 【营销】满减送
    • 【营销】限时折扣
    • 【营销】内容管理
    • 【统计】会员、商品、交易统计
  • ERP手册

    • ERP 演示
    • 功能开启
    • 【产品】产品信息、分类、单位
    • 【库存】产品库存、库存明细
    • 【库存】其它入库、其它出库
    • 【库存】库存调拨、库存盘点
    • 【采购】采购订单、入库、退货
    • 【销售】销售订单、出库、退货
    • 【财务】采购付款、销售收款
  • CRM手册

    • CRM 演示
    • 功能开启
    • 【线索】线索管理
    • 【客户】客户管理、公海客户
    • 【商机】商机管理、商机状态
    • 【合同】合同管理、合同提醒
    • 【回款】回款管理、回款计划
    • 【产品】产品管理、产品分类
    • 【通用】数据权限
    • 【通用】跟进记录、待办事项
  • 公众号手册

    • 功能开启
    • 公众号接入
    • 公众号粉丝
    • 公众号标签
    • 公众号消息
    • 自动回复
    • 公众号菜单
    • 公众号素材
    • 公众号图文
    • 公众号统计
  • 系统手册

    • 短信配置
    • 邮件配置
    • 站内信配置
    • 数据脱敏
    • 敏感词
    • 地区 & IP 库
  • 运维手册

    • 开发环境
    • Linux 部署
    • Docker 部署
    • Jenkins 部署
    • HTTPS 证书
    • 服务监控
  • 前端手册 Vue 3.x

    • 开发规范
    • 菜单路由
    • Icon 图标
    • 字典数据
    • 系统组件
    • 通用方法
    • 配置读取
    • CRUD 组件
    • 国际化
    • IDE 调试
    • 代码格式化
  • 前端手册 Vue 2.x

    • 开发规范
    • 菜单路由
    • Icon 图标
    • 字典数据
    • 系统组件
    • 通用方法
    • 配置读取
  • 更新日志

    • 【v2.0.1】开发中
    • 【v2.0.0】2024-01-26
    • 【v1.9.0】2023-12-01
    • 【v1.8.3】2023-10-24
  • 开发指南
  • 大屏手册
芋道源码
2023-02-07
目录

大屏设计器

数据可视化,一般可以通过报表设计器、或者大屏设计器来实现。本小节,我们来讲解大屏设计器的功能开启。

大屏设计器,指的是通过拖拽图表或页面元素,无需编写代码即可制作数据大屏。如下图所示:

大屏设计器

在项目中,通过集成市面上的报表引擎,实现了大屏设计器的能力。目前使用如下:

是否集成 是否开源
AJ-Report (opens new window) 集成中 开源
Go-View (opens new window) 集成中 开源
JimuReport (opens new window) 不集成 不开源

为什么不使用 JimuReport 报表引擎呢?

因为 JimuReport 的大屏设计器是商业化的,需要购买授权。我手头暂时没有授权,所以没办法集成~

# 1. 功能开启

yudao-module-report 也实现了大屏设计器的能力,考虑到编译速度,默认是关闭的。开启步骤如下:

  • 第一步,开启 yudao-report-report 模块
  • 第二步,导入报表的 SQL 数据库脚本
  • 第三步,启动后端项目,确认功能是否生效
  • 第四步,启动大屏设计器的前端项目

# 1.1 第一步,开启模块

① 修改根目录的 pom.xml (opens new window) 文件,取消 yudao-module-report 模块的注释。

引入  模块

② 修改 yudao-server 目录的 pom.xml (opens new window) 文件,引入 yudao-module-report 模块。如下图所示:

引入  依赖

③ 点击 IDEA 右上角的【Reload All Maven Projects】,刷新 Maven 依赖。如下图所示:

刷新 Maven 依赖

# 1.2 第二步,导入 SQL

下载 go-view.sql 脚本,并导入数据库,初始化 Go-View 相关的表结构和数据。

友情提示:↑↑↑ go-view.sql 是可以点击下载的! ↑↑↑

导入 SQL 脚本

# 1.3 第三步,启动后端项目

启动后端项目,看到 "Init JimuReport Config [ 线程池 ] " 说明开启成功。

# 1.4 第四步,启动前端项目(AJ-Report)

TODO 开发中,预计 4 月份左右。

# 1.4 第四步,启动前端项目(Go-View)

① 克隆 yudao-ui-go-view (opens new window) 项目,执行如下命令进行启动:

# 安装 pnpm,提升依赖的安装速度
npm config set registry https://registry.npmjs.org
npm install -g pnpm
# 安装依赖
pnpm install

# 启动服务
npm run dev

② 启动完成后,浏览器会自动打开 http://127.0.0.1:3000 (opens new window) 地址,可以看到前端界面。

前端界面

③ 访问 [报表管理 -> 大屏设计器] 菜单,可以查看对应的功能。如下图所示:

前端界面

# 2. 如何使用?

# 2.1 AJ-Report 大屏设计器

TODO 开发中,预计 4 月份左右。

# 2.2 Go-View 大屏设计器

可以查看 Go-View 的官方文档,主要是:

  • GoView 说明文档 —— 页面引导 (opens new window)
  • GoView 说明文档 —— 常见问题 (opens new window)

如果你想了解在 Go-View 中,如何使用 SQL 或 HTTP 查询数据,可以查看内置的两个示例:

Go-View 使用示例

集成 Go-View 的代码实现?

① 后端:Go-View 的后端代码,主要在 go-view (opens new window) 包下实现。

② 前端:在 @/views/report/go-view (opens new window) 文件,通过 IFrame 嵌入 Go-View 界面。

报表设计器
功能开启

← 报表设计器 功能开启→

Theme by Vdoing | Copyright © 2019-2024 芋道源码 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×