# databoard

**Repository Path**: mengtree/databoard

## Basic Information

- **Project Name**: databoard
- **Description**: No description available
- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-01-15
- **Last Updated**: 2023-05-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# databoard

 介绍
    该应用最初的目的是为了打造一款面向开发者 数据表板可视化编辑平台。开发人员通过“轻编码”就可以实现数据表板的展示。

    源于作者本身能力受限，对 canvas 不熟悉，可视化编辑的组件通过iframe 来实现，要是说性能消耗肯定是少不了的，但是考虑到这种大屏应用通常专机专用，而且也不会有什么高并发，一台常规的服务器肯定是可以支撑的。但也正式因此，应用开发至此就暂停了，若是往后 canvas学习有成，再回来搞事情了。

    不过话说回来，iframe 也有它自己的优点，就是扩展性很强，很容易嵌套任何其它页面，用来嵌套3D模型页面交互是很不错的，同时，可以直接应用当前互联网上很多成熟的chart组件 。
    
## 效果
![输入图片说明](https://images.gitee.com/uploads/images/2021/0314/221635_bc5b22d3_1547296.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0314/221740_9436e857_1547296.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0314/221305_427b0bcd_1547296.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0408/093850_9c4b2763_1547296.jpeg "屏幕截图 2021-04-08 093829.jpg")

#### 软件架构
    前端：vue + element 
    户端：springboot+mongo，java 使用 openjdk 11 
    
    系统架构大体遵循ddd的模式进行目录编排，与常见的java应用目录有所不同
    
    可在线预览体验 http://47.112.1.59:2401/，由于资源有限，还请不要随意上传文件
    


#### 安装教程

分别下载源码编译运行即可。


#### 使用说明

平台的功能主要分为三大类：组件，中间件，屏幕。


### 组件

这里的组件准确来说是前端组件，组件的呈现和交互均在组件部分进行编辑。
编辑好的组件作为模板在进行屏幕 编辑时，可以 导入。大屏修改过的组件也可以另存为新的组件供后面的大屏导入。

1.新建

![输入图片说明](https://images.gitee.com/uploads/images/2021/0314/214801_9f81b416_1547296.png "屏幕截图.png")

2.自动进入编辑

编辑区左侧为预览效果，右侧为参数配置。主要说一下参数配置
a.自定义选项

    所谓的自定义选项本质是用户赋予的该组件对外开放的快捷配置参数，即自定义选项能配置 什么由用户指定的。
    将编辑面板拉到最后，可以看到“编码”选项卡（选项编码放最后是希望组件在使用 时，优先通过配置实现，尽可能的不改动编码），第一个 配置就是自定义选项的配置
![输入图片说明](https://images.gitee.com/uploads/images/2021/0314/215335_422f74c9_1547296.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0314/215432_8c67f6f4_1547296.png "屏幕截图.png")
    
    （配置说明后续补充更新...）
    可以看到指定了一些数据类型后，自定义选项则会在自定义 选项卡显示相应的可编辑项，
    
    然后在编码的脚本选项，可以通过上下文获取到用户的配置信息，应用到我们的功能中
![输入图片说明](https://images.gitee.com/uploads/images/2021/0314/215818_6f432a41_1547296.png "屏幕截图.png")
b.前端配置

    前端配置包含基本的比如封面，名称编码等(编码在组件这里几乎没用，但是在屏幕那里，编码是交互的一个重要标识)
    前端部分这里资源可以根据 需要上传资源（支持 js 和 图片，甚至是一个web打包（必须是 zip） ）
    然后在编码的body/script  均可以引用上传的内容，通过{filedir}标识为通过相当目录访问资源，像这样：
![输入图片说明](https://images.gitee.com/uploads/images/2021/0314/220341_518a14d9_1547296.png "屏幕截图.png")
    在进行预览时，将会会载入资源进行呈现（在编辑过程中可能不会载入）。
c.编码

    有前端经验的读者看到标签就知道各个部分是做什么的。前面基本上也都提到了。这部分主要是做编码工作

### 中间件
中间件提供前后交互的组件，组件去哪去数据，通过什么方式取则通过中间件进行，根据 实际情况可以定制开发中间件
（配置说明后续补充更新...）

### 屏幕
屏幕部分就是结合 组件和中间进行大屏的呈现和交互
![输入图片说明](https://images.gitee.com/uploads/images/2021/0314/221135_798a5ecf_1547296.png "屏幕截图.png")
（配置说明后续补充更新...）