From 87141d214ec3d1d64da6e78340d8894a3dc11755 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 05 Nov 2021 14:36:07 +0800
Subject: [PATCH] 调整
---
/dev/null | 315 ----------------------------
src/views/securityGuard/securityGuard.vue | 293 +++++++++++++++++++++++++-
2 files changed, 281 insertions(+), 327 deletions(-)
diff --git a/src/views/securityGuard/certificate.vue b/src/views/securityGuard/certificate.vue
deleted file mode 100644
index 8be423a..0000000
--- a/src/views/securityGuard/certificate.vue
+++ /dev/null
@@ -1,315 +0,0 @@
-<template>
- <div class="certificate_box"
- id="certificateDom">
-
- <div class="security_main"
- ref="certificateBox">
- <!-- 标题 -->
- <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_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 ? data.cardid.slice(6, 10) : '' }}.{{ data.cardid ? data.cardid.slice(10, 12) : '' }}.{{ data.cardid ? 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>
- </div>
-</template>
-
-<script>
-import { mapGetters } from "vuex";
-import dictVertical from "../util/demo/dict-vertical.vue";
-import {
- update
-} from "@/api/system/user";
-export default {
- name: 'certificate',
- 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("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,
- paperTime: date
- }
- update(data);
- }
- },
-};
-</script>
-
-<style lang="scss" scoped>
-//保安证 本子
-.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;
- 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;
-}
-// .widt{
-// }
-</style>
diff --git a/src/views/securityGuard/securityGuard.vue b/src/views/securityGuard/securityGuard.vue
index 10b3cce..2b24fca 100644
--- a/src/views/securityGuard/securityGuard.vue
+++ b/src/views/securityGuard/securityGuard.vue
@@ -266,10 +266,37 @@
: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>
@@ -300,7 +327,9 @@
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 () {
@@ -385,7 +414,15 @@
}
};
return {
- certificateObj: { title: "我是头部标题", },
+ certificateYear: null,
+ certificateMonth: null,
+ certificateFlag: false,
+ certificateObj: {
+ realName: '',
+ securitynumber: '',
+ cardid: '',
+ registered: ''
+ },
securityid: "",
excelBox1: false,
excelBox2: false,
@@ -983,7 +1020,6 @@
},
};
},
- components: { certificate },
watch: {
"form.tenantId" () {
if (this.form.tenantId !== "" && this.initFlag) {
@@ -1073,12 +1109,62 @@
//行点击事件
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({
@@ -1638,4 +1724,187 @@
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>
--
Gitblit v1.9.3