Skip to content

状态场景

状态场景是 SceneV 的核心功能之一,它允许图元(组件)根据其绑定的数据或预设的条件,自动切换到不同的外观或行为,从而实现动态的数据可视化。

例如,您可以为一个设备图标设置多个状态:当设备在线时显示为绿色,当设备离线时显示为灰色,当设备告警时显示为红色并闪烁。

状态的作用

  • 实时反馈:直观地展示设备的实时运行状态、数据的变化趋势等。
  • 提升可读性:通过颜色、图标、动画等视觉元素,快速传递关键信息。
  • 简化逻辑:将复杂的条件判断和样式变更封装在状态配置中,无需编写复杂的事件和动作。

数据与状态的切换示例

如何配置状态

下面以一个告警灯为例,演示如何配置状态,使其在不同数值下显示不同颜色的灯。

1. 选中图元并打开状态配置

首先,在画布上拖动多个图元,并一起选中(例如一个告警灯),在右侧图元对齐中,点击让图元重合到一起。

状态配置入口

2.合并为状态

图元合并到一起后,鼠标右键点击图元,选择组合为状态状态配置入口

3.绑定数据

选择自定义数据,添加动态数据后,绑定变量字段

状态配置入口状态配置入口

4. 添加状态条件,状态动作

在状态面板中,您可以为图元添加多个状态。每个状态都由一个或多个 “条件” 和一个 “动作” 组成。当所有条件都满足时,对应的动作将被执行。

点击 “添加触发条件” 按钮,然后为该状态设置触发条件。

  • 选择变量:通常是图元自身绑定的数据字段(例如 value)。
  • 设置运算符:例如 > (大于), < (小于), == (等于) 等。
  • 设置阈值:用于比较的数值。

例如,我们添加一个条件:value > 60

点击 “添加动作” 按钮,然后设置动作类型。

  • 选择动作类型:这里选择更改属性(例如 value)。
  • 对象类型:选择图元。
  • 属性数据:这里添加需要更改的图元属性,这里选择的是状态 (组合为状态的图元,选项值默认从 0 开始)。

例如,我们添加属性为:状态 值为 0

添加状态条件

状态与动画结合

除了改变颜色、位置等基础属性,状态还可以用来控制动画的播放。

例如,您可以设置当设备状态为“运行”时,自动播放一个旋转动画,模拟设备正在工作的效果。

  1. 为图元预先设置好一个动画(例如旋转)。
  2. 在状态配置中,添加一个状态,条件为 status == 'running'
  3. 将动作设置为 开始动画,并选择预设好的旋转动画。

这样,当数据满足条件时,图元就会自动开始播放动画,使可视化效果更加生动。