<template> <el-dialog title="安检记录详情" :visible.sync="detailOpen" width="900px" append-to-body> <el-form label-width="120px" class="detailInfo"> <el-row> <el-col :span="12"> <el-form-item label="储配站"> <span v-if="detailInfo.stationName">{{ detailInfo.stationName }}</span> <span v-else>-</span> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="用户名称"> <span v-if="detailInfo.gasUser">{{ detailInfo.gasUser }}</span> <span v-else>-</span> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="用户类型"> <span v-if="detailInfo.gasUserType == '0'">居民</span> <span v-else-if="detailInfo.gasUserType == '1'">非居民</span> <span v-else>-</span> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="联系方式"> <span v-if="detailInfo.telNum">{{ detailInfo.telNum }}</span> <span v-else>-</span> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="安检时间"> <span v-if="detailInfo.safeCheckDate">{{ detailInfo.safeCheckDate }}</span> <span v-else>-</span> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="安检人"> <span v-if="detailInfo.safeCheckPerson">{{ detailInfo.safeCheckPerson }}</span> <span v-else>-</span> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="入户状态"> <span v-if="detailInfo.checkInStatus == '0'">正常入户</span> <span v-else-if="detailInfo.checkInStatus == '1'">拒绝安检</span> <span v-else>-</span> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="用户地址"> <span v-if="detailInfo.gasUserAddress">{{ detailInfo.gasUserAddress }}</span> <span v-else>-</span> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12" v-if="detailInfo.stoveCheckStatus"> <el-form-item label="燃气灶具检查情况"> <div v-if="detailInfo.stoveCheckStatus == '0'">合格</div> <div v-else-if="detailInfo.stoveCheckStatus == '1'">无3C认证</div> <div v-else="detailInfo.stoveCheckStatus == '2'">无熄火保护装置</div> <el-image v-if="detailInfo.stoveCheckPic" :src="detailInfo.stoveCheckPic" :preview-src-list="[detailInfo.stoveCheckPic]" :z-index="9999" style="width: 230px;height: 170px;"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="连接软管检查情况" v-if="detailInfo.hoseCheckStatus"> <div v-if="detailInfo.hoseCheckStatus == '0'">合格</div> <div v-else-if="detailInfo.hoseCheckStatus == '1'">普通橡胶软管</div> <div v-else-if="detailInfo.hoseCheckStatus == '2'">三通连接软管</div> <div v-else-if="detailInfo.hoseCheckStatus == '3'">长度超过两米且未使用硬质钢管链接</div> <div v-else="detailInfo.hoseCheckStatus == '4'">穿越墙体、门窗顶棚和地面</div> <el-image v-if="detailInfo.hoseCheckPic" :src="detailInfo.hoseCheckPic" :preview-src-list="[detailInfo.hoseCheckPic]" :z-index="9999" style="width: 230px;height: 170px;"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12" v-if="detailInfo.valveCheckStatus"> <el-form-item label="减压阀检查情况"> <div v-if="detailInfo.valveCheckStatus == '0'">合格</div> <div v-else-if="detailInfo.valveCheckStatus == '1'">可调节</div> <div v-else="detailInfo.valveCheckStatus == '2'">五自闭功能</div> <el-image v-if="detailInfo.valveCheckPic" :src="detailInfo.valveCheckPic" :preview-src-list="[detailInfo.valveCheckPic]" :z-index="9999" style="width: 230px;height: 170px;"/> </el-form-item> </el-col> <el-col :span="12" v-if="detailInfo.bottleCheckStatus"> <el-form-item label="液化气钢瓶检查情况"> <div v-if="detailInfo.bottleCheckStatus == '0'">合格</div> <div v-else-if="detailInfo.bottleCheckStatus == '1'">部分有码且可追溯</div> <div v-else-if="detailInfo.bottleCheckStatus == '2'">有码但不可追溯</div> <div v-else="detailInfo.bottleCheckStatus == '3'">钢瓶无码</div> <el-image v-if="detailInfo.bottleCheckPic" :src="detailInfo.bottleCheckPic" :preview-src-list="[detailInfo.bottleCheckPic]" :z-index="9999" style="width: 230px;height: 170px;"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12" v-if="detailInfo.alarmCheckStatus"> <el-form-item label="报警器加电磁切断阀检查情况"> <div v-if="detailInfo.alarmCheckStatus == '0'">合格</div> <div v-else-if="detailInfo.alarmCheckStatus == '1'">有但未使用</div> <div v-else-if="detailInfo.alarmCheckStatus == '2'">有但未实现联动</div> <div v-else-if="detailInfo.alarmCheckStatus == '3'">无</div> <div v-else-if="detailInfo.alarmCheckStatus == '4'">非液化气专用报警器</div> <div v-else="detailInfo.alarmCheckStatus == '5'">安装位置大于0.3米</div> <el-image v-if="detailInfo.alarmCheckPic" :src="detailInfo.alarmCheckPic" :preview-src-list="[detailInfo.alarmCheckPic]" :z-index="9999" style="width: 230px;height: 170px;"/> </el-form-item> </el-col> <el-col :span="12" v-if="detailInfo.placeCheckStatus"> <el-form-item label="液化气钢瓶检查情况"> <div v-if="detailInfo.placeCheckStatus == '0'">合格</div> <div v-else-if="detailInfo.placeCheckStatus == '1'">高层建筑(裙房)</div> <div v-else-if="detailInfo.placeCheckStatus == '2'">地下(半地下)室 </div> <div v-else-if="detailInfo.placeCheckStatus == '3'">车库或半地下车库 </div> <div v-else="detailInfo.placeCheckStatus == '4'">通风不良的场所 5.50公斤钢瓶超过两只或15公斤钢瓶超过七只未设置独立的气瓶间 </div> <el-image v-if="detailInfo.placeCheckPic" :src="detailInfo.placeCheckPic" :preview-src-list="[detailInfo.placeCheckPic]" :z-index="9999" style="width: 230px;height: 170px;"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12" v-if="detailInfo.checkPersonSign"> <el-form-item label="安检人员签名"> <el-image v-if="detailInfo.checkPersonSign" :src="detailInfo.checkPersonSign" :preview-src-list="[detailInfo.checkPersonSign]" :z-index="9999" style="width: 230px;height: 170px;"/> </el-form-item> </el-col> <el-col :span="12" v-if="detailInfo.gasUserSign"> <el-form-item label="用户签字"> <el-image v-if="detailInfo.gasUserSign" :src="detailInfo.gasUserSign" :preview-src-list="[detailInfo.gasUserSign]" :z-index="9999" style="width: 230px;height: 170px;"/> </el-form-item> </el-col> </el-row> </el-form> </el-dialog> </template> <script> import { getRecord } from "@/api/lpgRegulation/check"; export default { name: "index", data(){ return{ detailOpen: false, detailInfo: {} } }, methods:{ getDetailInfo(id){ getRecord(id).then(res =>{ if(res.code == 200 && res.data){ this.detailInfo = res.data; this.detailOpen = true; } }) } } } </script> <style scoped lang="scss"> .detailInfo{ height: 500px; overflow-y: auto; &::-webkit-scrollbar { /* 设置滚动条宽度 */ width: 4px; /* 设置滚动条背景色 */ //background: black; } //滚动条轨道 &::-webkit-scrollbar-track { background-color:transparent; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius:2em; } //滚动条滑块 &::-webkit-scrollbar-thumb { background-color: rgb(147,147,153,0.5); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius:2em; } } </style>