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>
|