From 2a2990d0cbf5480c2664a9b1e198896559b6e1f3 Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Wed, 11 Aug 2021 15:54:59 +0800
Subject: [PATCH] 保安证
---
public/securityPrint.html | 289 ++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 202 insertions(+), 87 deletions(-)
diff --git a/public/securityPrint.html b/public/securityPrint.html
index 2df373c..f03c34a 100644
--- a/public/securityPrint.html
+++ b/public/securityPrint.html
@@ -5,12 +5,45 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
+ .fo {
+ width: 100%;
+ height: 800px;
+ position: absolute;
+ /* display: flex; */
+ align-items: center;
+ justify-content: center;
+ background-color: #666666;
+ }
+
+ .print {
+ position: absolute;
+ left: 20px;
+ top: 10px;
+ }
+
#table {
+ margin-left: 35%;
color: #000;
- display: flex;
+ position: fixed;
align-items: center;
justify-content: center;
flex-direction: column;
+ width: 400px;
+ height: 250px;
+ border-radius: 7px;
+ margin-top: -250px;
+ background: url(./img/bazbj.png) no-repeat;
+ background-size: 100% 100%;
+ }
+
+ #table1 {
+ margin-left: 35%;
+ color: #000;
+ width: 400px;
+ height: 250px;
+ background-color: #fff;
+ border-radius: 7px;
+ margin-top: 200px;
}
.user-info-table {
@@ -19,6 +52,58 @@
height: 90%;
border: 1px solid #000;
background-color: #fff;
+ }
+
+ .table-top {
+ width: 100%;
+ height: 20%;
+ margin-top: 20px;
+ text-align: center;
+ font-size: 32px;
+ letter-spacing: 10px;
+ }
+
+ .table-center {
+ font-size: 14px;
+ width: 100%;
+ height: 60%;
+ }
+
+ .table-center-right {
+ width: 70px;
+ height: 70px;
+ line-height: 70px;
+ margin-left: 290px;
+ margin-top: -100px;
+ border-radius: 100px;
+ /* border: 1px solid; */
+ text-align: center;
+ }
+
+ .table-center-right img {
+ width: 70px;
+ display: inline-block;
+ vertical-align: middle;
+ }
+
+ .security-info {
+ margin-left: 20px;
+ margin-top: 18px;
+ }
+
+ .table-down {
+ font-size: 14px;
+ width: 100%;
+ margin-top: -40px;
+ }
+
+ .paper-unit {
+ margin-left: 20px;
+ float: left;
+ }
+
+ .paper-date {
+ margin-left: 215px;
}
.user-info-tr {
@@ -53,104 +138,134 @@
<body>
- <div>
+ <div class="fo">
<div>
- <button onclick="preview(1)">打印</button>
+ <button onclick="preview(1)" class="print">打印</button>
</div>
+
<!--startprint-->
- <div id="table">
- <!-- <span class="title">准考证信息</span>
- <table class="user-info-table" border="1px" align="center" cellspacing="0" cellpadding="10">
- </table>
+ <div id="print">
+ <!-- <div id="table1"></div>
+ <div id="table">
+ <div class="table-top">
+ <span>保安员证</span>
+ </div>
+ <div class="table-center">
+ <div class="table-center-left">
+ <div class="security-info">
+ <span>姓名:</span>
+ <span>张易得</span>
+ </div>
+ <div class="security-info">
+ <span>性别:</span>
+ <span>男</span>
+ </div>
+ <div class="security-info">
+ <span>编号:</span>
+ <span>赣洪202100001</span>
+ </div>
+ </div>
+ <div class="table-center-right">
+ <img src="./img/security.png">
+ </div>
+ </div>
+ <div class="table-down">
+ <div class="paper-unit">
+ <span>发证机关:</span>
+ <span>南昌市公安局</span>
+ </div>
+ <div class="paper-date">
+ <span>发证日期:</span>
+ <span>2021年8月1日</span>
+ </div>
+ </div>
+ </div>
</div> -->
<!--endprint-->
-
</div>
- <script>
- var getData = function(name) {
- var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
- var r = window.location.search.substr(1).match(reg);
- if (r != null) return unescape(r[2]);
- return null;
- };
- var id = JSON.parse(getData("data")).examId;
- var name = JSON.parse(getData("data")).name;
- // console.log(JSON.parse(getData("data")), 111);
- axios.get('http://localhost:81/apply/getApplyDetailList?examId=' + id).then(function(res) {
- var data = res.data;
- var list = data.applyList;
- console.log(data, 123);
- var str = `<span class="title">${data.examName}</span>
- <table class="user-info-table" border="1px" align="center" cellspacing="0" cellpadding="10">
- <tr class="user-info-tr">
- <td width="80px">姓名</td>
- <td width="60px">性别</td>
- <td width="120px">准考证号</td>
- <td width="160px">身份证号</td>
- <td width="300px">单位名称</td>
- <td width="100px">报考证件</td>
- <td width="200px">报名时间</td>
- </tr>`
- for (var k in list) {
- str += `
- <tr class="user-info-tr">
- <td>${list[k].realName}</td>
- <td>${list[k].sex==1?"男":(data.sex==2?"女":"")}</td>
- <td>${list[k].candidateNo}</td>
- <td>${list[k].idCardNo}</td>
- <td>${list[k].deptName}</td>
- <td>${list[k].applyCard}</td>
- <td>${list[k].applyTime}</td>
- </tr>
- `
- }
+ </div>
+ <script>
+ var getData = function(name) {
+ var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+ var r = window.location.search.substr(1).match(reg);
+ if (r != null) return unescape(r[2]);
+ return null;
+ };
+ var id = JSON.parse(getData("data")).userId;
+ var name = JSON.parse(getData("data")).name;
+ console.log(getData("data"), 123);
+ var securityName = JSON.parse(getData("data")).securityName;
+ // console.log(JSON.parse(getData("data")), 111);
- // <tr class="user-info-tr">
- // <td></td>
- // <td></td>
- // <td></td>
- // <td></td>
- // <td></td>
- // <td></td>
- // <td></td>
- // </tr>
+ axios.get('http://localhost:81/apply/userDetail?id=' + id).then(function(res) {
+ var data = res.data.data;
+ var str = `<div id="table1"></div>
+ <div id="table">
+ <div class="table-top">
+ <span>保安员证</span>
+ </div>
+ <div class="table-center">
+ <div class="table-center-left">
+ <div class="security-info">
+ <span>姓名:</span>
+ <span> ${data.realName}</span>
+ </div>
+ <div class="security-info">
+ <span>性别:</span>
+ <span> ${data.sex==1?"男":(data.sex==2?"女":"")}</span>
+ </div>
+ <div class="security-info">
+ <span>编号:</span>
+ <span> ${data.securitynumber}</span>
+ </div>
+ </div>
+ <div class="table-center-right">
+ <img src="${data.myPicture}">
+ </div>
+ </div>
+ <div class="table-down">
+ <div class="paper-unit">
+ <span>发证机关:</span>
+ <span> 南昌市公安局</span>
+ </div>
+ <div class="paper-date">
+ <span>发证日期:</span>
+ <span> </span>
+ </div>
+ </div>
+ </div>
+ </div>`
- str += ` <tr class="user-info-tr">
- <td>总人数</td>
- <td colspan="6">${data.num}人</td>
- </tr>
+ var dom = $('#print');
+ dom.empty();
+ dom.append(str);
+ })
- </table>
- </div>`
-
- var dom = $('#table');
- dom.empty();
- dom.append(str);
- })
-
- function preview(oper) {
- if (oper < 10) {
- bdhtml = window.document.body.innerHTML;
- // 打印开始的标志
- sprnstr = "<!--startprint-->";
- // 打印结束的标志
- eprnstr = "<!--endprint-->";
- // 从打印开始的位置截取到末尾
- prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr));
- // 从开始截取到打印结束的位置
- prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
- // 替换html
- window.document.body.innerHTML = prnhtml;
- // 打印
- window.print();
- window.document.body.innerHTML = bdhtml;
- } else {
- window.print();
- }
+ function preview(oper) {
+ if (oper < 10) {
+ bdhtml = window.document.body.innerHTML;
+ // 打印开始的标志
+ sprnstr = "<!--startprint-->";
+ // 打印结束的标志
+ eprnstr = "<!--endprint-->";
+ // 从打印开始的位置截取到末尾
+ prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr));
+ // 从开始截取到打印结束的位置
+ prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
+ // 替换html
+ window.document.body.innerHTML = prnhtml;
+ // 打印
+ window.print();
+ window.document.body.innerHTML = bdhtml;
+ } else {
+ window.print();
}
- </script>
+ }
+ </script>
</body>
+</html>
+
</html>
\ No newline at end of file
--
Gitblit v1.9.3