|
@@ -1,17 +1,14 @@
|
|
|
## 📚简介
|
|
|
-<p align="center">
|
|
|
- <img alt="logo" width="50" src="./doc/logo.png">
|
|
|
-</p>
|
|
|
|
|
|
-🔥基于SpringBoot、MyBatisPlus、ElementUI、G2Plot、Echarts等技术栈的大屏设计器,具备大屏目录管理、大屏设计、大屏预览能力,支持MySQL、Oracle、PostgreSQL、JSON等数据集接入,对于复杂数据处理还可以使用Groovy脚本数据集,使用简单,完全免费,代码开源。
|
|
|
+🔥DataRoom是一款基于SpringBoot、MyBatisPlus、ElementUI、G2Plot、Echarts等技术栈的大屏设计器,具备大屏目录管理、大屏设计、大屏预览能力,支持MySQL、Oracle、PostgreSQL、JSON、HTTP、Groovy等数据集接入,使用简单,完全免费,代码开源。
|
|
|
|
|
|
<p align="center">
|
|
|
- <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/gcpaas/gc-starter-bigscreen-ui?style=social">
|
|
|
- <img alt="GitHub forks" src="https://img.shields.io/github/forks/gcpaas/gc-starter-bigscreen-ui?style=social">
|
|
|
- <img alt="GitHub license" src="https://img.shields.io/badge/license-Apache%20License%202.0-blue.svg">
|
|
|
- <img alt="npm" src="https://img.shields.io/npm/v/gc-starter-bigscreen-ui">
|
|
|
- <img alt="Company" src="https://img.shields.io/badge/Author-科大国创云网科技有限公司-blue.svg">
|
|
|
- <img alt="QQ" src="https://img.shields.io/badge/QQ-322302395-blue.svg">
|
|
|
+ <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/gcpaas/DataRoom?style=social">
|
|
|
+ <img alt="GitHub forks" src="https://img.shields.io/github/forks/gcpaas/DataRoom?style=social">
|
|
|
+ <img alt="GitHub license" src="https://img.shields.io/badge/license-Apache%20License%202.0-blue.svg">
|
|
|
+ <img alt="npm" src="https://img.shields.io/npm/v/@gcpaas/data-room-ui">
|
|
|
+ <img alt="Maven Central" src="https://img.shields.io/maven-central/v/com.gccloud/gc-starter-bigscreen-core">
|
|
|
+ <img alt="Company" src="https://img.shields.io/badge/Author-科大国创云网科技有限公司-blue.svg">
|
|
|
</p>
|
|
|
|
|
|
-------------------------------------------------------------------------------
|
|
@@ -19,9 +16,11 @@
|
|
|
## 效果图
|
|
|
|
|
|
#### 管理页
|
|
|
+
|
|
|
<img alt="logo" src="./doc/images/home.png">
|
|
|
|
|
|
#### 设计器
|
|
|
+
|
|
|
<img alt="logo" src="./doc/images/design01.png">
|
|
|
|
|
|
## 优势
|
|
@@ -34,6 +33,7 @@
|
|
|
* 支持自定义接口权限、数据权限,轻松对接🔥**Shiro、Security**等认证框架,保证大屏数据安全
|
|
|
|
|
|
## 功能
|
|
|
+
|
|
|
- [x] 支持大屏管理、设计、预览、导出、集成
|
|
|
- [x] 支持图层上下调整,支持置于顶层、置于底层
|
|
|
- [x] 支持图画布组件框选、组合、取消组合、锁定、批量删除、复制功能
|
|
@@ -48,111 +48,30 @@
|
|
|
- [x] 支持自定义接口权限、数据权限,保证大屏数据安全
|
|
|
- [x] 支持组件自定义规范,按照规范开发自己的大屏组件,满足特殊需求,如:自定义网络拓扑
|
|
|
|
|
|
+## 快速开始
|
|
|
|
|
|
-## 链接
|
|
|
-
|
|
|
-* [使用手册、二次开发、部署手册、常见问题](https://www.yuque.com/chuinixiongkou/bigscreen/index)
|
|
|
-* [前端代码仓库(GitHub)](https://github.com/gcpaas/DataRoom/tree/master/data-room-ui)、[前端代码仓库(码云)](https://gitee.com/gcpaas/gc-starter-bigscreen-ui)
|
|
|
-* [后端代码仓库(GitHub)](https://github.com/gcpaas/DataRoom/tree/master/DataRoom)、 [后端代码仓库(码云)](https://gitee.com/gcpaas/gc-starter-bigscreen)
|
|
|
-
|
|
|
-## 如何集成
|
|
|
-
|
|
|
-### 1. 安装依赖
|
|
|
-
|
|
|
-``` bash
|
|
|
-npm install gc-starter-bigscreen-ui
|
|
|
-```
|
|
|
-
|
|
|
-### 2. 在 `main.js` 引入大屏
|
|
|
-```javascript
|
|
|
-// file: main.js
|
|
|
-
|
|
|
-// 组件依赖 element-ui,项目已有element-ui可以忽略此步骤
|
|
|
-import ElementUI from 'element-ui'
|
|
|
-import 'element-ui/lib/theme-chalk/index.css'
|
|
|
-Vue.use(ElementUI, { size: 'mini' })
|
|
|
-// 组件中使用了 codemirror 的编辑器,样式单独引入,比如用了vue语法高亮
|
|
|
-import 'codemirror/mode/vue/vue.js'
|
|
|
-
|
|
|
-// 引入大屏css
|
|
|
-import 'gc-starter-bigscreen-ui/lib/bigScreen.css'
|
|
|
-```
|
|
|
-
|
|
|
-### 3. 在 `main.js` 配置大屏
|
|
|
-
|
|
|
-**方式一:后端服务地址配置在`.js`文件中**
|
|
|
-
|
|
|
-```javascript
|
|
|
-// file: xxx.js
|
|
|
+[👉前端开发者](./data-room-ui/README.md)
|
|
|
|
|
|
-window.CONFIG.baseUrl=http://127.0.0.1:8081/bigScreenServer
|
|
|
-```
|
|
|
+[👉后端开发者](./DataRoom/README.md)
|
|
|
|
|
|
-```javascript
|
|
|
-// file: main.js
|
|
|
-
|
|
|
-import { registerConfig } from 'gc-starter-bigscreen-ui'
|
|
|
-registerConfig({
|
|
|
- httpConfigs: {
|
|
|
- baseURL: `这里是后端服务地址的值,如:window.CONFIG.baseUrl`
|
|
|
- }
|
|
|
-}, router)
|
|
|
-```
|
|
|
-
|
|
|
-**方式二:后端服务地址配置在`.env文件中**
|
|
|
-
|
|
|
-```javascript
|
|
|
-// file: .env.development
|
|
|
-
|
|
|
-VUE_APP_BASE_URL=http://127.0.0.1:8081/bigScreenServer
|
|
|
-```
|
|
|
-
|
|
|
-```javascript
|
|
|
-// file: main.js
|
|
|
-
|
|
|
-import { registerConfig } from 'gc-starter-bigscreen-ui'
|
|
|
-// 注意写在 new Vue() 之前
|
|
|
-registerConfig({
|
|
|
- httpConfigs: {
|
|
|
- baseURL: `这里是后端服务地址的值,如:process.env.VUE_APP_BASE_URL`
|
|
|
- }
|
|
|
-}, router)
|
|
|
-```
|
|
|
-
|
|
|
-### 4. `vuex`模块新增大屏`store`
|
|
|
-
|
|
|
-```js
|
|
|
-// file: 项目中导出strore的文件
|
|
|
-
|
|
|
-import { $bigScreen } from 'gc-starter-bigscreen-ui'
|
|
|
-const store = new Vuex.Store({
|
|
|
- modules:
|
|
|
- // 导出大屏所需vuex模块
|
|
|
- bigScreen: $bigScreen.bigScreenStore
|
|
|
- }
|
|
|
-})
|
|
|
-export default store
|
|
|
-
|
|
|
-```
|
|
|
-
|
|
|
-### 5. 访问大屏
|
|
|
+## 演示DEMO
|
|
|
|
|
|
-启动项目后,访问前端地址 http://ip:port/management
|
|
|
+<a href="http://gcpaas.gccloud.com/bigScreen" target="_blank"> http://gcpaas.gccloud.com/bigScreen </a>
|
|
|
+<span style="color: red">(请不要在演示环境中放入生产数据)</span>
|
|
|
|
|
|
+## 常见问题
|
|
|
|
|
|
-## 演示DEMO
|
|
|
+* [使用手册、二次开发、部署手册、常见问题](https://www.yuque.com/chuinixiongkou/bigscreen/index)
|
|
|
+* [前端代码仓库(GitHub)](https://github.com/gcpaas/DataRoom/tree/master/data-room-ui)、[前端代码仓库(码云)](https://gitee.com/gcpaas/gc-starter-bigscreen-ui)
|
|
|
+* [后端代码仓库(GitHub)](https://github.com/gcpaas/DataRoom/tree/master/DataRoom)、 [后端代码仓库(码云)](https://gitee.com/gcpaas/gc-starter-bigscreen)
|
|
|
|
|
|
-<a href="http://gcpaas.gccloud.com/bigScreen"> http://gcpaas.gccloud.com/bigScreen </a>
|
|
|
|
|
|
## 联系我们
|
|
|
-<img alt="Email" src="https://img.shields.io/badge/Email-tech@ustcinfo.com-blue.svg">
|
|
|
-
|
|
|
-<img alt="QQ群" src="https://img.shields.io/badge/QQ群-322302395-blue.svg">
|
|
|
|
|
|
<p>
|
|
|
- <img alt="logo" width="200" src="../doc/images/qq.jpeg">
|
|
|
+ <img alt="logo" width="200" src="./doc/images/qq.png">
|
|
|
</p>
|
|
|
|
|
|
## License
|
|
|
|
|
|
-Apache License 2.0
|
|
|
+Apache License 2.0
|