DataRoom项目配置

DataRoom 是一款可视化数据分析与展示平台，用户可通过前端页面，轻松搭建数据看板、配置图表、布局页面、调整样式等
 
git下载地址：https://gitee.com/bdstar/DataRoom#https://gitee.com/link
技术文档地址：https://www.yuque.com/chuinixiongkou/bigscreen/ofy1bqhqgua1fu0f （需要进群公告获取密码）
 
整体项目：

image

 

 拉取成功后目录如图：

前端目录：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中

 

image

 

前端启动成功：

image

 

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

 

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

 

后端启动：

编译器：IDEA

环境：JAVA 17

百度搜索配置JAVA环境

image

 

 

image

 

 

如上图：

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

官网技术文档有详细介绍

1、引入依赖

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

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

image

 

 

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、启动

image

image

 

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

 

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

image

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

image

 

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

 

进阶操作：

数据集管理及配置：

image

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

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

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

示例：

词云图：

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

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

image

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

image

 分组是必选的

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

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

 

JSON解析通过后，进行保存

image

 右击配置进行数据配置

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

image

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

 

配置表格的数据集示例：

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

image

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

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

image

 我是在element上找的数据

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

image

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

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

 

资源库配置：

资源库是配置图片资源

图片最好是不带背景的

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

image

 实际使用：

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

image

 

 

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

 

image

 组件库分为：

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

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

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

 

操作详解：

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

业务组件：

image

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

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

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

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

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

如：

image

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

 

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

image

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

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

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

 

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

表格组件

配置警告列

重点是告警条件的配置

image

 

通过业务组件实现折叠面板，支持右侧配置字体颜色、大小等 

效果图

image

 

具体实现

image

 

使用的是业务组件类目下的原生组件

因为DataRoom支持element UI 2.0版本，所以在添加组件时，可以使用UI库的内容

 

组件模板

<template>
  <div class="divTest">
    <el-collapse v-model="activeNames" @change="handleChange">
	  <el-collapse-item
  　　　　v-for="item in collapseData"
  　　　　:key="item.name"
  　　　　:title="item.title"
  　　　　:name="item.name"
　　　　>
  <template #title>
    <span :style="titleStyle" style="padding-left:15px;">{{ item.title }}</span>
  </template>
  <div
    v-for="(desc, idx) in item.desc"
    :key="idx"
    :style="descStyle"
	style="padding-left:15px;"
  >{{ desc }}</div>
　　</el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: 'TestA',
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      activeNames: ['1']
    }
  },
  computed: {
    collapseData() {
      return this.config.option.data
    },
	titleStyle() {
     return {
      color: this.config.option?.titleFontColor || '#409EFF',
      fontSize: (this.config.option?.titleFontSize || 20) + 'px'
    }
  },
    descStyle() {
      return {
        color: this.config.option?.fontColor || '#333333',
        fontSize: (this.config.option?.fontSize || 16) + 'px'
      }
    }
  },
  methods: {
    handleChange(val) {
      console.log(val);
    }
  }
}
</script>
<style lang="scss" scoped>
  .divTest{
    width:100%;
	height:100%;
	overflow-y:auto;
  }
  .divTest .el-collapse {
    max-height: 100%;
    overflow-y: auto;
}
</style>

　注意事项

　　。 activeNames可以设置为每次只能展开一个面板，elementUI配置即可

　　。computed内的函数是更新右侧自定义配置项内容

 

 

组件配置

// 组件备注名称
const title = '折叠面板'

// 右侧配置项
const setting = [
 {
   label: '标题字体颜色',
   type: 'colorPicker',
   field: 'titleFontColor',//配置中不能有相同的值
   optionField: 'titleFontColor',
   value: '#409EFF',
   tabName: 'custom'
 },
 {
   label: '标题字体大小',
   type: 'inputNumber',
   field: 'titleFontSize',
   optionField: 'titleFontSize',
   value: 20,
   tabName: 'custom'
 },
 {
   label: '字体颜色',
   type: 'colorPicker',
   field: 'fontColor',
   optionField: 'fontColor',
   value: '#333333',
   tabName: 'custom'
 },
 {
   label: '字体大小',
   type: 'inputNumber',//类型不同，type的值不同
   field: 'fontSize',
   optionField: 'fontSize',
   value: 16,
   tabName: 'custom'
 }
]

// 模拟数据
const data = [
  {
    name: '1',
    title: '内容1',
    desc: [
      '内容11111'
    ]
  },
  {
    name: '2',
    title: '内容2',
    desc: [
      '内容222'
    ]
  },
  {
    name: '3',
    title: '内容3',
    desc: [
      '内容3333',
　　　 '3的第二条内容'
    ]
  }
],

const option = {
  data: data,
  fontColor:'#333333',
  fontSize:18,
  titleFontColor: '#409EFF',
  titleFontSize: 20            
}

export default {
  title,
  option,
  setting
}

注意事项

。setting是自定义的配置项，配置组件的样式

。option中的data写法是固定的，由外部定义的data进行传参显示

 

总结：

。DataRoom现有图表如果不能满足需求，可在自定义组件内实现(全局弹窗、图表联动、Tabs切换等)

。图表的具体配置可在Echarts官网去赋值

。右侧配置项如果不知道咋配置，可在项目内搜索现有图表查看

 

柱状图、折线图增加单位显示

Y轴、鼠标悬停显示框

image

 

image

 

option.yAxis.label.formatter = function(v) {
  return v + '%';
};

if (!option.tooltip) option.tooltip = {};//排查出option中并没有tooltip字段，故添加
option.tooltip.formatter = function(datum) {
  return {
    name: datum.type,//对应的是数据集的键
    value: datum.value + '%'
  };
};

注意：

。必须先配置数据集，数据处理脚本才会生效

。折线图同样适用，主要是根据图表的数据结构去配置的

 

 

下载资源错误：

请复制链接内容，直接替换项目中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  阅读(146)  评论(0)    收藏  举报