基于 Vue 的拖拽式数据报表设计器

《开源精选》是我们分享 Github、Gitee 等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个基于 VUE 实现的拖拽数据大屏设计器——Cola-Designe。

Cola-Designer 是一个基于 VUE，实现拖拽 + 配置方式生成数据大屏，为简化开发、提高效率而生。

功能特性

• 代码：实现完全拖拽 + 配置式生成大屏，设计即生产。（动态数据需要后端提供API接口）
• 快速开发&部署：项目采用行业流行架构：SpringBoot+Vue，开发部署方便。
• 组件丰富：内置 element、dataV、echarts 等优秀开源的报表常用组件，满足基本的设计需求。
• 自定义：设计器支持自定义组件

操作界面

大屏管理

点击登录按钮进入大屏列表（大屏列表如下图所示），大屏列表展示由当前用户创建的所有大屏，将鼠标放置在大屏上会出现操作条，依次为：设计、访问、分享、删除。点击按钮可继续相应的操作。

设计

在大屏列表页面点击设计按钮，则跳转至所点击大屏的设计界面，如下图所示。

在设计界面，左侧栏为组件栏，使用方式为：选择需要使用的组件，长按鼠标左键将组件拖动至中间深色的设计区域，放下组件后会在右下角弹出此组件的可配置项表单，如文本组件的字体颜色、大小等等，修改配置项设计区域的组件会发生相应的变化，部分组件未深度监听可使用数据一栏中的刷新按钮进行同步。

将鼠标放置在设计界面的组件上，组件右上角会出现两个按钮，分别为复制和删除，点击按钮可执行相应的操作。

配置栏

配置栏展示的是当前选中组件的可配置项表单，在设计界面的右下方，在拖动放下组件后自动弹出，可点击配置栏右上角的“X”按钮进行影藏，再次展示需要点击右下角的配置按钮。

动态数据

组件拖放后默认展示为静态数据，可在右下角配置栏数据一栏中修改，暂时提供了静态数据、API 接口、SQL 进行数据渲染，在使用 API 接口时，需加上 vue.config.js 中代理的前缀，如下图所示。

vue.config.js：

module.exports = {
    publicPath: './',
    outputDir: "docs",
    devServer: {
        disableHostCheck: true,
        port: 8009,
        open: true,
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            '/design': {
                target: 'http://127.0.0.1:6882',
                ws: false,
                changeOrigin: true,
                pathRewrite: {
                    '/design': ''
                }
            },
            '/fileUrl': {
                target: 'http://127.0.0.1:6882',
                ws: false,
                changeOrigin: true,
                pathRewrite: {
                    '/fileUrl': ''
                }
            },
        }
    },
}

可以看到/design 代理到了localhost:6882地址，可自行配置代理以访问其他后端项目的接口。

在使用 SQL 进行渲染时，需在文本框输入对应的 SQL，点击刷新按钮会向后端发起 API 请求，接口地址为/sql/executeSelect，对应后端项目的 SqlExecuteController 中的接口，可在此接口中自行更改数据源。

• 注意：API 接口和 SQL 返回的数据格式必须和静态数据文本的格式一致，否则不能渲染成功。
• 抽取 fileUrl 为方便分离资源服务器，没有分离需求可与大屏代理一致

设置

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

导入&导出

导入导出功能在设计界面的右上方操作条中的相应按钮，可导出为图片和设计文件，导出的设计文件为.cd 后缀，其实是一个 JSON 文件，内容则是大屏的基本信息和大屏上组件的位置坐标和可配置数据。导入暂只支持.cd文件的导入，版本不一致导入不成功。

已选列表

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

预览&保存

点击右上角预览按钮会将当前设计保存到浏览器 localstorge，预览页面取 localstorge 中的数据进行渲染。点击右上角保存按钮会将当前设计保存到数据库。

资源库管理

资源库管理对设计器可能会使用到的图片资源进行管理，对应设计器图片组件的选择图片功能，设计人员可一次性将设计的切图上传至资源库，使用时可直接选择，避免图片的重复上传。在上传资源时，需要选择资源对应的分组，目前系统默认了背景库、图片库、素材库三个分组，对应数据库 design_img_group 表中的数据，可自行对其进行增删操作。