date stuff

This commit is contained in:
Tyrel Souza 2023-10-11 00:57:27 -04:00
parent 00b3607602
commit c22c7e2b06
No known key found for this signature in database
GPG Key ID: F3614B02ACBE438E
2 changed files with 351 additions and 285 deletions

View File

@ -80,8 +80,8 @@ import "@vuepic/vue-datepicker/dist/main.css";
const model = ref(""), const model = ref(""),
serial = ref(""), serial = ref(""),
cert_id = ref(""), cert_id = ref(""),
due_date = ref(""), due_date = ref(new Date),
date = ref(""); date = ref(new Date);
const flow = ref(["year", "month", "calendar"]); const flow = ref(["year", "month", "calendar"]);

View File

@ -1,273 +1,310 @@
<template> <template>
<div class="card-header">Finished?</div> <div class="card-header">Finished?</div>
<div class="card-body"> <div class="card-body">
<button class="custom-button" @click="exportToPDF">Generate PDF and Label</button> <button class="custom-button" @click="exportToPDF">
{{ i_date() }}, {{ i_due_date() }} Generate PDF and Label
</button>
<div :class="{ hide: hide }"> <div :class="{ hide: hide }">
<div id="pdf" ref="document"> <div id="pdf" ref="document">
<div class="header"> <div class="header">
<div class="flex-container"> <div class="flex-container">
<div class="column pct-25"> <div class="column pct-25">
<img :src="BenchTopLogoUrl" /> <img :src="BenchTopLogoUrl" />
</div> </div>
<div class="column pct-50"> <div class="column pct-50">
<div>Customer: {{props.customer?.customer_name}}</div> <div>Customer: {{ props.customer?.customer_name }}</div>
<div>Onsite cal (yes/no): {{onsite()}}</div> <div>Onsite cal (yes/no): {{ onsite() }}</div>
<div>Control Doc#: {{props.customer?.control_doc}}</div> <div>Control Doc#: {{ props.customer?.control_doc }}</div>
<div>Technician: {{props.customer?.technician}}</div> <div>Technician: {{ props.customer?.technician }}</div>
</div> </div>
<div class="column pct-25"> <div class="column pct-25">
<img :src="Al2pCertUrl" /> <img :src="Al2pCertUrl" />
</div>
</div> </div>
</div> </div>
</div> <!-- EndHeader -->
<!-- EndHeader --> <h1>Calibration Certificate</h1>
<h1>Calibration Certificate</h1>
<!-- Instrument Info --> <!-- Instrument Info -->
<div class="instrument-information"> <div class="instrument-information">
<div class="flex-container"> <div class="flex-container">
<div class="column pct-33"> <div class="column pct-33">
<div><span class="ul">Instrument</span></div> <div><span class="ul">Instrument</span></div>
<div><span class="label">Model :</span>{{props.instrument?.model}}</div> <div>
<div><span class="label">Serial# :</span>{{props.instrument?.serial_number}}</div> <span class="label">Model :</span>{{ props.instrument?.model }}
<div><span class="label">Channel :</span>{{props.instrument?.channel}}</div> </div>
<div><span class="label">Transducer Model :</span>{{props.instrument?.transducer_model}}</div> <div>
<div><span class="label">Transducer Span :</span>{{props.instrument?.transducer_span}}</div> <span class="label">Serial# :</span
</div> >{{ props.instrument?.serial_number }}
<div class="column pct-33"> </div>
<div><span class="ul">Primary Cal Device</span></div> <div>
<div><span class="label">Model :</span>{Model}</div> <span class="label">Channel :</span
<div><span class="label">Serial# :</span>{Serial_no}</div> >{{ props.instrument?.channel }}
<div><span class="label">Cal Date :</span>{Cal Date}</div> </div>
<div><span class="label">Cal Due Date :</span>{Serial_no}</div> <div>
<div><span class="label">Cert ID :</span>{Cert ID}</div> <span class="label">Transducer Model :</span
</div> >{{ props.instrument?.transducer_model }}
<div class="column pct-33"> </div>
<div><span class="label">Cal Date :</span>{{i_date()}}</div> <div>
<div><span class="label">Cal Due Date :</span>{{i_due_date()}}</div> <span class="label">Transducer Span :</span
<div><span class="ul">Environmental Data</span></div> >{{ props.instrument?.transducer_span }}
<div><span class="label">Baro (Psi) :</span>{Baro}</div> </div>
<div><span class="label">Temp (&deg;F):</span>{Temp}</div> </div>
<div><span class="label">Humidity (%RH):</span>{Humidity}</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>
<span class="label">Cert ID :</span
>{{ props.calibration?.cert_id }}
</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>
<span class="label">Temp (&deg;F):</span
>{{ props.environment?.temperature }}
</div>
<div>
<span class="label">Humidity (%RH):</span
>{{ props.environment?.humidity }}}
</div>
</div>
</div> </div>
</div> </div>
</div> <br />
<br /> <!-- End InstrumentInfo -->
<!-- End InstrumentInfo --> <!-- As Found -->
<!-- As Found --> <div class="readings">
<div class="readings"> <table class="table table-striped">
<table class="table table-striped"> <thead>
<thead> <tr>
<tr> <th>Gauge Reading</th>
<th>Gauge Reading</th> <th>Accuracy (+/- FS)</th>
<th>Accuracy (+/- FS)</th> <th>Low Limit</th>
<th>Low Limit</th> <th>High Limit</th>
<th>High Limit</th> <th>As Found (units)</th>
<th>As Found (units)</th> <th>OOT</th>
<th>OOT</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td>-12.500</td>
<td>-12.500</td> <td>0.050%</td>
<td>0.050%</td> <td>-12.510</td>
<td>-12.510</td> <td>-12.490</td>
<td>-12.490</td> <td>-12.500</td>
<td>-12.500</td> <td>0</td>
<td>0</td> </tr>
</tr> <tr>
<tr> <td>-12.500</td>
<td>-12.500</td> <td>0.050%</td>
<td>0.050%</td> <td>-12.510</td>
<td>-12.510</td> <td>-12.490</td>
<td>-12.490</td> <td>-12.500</td>
<td>-12.500</td> <td>0</td>
<td>0</td> </tr>
</tr> <tr>
<tr> <td>-12.500</td>
<td>-12.500</td> <td>0.050%</td>
<td>0.050%</td> <td>-12.510</td>
<td>-12.510</td> <td>-12.490</td>
<td>-12.490</td> <td>-12.500</td>
<td>-12.500</td> <td>0</td>
<td>0</td> </tr>
</tr> <tr>
<tr> <td>-12.500</td>
<td>-12.500</td> <td>0.050%</td>
<td>0.050%</td> <td>-12.510</td>
<td>-12.510</td> <td>-12.490</td>
<td>-12.490</td> <td>-12.500</td>
<td>-12.500</td> <td>0</td>
<td>0</td> </tr>
</tr> <tr>
<tr> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> </tr>
</tr> <tr>
<tr> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> </tr>
</tr><tr> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr><tr> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
<tr> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
<tr> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
</tbody> </tr>
</table> </tbody>
</div> </table>
<br /> </div>
<!-- As Left --> <br />
<div class="readings"> <!-- As Left -->
<table class="table table-striped"> <div class="readings">
<thead> <table class="table table-striped">
<tr> <thead>
<th>Gauge Reading</th> <tr>
<th>Accuracy (+/- FS)</th> <th>Gauge Reading</th>
<th>Low Limit</th> <th>Accuracy (+/- FS)</th>
<th>High Limit</th> <th>Low Limit</th>
<th>As Left (units)</th> <th>High Limit</th>
<th>OOT</th> <th>As Left (units)</th>
</tr> <th>OOT</th>
</thead> </tr>
<tbody> </thead>
<tr> <tbody>
<td>-12.500</td> <tr>
<td>0.050%</td> <td>-12.500</td>
<td>-12.510</td> <td>0.050%</td>
<td>-12.490</td> <td>-12.510</td>
<td>-12.500</td> <td>-12.490</td>
<td>0</td> <td>-12.500</td>
</tr> <td>0</td>
<tr> </tr>
<td>-12.500</td> <tr>
<td>0.050%</td> <td>-12.500</td>
<td>-12.510</td> <td>0.050%</td>
<td>-12.490</td> <td>-12.510</td>
<td>-12.500</td> <td>-12.490</td>
<td>0</td> <td>-12.500</td>
</tr> <td>0</td>
<tr> </tr>
<td>-12.500</td> <tr>
<td>0.050%</td> <td>-12.500</td>
<td>-12.510</td> <td>0.050%</td>
<td>-12.490</td> <td>-12.510</td>
<td>-12.500</td> <td>-12.490</td>
<td>0</td> <td>-12.500</td>
</tr> <td>0</td>
<tr> </tr>
<td>-12.500</td> <tr>
<td>0.050%</td> <td>-12.500</td>
<td>-12.510</td> <td>0.050%</td>
<td>-12.490</td> <td>-12.510</td>
<td>-12.500</td> <td>-12.490</td>
<td>0</td> <td>-12.500</td>
</tr> <td>0</td>
<tr> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
<tr> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
<tr> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
<tr> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
<tr> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
<tr> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
</tbody> </tr>
</table> </tbody>
</div> </table>
<!-- End Instruments--> </div>
<div class="box"> <!-- End Instruments-->
<p> <div class="box">
Secondary Cal Device (For Environmental Data): EXTECH S/N A23050006 Cert <p>
# 1535483 07/24/23 (Cal Date) (Precision Psychrometer) Secondary Cal Device (For Environmental Data): EXTECH S/N A23050006
</p> Cert # 1535483 07/24/23 (Cal Date) (Precision Psychrometer)
<p> </p>
Uncertainty Statement: The accuracy of measurement is determined by the <p>
standards uncertainty, with a coverage factor of k=2 (confidence of Uncertainty Statement: The accuracy of measurement is determined by
roughly 95%). the standards uncertainty, with a coverage factor of k=2 (confidence
</p> of roughly 95%).
</p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import {ref, defineProps} from "vue" import { ref, defineProps } from "vue";
import { format } from 'date-fns';
import html2pdf from "html2pdf.js"; import html2pdf from "html2pdf.js";
import BenchTopLogoUrl from "../../assets/BenchTopLogo.png"; import BenchTopLogoUrl from "../../assets/BenchTopLogo.png";
import Al2pCertUrl from "../../assets/al2pCert.png"; import Al2pCertUrl from "../../assets/al2pCert.png";
@ -278,46 +315,76 @@ const props = defineProps({
customer: Object, customer: Object,
environment: Object, environment: Object,
instrument: Object, instrument: Object,
calibration: Object calibration: Object,
}) });
const onsite = () => { const onsite = () => {
return props.customer?.onsite_cal ? "Yes" : "No" return props.customer?.onsite_cal ? "Yes" : "No";
} };
const i_date = () => { const i_date = () => {
if (props.instrument?.date === undefined){ if (props.instrument === undefined) {
return return
} }
const date = props.instrument.date if (props.instrument.date === undefined) {
const year = date.getFullYear(); return
const month = (date.getMonth() + 1).toString().padStart(2, '0'); // Month is zero-based, so we add 1 }
const day = date.getDate().toString().padStart(2, '0'); const d = props.instrument.date
return `${year}/${month}/${day}` const year = d.getFullYear();
} const month = (d.getMonth() + 1).toString().padStart(2, "0"); // Month is zero-based, so we add 1
const day = d.getDate().toString().padStart(2, "0");
return `${year}/${month}/${day}`;
};
const i_due_date = () => { const i_due_date = () => {
if (props.instrument?.due_date === undefined){ if (props.instrument?.due_date === undefined) {
return return;
} }
const date = props.instrument.due_date const d = props.instrument.due_date
const year = date.getFullYear(); const year = d.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0'); // Month is zero-based, so we add 1 const month = (d.getMonth() + 1).toString().padStart(2, "0"); // Month is zero-based, so we add 1
const day = date.getDate().toString().padStart(2, '0'); const day = d.getDate().toString().padStart(2, "0");
return `${year}/${month}/${day}` return `${year}/${month}/${day}`;
} };
const c_date = () => {
if (props.calibration?.date === undefined) {
return;
}
const d = props.calibration.date
const year = d.getFullYear();
const month = (d.getMonth() + 1).toString().padStart(2, "0"); // Month is zero-based, so we add 1
const day = d.getDate().toString().padStart(2, "0");
return `${year}/${month}/${day}`;
};
const c_due_date = () => {
if (props.calibration?.due_date === undefined) {
return;
}
const d = props.calibration.due_date
const year = d.getFullYear();
const month = (d.getMonth() + 1).toString().padStart(2, "0"); // Month is zero-based, so we add 1
const day = d.getDate().toString().padStart(2, "0");
return `${year}/${month}/${day}`;
};
const exportToPDF = () => { const exportToPDF = () => {
const element = document.getElementById("pdf") const element = document.getElementById("pdf");
var opt = { var opt = {
margin: 0.4, margin: 0.4,
filename: 'myfile.pdf', filename: "myfile.pdf",
image: { type: 'jpeg', quality: 0.98 }, image: { type: "jpeg", quality: 0.98 },
html2canvas: { scale: 2 }, html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } jsPDF: { unit: "in", format: "letter", orientation: "portrait" },
}; };
html2pdf().from(element).set(opt).save(); html2pdf().from(element).set(opt).save();
}; };
const dt = (d) => {
};
</script> </script>
<style scoped> <style scoped>
@ -327,14 +394,14 @@ const exportToPDF = () => {
} }
} }
body { body {
margin:1rem; margin: 1rem;
} }
.hide { .hide {
display: none; display: none;
} }
.pdf-container { .pdf-container {
max-width:960px; max-width: 960px;
margin: auto; margin: auto;
} }
h1 { h1 {
@ -363,7 +430,6 @@ h1 {
font-size: 8pt; font-size: 8pt;
} }
.pct-50 { .pct-50 {
width: 45%; width: 45%;
} }