QI Mingxuan
329 lines
8.3 KiB
Markdown
329 lines
8.3 KiB
Markdown
# 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`和字段名称，确保模板与输入数据匹配。
|