这是一个概念满天飞的时代，工程师们一边做着项目，一边担心跟不上技术的更新迭代。而如何高效解决当下的项目问题，始终是工程师们面临的首要任务。今天就为大家分享一个小例子。让我们看看如何借助 IT 技术更好解决 OT 项目中遇到的问题。

背景信息

所谓：

• OT(Operation Technology) 是操作运行技术
• IT(Information Technology) 是信息技术

OT 与 IT 融合简单来讲就是将两者结合起来，使企业的运转更加高效。深入的探讨，超出笔者的能力范围。但是有这个理解也可以帮助我们扩展解决问题的思路。比如：理想趋势和实际趋势的比较问题。我们就可以完全借助于 IT 的现有技术，在 SCADA 软件中轻松实现。先来看个运行效果图：

视频中的功能是在西门子全新的可视化平台 WinCC Unified 中，通过自定义 Web 控件（Custom Web Control简称:CWC）的方式集成 ECharts 实现的。其中：

• 自定义 Web 控件(CWC)是 WinCC Unified 提供的一个选项。使用该选项，用户可以基于 Web 技术创建新控件或者加载现有的外部控件到 WinCC Unified 项目中
• ECharts 是一款基于 JavaScript 的数据可视化图表库。提供直观、生动、可交互的数据可视化图表。最初由百度团队开源，现为Apache基金会的项目

在 WinCC Unified 中可以通过集成 CWC 的方式把 ECharts 集成到项目中。

下面将展开介绍在 WinCC Unified 项目中集成 CWC 的组态步骤，以及实现 CWC 和 WinCC Unified 运行系统之间数据交互的关键点。最终发布的 CWC 将支持以下功能：

• 显示两组数据的对比效果
• 定义图表显示的颜色
• 设定图表显示的样式为曲线或棒图
• 定义理想值和当前值的数据源
• 定义位置信息的数据源

开发环境如下：

完成开发需要具备的知识点：

• WinCC Unified 的组态
• CWC 的背景知识
• Microsoft Visual Studio Code（简称：VS Code）的简单使用
• 简单了解 HTML5 和 JavaScript 的网页编程

组态步骤

2.1 创建CWC文件夹结构

创建一个文件夹。

该文件夹中包含三部分内容，分别是：

• json文件 "manifest.json"，用于编辑控件发布的信息
• 文件夹 "assets"，用于存放CWC在WinCC Unified中显示的图标
• 文件夹 "control"。该文件夹中包含一个js文件夹和一个index.html文件。在js文件夹中包含 "webcc.min.js" 和 "echarts.min.js "二个需要引用的文件。此外，还需要创建一个 js 文件（本例中为trends.js），用于实现数据的连接和交互功能

使用 VS Code 打开该文件夹，看到的结构如下图所示。

其中：

• "webcc.min.js"文件包含WinCC Unified 的接口信息。建立连接后，便可以在应用中访问"manifest.json"文件中定义的数据。通过SIOS链接可以下载"webcc.min.js"文件。
• "echarts.min.js"文件可以通过 ECharts 的官方网站下载
• "trends.js"为用户自己开发的 JavaScript 脚本。用于实现WinCC Unified 和 ECharts 之间的数据交互

2.2 manifest.json 文件

在 VS Code 中编辑 manifest.json 文件。

manifest.json 文件包含 mver 和 control 两部分内容。其中 mver 为 manifest 的版本信息。control 中包含控件安装和使用的必要信息。Control 部分：guid 为 WinCC Unified 中引用的 CWC的名称（必须符合8-4-4-4-12 模式的命名规则）。如下图所示。

为了实现 CWC 和 WinCC Unified 程序之间的双向通讯。

根据需要可以在 Control 部分设置：methods、events或properties。本例中仅需要定义 properties 参数即可。
在 properties 中定义的接口有：CurrentData、DisplayType、IdeaData 和 Position。其中 DisplayType中包含：CurrentColor、CurrentTitle、CurrentType、IdeaColor、IdeaTitle 和 IdeaType。最终当项目中引用控件时，在属性界面中看到的CWC接口如下图所示。

2.3 Index.html 文件

Index.html 文件是 CWC 的入口。在 VS Code 中编辑 Index.html文件。为了交换数据需要在这里建立 ECharts 到 WinCC Unified 服务的连接。因此这里需要引用 js 文件夹中的文件。本例中调用的 js 文件如下所示：

通常在部分引用。

此外 ECharts 推荐在 HTML 中定义有宽度和高度的父容器。因此，本例中在 HTML 中先定义了一个