简搭云可视化大屏简介

简搭云可视化大屏是一个提供 “低代码数据可视化” 完全免费开发设计平台，是一个类似在线ps设计器，将图表，图片资源，表格统计组件、在线视屏监控、在线地图等等组件，通过层布局，一层一层叠加设计，使它不需要像传统开源一样，使用者需要有较强的设计经验或技术背景才能完成大屏的制作，用户通过对组件的托拉拽，在画布中编辑自己想要的大屏样式，可以轻松创建出精美的数据大屏。简化开发过程，加快应用程序的交付速度，大大减少开发时间和成本。

简搭云可视化大屏采用技术

前端采用Vue、Element UI2.0、JqueryTemplate、codemirror、html2canvas、monaco、@jimnghi/data-view、echarts（图表）、flv（在线视屏监控）、mapboxgl（二维地图）、file-saver（下载JSON，导出vue）。

后端采用Spring Boot、Spring Security、 Jwt，Mybatispus。

动态Mybatis接口引擎，可在线编辑，编辑可立马生效，只要符合Mybatis配置语法接口功能就能实现。

可视化大屏设计器引擎，提供丰富的UI组件，皮肤，可在线编辑源码，无码实施各种应用。

特别鸣谢：element，datav，mapboxgl，flv.js。

简搭云可视化大屏环境要求说明

JDK >= 1.8

MySQL >= 5.7

Maven > = 3.0

Node = 16

简搭云可视化大屏设计需要掌握的技术

Vue语法技术文档 (opens new window)

element ui 帮助文档 (opens new window)

datav ui 帮助文档 (opens new window)

flv.js 帮助文档 (opens new window)

Mapboxgl 帮助文档 (opens new window)

jquery.tmpl 帮助文档 (opens new window)

百度echart 帮助文档 (opens new window)

在线Mybatis语法帮助文档

简搭云可视化大屏运行说明

设置淘宝镜像

   npm config set registry https://registry.npm.taobao.org

安装可视化表单依赖

   npm install

本地调试运行程序

    npm run serve

打包运行程序

    npm run build

简搭云可视化大屏体验地址

文档帮助地址 (opens new window):http://qifeng.321zou.com/

大屏设计预览地址 (opens new window)：http://bg.kyform.cn/

技术点：

1、框架：基于 Vue2 框架编写，简单更容易上手。

2、渲染：以vue2源码渲染，只要符合vue2语法就能渲染，能在线编辑逻辑代码。提高了其的扩展性，可读性，聚合性，复用性，封装性

3、代码合并技术：拖拽设计生成的代码与自定义编辑的代码可以进行合并，无冲突。

4、私有性：可在线编写css，都是当前大屏私有，不会污染全局样式，逻辑代码也是如此。

5、调试：在源码编辑中输入debugger，各种浏览器 F12轻松进入调试一步一步定位错误，解决错误。

6、二次开发：支持vue源码导出，遇到复杂的功能可下载vue文件到本地，二次开发，无需从零开始。

7、自定义组件：可视化大屏组件库支持在线开发集成，无需更改任何代码，可以轻松集成一个组件到可视化大屏设计器中

8、组件丰富性：2w+echart组件例子，4w+的全国乡镇地图信息，60+边框svg，无数

9、主题多样化：可以一键设置图表的样式，提供了99套主题的选择。

10、提供滤镜设置：可将背景图，视屏资源颜色更改。