---
title: 组态
source: https://vjmap.com/guide/visual/scada.html
---

---
group: 地图、三维与组态
description: 用组态画板画工艺流程图：添加泵阀罐等图元、从端口拉线并做成立体管道，用测点数据驱动液位、颜色和流动，再换主题、预览。
---

# 组态

「组态」用来画工业工艺流程图：泵、阀、罐、换热器、仪表这些图元摆在一块画板上，用管道连起来，再接上测点数据，罐里的液位、泵的颜色、仪表指针和管道里的流动都会随数据实时变化。组态画板是一个组件，可以独占一整页，也可以和图表、三维场景放在同一页上。

![智慧水厂组态大屏](./images/scada-overview.webp)

上图是访客工作区里的「组态示例·智慧水厂全功能演示」预览效果。

1. **组态画板**：中间的工艺流程图，罐、泵、过滤器、阀门、紫外消毒和仪表用立体管道连接，液位和读数每 3 秒刷新。
2. **交互按钮**：「启动产线」「停止产线」「模拟故障」「复位告警」改写测点值，画板上的设备状态随之变化。
3. **测点表**：普通表格组件和组态画板绑的是同一张测点表，数值同步。

::: tip 先看示例
访客工作区的「组态」分类有 18 个示例工程：智慧水厂全功能演示、换热站远程监控、能源行业（电力单线图、新能源、油气）、水务与暖通、2.5D 立体组态、天气与粒子特效、动画连接演示等，图元、连线、数据驱动和交互的做法都能在里面找到。打开看完不要保存，见[项目管理](./projects.html)。
:::

## 新建组态

三种方式：

- **用模板新建**：首页点「+ 新建」，选「组态大屏」（空的整页组态画板）、「示例 · 组态监控台」（换热站集中控制，泵、换热器、罐、阀和立体管道，侧栏底栏已排好）或「示例 · 组态工艺流程」（罐 → 泵 → 阀 → 罐的工艺链和压力表）。
- **新建组态页**：在已有工程里点底部页面条的「+子页面」，选「组态页」，得到一页铺满的组态画板，直接进入编辑。
- **在页面里添加**：组件库的「组态」分类里有「组态画板」组件，添加后调整大小和位置。

![在页面条新建组态页](./images/scada-new-page.webp)

1. **+子页面**：底部页面条上的按钮。
2. **组态页**：新建一页组态画板；「空白页」是普通页面。

本篇用「示例 · 组态工艺流程」模板新建的「文档示例·组态工艺流程」做演示。

## 组态编辑界面

在画布上**双击**组态画板进入编辑（组态页新建后直接就在编辑状态）。左侧换成「组件图层」和「图元库」：

![组态画板的编辑界面](./images/scada-editor.webp)

1. **退出组件编辑**：编辑完点这里回到页面编辑，也可以双击画板外的空白处。
2. **组件图层**：分「图元」「连线」「内嵌组件」三组，点一行就选中。
3. **图元库页签**：「工业图元」是矢量图元；「行业图片」是按水务、电力、油气、化工、暖通、新能源、工厂仓储分类的设备图片；「我的图片」「我的图元」放自己上传或保存的；「通用组件」是能放进画板的文本、表格、图表、仪表盘等普通组件。
4. **分类**：工业图元共 160 个，分通用、管阀、设备、容器、仪表、电气、电子、电力、新能源、油气、水处理、暖通、粒子特效、天气、自定义、2.5D、标注、装饰等类。
5. **画板**：摆放图元、拉线的地方，带网格和吸附。选中图元后上方出现「复制」「置顶」「置底」「删除」小工具条。
6. **属性面板**：选中图元的「图元」「位置与尺寸」「外观」「动画」「特效」等设置；选中连线时是「连线」「外观」「流动」「路径动画」。

## 添加图元

1. 在图元库搜索框输入名称，例如「换热」，支持拼音。
2. 悬停「板式换热器」卡片，点中间的「+」，图元加到画板中间并被选中；也可以直接把卡片拖到画板上的指定位置。
3. 把图元拖到合适位置，在属性面板的「文本」里填名称，如「1#板式换热器」。

![搜索并添加图元](./images/scada-add.webp)

1. **搜索框**：右边的「导入SVG」可以把自己的 SVG 图形做成图元。
2. **图元卡片**：悬停后点「+」添加。
3. **分类**：搜索时只显示有结果的分类。

画板上可以框选多个图元一起移动；右键菜单里有复制、删除、置顶置底等操作；拖动选中图元顶上的圆点可以旋转。

## 拉线连接

每个图元的四边（部分设备还有专门的进出口）有**端口**。把鼠标移到端口上按住，拖到另一个图元的端口松开，就生成一条连线，两端挂在图元上，之后移动图元，连线会跟着走。

![从换热器的端口拖到储罐的端口](./images/scada-link.webp)

1. **起点端口**：在换热器右边的端口上按下鼠标。
2. **终点端口**：拖到清水罐底部的端口，端口变绿表示可以连接，松开即可。

不想挂在图元上时，可以用图元库的「线条」卡片逐点画自由线：点击落点，落到端口上就自动结束。选中连线后拖两端的圆点可以改接到别的端口，拖中间的途径点可以调整走线。

## 立体管道与流动

新拉出的连线是一条细线。选中它，在属性面板里把它做成管道：

![把连线改成立体管道并开启流动](./images/scada-pipe.webp)

1. **新连线**：已经改成立体管道，管道里有流动的亮段。
2. **线型**：「线条」或「立体管道」；立体管道转角处有弯头，两端有法兰（「弯头/法兰」开关）。
3. **线宽**：立体管道的线宽就是管径，一般 10~16。
4. **流动**：「流动动画」开关；样式有「水流」「水珠」「圆点」「箭头」「水滴」「能量脉冲」，还能改方向、流动色、流速和辉光。

「连线」分组里的「走线」可以选「直线」「折线」「曲线」。「路径动画」让箭头、水滴等符号沿管道行进。

## 接入测点数据

组态和[三维场景](./scene3d.html)一样，用一张「测点表」驱动：表里每行一个测点，一列是测点名（点位），一列是当前值。

**第一步：组态画板绑定测点表。** 退出编辑，选中组态画板组件，在「数据」页签里：

![组态画板绑定测点表](./images/scada-bind.webp)

1. **组态画板**：选中的是画板组件本身。
2. **测点数据**：「测点键」选点位那一列，「测点值」选数值那一列。
3. **数据来源**：模板自带的「工艺测点(Mock·长表)」是模拟数据，每 3 秒生成一次新数值；实际项目换成接口、WebSocket 或平台数据表，见[数据接入与绑定](./data.html)。
4. **数据预览**：现在有 1~4 四个点位。

**第二步：图元认领测点。** 双击进入画板，选中图元，在「数据」页签的「数据驱动」分组里打开「启用」，再选「测点键」。罐类图元会把数值直接画成液位：

![原水罐的数据驱动设置](./images/scada-tank-data.webp)

1. **启用 / 测点键**：原水罐认领点位 `1`。
2. **量程下限 / 量程上限**：数值按 0~100 换算成液位高度。
3. **液面波浪 / 数值文本**：液面轻轻摆动，罐上显示「62 %」这样的读数；下面可以设小数位和单位。
4. **按值驱动**：「状态色映射」「按值动画」「按值动画速度」「按值填充」「按值高度」「按值旋转」「按值移动」「按值缩放」「按值显隐」，按需打开。

罐、料仓、液位柱、温度计、仪表盘、电池等图元自带液位、指针或电量显示，只要设好量程。真实数据还没接上时，可以打开「编辑预览Mock」填一个值，先在编辑器里看效果。

**第三步：按数值变色。** 选中泵，认领点位 `4`，打开「按值填充」：

![泵按数值改变颜色](./images/scada-fill.webp)

1. **1#提升泵**：当前值 73，超过阈值 2，填充成高档色（红）。
2. **状态色映射**：按具体的值换颜色，规则每行「值=颜色」，如 `run|1=#22c55e`、`stop|0=#94a3b8`、`fault=#ef4444`，适合运行、停机、故障这类状态值。
3. **按值填充**：两个阈值分出低、中、高三档，各配一种颜色，适合温度、压力这类连续数值。
4. **其他按值效果**：按值高度、旋转、移动、缩放、显隐，比如阀门开度、指示灯亮灭。

## 外观与动画

图元的「样式」页签里：

![泵的外观与动画设置](./images/scada-anim.webp)

1. **选中的泵**。
2. **外观**：填充、描边、强调色留空时跟随画板主题；「材质」有「金属」「玻璃」「塑料」「哑光」「纯色（无渐变）」；还有落地阴影、描边宽、不透明度、文字色和字号。
3. **动画**：「闪烁」「脉冲」「旋转」「抖动」「跳动」「摆动」「急闪」「呼吸」「漂浮」「晃动」「波纹」「光晕」，可调速度。泵、风机选「旋转」时只有叶轮转，机身不动。

想让动画只在设备运行时播放，在「数据」页签打开「按值动画」。

## 主题与画板设置

退出编辑、选中组态画板组件，在「样式」页签调整整块画板：

![画板的视图交互与外观](./images/scada-theme.webp)

1. **视图交互**：「预览滚轮缩放」「预览拖拽平移」，打开后预览和发布时可以用滚轮缩放、按住拖动画板，双击空白处复位。
2. **主题**：「科技蓝」「极光绿」「深空紫」「琥珀金」「石墨灰」，图元颜色留空的都会整体换色，图中换成了极光绿。
3. **立体观感 / 深度排序**：立体观感给图元加渐变和阴影；深度排序按图元位置自动排前后遮挡，做 2.5D 等轴测图时打开。

「画布」分组里的「场景宽」「场景高」是画板内容的坐标范围，画板会按组件大小等比缩放；「吸附网格」控制拖动时是否对齐网格，下面的「网格」「网格间距」控制网格显示。

## 事件交互

选中某个图元，在「事件」页签点「添加事件」，就能配置「点击这个图元 → 打开弹窗 / 切换页面 / 修改其他组件设置 / 切换状态」等交互，和普通组件的用法一样，见[事件交互与多状态](./events.html)。用页面上的按钮改写测点值，就能模拟启停、故障这类工况。

## 预览效果

点顶栏的「预览」，模拟数据开始刷新：

![预览：液位、泵的颜色和管道流动随数据变化](./images/scada-preview.webp)

1. **原水罐**：液位从 62% 变成了 75%。
2. **1#提升泵**：数值 64，落在中档，变成橙色。
3. **新拉的管道**：从换热器流向清水罐。

确认无误后保存、发布，见[保存、发布与嵌入](./publish.html)。

## 相关文档

- [三维场景](./scene3d.html)：三维数字孪生，也有管道、液位罐等组态元素，测点驱动方式相同。
- [数据接入与绑定](./data.html)：测点表的数据源。
- [事件交互与多状态](./events.html)：按钮写测点、点击图元弹窗。
- [AI 助手](./ai.html)：一句话让 AI 画一张工艺流程图。