322 lines
15 KiB
PHP
Executable File
322 lines
15 KiB
PHP
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Card Example</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
@page {
|
|
margin-top: 15mm;
|
|
margin-bottom: 15mm;
|
|
margin-left: 15mm;
|
|
margin-right: 15mm;
|
|
}
|
|
|
|
.card-layout {
|
|
font-size: 10px;
|
|
/* width: 80mm;
|
|
height: 45mm; */
|
|
width: 115mm;
|
|
height: 65mm;
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* Organiza os filhos verticalmente */
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.card-header {
|
|
flex-basis: 40%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.title-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.card-footer {
|
|
flex-basis: 60%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.qr-code {
|
|
margin-top: 5px;
|
|
width: 20mm;
|
|
height: 20mm;
|
|
}
|
|
|
|
.tag-name-qrcode {
|
|
font-size: 10px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.img-company {
|
|
margin-top: 1px;
|
|
width: 12mm;
|
|
height: 12mm;
|
|
}
|
|
|
|
|
|
/* .blue {
|
|
background-color: #09255C;
|
|
color: white;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
|
|
font-weight: bold;
|
|
} */
|
|
|
|
/* .gray {
|
|
background-color: #EAF3F6;
|
|
color: black;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.dark-blue {
|
|
background-color: #00B0EA;
|
|
color: white;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
|
|
font-weight: bold;
|
|
} */
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
@foreach ($associatedArray as $key => $value)
|
|
<!-- psv -->
|
|
@if ($detailsEquipment->equipmentType->equipment_type_id == 3)
|
|
|
|
<div class="card-layout" style="border:1px solid black">
|
|
|
|
<div class="card-header">
|
|
<div class="row" style="width: 100%; height:100%;">
|
|
<div class="col-sm p-0 " style="border: 1px solid gray;">
|
|
<div class="col-sm">
|
|
<img class="img-company" src="{{$isptLogoPath }}" alt="Logo da Empresa">
|
|
</div>
|
|
<div class="col-sm">
|
|
<img class="img-company" src="{{ $logoPath }}" alt="Logo da Empresa">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6 p-0 m-0 title-card" style="border: 1px solid gray;">
|
|
<div class="col-sm" style="padding-top: 15px; margin: 0px; background-color: #09255C; color: #fff; font-size: 15px;">
|
|
ISPT - Paragem Navigator FF
|
|
</div>
|
|
<div class="row align-items-center" style="margin: 0px; height: 18px;">
|
|
<div class="col-sm" style="font-size: 12px; background-color: rgb(196, 196, 196);border:1px dashed black;">
|
|
N.Isp
|
|
</div>
|
|
<div class="col-sm" style="text-align: center;">
|
|
###
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center" style="margin: 0px; height: 18px;">
|
|
<div class="col-sm" style="font-size: 12px; background-color: rgb(196, 196, 196);border:1px dashed black;">
|
|
Tag
|
|
</div>
|
|
<div class="col-sm">
|
|
###
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm p-0" style="border: 1px solid gray;">
|
|
<div class="col-sm">
|
|
<img class="qr-code" src="{{ $qrCodeImages[$key] }}" alt="QR Code">
|
|
</div>
|
|
<div class="col-sm">
|
|
<p class="tag-name-qrcode">{{ $associatedArray[$key] }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- .Card-header -->
|
|
|
|
|
|
<div class="card-footer">
|
|
<div class="row" style="margin: 0px; height: 20px; ">
|
|
<div class="col-sm-3" style="font-size: 10px; background-color:#09255C;border:1px dashed black; color:white;">Dim.Entrada:</div>
|
|
<div class="col-sm-6" style="font-size: 10px;border:1px dashed black;">###</div>
|
|
<div class="col-sm" style="font-size: 10px; background-color:#09255C;border:1px dashed black; color:white;">Rating:</div>
|
|
<div class="col-sm" style="font-size: 10px;border:1px dashed black;">###</div>
|
|
</div>
|
|
|
|
<div class="row" style="margin: 0px; height: 20px; ">
|
|
<div class="col-sm-3" style="font-size: 10px; background-color:#09255C;border:1px dashed black; color:white;">Dim.Saida:</div>
|
|
<div class="col-sm-6" style="font-size: 10px;border:1px dashed black;">###</div>
|
|
<div class="col-sm" style="font-size: 10px; background-color:#09255C;border:1px dashed black; color:white;">Rating:</div>
|
|
<div class="col-sm" style="font-size: 10px;border:1px dashed black;">###</div>
|
|
</div>
|
|
|
|
<div class="row " style="margin: 0px; height: 20px; ">
|
|
<div class="col-sm-3" style="font-size: 10px; background-color:#09255C;border:1px dashed black; color:white;">Equipamento:</div>
|
|
<div class="col-sm-9" style="font-size: 10px;border:1px dashed black;">VÁLVULA SEGURANÇA DO TANQUE DE FLASH DO </div>
|
|
</div>
|
|
|
|
<div class="row" style="margin: 0px; height: 20px; ">
|
|
<div class="col-sm-3" style="font-size: 10px; background-color:#09255C;border:1px dashed black; color:white;">Fluido:</div>
|
|
<div class="col-sm-3" style="font-size: 10px;border:1px dashed black"> vapor </div>
|
|
<div class="col-sm" style="font-size: 10px; background-color:#09255C;border:1px dashed black; color:white;">Pressão:</div>
|
|
<div class="col-sm" style="font-size: 10px;border:1px dashed black"> 4,5 </div>
|
|
<div class="col-sm" style="font-size: 10px; background-color:#09255C;border:1px dashed black; color:white;">C.pressão:</div>
|
|
<div class="col-sm-1" style="font-size: 10px;border:1px dashed black"> na </div>
|
|
</div>
|
|
|
|
<div class="row" style="margin: 0px;">
|
|
<div class="col-sm" style="font-size: 10px; background-color:#09255C;border:1px dashed black; color:white;">Fluido:</div>
|
|
<div class="col-sm" style="font-size: 10px;border:1px dashed black"> vapor </div>
|
|
<div class="col-sm-2" style="font-size: 10px; background-color:#09255C;border:1px dashed black; color:white;">Pressão:</div>
|
|
<div class="col-sm-5" style="font-size: 10px;border:1px dashed black"> 4,5 </div>
|
|
<div class="col-sm-1" style="font-size: 10px; background-color:#09255C;border:1px dashed black; color:white;">Área:</div>
|
|
<div class="col-sm-1" style="font-size: 10px;border:1px dashed black"> na </div>
|
|
</div>
|
|
</div><!-- .Card-footer -->
|
|
|
|
</div>
|
|
<!-- .Card-layout -->
|
|
|
|
|
|
|
|
{{-- <!-- CV -->
|
|
@elseif($detailsEquipment->equipmentType->equipment_type_id == 1)
|
|
|
|
<div class="card-layout" style="border:1px solid black">
|
|
<div class="card-header">
|
|
<div class="row" style="width: 100%; height:100%;">
|
|
<div class="col-sm p-0 " style="border: 1px solid gray;">
|
|
<div class="col-sm">
|
|
<img class="img-company" src="{{ $isptLogoPath }}" alt="Logo da Empresa">
|
|
</div>
|
|
<div class="col-sm">
|
|
<img class="img-company" src="{{ $logoPath }}" alt="Logo da Empresa">
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 p-0 title-card gray" style="border: 1px solid gray;">
|
|
<div class="col-sm " style="padding-top: 15px;">Paragem ###</div>
|
|
<div class="col-sm">N.Ispt ###</div>
|
|
<div class="col-sm">Tag ###</div>
|
|
</div>
|
|
<div class="col-sm p-0" style="border: 1px solid gray;">
|
|
<div class="col-sm">
|
|
<img class="qr-code" src="{{ $qrCodeImages[$key] }}" alt="QR Code">
|
|
</div>
|
|
<div class="col-sm">
|
|
<p class="tag-name-qrcode">{{ $associatedArray[$key] }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- .Card-header -->
|
|
<div class="card-footer">
|
|
<div class="row">
|
|
<div class="col-sm-6 gray" style="width: 50%;">Dim.Ent:</div>
|
|
<div class="col-sm">###</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-6 gray">Equip:</div>
|
|
<div class="col-sm">###</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-2 gray" style="padding-right: 1px;">T.Fluido:</div>
|
|
<div class="col-sm-2">N/A</div>
|
|
<div class="col-sm-2 gray">Pressao:</div>
|
|
<div class="col-sm-2">N/A</div>
|
|
<div class="col-sm-2 gray">C.Pressao</div>
|
|
<div class="col-sm-2">##</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-2 gray" style="padding-right: 0.5px;">T.Val:</div>
|
|
<div class="col-sm-2">CV</div>
|
|
<div class="col-sm-2 gray">Ambito:</div>
|
|
<div class="col-sm-2">##</div>
|
|
<div class="col-sm-2 gray">Area:</div>
|
|
<div class="col-sm-2">N/A</div>
|
|
</div>
|
|
</div>
|
|
<!-- .Card-footer -->
|
|
</div>
|
|
|
|
<!-- ISV -->
|
|
@elseif($detailsEquipment->equipmentType->equipment_type_id == 2)
|
|
|
|
<div class="card-layout" style="border:1px solid black">
|
|
<div class="card-header">
|
|
<div class="row" style="width: 100%; height:100%;">
|
|
<div class="col-sm p-0 " style="border: 1px solid gray;">
|
|
<div class="col-sm">
|
|
<img class="img-company" src="{{ $isptLogoPath }}" alt="Logo da Empresa">
|
|
</div>
|
|
<div class="col-sm">
|
|
<img class="img-company" src="{{ $logoPath }}" alt="Logo da Empresa">
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 p-0 title-card dark-blue" style="border: 1px solid gray;">
|
|
<div class="col-sm " style="padding-top: 15px;">Paragem ###</div>
|
|
<div class="col-sm">N.Ispt ###</div>
|
|
<div class="col-sm">Tag ###</div>
|
|
</div>
|
|
<div class="col-sm p-0" style="border: 1px solid gray;">
|
|
<div class="col-sm">
|
|
<img class="qr-code" src="{{ $qrCodeImages[$key] }}" alt="QR Code">
|
|
</div>
|
|
<div class="col-sm">
|
|
<p class="tag-name-qrcode">{{ $associatedArray[$key] }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- .Card-header -->
|
|
<div class="card-footer">
|
|
<div class="row" ">
|
|
<div class="col-sm-6 dark-blue" style="margin: 0;padding:0;background-color:blue;">Dim.Ent:</div>
|
|
<div class="col-sm">###</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-6 dark-blue">Equip:</div>
|
|
<div class="col-sm">###</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-2 dark-blue" style="padding-right: 1px;">T.Fluido:</div>
|
|
<div class="col-sm-2">N/A</div>
|
|
<div class="col-sm-2 dark-blue">Pressao:</div>
|
|
<div class="col-sm-2">N/A</div>
|
|
<div class="col-sm-2 dark-blue">C.Pressao</div>
|
|
<div class="col-sm-2">##</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-2 dark-blue" style="padding-right: 0.5px;">T.Val:</div>
|
|
<div class="col-sm-2">ISV</div>
|
|
<div class="col-sm-2 dark-blue">Ambito:</div>
|
|
<div class="col-sm-2">##</div>
|
|
<div class="col-sm-2 dark-blue">Area:</div>
|
|
<div class="col-sm-2">N/A</div>
|
|
</div>
|
|
</div>
|
|
<!-- .Card-footer -->
|
|
</div> --}}
|
|
@endif
|
|
@endforeach
|
|
|
|
</body>
|
|
|
|
</html>
|