【DataRoom】

您所在的位置：网站首页 › vue大屏可视化正常用2k还是4k › 【DataRoom】

【DataRoom】

2024-06-29 03:49:07| 来源: 网络整理| 查看: 265

【DataRoom】- 基于VUE的开源的大屏可视化设计器

DataRoom是一款基于SpringBoot、MyBatisPlus、Vue、ElementUI、G2Plot、Echarts等技术栈的大屏设计器，具备大屏设计、预览能力，支持MySQL、Oracle、PostgreSQL、SQLServer、ElasticSearch、JSON、JS、HTTP、Groovy等数据集接入，使用简单，完全免费，代码开源。

详细文档参见1、【 GCPAAS大屏设计器 - 官方文档】2、【 GCPAAS大屏设计器 - Gitee源码地址】

目录【DataRoom】- 基于VUE的开源的大屏可视化设计器一、环境准备二、下载源码1、用IDEA下载源码2、用IDEA打开后端代码三、后端服务1、新建数据库配置文件2、新建数据库3、初始化数据库数据4、启动后端服务四、前端启动1、进入data-room-ui目录安装依赖2、启动前端服务五、体验大屏设计器1、访问http://localhost:75212、导入地图数据3、添加数据集4、新建大屏

一、环境准备序号软件版本备注1Node14.xx必要2Npm6.xx必要3Mysql8.0必要4JDK1.8必要二、下载源码

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

1、用IDEA下载源码

在这里插入图片描述

2、用IDEA打开后端代码

打开DataRoom/DataRoom项目在这里插入图片描述

三、后端服务 1、新建数据库配置文件

在 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

在这里插入图片描述

说明：

如果数据库服务不在本地的话需要修改application-dev.yml 配置文件中的spring.datasource.url中的ip和端口等数据库连接信息

2、新建数据库

在这里插入图片描述

3、初始化数据库数据

执行DataRoom/doc/init.sql 文件进行数据库初始化

在这里插入图片描述

4、启动后端服务

执行DataRoom/dataroom-server/src/main/java/com/gccloud/DataRoomApplication 启动类

在这里插入图片描述

四、前端启动 1、进入data-room-ui目录安装依赖 npm install --registry=http://registry.npmmirror.com

在这里插入图片描述

2、启动前端服务 npm run serve

在这里插入图片描述

五、体验大屏设计器 1、访问http://localhost:7521

在这里插入图片描述

2、导入地图数据

从官方文档下载地图数据在这里插入图片描述

3、添加数据集 [ { "type": "家具家电", "sales": 19 }, { "type": "粮油副食", "sales": 29 }, { "type": "生鲜水果", "sales": 50 }, { "type": "美容洗护", "sales": 30 }, { "type": "母婴用品", "sales": 60 }, { "type": "进口食品", "sales": 28 }, { "type": "食品饮料", "sales": 70 }, { "type": "家庭清洁", "sales": 60 } ]

在这里插入图片描述