526 lines
		
	
	
		
			17 KiB
		
	
	
	
		
			HTML
		
	
	
			
		
		
	
	
			526 lines
		
	
	
		
			17 KiB
		
	
	
	
		
			HTML
		
	
	
| <!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.BELONG_TO_CORP_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>
 |