10 款最佳 KPI 卡片与状态指示 Custom Web Control：适用于 WinCC Unified 和 WinCC V8（免费）

为什么值得用 KPI 卡片 Custom Web Control

每张总览画面最后都要回答同样几个问题。产线在运行吗？离目标还差多少？这个班报废了多少件？那台机器人自上次保养以来又跑了多少小时？趋势图回答的是“我们是怎么走到这一步的”；KPI 卡片或状态指示回答的是“我们现在在哪儿”——一个数字或一种颜色，站在控制室另一头也看得清。

这些东西你可以用矩形、I/O 域加一大堆动态化拼出来，我们大多数人也都这么干过。KPI 卡片 Custom Web Control（CWC）则把数值、单位、趋势箭头、限值和状态颜色装进一个对象，拖到画面上、绑定变量就行。CWC 是一个小型 Web 应用：HTML、CSS 和 JavaScript 打包成一个 ZIP，由 WinCC Unified（TIA Portal）和 WinCC V8 在画面中运行。它的属性和其他对象一样出现在接口（Interface）列表里，所以像 rejectCount 或 isActive 这样的变量可以直接驱动它；它的事件，比如 Clicked，则让你的 HMI 脚本可以打开面板或详情画面。

什么样的 KPI 卡片或状态指示才值得下载

上榜单之前，先亮出我们的标尺。下面是我们看重的几点，大致按“缺了它有多让人抓狂”排序：

• 三米外也看得清。 一个大数字、清楚的单位、一句大白话的标签。要是操作员得凑近才看得见，这张卡片就失败了。
• 颜色要有含义。 绿、琥珀、红对应某个状态、限值或阈值，而不是装饰。永远一个颜色的状态指示，不过是一张贴纸。
• 卡片里要有上下文。 趋势箭头、设定值、警告和报警限值或一段小历史，能把一个数字变成信息。
• 接口要干净。 产品说明里属性名清清楚楚，你就知道每个变量会驱动什么，再加上一两个用于下钻的事件。
• 指示器选对用途。 KPI 指标块、KPI 仪表板、带限值的过程值、废品计数器、小时计、车间总览、状态时间轴、信号灯塔、极简卡片和 LED：每种用途我们只选一位冠军。

我们是怎么挑的（以及我们没做什么）

2026 年 11 月初，我们在 HMIx 目录中搜遍了所有用来一眼展示一个数值或一个状态的免费 Custom Web Control：KPI 卡片和指标块、计数器、状态卡片、状态灯、LED 以及状态总览。仪表、柱状图、趋势图和数据表格已经有各自的文章，所以在趋势图那篇里介绍过的迷你趋势线指标块，这里不再收录。每个候选都看了它的真实预览图（不是目录里那张顶着大标题的封面），并读了产品说明，看它在文档里列出了哪些属性、事件和方法。下载量只在难分高下时才拿来参考。

两款控件进了荣誉提名；另有两款 Motor Status Card 直接淘汰，因为它们的图库里只有控件图标，根本没东西可评。有些图库把一张小卡片放在一大块空白画布中间，我们在本文里裁掉了空白背景，图形本身一笔没动。也得先说句实话：我们评判的是预览图和文档，并没有把这些控件放进真实的 Runtime 里跑过。它们都是用 AI 生成的，每个产品页面都会提醒你：上生产之前，先在你自己的 TIA Portal 项目里测试。

10 款最佳 KPI 卡片与状态指示 Custom Web Control，逐一点评

每一款都附上真实预览图、我们喜欢的地方、需要留意的地方，以及产品说明中列出的属性，最后是目录缩略图：点击即可打开产品页面，免费下载这款控件。

01综合最佳：经典 KPI 指标块

KPI Indicator

如果只能留一个，那就是它。一个宽幅指标块，左边缘有一条彩色强调条，一个灰色小标签（“PRESSURE”），一个超大的白色数值（“1285”），旁边是单位（“PSI”），下面是一个带百分比的箭头（“▲ 12.5%”）。KPI 卡片就该是这个样子：一个隔着整个房间都读得出的数字，加一行上下文。2026 年 11 月它有 9 次下载和一条五星评价，也是本榜单里最受欢迎的控件之一。

它的图库展示了同一个控件的三种外观：深绿配青色强调条，深灰配黄色强调条和橙色下降箭头，以及完全不带趋势行的藏青色。这正是接口在起作用。label 和 unit 给数值命名，decimalPlaces 设定分辨率，trendValue 和 trendDirection 驱动箭头，showTrend 用来隐藏它，accentColor、trendColor 和 backgroundColor 承载你的状态颜色。Clicked 事件随时可以用来下钻到面板或趋势画面。

我们喜欢的

• +数值巨大、清晰，还带单位：教科书级的 KPI 指标块
• +趋势箭头和百分比可以关掉
• +强调色和趋势色可以绑定到状态

需要留意

• –产品说明写了 10 个属性，只列出了 9 个名字：请在 TIA Portal 的接口列表里找承载数值的那个
• –一个指标块只放一个数值：要一整排 KPI，就多放几个

可绑定属性

• label
• unit
• decimalPlaces
• trendValue
• trendDirection
• showTrend
• accentColor
• trendColor
• backgroundColor

KPI Indicator

免费 · WinCC Unified & V8 · CWC (.zip)

↓查看并免费下载✦用 AI 编辑

02完整 KPI 仪表板首选（周期时间与产能）

Crane Logistics KPI

一张卡片不够用的时候就选它。橙色的“CRANE LOGISTICS MONITOR”统领着一整块仪表板，角落里有个时钟：“Current lifting”为 00:45，配橙色迷你趋势线；“Inter-load”为 02:12，配青色迷你趋势线；“Lifts per hour”为 24，目标 30；一张负载类型（集装箱、托盘、袋装和卷材）的水平柱状图；还有一列周期统计：平均 01:30、峰值 03:45 和最小值。2026 年 11 月它有 12 次下载和一条五星评价，是本文下载量最高的控件。

它的产品说明写得异常详尽：30 个属性。liftingTimeSeconds 和 interLoadTimeSeconds 喂给实时卡片，控件会记录 averageCycleSeconds、maxCycleSeconds 和 minCycleSeconds，liftingHistory 绘制迷你趋势线，loadTypes 绘制分布图。每一处文字都有自己的属性，从 labelLiftsPerHour 到 labelDistribution，accentColor1 到 accentColor3 设定配色。再加上 CycleCompleted、ThresholdAlert 和 TargetReached 事件，以及 exportLogisticsData 和 resetStatistics 方法，功能就齐了。

我们喜欢的

• +六个 KPI、两条迷你趋势线和一张柱状图，集于一个对象
• +每个标签都能改名，所以不止用于起重机
• +有报警和达标事件，还能导出和复位

需要留意

• –围绕起重机周期设计：换成别的设备，大部分内容都得改名
• –预览图里朝向目标 30 的进度条看不到任何填充，最下面那张卡片也被截掉了

可绑定属性

• liftingTimeSeconds
• interLoadTimeSeconds
• averageCycleSeconds
• maxCycleSeconds
• minCycleSeconds
• liftingHistory
• loadTypes
• labelLiftsPerHour
• labelDistribution
• accentColor1
• accentColor2
• accentColor3
• backgroundColor

Crane Logistics KPI

免费 · WinCC Unified & V8 · CWC (.zip)

↓查看并免费下载✦用 AI 编辑

03带设定值和报警限值的过程值首选

Process Status Indicator

这款的思路像个仪表工程师。表头写着“PT-104 Discharge Pressure”，带一个量程徽标（“0.0 – 100.0 bar”）。下面是大号数字的 76.6 bar，右侧是橙色的“Setpoint 70.0 bar”。一条水平条用橙色填充到当前值，一个三角形标出设定值，刻度末端是颜色更深的琥珀色和红色区段。底部三个框把限值写得明明白白：下限 0.0 bar、琥珀色的高警告 80.0 bar 和红色的高报警 90.0 bar。

产品说明列出了 11 个属性中的 9 个名字：tagId 和 descriptor 标识测量点，unit、minValue 和 maxValue 定义刻度，warningThreshold 和 alarmThreshold 设定限值，decimalPlaces 设定分辨率，backgroundColor 设定主题。超限时触发 AlarmTriggered 事件，setValue 和 setSetpoint 方法让脚本可以更新它。一句话：给任何模拟量测量配的迷你面板，偏离设定值多少一眼就能看出来。

我们喜欢的

• +数值、设定值和限值放在一起，位号和描述符是 ISA 风格
• +警告区和报警区直接画在条上
• +报警事件可供你的脚本使用

需要留意

• –预览图里有一圈蓝色虚线框住了数值行，还穿过了“Setpoint 70.0 bar”这行字
• –产品说明没写数值和设定值对应的属性名（倒是有 setValue 和 setSetpoint 方法）：绑定之前先查看接口列表

可绑定属性

• tagId
• descriptor
• unit
• minValue
• maxValue
• warningThreshold
• alarmThreshold
• decimalPlaces
• backgroundColor

Process Status Indicator

免费 · WinCC Unified & V8 · CWC (.zip)

↓查看并免费下载✦用 AI 编辑

04废品与不合格品计数首选

Rejected Parts Counter

一个会讲故事的计数器。卡片采用暖色深色调和琥珀色强调，标出工位名（“REJ-MONITOR-04”），带一个“PCS”单位徽标，用大号琥珀色数字显示累计不合格数（142），旁边一个小标签显示最近的速率（“+4 pcs/5m”）。下面是一张题为“Accumulation Trend (Step)”的阶梯线图，在 18:33 到 18:42 之间从 124 爬升到 142。看一眼，你不仅知道有多少件进了废品箱，还知道情况是不是在变糟。

产品说明写了 11 个属性，列出了其中 10 个名字。rejectCount 是主数值，deltaRate 是最近的增量，stationTag 标识工位，maxHistoryPoints 设定趋势缓冲区有多深，metricLabel、unitText 和 chartCaption 用来改文字，accentColor、panelColor 和 backgroundColor 设定配色。它又高又窄，很适合放在质量画面或线尾画面的侧栏里。

我们喜欢的

• +计数、速率和历史集于一张卡片
• +阶梯线图很适合计数器（不会画出虚假的斜坡）
• +所有文字都能改名，也可用于良品、停机或报警计数

需要留意

• –预览图里工位名折成了两行，图表标题也挤到了纵轴顶端的数值
• –竖长版式：需要的是一列，而不是一行

可绑定属性

• rejectCount
• deltaRate
• stationTag
• maxHistoryPoints
• metricLabel
• unitText
• chartCaption
• accentColor
• panelColor
• backgroundColor

Rejected Parts Counter

免费 · WinCC Unified & V8 · CWC (.zip)

↓查看并免费下载✦用 AI 编辑

05运行小时与维护首选

Machine Hour Counter Card

给维护团队准备的。一张干净的白色卡片在机器人图标旁写着设备名（“Robot CRX10 Fanuc”），用深色大号数字显示“Accumulated hours”（12477 h），底部是一条状态备注（“Check joint 3 lubrication”）和一个“Reset”按钮。就像你会贴在设备上的那块小时计，再给下一班留了张便条。

据产品说明，小时数直接来自 PLC 的一个 DINT 值；机器运行时，isRunning 会在卡片边框上点亮一圈动画渐变光晕。iconType 选择设备符号，resetButtonLabel 给按钮改名，按钮会触发 OnReset 事件，darkMode 在深色和浅色之间切换，backgroundColor 匹配你的画面。triggerReset 方法也能让脚本来复位。适用于电机、泵、压缩机或机器人的预防性维护画面。

我们喜欢的

• +清晰的小时计，带设备名和维护备注
• +复位按钮有自己的事件，直接接你的 PLC 逻辑
• +深色和浅色两种模式

需要留意

• –产品说明没给出小时数、标题和备注这几个属性的确切名称：请查看接口列表，并为复位要写入的变量取消勾选“只读”（Read only）
• –已发布的预览图里看不到 isRunning 的光晕效果

可绑定属性

• isRunning
• iconType
• resetButtonLabel
• darkMode
• backgroundColor

Machine Hour Counter Card

免费 · WinCC Unified & V8 · CWC (.zip)

↓查看并免费下载✦用 AI 编辑

06车间总览首选

Machine Status Grid

整个车间，一屏看尽。在“PLANT FLOOR OVERVIEW”标题下，是一个三乘三的方块网格，每块都有一盏亮面指示灯、一个编号（M01 到 M09）、一个名称和一个状态：从“Extruder 01”到“Robotic Arm 06”的六台机器以绿色显示 RUNNING，“Pump Station 07”和“Cooling Tower 08”以黄色显示 WARNING，“Main Generator 09”以红色显示 STOPPED。每个方块左边缘还有一道彩色边，所以哪怕在大屏上，异常的那台也会一下跳出来。

它的产品说明重点在布局。Machine Count 设定显示多少个方块，Title Size、Element Size、Indicator Size 和 ID Label Size 调整字号和指示灯，Background Color 适配你的主题。这类控件就是放在 OEM 设备或产线起始画面上的，让操作员在打开任何别的画面之前，先知道该往哪儿看。

我们喜欢的

• +整条产线的红黄绿状况一目了然
• +机器数量和尺寸都可调
• +沉稳、高对比度的深色设计

需要留意

• –产品说明只列了布局属性：没说明每台机器的名称和状态如何喂入，规划变量之前请先读附带的文档
• –预览图里文字偏小，每个方块大部分是空白

可绑定属性

• Machine Count
• Title Size
• Element Size
• Indicator Size
• ID Label Size
• Background Color

Machine Status Grid

免费 · WinCC Unified & V8 · CWC (.zip)

↓查看并免费下载✦用 AI 编辑

07状态历史首选（可用率时间轴）

Status Bar

一个带记忆的状态指示。标题是“Status Bar – Process State Timeline”，表头有时钟、45 分钟窗口和事件计数，一个写着“State 1 – Active for 01:36”的小标签，下面是一条由彩色色块组成的宽时间轴：绿色、一大段红色、灰色，然后又是绿色，每段都标着时长。图例解释了颜色：State 1 运行/正常，State 2 报警/停止，State 3 空闲/手动，以及 Unknown。

据产品说明，status 属性每变化一次，它就新增一段色段；它保留一个由 maxHistoryMinutes 设定的滚动窗口，并按 updateInterval 让当前色段平滑增长。showTooltips 在鼠标悬停时显示每段的开始、结束和时长，state1Label 到 unknownStateLabel 用来给各状态改名，barHeight 和 borderRadius 调整外形，backgroundColor 匹配你的主题。OnStatusChanged 和 OnHistoryCleared 与你的脚本通信，resetHistory 和 exportHistoryJson 管理记录。

我们喜欢的

• +不只显示当前状态，还显示机器在每种状态下待了多久
• +悬停提示显示开始、结束和时长
• +历史可导出为 JSON，用于报表

需要留意

• –产品说明描述的是一条根据收到的变化、在滚动窗口内构建的时间轴；没提到读取 WinCC 归档
• –预览图里色段内的时长标签非常小

可绑定属性

• status
• maxHistoryMinutes
• updateInterval
• showTooltips
• state1Label
• unknownStateLabel
• barHeight
• borderRadius
• backgroundColor

Status Bar

免费 · WinCC Unified & V8 · CWC (.zip)

↓查看并免费下载✦用 AI 编辑

08信号灯塔首选（塔灯）

Status Lights

每台机器顶上那根塔灯的数字孪生。一座细长的灯塔立在金属灯杆上，五段从上到下依次是白、蓝、绿、琥珀和红，点亮的段会发光，其余保持暗淡。预览图里白色和绿色段亮着。操作员一看就懂，因为他们每天都看着真家伙。2026 年 11 月它有 9 次下载和一条五星评价。

据产品说明，它支持不限数量的层级，在 segments 数组中定义。opacityInactive 设定熄灭段的暗淡程度，showLabels 给每一层加上文字，borderWidth、borderColor 和 backgroundColor 调整外框。setSegmentState、setSegmentColor 和 setSegmentStatus 方法让脚本切换各段和闪烁，SegmentClicked 事件可以用来触发确认。

我们喜欢的

• +车间里任何人都一眼认得
• +段数要多少有多少，支持闪烁
• +每段都有点击事件

需要留意

• –图库第一张图里所有段都是熄灭的；我们展示的是第二张亮灯的
• –靠数组和方法驱动，而不是每盏灯一个布尔量：得准备一小段脚本

可绑定属性

• segments
• showLabels
• opacityInactive
• borderWidth
• borderColor
• backgroundColor

Status Lights

免费 · WinCC Unified & V8 · CWC (.zip)

↓查看并免费下载✦用 AI 编辑

09极简数值卡片首选

Square Info Card

有时候少即是多。一张圆角的方形深蓝色卡片，中间是一个小标签（“TEMPERATURE”）和一个数值（“78.3 °C”）。别的什么都没有。产品说明承诺它在任何尺寸下都保持 1:1 的比例，并带有平滑的悬停动画，所以用来拼一排同样的方块非常整齐。

产品说明写了 8 个属性，名字全部列出：title 和 value 承载内容，accentColor 给顶部的高亮条上色，cardColor 和 backgroundColor 营造层次，titleColor 和 valueColor 负责文字颜色，borderRadius 让圆角更柔或更硬。OnCardClicked 用来打开详情弹窗，updateDisplay 让脚本刷新它。

我们喜欢的

• +干净的方形版式，排成网格很整齐
• +接口简短，八个属性全部有名字
• +带点击事件，方便导航

需要留意

• –预览图里带了一个模拟数值的演示面板，所以卡片本身显得很小
• –预览图里顶部的强调条只是一条几乎看不见的细线

可绑定属性

• title
• value
• accentColor
• cardColor
• titleColor
• valueColor
• borderRadius
• backgroundColor

Square Info Card

免费 · WinCC Unified & V8 · CWC (.zip)

↓查看并免费下载✦用 AI 编辑

10单个状态 LED 首选

Status LED

榜单里最小的控件，在密集画面上却最有用。一盏带柔和光晕的亮面圆形 LED，下面一个标签。它只做一件事：告诉操作员某样东西是开还是关，不用他去读字。

产品说明列出了全部 7 个属性的名字。isActive 切换状态，activeLabel 和 inactiveLabel 分别设定两种状态的文字，glowEnabled 加上有节奏的脉动，glowIntensity 让它在强光下的控制室里也看得见，borderThickness 和 backgroundColor 调整外观。toggleState 和 setState 方法以及 StateChanged 事件覆盖了脚本这一侧。

我们喜欢的

• +输入一个布尔量，输出一个清晰信号
• +需要引起注意的状态可选脉动效果
• +体积极小，适合总览画面和流程图画面

需要留意

• –预览图里是一盏标着“STOPPED”的绿色 LED：在信任默认值之前，先确认每种状态用的是什么颜色
• –预览图是白色背景：深色画面请设置 backgroundColor

可绑定属性

• isActive
• activeLabel
• inactiveLabel
• glowEnabled
• glowIntensity
• borderThickness
• backgroundColor

Status LED

免费 · WinCC Unified & V8 · CWC (.zip)

↓查看并免费下载✦用 AI 编辑

荣誉提名：另外两款值得一看的指示控件

两款控件因为预览图的原因没挤进前十。点击缩略图即可打开产品页面。

• 

  State List Indicator

  一张标题为“System Status”的浅色列表，列有 System Ready、Process Running、Emergency Stop 和 Cooling Active，每项都有状态徽标，另有当前激活状态计数器和 StateClicked 事件。预览图是一张很小的列表，放在一大块几乎全空的画布里。

  查看产品 →
• 

  Sensor Status Card

  一张紧凑的浅色传感器卡片，用一个圆环显示以 % 表示的光照度，带图标的状态、一个自动模式徽标，以及带 resetTimer 方法的运行计时器。预览图里的文字部分是西班牙语，卡片也非常小。

  查看产品 →

如何在 WinCC Unified（以及 WinCC V8）中使用 KPI 卡片 Custom Web Control

精简版，留给已经选好卡片的你。我们的 Custom Web Control 指南配有示意图和截图，每一步都讲得很细。

1. 1

   下载 ZIP

   打开产品页面，用免费账号登录，然后下载控件。下载的 ZIP 中包含说明文档，以及名为 {GUID}.zip 的控件包：你需要的是这个内部文件。

2. 2

   复制到你的 TIA Portal 项目中

   把 {GUID}.zip 文件保持压缩状态，复制到项目文件夹下的 UserFiles\CustomControls 中（如果这两个文件夹不存在，就自己新建）。不要解压。

3. 3

   刷新“我的控件”并拖到画面上

   在 TIA Portal 中，打开工具（Tools）任务卡，展开“我的控件”（My controls）窗格，然后点击更新按钮。控件会出现在列表中：把它拖到画面上并调整大小。

4. 4

   绑定并测试属性

   选中控件，在巡视窗口（Inspector window）中打开“属性 → 属性 → 接口”（Interface）。先把主数值（rejectCount、isActive、status……）绑定到一个内部变量，再加一个写入同一变量的 I/O 域，然后启动 Runtime：改变数值，看卡片、颜色和限值如何响应。对于控件会写回的变量，比如复位，请取消勾选“只读”（Read only）。一切正常后，再换成真实的 PLC 变量。

5. 5

   在 WinCC V8 中

   本文所有入选控件的产品页面都标注了兼容 WinCC V8。控件包是同一个；在该环境中导入和组态 Custom Web Controls 时，请按照 WinCC V8 的文档操作。

进阶提示：每种颜色的含义只定义一次，然后处处沿用。如果在 Machine Status Grid 上绿色代表运行，那么在 Status LED 和 Status Lights 上也应代表运行；琥珀色的指标块也应始终代表警告。把颜色属性（accentColor、trendColor……）绑定到整张画面统一的状态逻辑上，并按 ISA-101 的建议，把鲜艳的颜色留给需要引起注意的东西。

常见问题

我们的结论

如果只下载一个，就选 KPI Indicator：大号数值、单位和趋势箭头装在一个指标块里，几分钟就能绑好。要完整的 KPI 仪表板，选 Crane Logistics KPI；带设定值和限值的测量，选 Process Status Indicator；统计废品，选 Rejected Parts Counter；做维护，选 Machine Hour Counter Card；一眼看清整个车间，选 Machine Status Grid；看一段时间内的可用率，选 Status Bar；要塔灯，选 Status Lights；要极简指标块，选 Square Info Card；只要一个简单的开/关信号，就选 Status LED。

如果你的 KPI 需要一张这些都画不出来的卡片（现实中总是如此），别忘了，做出它们的那个生成器，离你只有一次点击。