feat: FASE 6.5 - Report PDF (WeasyPrint + Kaleido)
Add PDF report generation for Metrologist dashboard with SPC and measurement reports including SVG charts, capability indices, and company logo embedding. New files: - server/services/report_service.py (Jinja2 + Plotly/Kaleido + WeasyPrint) - server/routers/reports.py (2 GET endpoints with auth) - server/templates/reports/ (base, spc, measurement HTML templates) Modified: - server/main.py (register reports router) - client dashboard (download buttons + proxy routes) - i18n strings IT/EN Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Adriano
@@ -0,0 +1,190 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 2cm 1.5cm;
|
||||
@bottom-center {
|
||||
content: "Page " counter(page) " / " counter(pages);
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 8pt;
|
||||
color: #64748B;
|
||||
}
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 10pt;
|
||||
color: #1e293b;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.mono { font-family: 'JetBrains Mono', 'Courier New', monospace; }
|
||||
|
||||
/* Header */
|
||||
.report-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 3px solid #2563EB;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.report-header .logo-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.report-header .logo-area img {
|
||||
max-height: 50px;
|
||||
max-width: 120px;
|
||||
}
|
||||
.report-header .company-name {
|
||||
font-size: 14pt;
|
||||
font-weight: 700;
|
||||
color: #2563EB;
|
||||
}
|
||||
.report-header .report-title {
|
||||
font-size: 11pt;
|
||||
font-weight: 600;
|
||||
color: #64748B;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.report-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
font-size: 7pt;
|
||||
color: #94a3b8;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
/* Section */
|
||||
.section { margin-bottom: 16px; }
|
||||
.section-title {
|
||||
font-size: 11pt;
|
||||
font-weight: 700;
|
||||
color: #2563EB;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
padding-bottom: 4px;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 9pt;
|
||||
}
|
||||
th {
|
||||
background-color: #2563EB;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
td {
|
||||
padding: 5px 8px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
tr:nth-child(even) td { background-color: #f8fafc; }
|
||||
|
||||
/* Badge colors */
|
||||
.pass { color: #059669; font-weight: 600; }
|
||||
.warning { color: #d97706; font-weight: 600; }
|
||||
.fail { color: #dc2626; font-weight: 600; }
|
||||
|
||||
.pass-bg { background-color: #ecfdf5; }
|
||||
.warning-bg { background-color: #fffbeb; }
|
||||
.fail-bg { background-color: #fef2f2; }
|
||||
|
||||
/* Capability colors */
|
||||
.cap-good { color: #059669; }
|
||||
.cap-marginal { color: #d97706; }
|
||||
.cap-poor { color: #dc2626; }
|
||||
|
||||
/* Filters info box */
|
||||
.info-box {
|
||||
background-color: #f1f5f9;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 9pt;
|
||||
}
|
||||
.info-box .label { font-weight: 600; color: #64748B; }
|
||||
|
||||
/* Chart container */
|
||||
.chart-container {
|
||||
text-align: center;
|
||||
margin: 10px 0;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
.chart-container svg {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Summary cards */
|
||||
.summary-grid {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.summary-card {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
.summary-card .number {
|
||||
font-size: 18pt;
|
||||
font-weight: 700;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
.summary-card .label {
|
||||
font-size: 8pt;
|
||||
color: #64748B;
|
||||
text-transform: uppercase;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* Page break */
|
||||
.page-break { page-break-before: always; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<div class="report-header">
|
||||
<div class="logo-area">
|
||||
{% if company.logo_base64 %}
|
||||
<img src="{{ company.logo_base64 }}" alt="Logo">
|
||||
{% endif %}
|
||||
<span class="company-name">{{ company.company_name }}</span>
|
||||
</div>
|
||||
<div class="report-title">
|
||||
{% block report_title %}Report{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="report-footer">
|
||||
Generated {{ generated_at.strftime('%Y-%m-%d %H:%M') }} — Powered by TieMeasureFlow
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,75 @@
|
||||
{% extends "base_report.html" %}
|
||||
|
||||
{% block report_title %}Measurement Report{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Recipe info + filters -->
|
||||
<div class="info-box">
|
||||
<span class="label">Recipe:</span> {{ recipe.code }} — {{ recipe.name }}
|
||||
{% if filters_desc %}
|
||||
<br>
|
||||
<span class="label">Filters:</span> {{ filters_desc | join(' | ') }}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Summary -->
|
||||
<div class="section">
|
||||
<div class="section-title">Summary</div>
|
||||
<div class="summary-grid">
|
||||
<div class="summary-card">
|
||||
<div class="number mono">{{ summary.total }}</div>
|
||||
<div class="label">Total</div>
|
||||
</div>
|
||||
<div class="summary-card pass-bg">
|
||||
<div class="number mono pass">{{ summary.pass_count }}</div>
|
||||
<div class="label">Pass ({{ summary.pass_rate }}%)</div>
|
||||
</div>
|
||||
<div class="summary-card warning-bg">
|
||||
<div class="number mono warning">{{ summary.warning_count }}</div>
|
||||
<div class="label">Warning ({{ summary.warning_rate }}%)</div>
|
||||
</div>
|
||||
<div class="summary-card fail-bg">
|
||||
<div class="number mono fail">{{ summary.fail_count }}</div>
|
||||
<div class="label">Fail ({{ summary.fail_rate }}%)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Measurements Table -->
|
||||
<div class="section">
|
||||
<div class="section-title">Measurements ({{ n_measurements }})</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Measurement Point</th>
|
||||
<th>Value</th>
|
||||
<th>Unit</th>
|
||||
<th>Result</th>
|
||||
<th>Date</th>
|
||||
<th>Operator</th>
|
||||
<th>Lot</th>
|
||||
<th>Serial</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in rows %}
|
||||
<tr class="{% if row.pass_fail == 'fail' %}fail-bg{% elif row.pass_fail == 'warning' %}warning-bg{% endif %}">
|
||||
<td class="mono">{{ row.num }}</td>
|
||||
<td>{{ row.subtask }}</td>
|
||||
<td class="mono">{{ row.value }}</td>
|
||||
<td>{{ row.unit }}</td>
|
||||
<td>
|
||||
<span class="{{ row.pass_fail }}">{{ row.pass_fail | upper }}</span>
|
||||
</td>
|
||||
<td class="mono">{{ row.measured_at }}</td>
|
||||
<td>{{ row.operator }}</td>
|
||||
<td>{{ row.lot_number }}</td>
|
||||
<td>{{ row.serial_number }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,114 @@
|
||||
{% extends "base_report.html" %}
|
||||
|
||||
{% block report_title %}SPC Report{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Recipe info + filters -->
|
||||
<div class="info-box">
|
||||
<span class="label">Recipe:</span> {{ recipe.code }} — {{ recipe.name }}
|
||||
{% if subtask %}
|
||||
| <span class="label">Measurement Point:</span> #{{ subtask.marker_number }} — {{ subtask.description }}
|
||||
{% endif %}
|
||||
{% if filters_desc %}
|
||||
<br>
|
||||
<span class="label">Filters:</span> {{ filters_desc | join(' | ') }}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Summary -->
|
||||
<div class="section">
|
||||
<div class="section-title">Summary</div>
|
||||
<div class="summary-grid">
|
||||
<div class="summary-card">
|
||||
<div class="number mono">{{ summary.total }}</div>
|
||||
<div class="label">Total</div>
|
||||
</div>
|
||||
<div class="summary-card pass-bg">
|
||||
<div class="number mono pass">{{ summary.pass_rate }}%</div>
|
||||
<div class="label">Pass ({{ summary.pass_count }})</div>
|
||||
</div>
|
||||
<div class="summary-card warning-bg">
|
||||
<div class="number mono warning">{{ summary.warning_rate }}%</div>
|
||||
<div class="label">Warning ({{ summary.warning_count }})</div>
|
||||
</div>
|
||||
<div class="summary-card fail-bg">
|
||||
<div class="number mono fail">{{ summary.fail_rate }}%</div>
|
||||
<div class="label">Fail ({{ summary.fail_count }})</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Capability Indices -->
|
||||
{% if capability and capability.cp is not none %}
|
||||
<div class="section">
|
||||
<div class="section-title">Capability Indices</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Index</th>
|
||||
<th>Value</th>
|
||||
<th>Rating</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for idx_name, idx_val in [('Cp', capability.cp), ('Cpk', capability.cpk), ('Pp', capability.pp), ('Ppk', capability.ppk)] %}
|
||||
<tr>
|
||||
<td style="font-weight: 600;">{{ idx_name }}</td>
|
||||
<td class="mono">{{ idx_val if idx_val is not none else '—' }}</td>
|
||||
<td>
|
||||
{% if idx_val is not none %}
|
||||
{% if idx_val >= 1.33 %}
|
||||
<span class="cap-good">Capable</span>
|
||||
{% elif idx_val >= 1.0 %}
|
||||
<span class="cap-marginal">Marginal</span>
|
||||
{% else %}
|
||||
<span class="cap-poor">Not Capable</span>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
—
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Statistics -->
|
||||
<div class="info-box" style="margin-top: 8px;">
|
||||
<span class="label">n:</span> <span class="mono">{{ capability.n }}</span>
|
||||
| <span class="label">Mean:</span> <span class="mono">{{ capability.mean }}</span>
|
||||
| <span class="label">Std Dev:</span> <span class="mono">{{ capability.std_dev }}</span>
|
||||
{% if subtask %}
|
||||
<br>
|
||||
<span class="label">Tolerances:</span>
|
||||
{% if subtask.nominal is not none %}Nom: <span class="mono">{{ subtask.nominal }}</span> {% endif %}
|
||||
{% if subtask.utl is not none %}UTL: <span class="mono">{{ subtask.utl }}</span> {% endif %}
|
||||
{% if subtask.ltl is not none %}LTL: <span class="mono">{{ subtask.ltl }}</span> {% endif %}
|
||||
{% if subtask.uwl is not none %}UWL: <span class="mono">{{ subtask.uwl }}</span> {% endif %}
|
||||
{% if subtask.lwl is not none %}LWL: <span class="mono">{{ subtask.lwl }}</span> {% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Control Chart -->
|
||||
{% if control_chart_svg %}
|
||||
<div class="section">
|
||||
<div class="section-title">Control Chart</div>
|
||||
<div class="chart-container">
|
||||
{{ control_chart_svg | safe }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Histogram -->
|
||||
{% if histogram_svg %}
|
||||
<div class="section">
|
||||
<div class="section-title">Histogram</div>
|
||||
<div class="chart-container">
|
||||
{{ histogram_svg | safe }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user