359 lines
12 KiB
Vue
359 lines
12 KiB
Vue
<template>
|
||
<div>
|
||
<div id="printTest" class="app-container">
|
||
<div class="level-title">
|
||
<h1>隐患信息</h1>
|
||
</div>
|
||
<div class="mb-20">
|
||
<table class="table-ui">
|
||
<tr>
|
||
<td class="tbg">隐患来源</td>
|
||
<template v-if="pd.SOURCE=='1'">
|
||
<td>隐患快报</td>
|
||
</template>
|
||
<template v-else-if="pd.SOURCE=='2'">
|
||
<td>清单排查</td>
|
||
</template>
|
||
<template v-else-if="pd.SOURCE=='3'">
|
||
<td>清单排查</td>
|
||
</template>
|
||
<template v-else-if="pd.SOURCE=='6'">
|
||
<td>消防检查</td>
|
||
</template>
|
||
</tr>
|
||
<tr>
|
||
<td class="tbg">隐患描述</td>
|
||
<td colspan="3">{{ pd.HIDDENDESCR }}</td>
|
||
</tr>
|
||
<tr v-if="pd.SOURCE=='2'">
|
||
<td class="tbg">风险点（单元）</td>
|
||
<td colspan="3">{{ pd.RISK_UNIT }}</td>
|
||
</tr>
|
||
<tr v-if="pd.SOURCE=='2'">
|
||
<td class="tbg">辨识部位</td>
|
||
<td colspan="3">{{ pd.IDENTIFICATION }}</td>
|
||
</tr>
|
||
<tr v-if="pd.SOURCE=='2'">
|
||
<td class="tbg">存在风险</td>
|
||
<td colspan="3">{{ pd.RISK_DESCR }}</td>
|
||
</tr>
|
||
<tr v-if="pd.SOURCE=='2'">
|
||
<td class="tbg">风险分级</td>
|
||
<td colspan="3">{{ pd.LEVEL }}</td>
|
||
</tr>
|
||
<tr v-if="pd.SOURCE=='2'">
|
||
<td class="tbg">检查内容</td>
|
||
<td colspan="3">{{ pd.CHECK_CONTENT }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="tbg">隐患级别</td>
|
||
<!-- <td v-if="pd.editLevelName">{{ pd.editLevelName }}</td>-->
|
||
<!-- <td v-else>{{ pd.HIDDENLEVELNAME }}</td>-->
|
||
<td>{{ pd.HIDDENLEVELNAME }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="tbg">隐患类型</td>
|
||
<td>{{ pd.HIDDENTYPENAME }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="tbg">隐患状态</td>
|
||
<td colspan="3">
|
||
<template v-if="pd.STATE=='0'">
|
||
未提交
|
||
</template>
|
||
<template v-if="pd.STATE=='1'">
|
||
未整改
|
||
</template>
|
||
<template v-else-if="pd.STATE=='2'">
|
||
已整改
|
||
</template>
|
||
<template v-else-if="pd.STATE=='3'">
|
||
已整改
|
||
</template>
|
||
<template v-else-if="pd.STATE=='4'">
|
||
已验收
|
||
</template>
|
||
<template v-else-if="pd.STATE=='5'">
|
||
忽略隐患
|
||
</template>
|
||
<template v-else-if="pd.STATE=='6'">
|
||
重大隐患
|
||
</template>
|
||
<template v-else-if="pd.STATE=='7'">
|
||
待处理的特殊隐患
|
||
</template>
|
||
<template v-else-if="pd.STATE=='8'">
|
||
已处理的特殊隐患
|
||
</template>
|
||
<template v-else-if="pd.STATE=='-1'">
|
||
已超期
|
||
</template>
|
||
<template v-else-if="pd.STATE=='-2'">
|
||
待确认
|
||
</template>
|
||
<template v-else-if="pd.STATE=='16'">
|
||
确认打回
|
||
</template>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="tbg">整改类型</td>
|
||
<td colspan="3">
|
||
<template v-if="pd.RECTIFICATIONTYPE=='1'">
|
||
立即整改
|
||
</template>
|
||
<template v-else-if="pd.RECTIFICATIONTYPE=='2'">
|
||
限期整改
|
||
</template>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="tbg">隐患位置描述</td>
|
||
<td>{{ pd.POSITIONDESC }}</td>
|
||
</tr>
|
||
<!--<tr>
|
||
<td class="tbg">隐患类型2</td>
|
||
<td>{{ pd.HIDDENTYPENAME2 }}</td>
|
||
</tr>-->
|
||
<tr>
|
||
<td class="tbg">隐患部位</td>
|
||
<td>{{ pd.hregionName }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="tbg">隐患上报位置</td>
|
||
<td>经度:{{ pd.LONGITUDE }} , 纬度:{{ pd.LATITUDE }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="tbg">隐患图片</td>
|
||
<td class="img-select">
|
||
<viewer :images="hImgs">
|
||
<img v-for="item in hImgs" :src="config.fileUrl + item.FILEPATH" :key="item.IMGFILES_ID" width="100" height="100">
|
||
</viewer>
|
||
</td>
|
||
</tr>
|
||
<tr v-if="playerOptions.sources[0].src">
|
||
<td class="tbg">隐患视频</td>
|
||
<td>
|
||
<span style="color: #4395ff;cursor: pointer" @click="dialogVisible = true">隐患视频</span>
|
||
</td>
|
||
</tr>
|
||
<tr v-for="(item, index) in hiddenFindPeople" :key="index">
|
||
<td class="tbg">隐患发现人</td>
|
||
<td>{{ item.NAME }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="tbg">隐患发现部门</td>
|
||
<td colspan="3">{{ pd.HIDDENFINDDEPTNAME }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="tbg">隐患发现时间</td>
|
||
<td>{{ pd.DISCOVERYTIME }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="tbg">整改负责人</td>
|
||
<td v-if="pd.oldUserName ">{{ pd.oldUserName }}</td>
|
||
<td v-else>{{ pd.RECTIFICATIONORNAME }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="tbg">整改完成期限</td>
|
||
<td v-if="pd.oldRectificationDeadline ">{{ pd.oldRectificationDeadline }}</td>
|
||
<td v-else>{{ pd.RECTIFICATIONDEADLINE }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="tbg">是否相关方</td>
|
||
<td >{{ pd.ISRELEVANT =='1'?'是':'否' }}</td>
|
||
</tr>
|
||
<template v-if="repulsecause">
|
||
<tr v-for="item in repulsecause" :key="item.USER_ID">
|
||
<td class="tbg">打回原因</td>
|
||
<td>{{ item.REPULSE_CAUSE }}</td>
|
||
</tr>
|
||
</template>
|
||
<template v-if="repulsecause">
|
||
<tr v-for="item in repulsecause" :key="item.USER_ID">
|
||
<td class="tbg">打回时间</td>
|
||
<td>{{ item.OPERATTIME }}</td>
|
||
</tr>
|
||
</template>
|
||
</table>
|
||
</div>
|
||
<div>
|
||
<div class="level-title">
|
||
<h1>确认信息</h1>
|
||
</div>
|
||
<table class="table-ui">
|
||
<tr>
|
||
<td class="tbg">隐患级别</td>
|
||
<td >{{ pd.HIDDENLEVELNAME }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="tbg">整改负责人</td>
|
||
<td >{{ pd.RECTIFICATIONORNAME }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="tbg">整改完成期限</td>
|
||
<td >{{ pd.RECTIFICATIONDEADLINE }}</td>
|
||
</tr>
|
||
<tr >
|
||
<td class="tbg">隐患确认人</td>
|
||
<td>{{ pd.conUserName }}</td>
|
||
</tr>
|
||
<tr v-if="pd.STATE != '-2' && $parent.activeType === 'view'">
|
||
<td class="tbg">隐患确认时间</td>
|
||
<td>{{ pd.CONFIRM_TIME }}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div class="ui-height" />
|
||
<!-- <div>-->
|
||
<!-- <div class="level-title">-->
|
||
<!-- <h1>隐患整改</h1>-->
|
||
<!-- </div>-->
|
||
<!-- <table class="table-ui">-->
|
||
<!-- <tr>-->
|
||
<!-- <td class="tbg">整改描述</td>-->
|
||
<!-- <td >{{ pd.RECTIFYDESCR }}</td>-->
|
||
<!-- </tr>-->
|
||
<!-- <tr v-if="files2.length>0">-->
|
||
<!-- <td class="tbg">整改后图片</td>-->
|
||
<!-- <td class="img-select">-->
|
||
<!-- <viewer :images="files2">-->
|
||
<!-- <img v-for="item in files2" :src="config.fileUrl + item.FILEPATH" :key="item.IMGFILES_ID" width="100" height="100">-->
|
||
<!-- </viewer>-->
|
||
<!-- </td>-->
|
||
<!-- </tr>-->
|
||
|
||
<!-- </table>-->
|
||
<!-- </div>-->
|
||
<div class="ui-height" />
|
||
<div class="ui-foot">
|
||
<el-button plain type="info" @click="back">返 回</el-button>
|
||
</div>
|
||
</div>
|
||
<el-dialog :visible.sync="dialogVisible" title="隐患视频">
|
||
<div>
|
||
<video-player
|
||
ref="videoPlayer"
|
||
:playsinline="true"
|
||
:options="playerOptions"
|
||
style="width: 100%;"
|
||
class="video-player vjs-custom-skin"/>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">关 闭</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
|
||
import { requestFN } from '@/utils/request'
|
||
import SelectTree from '@/components/SelectTree'
|
||
import formatDate from '@/utils/dateformat'
|
||
import 'video.js/dist/video-js.css'
|
||
import { videoPlayer } from 'vue-video-player'
|
||
export default {
|
||
components: { Pagination, SelectTree, videoPlayer },
|
||
data() {
|
||
return {
|
||
HIDDEN_ID: '', // 主键ID
|
||
pd: {}, // 存放字段参数
|
||
config: config,
|
||
hImgs: [],
|
||
defaultProps: {
|
||
value: 'id',
|
||
children: 'nodes',
|
||
label: 'name',
|
||
checkStrictly: true
|
||
},
|
||
rectificationUserList: [],
|
||
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: false, // 是否显示剩余时间功能
|
||
fullscreenToggle: true // 是否显示全屏按钮
|
||
}
|
||
},
|
||
dialogVisible: false,
|
||
hiddenFindPeople: [],
|
||
repulsecause: [],
|
||
files2: []
|
||
}
|
||
},
|
||
created() {
|
||
if (this.$parent.hiddenId) {
|
||
this.getData(this.$parent.hiddenId)
|
||
}
|
||
},
|
||
methods: {
|
||
getData(hiddenId) {
|
||
this.listLoading = true
|
||
requestFN(
|
||
'/hidden/goEdit',
|
||
{
|
||
HIDDEN_ID: hiddenId
|
||
}
|
||
).then((data) => {
|
||
this.pd = data.pd // 参数map
|
||
this.hImgs = data.hImgs
|
||
this.files2 = data.rImgs
|
||
this.repulsecause = data.repulsecause
|
||
this.playerOptions.sources[0].src = config.fileUrl + data.hiddenVideo[0].FILEPATH
|
||
if (data.hiddenFindPeople) {
|
||
this.hiddenFindPeople = data.hiddenFindPeople
|
||
}
|
||
if (data.hiddenExa.length > 0) {
|
||
data.hiddenExa.forEach(item => {
|
||
if (item.TYPE == 4) {
|
||
this.pd.editUserName = item.editUserName
|
||
this.pd.editDeptName = item.editDeptName
|
||
this.pd.editLevelName = item.editLevelName
|
||
this.pd.editRectificationDeadline = item.spare3
|
||
}
|
||
})
|
||
}
|
||
}).catch((e) => {
|
||
this.listLoading = false
|
||
})
|
||
},
|
||
back() {
|
||
this.$parent.activeName = 'List'
|
||
},
|
||
formatDate(date, format) {
|
||
return formatDate(date, format)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="sass" scoped>
|
||
.table-ui
|
||
.tbg
|
||
width: 150px
|
||
.img-flex
|
||
display: flex
|
||
.img-ui
|
||
width: 240px
|
||
height: 240px
|
||
margin-right: 20px
|
||
& img
|
||
width: 100%
|
||
height: 100%
|
||
</style>
|