qa-prevention-gwj-vue/src/views/safetyenvironmental/inspection/components/info.vue

388 lines
16 KiB
Vue
Raw Normal View History

2023-11-06 18:11:01 +08:00
<template>
<div>
<div class="app-container">
<div id="printContent" class="dialogContent mb-20">
<div class="mb-20">
<div class="level-title">
<h1>{{ pd.INSPECTION_SUBJECT }}现场安全检查记录</h1>
</div>
<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">检查场所</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_USER_NAME }}</td>
</tr>
<tr>
<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="false">
<td colspan="4" style="padding: 0;">
<table class="table-vi">
<tr>
<th colspan="5">发现问题</th>
</tr>
<tbody v-for="(item, index) in pd.hiddenList" :key="'hidden'+index">
<tr>
<td rowspan="7" align="center" style="font-size: larger;font-weight: bolder">{{ index+1 }}</td>
<td class="tbg">隐患发现人</td>
<td>{{ item.CREATOR_NAME }}</td>
<td class="tbg">隐患级别</td>
<td>{{ item.HIDDENLEVEL_NAME }}</td>
</tr>
<tr>
<td class="tbg">隐患描述</td>
<td colspan="3">{{ item.HIDDENDESCR }}</td>
</tr>
<tr>
<td class="tbg">隐患发现时间</td>
<td>{{ item.DISCOVERYTIME }}</td>
<td class="tbg">隐患部位</td>
<td>{{ item.HIDDENPART_NAME?item.HIDDENPART_NAME:item.HIDDENPART }}</td>
</tr>
<tr>
<td class="tbg">隐患位置描述</td>
<td>{{ item.POSITIONDESC }}</td>
<td class="tbg">是否是相关方</td>
<td>{{ item.ISRELEVANT ==='1'?'是':'否' }}</td>
</tr>
<tr>
<td class="tbg">隐患类型</td>
<td>{{ item.HIDDENTYPE_NAME?item.HIDDENTYPE_NAME:item.HIDDENTYPE }}</td>
<!--<td class="tbg">隐患类型2</td>
<td>{{ item.HIDDENTYPE2_NAME }}</td>-->
</tr>
<tr>
<td class="tbg">隐患位置</td>
<td colspan="3">
<el-button icon="el-icon-place" circle @click="showMap(item)" />
<span>
经度:{{ item.LONGITUDE }} , 纬度:{{ item.LATITUDE }}
</span>
</td>
</tr>
<tr>
<td class="tbg">隐患图片</td>
<td colspan="3">
<div v-for="(data, indexImg) in item.hiddenImgs" :key="'hd'+index+'Img'+indexImg" class="demo-image__preview" style="float: left; margin-right: 5px">
<el-image
:src="config.fileUrl + data.FILEPATH"
:preview-src-list="new Array(config.fileUrl + data.FILEPATH)"
style="width: 100px; height: 100px"/>
</div>
</td>
</tr>
<tr v-if="item.hiddenVideos">
<td class="tbg">隐患视频</td>
<td colspan="3">
<div v-for="(data, indexV) in item.hiddenVideos" :key="'hd'+index+'Img'+indexV" class="demo-image__preview" style="float: left; margin-right: 5px">
<el-button icon="el-icon-video-camera" circle @click="goViewVideo(data)"/>
</div>
</td>
</tr>
</tbody>
</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="200">
<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>
</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 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 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">被检查单位现场负责人签字</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>-->
2023-11-06 18:11:01 +08:00
</tr>
</table>
</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>
<el-dialog :visible.sync="dialogViewVideo" title="视频" width="800px" @close="closePlay">
<div>
<video-player
ref="hdVideoPlayer"
:playsinline="true"
:options="playerOptions"
class="video-player vjs-custom-skin"/>
</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 { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import information from '../../../hiddenUtil/information'
import flowChart from '../../../hiddenUtil/flowChart'
export default {
components: { videoPlayer, information, flowChart },
data() {
return {
listLoading: true,
config: config,
iframeSrc: '',
dialogMap: false,
pd: {
INSPECTION_SUBJECT: '', // 检查标题
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被检查人申辩)
INSPECTED_DEPARTMENT_NAMES: '',
situationList: [''], // 检查情况
hiddenList: [] // 隐患信息集合
},
dialogViewVideo: false,
playerOptions: {
playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
autoplay: false, // 如果为true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 是否视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3"
fluid: true, // 当true时Video.js player将拥有流体大小。换句话说它将按比例缩放以适应其容器。
sources: [{
type: 'video/mp4', // 类型
src: '' // url地址
}],
poster: '', // 封面地址
notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true, // 当前时间和持续时间的分隔符
durationDisplay: true, // 显示持续时间
remainingTimeDisplay: true, // 是否显示剩余时间功能
fullscreenToggle: true // 是否显示全屏按钮
}
}
}
},
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 ''
}
},
checkFlow(item) {
this.$refs.flowChart.init(item)
},
goView(id) {
this.$refs.information.init(id)
},
getData() {
return new Promise((resolve) => {
requestFN(
'/safetyenvironmental/goShow',
2023-11-06 18:11:01 +08:00
{
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
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') // 截取后的视频封面
}
},
goViewVideo(row) {
const type = row.FILEPATH.slice(row.FILEPATH.lastIndexOf('.') + 1)
this.playerOptions.sources[0].src = this.config.fileUrl + row.FILEPATH
this.playerOptions.poster = this.config.fileUrl + row.IMGFILEPATH
this.playerOptions.sources[0].type = 'video/' + type
this.dialogViewVideo = true
},
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)
}, '*')
}
}
})
},
goBack() {
this.$parent.INSPECTION_ID = ''
this.$parent.activeName = 'List'
}
}
}
</script>
<style scoped>
</style>