Pages

图像与智能图像（Smart Image）

总览

Image 和 Smart Image 控件用于在界面中展示静态或动态图片，以增强用户体验。

典型用途包括：

• 图标、符号显示
• 企业 Logo 或背景图
• 根据状态变化显示不同图像（例如设备运行状态）

1. 图像控件（Image）

描述

Image 控件用于显示一个固定图像，不会根据系统变量或状态改变。

适用于：背景、静态装饰图、产品 Logo 等。

核心功能

• Image URL：要显示的图像地址
• 位置与尺寸：通过百分比控制位置与大小
• 不支持逻辑判断或数据驱动变化

2. 智能图像控件（Smart Image）

描述

Smart Image 控件支持根据变量值变化显示不同图像。
通过简单 JavaScript 脚本设定条件，不同状态显示不同图像。

支持多种条件判断，并可为每个条件分配对应图像。

核心功能

• Connection String：绑定的变量或数据源
• Conditions 条件组：设置多个判断条件
• Script 脚本：JavaScript 表达式（例如 value == 1）
• Image URL：当条件满足时显示的图像

示例：设备运行状态

绑定变量：machineStatus
不同值对应不同图标：

脚本设置如下：

// 条件 1
value == 0
// 图像：red_icon.svg

// 条件 2
value == 1
// 图像：green_icon.svg

// 条件 3
value == 2
// 图像：yellow_warning.svg