状态场景
状态场景是 SceneV 的核心功能之一,它允许图元(组件)根据其绑定的数据或预设的条件,自动切换到不同的外观或行为,从而实现动态的数据可视化。
例如,您可以为一个设备图标设置多个状态:当设备在线时显示为绿色,当设备离线时显示为灰色,当设备告警时显示为红色并闪烁。
状态的作用
- 实时反馈:直观地展示设备的实时运行状态、数据的变化趋势等。
- 提升可读性:通过颜色、图标、动画等视觉元素,快速传递关键信息。
- 简化逻辑:将复杂的条件判断和样式变更封装在状态配置中,无需编写复杂的事件和动作。
数据与状态的切换示例
如何配置状态
下面以一个告警灯为例,演示如何配置状态,使其在不同数值下显示不同颜色的灯。
1. 选中图元并打开状态配置
首先,在画布上拖动多个图元,并一起选中(例如一个告警灯),在右侧图元对齐中,点击让图元重合到一起。

2.合并为状态
3.绑定数据
选择自定义数据,添加动态数据后,绑定变量字段


4. 添加状态条件,状态动作
在状态面板中,您可以为图元添加多个状态。每个状态都由一个或多个 “条件” 和一个 “动作” 组成。当所有条件都满足时,对应的动作将被执行。
点击 “添加触发条件” 按钮,然后为该状态设置触发条件。
- 选择变量:通常是图元自身绑定的数据字段(例如
value)。 - 设置运算符:例如
>(大于),<(小于),==(等于) 等。 - 设置阈值:用于比较的数值。
例如,我们添加一个条件:value > 60。
点击 “添加动作” 按钮,然后设置动作类型。
- 选择动作类型:这里选择更改属性(例如
value)。 - 对象类型:选择图元。
- 属性数据:这里添加需要更改的图元属性,这里选择的是状态 (组合为状态的图元,选项值默认从 0 开始)。
例如,我们添加属性为:状态 值为 0。

状态与动画结合
除了改变颜色、位置等基础属性,状态还可以用来控制动画的播放。
例如,您可以设置当设备状态为“运行”时,自动播放一个旋转动画,模拟设备正在工作的效果。
- 为图元预先设置好一个动画(例如旋转)。
- 在状态配置中,添加一个状态,条件为
status == 'running'。 - 将动作设置为
开始动画,并选择预设好的旋转动画。
这样,当数据满足条件时,图元就会自动开始播放动画,使可视化效果更加生动。
