<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2024-01-17 16:04:08
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2024-02-19 16:34:09
|
* @FilePath: \srs-police-affairs\src\components\siteDialog\index.vue
|
* @Description:
|
*
|
* Copyright (c) 2024 by shuishen, All Rights Reserved.
|
-->
|
<template>
|
<el-dialog class="syld-details-box site-dialog-popup business-detail-box" :title="'场所详情'" append-to-body
|
:close-on-click-modal="false" :visible.sync="popupShow" center @close="popupClose">
|
<div class="flex f-d-c" style="height: 100%;" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
|
<div class="type-tab-box">
|
<div class="tab-item" :class="{ 'tab-choose-item': chooseTab == 1 }" @click="tabClick(1)">
|
基本信息</div>
|
<div class="tab-item" :class="{ 'tab-choose-item': chooseTab == 2 }" @click="tabClick(2)">
|
从业人员 </div>
|
<div class="tab-item" :class="{ 'tab-choose-item': chooseTab == 3 }" @click="tabClick(3)">
|
消防检查 </div>
|
</div>
|
|
<div class="flex-1 tab-content-box" v-if="chooseTab == 1">
|
<div class="info-list">
|
<div class="info-item">
|
<div class="name">
|
场所名称：
|
</div>
|
<div class="value">
|
{{ businessDetailData.placeName }}
|
</div>
|
</div>
|
<div class="info-item">
|
<div class="name">
|
场所地址：
|
</div>
|
<div class="value">
|
{{ businessDetailData.location }}
|
</div>
|
</div>
|
<div class="info-item">
|
<div class="name">
|
负责人：
|
</div>
|
<div class="value">
|
{{ businessDetailData.principal }}
|
</div>
|
</div>
|
<div class="info-item">
|
<div class="name">
|
手机号码：
|
</div>
|
<div class="value">
|
{{ businessDetailData.principalPhone }}
|
</div>
|
</div>
|
<!-- <div class="info-item">
|
<div class="name">
|
所属社区：
|
</div>
|
<div class="value">
|
361102003027
|
</div>
|
</div>
|
<div class="info-item">
|
<div class="name">
|
所属网格：
|
</div>
|
<div class="value">
|
第五网格
|
</div>
|
</div> -->
|
</div>
|
</div>
|
|
<div class="flex-1 flex f-d-c tab-content-box" v-if="chooseTab == 2">
|
<el-table :data="personTableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
|
:cell-style="{ 'text-align': 'center' }">
|
<el-table-column prop="name" label="名称" width="180">
|
</el-table-column>
|
<el-table-column prop="telephone" label="手机号码" width="180">
|
</el-table-column>
|
<el-table-column prop="tempAddress" label="暂住地">
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<div class="flex-1 flex f-d-c tab-content-box" ref="TabContentBox" v-if="chooseTab == 3">
|
<div v-show="examineListShow" class="flex-1 flex f-d-c examine-list">
|
<div class="search-box">
|
<div>
|
检查时间
|
<el-date-picker v-model="searchDate" type="date" placeholder="请选择日期" value-format="yyyy-MM-dd">
|
</el-date-picker>
|
</div>
|
<el-button type="primary" icon="el-icon-search" @click="dateSearch">搜索</el-button>
|
</div>
|
|
<el-table :data="tableData" style="width: 100%" @row-click="clickExamine($event)"
|
:header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
|
:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
|
:row-class-name="tableRowClassName">
|
<el-table-column prop="principal" :show-overflow-tooltip="true" label="场所负责人"></el-table-column>
|
<el-table-column prop="createTime" :show-overflow-tooltip="true" label="检查时间"></el-table-column>
|
<el-table-column prop="remark" :show-overflow-tooltip="true" label="备注"></el-table-column>
|
</el-table>
|
|
<div class="pages all-pagination-sty" ref="tablePagination" style="padding-top:-15px">
|
<el-pagination background layout="prev, pager, next" :page-size="pages.size" :total="pages.total"
|
:pager-count="4" :current-page="pages.current"
|
@current-change="handleCurrentChange"></el-pagination>
|
</div>
|
</div>
|
|
<div v-show="!examineListShow" class="flex-1 flex f-d-c examine-details">
|
<div class="back-btn" @click="examineListShow = true">返回</div>
|
|
<div class="title">
|
<div class="icon">{{ refreshNum }}</div>
|
基础信息
|
</div>
|
<div class="basic-info">
|
<div class="info-item">
|
<div class="info-name">场所名称</div>
|
<div class="info-value">{{ examineDetails.placeName }}</div>
|
</div>
|
<div class="info-item">
|
<div class="info-name">检查时间</div>
|
<div class="info-value">{{ examineDetails.createTime }}</div>
|
</div>
|
</div>
|
<div class="title">
|
<div class="icon"></div>
|
检查记录
|
</div>
|
|
<div class="question-list" v-for="(tItem, tIndex) in examineDetails.patrolGroupDTOList" :key='tIndex'>
|
<div class="question-type" @click="flodQL(tIndex)">
|
<div class="type-name">
|
{{ CNNum[tIndex] }}、{{ tItem.name }}
|
</div>
|
<div class="icon-box"><i class="el-icon-arrow-down" v-show="tItem.isShowQList"></i><i
|
class="el-icon-arrow-up" v-show="!tItem.isShowQList"></i></div>
|
</div>
|
|
<div v-show="'patrolRecordVOList' in tItem && tItem.isShowQList" class="question-item"
|
v-for="(item, index) in tItem.patrolRecordVOList" :key='index'>
|
<div class="question-name">
|
<div class="key">{{ index + 1 }}、{{ item.itemsName }}</div>
|
<div class="value">
|
<el-radio v-show="item.state == 0" v-model="item.state" :label="0"
|
disabled>存在</el-radio>
|
<el-radio v-show="item.state == 1" v-model="item.state" :label="1"
|
disabled>不存在</el-radio>
|
</div>
|
</div>
|
<div v-show="item.state == 0" class="yh-pic-box">
|
<div class="yh-pic-name">
|
隐患图片：
|
</div>
|
<div class="yh-pic-list">
|
<div class="pic-item" v-for="(pic, picIndex) in getImgUrls(item)" :key="picIndex">
|
<el-image :src="pic" :fit="fit" :preview-src-list="getImgUrls(item)"></el-image>
|
</div>
|
</div>
|
</div>
|
<div v-show="item.state == 0" class="yh-remark">
|
<div class="yh-remark-name">
|
隐患描述：
|
</div>
|
<div class="yh-remark-value">
|
{{ getRemark(item) }}
|
</div>
|
</div>
|
<div v-show="item.state == 0" class="yh-pic-box">
|
<div class="yh-pic-name">
|
整改后图片：
|
</div>
|
<div class="yh-pic-list">
|
<div class="pic-item" v-for="(pic, picIndex) in getRectificationImageUrls(item)"
|
:key="picIndex">
|
<el-image :src="pic" :fit="fit"
|
:preview-src-list="getRectificationImageUrls(item)"></el-image>
|
</div>
|
</div>
|
</div>
|
<div v-show="item.state == 0" class="yh-remark">
|
<div class="yh-remark-name">
|
整改后描述：
|
</div>
|
<div class="yh-remark-value">
|
{{ getRectificationRemark(item) }}
|
</div>
|
</div>
|
</div>
|
|
<div v-show="!('patrolRecordVOList' in tItem)">{{ tItem.remark }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import {
|
getPlaceCheckPage,
|
getPlaceCheckInfo,
|
getPlacePractitionerPage
|
} from "@/api/site/index.js"
|
|
export default {
|
name: 'SiteDialogPopup',
|
|
data () {
|
return {
|
searchDate: '',
|
|
popupShow: false,
|
|
businessId: '',
|
chooseTab: 1,
|
|
tableData: [],
|
personTableData: [],
|
|
loading: false,
|
businessDetailData: {},
|
|
pages: {
|
current: 1,
|
size: 22,
|
total: 0,
|
count: 0,
|
},
|
|
examineListShow: true,
|
examineDetails: {},
|
refreshNum: 1,
|
|
CNNum: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五'],
|
}
|
},
|
|
computed: {
|
getImgUrls () {
|
return (item) => {
|
let imageUrls = item.imageUrls
|
|
if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
|
imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
|
return 'http://10.141.11.11/place/' + ele
|
})
|
}
|
|
return imageUrls || []
|
}
|
},
|
|
getRectificationImageUrls () {
|
return (item) => {
|
let imageUrls = item.rectificationImageUrls
|
|
if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
|
imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
|
return 'http://10.141.11.11/place/' + ele
|
})
|
}
|
|
return imageUrls || []
|
}
|
},
|
|
getRemark () {
|
return (item) => {
|
return item.remark
|
}
|
},
|
|
getRectificationRemark () {
|
return (item) => {
|
return item.rectificationRemark
|
}
|
}
|
},
|
|
methods: {
|
// 点击展开收缩
|
flodQL (index) {
|
this.examineDetails.patrolGroupDTOList[index].isShowQList = !this.examineDetails.patrolGroupDTOList[index].isShowQList
|
this.refreshNum += 1
|
},
|
|
// 打开弹窗初始化数据
|
initOpen (row) {
|
this.searchDate = ''
|
this.examineListShow = true
|
this.businessDetailData = row
|
this.chooseTab = 1
|
this.popupShow = true
|
|
this.pages.current = 1
|
this.getPlaceCheckPage()
|
this.getPlacePractitionerPage()
|
},
|
|
// 分页处理
|
handleCurrentChange (current) {
|
this.pages.current = current
|
this.getPlaceCheckPage()
|
},
|
|
// 获取检查列表数据
|
getPlaceCheckPage (params = {}) {
|
this.loading = true
|
this.checkFlag = false
|
|
getPlaceCheckPage({
|
houseCode: this.businessDetailData.houseCode,
|
current: this.pages.current,
|
size: this.pages.size,
|
...params
|
}).then(res => {
|
const data = res.data.data
|
this.tableData = data.records
|
this.pages.total = data.total
|
this.checkFlag = true
|
|
setTimeout(() => {
|
if (this.checkFlag && this.flag) this.loading = false
|
}, 500)
|
})
|
},
|
|
getPlacePractitionerPage () {
|
this.flag = false
|
|
getPlacePractitionerPage({
|
placeId: this.businessDetailData.id,
|
current: 1,
|
size: 9999,
|
}).then(res => {
|
const data = res.data.data
|
this.personTableData = data.records
|
this.flag = true
|
|
setTimeout(() => {
|
if (this.checkFlag && this.flag) this.loading = false
|
}, 500)
|
})
|
},
|
|
clickExamine (row) {
|
getPlaceCheckInfo({ id: row.id }).then(res => {
|
if (res.data.data == null) {
|
this.$message({ message: '暂无数据', type: 'warning', duration: 2000 })
|
|
return
|
}
|
|
this.examineDetails = res.data.data
|
|
this.examineDetails.patrolGroupDTOList.push({
|
name: '其他隐患问题',
|
remark: this.examineDetails.remark
|
})
|
|
this.examineDetails.patrolGroupDTOList = res.data.data.patrolGroupDTOList.map(item => {
|
return {
|
...item,
|
isShowQList: true
|
}
|
})
|
|
this.examineListShow = false
|
})
|
},
|
|
// 关闭弹窗按钮
|
popupClose () {
|
this.popupShow = false
|
},
|
|
// tab切换
|
tabClick (type) {
|
this.chooseTab = type
|
|
if (type == 3) {
|
this.examineListShow = true
|
}
|
},
|
|
dateSearch () {
|
this.pages.current = 1
|
|
this.getPlaceCheckPage({
|
startTime: this.searchDate,
|
endTime: this.searchDate
|
})
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
:deep(.el-image__error) {
|
height: 120px;
|
}
|
|
.flex {
|
display: flex;
|
}
|
|
.f-d-c {
|
flex-direction: column;
|
}
|
|
.flex-1 {
|
height: 0;
|
flex: 1;
|
}
|
</style>
|
