FUXA项目中客户端脚本获取历史标签数据的解决方案-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_07766/article/details/148526148

FUXA项目中客户端脚本获取历史标签数据的解决方案

FUXA Web-based Process Visualization (SCADA/HMI/Dashboard) software 项目地址: https://gitcode.com/gh_mirrors/fu/FUXA

问题背景

在FUXA项目开发过程中，开发者经常需要在客户端脚本中获取历史标签数据用于图表展示等场景。一个典型需求是在图表上展示24小时内每小时记录的数据点，形成完整的日数据趋势图。

问题现象

开发者在使用$getHistoricalTags系统函数时遇到了问题，该函数在客户端脚本中无法正常工作，返回undefined值，而在服务器端脚本中却能正常运行。具体表现为：

在客户端脚本中调用$getHistoricalTags获取不到数据
同样的函数在服务器端脚本中可以正确返回历史数据
客户端脚本中使用$getTag获取当前标签值则工作正常

技术分析

经过深入分析，发现这个问题主要涉及FUXA客户端脚本的异步处理机制。在JavaScript中，许多数据获取操作都是异步执行的，特别是涉及到网络请求或数据库查询的操作。

$getHistoricalTags函数本质上是一个异步操作，因为它需要从服务器获取历史数据记录。在客户端脚本中直接调用而不使用await关键字，会导致脚本在数据返回前就继续执行后续代码，从而得到undefined结果。

解决方案

正确的做法是在客户端脚本中使用await关键字来等待异步操作完成：

// 正确用法：添加await关键字
let valores = await $getHistoricalTags(
    ['t_9ab544e6-9b844ef9'], 
    haceUnDia, 
    tiempoActual
);

完整示例代码

以下是经过修正后的完整客户端脚本示例，用于获取24小时历史数据并在图表中展示：

// 获取当前时间戳
let tiempoActual = Date.now();
// 计算24小时前的时间戳
let haceUnDia = tiempoActual - 86400000;

// 异步获取历史数据
try {
    let valores = await $getHistoricalTags(
        ['t_9ab544e6-9b844ef9'], 
        haceUnDia, 
        tiempoActual
    );
    
    // 处理获取到的历史数据
    let valoresY = valores['t_9ab544e6-9b844ef9'].map(item => item.y);
    
    // 准备图表数据
    var lines = [];
    var line = {};
    const count = 24;
    var y = [];
    var x = [];
    
    for (var i = 0; i < count; i++) {
        y.push(valoresY[i] || 0);  // 处理可能的空值
        x.push(i);
    }
    
    line['y'] = y;
    line['x'] = x;
    lines.push(line);
    
    // 更新图表
    $invokeObject('chart_1', 'setCustomValues', lines);
} catch (error) {
    console.error("获取历史数据时出错:", error);
}