| | |
| | | :upload-after="uploadAfter2"> |
| | | </avue-form> |
| | | </el-dialog> |
| | | <div style="position: fixed; left: 99999999px; width: 100%; height: 100%;"> |
| | | <certificate |
| | | ref="certificate" |
| | | :data="certificateObj"></certificate> |
| | | <div style="position: fixed; top: 9999px; width: 100%; height: 100%;"> |
| | | <div class="certificate_box" |
| | | id="certificateDom"> |
| | | <div class="security_main" |
| | | ref="certificateBox"> |
| | | <div class="security_m_l_titleName widt"> |
| | | {{ certificateObj.realName }} |
| | | </div> |
| | | <div class="security_m_l_titlepaperTimenian widt"> |
| | | {{ certificateYear }} |
| | | </div> |
| | | <div class="security_m_l_titlepaperTimeyue widt"> |
| | | {{ certificateMonth }} |
| | | </div> |
| | | <div class="security_m_l_downsecuritynumber widt"> |
| | | {{ certificateObj.securitynumber }} |
| | | </div> |
| | | <div class="security_m_r_o_right widt"> |
| | | {{ certificateObj.realName }} |
| | | </div> |
| | | <div class="security_m_r_o_rightbirthday widt"> |
| | | {{ certificateObj.cardid ? (certificateObj.cardid.slice(6, 10) +'.'+ certificateObj.cardid.slice(10, 12) +'.'+ certificateObj.cardid.slice(12, 14)) : '' }} |
| | | </div> |
| | | <div class="security_m_r_o_rightaddress security_m_r_o_l_r widt"> |
| | | {{ certificateObj.registered }} |
| | | </div> |
| | | <div class="security_m_r_o_rightcardid"> |
| | | {{ certificateObj.cardid }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </basic-container> |
| | | </el-col> |
| | |
| | | import { getToken } from "@/util/auth"; |
| | | import { securityFormPageColumn } from "./data"; |
| | | import { mapState } from "vuex"; |
| | | import certificate from "./certificate.vue"; |
| | | import { |
| | | updatePaperTime |
| | | } from "@/api/system/user"; |
| | | |
| | | export default { |
| | | data () { |
| | |
| | | } |
| | | }; |
| | | return { |
| | | certificateObj: { title: "我是头部标题", }, |
| | | certificateYear: null, |
| | | certificateMonth: null, |
| | | certificateFlag: false, |
| | | certificateObj: { |
| | | realName: '', |
| | | securitynumber: '', |
| | | cardid: '', |
| | | registered: '' |
| | | }, |
| | | securityid: "", |
| | | excelBox1: false, |
| | | excelBox2: false, |
| | |
| | | }, |
| | | }; |
| | | }, |
| | | components: { certificate }, |
| | | watch: { |
| | | "form.tenantId" () { |
| | | if (this.form.tenantId !== "" && this.initFlag) { |
| | |
| | | //行点击事件 |
| | | certificateClick (row) { |
| | | if (row) { |
| | | for (var k in row) { |
| | | this.certificateObj[k] = row[k]; |
| | | } |
| | | |
| | | this.$refs.certificate.Print(); |
| | | var time = this.getNewTime() |
| | | this.certificateYear = time[0] |
| | | this.certificateMonth = time[1] |
| | | this.certificateObj = row |
| | | setTimeout(() => { |
| | | this.Print(); |
| | | }, 500); |
| | | } |
| | | }, |
| | | Print () { |
| | | if (this.certificateObj.registered == '' || this.certificateObj.registered == null) { |
| | | this.$message({ message: '请完善住址信息', type: 'warning' }) |
| | | return |
| | | } |
| | | //更新发证时间 |
| | | this.updateUserInfo(); |
| | | var printDom = document.getElementById("certificateDom"); |
| | | printDom.style.position = "fixed"; |
| | | printDom.style.top = "-28.5%"; |
| | | printDom.style.left = "-23%"; |
| | | printDom.style.width = "120%"; |
| | | printDom.style.height = "100%"; |
| | | printDom.style.fontFamily = "SimSun"; |
| | | this.$Print(this.$refs.certificateBox); |
| | | printDom.style.position = "relative"; |
| | | printDom.style.left = "0"; |
| | | printDom.style.width = "100%"; |
| | | printDom.style.height = "auto"; |
| | | }, |
| | | getNewTime () { |
| | | var nowTime = new Date() |
| | | |
| | | var oneHoursAgo = new Date(new Date(nowTime).getTime() - 1 * 60 * 60 * 1000) |
| | | var oneHoursAgoY = oneHoursAgo.getFullYear() |
| | | var oneHoursAgoM = oneHoursAgo.getMonth() + 1 < 10 ? '0' + (oneHoursAgo.getMonth() + 1) : oneHoursAgo.getMonth() + 1 |
| | | |
| | | /** |
| | | * @return 返回1小时,2小时,3小时,4小时,24小时 |
| | | */ |
| | | return [oneHoursAgoY, oneHoursAgoM] |
| | | }, |
| | | //更新用户发证时间 |
| | | updateUserInfo () { |
| | | var nowTime = new Date() |
| | | var oneHoursAgo = new Date(new Date(nowTime).getTime() - 1 * 60 * 60 * 1000) |
| | | var oneHoursAgoY = oneHoursAgo.getFullYear() |
| | | var oneHoursAgoM = oneHoursAgo.getMonth() + 1 < 10 ? '0' + (oneHoursAgo.getMonth() + 1) : oneHoursAgo.getMonth() + 1 |
| | | var day = oneHoursAgo.getDay(); |
| | | var date = oneHoursAgoY + "-" + oneHoursAgoM + "-" + day; |
| | | const data = { |
| | | id: this.data.id, |
| | | rtime: this.data.rtime, |
| | | userType: 6, |
| | | paperTime: date |
| | | } |
| | | updatePaperTime(data); |
| | | }, |
| | | rowClickSelf (row) { |
| | | this.$router.push({ |
| | |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | //保安证 本子 |
| | | .certificate_box { |
| | | width: 100%; |
| | | height: 90%; |
| | | background-color: #fff; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | flex-direction: column; |
| | | font: bold 18px 'SimSun' !important; |
| | | } |
| | | .security_main { |
| | | width: 630px; |
| | | height: 512px; |
| | | // border: 1px solid rgba($color: #a5a5a5, $alpha: 0.5); |
| | | // display: flex; |
| | | // align-items: center; |
| | | // justify-content: space-around; |
| | | // background-size: 100% 100%; |
| | | // background-repeat: no-repeat; |
| | | position: relative; |
| | | } |
| | | // 标题 |
| | | $upTop: 45px; |
| | | $downTop: 260px; //整体高度 |
| | | //经国家保安员考试审查合格。<br />特颁此证。 |
| | | .security_main-title { |
| | | position: absolute; |
| | | top: $upTop; |
| | | left: 34px; |
| | | line-height: 45px; |
| | | letter-spacing: 3px; |
| | | } |
| | | //发证公安机关 (印章) |
| | | .security_m_l_center { |
| | | position: absolute; |
| | | top: 270px; |
| | | left: 30px; |
| | | line-height: 40px; |
| | | } |
| | | //证件编号 |
| | | .security_m_l_down { |
| | | position: absolute; |
| | | top: 379px; |
| | | left: 32px; |
| | | } |
| | | |
| | | $rightLeft: 343px; |
| | | $rightFontSize: 18px; |
| | | $rightWidth: 77px; |
| | | |
| | | $lineHigeht: 30px; |
| | | //姓名 |
| | | .security_m_r_a { |
| | | position: absolute; |
| | | top: $downTop; |
| | | left: $rightLeft; |
| | | width: $rightWidth; |
| | | text-align: justify; |
| | | text-align-last: justify; |
| | | } |
| | | //出生年月 |
| | | .security_m_r_b { |
| | | position: absolute; |
| | | top: $downTop + $lineHigeht * 1; |
| | | left: $rightLeft; |
| | | width: $rightWidth; |
| | | text-align: justify; |
| | | text-align-last: justify; |
| | | } |
| | | //地址 |
| | | .security_m_r_c { |
| | | position: absolute; |
| | | top: $downTop + $lineHigeht * 2; |
| | | left: $rightLeft; |
| | | width: $rightWidth; |
| | | text-align: justify; |
| | | text-align-last: justify; |
| | | } |
| | | //公民身份证 |
| | | .security_m_r_d { |
| | | position: absolute; |
| | | top: 363px; |
| | | left: $rightLeft; |
| | | width: $rightWidth; |
| | | text-align: justify; |
| | | text-align-last: justify; |
| | | } |
| | | //照片 |
| | | // width: calc(358px / 22px); |
| | | // height: calc(441px / 22px); |
| | | .security_m_r_imgs { |
| | | width: calc(358px / 3); |
| | | height: calc(441px / 3); |
| | | position: absolute; |
| | | top: $upTop; |
| | | left: 421px; |
| | | img { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | |
| | | // 内容 |
| | | // 抬头名字 |
| | | .security_m_l_titleName { |
| | | position: absolute; |
| | | top: 35px; |
| | | left: 121px; |
| | | right: 0; |
| | | line-height: 45px; |
| | | letter-spacing: 3px; |
| | | } |
| | | //发证时间 |
| | | $timeTop: 309px; //整体高度 |
| | | //年 |
| | | .security_m_l_titlepaperTimenian { |
| | | position: absolute; |
| | | top: $timeTop; |
| | | left: 110px; |
| | | line-height: 40px; |
| | | } |
| | | //月 |
| | | .security_m_l_titlepaperTimeyue { |
| | | position: absolute; |
| | | top: $timeTop; |
| | | left: 169px; |
| | | line-height: 40px; |
| | | } |
| | | //日 |
| | | .security_m_l_titlepaperTimeri { |
| | | position: absolute; |
| | | top: $timeTop; |
| | | left: 159px; |
| | | line-height: 40px; |
| | | } |
| | | //证件编号 |
| | | .security_m_l_downsecuritynumber { |
| | | position: absolute; |
| | | top: 379px; //整体高度 |
| | | left: 145px; |
| | | } |
| | | |
| | | //内容 |
| | | // 姓名 |
| | | $centerLeft: 458px; |
| | | .security_m_r_o_right { |
| | | position: absolute; |
| | | top: $downTop + $lineHigeht * 0-2px; |
| | | left: $centerLeft; |
| | | // width: $rightWidth; |
| | | } |
| | | // 生日 |
| | | .security_m_r_o_rightbirthday { |
| | | position: absolute; |
| | | top: $downTop + $lineHigeht * 1-4px; |
| | | left: $centerLeft; |
| | | // width: $rightWidth; |
| | | } |
| | | // 地址 |
| | | .security_m_r_o_rightaddress { |
| | | position: absolute; |
| | | top: $downTop + $lineHigeht * 2 -6px; |
| | | left: $centerLeft; |
| | | width: 160px; |
| | | font: bold 16px 'SimSun' !important; |
| | | } |
| | | // 身份证 |
| | | .security_m_r_o_rightcardid { |
| | | position: absolute; |
| | | top: $downTop + $lineHigeht * 4 -12px; |
| | | left: $centerLeft; |
| | | // width: $rightWidth; |
| | | } |
| | | //背景图 |
| | | .security_main_backImge { |
| | | position: absolute; |
| | | width: 100%; |
| | | height: 100%; |
| | | background-image: url(/img/securityCertificate/bazsss.png); |
| | | background-size: 100% 100%; |
| | | background-repeat: no-repeat; |
| | | } |
| | | </style> |