# XP.ReportEngine 模板定义规范

## **一、模板结构总览**

模板使用JSON格式定义，分为以下几个核心部分：

1. 

`document`：文档基础配置（页面尺寸、边距等）。

2. 

`pages`：页面列表，每个页面包含元素列表。

3. 

`elements`：页面中的具体元素（文本、表格、图片等）。

4. 

`styles`：预定义的样式，可复用。

5. 

`dataKey`：数据绑定字段，关联业务数据。

## **二、首页布局规范**

**模板路径**：`Templates/Homepage.json`

代码<title>图标/24_new/复制</title>

```
{
  "document": {
    "pageSize": "A4",
    "orientation": "Portrait",
    "margins": { "top": 30, "right": 20, "bottom": 20, "left": 20 }
  },
  "pages": [
    {
      "type": "homepage",
      "elements": [
        { "type": "text", "content": "平面CT检测报告", "style": "title", "position": [10, 10] },
        { "type": "text", "content": "报告编号：${reportId}", "style": "subtitle", "position": [10, 40] },
        { "type": "text", "content": "检测日期：${inspectionDate}", "style": "subtitle", "position": [10, 60] },
        { "type": "text", "content": "样品名称：${sampleName}", "style": "subtitle", "position": [10, 80] },
        { "type": "divider", "position": [10, 100], "width": 190 },
        { "type": "table", "dataKey": "summaryData", "columns": [...], "position": [10, 120], "size": [190, 60] }
      ]
    }
  ],
  "styles": {
    // ... 样式定义（见下文）
  }
}
```

**关键要素说明**：

1. 

**标题与元数据**：顶部显示报告标题、编号、日期和样品名称。

2. 

**摘要表格**：显示关键统计信息（如缺陷数量、合格率等），通过`summaryData`绑定数据。

3. 

**分隔线**：视觉分隔标题与主体内容。

## **三、测量数据布局规范**

**模板路径**：`Templates/MetricData.json`

代码<title>图标/24_new/复制</title>

```
{
  "pages": [
    {
      "type": "metricData",
      "elements": [
        { "type": "text", "content": "测量数据详情", "style": "sectionTitle", "position": [10, 10] },
        { "type": "table", "dataKey": "measurements", "columns": [
          { "header": "参数名称", "field": "parameter" },
          { "header": "测量值", "field": "value" },
          { "header": "单位", "field": "unit" }
        ], "position": [10, 30], "size": [190, 100] }
      ]
    }
  ],
  "styles": {
    // ... 样式定义（见下文）
  }
}
```

**关键要素说明**：

● 

表格绑定`measurements`数据，列通过`field`属性绑定数据字段。

● 

支持动态行数，自动调整表格高度。

## **四、缺陷检测布局规范**

**模板路径**：`Templates/DefectDetails.json`

代码<title>图标/24_new/复制</title>

```
{
  "pages": [
    {
      "type": "defectDetails",
      "elements": [
        { "type": "text", "content": "缺陷检测结果", "style": "sectionTitle", "position": [10, 10] },
        {
          "type": "grid", "dataKey": "defects",
          "columns": [
            { "type": "image", "dataKey": "imagePath", "size": [90, 90], "border": true },
            { "type": "text", "content": "缺陷类型：${type}", "style": "gridText", "width": 100 },
            { "type": "text", "content": "位置：X=${x}, Y=${y}", "style": "gridText", "width": 100 }
          ],
          "position": [10, 30], "colWidth": 100, "rowHeight": 100
        }
      ]
    }
  ],
  "styles": {
    "gridText": { "font": "Arial", "size": 10, "align": "left" }
  }
}
```

**关键要素说明**：

1. 

**网格布局**：每行显示缺陷图片、类型和位置信息。

2. 

使用`grid`元素自动排版多缺陷数据，支持水平滚动或分页。

3. 

图片路径通过`imagePath`字段绑定，文本使用数据绑定语法（如`X=${x}`）。

## **五、BGA检测布局规范**

**模板路径**：`Templates/BGAInspection.json`

代码<title>图标/24_new/复制</title>

```
{
  "pages": [
    {
      "type": "bgaDetails",
      "elements": [
        { "type": "text", "content": "BGA焊点检测结果", "style": "sectionTitle", "position": [10, 10] },
        {
          "type": "image", "dataKey": "bgaTopViewImage", "position": [10, 30], "size": [190, 150], "border": true,
          "annotations": [
            { "type": "point", "x": ${defectX}, "y": ${defectY}, "color": "red", "size": 5 }
          ]
        },
        {
          "type": "table", "dataKey": "bgaMetrics",
          "columns": [ "引脚编号", "焊锡高度", "偏移量" ],
          "position": [10, 190], "size": [190, 80]
        }
      ]
    }
  ]
}
```

**关键要素说明**：

1. 

**图片标注**：在BGA俯视图上标记缺陷位置（通过`annotations`）。

2. 

**表格显示参数**：焊锡高度、偏移量等数据。

3. 

支持动态标注点，绑定缺陷坐标数据。

## **六、气泡检测布局规范**

**模板路径**：`Templates/VoidInspection.json`

代码<title>图标/24_new/复制</title>

```
{
  "pages": [
    {
      "type": "voidDetails",
      "elements": [
        { "type": "text", "content": "气泡检测结果", "style": "sectionTitle", "position": [10, 10] },
        {
          "type": "image", "dataKey": "voidImage", "position": [10, 30], "size": [190, 150], "border": true,
          "annotations": [
            { "type": "circle", "x": ${bubbleX}, "y": ${bubbleY}, "radius": ${bubbleRadius}, "color": "blue" }
          ]
        },
        { "type": "text", "content": "总气泡数：${voidCount}", "style": "resultText", "position": [10, 190] },
        { "type": "text", "content": "最大气泡体积：${maxVoidVolume} mm³", "style": "resultText", "position": [10, 210] }
      ]
    }
  ],
  "styles": {
    "resultText": { "font": "Arial", "size": 14, "bold": true }
  }
}
```

**关键要素说明**：

1. 

**气泡可视化**：在图像上用圆形标注气泡位置、半径。

2. 

**统计结果**：显示总数量、最大体积等关键指标。

3. 

支持多气泡标注，数据绑定气泡坐标和尺寸。

## **七、通孔填锡率检测布局规范**

**模板路径**：`Templates/ViaFillInspection.json`

代码<title>图标/24_new/复制</title>

```
{
  "pages": [
    {
      "type": "viaFillDetails",
      "elements": [
        { "type": "text", "content": "通孔填锡率检测结果", "style": "sectionTitle", "position": [10, 10] },
        {
          "type": "image", "dataKey": "viaImage", "position": [10, 30], "size": [190, 150], "border": true,
          "annotations": [
            { "type": "rectangle", "x": ${viaX}, "y": ${viaY}, "width": ${viaWidth}, "height": ${viaHeight}, "color": "green" }
          ]
        },
        { "type": "text", "content": "平均填锡率：${avgFillRate}%", "style": "resultText", "position": [10, 190] },
        { "type": "progressBar", "value": ${avgFillRate}, "position": [10, 220], "size": [190, 20], "color": "${fillRateColor(avgFillRate)}" }
      ]
    }
  ],
  "functions": {
    "fillRateColor(value)": "return value >= 90 ? 'green' : value >= 70 ? 'orange' : 'red';"
  }
}
```

**关键要素说明**：

1. 

**填锡率图示**：用矩形标注通孔位置，进度条显示填锡率。

2. 

**颜色条件绑定**：通过函数`fillRateColor`根据数值动态设置颜色。

3. 

支持多通孔标注，绑定位置和尺寸数据。

## **八、样式定义示例**

代码<title>图标/24_new/复制</title>

```
"styles": {
  "title": { "font": "Arial", "size": 24, "bold": true, "color": "#000000" },
  "subtitle": { "font": "Arial", "size": 16, "italic": true, "color": "#666666" },
  "gridText": { "font": "Arial", "size": 10, "align": "left" },
  "resultText": { "font": "Arial", "size": 14, "bold": true }
}
```

**关键要素说明**：

● 

样式可复用，通过`style`属性引用。

● 

支持字体、大小、颜色、对齐等属性配置。

**# 总结**

● 

**模块化设计**：各检测模块独立为单独模板文件，可灵活组合。

● 

**数据绑定**：通过`${}`语法绑定业务数据（如`measurements`、`defects`等对象）。

● 

**动态布局**：支持表格自适应高度、图片标注、条件样式等高级功能。

● 

**可扩展性**：新增检测类型只需定义对应模板文件即可。

**备注**：实际使用时，需根据具体业务数据模型调整`dataKey`和字段名称，确保模板与输入数据匹配。