<template>
<el-dialog title="作业单" :visible.sync="certificateDetailOpen" width="950px" :close-on-click-modal="false" append-to-body :before-close="certificateDetailClose">
<div class="tags_box">
<div class="tags">
<div :class="{isActive:'workPermit'== active}" @click="handelToogel('workPermit')">作业单</div>
</div>
<div v-for="item in specialWorkPermits" class="tags">
<div :class="{isActive:item.specialWorkType==active}" @click="handelToogel(item.specialWorkType)">{{ getTagName(item.specialWorkType) }}</div>
</div>
</div>
<div class="con_box">
<div v-show="active == 'workPermit'">
<table id="workPermitPrint">
<tr>
<td rowspan="4" colspan="2">作业许可申请人</td>
<td colspan="2">申请部门/单位</td>
<td colspan="2">{{certificateData.applyDept}}</td>
<td colspan="2">申请人及联系方式</td>
<td colspan="2">{{certificateData.linkMan}}|{{certificateData.linkPhone}}</td>
</tr>
<tr>
<td colspan="2">作业区域范围</td>
<td colspan="2">{{certificateData.workBound}}</td>
<td colspan="2">设备名称及编号</td>
<td colspan="2">{{certificateData.deviceName}}|{{certificateData.deviceNum}}</td>
</tr>
<tr>
<td colspan="2">申请作业时间</td>
<td colspan="6">
{{ certificateData.applyWorkStartTime == null ? "-" :certificateData.applyWorkStartTime.split(" ")[0].split("-")[1]}}月{{certificateData.applyWorkStartTime == null ? "-" :certificateData.applyWorkStartTime.split(" ")[0].split("-")[2]}}日{{certificateData.applyWorkStartTime == null ? "-" :certificateData.applyWorkStartTime.split(" ")[1].split(":")[0]}}时{{certificateData.applyWorkStartTime == null ? "-" :certificateData.applyWorkStartTime.split(" ")[1].split(":")[1]}}分至{{certificateData.applyWorkEndTime == null ? "-" :certificateData.applyWorkEndTime.split(" ")[0].split("-")[1]}}月{{certificateData.applyWorkEndTime == null ? "-" :certificateData.applyWorkEndTime.split(" ")[0].split("-")[2]}}日{{certificateData.applyWorkEndTime == null ? "-" :certificateData.applyWorkEndTime.split(" ")[1].split(":")[0]}}时{{certificateData.applyWorkEndTime == null ? "-" :certificateData.applyWorkEndTime.split(" ")[1].split(":")[1]}}分
</td>
</tr>
<tr>
<td colspan="2">作业内容</td>
<td colspan="6">{{certificateData.workContent}}</td>
</tr>
<tr>
<td colspan="2">所有相关方讨论</td>
<td>工作安全分析</td>
<td style="writing-mode: vertical-rl;">危害识别</td>
<td colspan="6" style="text-align: left">
<div><input type="checkbox" disabled v-model="mainDangerousMark.burn">灼伤（低温/高温/化学品灼伤,电弧烧伤,火灾，易燃气/液体，蒸汽，电焊、动火、射线等）</div>
<div><input type="checkbox" disabled v-model="mainDangerousMark.electricShock">电击（触电，电压，不适当的接地，电气热作业，地下/暗线等）。</div>
<div><input type="checkbox" disabled v-model="mainDangerousMark.objectStrike">物体打击（爆炸，压力，能量释放，移动/坠落的物体，不正确的存放,设备）</div>
<div><input type="checkbox" disabled v-model="mainDangerousMark.stifle">窒息/中毒（惰性气体，有毒气体，易挥发的液体溶剂等）</div>
<div><input type="checkbox" disabled v-model="mainDangerousMark.drop">坠落（高处作业，没有防护的开口，没有固定的梯子，脚手架搭设，无防护的平台等）</div>
<div><input type="checkbox" disabled v-model="mainDangerousMark.vehicleInjury">车辆伤害（速度过快,疲劳驾驶,车辆故障,缺乏防御性驾驶,能见度差,不寻常的路状，分心等）</div>
<div><input type="checkbox" disabled v-model="mainDangerousMark.other">其它危害。</div>
<div>注：如存在以上任一情况，请填写安全措施。</div>
</td>
</tr>
<tr>
<td rowspan="4" colspan="2">批准人填写</td>
<td rowspan="4" colspan="2">许可证</td>
<td colspan="6" style="text-align: left">是否需要进一步的JSA: <input disabled type="checkbox" v-model="licenceInfo.jsa.yes"/>否<input type="checkbox" disabled v-model="licenceInfo.jsa.no"/>是 JSA[<input class="editInput" disabled v-model="licenceInfo.jsa.num" style="width: 250px" placeholder="填写JSA编号"/>]</td>
</tr>
<tr>
<td colspan="6" style="text-align: left"><input disabled type="checkbox" v-model="licenceInfo.specialLicence"/>0无需特殊工作许可</td>
</tr>
<tr>
<td colspan="6" style="text-align: left">
<div><input type="checkbox" disabled v-model="licenceInfo.lockListing.isChecked"/>1-1锁定挂牌记录表 [<input class="editInput" disabled v-model="licenceInfo.lockListing.num" style="width: 250px" placeholder="填写编号"/>]</div>
<div><input type="checkbox" disabled v-model="licenceInfo.blindPlate.isChecked"/>1-2盲板抽堵作业许可 [<input class="editInput" disabled v-model="licenceInfo.blindPlate.num" style="width: 250px" placeholder="填写编号"/>]</div>
</td>
</tr>
<tr>
<td colspan="6" style="text-align: left;">
<div><input type="checkbox" disabled v-model="licenceInfo.flareUp.isChecked"/>2动火作业许可证 [<input class="editInput" disabled v-model="licenceInfo.flareUp.num" style="width: 250px" placeholder="填写编号"/>]</div>
<div><input type="checkbox" disabled v-model="licenceInfo.heightWork.isChecked"/>3高处作业许可证 [<input class="editInput" disabled v-model="licenceInfo.heightWork.num" style="width: 250px" placeholder="填写编号"/>]</div>
<div><input type="checkbox" disabled v-model="licenceInfo.breakGround.isChecked"/>4动土作业许可证 [<input class="editInput" disabled v-model="licenceInfo.breakGround.num" style="width: 250px" placeholder="填写编号"/>]</div>
<div><input type="checkbox" disabled v-model="licenceInfo.hoisting.isChecked"/>5吊装作业许可证 [<input class="editInput" disabled v-model="licenceInfo.hoisting.num" style="width: 250px" placeholder="填写编号"/>]</div>
<div><input type="checkbox" disabled v-model="licenceInfo.limitSpace.isChecked"/>6受限空间作业许可证 [<input class="editInput" disabled v-model="licenceInfo.limitSpace.num" style="width: 250px" placeholder="填写编号"/>]</div>
<div><input type="checkbox" disabled v-model="licenceInfo.electricityUse.isChecked"/>7临时用电许可证 [<input class="editInput" disabled v-model="licenceInfo.electricityUse.num" style="width: 250px" placeholder="填写编号"/>]</div>
<div><input type="checkbox" disabled v-model="licenceInfo.ray.isChecked"/>8射线探伤许可证 [<input class="editInput" disabled v-model="licenceInfo.ray.num" style="width: 250px" placeholder="填写编号"/>]</div>
</td>
</tr>
<tr>
<td colspan="2">相关方填写</td>
<td colspan="4">
<div style="text-align: left">
承包商:
<textarea disabled v-model="relationSign.contractor" style="height: 96px"></textarea>
</div>
</td>
<td colspan="4">
<div style="text-align: left">
负责人：
<textarea disabled v-model="relationSign.personCharge" style="height: 96px"></textarea>
</div>
</td>
</tr>
<tr v-if="(certificateData.applyStatus-0)>3">
<td colspan="2">生产班组确认</td>
<td colspan="8">
<el-row>
<el-col :span="8" style="text-align: left">本人已知晓此工作许可证的内容</el-col>
<el-col :span="8" style="text-align: right">确认签字（当班班长）：</el-col>
<el-col :span="8"><NewEsign :resultImg.sync ="produceComfirm.monitorName" :isReWrite="false" :width="918" :height="100"/></el-col>
</el-row>
<el-row>
<el-col :span="24" style="text-align: right">日期/时间：<input style="width: 228px" disabled v-model="produceComfirm.date" class="editInput"/></el-col>
</el-row>
</td>
</tr>
</table>
<div style="margin-top:10px;float: right"><el-button type="primary" v-print="'#workPermitPrint'">打印</el-button></div>
</div>
<div v-for="item in specialWorkPermits" v-show="active == item.specialWorkType">
<FlareUp v-if="item.specialWorkType == 'flareUp'"
:ref="item.specialWorkType"
:workPermitId = "item.workPermitId"
:licenceNum = "item.licenceNum"
applyStatus="4"/>
<BlindPlate v-if="item.specialWorkType == 'blindPlate'"
:ref="item.specialWorkType"
:workPermitId = "item.workPermitId"
:licenceNum = "item.licenceNum"
applyStatus="4"/>
</div>
</div>
</el-dialog>
</template>
<script>
import NewEsign from "@/components/SaftyWork/NewEsign";
import FlareUp from "@/components/NewSaftyWork/FlareUp";
import BlindPlate from "@/components/NewSaftyWork/BlindPlate";
import { getSpecialWorkPermitByWorkPermitId } from "@/api/workPermit/specialPermit";
import { listSign } from "@/api/workPermit/workPermitSign";
export default {
components: {
NewEsign,
FlareUp,
BlindPlate
},
name: "new-work-permit-detail",
props:{
certificateDetailOpen:{
type:Boolean,
default:false
},
certificateData:{
type:Object
}
},
data(){
return{
mainDangerousMark :{
burn : false,
electricShock : false,
objectStrike : false,
stifle : false,
drop : false,
vehicleInjury : false,
other : false
},
licenceInfo : {
lockListing: {
num: "",
isChecked: false
},
blindPlate: {
num: "",
isChecked: false,
status: "0"
},
breakGround: {
num: "",
isChecked: false,
status: "0"
},
limitSpace: {
num: "",
isChecked: false,
status: "0"
},
jsa: {
no: false,
yes: false,
num: ""
},
specialLicence: false,
flareUp: {
num: "",
isChecked: false,
status: "0"
},
hoisting: {
num: "",
isChecked: false,
status: "0"
},
ray: {
num: "",
isChecked: false,
status: "0"
},
electricityUse: {
num: "",
isChecked: false,
status: "0"
},
heightWork: {
num: "",
isChecked: false,
status: "0"
}
},
relationSign:{
contractor:"",
personCharge:""
},
produceComfirm:{
leaderDeptId:"",
monitorId:"",
monitorName:"",
date:""
},
active:"workPermit",
specialWorkPermits:[]
}
},
watch:{
certificateDetailOpen(newValue){
if(null != this.certificateData.mainDangerousMark){
this.mainDangerousMark = JSON.parse(this.certificateData.mainDangerousMark);
}
if(null != this.certificateData.licenceInfo){
this.licenceInfo = JSON.parse(this.certificateData.licenceInfo);
}
if(null != this.certificateData.relationSign){
this.relationSign = JSON.parse(this.certificateData.relationSign);
}
if(null != this.certificateData.produceComfirm){
this.produceComfirm = JSON.parse(this.certificateData.produceComfirm);
}
this.specialWorkPermit();
this.active = "workPermit";
}
},
methods:{
certificateDetailClose(){
this.$emit('update:certificateDetailOpen',false);
},
handelToogel(item) {
this.active = item;
},
specialWorkPermit(){
getSpecialWorkPermitByWorkPermitId({workPermitId:this.certificateData.workPermitId}).then(res =>{
this.specialWorkPermits = res.data.specialWorkPermits;
for(let key in this.specialWorkPermits ){
this.$nextTick(() => {
listSign({ pageNum: 1,pageSize: 99999,permitId:this.specialWorkPermits[key].specialWorkPermitId}).then(res =>{
this.$refs[this.specialWorkPermits[key].specialWorkType][0][this.specialWorkPermits[key].specialWorkType] = JSON.parse(this.specialWorkPermits[key].specialWorkData);
this.$refs[this.specialWorkPermits[key].specialWorkType][0].specialWorkPermitId = this.specialWorkPermits[key].specialWorkPermitId;
this.$refs[this.specialWorkPermits[key].specialWorkType][0].specialWorkPermitSigns = res.rows;
})
})
}
})
},
//获取tag名称
getTagName(key){
switch(key){
case "blindPlate":
return "盲板抽堵作业许可";
case "flareUp":
return "动火作业许可证";
case "heightWork":
return "高处作业许可证";
case "breakGround":
return "动土作业许可证";
case "hoisting":
return "吊装作业许可证";
case "limitSpace":
return "受限空间作业许可证";
case "electricityUse":
return "临时用电许可证";
case "ray":
return "射线探伤许可证";
default:
return "";
}
},
}
}
</script>
<style scoped lang="scss">
table{
border-collapse: collapse;
table-layout: fixed;
text-align: center;
width: 100%;
}
table td, table th{
border: 1px solid;
height: 30px;
}
.editInput{
border: none;
width: 100%;
height: 100%;
text-align: center;
}
.editInput:focus{
outline: none;
}
.editLine{
border-bottom: 1px solid;
border-top: none;
border-left: none;
border-right: none;
text-align: center;
}
.editLine:focus{
outline: none;
}
textarea{
height: 100%;
width: 100%;
border: none;
resize:none;
}
textarea:focus{
outline: none;
}
.tags_box {
height: 10%;
display: flex;
.tags {
div {
padding: 10px 20px;
cursor: pointer;
border: #cccccc 1px solid;
#margin-right: 20px;
#border-radius: 5px;
}
.isActive {
background-color: #409EFF;
color: white;
}
}
}
.con_box {
height: 500px;;
border: #cccccc 1px solid;
padding: 10px;
overflow-y: scroll;
overflow-x: hidden;
&::-webkit-scrollbar {
width:5px;
}
&::-webkit-scrollbar-track {
-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
border-radius:10px;
}
&::-webkit-scrollbar-thumb {
border-radius:5px;
background:rgba(0,0,0,0.1);
-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
}
</style>