简介

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中代理的前缀，如下图所示

设置

大屏基本信息设置项在设计界面的右上方设计按钮，可设置大屏名称、背景图片、访问码等信息，点击保存按钮会同步到数据库。

已选列表

需要查看当前大屏添加的所有组件可点击右上角列表按钮，点击单列项组件会高亮，可执行组件的复制和删除操作

资源库管理

资源库管理对设计器可能会使用到的图片资源进行管理，对应设计器图片组件的选择图片功能，设计人员可一次性将设计的切图上传至资源库， 使用时可直接选择，避免图片的重复上传。

版权声明：
1、本网站名称：帝企吧
2、本站永久网址：https://www.diqiba.com
3、本网站的文章部分内容可能来源于网络及作者投稿，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
7、本站所有资源来源于互联网，仅用于学习及参考使用，切勿用于商业用途，如产生法律纠纷本站概不负责！ 8、资源除标明原创外均来自网络转载，版权归原作者所有，若侵犯到您权益请联系我们删除，我们将及时处理！ 9、若您需使用非免费的软件或服务，请购买正版授权并合法使用！