经开分局优化

linwe

2025-10-28 0b7c058f89b458fed7f2eb889c04e8b4992c5e05

 src/components/siteDialog/index.vue

@@ -9,53 +9,53 @@
 * 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>
  <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="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>
@@ -71,353 +71,348 @@
                            第五网格
                        </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>
      </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
  getPlaceCheckPage,
  getPlaceCheckInfo,
  getPlacePractitionerPage
} from "@/api/site/index.js"

export default {
    name: 'SiteDialogPopup',
  name: 'SiteDialogPopup',

    data () {
        return {
            searchDate: '',
  data () {
    return {
      searchDate: '',

            popupShow: false,
      popupShow: false,

            businessId: '',
            chooseTab: 1,
      businessId: '',
      chooseTab: 1,

            tableData: [],
            personTableData: [],
      tableData: [],
      personTableData: [],

            loading: false,
            businessDetailData: {},
      loading: false,
      businessDetailData: {},

            pages: {
                current: 1,
                size: 22,
                total: 0,
                count: 0,
            },
      pages: {
        current: 1,
        size: 22,
        total: 0,
        count: 0,
      },

            examineListShow: true,
            examineDetails: {},
            refreshNum: 1,
      examineListShow: true,
      examineDetails: {},
      refreshNum: 1,

            CNNum: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五'],
      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://47.217.32.232:80/place/' + ele
          })
        }

        return imageUrls || []
      }
    },

    computed: {
        getImgUrls () {
            return (item) => {
                let imageUrls = item.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 || []
            }
        },

        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
            }
        if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
          imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
            return 'http://47.217.32.232:80/place/' + ele
          })
        }

        return imageUrls || []
      }
    },

    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
            })
        }
    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;
  height: 120px;
}

.flex {
    display: flex;
  display: flex;
}

.f-d-c {
    flex-direction: column;
  flex-direction: column;
}

.flex-1 {
    height: 0;
    flex: 1;
  height: 0;
  flex: 1;
}
</style>