大屏设计器,就它了!

金歌  金牌会员 | 2024-5-19 07:58:50 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题

主题 928|帖子 928|积分 2784

大家好,我是 Java陈序员。
我们在做季度汇报、年度汇报时,经常需要将数据以图表的形式表示,并在大屏上展示。
本日,给大家先容一个简单、免费、开源的数据大屏设计器。
关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业分享、超200本经典盘算机电子书籍等。
项目先容

DataRoom —— 一款大屏设计器,具备大屏设计、预览能力,支持MySQL、Oracle、PostgreSQL、SQLServer、ElasticSearch、JSON、JS、HTTP、Groovy 等数据集接入,利用简单,完全免费,代码开源。
功能特性:

技术栈:

  • SpringBoot
  • MyBatisPlus
  • Vue
  • ElementUI
  • G2Plot
  • Echarts
项目截图

1、大屏管理
支持大屏【新增】、【编辑】、【设计】、【预览】、【复制】、【删除】、【分组】操作

2、资源库
支持自界说上传资源,在大屏设计器中可以直接引用资源,如:3D图片、边框图片、装饰条、背景图

3、组件库
包罗业务组件、系统组件,设计好的组件可在设计器中复用利用。

4、数据源管理
支持MySQL、PostgreSQL、Oracle 、ClickHouse、SqlServer数据库接入。

5、数据集
支持原始数据集、自助数据集、存储过程数据集、JSON数据集、脚本数据集、JS脚本数据集、HTTP数据集多种方式接入数据。

快速开始

源码启动

情况准备:

  • Java 1.8.x
  • MySQL 5.7.x+
  • Node 14.xx
  • Npm 6.xx
后端启动:
1、拉取代码
  1. git clone https://github.com/gcpaas/DataRoom.git
复制代码
2、实行 DataRoom/doc/init.sql 文件,初始化数据库
3、修改配置文件
在 DataRoom/dataroom-server/src/main/resources 下添加配置文件 application-dev.yml ,并修改其中的数据库连接信息和文件存储信息
  1. spring:
  2.   servlet:
  3.     multipart:
  4.       # 配置上传下载文件的最大值
  5.       max-file-size: 500MB
  6.       max-request-size: 500MB
  7.   datasource:
  8.     type: com.alibaba.druid.pool.DruidDataSource
  9.     driverClassName: com.p6spy.engine.spy.P6SpyDriver
  10.     url: jdbc:p6spy:mysql://127.0.0.1:3306/dataroom?allowMultiQueries=true&useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai&rewriteBatchedStatements=true&nullCatalogMeansCurrent=true
  11.     username: root
  12.     password: pwd
  13. gc:
  14.   starter:
  15.     file:
  16.       # 一个存储文件的绝对路径,需要有写入权限
  17.       basePath: /root/data
  18.       # 文件资源访问前缀,一般修改ip即可
  19.       urlPrefix: http://127.0.0.1:${server.port}${server.servlet.context-path}/static
复制代码
4、启动主启动类 com.gccloud.DataRoomApplication
前端启动:
1、拉取代码
  1. git clone https://github.com/gcpaas/DataRoom.git
复制代码
2、安装依赖
  1. ## 仓库中data-room-ui为前端工程,进入到 data-room-ui 目录
  2. cd  data-room-ui
  3. ## 安装依赖
  4. npm install
复制代码
3、修改 public/config/index-development.js 文件中 baseUrl 的值为后端服务地址
  1. window.ENV = 'development'
  2. var developmentConfig = {
  3.   baseUrl: 'http://127.0.0.1:8081/bigScreenServer',
  4.   // 默认为baseUrl + static,如果文件存储方式有变动则需要在此处修改,否则可以不配置
  5.   fileUrlPrefix: 'http://127.0.0.1:8081/bigScreenServer' + '/static'
  6. }
  7. // 必须的
  8. window.CONFIG = configDeepMerge(window.CONFIG, developmentConfig)
复制代码
4、启动前端
  1. npm run serve
复制代码
5、启动成功后控制台自动打印大屏访问地址,复制到浏览器打开访问
Docker 摆设

1、启动下令
DataRoom 镜像利用了 H2 数据库作为数据库,H2 数据库是一个嵌入式关系型数据库,无需单独摆设
  1. docker run \
  2.     -d \
  3.     -p 5245:8081 \
  4.     -e IP="192.168.123.1" \
  5.     -e PORT="5245" \
  6.     -v /home/dataroom/data:/data \
  7.     -v /home/dataroom/db:/db \
  8.     gcpaas/dataroom:latest
复制代码


  • IP 该变量是指宿主机的ip地址,为必须项
  • PORT 该变量是指宿主机端口,即上述 -p 选项中设置的宿主机端口,为必须项
2、容器启动成功后,浏览器访问
  1. http://{ip/域名}:5245/dataroom/index.html
复制代码
末了

推荐的开源项目已经收录到 GitHub 项目,欢迎 Star:
  1. https://github.com/chenyl8848/great-open-source-project
复制代码
或者访问网站,进行在线浏览:
  1. https://chencoding.top:8090/#/
复制代码
大家的点赞、收藏和品评都是对作者的支持,如文章对你有帮助还请点赞转发支持下,谢谢!

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

金歌

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表