ThingsKit物联网平台可视化工具之大屏编辑器

概述

大屏设计器的作用是让用户可以通过简单的拖拽和配置，创建出符合自己需求的网页界面。它可以帮助用户快速构建出完整的网页，而不需要过多的编码知识和复杂的操作。

编辑器的特点

• 可视化编辑：用户可以通过简单的拖拽和放置，添加网页元素，如文本、图片、视频、图表等。
• 实时预览：用户可以在编辑过程中实时预览网页效果，以便更好地进行调整和配置。
• 丰富的内容：编辑器还提供了丰富的模板和样式，可以满足不同用户的需求。
• 响应式设计：编辑器通常支持响应式设计，可以根据不同的屏幕大小和设备类型，自动调整网页布局和样式。

• 导入和导出：用户可以将编辑好的页面导出为Json文件，并分享给其他人；导入到编辑器中。

  功能区介绍

  

  快捷按钮区域

  快捷按钮区域，位置在最上面部分。
  从左至右的快捷按钮分别为：

• 显示/隐藏图表组件
• 显示/隐藏图层控制
• 显示/隐藏详情设置
• 后退 【撤退，回退到上一步】
• 前进 【使用回退之后，如果存在多余的回退操作，则可以前进一步】
• 保存内容 【将设计好的内容，进行保存处理】
• 保存封面缩略图 【模板在大屏管理中所展示的缩略图】
• 预览 【预览设计出来的效果】
• 中/英文切换
• 颜色【全局颜色设置】

• 主题【全局主题设置】

  组件区域

  里面包含有所有的展示组件，其中包括图表类、信息类、列表类、小组件、图片类、图标类、组合类等。

  图层区域

  图层区域，类似于图像处理软件Photoshop中的图层管理一样；具有锁定、隐藏、分组、拖拽等功能；当你设计好某一块内容时，则可以将其此快内容进行合并，方便整体调整位置；锁定功能则是将其整体及位置进行锁定，防止后续误操作。在实际使用中，非常实用。

  配置区域

  该功能非常强大，主要分为四个部分定制、动画、数据和事件构成。
  定制：对组件的样式进行设置，如组件尺寸、组件位置、组件内容的背景颜色、及组件内容的字体大小、字体颜色等个性化设置，自由度非常的高。
  动画：则为组件进入页面时，第一次加载出现的入场动画：如弹跳、左右晃动、向下进入等。
  数据：主要是为组件提供展示的数据支撑；其中包括静态数据和动态数据。如果是动态数据，系统还提供了过滤器；为满足各种复杂场景的数据构造。
  事件：主要是为单个组件与其他组件需要进行交互作用时使用；比如图表组件如果需要为用户提供自定义查询某个时间段的数据时，则需要将日期组件和图表组件进行交互事件，并传递数据。

文章来源（首发地址）：ThingsKit物联网平台