gc-starter-dashboard-ui

v0.0.1-2023060801-Alpha

Published

a year ago

自定义仪表盘

Downloads

0High
0Medium
0Low

dashboard 仪表盘设计器低代码 low code

📚简介

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

效果图

优势

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

功能

[x] 支持仪表盘管理、设计、预览、导出、集成
[x] 支持图层上下调整，支持置于顶层、置于底层
[x] 支持图画布组件框选、组合、取消组合、锁定、批量删除、复制功能
[x] 支持图画布组件撤回和取消撤回、历史操作记录功能
[x] 支持文本、图片、轮播表、排名表、翻牌器、基础表格、倒计时、系统时间、外链
[x] 支持基础折线图、梯形图、柱状图、面积图、条形图、饼图、环图、水波图、仪表盘、进度条、词云图、雷达图、漏斗图等
[x] 支持15中边框组件，支持动画、渐变色设置，支持水平线、垂直线设置
[x] 支持10多种修饰组件，支持动画、渐变色设置
[x] 支持资源管理，包含LOGO、3D图标、商务科技图、卡通手绘图、简约背景图、仪表盘背景图等上百个仪表盘设计资源，资源支持自定义上传
[x] 支持组件管理，支持组件化设计，一键复用组件
[x] 支持数据源管理，支持MySQL、ClickHouse、PostgreSQL、Oracle
[x] 支持数据集管理，支持原始数据集、自助数据集、存储过程数据集、JSON数据集、脚本数据集、HTTP数据集，接入不同来源数据
[x] 支持自定义接口权限、数据权限，保证仪表盘数据安全

链接

如何集成

1. 安装依赖

npm install gc-starter-dashboard-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-dashboard-ui/lib/dashboard.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-dashboard-ui'
registerConfig({
  httpConfigs: {
    baseURL: `这里是后端服务地址的值，如：window.CONFIG.baseUrl`
  }
}, router)

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

// file: .env.development

VUE_APP_BASE_URL=http://127.0.0.1:8081/dashboardServer

// file: main.js

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

4. `vuex`模块新增仪表盘`store`

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

import { $dashboard } from 'gc-starter-dashboard-ui'
const store = new Vuex.Store({
  modules: 
    // 导出仪表盘所需vuex模块
    dashboard: $dashboard.dashboardStore
  }
})
export default store

5. 访问仪表盘

启动项目后，访问前端地址 http://ip:port/management

演示DEMO

http://gcpaas.gccloud.com/dashboard

联系我们

License

Apache License 2.0

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

📚简介

效果图

优势

功能

链接