322 lines
13 KiB
PHP
322 lines
13 KiB
PHP
<!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;
|
|
}
|
|
|
|
.img-istp {
|
|
margin-top: 4mm;
|
|
width: 15mm;
|
|
height: 15mm;
|
|
}
|
|
|
|
.card-header {
|
|
flex-basis: 40%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 0;
|
|
/* Remove qualquer padding adicional */
|
|
}
|
|
|
|
.title-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
.card-footer {
|
|
flex-basis: 60%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* Stack rows vertically */
|
|
justify-content: space-between;
|
|
/* Distribute space evenly */
|
|
text-align: center;
|
|
}
|
|
|
|
.card-footer .row {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-left: 0.4px;
|
|
/* flex-grow: 1; */
|
|
/* Make each row grow equally to fill the space */
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 1px solid gray;
|
|
/* Optional: add some separation between rows */
|
|
}
|
|
|
|
.qr-code {
|
|
/* margin-top: 5px; */
|
|
width: 15mm;
|
|
height: 15mm;
|
|
}
|
|
|
|
.tag-name-qrcode {
|
|
font-size: 10px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.img-company {
|
|
margin-top: 7px;
|
|
width: 12mm;
|
|
height: 12mm;
|
|
}
|
|
|
|
.blue {
|
|
background-color: #09255C;
|
|
color: white;
|
|
/* border-radius: 5px; */
|
|
|
|
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;
|
|
/* border-radius: 5px; */
|
|
|
|
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;
|
|
/* border-radius: 5px; */
|
|
|
|
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 title-card 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-4 blue">Dim.Ent:</div>
|
|
<div class="col-sm">###</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-4 blue">Dim.Sai:</div>
|
|
<div class="col-sm">###</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-4 blue">Equip:</div>
|
|
<div class="col-sm">###</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-2 blue" style="padding-right: 1px;">T.Fluido:</div>
|
|
<div class="col-sm-2">N/A</div>
|
|
<div class="col-sm-2 blue">Pressao:</div>
|
|
<div class="col-sm-2">N/A</div>
|
|
<div class="col-sm-2 blue">C.Pressao</div>
|
|
<div class="col-sm-2">##</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-2 blue" style="padding-right: 0.5px;">T.Val:</div>
|
|
<div class="col-sm-2">PSV</div>
|
|
<div class="col-sm-2 blue">Ambito:</div>
|
|
<div class="col-sm-2">##</div>
|
|
<div class="col-sm-2 blue">Area:</div>
|
|
<div class="col-sm-2">N/A</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>
|