hunterxing / gc-starter-bigscreen-ui Goto Github PK

This project forked from amtech/lc-gc-starter-bigscreen-ui

🔥基于SpringBoot、MyBatisPlus、ElementUI、G2Plot、Echarts等技术栈的大屏设计器，具备大屏目录管理、大屏设计、大屏预览能力，支持MySQL、Oracle、PostgreSQL、JSON等数据集接入，对于复杂数据处理还可以使用Groovy脚本数据集，使用简单，完全免费，代码开源。

Home Page: http://gcpaas.gccloud.com

License: Apache License 2.0

Shell 0.05% JavaScript 32.55% CSS 0.88% HTML 0.26% Vue 63.41% SCSS 2.86%

gc-starter-bigscreen-ui's Introduction

📚简介

效果图

优势

一站式大屏解决方案，从数据处理->大屏设计->大屏预览->生产使用
支持多种数据集接入，可用于生产
支持🔥独立部署，不对原有工程产生影响
支持🔥嵌入式集成，与项目无缝融合，引入依赖包即可，无其他系统框架依赖，减少运维成本
支持自定义接口权限、数据权限，轻松对接🔥Shiro、Security等认证框架，保证大屏数据安全

功能

链接

如何集成

1. 安装依赖

npm install gc-starter-bigscreen-ui

2. 在 `main.js` 引入大屏

// 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' })

// 引入大屏css
import 'gc-starter-bigscreen-ui/lib/bigScreen.css'

3. 在 `main.js` 配置大屏

方式一：后端服务地址配置在.js文件中

// file: xxx.js

window.CONFIG.baseUrl=http://127.0.0.1:8081/bigScreenServer

// file: main.js

import { registerConfig } from 'gc-starter-bigscreen-ui'
registerConfig({
  httpConfigs: {
    baseURL: `这里是后端服务地址的值，如：window.CONFIG.baseUrl`
  }
}, router)

方式二：后端服务地址配置在`.env文件中

// file: .env.development

VUE_APP_BASE_URL=http://127.0.0.1:8081/bigScreenServer

// file: main.js

import { registerConfig } from 'gc-starter-bigscreen-ui'
registerConfig({
  httpConfigs: {
    baseURL: `这里是后端服务地址的值，如：process.env.VUE_APP_BASE_URL`
  }
}, router)

4. `vuex`模块新增大屏`store`

// file: 项目中导出strore的文件

import { $bigScreen } from 'gc-starter-bigscreen-ui'
const store = new Vuex.Store({
  modules: 
    // 导出大屏所需vuex模块
    bigScreen: $bigScreen.bigScreenStore
  }
})
export default store