<template> <div class="app-container"> <el-button icon="el-icon-back" size="mini" style="margin-bottom: 10px" @click="$router.go(-1)" > 返回 </el-button> <div style="display: flex"> <div style="width: 59%;margin-right: 10px"> <div style="margin:6px 0px 14px;font-size: 20px;">安检记录</div> <el-table v-loading="loading" :data="inspectInfoList"> <el-table-column label="安检人" align="center" prop="memberName"/> <el-table-column label="安检时间" align="center" prop="createTime" width="120" :show-overflow-tooltip="true"> <template slot-scope="scope"> <span v-if="scope.row.createTime">{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span> <span v-else>-</span> </template> </el-table-column> <el-table-column label="用户" align="center" prop="nickName"/> <el-table-column label="用户地址" align="center" prop="address" width="150" :show-overflow-tooltip="true"/> <el-table-column label="是否安检" align="center" prop="status"> <template slot-scope="scope"> <span v-if="scope.row.status == '0'">未检测</span> <span v-if="scope.row.status == '1'">已检测</span> <span v-else>-</span> </template> </el-table-column> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-document" @click="handleInspectDetail(scope.row)" >详情</el-button> <el-button size="mini" type="text" icon="el-icon-location" @click="handleLocation(scope.row)" >位置</el-button> <!--<el-button size="mini" type="text" icon="el-icon-edit" v-if="17 == $store.state.user.userId" @click="handleUpdate(scope.row)" >修改</el-button> <el-button size="mini" type="text" icon="el-icon-delete" v-if="17 == $store.state.user.userId" @click="handleDelete(scope.row)" >删除</el-button>--> </template> </el-table-column> </el-table> <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getInspectInfoList" /> </div> <!-- 位置 --> <div style="width: 40%;margin-left: 10px"> <div id="map" style="width: 100%;height: 500px;border: 1px solid;margin-top: 45px"></div> </div> </div> <!-- 详情 --> <el-dialog title="详情" :visible.sync="isView" width="1000px" append-to-body destroy-on-close> <table class="inspect" border="1" cellspacing="0" cellpadding="0"> <tr> <td colspan="8">唐山鸿海科技有限公司居民燃气用户入户检查服务告知单</td> </tr> <tr> <td colspan="3">用户地址</td> <td style="width: 30%">{{inspectContent.userAddress}}</td> <td style="width: 8%">用户名</td> <td style="width: 12%">{{inspectContent.userName}}</td> <td style="width: 8%">气表号</td> <td style="width: 22%">{{inspectContent.gasNum}}</td> </tr> <tr> <td colspan="4">巡检员对您家中燃气设施进行全面检测。请您配合!</td> <td colspan="4"> <span style="margin-right: 15px"><input type="checkbox" v-model="inspectContent.test" disabled/>已检测</span> <span><input type="checkbox" v-model="inspectContent.noTest" disabled/>未检测</span> </td> </tr> <tr> <td>部位</td> <td colspan="2">代码</td> <td colspan="5">检查发现的问题</td> </tr> <tr> <td rowspan="3">燃气表</td> <td></td> <td>1</td> <td colspan="4">燃气表外观损坏或漏气</td> <td><input type="checkbox" v-model="inspectContent.one" disabled/></td> </tr> <tr> <td></td> <td>2</td> <td colspan="4">燃气表表箱及锁具损坏</td> <td><input type="checkbox" v-model="inspectContent.two" disabled/></td> </tr> <tr> <td></td> <td>3</td> <td colspan="4">燃气表为反表</td> <td><input type="checkbox" v-model="inspectContent.three" disabled/></td> </tr> <tr> <td rowspan="6">管道阀门</td> <td>*</td> <td>4</td> <td colspan="4">户内燃气管道及阀门等燃气设施被包封在密闭空间内</td> <td><input type="checkbox" v-model="inspectContent.four" disabled/></td> </tr> <tr> <td></td> <td>5</td> <td colspan="4">管道管卡缺损、管道松动。(户内、外架空管、表前表后管)</td> <td><input type="checkbox" v-model="inspectContent.five" disabled/></td> </tr> <tr> <td></td> <td>6</td> <td colspan="4">管道严重锈蚀。(户外架空管、户内、表前表后管)</td> <td><input type="checkbox" v-model="inspectContent.six" disabled/></td> </tr> <tr> <td></td> <td>7</td> <td colspan="4">户外架空管是否有漏气</td> <td><input type="checkbox" v-model="inspectContent.seven" disabled/></td> </tr> <tr> <td>*</td> <td>8</td> <td colspan="4">搭接电线、作为电气接地线或悬挂重物</td> <td><input type="checkbox" v-model="inspectContent.eight" disabled/></td> </tr> <tr> <td></td> <td>9</td> <td colspan="4">表前、表后阀门启闭不灵活或漏气</td> <td><input type="checkbox" v-model="inspectContent.nine" disabled/></td> </tr> <tr> <td>灶前自闭</td> <td>*</td> <td>10</td> <td colspan="4">自闭阀不能正常工作或漏气</td> <td><input type="checkbox" v-model="inspectContent.ten" disabled/></td> </tr> <tr> <td rowspan="4">燃气灶具</td> <td>*</td> <td>11</td> <td colspan="4">燃气灶具波纹管连接不牢固或漏气</td> <td><input type="checkbox" v-model="inspectContent.eleven" disabled/></td> </tr> <tr> <td>*</td> <td>12</td> <td colspan="4">燃气灶具未使用波纹管连接、穿墙且长度超过2米</td> <td><input type="checkbox" v-model="inspectContent.twelve" disabled/></td> </tr> <tr> <td>*</td> <td>13</td> <td colspan="4">燃气灶具无熄火保护装置</td> <td><input type="checkbox" v-model="inspectContent.thirteen" disabled/></td> </tr> <tr> <td>*</td> <td>14</td> <td colspan="4">燃气灶具超过使用年限或漏气</td> <td><input type="checkbox" v-model="inspectContent.fourteen" disabled/></td> </tr> <tr> <td rowspan="3">燃气灶具</td> <td>*</td> <td>15</td> <td colspan="4">燃气壁挂炉安装在浴室内</td> <td><input type="checkbox" v-model="inspectContent.fifteen" disabled/></td> </tr> <tr> <td></td> <td>16</td> <td colspan="4">壁挂炉前燃气阀门启闭不灵活或漏气</td> <td><input type="checkbox" v-model="inspectContent.sixteen" disabled/></td> </tr> <tr> <td></td> <td>17</td> <td colspan="4">燃气壁挂炉波纹管连接不牢固或漏气</td> <td><input type="checkbox" v-model="inspectContent.seventeen" disabled/></td> </tr> <tr> <td rowspan="5"></td> <td>*</td> <td>18</td> <td colspan="4">厨房或安装燃气壁挂炉的房间住人</td> <td><input type="checkbox" v-model="inspectContent.eighteen" disabled/></td> </tr> <tr> <td>*</td> <td>19</td> <td colspan="4">存在第二气源(如液化气罐等)</td> <td><input type="checkbox" v-model="inspectContent.nineteen" disabled/></td> </tr> <tr> <td></td> <td>20</td> <td colspan="4">存在非正常用气现象(私改、偸气)</td> <td><input type="checkbox" v-model="inspectContent.twenty" disabled/></td> </tr> <tr> <td>*</td> <td>21</td> <td colspan="4">燃煤炉具与户内燃气管道、燃气壁挂炉或天然气灶距离过近。</td> <td><input type="checkbox" v-model="inspectContent.twentyone" disabled/></td> </tr> <tr> <td></td> <td>22</td> <td colspan="4">户内燃气泄漏</td> <td><input type="checkbox" v-model="inspectContent.twentytwo" disabled/></td> </tr> <tr> <td colspan="8" style="text-align: left"> 特殊群体:<input type="checkbox" v-model="inspectContent.renter" disabled/>租房户 <input type="checkbox" v-model="inspectContent.old" disabled/>独居老人 <input type="checkbox" v-model="inspectContent.moveDifficult" disabled/>行动受限 <input type="checkbox" v-model="inspectContent.other" disabled/>其他 备注:{{inspectContent.remark}}</td> </tr> <tr> <td colspan="8" style="text-align: left"> <div> 尊敬的用户:上述<√>内容为您家中存在的用气问题及相应的整改措施,<*>为需要用户自行整改部分, 请您仔细阅读并确认后,积极配合整改,如因未整改引起的一切后果由用户自行承担。 </div> <div> 温馨提示:不用气时请您及时关闭灶前阀门,并经常检查和保护家中燃气设施,避免燃气事故的发生。 </div> <div> <div style="display: flex;margin-top: 10px"> <div style="width: 50%"> 用户确认签字:{{inspectContent.userSign}} <!--<el-image :src="inspectContent.userSign" :z-index="9999" :preview-src-list="[inspectContent.userSign]" style="height: 30px;width: 180px"/>--> </div> <div> 巡检员签字:{{inspectContent.inspectSign}} <!--<el-image :src="inspectContent.inspectSign" :z-index="9999" :preview-src-list="[inspectContent.inspectSign]" style="height: 30px;width: 180px"/>--> </div> </div> <div style="margin-left: 50%"> 检查日期: {{inspectContent.inspectDate}}</div> </div> </td> </tr> </table> </el-dialog> </div> </template> <script> import { listInspect }from "@/api/inspectionWork/inspect"; import { EditorMap } from "@/utils/mapClass/map"; import { mapGetters } from "vuex"; export default { name: "task-inspect-detail", props:{ taskId:{ type: Number } }, data(){ return{ loading: false, inspectInfoList: [], queryParams:{ pageNum: 1, pageSize: 10, taskId: null }, total: 0, gaoMap: null, isView: false, inspectContent:{ userAddress: "", userName: "", gasNum: "", noTest: false, test: false, one: false, two: false, three: false, four: false, five: false, six: false, seven: false, eight: false, nine: false, ten: false, eleven: false, twelve: false, thirteen: false, fourteen: false, fifteen: false, sixteen:false, seventeen: false, eighteen: false, nineteen: false, twenty:false, twentyone: false, twentytwo: false, renter: false, old: false, moveDifficult: false, other: false, remark: "", userSign: "", inspectSign: "", inspectDate: "" } } }, mounted(){ this.initMap(); this.queryParams.taskId = this.$route.query.taskId; this.getInspectInfoList(); }, methods:{ //安检记录 getInspectInfoList(){ listInspect(this.queryParams).then(res =>{ if(res.code == 200){ this.total = res.total; this.inspectInfoList = res.rows; if(this.inspectInfoList.length >0){ this.addLocation({longitude: this.inspectInfoList[0].longitude, latitude: this.inspectInfoList[0].latitude,nickName:this.inspectInfoList[0].nickName,iconType:"taskInspect"}) } } }) }, //地图初始化 initMap(){ const path = eval(this.systemSetting.map_center); this.gaoMap = new EditorMap( "map", { center: path, zoom: 12, }, this ); }, //位置上图 addLocation(data){ this.gaoMap.allDevice["taskInspect"]?.forEach((item) =>{ this.gaoMap.map.remove(item); }) this.gaoMap.control= 2; this.gaoMap.addDevice(data,null); this.gaoMap.map.panTo([data.longitude, data.latitude]); }, handleLocation(row){ this.addLocation({longitude: row.longitude, latitude: row.latitude,nickName:row.nickName,iconType:"taskInspect"}) }, handleInspectDetail(row){ if(row.inspectContent){ this.inspectContent = JSON.parse(row.inspectContent); this.isView = true; }else{ this.$message.error("未生成检查单!"); } } }, computed: { ...mapGetters(["systemSetting"]) }, } </script> <style scoped lang="scss"> .inspect{ width: 100%; td{ //width: 16%; text-align: center; } } </style>