<template> <div> <div 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=='4'"> <td>安全环保检查(监管端)</td> </template> <template v-else-if="pd.SOURCE=='5'"> <td>安全环保检查(企业端)</td> </template> </tr> <tr> <td class="tbg">隐患描述</td> <td>{{ pd.HIDDENDESCR }}</td> </tr> <tr v-if="pd.SOURCE=='2'"> <td class="tbg">风险点(单元)</td> <td>{{ pd.RISK_UNIT }}</td> </tr> <tr v-if="pd.SOURCE=='2'"> <td class="tbg">辨识部位</td> <td>{{ pd.IDENTIFICATION }}</td> </tr> <tr v-if="pd.SOURCE=='2'"> <td class="tbg">存在风险</td> <td class="tbg">存在风险</td> <td>{{ pd.RISK_DESCR }}</td> </tr> <tr v-if="pd.SOURCE=='2'"> <td class="tbg">风险分级</td> <td>{{ pd.LEVEL }}</td> </tr> <tr v-if="pd.SOURCE=='2'"> <td class="tbg">检查内容</td> <td>{{ pd.CHECK_CONTENT }}</td> </tr> <tr> <td class="tbg">隐患级别</td> <td>{{ pd.HIDDENLEVELNAME }}</td> </tr> <tr> <td class="tbg">隐患类型</td> <td>{{ pd.HIDDENTYPENAME }}</td> </tr> <tr> <td class="tbg">隐患状态</td> <td> <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=='8'"> 特殊处置审核 </template> </td> </tr> <tr> <td class="tbg">隐患部位</td> <td>{{ pd.hregionName?pd.hregionName:pd.HIDDENPART }}</td> </tr> <tr> <td class="tbg">隐患上报位置</td> <td>经度:{{ pd.LONGITUDE }} , 纬度:{{ pd.LATITUDE }}</td> </tr> <tr> <td class="tbg">隐患位置描述</td> <td>{{ pd.POSITIONDESC }}</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-for="item in hiddenFindPeople" :key="item.USER_ID"> <td class="tbg">隐患发现人 </td> <td>{{ item.NAME }}</td> </tr> <tr> <td class="tbg">隐患发现时间</td> <td>{{ pd.CREATTIME }}</td> </tr> <tr> <td class="tbg">整改类型</td> <td> <template v-if="pd.RECTIFICATIONTYPE=='1'"> 立即整改 </template> <template v-else-if="pd.RECTIFICATIONTYPE=='2'"> 限期整改 </template> </td> </tr> <tr> <td class="tbg">整改负责人</td> <td >{{ pd.oldUserName }}</td> </tr> <tr v-if="pd.RECTIFICATIONTYPE=='2'"> <td class="tbg">整改完成期限</td> <td>{{ pd.oldRectificationDeadline }}</td> </tr> <tr> <td class="tbg">是否是相关方</td> <td>{{ pd.ISRELEVANT ==='1'?'是':'否' }}</td> </tr> <tr v-if="playerOptions.sources[0].src"> <td class="tbg">隐患视频</td> <td> <span style="color: #4395ff;cursor: pointer" @click="dialogVideoVisible = true">隐患视频</span> </td> </tr> </table> <div v-for="(item,index) in hiddenExamineList" :key="index"> <div class="level-line" /> <div class="level-title"> <h1 v-if="item.TYPE === 4">确认信息</h1> <h1 v-else-if="item.TYPE === 2">延期信息</h1> <h1 v-else-if="item.TYPE === 1">特殊处理审核信息</h1> </div> <table v-if="item.TYPE === 4" class="table-ui"> <tr> <td class="tbg">隐患级别</td> <td >{{ item.editLevelName }}</td> </tr> <tr> <td class="tbg">整改负责人</td> <td >{{ item.editUserName }}</td> </tr> <tr> <td class="tbg">整改完成期限</td> <td >{{ item.spare3 }}</td> </tr> <tr> <td class="tbg">隐患确认人</td> <td>{{ pd.conUserName }}</td> </tr> <tr > <td class="tbg">隐患确认时间</td> <td>{{ pd.CONFIRM_TIME }}</td> </tr> </table> <table v-else-if="item.TYPE === 2" class="table-ui"> <tr> <td class="tbg">申请延期日期</td> <td >{{ item.DELAY_TIME }}</td> </tr> <tr> <td class="tbg">审核人</td> <td>{{ pd.conUserName }}</td> </tr> <tr> <td class="tbg">处置方案</td> <td >{{ item.DISPOSAL_PLAN }}</td> </tr> <tr v-if="item.DISPOSAL_FILE"> <td class="tbg">方案附件</td> <td><a style="color: #1e9fff" @click="goViewPdf(item.DISPOSAL_FILE)">[预览]</a> </td> </tr> <tr> <td class="tbg">延期审核状态</td> <template v-if="item.STATE===-1"> <td>待审核</td> </template> <template v-else-if="item.STATE===1"> <td>通过</td> </template> <template v-else-if="item.STATE===2"> <td>未通过</td> </template> </tr> <tr v-if="item.STATE===1"> <td class="tbg">审核时间</td> <td>{{ item.OPERATTIME }}</td> </tr> </table> <table v-else-if="item.TYPE === 1" class="table-ui"> <tr> <td class="tbg">无法整改原因</td> <td >{{ item.EXAMINE }}</td> </tr> <tr> <td class="tbg">特殊处置审核状态</td> <template v-if="item.STATE===-1"> <td>待审核</td> </template> <template v-else-if="item.STATE===2"> <td>通过</td> </template> <template v-else-if="item.STATE===1"> <td>未通过</td> </template> </tr> <tr v-if="item.STATE===2"> <td class="tbg">处置方案</td> <td>{{ item.DISPOSAL_PLAN }}</td> </tr> <tr v-if="item.STATE===2 && item.DISPOSAL_FILE"> <td class="tbg">处置方案附件</td> <td><a style="color: #1e9fff" @click="goViewPdf(item.DISPOSAL_FILE)">[预览]</a></td> </tr> <tr v-if="item.STATE!==-1"> <td class="tbg">审核时间</td> <td>{{ item.OPERATTIME }}</td> </tr> <tr v-if="item.STATE!==-1"> <td class="tbg">审核人</td> <td>{{ pd.conUserName }}</td> </tr> <tr v-if="item.TYPE ==='2'"> <td class="tbg">是否更换整改负责人</td> <td v-if="item.spare1==='1'">是</td> <td v-if="item.spare1==='0'">否</td> </tr> <tr v-if="item.spare1==='1'"> <td class="tbg">整改负责人</td> <td >{{ item.NEWRECTIFICATIONOR }}</td> </tr> </table> </div> <div v-show="pd.STATE>=2 && pd.STATE !=8"> <div class="level-line" /> <div class="level-title"> <h1>整改信息</h1> </div> <table class="table-ui"> <tr> <td class="tbg">整改描述</td> <td>{{ pd.RECTIFYDESCR }}</td> </tr> <tr> <td class="tbg">整改部门</td> <td>{{ pd.RECTIFICATIONDEPTNAME }}</td> </tr> <tr> <td class="tbg">整改人</td> <td>{{ pd.RECTIFICATIONORNAME }}</td> </tr> <tr> <td class="tbg">整改时间</td> <td>{{ pd.RECTIFICATIONTIME }}</td> </tr> <tr> <td class="tbg">投入资金</td> <td>{{ pd.INVESTMENT_FUNDS }}元</td> </tr> <tr> <td class="tbg">整改后图片</td> <td class="img-select"> <viewer :images="rImgs"> <img v-for="item in rImgs" :src="config.fileUrl + item.FILEPATH" :key="item.IMGFILES_ID" width="100" height="100"> </viewer> </td> </tr> <tr> <td class="tbg">整改方案</td> <td v-if="pd.HAVESCHEME==0">无</td> <td v-else-if="pd.HAVESCHEME==1">有</td> <td v-else/> </tr> </table> <div class="level-line" /> </div> <div v-show="hs.HIDDENSCHEME_ID && pd.HAVESCHEME==1"> <div class="level-title"> <h1>整改方案</h1> </div> <table class="table-ui"> <tr> <td class="tbg">排查日期</td> <td>{{ hs.SCREENINGDATE }}</td> </tr> <tr> <td class="tbg">隐患清单</td> <td>{{ hs.LISTNAME }}</td> </tr> <tr> <td class="tbg">治理标准要求</td> <td>{{ hs.GOVERNSTANDARDS }}</td> </tr> <tr> <td class="tbg">治理方法</td> <td>{{ hs.GOVERNMETHOD }}</td> </tr> <tr > <td class="tbg">经费和物资的落实</td> <td>{{ hs.EXPENDITURE }}</td> </tr> <tr > <td class="tbg">负责治理人员</td> <td>{{ hs.PRINCIPAL }}</td> </tr> <tr > <td class="tbg">工时安排</td> <td>{{ hs.PROGRAMMING }}</td> </tr> <tr > <td class="tbg">时限要求</td> <td>{{ hs.TIMELIMITFOR }}</td> </tr> <tr > <td class="tbg">工作要求</td> <td>{{ hs.JOBREQUIREMENT }}</td> </tr> <tr > <td class="tbg">其他事项</td> <td>{{ hs.OTHERBUSINESS }}</td> </tr> <tr> <td class="tbg">方案图片</td> <td class="img-select"> <viewer :images="sImgs"> <img v-for="item in sImgs" :src="config.fileUrl + item.FILEPATH" :key="item.IMGFILES_ID" width="100" height="100"> </viewer> </td> </tr> </table> <div class="level-line" /> </div> <div v-show="pd.STATE == 4"> <div class="level-line" /> <div class="level-title"> <h1>验收信息</h1> </div> <template > <table v-for="(data) in checkList" :key="data.value" class="table-ui"> <tr> <td class="tbg">验收描述</td> <td>{{ data.CHECKDESCR }}</td> </tr> <tr> <td class="tbg">是否合格</td> <td> <template v-if="data.STATUS=='1'"> 是 </template> <template v-else-if="data.STATUS=='0'"> 否 </template> </td> </tr> <tr> <td class="tbg">验收部门</td> <td>{{ data.CHECKDEPTNAME }}</td> </tr> <tr> <td class="tbg">验收人</td> <td>{{ data.CHECKORNAME }}</td> </tr> <tr> <td class="tbg">验收时间</td> <td>{{ data.CHECK_TIME }}</td> </tr> <tr> <td class="tbg">验收图片</td> <td class="img-select"> <viewer :images="data.cImgs"> <img v-for="item in data.cImgs" :src="config.fileUrl + item.FILEPATH" :key="item.IMGFILES_ID" width="100" height="100"> </viewer> </td> </tr> </table> </template> </div> <div class="mt-20"> <div class="level-title"> <h1>安全环保检查验收</h1> </div> <div> <el-form ref="form" :rules="formRule" :model="form" label-width="90px"> <el-form-item label="是否合格" prop="FINAL_CHECK"> <el-radio-group ref="FINAL_CHECK" v-model="form.FINAL_CHECK"> <el-radio label="1" value="1" >是</el-radio> <el-radio label="2" value="2" >否</el-radio> </el-radio-group> </el-form-item> <el-form-item prop="FINAL_CHECKDESCR" label="验收意见" > <el-input ref="FINAL_CHECKDESCR" v-model="form.FINAL_CHECKDESCR" placeholder="验收意见"/> </el-form-item> <el-form-item prop="FINAL_CHECKTIME" label="验收时间" > <el-date-picker ref="FINAL_CHECKTIME" v-model="form.FINAL_CHECKTIME" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" /> </el-form-item> <el-form-item label="验收图片" > <el-upload ref="upload" :on-preview="handlePictureCardPreview" :before-upload="beforeFileUpload" :auto-upload="false" class="avatar-uploader" action="#" accept=".jpg,.jpeg,.png" list-type="picture-card"> <i class="el-icon-plus" /> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img :src="check_imgList" width="100%" alt=""> </el-dialog> </el-form-item> </el-form> </div> </div> </div> </div> <div class="ui-height" /> <div class="ui-foot"> <el-button type="primary" @click="save">保 存</el-button> <el-button plain type="info" @click="back">返 回</el-button> </div> <el-dialog :visible.sync="dialogVideoVisible" 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="dialogVideoVisible = false">关 闭</el-button> </span> </el-dialog> <el-dialog :visible.sync="dialogViewPdf" title="文档" width="600px"> <div> <iframe :src="pdfUrl" width="500px" height="500px" frameborder="1" /> </div> </el-dialog> </div> </template> <script> import Pagination from '@/components/Pagination' import waves from '@/directive/waves' import { requestFN } from '@/utils/request' import { upload } from '@/utils/upload' import 'video.js/dist/video-js.css' import { videoPlayer } from 'vue-video-player' export default { components: { Pagination, videoPlayer }, directives: { waves }, data() { return { config: config, HIDDEN_ID: '', // 主键ID pd: {}, // 存放字段参数 Wesdddrrrf 呃呃呃呃, hs: {}, checkList: [], check: [], msg: 'add', check_files: [], check_imgList: [], FINAL_CHECK: '1', rImgs: [], hImgs: [], cImgs: [], sImgs: [], form: { FINAL_CHECK: '1', FINAL_CHECKTIME: '', FINAL_CHECKDESCR: '' }, formRule: { FINAL_CHECKTIME: [{ required: true, message: '请输入验收时间', trigger: 'blur' }], FINAL_CHECKDESCR: [{ required: true, message: '请输入验收描述', trigger: 'blur' }], check_imgList: [{ required: true, message: '请上传验收照片', trigger: 'blur' }] }, dialogVisible: 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: false, // 是否显示剩余时间功能 fullscreenToggle: true // 是否显示全屏按钮 } }, dialogVideoVisible: false, // pdf预览 pdfUrl: '', pageNum: 1, pageTotalNum: 1, // 总页数 dialogViewPdf: false, hiddenFindPeople: [], hiddenExamineList: [] } }, created() { if (this.$parent.HIDDEN_ID) { this.HIDDEN_ID = this.$parent.HIDDEN_ID this.getData() } }, methods: { getData() { requestFN( '/hidden/goEdit', { HIDDEN_ID: this.HIDDEN_ID, tm: new Date().getTime() } ).then((data) => { if (data.result == 'success') { this.pd = data.pd // 参数map this.hs = Object.assign(this.hs, data.hs) // 参数map this.checkList = data.checkList this.hImgs = data.hImgs this.rImgs = data.rImgs this.cImgs = data.cImgs this.sImgs = data.sImgs this.hiddenFindPeople = data.hiddenFindPeople if (data.hiddenVideo.length > 0) { this.playerOptions.sources[0].src = config.fileUrl + data.hiddenVideo[0].FILEPATH } this.hiddenExamineList = data.hiddenExa data.hiddenExa.forEach(item => { if (item.TYPE === 4) { this.pd.oldUserName = item.oldUserName this.pd.oldDeptName = item.oldDeptName this.pd.oldLevelName = item.oldLevelName this.pd.oldRectificationDeadline = item.spare3 } }) } }).catch((e) => { this.listLoading = false }) }, goViewPdf(filePath) { this.pageNum = 1 this.pdfUrl = this.config.fileUrl + filePath // this.pdfUrl = 'http://192.168.50.60:8082/file/' + filePath console.info(this.pdfUrl) this.dialogViewPdf = true }, // 返回列表 back() { this.$parent.activeName = 'HiddenList' }, handlePictureCardPreview(file) { this.check_imgList = file.url this.dialogVisible = true }, beforeFileUpload(file) { const types = ['image/jpeg', 'image/jpg', 'image/png'] const isImage = types.includes(file.type) if (!isImage) { this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!') } else { this.check_imgList.push(file) } }, save() { var _this = this this.$refs.form.validate(valid => { if (valid) { requestFN( '/safetyenvironmental/V2/finalcheck', { HIDDEN_ID: this.HIDDEN_ID, FINAL_CHECKDESCR: this.form.FINAL_CHECKDESCR, FINAL_CHECKTIME: this.form.FINAL_CHECKTIME, FINAL_CHECK: this.form.FINAL_CHECK, INSPECTION_ID: this.pd.FOREIGN_ID, tm: new Date().getTime() } ).then((data) => { if (data.result == 'success') { this.saveCheckImg(_this.HIDDEN_ID) this.$parent.activeName = 'HiddenList' } }).catch((e) => { this.listLoading = false }) } else { return false } }) }, saveCheckImg(imgKeyId) { this.$refs.upload.submit() var _this = this var todata = new FormData() for (var i = 0; i < _this.check_imgList.length; i++) { if (_this.check_imgList[i]) { todata.append('FFILE', _this.check_imgList[i]) } } if (!todata.get('FFILE')) { return } todata.append('FOREIGN_KEY', imgKeyId) todata.append('TYPE', 50) upload( '/imgfiles/add', todata ).then((data) => { if (data.result == 'success') { this.$message({ message: '保存成功', type: 'success' }) } }).catch((e) => { this.listLoading = false }) } } } </script> <style lang="sass" scoped> .form-flex display: flex align-items: center margin-bottom: 18px .form-item width: 300px .el-form-item--small.el-form-item margin-bottom: 0 .table-ui .tbg width: 150px .img-flex display: flex .img-ui width: 240px height: 240px margin-right: 20px & img width: 100% height: 100% </style>