<template> <div style="margin-top: 30px;" v-if="infoList.length > 0"> <div style="font-size: 22px;margin-bottom: 12px;">·隐患列表</div> <el-table v-loading="loading" :data="infoList"> <el-table-column label="隐患名称" align="center" prop="hiddenTroubleName" > <span slot-scope="scope" v-if="scope.row.hiddenTroubleName">{{scope.row.hiddenTroubleName}}</span> <span v-else>-</span> </el-table-column> <el-table-column label="隐患等级" align="center" prop="hiddenTroubleLevel"> <template slot-scope="scope"> <span v-if="scope.row.hiddenTroubleLevel == 1">一级隐患</span> <span v-if="scope.row.hiddenTroubleLevel == 2">二级隐患</span> <span v-if="scope.row.hiddenTroubleLevel == 3">三级隐患</span> </template> </el-table-column> <el-table-column label="隐患类型" align="center" prop="hiddenTroubleType"> <template slot-scope="scope"> <span v-if="scope.row.hiddenTroubleType == 1">漏气</span> <span v-if="scope.row.hiddenTroubleType == 2">腐蚀</span> <span v-if="scope.row.hiddenTroubleType == 3">裂缝</span> <span v-if="scope.row.hiddenTroubleType == 4">设备故障</span> <span v-if="scope.row.hiddenTroubleType == 5">安全距离不足</span> <span v-if="scope.row.hiddenTroubleType == 6">管道承重</span> <span v-if="scope.row.hiddenTroubleType == 7">其他</span> </template> </el-table-column> <el-table-column label="隐患描述" align="center" prop="hiddenTroubleDescribe" > <span slot-scope="scope" v-if="scope.row.hiddenTroubleDescribe">{{scope.row.hiddenTroubleDescribe}}</span> <span v-else>-</span> </el-table-column> <el-table-column label="上报时间" align="center" prop="reportTime" width="180"> <template slot-scope="scope" > <span v-if="scope.row.reportTime">{{scope.row.reportTime}}</span> <span v-else>-</span> </template> </el-table-column> <el-table-column label="上报人" align="center" prop="reportPerson" > <span slot-scope="scope" v-if="scope.row.reportPerson">{{scope.row.reportPerson}}</span> <span v-else>-</span> </el-table-column> <el-table-column label="隐患处理状态" align="center" prop="hiddenTroubleDealStatus"> <template slot-scope="scope"> <span v-if="scope.row.hiddenTroubleDealStatus == 1" style="color: #ff7272">待处理</span> <span v-if="scope.row.hiddenTroubleDealStatus == 2" style="color: #ffba00">处理中</span> <span v-if="scope.row.hiddenTroubleDealStatus == 3" style="color: #30B46B">已完成</span> </template> </el-table-column> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="details(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="getList" /> <!-- 燃气隐患详情对话框 --> <el-dialog :title="detailsTitle" :visible.sync="detailsOpen" width="800px" append-to-body> <el-form ref="form" :model="form" label-width="150px"> <el-row> <el-col :span="22"> <el-form-item label="隐患名称" prop="hiddenTroubleName"> <el-input v-model="form.hiddenTroubleName" placeholder="请输入隐患名称" :disabled="true"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="隐患等级" prop="hiddenTroubleLevel"> <el-select v-model="form.hiddenTroubleLevel" placeholder="请选择隐患等级" style="width: 100%;":disabled="true"> <el-option label="一级隐患" value="1" /> <el-option label="二级隐患" value="2" /> <el-option label="三级隐患" value="3" /> </el-select> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="隐患类型" prop="hiddenTroubleType"> <el-select v-model="form.hiddenTroubleType" placeholder="请选择隐患类型" style="width: 100%;":disabled="true"> <el-option label="漏气" value="1" /> <el-option label="腐蚀" value="2" /> <el-option label="裂缝" value="3" /> <el-option label="设备故障" value="4" /> <el-option label="安全距离不足" value="5" /> <el-option label="管道承重" value="6" /> <el-option label="其他" value="7" /> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="22"> <el-form-item label="隐患描述" prop="hiddenTroubleDescribe"> <el-input v-model="form.hiddenTroubleDescribe" type="textarea" placeholder="请输入隐患描述" :disabled="true"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="25"> <el-form-item label="经纬度坐标" prop="longitude" :disabled="true"> <el-col :span="9"> <el-input v-model="form.longitude" placeholder="请输入经度" :disabled="true"/> </el-col> <el-col :span="9" style="margin-left: 13px"> <el-input v-model="form.latitude" placeholder="请输入纬度" :disabled="true"/> </el-col> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="23"> <el-form-item label="上传照片" :disabled="true"> <FileUpload :disabled="true" listType="picture" :fileArr="fileList"> </FileUpload> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="隐患处理状态" prop="hiddenTroubleDealStatus"> <el-select v-model="form.hiddenTroubleDealStatus" placeholder="请选择隐患处理状态" :disabled="true"> <el-option label="待处理" value="1" /> <el-option label="处理中" value="2" /> <el-option label="已完成" value="3" /> </el-select> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="隐患处理完成时间" v-if="form.hiddenTroubleDealStatus==3" prop="hiddenTroubleDealFinishTime"> <el-date-picker clearable size="small" :disabled="true" v-model="form.hiddenTroubleDealFinishTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择隐患处理完成时间"> </el-date-picker> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="23"> <el-form-item label="上传照片" :disabled="true" v-if="form.hiddenTroubleDealStatus==3"> <FileUpload :disabled="true" listType="picture" :fileArr="fileListn"> </FileUpload> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-form-item label="视频上传" prop="videoUrl"> <VideoUpload listType="picture" :disabled="true" v-if="detailsOpen" :fileArr="fileListVideo" :fileSize="20" :fileType="['mp4']" /> <el-input v-show="false" disabled v-model="form.videoUrl"></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="22"> <el-form-item label="隐患处理情况" v-if="form.hiddenTroubleDealStatus==3" prop="hiddenTroubleDealCondition" > <el-input v-model="form.hiddenTroubleDealCondition" type="textarea" placeholder="请输入隐患处理情况" :disabled="true"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="所属单位" prop="beyondEnterpriseId"> <el-select v-model="form.beyondEnterpriseId" placeholder="请选择所属单位名称" style="width: 100%" @change="selectworkAssignEnterprose($event)" :disabled="true"> <el-option v-for="item in enterprises" :key="item.enterpriseId" :label="item.enterpriseName" :value="item.enterpriseId"/> </el-select> </el-form-item> </el-col> </el-row> </el-form> </el-dialog> </div> </template> <script> import { listInfo, getInfo } from "@/api/system/info"; import FileUpload from '@/components/FileSuperviseUpload'; import VideoUpload from "@/components/VideoUpload"; import { enterpriseLists } from "@/api/regulation/info"; export default { name: "hidden-info", props:{ inspectId:{ type: Number } }, components:{ FileUpload, VideoUpload }, data(){ return{ // 查询参数 queryParams: { pageNum: 1, pageSize: 10, hiddenTroubleName: null, reportPerson: null, workId: null }, loading: false, total: 0, infoList: [], devicePos: [], fileList: [], fileListn: [], detailsOpen: false, form: {}, detailsTitle: "", enterprises: [], fileListVideo: [] } }, created() { this.queryParams.workId = this.inspectId; this.getList(); this.getEnterpriseLists(); }, methods: { /** 查询燃气隐患列表 */ getList() { this.loading = true; listInfo(this.queryParams).then(response => { for(var i = 0; i < response.rows.length; i++){ if (response.rows[i].pictureUrl){ response.rows[i].pictureUrl=response.rows[i].pictureUrl.split(","); response.rows[i].Url=response.rows[i].pictureUrl[0] } } this.infoList = response.rows; this.total = response.total; this.loading = false; }); }, /**详情按钮操作*/ details(row){ this.fileList=[] this.fileListn=[] this.reset(); const hiddenTroubleId = row.hiddenTroubleId || this.ids getInfo(hiddenTroubleId).then(response => { this.form = response.data; this.detailsOpen = true; //图片回显 if (this.form.pictureUrl){ for(var i = 0; i < this.form.pictureUrl.split(',').length; i++){ this.fileList.push({ name: '照片', url: this.form.pictureUrl.split(',')[i], }); } } if (this.form.dealUrl){ for(var i = 0; i < this.form.dealUrl.split(',').length; i++){ this.fileListn.push({ name: '照片', url: this.form.dealUrl.split(',')[i], }); } } if(this.form.videoUrl){ this.fileListVideo = this.form.videoUrl.split(','); } this.detailsTitle = "燃气隐患详情"; this.devicePos = [response.data.longitude, response.data.latitude]; }); }, // 表单重置 reset() { this.form = { hiddenTroubleId: null, workId: null, hiddenTroubleName: null, hiddenTroubleLevel: null, hiddenTroubleType: null, longitude: null, latitude: null, pictureUrl: null, hiddenTroubleDescribe: null, reportTime: null, reportPerson: null, hiddenTroubleDealStatus: '1', hiddenTroubleDealCondition: null, hiddenTroubleDealFinishTime: null, isDel: null, remarks: null, beyondEnterpriseId: null }; this.resetForm("form"); }, //所属单位 getEnterpriseLists(){ const param = {}; enterpriseLists(param).then(response => { if (response.rows.length>1){ this.enterprises = response.rows; }else { this.form.beyondEnterpriseId=response.rows[0] this.enterprises = response.rows; } }); }, getFileInfo(res){ this.form.dealPlan = res.fileName; this.pictureUrlList.push(res.url) console.log(this.pictureUrlList) this.form.pictureUrl=this.pictureUrlList.join(","); this.form.burl=res.burl; this.fileList.push({ name: res.fileName, url: uploadfile, burl:res.burl, }); }, listRemove(e) { this.form.dealPlan = ""; this.fileList.delete(e.uid) // this.fileList = []; }, /**上传头像*/ getFileInfon(res){ this.form.dealPlan = res.fileName; this.pictureUrlList.push(res.url) this.form.dealUrl=this.pictureUrlList.join(","); this.form.burl=res.burl; this.fileListn.push({ name: res.fileName, url: uploadfile, burl:res.burl, }); }, listRemoven(e) { this.form.dealPlan = ""; this.fileListn.delete(e.uid) // this.fileList = []; }, } } </script> <style scoped> </style>