From c4e67a8942e514b65ab41bb19781d50576c15725 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Fri, 24 Sep 2021 19:56:52 +0800
Subject: [PATCH] 用户
---
public/securityPrint.html | 318 ++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 231 insertions(+), 87 deletions(-)
diff --git a/public/securityPrint.html b/public/securityPrint.html
index 2df373c..d920bb3 100644
--- a/public/securityPrint.html
+++ b/public/securityPrint.html
@@ -5,12 +5,51 @@
<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;
+ }
+
+ .print {
+ position: relative;
+ left: 45%;
+ margin-top: 30px;
+ width: 7%;
+ height: 36px;
+ border-radius: 9px;
+ background-color: #409EFF;
+ border: 0px;
+ color: #fff;
+ letter-spacing: 4px;
+ }
+
#table {
+ margin-left: 26%;
color: #000;
- display: flex;
+ position: fixed;
align-items: center;
justify-content: center;
flex-direction: column;
+ width: 750px;
+ height: 550px;
+ border-radius: 7px;
+ margin-top: -550px;
+ background: url(./img/bazbj.png) no-repeat;
+ background-size: 100% 100%;
+ }
+
+ #table1 {
+ margin-left: 26%;
+ color: #000;
+ width: 750px;
+ height: 550px;
+ background-color: #fff;
+ border-radius: 7px;
+ margin-top: 100px;
}
.user-info-table {
@@ -19,6 +58,66 @@
height: 90%;
border: 1px solid #000;
background-color: #fff;
+ }
+
+ .table-top {
+ width: 100%;
+ height: 16%;
+ margin-top: 30px;
+ text-align: center;
+ font-size: 4rem;
+ letter-spacing: 15px;
+ }
+
+ .table-center {
+ font-size: 2rem;
+ width: 100%;
+ height: 60%;
+ font-weight: 200;
+ }
+
+ .img-title {
+ width: 100%;
+ font-size: 14px;
+ }
+
+ .table-center-right {
+ width: 152px;
+ height: 205px;
+ line-height: 205px;
+ margin-left: 510px;
+ margin-top: -350px;
+ border-radius: 10px;
+ /* border: 1px solid; */
+ text-align: center;
+ }
+
+ .table-center-right img {
+ width: 100%;
+ height: 100%;
+ display: inline-block;
+ vertical-align: middle;
+ border-radius: 10px;
+ }
+
+ .security-info {
+ margin-left: 5rem;
+ margin-top: 1.8rem;
+ }
+
+ .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 {
@@ -46,6 +145,15 @@
width: 150px;
/* height: 200px; */
}
+
+ .avatar {
+ width: 100%;
+ }
+
+ .qrCode {
+ margin-top: 0px;
+ margin-left: 25px;
+ }
</style>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
@@ -53,104 +161,140 @@
<body>
- <div>
- <div>
- <button onclick="preview(1)">打印</button>
- </div>
+ <div class="fo">
+
+
<!--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);
+ <div>
+ <button onclick="preview(1)" class="print">打印</button>
+ </div>
+ </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);
- 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>`
+ axios.get('http://223.82.109.183:2080/api/apply/userDetail?id=' + id).then(function(res) {
- 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>
- `
- }
-
- // <tr class="user-info-tr">
- // <td></td>
- // <td></td>
- // <td></td>
- // <td></td>
- // <td></td>
- // <td></td>
- // <td></td>
- // </tr>
-
- str += ` <tr class="user-info-tr">
- <td>总人数</td>
- <td colspan="6">${data.num}人</td>
- </tr>
-
- </table>
- </div>`
-
- var dom = $('#table');
+ var data = res.data.data;
+ var img = data.avatar ? `<div class="avatar"><img src="${data.avatar}"></div>` : `<div class="img-title">暂无照片</div>`
+ axios.get('http://223.82.109.183:2080/api/qrCode/getQrCodeBase64?securityNumber=' + data.securitynumber).then(function(res1) {
+ console.log(res1.data, 333);
+ var qrCode = res1.data ? `<div class="qrCode"><img src="${res1.data}"></div>` : `<div"></div>`
+ 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 class="security-info">
+ <span>发证机关:</span>
+ <span> 南昌市公安局</span>
+ </div>
+ <div class="security-info">
+ <span>发证日期:</span>
+ <span> ${data.paperTime}</span>
+ </div>
+ </div>
+ <div class="table-center-right">
+ ${img}
+ ${qrCode}
+ </div>
+ </div>
+ </div>
+ </div>`
+ // <img src="${data.avatar}">
+ var dom = $('#print');
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