<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../jquery.min.js"></script>
<script src="../jquery.qrcode.min.js"></script>
<script>
window.addEventListener('message',function(){
// console.log(`get event data is:`,event.data);
console.log(`get event data is:`,JSON.parse(event.data));
let deviceInfoArr = JSON.parse(event.data) || [];
let oHtml = '';
deviceInfoArr.forEach((element,index) => {
// console.log(`run!!!!!!!!!!!!`);
let tpl = `<div class="inner">
<div class="inPadBox">
<table width="200%" class="comPrintTable">
<tr>
<th colspan="3" class="title">设备标签卡</th>
</tr>
<tr>
<td width="22%" class="center">设备编号</td>
<td colspan="2"><span class="fieldCode">${element.code ? element.code : '空'}</span></td>
</tr>
<tr>
<td class="center">设备名称</td>
<td colspan="2"><span class="fieldName">${element.name ? element.name : '空'}</span></td>
</tr>
<tr>
<td class="center">规格型号</td>
<td valign="middle" width="38%"><span class="fieldModel">${element.modelSpecification ? element.modelSpecification : '空'}</span></td>
<td rowspan="3" valign="top" class="center" style="vertical-align:top;text-align:center"><div class='qrcode-${index} comQrcode' oValue = ${element?.uniqueCode}></div>
</td>
</tr>
<tr>
<td class="center">管制编号</td>
<td valign="middle"><span class="fieldBat">${element.controlCode ? element.controlCode :'空'}</span></td></td>
</tr>
<tr>
<td class="center">管理单位</td>
<td valign="middle"><span class="fieldDepart">${element.organization?.name ? element?.organization?.name : '空'}</span></td>
</tr>
</table>
</div>
</div>`;
oHtml += tpl;
});
$("#J_big_parent").empty().append(oHtml);
$(".comQrcode").each(function(){
let oValue = $(this).attr("oValue");
console.log(`uninick oValue is:`,oValue);
oValue && $(this).qrcode({
render: "canvas", //也可以替换为table
width: 220,
height: 220,
text:oValue
});
});
})
</script>
<title>设备标签卡</title>
<style>
body{
font-size: 6px;
position: relative;
height: 100%;
}
html { -webkit-text-size-adjust: none;height: 100%;}
*{
margin:0;
padding:0;
}
.comPrintTable{
border-collapse: collapse;
border-spacing: 0;
}
.comPrintTable th,.comPrintTable td{
border:1px solid #000000;
padding:14px 5px;
font-size: 14pt;
}
.comPrintTable .title{
font-size: 20pt;
padding:16px 5px;
}
.comPrintTable .center{
text-align: center;
}
.comQrcode canvas{
vertical-align: top;
margin-top: -12px;
}
@media print {
@page {
size: auto;
margin: 0mm;
}
html { -webkit-text-size-adjust: none; }
/* table { page-break-inside:auto } */
/* tr{ page-break-inside:avoid; page-break-after:auto } */
div{
font-size: 6pt;
-webkit-text-size-adjust: none;
}
.inner{
page-break-after:always;
height: 100%;
/* margin:12px 0 5px 8px; */
margin-left: 5px;
margin-right: 2px;
/* margin:0; */
}
.inPadBox{
padding-top: 24px;
padding-right: 6px;
}
}
</style>
</head>
<body>
<!-- <div style="transform: scale(0.5);transform-origin: 0 0;position: absolute;left:0;top:0"> -->
<div style="transform: scale(0.5);transform-origin: 0 0;" id="J_big_parent">
<!-- <div class="inner">
<div class="inPadBox">
<table width="200%" border = "0" class="test">
<tr>
<th colspan="3" class="title">设备标签卡</th>
</tr>
<tr>
<td width="22%" class="center">设备编号</td>
<td colspan="2">oyEPxTHBox</td>
</tr>
<tr>
<td class="center">设备名称</td>
<td colspan="2">A2高配房低压电表-9</td>
</tr>
<tr>
<td class="center">规格型号</td>
<td valign="top">11</td>
<td rowspan="3" valign="top" class="center">
<img src="./2.jpg" style = "width:120px" alt="">
</td>
</tr>
<tr>
<td class="center">管制编号</td>
<td valign="top">AMD-LH20-7667777</td>
</tr>
<tr>
<td class="center">管理单位</td>
<td valign="top">华南能源托管部</td>
</tr>
</table>
</div>
</div>
<div class="inner">
<div class="inPadBox">
<table width="200%" border = "0" class="test">
<tr>
<th colspan="3" class="title">设备标签卡</th>
</tr>
<tr>
<td width="22%" class="center">设备编号</td>
<td colspan="2">oyEPxTHBox</td>
</tr>
<tr>
<td class="center">设备名称</td>
<td colspan="2">A2高配房低压电表-9</td>
</tr>
<tr>
<td class="center">规格型号</td>
<td valign="top">11</td>
<td rowspan="3" valign="top" class="center">
<img src="./2.jpg" style = "width:120px" alt="">
</td>
</tr>
<tr>
<td class="center">管制编号</td>
<td valign="top">AMD-LH20-7667777</td>
</tr>
<tr>
<td class="center">管理单位</td>
<td valign="top">华南能源托管部</td>
</tr>
</table>
</div>
</div> -->
<!-- <div class="inner">
<table width="200%" border = "0" class="test">
<tr>
<th colspan="3" class="title">设备标签卡</th>
</tr>
<tr>
<td width="22%" class="center">设备编号</td>
<td colspan="2">oyEPxTHBox</td>
</tr>
<tr>
<td class="center">设备名称</td>
<td colspan="2">A2高配房低压电表-9</td>
</tr>
<tr>
<td class="center">规格型号</td>
<td valign="top">11</td>
<td rowspan="3" valign="top">
<img src="./2.jpg" style = "width:120px" alt="">
</td>
</tr>
<tr>
<td class="center">管制编号</td>
<td valign="top">AMD-LH20-7667777</td>
</tr>
<tr>
<td class="center">管理单位</td>
<td valign="top">华南能源托管部</td>
</tr>
</table>
</div>
<div class="inner">
<table width="200%" border = "0" class="test">
<tr>
<th colspan="3" class="title">设备标签卡</th>
</tr>
<tr>
<td width="22%" class="center">设备编号</td>
<td colspan="2">oyEPxTHBox</td>
</tr>
<tr>
<td class="center">设备名称</td>
<td colspan="2">A2高配房低压电表-9</td>
</tr>
<tr>
<td class="center">规格型号</td>
<td valign="top">11</td>
<td rowspan="3" valign="top">
<img src="./2.jpg" style = "width:120px" alt="">
</td>
</tr>
<tr>
<td class="center">管制编号</td>
<td valign="top">AMD-LH20-7667777</td>
</tr>
<tr>
<td class="center">管理单位</td>
<td valign="top">华南能源托管部</td>
</tr>
</table>
</div>
<div class="inner">
<table width="200%" border = "0" class="test">
<tr>
<th colspan="3" class="title">设备标签卡</th>
</tr>
<tr>
<td width="22%" class="center">设备编号</td>
<td colspan="2">oyEPxTHBox</td>
</tr>
<tr>
<td class="center">设备名称</td>
<td colspan="2">A2高配房低压电表-9</td>
</tr>
<tr>
<td class="center">规格型号</td>
<td valign="top">11</td>
<td rowspan="3" valign="top">
<img src="./2.jpg" style = "width:120px" alt="">
</td>
</tr>
<tr>
<td class="center">管制编号</td>
<td valign="top">AMD-LH20-7667777</td>
</tr>
<tr>
<td class="center">管理单位</td>
<td valign="top">华南能源托管部</td>
</tr>
</table>
</div> -->
</div>
</body>
</html>