WinCC Unified实现系统时间显示的两种方法对比

1. WinCC Unified中实现系统日期时间显示的两种方法

在工业自动化项目中，HMI系统的时间显示功能看似简单，实则至关重要。作为西门子新一代的HMI开发平台，WinCC Unified虽然功能强大，但在某些基础功能上却出人意料地需要开发者自行实现。最近我在一个大型产线监控项目中就遇到了这个需求：需要在主操作画面上实时显示系统日期和时间。

1.1 为什么WinCC Unified没有内置时间控件？

与经典WinCC不同，WinCC Unified基于现代化的架构设计，移除了许多传统控件，转而鼓励开发者使用更灵活的脚本实现。这种设计理念带来两个直接影响：

1. 界面元素更加轻量化，减少了不必要的内置功能
2. 开发者需要掌握JavaScript等现代技术来实现特定功能

这种改变对于习惯传统组态方式的工程师来说可能需要适应期，但也提供了更大的自定义空间。下面我将详细介绍两种经过实际项目验证的实现方案。

2. 方法一：使用文本框元素实现动态时间显示

2.1 基础配置步骤

首先在画面编辑器中添加一个文本框元素，这个看似简单的步骤有几个关键点需要注意：

1. 右键点击画面空白处，选择"添加对象"→"基本对象"→"文本框"
2. 建议将文本框的"外观"→"边框"设置为无，这样更符合现代UI设计趋势
3. 调整字体大小和颜色，确保在不同分辨率下都能清晰可见

提示：在布局阶段就设置好文本框的最终尺寸，避免后期因内容变化导致布局错乱。

2.2 脚本编写与动态化配置

右键点击文本框选择"动态化"，在弹出的属性窗口中找到"文本"属性，点击右侧的闪电图标选择"脚本"。这里我们需要编写一个返回当前时间的函数：

javascript复制function GetCurrentDateTime() {
    var now = new Date();
    
    // 格式化日期部分
    var year = now.getFullYear();
    var month = (now.getMonth() + 1).toString().padStart(2, '0');
    var day = now.getDate().toString().padStart(2, '0');
    
    // 格式化时间部分
    var hours = now.getHours().toString().padStart(2, '0');
    var minutes = now.getMinutes().toString().padStart(2, '0');
    var seconds = now.getSeconds().toString().padStart(2, '0');
    
    // 组合成完整格式
    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
}

这段脚本的关键点在于：

• 使用JavaScript的Date对象获取系统时间
• 通过padStart方法确保单数字显示为两位（如1月显示为01）
• 最终返回"YYYY-MM-DD HH:MM:SS"格式的字符串

2.3 触发器设置与性能优化

点击脚本编辑器中的小闹钟图标添加触发器，设置为"T1s"（每秒触发一次）。这里有几个实践经验值得分享：

1. 触发周期选择：

   • 对于只需要分钟精度的场景，可以设置为"T1M"减少系统负载
   • 高精度要求的场景保持"T1s"，但要注意这对低配硬件可能造成压力

2. 脚本优化技巧：

   javascript复制// 缓存DOM元素引用
   var timeDisplay = document.getElementById('datetimeDisplay');
   
   function updateTime() {
       var now = new Date();
       timeDisplay.textContent = formatDateTime(now);
   }
   
   // 使用requestAnimationFrame实现平滑更新
   function animationLoop() {
       updateTime();
       requestAnimationFrame(animationLoop);
   }
   
   // 启动动画循环
   animationLoop();
   

   这种优化方式可以减少内存分配，提高执行效率。

3. 时区处理：
   在跨国项目中，可能需要考虑时区转换：

   javascript复制function GetCurrentDateTime() {
       var now = new Date();
       // 转换为目标时区（如东八区）
       var offset = 8; // 北京时间
       now.setHours(now.getHours() + offset);
       // 后续格式化代码...
   }
   

3. 方法二：使用IO域元素实现专业时间显示

3.1 IO域的基础配置

IO域是工业HMI中更专业的显示控件，配置步骤如下：

1. 在画面中添加IO域元素
2. 右键属性中设置：
   • 模式：输出（只读）
   • 输出格式：选择"日期时间"或自定义格式
   • 外观：根据项目UI规范调整

IO域相比文本框的优势在于：

• 内置了更完善的数据验证和格式化功能
• 提供标准化的工业外观
• 支持更丰富的交互功能（如弹出键盘等）

3.2 脚本实现与格式控制

IO域的脚本实现与文本框类似，但可以利用其特有的格式控制功能：

javascript复制function GetIOFieldDateTime() {
    var now = new Date();
    // 返回标准ISO格式，由IO域自身格式化
    return now.toISOString(); 
}

在IO域的"属性"→"常规"→"输出格式"中，可以设置多种预定义格式：

• 短日期（如2023-06-15）
• 长日期（如2023年6月15日）
• 时间（如14:30:45）
• 自定义（如"yyyy年MM月dd日 HH时mm分ss秒"）

注意：IO域的格式设置会覆盖脚本返回值的显示方式，两者需要配合使用。

3.3 高级应用：多语言时间显示

在国际化项目中，可能需要根据用户语言设置显示不同格式的时间：

javascript复制function GetLocalizedDateTime() {
    var now = new Date();
    var lang = GetRuntimeLanguage(); // 获取运行时语言设置
    
    switch(lang) {
        case "zh-CN":
            return now.toLocaleString('zh-CN');
        case "en-US":
            return now.toLocaleString('en-US');
        case "de-DE":
            return now.toLocaleString('de-DE');
        default:
            return now.toISOString();
    }
}

4. 两种方法的对比与选型建议

4.1 功能对比表

4.2 选型场景建议

根据项目经验，我建议：

1. 选择文本框方案当：

   • 需要完全自定义时间格式和外观
   • 项目对性能要求不高
   • 需要实现特殊效果（如动画、颜色变化等）

2. 选择IO域方案当：

   • 项目需要符合工业标准
   • 需要快速实现且保持UI一致性
   • 对性能有较高要求
   • 需要利用IO域的其他功能（如输入验证）

5. 常见问题与解决方案

5.1 时间显示不更新

现象：画面上的时间显示静止不动
排查步骤：

1. 检查触发器是否设置正确（应为周期触发）
2. 确认脚本没有报错（通过浏览器开发者工具查看）
3. 检查是否有其他脚本覆盖了该元素的内容

5.2 格式不一致

现象：不同电脑上显示的时间格式不同
解决方案：

1. 在脚本中强制指定格式，而不是依赖本地化设置
2. 使用固定时区（如UTC+8）
3. 统一使用ISO格式，由IO域控件负责最终显示

5.3 性能问题

现象：HMI运行缓慢，特别是当画面元素较多时
优化方案：

1. 降低更新频率（如改为每分钟更新）
2. 使用更高效的脚本实现（如避免在每次调用时创建新对象）
3. 考虑使用Web组件等更现代的实现方式

6. 扩展应用：基于时间显示的进阶功能

掌握了基础时间显示后，可以进一步实现更强大的功能：

6.1 运行时间统计

javascript复制var startTime = new Date();

function GetUptime() {
    var now = new Date();
    var uptime = now - startTime;
    
    var days = Math.floor(uptime / (1000 * 60 * 60 * 24));
    var hours = Math.floor((uptime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((uptime % (1000 * 60 * 60)) / (1000 * 60));
    
    return "运行时间: " + days + "天 " + hours + "小时 " + minutes + "分钟";
}

6.2 时段相关功能

javascript复制function CheckShiftTime() {
    var now = new Date();
    var hours = now.getHours();
    
    if(hours >= 8 && hours < 20) {
        return "白班模式";
    } else {
        return "夜班模式";
    }
}

6.3 定时任务触发

javascript复制var lastMinute = -1;

function CheckMinuteChange() {
    var now = new Date();
    var currentMinute = now.getMinutes();
    
    if(currentMinute != lastMinute) {
        lastMinute = currentMinute;
        // 执行每分钟任务
        if(currentMinute === 0) {
            // 整点特别任务
        }
    }
}

在实际项目中，时间显示虽然是小功能，但良好的实现能显著提升用户体验。我建议在项目初期就确定时间显示方案，避免后期统一修改带来的额外工作量。对于复杂的项目，可以考虑将时间显示封装成自定义控件，方便复用和维护。