qa-prevention-gwj-vue/src/views/hotwork_cfd/pigeonhole/components/detail.vue

531 lines
21 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div>
<div id="printTest" class="app-container print-work">
<el-page-header content="审批表详情" class="no-print" @back="goBack"/>
<div v-for="pdf in 2" :key="pdf" :name="pdf === 2 ? 'pdf-box' : ''" class="pdf-content">
<table :class="['table-ui','table-ui' + pdf]">
<tr>
<td colspan="4" style="border: none">
<div class="level-title mt-20">
<h1>动火安全作业票</h1>
<div class="level-code">编号:{{ pd.CHECK_NO }}</div>
</div>
</td>
</tr>
<tr>
<td class="bbg">作业申请单位</td>
<td>{{ pd.APPLY_DEPARTMENT_NAME }}</td>
<td class="bbg">作业申请时间</td>
<td>{{ pd.CREATTIME }}</td>
</tr>
<tr>
<td class="bbg">作业内容</td>
<td>{{ pd.WORK_CONTENT }}</td>
<td class="bbg">动火地点及动火部位</td>
<td>{{ pd.WORK_PLACE }}</td>
</tr>
<tr>
<td class="bbg">动火作业级别</td>
<td>{{ pd.WORK_LEVEL }}</td>
<td class="bbg">动火方式</td>
<td>{{ pd.WORK_FUNCTION }}</td>
</tr>
<tr>
<td class="bbg">动火人及证书编号</td>
<td colspan="3">{{ pd.WORK_USER }}</td>
</tr>
<tr>
<td class="bbg">动火操作人图片</td>
<td colspan="3">
<img v-viewer v-for="(item,index) in pd.dongHuoCaoZuoRenPic" :src="pd.dongHuoCaoZuoRenPic[index]" :key="index" alt="" width="100" height="100">
</td>
</tr>
<tr>
<td class="bbg">作业单位</td>
<td>{{ pd.CONFIRM_DEPARTMENT_NAME }}</td>
<td class="bbg">作业负责人</td>
<td>{{ pd.CONFIRM_USER_NAME }}</td>
</tr>
<template v-for="(item,index) in gasList">
<tr :key="index">
<td class="bbg">气体取样分析时间</td>
<td>{{ item.ANALYZE_TIME }}</td>
<td class="bbg">代表性气体</td>
<td>{{ item.ANALYZE_PLACE }}</td>
</tr>
<tr :key="index">
<td class="bbg">分析结果/%</td>
<td>{{ item.ANALYZE_RESULT }}</td>
<td class="bbg">气体分析单位负责人</td>
<td>{{ item.ANALYZE_USER }}</td>
</tr>
</template>
<tr>
<td class="bbg">关联的其他特殊作业及安全作业票编号</td>
<td colspan="3">{{ pd.SPECIAL_WORK }}</td>
</tr>
<tr>
<td class="bbg">风险辨识结果</td>
<td colspan="3">{{ pd.RISK_IDENTIFICATION }}</td>
</tr>
<tr>
<td class="bbg">动火作业实施时间</td>
<td colspan="3">{{ pd.WORK_START_DATE }}至{{ pd.WORK_END_DATE }}止</td>
</tr>
<tr v-if="pd.FIRE_COMPLETED === '1' && pd.SITE_CLEANED === '1'">
<td class="bbg">动火是否完成</td>
<td>
<span>已完成</span>
</td>
<td class="bbg">动火是否完成</td>
<td>
<span>已清理</span>
</td>
</tr>
<tr v-if="pd.NO_REMAINING_EMBERS === '1'">
<td class="bbg">是否存在遗留火种</td>
<td>
<span>无遗留火种</span>
</td>
</tr>
<tr>
<td colspan="4">
<table class="table-ui">
<tr>
<td>序号</td>
<td>安全措施</td>
<td style="width: 100px;">是否涉及</td>
<td style="width: 100px;">确认人</td>
</tr>
<tr v-for="(item,index) in measuresList" :key="index">
<td>{{ index + 1 }}</td>
<td>
{{ item.PROTECTIVE_MEASURES }}
<!-- <template v-if="item.QUESTION1">-->
<!-- {{ item.QUESTION1 }}({{ item.ANSWER1 }})-->
<!-- </template>-->
<!-- <template v-if="item.QUESTION2">-->
<!-- {{ item.QUESTION2 }}({{ item.ANSWER2 }}) {{ item.QUESTION3 }}({{ item.ANSWER3 }})-->
<!-- </template>-->
</td>
<td>
<span v-if="item.STATUS=='1'"><input type="radio" disabled checked>&nbsp;&nbsp;&nbsp;</span>
<span v-if="item.STATUS=='-1'"><input type="radio" disabled checked>不涉及</span>
</td>
<td>
{{ item.CONFIRM_NAME }}
</td>
</tr>
<tr
v-if="pd.SAFETY_USER_MEASURES || pd.CONFIRM_OTHER_CONTENT || pd.BELONGING_USER_MEASURES || pd.GUARDIAN_USER_MEASURES || pd.LEADER_USER_MEASURES|| pd.AUDIT_USER_MEASURES || pd.APPROVE_USER_MEASURES || pd.MONITOR_USER_MEASURES">
<td>{{ measuresList.length + 1 }}</td>
<td colspan="3">
<div v-if="pd.SAFETY_USER_MEASURES" style="display: flex;justify-content: space-between;">
<span>安全措施确认人:{{ pd.SAFETY_USER_MEASURES }}</span>
</div>
<div v-if="pd.CONFIRM_OTHER_CONTENT" style="display: flex;justify-content: space-between;margin-top: 10px;">
<span>作业负责人:{{ pd.CONFIRM_OTHER_CONTENT }}</span>
</div>
<div v-if="pd.BELONGING_USER_MEASURES" style="display: flex;justify-content: space-between;margin-top: 10px;">
<span>项目责任负责人:{{ pd.BELONGING_USER_MEASURES }}</span>
</div>
<!-- <div v-if="pd.GUARDIAN_USER_MEASURES" style="display: flex;justify-content: space-between;margin-top: 10px;">-->
<!-- <span>属地监管单位:{{ pd.GUARDIAN_USER_MEASURES }}</span>-->
<!-- </div>-->
<div v-if="pd.LEADER_USER_MEASURES" style="display: flex;justify-content: space-between;margin-top: 10px;">
<span>属地监管单位:{{ pd.LEADER_USER_MEASURES }}</span>
</div>
<div v-if="pd.AUDIT_USER_MEASURES" style="display: flex;justify-content: space-between;margin-top: 10px;">
<span>安全管理部门:{{ pd.AUDIT_USER_MEASURES }}</span>
</div>
<div v-if="pd.APPROVE_USER_MEASURES" style="display: flex;justify-content: space-between;margin-top: 10px;">
<span>动火审批人:{{ pd.APPROVE_USER_MEASURES }}</span>
</div>
<div v-if="pd.MONITOR_USER_MEASURES" style="display: flex;justify-content: space-between;margin-top: 10px;">
<span>动火前验票:{{ pd.MONITOR_USER_MEASURES }}</span>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="bbg">安全交底人</td>
<td colspan="10">
<div v-for="item in confessList" :key="item.USER_ID" style="text-align: right">
<span>签字:</span>
<img v-viewer :src="config.fileUrl + item.APPROVAL_SIGNATURE" alt="" width="100" height="100">
<span>{{ item.APPROVAL_SIGNATURE_TIME }}</span>
</div>
</td>
</tr>
<tr>
<td class="bbg">接受交底人</td>
<td colspan="10">
<div v-for="item in acceptConfessList" :key="item.USER_ID" style="text-align: right">
<span>签字:</span>
<img v-viewer :src="config.fileUrl + item.APPROVAL_SIGNATURE" alt="" width="100" height="100">
<span>{{ item.APPROVAL_SIGNATURE_TIME }}</span>
</div>
</td>
</tr>
<tr>
<td class="bbg">监护人</td>
<td colspan="3">
<div v-if="pd.GUARDIAN_USER_SIGNER_PATH" style="text-align: right">
<span>签字:</span>
<img v-viewer :src="config.fileUrl + pd.GUARDIAN_USER_SIGNER_PATH" alt="" width="100" height="100">
<span>{{ pd.GUARDIAN_USER_SIGNER_TIME }}</span>
</div>
</td>
</tr>
<tr>
<td class="bbg">安全措施确认人</td>
<td colspan="3">
<div v-if="pd.SAFETY_SIGNATURE" style="text-align: right">
<span>签字:</span>
<img v-viewer :src="config.fileUrl + pd.SAFETY_SIGNATURE" alt="" width="100" height="100">
<span>{{ pd.SAFETY_SIGNATURE_TIME }}</span>
</div>
</td>
</tr>
<tr v-if="pd.CONFIRM_USER_SIGNER_PATH">
<td colspan="6">
<div>作业负责人意见:{{ pd.CONFIRM_CONTENT === '无' ? '同意' : pd.CONFIRM_CONTENT }}</div>
<div style="text-align: right">
<span>签字:</span>
<img v-viewer :src="config.fileUrl + pd.CONFIRM_USER_SIGNER_PATH" alt="" width="100" height="100">
<span>{{ pd.CONFIRM_USER_SIGNER_TIME }}</span>
</div>
</td>
</tr>
<tr v-if="pd.BELONGING_SIGNATURE">
<td colspan="6">
<div>项目主管部门负责人意见:{{ pd.BELONGING_OPINIONS === '' ? '同意' : pd.BELONGING_OPINIONS }}</div>
<div style="text-align: right">
<span>签字:</span>
<img v-viewer :src="config.fileUrl + pd.BELONGING_SIGNATURE" alt="" width="100" height="100">
<span>{{ pd.BELONGING_SIGNATURE_TIME }}</span>
</div>
</td>
</tr>
<tr v-if="pd.LEADER_USER_SIGNER_PATH">
<td colspan="6">
<div>属地监管单位意见:{{ pd.LEADER_CONTENT === '无' ? '同意' : pd.LEADER_CONTENT }}</div>
<div style="text-align: right">
<span>签字:</span>
<img v-viewer :src="config.fileUrl + pd.LEADER_USER_SIGNER_PATH" alt="" width="100" height="100">
<span>{{ pd.LEADER_USER_SIGNER_TIME }}</span>
</div>
</td>
</tr>
<tr v-if="pd.AUDIT_USER_SIGNER_PATH">
<td colspan="6">
<div>安全管理部门意见:{{ pd.AUDIT_CONTENT === '无' ? '同意' : pd.AUDIT_CONTENT }}</div>
<div style="text-align: right">
<span>签字:</span>
<img v-viewer :src="config.fileUrl + pd.AUDIT_USER_SIGNER_PATH" alt="" width="100" height="100">
<span>{{ pd.AUDIT_USER_SIGNER_TIME }}</span>
</div>
</td>
</tr>
<tr v-if="pd.APPROVE_USER_SIGNER_PATH">
<td colspan="6">
<div>动火审批人意见:{{ pd.APPROVE_CONTENT === '无' ? '同意' : pd.APPROVE_CONTENT }}</div>
<div style="text-align: right">
<span>签字:</span>
<img v-viewer :src="config.fileUrl + pd.APPROVE_USER_SIGNER_PATH" alt="" width="100" height="100">
<span>{{ pd.APPROVE_USER_SIGNER_TIME }}</span>
</div>
</td>
</tr>
<tr v-if="pd.MONITOR_USER_SIGNER_PATH">
<td colspan="6">
<div>动火前验票负责人:{{ pd.MONITOR_CONTENT === '无' ? '同意' : pd.MONITOR_CONTENT }}</div>
<div style="text-align: right">
<span>签字:</span>
<img v-viewer :src="config.fileUrl + pd.MONITOR_USER_SIGNER_PATH" alt="" width="100" height="100">
<span>{{ pd.MONITOR_USER_SIGNER_TIME }}</span>
</div>
</td>
</tr>
<tr v-if="imgList1.length>0">
<td colspan="10">
<div>完工验收:{{ pd.ACCEPT_CONTENT === '无' ? '同意' : pd.ACCEPT_CONTENT }}</div>
<div v-for="item in imgList1" :key="item.ACCEPT_CONFESS_ID" style="text-align: right">
<span>签字:</span>
<img v-viewer :src="config.fileUrl + item.ACCEPT_USER_SIGNER_PATH" alt="" width="100" height="100">
<span>{{ item.ACCEPT_USER_SIGNER_TIME }}</span>
</div>
</td>
</tr>
</table>
</div>
</div>
<!-- <div class="ui-height" />-->
<div class="ui-foot">
<!-- <el-button v-print="'#printTest'" icon="el-icon-printer" type="primary">打 印</el-button>-->
<el-button type="primary" icon="el-icon-printer" @click="handle2PDF">PDF导出</el-button>
<el-button icon="el-icon-arrow-left" @click="goBack">返 回</el-button>
</div>
</div>
</template>
<script>
import { requestFN } from '@/utils/request'
import dateformat from '@/utils/dateformat'
import JsPDF from 'jspdf'
import html2Canvas from 'html2canvas'
export default {
data() {
return {
config: config,
HOTWORK_ID: this.$parent.HOTWORK_ID, // 主键ID
pd: [], // 存放字段参数
measuresList: [],
gasList: [],
imgList: [],
imgList1: [],
otherProtectiveMeasures: [],
acceptConfessList: [],
confessList: []
}
},
created() {
this.getData()
},
methods: {
handle2PDF() {
const loading = this.$loading({
lock: true,
text: '正在生成,请稍候...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
const elements = document.querySelectorAll('div[name="pdf-box"]')
console.log(elements)
this.html2pdf(this.pd.CHECK_NO + '审批表详情', elements, loading)
},
html2pdf(filename, els, loading) {
const flagArr = []
for (let i = 0, len = els.length; i < len; i++) {
flagArr.push(0)
}
console.log(flagArr)
runself(0)
const pdf = new JsPDF('', 'pt', 'a4') // A4纸纵向
function runself(index) {
const html = els[index]
html2Canvas(html, {
allowTaint: true,
taintTest: false,
logging: false,
useCORS: true,
scale: 2 // 按比例增加分辨率
}).then(canvas => {
// eslint-disable-next-line one-var
var ctx = canvas.getContext('2d'),
a4w = 532.28, a4h = 781.89, // A4大小210mm x 297mm四边各保留10mm的边距显示区域190x277 pt:592.28 * 841.89
renderedHeight = 0
const allTrs = html.querySelectorAll('tr')
while (renderedHeight < canvas.height) {
let imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度
for (let i = 0; i < allTrs.length; i++) {
const tr = allTrs[i]
const trHeight = tr.offsetHeight + tr.offsetTop
console.log('offsetHeight:' + tr.offsetHeight + 'offsetTop:' + tr.offsetTop + 'offsetParent:' + tr.offsetParent.offsetTop)
if (trHeight * 2 > (imgHeight + renderedHeight)) {
const btr = allTrs[i - 1]
const btrHeight = btr.offsetHeight + btr.offsetTop
console.log('i:' + (i - 1) + 'btrHeight:' + btrHeight)
imgHeight = btrHeight * 2 - renderedHeight
break
}
}
var page = document.createElement('canvas')
page.width = canvas.width
page.height = Math.min(imgHeight, canvas.height - renderedHeight)// 可能内容不足一页
// 用getImageData剪裁指定区域并画到前面创建的canvas对象中
page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 30, 30, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面保留10mm边距
renderedHeight += imgHeight
if (renderedHeight < canvas.height) {
pdf.addPage()// 如果后面还有内容,添加一个空页
}
}
if (index < els.length - 1) {
pdf.addPage()
}
return 1
}).then(item => {
flagArr[index] = item
if (flagArr.every(f => f === 1)) {
pdf.save(filename)
}
index++
if (index < els.length) {
runself(index)
} else {
loading.close()
}
})
}
},
validStr(str) {
if (str != null && str != '' && typeof (str) != 'undefined' && str != 0) { return true }
return false
},
formatTime(date, column) {
if (date) {
return dateformat(date, 'YYYY年MM月DD日HH时mm分')
} else {
return ''
}
},
formatDate(date, column) {
if (date) {
return dateformat(date, 'YYYY-MM-DD')
} else {
return ''
}
},
getRowKey(row) {
return row.HOTWORK_ID
},
getData() {
this.listLoading = true
requestFN(
'/hotwork/cfd/goEdit',
{
HOTWORK_ID: this.HOTWORK_ID
}
).then((data) => {
this.listLoading = false
this.pd = data.pd // 参数map
console.log(this.pd)
this.imgList = data.imgList
this.imgList1 = data.imgList1
data.pd.confessList.forEach(item => {
if (item.APPROVAL_SIGNATURE_TIME !== undefined && item.APPROVAL_SIGNATURE_TIME.trim() !== '') {
this.confessList.push(item)
}
})
data.pd.acceptConfessList.forEach(item => {
if (item.APPROVAL_SIGNATURE_TIME !== undefined && item.APPROVAL_SIGNATURE_TIME.trim() !== '') {
this.acceptConfessList.push(item)
}
})
for (let i = 0; i < data.measuresList.length; i++) {
// 将字符串转成数组
const PROTECTIVE_MEASURES = data.measuresList[i].PROTECTIVE_MEASURES.split('')
for (let j = 1; j <= 3; j++) {
// 判断字符串是否存在
if (this.findCharIndex(PROTECTIVE_MEASURES, '', j) !== -1) {
// 给字符串后面添加上需要的数据
PROTECTIVE_MEASURES.splice(
this.findCharIndex(PROTECTIVE_MEASURES, '', j) + 1,
0,
data.measuresList[i]['ANSWER' + j]
)
}
}
// 将数组转回字符串
data.measuresList[i].PROTECTIVE_MEASURES = PROTECTIVE_MEASURES.join('')
}
this.measuresList = data.measuresList // 参数map
this.gasList = data.gasList // 参数map
if (this.pd.WORK_LEVEL === '二级') {
this.pd.CONFIRM_USER_MEASURES = this.pd.OTHER_PROTECTIVE_MEASURES.split(';_;')[0]
this.pd.LEADER_USER_MEASURES = this.pd.OTHER_PROTECTIVE_MEASURES.split(';_;')[1]
this.pd.MONITOR_USER_MEASURES = this.pd.OTHER_PROTECTIVE_MEASURES.split(';_;')[2]
} else if (this.pd.WORK_LEVEL === '一级') {
this.pd.CONFIRM_USER_MEASURES = this.pd.OTHER_PROTECTIVE_MEASURES.split(';_;')[0]
this.pd.LEADER_USER_MEASURES = this.pd.OTHER_PROTECTIVE_MEASURES.split(';_;')[1]
this.pd.AUDIT_USER_MEASURES = this.pd.OTHER_PROTECTIVE_MEASURES.split(';_;')[2]
this.pd.MONITOR_USER_MEASURES = this.pd.OTHER_PROTECTIVE_MEASURES.split(';_;')[3]
} else {
this.pd.CONFIRM_USER_MEASURES = this.pd.OTHER_PROTECTIVE_MEASURES.split(';_;')[0]
this.pd.LEADER_USER_MEASURES = this.pd.OTHER_PROTECTIVE_MEASURES.split(';_;')[1]
this.pd.AUDIT_USER_MEASURES = this.pd.OTHER_PROTECTIVE_MEASURES.split(';_;')[2]
this.pd.APPROVE_USER_MEASURES = this.pd.OTHER_PROTECTIVE_MEASURES.split(';_;')[3]
this.pd.MONITOR_USER_MEASURES = this.pd.OTHER_PROTECTIVE_MEASURES.split(';_;')[4]
}
const dongHuoCaoZuoRenPic = data.imgList2
if (dongHuoCaoZuoRenPic && dongHuoCaoZuoRenPic.length > 0) {
this.pd.dongHuoCaoZuoRenPic = []
for (let i = 0; i < dongHuoCaoZuoRenPic.length; i++) {
this.pd.dongHuoCaoZuoRenPic.push(this.config.fileUrl + dongHuoCaoZuoRenPic[i].FILEPATH)
}
}
}).catch((e) => {
this.listLoading = false
})
},
// 查找字符串第几次出现的位置
findCharIndex(str, char, num) {
let index = str.indexOf(char)
for (let i = 0; i < num - 1; i++) {
index = str.indexOf(char, index + 1)
}
return index
},
goBack() {
this.$parent.activeName = 'List'
}
}
}
</script>
<style lang="sass" scoped>
.print-approval-p10
padding: 20px 0
span
vertical-align: middle
.bbg
width: 300px
.print-approval-img
width: 200px
height: 97px
display: inline-block
img
width: 100%
height: 100%
</style>
<style scoped lang="scss">
.table-ui td{
line-height: unset;
}
.app-container{
margin-bottom: 50px;
}
.level-title {
display: flex;
justify-content: space-between;
}
.pdf-content[name=pdf-box]{
position: absolute;
left: -999999px;
.level-title {
h1{
font-size: 20px;
}
.level-code{
font-size: 20px;
}
}
td{
font-size: 20px;
}
.bbg {
width: 180px;
}
}
</style>