大屏設計器，就它了！

Java陈序员發表於2024-05-07

大家好，我是 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、拉取程式碼

git clone https://github.com/gcpaas/DataRoom.git

2、執行 DataRoom/doc/init.sql 檔案，初始化資料庫

3、修改配置檔案

在 DataRoom/dataroom-server/src/main/resources 下新增配置檔案 application-dev.yml ，並修改其中的資料庫連線資訊和檔案儲存資訊

spring:
  servlet:
    multipart:
      # 配置上傳下載檔案的最大值
      max-file-size: 500MB
      max-request-size: 500MB
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource
    driverClassName: com.p6spy.engine.spy.P6SpyDriver
    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
    username: root
    password: pwd
gc:
  starter:
    file:
      # 一個儲存檔案的絕對路徑，需要有寫入許可權
      basePath: /root/data
      # 檔案資源訪問字首，一般修改ip即可
      urlPrefix: http://127.0.0.1:${server.port}${server.servlet.context-path}/static

4、啟動主啟動類 com.gccloud.DataRoomApplication

前端啟動：

1、拉取程式碼

git clone https://github.com/gcpaas/DataRoom.git

2、安裝依賴

## 倉庫中data-room-ui為前端工程，進入到 data-room-ui 目錄
cd  data-room-ui
## 安裝依賴
npm install

3、修改 public/config/index-development.js 檔案中 baseUrl 的值為後端服務地址

window.ENV = 'development'
var developmentConfig = {
  baseUrl: 'http://127.0.0.1:8081/bigScreenServer',
  // 預設為baseUrl + static，如果檔案儲存方式有變動則需要在此處修改，否則可以不配置
  fileUrlPrefix: 'http://127.0.0.1:8081/bigScreenServer' + '/static'
}
// 必須的
window.CONFIG = configDeepMerge(window.CONFIG, developmentConfig)

4、啟動前端

npm run serve

5、啟動成功後控制檯自動列印大屏訪問地址，複製到瀏覽器開啟訪問

Docker 部署

1、啟動命令

DataRoom 映象使用了 H2 資料庫作為資料庫，H2 資料庫是一個嵌入式關係型資料庫，無需單獨部署

docker run \
    -d \
    -p 5245:8081 \
    -e IP="192.168.123.1" \
    -e PORT="5245" \
    -v /home/dataroom/data:/data \
    -v /home/dataroom/db:/db \
    gcpaas/dataroom:latest
  • IP 該變數是指宿主機的ip地址，為必須項
  • PORT 該變數是指宿主機埠，即上述 -p 選項中設定的宿主機埠，為必須項

2、容器啟動成功後，瀏覽器訪問

http://{ip/域名}:5245/dataroom/index.html

最後

推薦的開源專案已經收錄到 GitHub 專案，歡迎 Star：

https://github.com/chenyl8848/great-open-source-project

或者訪問網站，進行線上瀏覽：

https://chencoding.top:8090/#/

大家的點贊、收藏和評論都是對作者的支援，如文章對你有幫助還請點贊轉發支援下，謝謝！

相關文章