reading table:
This commit is contained in:
Tyrel Souza
parent
1eb2924e53
commit
50cb23ccec
@ -7,298 +7,110 @@
|
||||
<br>
|
||||
<br>
|
||||
<div :class="{ hide: hide }" class="px666">
|
||||
<div id="pdf" ref="document">
|
||||
<div class="header">
|
||||
<div class="flex-container">
|
||||
<div class="column pct-25">
|
||||
<img :src="BenchTopLogoUrl" />
|
||||
</div>
|
||||
<div class="column pct-50">
|
||||
<div>Customer: {{ props.customer?.customer_name }}</div>
|
||||
<div>Onsite cal (yes/no): {{ onsite() }}</div>
|
||||
<div>Control Doc#: {{ props.customer?.control_doc }}</div>
|
||||
<div>Technician: {{ props.customer?.technician }}</div>
|
||||
</div>
|
||||
<div class="column pct-25">
|
||||
<img :src="Al2pCertUrl" />
|
||||
<div v-for="table of tables">
|
||||
<div id="pdf" ref="document">
|
||||
<div class="header">
|
||||
<div class="flex-container">
|
||||
<div class="column pct-25">
|
||||
<img :src="BenchTopLogoUrl"/>
|
||||
</div>
|
||||
<div class="column pct-50">
|
||||
<div>Customer: {{ props.customer?.customer_name }}</div>
|
||||
<div>Onsite cal (yes/no): {{ onsite() }}</div>
|
||||
<div>Control Doc#: {{ props.customer?.control_doc }}</div>
|
||||
<div>Technician: {{ props.customer?.technician }}</div>
|
||||
</div>
|
||||
<div class="column pct-25">
|
||||
<img :src="Al2pCertUrl"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- EndHeader -->
|
||||
<h1>Calibration Certificate</h1>
|
||||
<!-- EndHeader -->
|
||||
<h1>Calibration Certificate</h1>
|
||||
|
||||
<!-- Instrument Info -->
|
||||
<div class="instrument-information">
|
||||
<div class="flex-container">
|
||||
<div class="column pct-33">
|
||||
<div><span class="ul">Instrument</span></div>
|
||||
<div>
|
||||
<span class="label">Model :</span>{{ props.instrument?.model }}
|
||||
</div>
|
||||
<div>
|
||||
<!-- Instrument Info -->
|
||||
<div class="instrument-information">
|
||||
<div class="flex-container">
|
||||
<div class="column pct-33">
|
||||
<div><span class="ul">Instrument</span></div>
|
||||
<div>
|
||||
<span class="label">Model :</span>{{ props.instrument?.model }}
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">Serial# :</span
|
||||
>{{ props.instrument?.serial_number }}
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">Channel :</span
|
||||
>{{ props.instrument?.channel }}
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">Transducer Model :</span
|
||||
>{{ props.instrument?.transducer_model }}
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">Transducer Span :</span
|
||||
>{{ props.instrument?.transducer_span }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column pct-33">
|
||||
<div><span class="ul">Primary Cal Device</span></div>
|
||||
<div>
|
||||
<span class="label">Model :</span>{{ props.calibration?.model }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="column pct-33">
|
||||
<div><span class="ul">Primary Cal Device</span></div>
|
||||
<div>
|
||||
<span class="label">Model :</span>{{ props.calibration?.model }}
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">Serial# :</span
|
||||
>{{ props.calibration?.serial }}
|
||||
</div>
|
||||
<div><span class="label">Cal Date :</span>{{ c_date() }}</div>
|
||||
<div>
|
||||
<span class="label">Cal Due Date :</span>{{ c_due_date() }}
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<div><span class="label">Cal Date :</span>{{ c_date() }}</div>
|
||||
<div>
|
||||
<span class="label">Cal Due Date :</span>{{ c_due_date() }}
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">Cert ID :</span
|
||||
>{{ props.calibration?.cert_id }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column pct-33">
|
||||
<div><span class="label">Cal Date :</span>{{ i_date() }}</div>
|
||||
<div>
|
||||
<span class="label">Cal Due Date :</span>{{ i_due_date() }}
|
||||
</div>
|
||||
<div><span class="ul">Environmental Data</span></div>
|
||||
<div>
|
||||
<div class="column pct-33">
|
||||
<div><span class="label">Cal Date :</span>{{ i_date() }}</div>
|
||||
<div>
|
||||
<span class="label">Cal Due Date :</span>{{ i_due_date() }}
|
||||
</div>
|
||||
<div><span class="ul">Environmental Data</span></div>
|
||||
<div>
|
||||
<span class="label">Baro (Psi) :</span
|
||||
>{{ props.environment?.pressure }}
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">Temp (°F):</span
|
||||
>{{ props.environment?.temperature }}
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">Humidity (%RH):</span
|
||||
>{{ props.environment?.humidity }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<!-- End InstrumentInfo -->
|
||||
<!-- As Found -->
|
||||
<div class="readings">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Gauge Reading</th>
|
||||
<th>Accuracy (+/- FS)</th>
|
||||
<th>Low Limit</th>
|
||||
<th>High Limit</th>
|
||||
<th>As Found (units)</th>
|
||||
<th>OOT</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<br />
|
||||
<!-- As Left -->
|
||||
<div class="readings">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Gauge Reading</th>
|
||||
<th>Accuracy (+/- FS)</th>
|
||||
<th>Low Limit</th>
|
||||
<th>High Limit</th>
|
||||
<th>As Left (units)</th>
|
||||
<th>OOT</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- End Instruments-->
|
||||
<div class="box">
|
||||
<p>
|
||||
Secondary Cal Device (For Environmental Data): EXTECH S/N A23050006
|
||||
Cert # 1535483 07/24/23 (Cal Date) (Precision Psychrometer)
|
||||
</p>
|
||||
<p>
|
||||
Uncertainty Statement: The accuracy of measurement is determined by
|
||||
the standards uncertainty, with a coverage factor of k=2 (confidence
|
||||
of roughly 95%).
|
||||
</p>
|
||||
<br/>
|
||||
<!-- End InstrumentInfo -->
|
||||
<!-- As Found -->
|
||||
<ReadingTable />
|
||||
<br/>
|
||||
<!-- As Left -->
|
||||
<ReadingTable />
|
||||
<!-- End Instruments-->
|
||||
<div class="box">
|
||||
<p>
|
||||
Secondary Cal Device (For Environmental Data): EXTECH S/N A23050006
|
||||
Cert # 1535483 07/24/23 (Cal Date) (Precision Psychrometer)
|
||||
</p>
|
||||
<p>
|
||||
Uncertainty Statement: The accuracy of measurement is determined by
|
||||
the standards uncertainty, with a coverage factor of k=2 (confidence
|
||||
of roughly 95%).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -309,14 +121,17 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps } from "vue";
|
||||
import {defineProps, ref} from "vue";
|
||||
import html2pdf from "html2pdf.js";
|
||||
import BenchTopLogoUrl from "../../assets/BenchTopLogo.png";
|
||||
import Al2pCertUrl from "../../assets/al2pCert.png";
|
||||
|
||||
import parseTransducer from "../../parsers/Transducer"
|
||||
import ParseTransducer from "../../parsers/Transducer"
|
||||
import ParseHardwareCalibration from "../../parsers/Hardware.js"
|
||||
import ReadingTable from "./ReadingTable.vue";
|
||||
|
||||
const hide = ref(false);
|
||||
const tables = ref([])
|
||||
|
||||
const props = defineProps({
|
||||
upload: Object,
|
||||
@ -382,24 +197,33 @@ const exportToPDF = () => {
|
||||
var opt = {
|
||||
margin: 0.4,
|
||||
filename: `${props.instrument.model}_${i_date()}.pdf`,
|
||||
image: { type: "jpeg", quality: 0.98 },
|
||||
html2canvas: { scale: 2 },
|
||||
jsPDF: { unit: "in", format: "letter", orientation: "portrait" },
|
||||
image: {type: "jpeg", quality: 0.98},
|
||||
html2canvas: {scale: 2},
|
||||
jsPDF: {unit: "in", format: "letter", orientation: "portrait"},
|
||||
};
|
||||
html2pdf().from(element).set(opt).save();
|
||||
};
|
||||
|
||||
|
||||
const output = () => {
|
||||
let content = ""
|
||||
tables.value = []
|
||||
|
||||
if (props.upload !== undefined && props.upload.files.length > 0) {
|
||||
const acc = props.environment.accuracy
|
||||
content = parseTransducer(props.upload.files[0]["value"], acc)
|
||||
if (props.upload.report_type === "Transducer Verify") {
|
||||
for (const idx in props.upload.files) {
|
||||
content = ParseTransducer(props.upload.files[idx]["value"], acc)
|
||||
tables.value = [...tables.value, ...content]
|
||||
}
|
||||
} else if (props.upload.report_type === "Hardware Calibration") {
|
||||
for (const idx in props.upload.files) {
|
||||
content = ParseHardwareCalibration(props.upload.files[idx]["value"], acc)
|
||||
tables.value = [...tables.value, ...[content]]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
"form1": content
|
||||
}
|
||||
return tables
|
||||
}
|
||||
|
||||
|
||||
@ -411,6 +235,7 @@ const output = () => {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 1rem;
|
||||
}
|
||||
@ -418,27 +243,33 @@ body {
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pdf-container {
|
||||
max-width: 960px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 1.75rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ul {
|
||||
font-size: 12pt;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.box {
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 12pt;
|
||||
font-weight: bold;
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -451,9 +282,11 @@ h1 {
|
||||
.pct-50 {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.pct-33 {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.pct-25 {
|
||||
width: 25%;
|
||||
}
|
||||
@ -466,11 +299,13 @@ tr td {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
tr th {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
width: 18%;
|
||||
}
|
||||
|
||||
.table {
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
139
benchtop-fe/src/components/PDF/ReadingTable.vue
Normal file
139
benchtop-fe/src/components/PDF/ReadingTable.vue
Normal file
@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div class="readings">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Gauge Reading</th>
|
||||
<th>Accuracy (+/- FS)</th>
|
||||
<th>Low Limit</th>
|
||||
<th>High Limit</th>
|
||||
<th>As Found (units)</th>
|
||||
<th>OOT</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
<td>TBD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ReadingTable'
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@media print {
|
||||
.custom-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 1.75rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.column img {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
tr td {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
tr th {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
width: 18%;
|
||||
}
|
||||
|
||||
.table {
|
||||
font-size: 9pt;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user