181 lines
4.6 KiB
PHP
181 lines
4.6 KiB
PHP
<?php include('include/headscript.php'); ?>
|
||
<!doctype html>
|
||
<html lang="it">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<link rel="icon" href="assets/images/favicon-32x32.png" type="image/png" />
|
||
<?php include('cssinclude.php'); ?>
|
||
<title>Esempio Griglia Qualità - <?= htmlspecialchars($titlewebsite, ENT_QUOTES, 'UTF-8'); ?></title>
|
||
|
||
<style>
|
||
body {
|
||
background: #f3f6f8;
|
||
font-family: 'Segoe UI', sans-serif;
|
||
padding: 20px;
|
||
}
|
||
|
||
h2 {
|
||
text-align: center;
|
||
margin-bottom: 25px;
|
||
font-weight: 700;
|
||
color: #2b3e50;
|
||
}
|
||
|
||
/* ===== GRIGLIA QC ===== */
|
||
|
||
.qc-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
table.qc-grid {
|
||
border-collapse: collapse;
|
||
background: white;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
table.qc-grid th {
|
||
background: #eaf1f6;
|
||
padding: 6px;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
border: 1px solid #d0d7de;
|
||
}
|
||
|
||
table.qc-grid td {
|
||
width: 22px;
|
||
height: 22px;
|
||
border: 1px solid #e0e0e0;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
td.y-label {
|
||
width: 55px;
|
||
background: #f7f7f7;
|
||
font-weight: bold;
|
||
cursor: default;
|
||
}
|
||
|
||
td.hit {
|
||
background: #bde7ff;
|
||
position: relative;
|
||
}
|
||
|
||
td.hit::after {
|
||
content: "×";
|
||
color: #003b73;
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
position: absolute;
|
||
top: 1px;
|
||
left: 6px;
|
||
}
|
||
|
||
.legend {
|
||
margin-top: 25px;
|
||
text-align: center;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.legend strong {
|
||
color: #2b3e50;
|
||
}
|
||
|
||
.nominale-row td {
|
||
background: #e2ffe2 !important;
|
||
}
|
||
|
||
.tolerance-row td {
|
||
background: #fff4d6 !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<h2>Esempio Griglia Controlli Qualità</h2>
|
||
|
||
<?php
|
||
// 🔧 Valori DIMOSTRATIVI
|
||
$nominale = 11.20;
|
||
$tolPlus = 0.30;
|
||
$tolMinus = 0.20;
|
||
$step = 0.01;
|
||
|
||
// Asse Y
|
||
$min = $nominale - $tolMinus - 0.05;
|
||
$max = $nominale + $tolPlus + 0.05;
|
||
|
||
$rows = [];
|
||
for ($v = $max; $v >= $min; $v -= $step) {
|
||
$rows[] = round($v, 2);
|
||
}
|
||
|
||
// Asse X (20 misurazioni demo)
|
||
$colonne = range(1, 20);
|
||
?>
|
||
|
||
<div class="qc-container">
|
||
<table class="qc-grid">
|
||
<tr>
|
||
<th>Valore</th>
|
||
<?php foreach ($colonne as $c): ?>
|
||
<th><?= $c ?></th>
|
||
<?php endforeach; ?>
|
||
</tr>
|
||
|
||
<?php foreach ($rows as $val): ?>
|
||
|
||
<?php
|
||
$extraClass = "";
|
||
if (abs($val - $nominale) < 0.0001) $extraClass = "nominale-row";
|
||
if (abs($val - ($nominale + $tolPlus)) < 0.0001) $extraClass = "tolerance-row";
|
||
if (abs($val - ($nominale - $tolMinus)) < 0.0001) $extraClass = "tolerance-row";
|
||
?>
|
||
|
||
<tr class="<?= $extraClass ?>">
|
||
<td class="y-label"><?= number_format($val, 2) ?></td>
|
||
|
||
<?php foreach ($colonne as $c): ?>
|
||
<td data-value="<?= $val ?>" data-col="<?= $c ?>"></td>
|
||
<?php endforeach; ?>
|
||
|
||
</tr>
|
||
|
||
<?php endforeach; ?>
|
||
|
||
</table>
|
||
</div>
|
||
|
||
<div class="legend">
|
||
<p><strong>Click</strong> su una cella per inserire una misurazione.</p>
|
||
<p><strong>Nominale:</strong> riga verde | <strong>Tolleranze:</strong> righe gialle</p>
|
||
</div>
|
||
|
||
<script>
|
||
// === CLIC SULLA GRIGLIA ===
|
||
document.querySelectorAll(".qc-grid td:not(.y-label)").forEach(cell => {
|
||
cell.addEventListener("click", function() {
|
||
|
||
// togli X eventuale dalla stessa colonna
|
||
let col = this.dataset.col;
|
||
document.querySelectorAll("td[data-col='" + col + "']").forEach(c => c.classList.remove("hit"));
|
||
|
||
// aggiungi X nella cella cliccata
|
||
this.classList.add("hit");
|
||
|
||
console.log("Rilievo colonna:", col, "valore:", this.dataset.value);
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html>
|