19eea07041
- 설비 상세 basic-info 탭에 QR 코드 표시 (qrcode.js CDN)
- QR PNG 다운로드/인쇄 기능
- 모바일 전용 레이아웃 (layouts/mobile.blade.php)
- 모바일 점검 페이지 (/m/inspect/{id})
- setResult API (PATCH /inspections/set-result)
- 4버튼 직접 결과 설정 (양호/이상/수리/취소)
- 전체 양호 일괄 처리
- 주기 탭 전환 (활성 주기만 표시)
76 lines
3.8 KiB
PHP
76 lines
3.8 KiB
PHP
{{-- QR 코드 (모바일 점검용) --}}
|
|
<div class="bg-white rounded-lg shadow-sm p-6 mb-6">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">QR 코드 (모바일 점검)</h2>
|
|
<div class="flex items-start gap-6">
|
|
<div>
|
|
<div id="qr-code-container" class="bg-white p-2 border rounded-lg inline-block"></div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="text-sm font-mono text-gray-700 mb-1">{{ $equipment->equipment_code }}</p>
|
|
<p class="text-base font-semibold text-gray-900 mb-3">{{ $equipment->name }}</p>
|
|
<p class="text-xs text-gray-500 mb-4 break-all" id="qr-url-text"></p>
|
|
<div class="flex gap-2">
|
|
<button onclick="downloadQrCode()" class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 transition">
|
|
<svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
|
|
PNG 다운로드
|
|
</button>
|
|
<button onclick="printQrCode()" class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">
|
|
<svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
|
|
인쇄
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
|
|
<script>
|
|
(function() {
|
|
const qrUrl = @json(\App\Services\QrCodeService::inspectionUrl($equipment->id));
|
|
const equipCode = @json($equipment->equipment_code);
|
|
const equipName = @json($equipment->name);
|
|
|
|
document.getElementById('qr-url-text').textContent = qrUrl;
|
|
|
|
new QRCode(document.getElementById('qr-code-container'), {
|
|
text: qrUrl,
|
|
width: 150,
|
|
height: 150,
|
|
colorDark: '#000000',
|
|
colorLight: '#ffffff',
|
|
correctLevel: QRCode.CorrectLevel.M,
|
|
});
|
|
|
|
window.downloadQrCode = function() {
|
|
const canvas = document.querySelector('#qr-code-container canvas');
|
|
if (!canvas) return;
|
|
|
|
canvas.toBlob(function(blob) {
|
|
const a = document.createElement('a');
|
|
a.href = URL.createObjectURL(blob);
|
|
a.download = 'QR_' + equipCode + '.png';
|
|
a.click();
|
|
URL.revokeObjectURL(a.href);
|
|
}, 'image/png');
|
|
};
|
|
|
|
window.printQrCode = function() {
|
|
const canvas = document.querySelector('#qr-code-container canvas');
|
|
if (!canvas) return;
|
|
|
|
const dataUrl = canvas.toDataURL('image/png');
|
|
const win = window.open('', '_blank', 'width=400,height=500');
|
|
win.document.write(`<!DOCTYPE html><html><head><title>QR 코드 인쇄</title>
|
|
<style>body{text-align:center;font-family:sans-serif;padding:20px}
|
|
img{margin:20px auto}p{margin:8px 0}</style></head><body>
|
|
<img src="${dataUrl}" width="200" height="200">
|
|
<p style="font-weight:bold;font-size:16px">${equipCode}</p>
|
|
<p style="font-size:14px">${equipName}</p>
|
|
<p style="font-size:10px;color:#888">${qrUrl}</p>
|
|
<script>window.onload=function(){window.print();}<\/script>
|
|
</body></html>`);
|
|
win.document.close();
|
|
};
|
|
})();
|
|
</script>
|