手机设备面板

功能概述

FastBee 提供了开箱即用的可拖拽运行状态面板。用户在登录移动端后，可以看到自己关联的一个或多个设备，点击设备后进入设备详情页面，这个页面也称为设备面板。

每个设备类型都有自己独立的设备面板，也就是说，同一类设备拥有同样的设备面板，您不需要为每个设备重复编辑设备面板。

因此，用户在运行状态中看到的每个设备面板，是由设备所属产品决定的，通过编辑产品的应用配置，就可以为用户展示各种不同的设备面板。

功能分布

设备面板是可编辑的，您可以在产品管理中，进入任意产品的详情页面，在应用配置中可以看到设备面板编辑器的入口，如下图：

1. 编辑面板

   • 点击“打开编辑面板”按钮，进入设备面板编辑器，如下图：
   

2. 启动

   • 点击“启用”按钮将启用编辑面板生成的内容作为设备面板，如“停用”侧显示系统默认的状态面板。
   

拖拽编辑器

拖拽编辑器由顶部工具栏、左侧组件列表、编辑区域、右侧组件配置组成

一、工具栏

可视化界面右上角为工具栏，可进行重置、导入、导出、查看Json、预览，以及保存操作。

• 重置：点击后清空所有设置
• 导入：导入Json文件生成可视化页面
• 导出：将设计页面导出为Json文件
• 查看：查看当前设计页面的Json数据
• 预览：预览当前设计页面在移动端的样式
• 保存：保存数据并上传云

二、组件列表

组件列表中不同组件作用不同，对应的数据类型也有所不同

组件类型名称	数据类型	是否只读	是否图表
标题	/	/	/
文字展示	字符串	/	非图表
数值展示	小数、整数	只读数据	非图表
数值控制	小数、整数	非只读数据	非图表
多状态控制	枚举	/	非图表
开关控制	布尔	/	非图表
历史数据	小数、整数	只读数据	图表

三、编辑区域

这里的“编辑”指的是设备面板的编辑区域，它是我们的主要编辑区域。 在编辑区域可以拖动组件列表中的组件进行编排设计，可以随意除一个组件，也用鼠标左键选中一个组件，按下删除键图标即可删除，同时可以滚动鼠标对画布大小进行缩放。

四、组件配置

右侧为组件配置，可在此进行页面设置、图层管理、组件样式和属性管理

• 页面设置：进行运行状态页面背景颜色，背景图片的设置
• 图层管理：对多个组件的顺序进行拖动管理
• 组件设置：组件对应属性选择以及样式参数设计

操作流程

1. 在产品详情中选择应用配置目录，点击启用按钮，并点击打开编辑面板按钮即可打开编辑面板。

2. 从左侧组件栏中选择对应组件拖拽至中编辑区域（以文字展示组件为例），此时画布提示需在右侧对组件进行设置。

3. 点击属性选择按钮组件属性进行选择，选择需要属性后点击确认，即可在画布中展示对应属性。

4. 设计完成后可将页面导出保存为Json文件，或预览移动端样式，确认无误后点击右上侧保存按钮，保持数据至云端。

5. 保存后打开移动端，选择对应产品下的设备，即可查看设计的运行状态页面。