350 lines
14 KiB
Vue
350 lines
14 KiB
Vue
<template>
|
||
<div>
|
||
<div class="app-container">
|
||
<div id="printContent" class="dialogContent mb-20">
|
||
<div class="no-print">
|
||
<div class="level-title">
|
||
<h1>秦港股份有限公司现场{{ pd.INSPECTION_SUBJECT }}检查记录</h1>
|
||
</div>
|
||
</div>
|
||
<h3 class="no-show" style="text-align: center">秦港股份有限公司现场{{ pd.INSPECTION_SUBJECT }}检查记录</h3>
|
||
<div class="mb-20">
|
||
<table class="table-ui">
|
||
<tr>
|
||
<td class="tbg" width="12%">被检查单位</td>
|
||
<td width="30%">{{ pd.INSPECTED_DEPARTMENT_NAMES }}</td>
|
||
<td class="tbg" width="15%">被检查单位现场负责人</td>
|
||
<td width="40%">{{ pd.INSPECTED_SITEUSER_NAME }}</td>
|
||
</tr>
|
||
<tr>
|
||
<!-- <td class="tbg" width="12%">被检查单位</td>-->
|
||
<!-- <td width="38%">{{ pd.INSPECTED_DEPARTMENT_NAMES }}</td>-->
|
||
<!-- <td class="tbg" width="15%">被检查单位现场负责人</td>-->
|
||
<!-- <td width="35%">{{ pd.INSPECTED_SITEUSER_NAME }}</td>-->
|
||
<td class="tbg">检查场所</td>
|
||
<td colspan="3">{{ pd.INSPECTION_PLACE }}</td>
|
||
</tr>
|
||
<tr>
|
||
<!-- <td class="tbg">检查部门</td>-->
|
||
<!-- <td>{{ pd.INSPECTION_LEADDEPARTMENT_NAME }}</td>-->
|
||
<!-- <td class="tbg">检查类型</td>-->
|
||
<!-- <td>{{ pd.INSPECTION_TYPE_NAME }}</td>-->
|
||
<td class="tbg">牵头检查部门</td>
|
||
<td>{{ pd.INSPECTION_LEADDEPARTMENT_NAME }}</td>
|
||
<td class="tbg">检查人员</td>
|
||
<td>{{ pd.INSPECTION_USER_NAME }}</td>
|
||
</tr>
|
||
<!-- <tr>-->
|
||
<!-- <td class="tbg">检查场所</td>-->
|
||
<!-- <td colspan="3">{{ pd.INSPECTION_PLACE }}</td>-->
|
||
<!-- </tr>-->
|
||
<tr>
|
||
<!-- <td class="tbg">检查时间</td>-->
|
||
<!-- <td colspan="3">{{ formatTime(pd.INSPECTION_TIME_START) }} 至 {{ formatTime(pd.INSPECTION_TIME_END) }}</td>-->
|
||
<td class="tbg">检查类型</td>
|
||
<td>{{ pd.INSPECTION_TYPE_NAME }}</td>
|
||
<td class="tbg">检查时间</td>
|
||
<td>{{ formatTime(pd.INSPECTION_TIME_START) }} 至 {{ formatTime(pd.INSPECTION_TIME_END) }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="tbg">记录填写时间</td>
|
||
<td colspan="3">{{ pd.CREATTIME }}</td>
|
||
</tr>
|
||
|
||
<tr v-if="pd.situationList">
|
||
<td colspan="4" style="padding: 0;">
|
||
<table class="table-vi">
|
||
<tr>
|
||
<th>检查情况</th>
|
||
</tr>
|
||
<tr v-for="(item,index) in pd.situationList" :key="'situation'+index">
|
||
<td>{{ index + 1 }}. {{ item.SITUATION }}</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
<tr v-if="pd.hiddenList">
|
||
<td colspan="4" style="padding: 0;">
|
||
<table class="table-vi">
|
||
<tr>
|
||
<th colspan="5">发现问题</th>
|
||
</tr>
|
||
<tbody v-for="(item) in pd.hiddenList" :key="item.HIDDEN_ID" class="no-print">
|
||
<tr>
|
||
<td class="tbg">隐患描述</td>
|
||
<td>{{ item.HIDDENDESCR }}</td>
|
||
<td class="tbg">隐患部位</td>
|
||
<td>{{ item.HIDDENPART_NAME?item.HIDDENPART_NAME:item.HIDDENPART }}</td>
|
||
<td width="300">
|
||
<el-button icon="el-icon-view" size="mini" @click="goView(item.HIDDEN_ID)">查看</el-button>
|
||
<el-button type="success" icon="el-icon-view" size="mini" @click="checkFlow(item)">流程图</el-button>
|
||
<el-button v-if="pd.INSPECTION_STATUS == '0' || pd.INSPECTION_STATUS =='2'" type="danger" icon="el-icon-view" size="mini" @click="goDelete(item)">删除</el-button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
<tr v-for="(item,index) in pd.hiddenList" :key="'hidden'+index" class="no-tr-show">
|
||
<td>{{ index + 1 }}. {{ item.HIDDENDESCR }}</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div class="no-print">
|
||
<div v-if="pd.inspectorList && pd.inspectorList.length > 0" class="level-title">
|
||
<h1>检查人员核实情况</h1>
|
||
</div>
|
||
<div v-if="pd.inspectorList && pd.inspectorList.length > 0" class="mb-20">
|
||
<table class="table-ui">
|
||
<tr>
|
||
<th>序号</th>
|
||
<th>核实人员</th>
|
||
<th>核实时间</th>
|
||
<th>核实意见</th>
|
||
<th>签字</th>
|
||
</tr>
|
||
<tr v-for="(item, index) in pd.inspectorList" :key="'inspector'+index">
|
||
<td>{{ index+1 }}</td>
|
||
<td>{{ item.INSPECTION_USER_NAME }}</td>
|
||
<td>{{ item.INSPECTION_USER_SIGN_TIME }}</td>
|
||
<td>{{ item.INSPECTION_USER_OPINION }}</td>
|
||
<td>
|
||
<el-image
|
||
:src="config.fileUrl + item.INSPECTION_USER_SIGN_IMG"
|
||
:preview-src-list="new Array(config.fileUrl + item.INSPECTION_USER_SIGN_IMG)"
|
||
style="width: 100px; height: 100px"/>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="no-show">
|
||
<div style="display: flex">
|
||
<p>检查人员（签名）：</p>
|
||
<div v-if="pd.inspectorList && pd.inspectorList.length > 0" class="mb-20">
|
||
<el-image
|
||
v-for="(item, index) in pd.inspectorList"
|
||
:key="'inspector'+index"
|
||
:src="config.fileUrl + item.INSPECTION_USER_SIGN_IMG"
|
||
:preview-src-list="new Array(config.fileUrl + item.INSPECTION_USER_SIGN_IMG)"
|
||
style="width: 100px; height: 100px;margin-left: 20px"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="no-print">
|
||
<div v-if="pd.INSPECTED_SITEUSER_SIGN_TIME" class="level-title">
|
||
<h1>被检查单位负责人确认情况</h1>
|
||
</div>
|
||
<div v-if="pd.INSPECTED_SITEUSER_SIGN_TIME" class="mb-20">
|
||
<table class="table-ui">
|
||
<tr>
|
||
<td class="tbg" style="width: 200px;">被检查单位负责人（签字）：</td>
|
||
<td>
|
||
<el-image
|
||
:src="config.fileUrl + pd.INSPECTED_SITEUSER_SIGN_IMG"
|
||
:preview-src-list="new Array(config.fileUrl + pd.INSPECTED_SITEUSER_SIGN_IMG)"
|
||
style="width: 100px; height: 100px"/>
|
||
</td>
|
||
<td class="tbg">确认时间：</td>
|
||
<td>{{ pd.INSPECTED_SITEUSER_SIGN_TIME }}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="no-show">
|
||
<div style="display: flex;align-items: center">
|
||
<p>被检查单位负责人（签名）：</p>
|
||
<div style="display: flex;align-items: center">
|
||
<div>
|
||
<el-image
|
||
:src="config.fileUrl + pd.INSPECTED_SITEUSER_SIGN_IMG"
|
||
:preview-src-list="new Array(config.fileUrl + pd.INSPECTED_SITEUSER_SIGN_IMG)"
|
||
style="width: 100px; height: 100px"/>
|
||
</div>
|
||
<span>{{ pd.INSPECTED_SITEUSER_SIGN_TIME }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<el-dialog :visible.sync="dialogMap" :title="'隐患位置'" width="80%">
|
||
<div>
|
||
<iframe id="iframe" ref="iframe" :src="iframeSrc" frameborder="0" allowtransparency="true" width="100%" height="600"/>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<video id="videoPlayer" controls="controls" crossOrigin="anonymous" style="display: none">
|
||
<source id="videoSource" src="" type="video/mp4">
|
||
</video>
|
||
<canvas id="canvasVideo" style="display: none"/>
|
||
|
||
<div class="ui-height" />
|
||
<div class="ui-foot">
|
||
<el-button v-print="'#printContent'" type="primary" icon="el-icon-printer" size="mini">打印</el-button>
|
||
<el-button plain type="info" @click="goBack">返 回</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<information ref="information"/>
|
||
<flowChart ref="flowChart"/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { requestFN } from '@/utils/request'
|
||
import dateformat from '@/utils/dateformat'
|
||
import information from '../../../hiddenUtil/information'
|
||
import flowChart from '../../../hiddenUtil/flowChart'
|
||
export default {
|
||
components: { information, flowChart },
|
||
data() {
|
||
return {
|
||
listLoading: true,
|
||
config: config,
|
||
iframeSrc: '',
|
||
dialogMap: false,
|
||
pd: {
|
||
INSPECTION_SOURCE: '5', // 检查来源（4-监管端 5-企业端）
|
||
inspectorList: [], // 检查人员
|
||
INSPECTION_ORIGINATOR_NAME: '', // 检查发起人
|
||
INSPECTED_DEPARTMENT_NAME: '', // 被检查单位
|
||
INSPECTED_SITEUSER_NAME: '', // 被检查单位现场负责人
|
||
INSPECTED_EXPLAIN: '', // 申辩内容
|
||
INSPECTED_SITEUSER_SIGN_IMG: '', // 被检查单位现场负责人签字
|
||
INSPECTED_SITEUSER_SIGN_TIME: '', // 被检查单位现场负责人签字时间
|
||
INSPECTION_TYPE_NAME: '', // 检查类型
|
||
INSPECTION_PLACE: '', // 检查场所
|
||
INSPECTION_TIME_START: '', // 检查开始时间
|
||
INSPECTION_TIME_END: '', // 检查结束时间
|
||
INSPECTION_STATUS: '', // 状态(0.暂存 1.检查人待确认、2.被检查人待确认、3.归档 -1.检查人异议打回 -2被检查人申辩)
|
||
CREATTIME: '',
|
||
situationList: [''], // 检查情况
|
||
hiddenList: [] // 隐患信息集合
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.iframeSrc = this.config.weburl + 'static/mapshow.html?t=' + Math.random()
|
||
},
|
||
async mounted() {
|
||
await this.getData()
|
||
},
|
||
methods: {
|
||
formatTime(date, column) {
|
||
if (date) {
|
||
return dateformat(date, 'YYYY年MM月DD日HH时mm分')
|
||
} else {
|
||
return ''
|
||
}
|
||
},
|
||
getData() {
|
||
return new Promise((resolve) => {
|
||
requestFN(
|
||
'/safetyenvironmental/goShow',
|
||
{
|
||
INSPECTION_ID: this.$parent.INSPECTION_ID
|
||
}
|
||
).then((data) => {
|
||
this.pd = Object.assign({}, data.pd) // copy obj
|
||
this.pd.hiddenList.forEach(item => {
|
||
if (item.hiddenVideos.length > 0) {
|
||
this.$set(item.hiddenVideos[0], 'IMGFILEPATH', this.findvideocover(item.hiddenVideos[0]))
|
||
}
|
||
})
|
||
this.listLoading = false
|
||
console.info(this.pd)
|
||
resolve()
|
||
}).catch((e) => {
|
||
this.listLoading = false
|
||
})
|
||
})
|
||
},
|
||
findvideocover(item) {
|
||
const source = document.getElementById('videoSource') // 获取视频对象
|
||
source.src = this.config.fileUrl + item.FILEPATH
|
||
const video = document.getElementById('videoPlayer')
|
||
video.currentTime = 1 // 第一帧
|
||
video.load()
|
||
var canvas = document.getElementById('canvasVideo') // 获取 canvas 对象
|
||
video.oncanplay = () => {
|
||
// 利用canvas对象方法绘图
|
||
canvas.getContext('2d').drawImage(video, 0, 0, video.clientWidth, video.clientHeight)
|
||
// 转换成base64形式
|
||
item.IMGFILEPATH = canvas.toDataURL('image/png') // 截取后的视频封面
|
||
}
|
||
},
|
||
goView(id) {
|
||
this.$refs.information.init(id)
|
||
},
|
||
closePlay() {
|
||
this.$refs.hdVideoPlayer.player.pause()
|
||
},
|
||
showMap(obj) {
|
||
this.dialogMap = true
|
||
this.iframeSrc = this.config.weburl + 'static/mapshow.html?t=' + Math.random()
|
||
this.$nextTick(() => {
|
||
const iframe = document.querySelector('#iframe')
|
||
// 处理兼容行问题
|
||
if (iframe.attachEvent) {
|
||
iframe.attachEvent('onload', function() {
|
||
this.contentWindow.postMessage(
|
||
{
|
||
'name': obj.HIDDENDESCR,
|
||
'longitude': Number(obj.LONGITUDE),
|
||
'latitude': Number(obj.LATITUDE)
|
||
}, '*')
|
||
})
|
||
} else {
|
||
iframe.onload = function() {
|
||
this.contentWindow.postMessage(
|
||
{
|
||
'name': obj.HIDDENDESCR,
|
||
'longitude': Number(obj.LONGITUDE),
|
||
'latitude': Number(obj.LATITUDE)
|
||
}, '*')
|
||
}
|
||
}
|
||
})
|
||
},
|
||
checkFlow(item) {
|
||
this.$refs.flowChart.init(item)
|
||
},
|
||
goDelete(item) {
|
||
this.$confirm('确定要删除此隐患吗？', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
requestFN(
|
||
'/hiddenApi/deleteHiddenForSafetyenvironmental',
|
||
{
|
||
HIDDEN_ID: item.HIDDEN_ID,
|
||
tm: new Date().getTime()
|
||
}
|
||
).then((res) => {
|
||
if (res.result === 'success') {
|
||
this.$message({
|
||
message: '删除成功',
|
||
type: 'success'
|
||
})
|
||
} else {
|
||
this.$message({
|
||
message: res.codeMsg,
|
||
type: 'error'
|
||
})
|
||
}
|
||
this.getData()
|
||
}).catch((e) => {})
|
||
}).catch(() => {})
|
||
},
|
||
goBack() {
|
||
this.$parent.INSPECTION_ID = ''
|
||
this.$parent.activeName = 'List'
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
</style>
|