简介
Cola-Designer 是一个 基于VUE，实现拖拽 + 配置方式生成数据大屏，为简化开发、提高效率而生。
特性
-
零代码： 实现完全拖拽 + 配置式生成大屏，设计即生产。（动态数据需要后端提供API接口） -
快速开发&部署： 项目采用行业流行架构：SpringBoot+Vue，开发部署方便。 -
组件丰富： 内置element、dataV、echarts等优秀开源的报表常用组件，满足基本的设计需求。 -
自定义： 设计器没有想要的组件？自己动手，丰衣足食。详细文档介绍5分钟可开发一个自己想要的组件。
技术栈
-
SpringBoot -
SpringSecurity -
Mysql -
MyBatis-Plus -
Redis -
Vue -
ElementUI
功能概览
大屏管理
点击登录按钮进入大屏列表（大屏列表如下图所示），大屏列表展示由当前用户创建的所有大屏，将鼠标放置在大屏上会出现操作条， 依次为：设计、访问、分享、删除。点击按钮可继续相应的操作。
设计
在大屏列表页面点击设计按钮，则跳转至所点击大屏的设计界面，如下图所示。
配置栏
配置栏展示的是当前选中组件的可配置项表单，在设计界面的右下方，在拖动放下组件后自动弹出，可点击配置栏右上角的“X”按钮进行影藏， 再次展示需要点击右下角的配置按钮。
动态数据
组件拖放后默认展示为静态数据，可在右下角配置栏数据一栏中修改，暂时提供了静态数据、API接口、SQL进行数据渲染， 在使用API接口时，需加上vue.config.js中代理的前缀，如下图所示
设置
大屏基本信息设置项在设计界面的右上方设计按钮，可设置大屏名称、背景图片、访问码等信息，点击保存按钮会同步到数据库。
已选列表
需要查看当前大屏添加的所有组件可点击右上角列表按钮，点击单列项组件会高亮，可执行组件的复制和删除操作
资源库管理
资源库管理对设计器可能会使用到的图片资源进行管理，对应设计器图片组件的选择图片功能，设计人员可一次性将设计的切图上传至资源库， 使用时可直接选择，避免图片的重复上传。
开源地址
https://gitee.com/colaiven/cola-designer
构建高质量的技术交流社群，欢迎从事编程开发、技术招聘HR进群，也欢迎大家分享自己公司的内推信息，相互帮助，一起进步！
文明发言，以
交流技术、职位内推、行业探讨为主
广告人士勿入，切勿轻信私聊，防止被骗
加我好友，拉你进群
原文始发于微信公众号（极客之家）：拖拽 + 配置方式生成数据大屏，这个开源软件太顶了！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/304589.html
