<template>
|
<div class="securityCertificate"
|
id="securityCertificate">
|
<div class="security_main"
|
ref="securityCertificate">
|
<!-- 标题 -->
|
<div class="security_main_backImge no-print"></div>
|
<div class="security_main-title no-print">
|
|
<span style="letter-spacing: 0px">____________</span>
|
经国家<br />保安员考试审查合格。<br />特颁此证。
|
</div>
|
<div class="security_m_l_center no-print">
|
发证公安机关 （印章）<br />
|
发证日期
|
年 月
|
</div>
|
<div class="security_m_l_down no-print">证件编号</div>
|
<div class="security_m_r_a no-print">姓名</div>
|
<div class="security_m_r_b no-print">出生年月</div>
|
<div class="security_m_r_c no-print">地址</div>
|
<div class="security_m_r_d no-print">公民身份<br />号码</div>
|
<!-- 内容 -->
|
<div class="security_m_r_imgs no-print">
|
<div v-if="!data.avatar">暂无照片</div>
|
<img :src="data.avatar"
|
alt=""
|
v-else />
|
</div>
|
<div class="security_m_l_titleName widt">{{ data.realName }}</div>
|
<div class="security_m_l_titlepaperTimenian widt">
|
{{ year }}
|
</div>
|
<div class="security_m_l_titlepaperTimeyue widt">
|
{{ month }}
|
</div>
|
<!-- <div class="security_m_l_titlepaperTimeri">
|
{{ data.paperTime.slice(8, 10) }}
|
</div> -->
|
<div class="security_m_l_downsecuritynumber widt">
|
{{ data.securitynumber }}
|
</div>
|
<div class="security_m_r_o_right widt">{{ data.realName }}</div>
|
<div class="security_m_r_o_rightbirthday widt">
|
{{ data.cardid.slice(6, 10) }}.{{ data.cardid.slice(10, 12) }}.{{ data.cardid.slice(12, 14) }}
|
</div>
|
<div class="security_m_r_o_rightaddress security_m_r_o_l_r widt">
|
{{ data.registered }}
|
</div>
|
<div class="security_m_r_o_rightcardid">{{ data.cardid }}</div>
|
</div>
|
<!-- <span slot="footer"
|
class="dialog-footer no-print PrintBut"
|
v-if='permission.securityGuard_securityCertificate'>
|
<el-button type="primary"
|
@click="Print">打 印</el-button>
|
</span> -->
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
import dictVertical from "../util/demo/dict-vertical.vue";
|
import {
|
updatePaperTime
|
} from "@/api/system/user";
|
export default {
|
data () {
|
return {
|
year: null,
|
month: null
|
}
|
},
|
components: { dictVertical },
|
props: ["data"],
|
created () {
|
var time = this.getNewTime()
|
this.year = time[0]
|
this.month = time[1]
|
},
|
computed: {
|
...mapGetters(["userInfo", "permission"]),
|
},
|
methods: {
|
Print () {
|
if (this.data.registered == '' || this.data.registered == null) {
|
this.$message({ message: '请完善住址信息', type: 'warning' })
|
return
|
}
|
//更新发证时间
|
this.updateUserInfo();
|
var printDom = document.getElementById("securityCertificates");
|
|
console.log(printDom)
|
|
|
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.securityCertificate);
|
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);
|
}
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
//保安证 本子
|
.securityCertificate {
|
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: 660px;
|
height: 512px;
|
// border: 1px solid rgba($color: #a5a5a5, $alpha: 0.5);
|
// display: flex;
|
// align-items: center;
|
// justify-content: space-around;
|
// background-image: url(/img/securityCertificate/bazsss.png);
|
// background-size: 100% 100%;
|
// background-repeat: no-repeat;
|
position: relative;
|
}
|
// 标题
|
$upTop: 45px;
|
$downTop: 265px; //整体高度
|
//经国家保安员考试审查合格。<br />特颁此证。
|
.security_main-title {
|
position: absolute;
|
top: $upTop;
|
left: 34px;
|
line-height: 45px;
|
letter-spacing: 3px;
|
}
|
//发证公安机关 （印章）
|
.security_m_l_center {
|
position: absolute;
|
top: 267px;
|
left: 30px;
|
line-height: 40px;
|
}
|
//证件编号
|
.security_m_l_down {
|
position: absolute;
|
top: 370px;
|
left: 32px;
|
}
|
|
$rightLeft: 354px;
|
$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: 382px;
|
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: 45px;
|
left: 121px;
|
line-height: 45px;
|
letter-spacing: 3px;
|
}
|
//发证时间
|
$timeTop: 306px; //整体高度
|
//年
|
.security_m_l_titlepaperTimenian {
|
position: absolute;
|
top: $timeTop;
|
left: 107px;
|
line-height: 40px;
|
}
|
//月
|
.security_m_l_titlepaperTimeyue {
|
position: absolute;
|
top: $timeTop;
|
left: 172px;
|
line-height: 40px;
|
}
|
//日
|
.security_m_l_titlepaperTimeri {
|
position: absolute;
|
top: $timeTop;
|
left: 159px;
|
line-height: 40px;
|
}
|
//证件编号
|
.security_m_l_downsecuritynumber {
|
position: absolute;
|
top: 370px; //整体高度
|
left: 145px;
|
}
|
|
//内容
|
// 姓名
|
$centerLeft: 448px;
|
.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+6px;
|
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;
|
}
|
// .widt{
|
// }
|
</style>
|
