543 lines
14 KiB
Vue
543 lines
14 KiB
Vue
<template>
|
||
<div class="home">
|
||
<div class="nav">
|
||
<div class="iconBack"><i
|
||
class="el-icon-arrow-left"
|
||
style="color: white"
|
||
></i></div>
|
||
<div class="pageName">
|
||
<h2 class="tou">人员二维码</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<div
|
||
class="place"
|
||
ref="backgroundElement"
|
||
:style="{
|
||
backgroundImage: 'url(' + srcImgUrl + ')'
|
||
}"
|
||
>
|
||
<div :style="{
|
||
height: backimgheight + 'px'
|
||
}">
|
||
<div
|
||
class="
|
||
content-up"
|
||
:style="{ width: backimgwidth + 'px' }"
|
||
>
|
||
<div
|
||
class="upDiv"
|
||
:style="{ width: backimgwidth + 'px', height: backimgheightUp + 'px', }"
|
||
>
|
||
<div
|
||
class="hear"
|
||
:style="{ fontSize: backimgFontSize * 0.9 + 'px', padding: backimgFontSize * 0.7 + 'px' }"
|
||
>
|
||
{{ currentTime }}
|
||
</div>
|
||
<div class="qr">
|
||
<div
|
||
:style="{ paddingTop: backimgFontSize + 'px' }"
|
||
v-if="backimgwidth != 0"
|
||
>
|
||
<vue-qr
|
||
:text="qrUrl"
|
||
:callback="qrCallBack"
|
||
:size="qrsize"
|
||
:margin="0"
|
||
:colorDark="fontColor"
|
||
colorLight="white"
|
||
:logoScale="0.2"
|
||
:dotScale="0.7"
|
||
>
|
||
</vue-qr>
|
||
</div>
|
||
|
||
<div
|
||
class="tip"
|
||
:style="{ 'color': fontColor, fontSize: backimgFontSize * 0.9 + 'px' }"
|
||
>
|
||
|
||
<p v-if="WorkerInfo.safeScore >= 90">无风险</p>
|
||
<p v-if="WorkerInfo.safeScore >= 80 && WorkerInfo.safeScore < 90"><i
|
||
v-if="WorkerInfo.safeScore < 90"
|
||
class="el-icon-warning"
|
||
:style="{ 'color': fontColor }"
|
||
></i>低风险</p>
|
||
<p v-if="WorkerInfo.safeScore < 80"><i
|
||
v-if="WorkerInfo.safeScore < 90"
|
||
class="el-icon-warning"
|
||
:style="{ 'color': fontColor }"
|
||
></i>高风险</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-down">
|
||
<div
|
||
class="downDiv"
|
||
style="text-align: center;"
|
||
:style="{ height: backimgheightDown + 'px' }"
|
||
>
|
||
<div
|
||
class="downHear"
|
||
:style="{
|
||
fontSize: backimgFontSize * 0.65 + 'px',
|
||
width: backimgwidth + 'px',
|
||
paddingTop: backimgFontSize * 0.4 + 'px',
|
||
paddingBottom: backimgFontSize * 0.4 + 'px'
|
||
}"
|
||
>
|
||
<div class="down-up">
|
||
<div class="left-downHear">姓名：</div>
|
||
<div class="right-downHear">{{ WorkerInfo.workerName | hideName }}</div>
|
||
</div>
|
||
<div class="down-up">
|
||
<div class="left-downHear">证件号码：</div>
|
||
<div class="right-downHear">{{ WorkerInfo.idCard | hideIdNum }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="text"
|
||
v-if="WorkerInfo.safeScore >= 90 && backimgwidth != 0"
|
||
:style="{ 'color': fontColor, paddingTop: backimgFontSize * 0.3 + 'px', height: backimgFontSize * 8.27 + 'px' }"
|
||
>
|
||
通过后台查询到，您无扣分风险
|
||
</div>
|
||
|
||
<div
|
||
class="text2"
|
||
v-if="WorkerInfo.safeScore < 90 && backimgwidth != 0"
|
||
:style="{ 'color': fontColor, paddingTop: backimgFontSize * 0.3 + 'px', paddingBottom: backimgFontSize * 0.3 + 'px', height: backimgFontSize * 8.27 + 'px', width: backimgFontSize * 13.35 + 'px' }"
|
||
>
|
||
<div
|
||
class="text2-title"
|
||
:style="{ fontSize: backimgFontSize * 0.6 + 'px', }"
|
||
>通过后台查询到，您有以下扣分记录：</div>
|
||
<ul
|
||
class="text2-content"
|
||
v-infinite-scroll="load"
|
||
style="overflow:auto"
|
||
:style="{ fontSize: backimgFontSize * 0.5 + 'px', height: backimgFontSize * 7.5 + 'px', }"
|
||
>
|
||
<li
|
||
class="text2-item"
|
||
v-for="( item, i ) in scoreRecord "
|
||
:key="item.id"
|
||
:style="{ height: backimgFontSize * 2 + 'px', paddingTop: backimgFontSize * 0.33 + 'px', width: ((backimgFontSize * 13.35) - 25) + 'px' }"
|
||
>{{ i + 1 }}. {{ item.deductReason }}</li>
|
||
</ul>
|
||
</div>
|
||
<div
|
||
class="foot"
|
||
v-if="WorkerInfo.safeScore >= 90"
|
||
:style="{ 'color': fontColor, paddingTop: backimgFontSize * 0.4 + 'px', fontSize: backimgFontSize * 0.9 + 'px' }"
|
||
>
|
||
可通行
|
||
</div>
|
||
<div
|
||
class="foot"
|
||
v-if="WorkerInfo.safeScore >= 80 && WorkerInfo.safeScore < 90"
|
||
:style="{ 'color': fontColor, paddingTop: backimgFontSize * 0.4 + 'px', fontSize: backimgFontSize * 0.9 + 'px' }"
|
||
>
|
||
安全分已经低于90分
|
||
</div>
|
||
<div
|
||
class="foot"
|
||
v-if="WorkerInfo.safeScore < 80"
|
||
:style="{ 'color': fontColor, paddingTop: backimgFontSize * 0.4 + 'px', fontSize: backimgFontSize * 0.9 + 'px' }"
|
||
>
|
||
安全分已经低于80分
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import vueQr from 'vue-qr'
|
||
// import imgerr from '../assets'
|
||
export default {
|
||
name: 'myLogin',
|
||
components: {
|
||
vueQr
|
||
},
|
||
data () {
|
||
return {
|
||
//二维码大小
|
||
qrsize: 230,
|
||
|
||
//动态背景宽
|
||
backimgwidth: 0,
|
||
|
||
//动态背景高
|
||
backimgheight: 0,
|
||
|
||
//动态背景高(上)
|
||
backimgheightUp: 0,
|
||
|
||
//动态背景高(下)
|
||
backimgheightDown: 0,
|
||
|
||
//动态字体大小
|
||
backimgFontSize: 0,
|
||
|
||
//扣分记录
|
||
scoreRecord: [],
|
||
//当前时间
|
||
currentTime: "",
|
||
//名字
|
||
name: "王富贵",
|
||
idNum: "210811196005132133",
|
||
//动态背景图片
|
||
srcImgUrl: "",
|
||
//背景图片
|
||
// imgUrl: ["../../assets/健康.png", "../../assets/低险.png", "../../assets/危险.png"],
|
||
imgUrl: {
|
||
img1: require("../../assets/健康.png"),
|
||
img2: require("../../assets/低险.png"),
|
||
img3: require("../../assets/危险.png")
|
||
},
|
||
id: "",
|
||
// 用于生成二维码的url
|
||
qrUrl: "",
|
||
// 下载数据base64
|
||
qrDownloadUrl: "",
|
||
//二维码颜色
|
||
fontColor: "green",
|
||
//下方结构
|
||
flag: true,
|
||
//劳务人员信息
|
||
WorkerInfo: {},
|
||
}
|
||
},
|
||
|
||
// beforeCreate () {
|
||
// this.getBackgroundImageSize();
|
||
// },
|
||
|
||
created () {
|
||
this.updateTime();
|
||
setInterval(() => {
|
||
this.updateTime();
|
||
}, 1);
|
||
this.getId();
|
||
},
|
||
|
||
mounted () {
|
||
this.setColor(this.WorkerInfo.safeScore);
|
||
this.setImg(this.WorkerInfo.safeScore);
|
||
this.getScoreRecord();
|
||
|
||
setTimeout(() => {
|
||
this.getBackgroundImageSize();
|
||
}, 1000); // 延迟1秒钟执行，您可以根据实际情况调整延迟时间
|
||
},
|
||
|
||
methods: {
|
||
getBackgroundImageSize () {
|
||
var backgroundImage = new Image();
|
||
var imageUrl = getComputedStyle(document.querySelector('.place')).backgroundImage.slice(4, -1).replace(/['"]/g, "");
|
||
|
||
backgroundImage.src = imageUrl;
|
||
|
||
var self = this; // 保存this指向到变量self
|
||
|
||
backgroundImage.onload = function () {
|
||
var containerWidth = document.querySelector('.place').clientWidth;
|
||
var containerHeight = document.querySelector('.place').clientHeight;
|
||
var imageWidth = backgroundImage.width;
|
||
var imageHeight = backgroundImage.height;
|
||
console.log("containerWidth :" + containerWidth);
|
||
console.log("containerHeight :" + containerHeight);
|
||
console.log("imageWidth :" + imageWidth);
|
||
console.log("imageHeight :" + imageHeight);
|
||
|
||
var scaleX = containerWidth / imageWidth;
|
||
var scaleY = containerHeight / imageHeight;
|
||
var displayWidth, displayHeight;
|
||
|
||
if (scaleX < scaleY) {
|
||
displayWidth = containerWidth;
|
||
displayHeight = imageHeight * scaleX;
|
||
} else {
|
||
displayWidth = imageWidth * scaleY;
|
||
displayHeight = containerHeight;
|
||
}
|
||
|
||
self.backimgwidth = displayWidth * 0.8;
|
||
self.backimgheight = displayHeight;
|
||
self.qrsize = displayWidth * 0.6;
|
||
|
||
self.backimgheightUp = self.backimgheight * (53 / 100);
|
||
self.backimgheightDown = self.backimgheight * (47 / 100);
|
||
|
||
self.backimgFontSize = self.qrsize * 0.1;
|
||
|
||
console.log("处理过的背景图宽度: " + self.backimgwidth);
|
||
console.log("处理过的背景图高度: " + self.backimgheight);
|
||
console.log("二维码大小: " + self.qrsize);
|
||
console.log("动态字体大小: " + self.backimgFontSize);
|
||
}
|
||
},
|
||
|
||
async getScoreRecord () {
|
||
const params = {
|
||
workerId: this.id,
|
||
};
|
||
const { data: res } = await this.$http.get('/xmgl/xzDeductScoreRecord/list', params);
|
||
console.log(res);
|
||
if (res.success == true && res.result.length != 0) {
|
||
this.scoreRecord = res.result;
|
||
console.log(this.scoreRecord);
|
||
}
|
||
|
||
},
|
||
|
||
load () { },
|
||
|
||
updateTime () {
|
||
const date = new Date();
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
const hours = String(date.getHours()).padStart(2, '0');
|
||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||
this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}`;
|
||
},
|
||
setImg (fenshu) {
|
||
if (fenshu >= 90) {
|
||
this.srcImgUrl = this.imgUrl.img1;
|
||
} else if (fenshu >= 80 && fenshu < 90) {
|
||
this.srcImgUrl = this.imgUrl.img2;
|
||
} else if (fenshu < 80) {
|
||
this.srcImgUrl = this.imgUrl.img3;
|
||
}
|
||
},
|
||
|
||
setColor (fenshu) {
|
||
if (fenshu >= 90) {
|
||
this.fontColor = "green";
|
||
} else if (fenshu >= 80 && fenshu < 90) {
|
||
this.fontColor = "rgb(255, 230, 0)";
|
||
} else if (fenshu < 80) {
|
||
this.fontColor = "red";
|
||
}
|
||
},
|
||
|
||
getId () {
|
||
// console.log(this.$route.params);
|
||
this.WorkerInfo = this.$route.params.WorkerInfo;
|
||
console.log(this.WorkerInfo);
|
||
this.qrUrl = this.WorkerInfo.id;
|
||
},
|
||
// 二维码刷新后调用
|
||
qrCallBack (qrUrl) {
|
||
this.qrDownloadUrl = qrUrl;
|
||
},
|
||
// 下载二维码
|
||
downloadQrcode () {
|
||
let a = document.createElement('a');
|
||
a.download = '我的二维码';
|
||
a.href = this.qrDownloadUrl;
|
||
a.click();
|
||
},
|
||
//换颜色
|
||
handleQrCode (type) {
|
||
switch (type) {
|
||
case 1:
|
||
this.fontColor = 'green'
|
||
break
|
||
case 2:
|
||
this.fontColor = 'orange'
|
||
break
|
||
case 3:
|
||
this.fontColor = 'red'
|
||
break
|
||
}
|
||
},
|
||
},
|
||
|
||
filters: {
|
||
// 加密身份证号
|
||
hideIdNum (val) {
|
||
return `${val.substring(0, 3)}*************${val.substring(val.length - 2)}`
|
||
},
|
||
// 加密名字
|
||
hideName (val) {
|
||
return `${val.substring(0, 1)}**`
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: calc(100% - 3.33rem);
|
||
}
|
||
|
||
.place {
|
||
width: 90%;
|
||
height: 100%;
|
||
background-image: url(../../assets/健康.png);
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.content-up {
|
||
width: 100%;
|
||
height: 54.5%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.content-down {
|
||
height: 45.5%;
|
||
}
|
||
|
||
.upDiv {
|
||
/* background-color: yellow; */
|
||
/* position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%); */
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
/* height: 500px; */
|
||
}
|
||
|
||
.hear {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.qr {}
|
||
|
||
.tip {
|
||
font-weight: bold;
|
||
border-bottom: 0.16rem dashed gray;
|
||
}
|
||
|
||
.text2-title {
|
||
display: flex;
|
||
font-size: 0.6rem;
|
||
}
|
||
|
||
.text2-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.text2-item {
|
||
/* display: flex;
|
||
padding-left: 0; */
|
||
float: left;
|
||
/* 设置元素浮动 */
|
||
}
|
||
|
||
ul {
|
||
padding-inline-start: 10px;
|
||
}
|
||
|
||
li {
|
||
text-align: left;
|
||
/* 保持文本从左边开始 */
|
||
}
|
||
|
||
.text2 {
|
||
/* height: 40%; */
|
||
/* line-height: 1rem; */
|
||
/* font-size: 0.5rem; */
|
||
font-weight: bold;
|
||
}
|
||
|
||
.text {
|
||
/* height: 40%; */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1rem;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.foot {
|
||
font-size: 1.3rem;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.down-up {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
|
||
|
||
.downDiv {
|
||
/* height: 100%; */
|
||
|
||
}
|
||
|
||
.downHear {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
/* height: 15%; */
|
||
font-weight: bold;
|
||
border-bottom: 1px solid gray;
|
||
|
||
}
|
||
|
||
.home {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.nav {
|
||
background-color: rgb(0, 128, 255);
|
||
width: 100%;
|
||
height: 3.33rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.iconBack {
|
||
position: absolute;
|
||
left: 0;
|
||
font-size: 2.08rem;
|
||
}
|
||
|
||
.warnToken {
|
||
position: absolute;
|
||
font-size: 2.08rem;
|
||
}
|
||
|
||
.pageName {}
|
||
|
||
.tou {
|
||
margin: 0;
|
||
color: white;
|
||
}
|
||
</style> |