<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相关方安全告知培训合格证</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" type="text/css" href="../../assets/css/weui.css"/>
<link rel="stylesheet" type="text/css" href="../../assets/css/weuix.css"/>
<link rel="stylesheet" type="text/css" href="../../../bi/css/vant.css"/>
<!-- vue -->
<script src="../../../bi/js/vue.js"></script>
<script src="../../../bi/js/vant.min.js"></script>
<!--全局配置-->
<script src="../../../config.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<style>
.training_records {
margin: 0 10px;
}
.training_records td {
text-align: center;
}
.dy-card:nth-child(1) {
height: 240px;
}
.dy-card:nth-child(2) {
padding-top: 10px;
}
.bg_table {
background: url("../../assets/images/xgf_hgz/tablebg.jpg") no-repeat bottom center;
background-size: 100%;
width: 660px;
height: 435px;
border: 4px solid #453d3a;
transform: scale(0.5) translateX(-50%);
transform-origin: left;
position: absolute;
top: -90px;
left: 50%;
}
.bg_table .title {
font-size: 28px;
text-align: center;
margin-top: 34px;
font-weight: bold;
color: #000000;
}
.bg_table .table {
border-collapse: collapse;
width: 590px;
color: #453d3a;
font-size: 20px;
margin: 34px;
text-align: left;
margin-top: 10px;
}
.bg_table .table .tcenter {
text-align: center;
}
.bg_table .table .w60 {
width: 100px;
}
.bg_table .table .w74 {
width: 148px;
}
.bg_table .table th, .bg_table .table td {
border: 2px solid #453d3a;
text-align: left;
height: 40px;
padding: 0 16px;
box-sizing: border-box;
}
.bg_table .table th .textone, .bg_table .table td .textone {
width: 80px;
text-align: justify;
text-align-last: justify;
text-justify: distribute-all-lines;
margin: 0 auto;
}
.bg_table .table th .text2, .bg_table .table td .text2 {
width: 50px;
text-align: justify;
text-align-last: justify;
text-justify: distribute-all-lines;
margin: 0 auto;
}
.Number {
margin-left: 34px;
font-size: 24px;
color: #ff0000;
}
</style>
</head>
<body style="background-color: #f1f1f1;">
<div id="app">
<div class="dy-card">
<div class="bg_table">
<div class="title">相关方安全告知培训合格证</div>
<div class="Number">{{ message.CLASS_NO }}</div>
<table class="table">
<tr>
<td style="width: 120px">
<div class="text textone ">姓名</div>
</td>
<td style="width: 92px">
<div class="text text2 tcenter">{{ message.NAME }}</div>
</td>
<td style="width: 86px">
<div class="text text2 tcenter">工种</div>
</td>
<td style="width: 148px;">
<div v-if="message.PERSON_WORK_TYPE" class="text tcenter ">{{ message.PERSON_WORK_TYPE }}</div>
<div v-else>暂无</div>
</td>
<td rowspan="4" style="width: 134px;">
<img :src="config.fileUrl + message.PHOTO" style="width: 116px; height: 146px">
</td>
</tr>
<tr>
<td>
<div class="text textone">资质</div>
</td>
<td colspan="3">
<div v-if="message.CERTIFICATE" class="text">{{ message.CERTIFICATE }}</div>
<div v-else>暂无</div>
</td>
</tr>
<tr>
<td>
<div class="text textone">培训时间</div>
</td>
<td colspan="3">
<div class="text">{{ message.OPENING_TIME }}</div>
</td>
</tr>
<tr>
<td>
<div class="text textone">有效期限</div>
</td>
<td colspan="3">
<div class="text">{{ message.VALIDITY_PERIOD_END }}</div>
</td>
</tr>
<tr>
<td>
<div class="text textone">所在单位</div>
</td>
<td colspan="3">
<div class="text">{{ message.DEPARTMENT_NAME }}</div>
</td>
<td rowspan="3">
<div class="qrcode"></div>
</td>
</tr>
<tr>
<td>
<div class="text textone">身份证号</div>
</td>
<td colspan="3">
<div class="text">{{ message.CARD_ID }}</div>
</td>
</tr>
<tr>
<td>
<div class="text textone">手机</div>
</td>
<td colspan="3">
<div class="text">{{ message.PHONE }}</div>
</td>
</tr>
</table>
</div>
</div>
<div class="dy-card">
<van-divider content-position="left">人员信息</van-divider>
<van-cell-group>
<van-cell title="照片">
<van-image
v-if="imgUrl"
width="50px"
height="50px"
:src="imgUrl"
@click="fnImagePreview(imgUrl,0)"
></van-image>
</van-cell>
<van-cell title="姓名" :value="info.NAME"></van-cell>
<van-cell title="性别" :value="info.SEX === '0' ? '男' : '女'"></van-cell>
<van-cell title="出生年月" :value="info.DATE_OF_BIRTH"></van-cell>
<van-cell title="年龄" :value="info.AGE"></van-cell>
<van-cell title="手机号" :value="info.PHONE"></van-cell>
<van-cell title="身份证" :value="info.CARD_ID"></van-cell>
<van-cell title="身份证照片">
<van-image
v-for="(item,index) in userCardIDPhotoFile"
:key="item"
width="50px"
height="50px"
:src="item"
@click="fnImagePreview(item,index)"
></van-image>
</van-cell>
<van-cell title="民族" :value="info.NATIONALITY_NAME"></van-cell>
<van-cell title="婚姻状况" :value="info.MARITALSTATUS === '0' ? '未婚' : '已婚'"></van-cell>
<van-cell title="政治面貌" :value="info.POLITICAL_STATUS_NAME"></van-cell>
<van-cell title="户口所在地" :value="info.HKLOCAL"></van-cell>
<van-cell title="现住址" :value="info.ADDRESS"></van-cell>
<van-cell title="联系电话" :value="info.PHONE"></van-cell>
<van-cell title="文化程度" :value="info.DEGREE_OF_EDUCATION_NAME"></van-cell>
<van-cell title="本企业从业开始日期" :value="info.CORP_START_DATE"></van-cell>
<van-cell title="岗位名称" :value="info.POST_ID"></van-cell>
<van-cell title="本岗位从业开始日期" :value="info.ENTRY_DATE"></van-cell>
<van-cell title="是否签订劳动合同">
<span v-if="info.IS_SIGN_LABOR === '1'">是</span>
<span v-if="info.IS_SIGN_LABOR === '0'">否</span>
</van-cell>
<van-cell title="劳动合同附件" v-if="info.IS_SIGN_LABOR === '1'">
<van-image
v-for="(item,index) in contractFileList"
:key="item"
width="50px"
height="50px"
:src="item"
@click="fnImagePreview(item,index)"
></van-image>
</van-cell>
<van-cell title="社会保障号码" :value="info.SOCIAL_NUMBER"></van-cell>
<van-cell title="社保卡照片" v-if="socialPhotoFile.length > 0">
<van-image
v-for="(item,index) in socialPhotoFile"
:key="item"
width="50px"
height="50px"
:src="item"
@click="fnImagePreview(item,index)"
></van-image>
</van-cell>
<van-cell title="是否参加三级安全培训">
<span v-if="info.IS_LEVEL_THREE === '1'">是</span>
<span v-if="info.IS_LEVEL_THREE === '0'">否</span>
</van-cell>
<van-cell title="是否按期缴纳工伤保险">
<span v-if="info.IS_INJURIES_PAY === '1'">是</span>
<span v-if="info.IS_INJURIES_PAY === '0'">否</span>
</van-cell>
<template v-if="info.IS_INJURIES_PAY === '1'">
<van-cell title="工伤保险有效期" :value="info.IS_INJURIES_PAY_TIME"></van-cell>
<van-cell title="工伤保险凭证">
<van-image
v-for="(item,index) in gongshangbaoxianFile"
:key="item"
width="50px"
height="50px"
:src="item"
@click="fnImagePreview(item,index)"
></van-image>
</van-cell>
</template>
<van-cell title="是否缴纳商业保险">
<span v-if="info.ISPAY === '1'">是</span>
<span v-if="info.ISPAY === '0'">否</span>
</van-cell>
<template v-if="info.ISPAY === '1'">
<van-cell title="商业保险附件">
<van-image
v-for="(item,index) in insuranceFileList"
:key="item"
width="50px"
height="50px"
:src="item"
@click="fnImagePreview(item,index)"
></van-image>
</van-cell>
<van-cell title="商业保险单号" :value="info.ISPAY_NUMBER"></van-cell>
</template>
<van-cell title="是否特殊工种">
<span v-if="info.IS_SPECIAL_JOB === '1'">是</span>
<span v-if="info.IS_SPECIAL_JOB === '0'">否</span>
</van-cell>
<van-cell title="身体状况是否适应本岗位工作">
<span v-if="info.IS_BODY_ADAPT === '1'">是</span>
<span v-if="info.IS_BODY_ADAPT === '0'">否</span>
</van-cell>
<van-cell title="是否流动人员">
<span v-if="info.ISFLOW === '1'">是</span>
<span v-if="info.ISFLOW === '0'">否</span>
</van-cell>
</van-cell-group>
<van-divider content-position="left">培训记录</van-divider>
<div class="training_records">
<table>
<tr>
<td>培训开始时间</td>
<td>培训结束时间</td>
<td>培训部门</td>
<td>培训结果</td>
</tr>
<template v-if="trainRecordList.length > 0">
<tr v-for="(item,index) in trainRecordList" :key="index">
<td>{{ item.OPENING_TIME }}</td>
<td>{{ item.VALIDITY_PERIOD_END }}</td>
<td>{{ item.DEPARTMENT_NAME }}</td>
<td>
<span v-if="item.STATUS === '0'">不合格</span>
<span v-if="item.STATUS === '1'">合格</span>
</td>
</tr>
</template>
<tr v-else>
<td colspan="4">暂无数据</td>
</tr>
</table>
</div>
<van-divider content-position="left">电子入场证</van-divider>
<van-cell-group>
<van-cell title="照片">
<van-image
v-if="imgUrl"
width="50px"
height="50px"
:src="imgUrl"
@click="fnImagePreview(imgUrl,0)"
></van-image>
</van-cell>
<van-cell title="所属单位" :value="info.RELEVANT_UNIT_NAME"></van-cell>
<van-cell title="姓名" :value="info.NAME"></van-cell>
<van-cell title="性别" :value="info.SEX === '0' ? '男' : '女'"></van-cell>
<van-cell title="年龄" :value="info.AGE"></van-cell>
<van-cell title="职务" :value="info.POST_ID"></van-cell>
<van-cell title="联系电话" :value="info.PHONE"></van-cell>
<van-cell title="流动范围" :value="info.TRAIN_AREA || '暂无'"></van-cell>
</van-cell-group>
<van-image-preview v-model="show" :images="images" :start-position="startPosition">
</van-image-preview>
</div>
</div>
<script type="text/javascript" src="../../assets/js/jquery-1.7.2.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
config: config,
USER_ID: '',
CLASS_INFO_ID: '',
CORPINFO_ID: '',
message: {},
info: {},
show: false,
startPosition: 0,
images: [],
imgUrl: '',
userCardIDPhotoFile: [],
contractFileList: [],
socialPhotoFile: [],
gongshangbaoxianFile: [],
insuranceFileList: [],
trainRecordList: []
},
methods: {
//初始执行
init() {
this.CLASS_INFO_ID = this.getUrlKey('CLASS_INFO_ID');
this.getData();
},
getData () {
this.loading = true;
this.getUserInfo()
},
getUserInfo() {
var _this = this;
$.ajax({
xhrFields: {
withCredentials: true
},
type: "POST",
url: config.httpJgUrl + '/app/classMessage/getUserInfo',
dataType: 'json',
data: {
CLASS_INFO_ID: _this.CLASS_INFO_ID
},
success: function (data) {
_this.message = data.pd
_this.USER_ID = data.pd.USER_ID
new QRCode(document.querySelector(".qrcode"), {
text: config.messageUrl + '?CLASS_INFO_ID=' + _this.CLASS_INFO_ID,
width: 110,
height: 110,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H,
});
_this.getInfoOne()
_this.getInfoTwo()
_this.getInfo()
}
})
},
getInfoOne() {
var _this = this;
$.ajax({
xhrFields: {
withCredentials: true
},
type: "POST",
url: config.httpurl + '/app/user/getDetailByUserIdAndCorpInfoId',
dataType: 'json',
data: {
USER_ID: this.USER_ID
},
success: function (data) {
if ( data.userPhotoFile && data.userPhotoFile.length > 0) {
_this.imgUrl = config.fileUrl + data.userPhotoFile[0].FILEPATH
}
if (data.userCardIDPhotoFile){
for (let i = 0; i < data.userCardIDPhotoFile.length; i++) {
_this.userCardIDPhotoFile.push(config.fileUrl + data.userCardIDPhotoFile[i].FILEPATH)
}
}
if (data.contractFile){
for (let i = 0; i < data.contractFile.length; i++) {
_this.contractFileList.push(config.fileUrl + data.contractFile[i].FILEPATH)
}
}
if( data.socialPhotoFile){
for (let i = 0; i < data.socialPhotoFile.length; i++) {
_this.socialPhotoFile.push(config.fileUrl + data.socialPhotoFile[i].FILEPATH)
}
}
if(data.workInsurancePhotoFile){
for (let i = 0; i < data.workInsurancePhotoFile.length; i++) {
_this.gongshangbaoxianFile.push(config.fileUrl + data.workInsurancePhotoFile[i].FILEPATH)
}
}
if(data.insuranceFile){
for (let i = 0; i < data.insuranceFile.length; i++) {
_this.insuranceFileList.push(config.fileUrl + data.insuranceFile[i].FILEPATH)
}
}
_this.info = data.pd
}
})
},
getInfoTwo() {
var _this = this;
$.ajax({
xhrFields: {
withCredentials: true
},
type: "POST",
url: config.httpurl + '/app/user/getFloatPersonDetailById',
dataType: 'json',
data: {
USER_ID: this.USER_ID,
},
success: function (data) {
// _this.info = data.eCard
_this.trainRecordList = data.recordList
}
})
},
getInfo() {
var _this = this;
_this.loading = true;
$.ajax({
xhrFields: {
withCredentials: true
},
type: "POST",
url: config.httpurl + '/user/getFloatPersonDetailById',
dataType: 'json',
data: {
CLASS_INFO_ID: _this.CLASS_INFO_ID,
USER_ID: _this.USER_ID,
CORPINFO_ID: _this.CORPINFO_ID
},
success: function (data) {
vm.loading = false;
if ("success" == data.result) {
vm.varList = data.varList;
vm.pd = data.varList[0];
var nameArray = [];
for (var i = 0; i < vm.varList.length; i++) {
var ACCIDENTS_NAME = vm.varList[i].ACCIDENTS_NAME;
var names = ACCIDENTS_NAME.split(",");
for (var j = 0; j < names.length; j++) {
nameArray.distinctPush(names[j]);
}
}
vm.ACCIDENTS_NAME = nameArray.join(",");
}
}
})
},
//根据url参数名称获取参数值
getUrlKey: function (name) {
return decodeURIComponent(
(new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null;
},
fnImagePreview(images, startPosition) {
this.images = [images];
this.startPosition = startPosition
this.show = true
}
},
mounted() {
this.init();
}
})
</script>
</body>
</html>