DataRoom项目配置

DataRoom 是一款可视化数据分析与展示平台，用户可通过前端页面，轻松搭建数据看板、配置图表、布局页面、调整样式等

git下载地址：https://gitee.com/bdstar/DataRoom#https://gitee.com/link

技术文档地址：https://www.yuque.com/chuinixiongkou/bigscreen/ofy1bqhqgua1fu0f （需要进群公告获取密码）

整体项目：

拉取成功后目录如图：

前端目录：data-room-ui

后端目录：DataRoom

前端运行步骤：

注意：node版本在14

1、切换分支为：git checkout 2.1.0.RELEASE，功能齐全可用

2、终端切换到：Command Prompt 进行前端命令操作

3、cd DataRoom

cd data-room-ui

npm install --registry=http://registry.npmmirror.com

npm run serve

启动成功会自动启动访问地址

登录账号与密码在DataRoom/dataroom-server/src/main/resources/application.yml中

前端启动成功：

如图中：验证码未正常显示，是因为后端未正常启动

进行到这，前端差不多，重点是后端的配置和启动，作为一个纯前端，有点小难度，好在有AI的辅助

后端启动：

编译器：IDEA

环境：JAVA 17

百度搜索配置JAVA环境

如上图：

IDEA打开DataRoom后端文件夹，只需要打开这一个文件夹即可！！！

官网技术文档有详细介绍

1、引入依赖

在项目的pom.xml文件dependencies标签中加入以下内容:

<dependency>
    <groupId>com.gccloud</groupId>
    <artifactId>dataroom-core</artifactId>
    <version>2.x最新版本号</version>
</dependency>

2、文件配置

在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&allowPublicKeyRetrieval=true
    username: root
    password: pwd
gc:
  starter:
    file:
      # 一个存储文件的绝对路径，需要有写入权限
      basePath: C:\Users\weixiuxiu\Desktop\data
      # 文件资源访问前缀，一般修改ip即可
      urlPrefix: http://127.0.0.1:${server.port}${server.servlet.context-path}/static

3、启动

运行中出现Started说明后端启动成功================================

前后端都启动成功，出现图中内容，验证码正常显示：

登录成功显示以下图中内容：

注意：登录时效为2小时！！！！！！！！！

进阶操作：

数据集管理及配置：

根据页面分组，便于查找配置

前端只需要配置JSON数据集静态数据就可以了，确定所需的数据格式

也可配置好所需的JSON格式后，发给后端，让后端再根据实际情况配置接口

示例：

词云图：

像echarts图表这类数据格式，可以去echarts官网上复制，也可在项目代码中查找

如图：在DataRoom项目内，词云图的数据格式

就可以根据图中格式配置所需数据：

分组是必选的

JSON格式是不需要带data的，只需要数组对象

对于图表输出字段是不需要配置的，在表格等其他组件会用到

JSON解析通过后，进行保存

右击配置进行数据配置

点击数据集弹出所配数据集列表，选择你所配置的内容，确定后图表的内容就会变化

以上就配置好了图表的数据集，其他图表类似操作，重点是数据的配置

配置表格的数据集示例：

对应的组件是左侧基础类目下的表格组件，如图：

这个在后台使用的频率很高的

表格的数据内容可去Element、AntDesgin UI库中查找

我是在element上找的数据

输出字段是表示字段的名称，如图：

注意：表格列的选择前后，代表那个列先展示，通过选择确定展示的内容和排序

以上是表格的数据集配置，其他类似===============================================

资源库配置：

资源库是配置图片资源

图片最好是不带背景的

点击上传资源，打开的是本地内容

实际使用：

左侧资源，在资源列表中进行选择即可

组件库配置================================================================

组件库分为：

自定义组件：将常用的基础组件（如图表、文本、装饰等）自由组合，形成可复用模板，后续可快速拖拽使用，提升设计效率

业务组件：代码编辑、参数配置和效果预览

系统组件：需要在项目中增加页面进行代码实现

操作详解：

自定义组件：就是把常用的组件组合在一起，便于直接使用，就略过了

业务组件：

分为几种不同的类型，根据需求选择符合的进行二次开发

注意：要查看页面代码中的配置

比如：要配置一个自定义的饼图

如果按照echarts上配置肯定不显示

因为DataRoom对于配置有一定的要求

如：

如果配置的不显示，一定是参数的问题，可交给AI哦~

系统组件：https://www.yuque.com/chuinixiongkou/bigscreen/px6lmne7moigc7ke(官方技术文档)

我是按照技术文档上进行实现的，主要是体验下这个功能

注意：新建文件的位置千万不要错了哦~

有兴趣的小伙伴可以尝试下

补充======================================

表格组件

配置警告列

重点是告警条件的配置

下载资源错误：

请复制链接内容，直接替换项目中http.js内容

https://gitee.com/xdai02/DataRoom/blob/fix-download-resource/data-room-ui/packages/js/utils/http.js#

关于DataRoom框架的使用就分享到这

有问题的小伙伴欢迎留言~

posted @ 2026-01-26 11:11 danmo_xx 阅读(7) 评论(0) 收藏举报

刷新页面返回顶部