# WinCC Unified中的WebCC自定义Web报表控件

**Repository Path**: jixaonian/WebCC-In-WinCC-Unified

## Basic Information

- **Project Name**: WinCC Unified中的WebCC自定义Web报表控件
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-07
- **Last Updated**: 2026-06-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Report Table Custom Web Control (CWC)

## 简介
**Report Table Custom Web Control** 是一个基于 Siemens WinCC Unified Custom Web Control 框架开发的自定义控件。它主要用于在 HMI 画面中展示动态数据表格，支持通过 Tabulator 库进行高性能的数据渲染、排序和格式化。

该控件特别适用于展示历史数据记录（Logged Tags），能够自动将多个标签的时间序列数据转换为行列对应的表格格式，并支持多种格式的数据导出（CSV, Excel, PDF）。

## 主要功能
- **动态表格渲染**: 基于 [Tabulator](http://tabulator.info/) 库，提供流畅的表格交互体验。
- **智能数据转换**: 内置 `SetTableData` 方法，可自动将 WinCC 记录变量（Logged Tags）的 JSON 数据结构转换为适合表格展示的行列结构。
- **多格式导出**: 支持一键导出当前表格数据为 CSV, XLSX (Excel), PDF 格式。
- **时间范围查询**: 提供前端日期选择器，允许用户指定起始和结束时间来获取特定时间段的数据。
- **设计时预览**: 支持在 TIA Portal 设计模式下显示模拟数据，方便布局调试。

## 技术栈
- **核心框架**: Siemens WebCC (Custom Web Control)
- **表格引擎**: Tabulator JS
- **数据处理**: SheetJS (xlsx.full.min.js) - 用于 Excel 导出
- **PDF生成**: jsPDF & jsPDF-AutoTable - 用于 PDF导出
- **语言**: JavaScript (ES6+)

## 项目结构
```text
{GUID}/
├── manifest.json              # CWC 清单文件，定义身份、契约(API)和元数据
├── CWC_manifest_Schema.json   # 清单文件的 JSON Schema
├── assets/
│   └── siemens.ico            # 控件图标
└── control/
    ├── index.html             # 控件主页面，包含 UI 布局和依赖引用
    ├── code.js                # 核心业务逻辑，包括 WebCC 初始化、API 实现
    ├── webcc.min.js           # WebCC 运行时依赖 (Mandatory)
    ├── dist/
    │   ├── js/tabulator.min.js
    │   └── css/tabulator.css
    ├── xlsx.full.min.js       # SheetJS 库
    ├── jspdf.umd.min.js       # jsPDF 库
    └── jspdf.plugin.autotable.min.js # jsPDF AutoTable 插件
```

## API 接口定义

本控件通过 [manifest.json](file://c:\Users\Z0057W4C\Documents\{ABCD1234-0001-FFFF-7988-F00000001F00}\manifest.json) 和 [code.js](file://c:\Users\Z0057W4C\Documents\{ABCD1234-0001-FFFF-7988-F00000001F00}\control\code.js) 暴露以下接口供 TIA Portal 脚本调用。

### 1. 方法 (Methods)

#### `SetTableData(tableDataJSON)`
**描述**: 设置表格数据。通常在使用 `GetTableData` 事件从后端获取数据后调用此方法。该方法会自动解析复杂的记录变量结构并重新绘制表格。
**参数**:
- `tableDataJSON` (string): JSON 字符串，包含记录变量的原始数据结构。
  - *预期结构*: `{ "TagName": { "Values": [ { "TimeStamp": ..., "Value": ... } ] } }`

#### `DrawTable(columStyleString, tableDataString)`
**描述**: 手动重绘表格，允许完全自定义列样式和数据。
**参数**:
- `columStyleString` (string): Tabulator 列配置对象的 JSON 字符串。
- `tableDataString` (string): 表格行数据数组的 JSON 字符串。

#### `ExportData(type, filename)`
**描述**: 触发表格数据导出。
**参数**:
- `type` (string): 导出格式，支持 `'csv'`, `'xlsx'`, `'pdf'`, `'json'`。
- `filename` (string): 导出文件的名称（不含扩展名）。

### 2. 事件 (Events)

#### `GetTableData`
**描述**: 当用户点击界面上的“获取数据”按钮时触发。HMI 脚本应订阅此事件以执行数据查询逻辑。
**返回参数 (Arguments)**:
- [headerdata]: 表头/标签名称数组。
- [strdate]: 起始时间字符串 (格式: `yyyy-MM-dd HH:mm:ss`)。
- [enddate]: 结束时间字符串 (格式: `yyyy-MM-dd HH:mm:ss`)。

*注意：在 HMI 脚本中处理完数据查询后，需调用 `SetTableData` 方法将结果回传给控件。*

### 3. 属性 (Properties)

#### `TableDataString`
- **类型**: String
- **默认值**: `[{"name":"Donald","salary":"2200"}]`
- **描述**: 绑定表格数据的 JSON 字符串。当此属性在 TIA Portal 中变化时，表格会自动更新。

#### `ColumnStyleString`
- **类型**: String
- **默认值**: `[{"title":"Name", "field":"name", ...}, ...]`
- **描述**: 绑定列样式配置的 JSON 字符串。定义列标题、字段映射、排序类型等。

## 使用指南

### 1. 安装与部署
1. 确保项目中已包含所有必要的 JS/CSS 依赖文件。
2. 在 TIA Portal 中导入该 CWC 包。
3. 将控件拖放到 HMI 画面中。

### 2. 数据绑定流程 (推荐方式)
为了实现动态历史记录查询，建议采用以下交互流程：

1. **用户操作**: 用户在控件界面选择起始/结束时间，点击“获取数据”。
2. **事件触发**: 控件触发 `GetTableData` 事件，传递时间范围和标签列表。
3. **HMI 脚本处理**:
   ```javascript
   // HMI 脚本示例 (VBScript 或 JavaScript)
   function OnGetTableData(headerdata, strdate, enddate) {
       // 1. 调用 PLC 或内部函数获取历史记录
       var result = GetHistoricalData(headerdata, strdate, enddate);
       
       // 2. 将结果转换为 JSON 字符串
       var jsonResult = JSON.stringify(result);
       
       // 3. 调用控件方法更新表格
       MyCustomControl.SetTableData(jsonResult);
   }
   ```
4. **控件更新**: `SetTableData` 接收数据，自动转换格式并刷新 UI。

### 3. 静态数据绑定
如果只需展示静态或简单数据，可以直接在 TIA Portal 属性视图中绑定 `TableDataString` 和 `ColumnStyleString` 属性到 HMI 变量。

## 开发注意事项
- **依赖加载**: [webcc.min.js] 必须在其他脚本之前加载（已在 [index.html]中配置）。
- **实例管理**: 代码中使用 `window.currentTableInstance` 全局保存 Tabulator 实例，以确保导出功能和其他操作能正确访问表格对象。
- **日期格式**: 前端日期输入框使用 `datetime-local`，在传递给后端前会转换为 `yyyy-MM-dd HH:mm:ss` 格式。
- **内存管理**: 在 `DrawTable` 和 `SetTableData` 执行完毕后，临时变量会被清空以释放内存。

## 版本信息
- **控件版本**: 1.00
- **Manifest 版本**: 1.2.0
- **作者**: 8JXNCOM

## WinCC使用配合代码

   ```javascript
    export async function Report_table_CustomWebControl_1_OnGetTableData(item, TransData) {
        //HMIRuntime.Trace("Time " + TransData.headerdata + " | " + TransData.strdate + " | " + TransData.enddate);
        let hdata=TransData.headerdata.toString();  

        let logTagSet = HMIRuntime.TagLogging.CreateLoggedTagSet(hdata.split(","));
        //logTagSet = HMIRuntime.TagLogging.CreateLoggedTagSet(["HMI_Tag_1:记录变量_1", "HMI_Tag_2:记录变量_1", "HMI_Tag_3:记录变量_1"]);

        let end = new Date(TransData.enddate);
        let begin = new Date(TransData.strdate);
        let loggedTagMap =await logTagSet.Read(begin, end, false);

        //HMIRuntime.Trace("table" + hdata + " | " + begin + " | " + end);

        const resultArray = [];
        for (let loggedTag of loggedTagMap) {
            // 提取单个标签的数据
            const tagData = {
            Name: loggedTag.Name,
            Error: loggedTag.Error,
            Values: []
            };

            // 遍历 Values 集合
            for (let loggedTagValue of loggedTag.Values) {
            tagData.Values.push({
                Value: loggedTagValue.Value,
                Quality: loggedTagValue.Quality,
                TimeStamp: new Date(loggedTagValue.TimeStamp),
                Flags: loggedTagValue.Flags
                // 说明字段通常不需要传输，如需可加上
            });
            }

            resultArray.push(tagData);
            
            // 调试输出
            //HMIRuntime.Trace("Name:" + loggedTag.Name);
            //for (let loggedTagValue of loggedTag.Values) {
            //  HMIRuntime.Trace("Value:" + loggedTagValue.Value + " Quality:" + loggedTagValue.Quality + " TS:" + loggedTagValue.TimeStamp + " Flags:" + loggedTagValue.Flags);
            //}
        }


        // 序列化成完整 JSON 字符串，原样传给前端
        const rawJson = JSON.stringify(resultArray);
        HMIRuntime.Trace(rawJson);
        await Screen.Items("Report table CustomWebControl_1").SetTableData(rawJson);
    }
   ```