4. 图形界面设计基础

WinCC 的画面（Picture）是操作员与产线之间唯一的可视化接口。画面编辑器（Graphics Designer）本质上是一个面向对象的矢量绘图环境，但它绘制的不是普通图形，而是带有过程变量绑定、动态属性和事件响应的“过程对象”。理解这一点，是区分“画图”和“做 SCADA 画面”的分水岭。本节围绕画面编辑器、基本对象、对齐与图层、模板与面板、总览布局五个层次展开，最终落到一条可复用的产线总览画面。

一、画面编辑器与对象模型

在 WinCC 项目管理器中新建画面后，双击进入 Graphics Designer。默认工具栏包含“标准对象”“智能对象”“窗口对象”和“控件”四组。标准对象（直线、折线、多边形、矩形、圆、椭圆、圆弧、文本、静态文本）只提供几何与外观属性；智能对象（按钮、I/O 域、棒图、趋势、报警窗口、画面窗口）自带与变量系统的接口；窗口对象用于嵌入画面窗口和控件。选择对象后，属性面板分为“属性”和“事件”两页：属性页决定对象“长什么样、显示什么值”，事件页决定“鼠标点击、数值变化时做什么”。

对象的关键属性包括几何（X、Y、宽度、高度、旋转）、样式（线型、线宽、填充、颜色）、动态（通过“动态对话框”或“变量连接”把属性绑定到过程变量）。例如，把一个矩形的“背景颜色”属性连接到 Motor1_Run（BOOL），并设置 0 为灰色、1 为绿色，就得到一个运行指示灯。这种“属性—变量”绑定是画面动态化的最小单元。

二、基本对象绘制与对齐、图层

绘制时先确定画面的坐标参照：WinCC 画面以左上角为原点，X 向右为正，Y 向下为正，单位为像素。产线总览画面常用 1920×1080 或 1600×900。绘制矩形时按住 Shift 可约束为正方形，按住 Ctrl 从中心向外绘制。多个对象需要统一尺寸时，用“对齐”工具栏：左对齐、水平居中、右对齐、顶对齐、垂直居中、底对齐，以及“使宽度相同”“使高度相同”“水平等距”“垂直等距”。

图层（Layer）用于管理对象的叠放与可见性。WinCC 提供 0～15 共 16 个图层，编号越大越靠上。建议按功能分层：图层 0 放背景与底图，图层 1 放产线设备轮廓，图层 2 放管道与连接线，图层 3 放动态指示与数值，图层 4 放按钮与操作区，图层 5 以上放临时标注。分层后可以整层隐藏或锁定，避免误操作。对象之间的前后关系也可用“置于顶层/底层”快速调整。

三、画面模板与面板技术

当产线有 8 台同类设备时，逐台复制画面既费时又难维护。WinCC 提供两种复用机制：画面模板（Picture Template）和面板（Faceplate）。画面模板用于统一“页面级”元素，例如页眉、页脚、报警行、导航按钮、公司 Logo。在画面属性中指定模板后，所有使用该模板的画面自动继承这些元素，修改模板即全局生效。模板中的对象可以绑定“画面名称”等系统变量，实现页眉自动显示当前画面名。

面板（Faceplate）用于复用“设备级”对象。以电机为例，把指示灯、启停按钮、电流 I/O 域、故障文本组合成一个面板，并定义面板接口（如 RunFB、CmdOn、Current、Fault）。在总览画面中拖入 8 个面板实例，每个实例只需绑定各自设备的变量前缀（如 M1_、M2_），即可得到 8 套独立显示。面板内部结构只维护一份，改一次全部更新。这是大型产线画面可维护性的核心手段。

四、产线总览画面布局实战

下面以一条“上料—加工—检测—分拣”四工位产线为例，给出总览画面的布局与实现要点。画面尺寸 1600×900，按“上中下”三段布局：顶部 0～120 为页眉（产线名称、当前时间、报警汇总、画面切换按钮）；中部 120～760 为工艺流程图区，按物料流向从左到右排列四个工位；底部 760～900 为操作与状态区（启动/暂停/急停、产量计数、OEE、报警滚动条）。

中部流程图区按 4 列布置，每列宽约 340，列间距 40，工位框统一 280×180。四个工位框用“使宽度相同”“使高度相同”对齐，再用“水平等距”保证间距一致。工位之间用折线连接，折线拐点对齐到工位框中心线。每个工位内部放置一个电机面板实例、一个状态指示灯、一个关键参数 I/O 域（如温度、节拍）。物料流向用箭头表示，箭头方向与工艺顺序一致。

动态实现上，指示灯背景色绑定运行反馈；I/O 域绑定过程变量并设置格式（如温度 %5.1f ℃）；产量计数用“变量—线性标定”或直接显示累计值；报警汇总用报警控件放在页眉右侧。按钮的鼠标点击事件中调用 SetTagBit 或 SetTagWord 写命令，并配合确认对话框防止误触。

完成后的检查要点：所有同类工位框尺寸一致、间距相等；指示灯颜色与变量状态对应正确；按钮点击有确认且能写入变量；切换画面后页眉信息随画面更新；隐藏图层 5 后画面仍完整可读。满足这些条件，总览画面才算达到可交付状态。