4. Mashup基础构件与布局

在ThingWorx Composer中，Mashup是工业应用界面的核心载体，而Widget（构件）则是构成Mashup的最小功能单元。理解Widget的分类逻辑、容器与布局的协作机制，以及响应式设计在工业看板中的适用边界，是搭建可维护、可复用、可适配多终端的Mashup的前提。本节从构件分类出发，逐步深入到容器嵌套、布局策略选择与响应式设计原则，并结合一个设备状态看板的示例说明实际搭建过程。

一、Widget的分类逻辑

ThingWorx的Widget库按功能角色大致可分为四类，分类依据是“该构件在界面中承担什么职责”，而不是它长什么样。

• 数据展示类：用于呈现数据值或数据集合，如Label、Value Display、Gauge、Chart、Grid、List、Image。它们通常绑定一个数据源（Data Shape或InfoTable），并负责将数据映射为可视元素。
• 输入交互类：用于接收用户输入或触发服务，如Button、TextBox、Dropdown、Slider、Checkbox、Date Picker。它们通常绑定一个服务或一个属性写入目标。
• 容器与布局类：用于组织其他Widget的位置与尺寸，如Container、Panel、Tabs、Accordion、Column Layout、Row Layout。容器本身不展示业务数据，但决定子构件的排列方式。
• 辅助与装饰类：如Label（静态文本）、Icon、Separator、Progress Bar，用于补充信息或改善可读性。

分类的意义在于：当看板需求变化时，你能快速判断“该换哪个构件”而不是“该改哪段代码”。例如，把Gauge换成Chart，属于数据展示类内部替换；把Panel换成Tabs，属于容器类替换，影响的是布局而非数据绑定。

二、容器与布局策略

容器是Mashup的骨架。ThingWorx中常见的容器包括Container（通用容器）、Panel（带标题栏的容器）、Tabs（选项卡容器）、Accordion（折叠容器）以及Column/Row Layout（行列布局容器）。容器的核心属性是布局方式和尺寸约束。

布局策略主要有三种：

• 绝对定位（Absolute）：子构件通过X/Y坐标和宽高固定摆放。适合大屏看板、固定分辨率场景，优点是精确可控，缺点是换分辨率就错位。
• 流式布局（Flow / Flex）：子构件按顺序排列，容器自动分配空间。适合表单、列表、自适应面板，优点是随窗口伸缩，缺点是需要设置最小宽度避免挤压。
• 网格布局（Grid）：将容器划分为行列网格，子构件占据若干单元格。适合仪表盘式看板，兼顾对齐与自适应。

实际项目中，推荐“外层网格 + 内层流式 + 局部绝对定位”的混合策略。例如，整个看板用Grid划分成顶部状态栏、中部图表区、底部报警区；图表区内部用Flow排列多个Gauge；某个需要精确叠加的指示器再用Absolute定位。

三、响应式设计在工业看板中的适用原则

工业看板与消费级网页不同：它往往运行在固定尺寸的工控屏、电视墙或平板电脑上，分辨率相对稳定，但同一套Mashup可能同时部署在PC浏览器和移动端。因此响应式设计的原则是“优先保证关键信息可读，其次才是布局自适应”。

具体原则包括：

• 关键指标优先：设备状态、报警等级、实时产量等核心数据必须始终可见，不能因为屏幕变窄而被折叠或隐藏。
• 断点设置要少而准：工业看板通常只需2～3个断点，例如≥1280px（大屏）、768～1279px（平板）、<768px（手机）。断点过多反而增加维护成本。
• 容器尺寸用百分比+最小宽度：避免纯固定像素，也避免纯百分比导致小屏下文字换行混乱。推荐“width: 100%; min-width: 320px”这类组合。
• 字体与触控目标不随屏幕缩小而无限缩小：工业现场常戴手套操作，按钮最小触控区域建议不小于44×44px。
• 数据刷新频率与布局解耦：响应式只改变布局，不改变数据绑定和服务调用逻辑，避免因布局变化导致数据源重复订阅。

四、示例：设备状态看板的搭建过程

假设我们要为一个注塑车间搭建“设备状态看板”，目标是在1920×1080的电视墙上显示，同时能在10英寸平板上查看。看板需要展示：设备名称、运行状态（运行/停机/报警）、实时温度、当日产量、最近5条报警记录。

搭建步骤如下：

1. 选择根容器：使用Grid Layout作为根容器，划分为3行2列。第1行跨2列放标题与全局状态；第2行左列放设备状态卡片，右列放温度趋势图；第3行跨2列放报警列表。
2. 放置数据展示构件：设备名称用Label，运行状态用Value Display并绑定状态色（运行=绿色，停机=灰色，报警=红色），实时温度用Gauge，当日产量用Value Display，报警记录用Grid。
3. 设置容器布局：根Grid设置为“Fill”模式，使各区域随窗口伸缩；设备状态卡片内部用Flow布局，保证卡片在窄屏下自动换行。
4. 配置响应式断点：在Mashup的Responsive设置中，添加两个断点：1280px和768px。当宽度小于1280px时，将根Grid改为2行1列，温度趋势图移到设备卡片下方；当宽度小于768px时，隐藏趋势图，只保留状态、温度和报警列表。
5. 绑定数据源：为每个数据展示构件绑定对应的Thing或Stream服务，设置刷新间隔为5秒。注意：刷新间隔应绑定在数据源上，而不是在布局变化时重新订阅。

完成后的看板在大屏上呈现为三区布局，在平板上自动变为上下结构，在手机上只保留核心状态与报警。整个过程不需要修改任何数据绑定逻辑，只调整容器布局与断点规则。

从上述示例可以看出，Widget分类决定了“用什么构件”，容器与布局决定了“怎么摆”，响应式设计决定了“在不同屏幕上怎么变”。三者协作的核心原则是：数据绑定与布局解耦，布局变化不触发数据重订阅。在实际项目中，建议先确定目标屏幕尺寸和关键信息优先级，再选择容器与断点，最后绑定数据源。这样搭建出的Mashup既能在电视墙上稳定运行，也能在平板上保持可读性，同时避免因布局调整而引入数据刷新异常。