社区感知户室详情中 消防检查、九小场所、反诈宣防等列表布局样式调整 单行详情数据样式调整

shuishen

2024-12-18 b6fe0d66cd2b1349d357d0a105300fe2ac3b7bc0

社区感知户室详情中
消防检查、九小场所、反诈宣防等列表布局样式调整
单行详情数据样式调整

 src/styles/media/index.scss

@@ -1981,47 +1981,107 @@
              right: countSizeVw(10, 1920);
            }

            .house-info-box {
              width: countSizeVw(240, 1920);
              height: countSizeVh(288);
            .el-dialog__body {
              display: flex;
              height: countSizeVh(360);

              .house-title {
                font-size: countSizeVh(18);
                font-weight: 700;
              .house-info-box {
                width: countSizeVw(240, 1920);
                height: 100%;

                .house-title {
                  font-size: countSizeVh(18);
                  font-weight: 700;
                }

                .mini-code {
                  width: countSizeVw(200, 1920);
                  height: countSizeVw(200, 1920);
                  margin-top: countSizeVh(20);
                  margin-left: countSizeVw(20, 1920);
                }
              }

              .mini-code {
                width: countSizeVw(200, 1920);
                height: countSizeVw(200, 1920);
                margin-top: countSizeVh(20);
                margin-left: countSizeVw(20, 1920);
              }
            }

            .table-box {
              width: countSizeVw(820, 1920);
              height: countSizeVh(288);

              .type-tab-box {
                height: countSizeVh(28);
              .table-box {
                display: flex;
                flex-direction: column;
                width: 0;
                flex: 1;
                height: 100%;

                .tab-item {
                  padding: 0 countSizeVw(10, 1920);
                  cursor: pointer;
                .type-tab-box {
                  height: countSizeVh(28);
                  display: flex;

                  .tab-item {
                    padding: 0 countSizeVw(10, 1920);
                    cursor: pointer;
                  }

                  .tab-choose-item {
                    background-color: #3d5ad5;
                  }
                }

                .tab-choose-item {
                  background-color: #3d5ad5;
                .el-table {
                  height: 0;
                  flex: 1;
                }
              }

              .el-table {
                height: countSizeVh(260);
                .pay-info-box {
                  height: 0;
                  flex: 1;

                  .table-box-w {
                    height: 100%;

                    .list-box {
                      display: flex;
                      flex-direction: column;
                      height: 100%;

                      .el-table {
                        height: 0;
                        flex: 1;
                      }

                      .pages {
                        height: countSizeVh(40);

                        &>div {
                          display: flex;
                          align-items: center;
                          justify-content: center;

                          &>button {
                            width: countSizeVh(32);
                            height: countSizeVh(32);

                            &>i {
                              font-size: countSizeVh(16);
                            }
                          }

                          &>ul {
                            display: flex;
                            align-items: center;

                            li {
                              width: countSizeVh(32);
                              height: countSizeVh(32);
                              line-height: countSizeVh(32);
                              font-size: countSizeVh(16);
                            }
                          }
                        }

                      }

                    }
                  }
                }
              }
            }


          }

          .panorama-details-box {
@@ -3497,4 +3557,76 @@
      }
    }
  }

  .resident-details-box-details {
    position: fixed !important;
    top: countSizeVh(60) !important;
    left: auto !important;
    right: 0 !important;
    width: countSizeVw(400, 1920) !important;
    height: calc(100% - countSizeVh(60)) !important;
    z-index: 98 !important;
    transform: translate(0, 0) !important;

    .el-dialog {
      width: 100% !important;
      height: 100% !important;
    }

    .el-dialog__header {
      display: none;
    }

    .el-dialog__body {
      padding: 0;
      width: 100%;
      height: 100%;

      .detail-box {
        display: flex;
        flex-direction: column;
        height: 100%;
        // width: 400px;

        .detail-title-box {
          position: relative;
          font-weight: bold;
          text-align: center;
          line-height: 32px;

          .close {
            position: absolute;
            right: 5px;
            top: 0;
          }

          .close::before {
            font-family: element-icons;
            content: '\e6db';
            cursor: pointer;
            font-size: countSizeVh(16);
          }

          .close:hover::before {
            color: #3d95f3;
          }
        }

        .detail-content-box {
          padding: countSizeVh(10);
          padding-top: 0;

          height: 0;
          flex: 1;
          overflow-y: auto;

          .detail-row {
            line-height: countSizeVh(40);
            // text-align: left;
            // margin-left: 10px;
          }
        }
      }
    }
  }
}

 src/views/house/components/antiFraud.vue

@@ -1,303 +1,306 @@
<!--  -->
<template>
    <div class="table-box-w">
        <div>
  <div class="table-box-w">
    <div class="list-box">

            <div class="btn-box-box">
                <!-- 出租屋按钮，居住证申请按钮，租客按钮 -->
                <div class="btn-box">
                    <el-button :type="current == 1 ? 'primary' : ''" size="mini" @click="changeData(1)">反诈宣防</el-button>
                </div>
                <div class="btn-box">
                    <el-button :type="current == 2 ? 'primary' : ''" size="mini" @click="changeData(2)">反诈预警处置</el-button>
                </div>
            </div>

            <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick" v-if="current == 1">
                <el-table-column align="center" prop="policeman" label="宣防人姓名"> </el-table-column>
                <el-table-column align="center" prop="policemanPhone" label="宣防人电话"> </el-table-column>
                <el-table-column align="center" prop="pcsName" label="宣防人单位"> </el-table-column>
                <el-table-column align="center" prop="pubContent" label="宣防内容"> </el-table-column>
            </el-table>

            <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick" v-if="current == 2">
                <el-table-column align="center" show-overflow-tooltip prop="address" label="地址"> </el-table-column>
                <el-table-column align="center" prop="recContent" label="核实内容信息"> </el-table-column>
                <el-table-column align="center" prop="createTime" label="创建时间"> </el-table-column>
                <el-table-column align="center" prop="policeman" label="民警姓名"> </el-table-column>
                <el-table-column align="center" prop="policemanPhone" label="民警联系方式"> </el-table-column>
                <el-table-column align="center" prop="pcsName" label="宣防单位"> </el-table-column>
            </el-table>



      <div class="btn-box-box">
        <!-- 出租屋按钮，居住证申请按钮，租客按钮 -->
        <div class="btn-box">
          <el-button :type="current == 1 ? 'primary' : ''" size="mini" @click="changeData(1)">反诈宣防</el-button>
        </div>

        <!-- 详情页面 -->
        <div class="detail-box" v-if="detailBox">
            <div v-if="current == 1">
                <div class="detail-title-box">
                    <div class="detail-title">反诈宣防详情</div>
                </div>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">宣防人姓名</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.policeman }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">宣防人电话</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.policemanPhone }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">宣防人单位</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.pcsName }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">宣防内容</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.pubContent }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">下载反诈app</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row"> {{ row.isFzApp == 1 ? '是' : '否' }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">是否打开报警</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row"> {{ row.isOpenAlarm == 1 ? '是' : '否' }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">经纬度</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row"> {{ row.lng }} ,{{ row.lat }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">地址</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="">{{ row.address }}</div>
                    </el-col>
                </el-row>


                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">宣防照片</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="mini-code">
                            <el-image fit="contain" style="height: 100px;width: 100px;" :src="row.pubUrls"
                                :preview-src-list="[row.pubUrls]">
                                <div slot="error" class="image-slot"></div>
                            </el-image>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <div v-if="current == 2">
                <div class="detail-title-box">
                    <div class="detail-title">反诈预警处置详情</div>
                </div>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">民警姓名</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.policeman }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">民警联系电话</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.policemanPhone }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">宣防单位</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.pcsName }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">核实内容信息</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.recContent }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">经纬度</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row"> {{ row.lng }} ,{{ row.lat }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">地址</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="">{{ row.address }}</div>
                    </el-col>
                </el-row>


                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">宣防照片</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="mini-code">
                            <el-image fit="contain" style="height: 100px;width: 100px;" :src="row.sceUrls"
                                :preview-src-list="[row.sceUrls]">
                                <div slot="error" class="image-slot"></div>
                            </el-image>
                        </div>
                    </el-col>
                </el-row>
            </div>

        <div class="btn-box">
          <el-button :type="current == 2 ? 'primary' : ''" size="mini" @click="changeData(2)">反诈预警处置</el-button>
        </div>
      </div>

      <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick" v-if="current == 1">
        <el-table-column align="center" prop="policeman" label="宣防人姓名"> </el-table-column>
        <el-table-column align="center" prop="policemanPhone" label="宣防人电话"> </el-table-column>
        <el-table-column align="center" prop="pcsName" label="宣防人单位"> </el-table-column>
        <el-table-column align="center" prop="pubContent" label="宣防内容"> </el-table-column>
      </el-table>

      <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick" v-if="current == 2">
        <el-table-column align="center" show-overflow-tooltip prop="address" label="地址"> </el-table-column>
        <el-table-column align="center" prop="recContent" label="核实内容信息"> </el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column align="center" prop="policeman" label="民警姓名"> </el-table-column>
        <el-table-column align="center" prop="policemanPhone" label="民警联系方式"> </el-table-column>
        <el-table-column align="center" prop="pcsName" label="宣防单位"> </el-table-column>
      </el-table>
    </div>

    <!-- 详情页面 -->
    <el-dialog class="resident-details-box-details" :modal="false" :close-on-click-modal="false" :append-to-body="true"
      :visible.sync="detailBox">
      <div class="detail-box">
        <template v-if="current == 1">
          <div class="detail-title-box">
            <div class="detail-title">反诈宣防详情</div>
            <div class="close" @click="detailBox = false" title="关闭"></div>
          </div>

          <div class="detail-content-box">
            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">宣防人姓名</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.policeman }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">宣防人电话</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.policemanPhone }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">宣防人单位</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.pcsName }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">宣防内容</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.pubContent }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">下载反诈app</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row"> {{ row.isFzApp == 1 ? '是' : '否' }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">是否打开报警</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row"> {{ row.isOpenAlarm == 1 ? '是' : '否' }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">经纬度</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row"> {{ row.lng }} ,{{ row.lat }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">地址</div>
              </el-col>
              <el-col :span="18">
                <div class="">{{ row.address }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">宣防照片</div>
              </el-col>
              <el-col :span="18">
                <div class="mini-code">
                  <el-image fit="contain" style="height: 100px;width: 100px;" :src="row.pubUrls"
                    :preview-src-list="[row.pubUrls]">
                    <div slot="error" class="image-slot"></div>
                  </el-image>
                </div>
              </el-col>
            </el-row>
          </div>
        </template>

        <template v-if="current == 2">
          <div class="detail-title-box">
            <div class="detail-title">反诈预警处置详情</div>
            <div class="close" @click="detailBox = false" title="关闭"></div>
          </div>

          <div class="detail-content-box">
            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">民警姓名</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.policeman }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">民警联系电话</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.policemanPhone }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">宣防单位</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.pcsName }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">核实内容信息</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.recContent }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">经纬度</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row"> {{ row.lng }} ,{{ row.lat }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">地址</div>
              </el-col>
              <el-col :span="18">
                <div class="">{{ row.address }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">宣防照片</div>
              </el-col>
              <el-col :span="18">
                <div class="mini-code">
                  <el-image fit="contain" style="height: 100px;width: 100px;" :src="row.sceUrls"
                    :preview-src-list="[row.sceUrls]">
                    <div slot="error" class="image-slot"></div>
                  </el-image>
                </div>
              </el-col>
            </el-row>
          </div>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {
    getTaskLabelAntiFraudPage,
    getBackblastWarnHanRec
  getTaskLabelAntiFraudPage,
  getBackblastWarnHanRec
} from "@/api/dept/newIndex.js"

export default {
    name: 'tableFromPop',
  name: 'tableFromPop',

    props: {
        hushiPeoTy: {
            type: String,
            default: ''
        },
  props: {
    hushiPeoTy: {
      type: String,
      default: ''
    },
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            row: {},
            current: 1,
            detailBox: false,
            dataList: {
                total: 1,
                records: []
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      row: {},
      current: 1,
      detailBox: false,
      dataList: {
        total: 1,
        records: []

            },
      },

        };
    },
    //监听属性 类似于data概念
    computed: {
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        changeData(type) {
            this.current = type
            this.detailBox = false
            if (type == 1) {
                getTaskLabelAntiFraudPage('123456').then((res) => {
                    this.dataList.total = res.data.data.total
                    this.dataList.records = res.data.data.records
                })
            } else {
                getBackblastWarnHanRec('123456').then((res) => {
                    this.dataList.total = res.data.data.total
                    this.dataList.records = res.data.data.records
                })
            }
        },
        cellClick(row, column, cell, event) {
            row.pubUrls = this.getImgUrls(row.pubUrls)
            this.row = row
            this.detailBox = !this.detailBox
            console.log('cellClick', row, column, cell, event)
        },
        // // 图片转换
        getImgUrls(imageUrls) {
            if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
                imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
                    // return 'http://10.141.11.11/place/' + ele
                    return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
                })
            }
            return imageUrls || []
        },

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        console.log('tableFromPop mounted', this.hushiPeoTy)
        getTaskLabelAntiFraudPage(123456).then((res) => {
            this.dataList.total = res.data.data.total
            this.dataList.records = res.data.data.records
    }
  },
  //监听属性 类似于data概念
  computed: {
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeData (type) {
      this.current = type
      this.detailBox = false
      if (type == 1) {
        getTaskLabelAntiFraudPage('123456').then((res) => {
          this.dataList.total = res.data.data.total
          this.dataList.records = res.data.data.records
        })
      } else {
        getBackblastWarnHanRec('123456').then((res) => {
          this.dataList.total = res.data.data.total
          this.dataList.records = res.data.data.records
        })
      }
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        console.log('tableFromPop mounted', this.hushiPeoTy)
    cellClick (row, column, cell, event) {
      row.pubUrls = this.getImgUrls(row.pubUrls)
      this.row = row
      this.detailBox = !this.detailBox
      console.log('cellClick', row, column, cell, event)
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
    // // 图片转换
    getImgUrls (imageUrls) {
      if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
        imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
          // return 'http://10.141.11.11/place/' + ele
          return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
        })
      }
      return imageUrls || []
    },

  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    console.log('tableFromPop mounted', this.hushiPeoTy)
    getTaskLabelAntiFraudPage(123456).then((res) => {
      this.dataList.total = res.data.data.total
      this.dataList.records = res.data.data.records
    })
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    console.log('tableFromPop mounted', this.hushiPeoTy)
  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

@@ -305,37 +308,14 @@
<style scoped lang="scss">
.table-box-w {

    // position: relative;
    // background-color: rgba(228, 17, 17, 0.5);
    .btn-box-box {
        display: flex;
  // position: relative;
  // background-color: rgba(228, 17, 17, 0.5);
  .btn-box-box {
    display: flex;

        .btn-box {
            margin: 2px 5px;
        }
    .btn-box {
      margin: 2px 5px;
    }

    .detail-box {
        height: 700px;
        position: absolute;
        right: -410px;
        top: -80%;
        background-color: rgba(35, 50, 167, 0.7);
        width: 400px;
        padding: 10px;

        .detail-title-box {
            margin-bottom: 10px;
            font-weight: bold;
            text-align: center;
        }
    }

    .detail-row {
        line-height: 40px;
        // text-align: left;
        // margin-left: 10px;

    }
  }
}
</style>

 src/views/house/components/employees.vue

@@ -1,270 +1,256 @@
<!--  -->
<template>
    <div class="table-box-w">
        <div>
            <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick">
                <!-- 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等。 -->
                <el-table-column align="center" prop="name" label="姓名"> </el-table-column>
                <el-table-column align="center" prop="gender" label="性别">
                    <template slot-scope="scope">
                        {{ scope.row.gender == 1 ? '男' : '女' }}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="ethnicity" label="民族"> </el-table-column>
                <el-table-column align="center" prop="idCard" label="身份证号码"> </el-table-column>
                <el-table-column align="center" prop="telephone" label="手机号"> </el-table-column>
                <el-table-column align="center" prop="location" show-overflow-tooltip label="现居住地"> </el-table-column>
                <el-table-column align="center" prop="name" label="岗位"> </el-table-column>
  <div class="table-box-w">
    <div class="list-box">
      <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick">
        <!-- 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等。 -->
        <el-table-column align="center" prop="name" label="姓名"> </el-table-column>
        <el-table-column align="center" prop="gender" label="性别">
          <template slot-scope="scope">
            {{ scope.row.gender == 1 ? '男' : '女' }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="ethnicity" label="民族"> </el-table-column>
        <el-table-column align="center" prop="idCard" label="身份证号码"> </el-table-column>
        <el-table-column align="center" prop="telephone" label="手机号"> </el-table-column>
        <el-table-column align="center" prop="location" show-overflow-tooltip label="现居住地"> </el-table-column>
        <el-table-column align="center" prop="name" label="岗位"> </el-table-column>

            </el-table>
        </div>

        <!-- 详情页面 -->
        <div class="detail-box" v-if="detailBox">
            <!-- popelList[0]  详情页面 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等-->
            <div class="detail-title-box">
                <div class="detail-title">从业人员详情</div>
            </div>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">场所名称</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.placeName }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">场所负责人</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.principal }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">负责人电话</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.principalPhone }}</div>
                </el-col>
            </el-row>
            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">场所地址</div>
                </el-col>
                <el-col :span="18">
                    <div class="">{{ row.location }}</div>
                </el-col>
            </el-row>


            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">姓名</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.name }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">性别</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.gender == 1 ? '男' : '女' }}</div>
                </el-col>
            </el-row>
            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">民族</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.ethnicity }}</div>
                </el-col>
            </el-row>
            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">身份证号码</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.idCard }}</div>
                </el-col>
            </el-row>
            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">手机号</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.telephone }}</div>
                </el-col>
            </el-row>
            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">现居住地</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.tempAddress }}</div>
                </el-col>
            </el-row>
            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">岗位</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.jobNature }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">入职时间</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.employmentTime }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">辞职时间</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.resignationTime }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">从业人员照片</div>
                </el-col>
                <el-col :span="18">
                    <div class="mini-code">
                        <el-image fit="contain" style="height: 100px;width: 100px;" :src="row.employerImg"
                            :preview-src-list="[row.employerImg]">
                            <div slot="error" class="image-slot"></div>
                        </el-image>
                    </div>
                </el-col>
            </el-row>


        </div>
      </el-table>
    </div>

    <!-- 详情页面 -->
    <el-dialog class="resident-details-box-details" :modal="false" :close-on-click-modal="false" :append-to-body="true"
      :visible.sync="detailBox">
      <div class="detail-box">
        <!-- popelList[0]  详情页面 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等-->
        <div class="detail-title-box">
          <div class="detail-title">从业人员详情</div>
          <div class="close" @click="detailBox = false" title="关闭"></div>
        </div>

        <div class="detail-content-box">
          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">场所名称</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.placeName }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">场所负责人</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.principal }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">负责人电话</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.principalPhone }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">场所地址</div>
            </el-col>
            <el-col :span="18">
              <div class="">{{ row.location }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">姓名</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.name }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">性别</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.gender == 1 ? '男' : '女' }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">民族</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.ethnicity }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">身份证号码</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.idCard }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">手机号</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.telephone }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">现居住地</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.tempAddress }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">岗位</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.jobNature }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">入职时间</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.employmentTime }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">辞职时间</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.resignationTime }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">从业人员照片</div>
            </el-col>
            <el-col :span="18">
              <div class="mini-code">
                <el-image fit="contain" style="height: 100px;width: 100px;" :src="row.employerImg"
                  :preview-src-list="[row.employerImg]">
                  <div slot="error" class="image-slot"></div>
                </el-image>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {
    getPlacePractitionerPage
  getPlacePractitionerPage
} from "@/api/dept/newIndex.js"
export default {
    name: 'tableFromPop',
  name: 'tableFromPop',

    props: {
        hushiPeoTy: {
            type: String,
            default: ''
        },
  props: {
    hushiPeoTy: {
      type: String,
      default: ''
    },
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            row: {},
            detailBox: false,
            dataList: {
                total: 1,
                records: []
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      row: {},
      detailBox: false,
      dataList: {
        total: 1,
        records: []

            },
      },

        };
    }
  },
  //监听属性 类似于data概念
  computed: {
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    init () {
      getPlacePractitionerPage(123456).then((res) => {
        this.dataList.total = res.data.data.total
        this.dataList.records = res.data.data.records
      })
    },
    //监听属性 类似于data概念
    computed: {
    cellClick (row, column, cell, event) {
      row.employerImg = this.getImgUrls(row.employerImg)
      this.row = row
      this.detailBox = !this.detailBox
      console.log('cellClick', row, column, cell, event)
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        init() {
            getPlacePractitionerPage(123456).then((res) => {
                this.dataList.total = res.data.data.total
                this.dataList.records = res.data.data.records
            })
        },
        cellClick(row, column, cell, event) {
            row.employerImg = this.getImgUrls(row.employerImg)
            this.row = row
            this.detailBox = !this.detailBox
            console.log('cellClick', row, column, cell, event)
        },
        // // 图片转换
        getImgUrls(imageUrls) {
            if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
                imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
                    // return 'http://10.141.11.11/place/' + ele
                    return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
                })
            }
            return imageUrls || []
        },
    // // 图片转换
    getImgUrls (imageUrls) {
      if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
        imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
          // return 'http://10.141.11.11/place/' + ele
          return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
        })
      }
      return imageUrls || []
    },

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        console.log('tableFromPop mounted', this.hushiPeoTy)
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    console.log('tableFromPop mounted', this.hushiPeoTy)

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        console.log('tableFromPop mounted', this.hushiPeoTy)
        this.init()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    console.log('tableFromPop mounted', this.hushiPeoTy)
    this.init()

    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>


<style scoped lang="scss">
.table-box-w {
    // position: relative;
    // background-color: rgba(228, 17, 17, 0.5);

    .detail-box {
        height: 700px;
        position: absolute;
        right: -410px;
        top: -60%;
        background-color: rgba(35, 50, 167, 0.7);
        width: 400px;
        padding: 10px;

        .detail-title-box {
            margin-bottom: 10px;
            font-weight: bold;
            text-align: center;
        }
    }

    .detail-row {
        line-height: 40px;
        // text-align: left;
        // margin-left: 10px;

    }
  // position: relative;
  // background-color: rgba(228, 17, 17, 0.5);
}
</style>

 src/views/house/components/nineSmallPlaces.vue

@@ -1,567 +1,541 @@
<!--  -->
<template>
    <div class="table-box-w">
        <div>

            <div class="btn-box-box">
                <!-- 出租屋按钮，居住证申请按钮，租客按钮 -->
                <div class="btn-box">
                    <el-button :type="current == 1 ? 'primary' : ''" size="mini" @click="changeData(1)">消防检查</el-button>
                </div>
                <div class="btn-box">
                    <el-button :type="current == 2 ? 'primary' : ''" size="mini" @click="changeData(2)">消防自查</el-button>
                </div>
            </div>

            <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick" v-if="current == 1">
                <el-table-column align="center" prop="placeName" label="场所名称"> </el-table-column>
                <el-table-column align="center" prop="principal" label="场所负责人"> </el-table-column>
                <el-table-column align="center" prop="principalPhone" label="场所负责人电话"> </el-table-column>
                <el-table-column align="center" prop="terminationTime" label="检查时间"> </el-table-column>
                <el-table-column align="center" prop="location" show-overflow-tooltip label="场所地址"> </el-table-column>
                <el-table-column align="center" prop="hiddenDangerNumber" label="执行状态">
                    <template slot-scope="scope">
                        {{ scope.row.hiddenDangerNumber == 1 ? '是' : '否' }}
                    </template>
                </el-table-column>
            </el-table>

            <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick" v-if="current == 2">
                <el-table-column align="center" prop="placeName" label="场所名称"> </el-table-column>
                <el-table-column align="center" prop="principal" label="场所负责人"> </el-table-column>
                <el-table-column align="center" prop="principalPhone" label="场所负责人电话"> </el-table-column>
                <el-table-column align="center" prop="terminationTime" label="检查时间"> </el-table-column>
                <el-table-column align="center" prop="location" show-overflow-tooltip label="场所地址"> </el-table-column>
                <el-table-column align="center" prop="hiddenDangerNumber" label="执行状态">
                    <template slot-scope="scope">
                        {{ scope.row.hiddenDangerNumber == 1 ? '是' : '否' }}
                    </template>
                </el-table-column>
            </el-table>

            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="dataList.total">
                </el-pagination>
            </div>
  <div class="table-box-w">
    <div class="list-box">
      <div class="btn-box-box">
        <!-- 出租屋按钮，居住证申请按钮，租客按钮 -->
        <div class="btn-box">
          <el-button :type="current == 1 ? 'primary' : ''" size="mini" @click="changeData(1)">消防检查</el-button>
        </div>

        <!-- 详情页面 -->
        <div class="detail-box" v-if="detailBox">

            <div v-if="current == 1">
                <div class="detail-title-box">
                    <div class="detail-title">消防检查详情</div>
                </div>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">场所名称</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.placeName }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">场所负责人</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.principal }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">场所负责人电话</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.principalPhone }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">检查时间</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.createTime }}</div>
                    </el-col>
                </el-row>
                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">地址</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="">{{ row.location }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">经纬度</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.lng }},{{ row.lat }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">签名</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="mini-code">
                            <el-image fit="contain" style="height: 100px;width: 100px;" :src="row.signaturePath"
                                :preview-src-list="[row.signaturePath]">
                                <div slot="error" class="image-slot"></div>
                            </el-image>
                        </div>
                    </el-col>
                </el-row>

                <div class="flex-1 flex f-d-c examine-details">
                    <!-- <div class="title">
                        <div class="icon">{{ }}</div>
                        基础信息
                    </div>
                    <div class="basic-info">
                        <div class="info-item">
                            <div class="info-name">场所名称</div>
                            <div class="info-value">{{ }}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-name">检查时间</div>
                            <div class="info-value">{{ }}</div>
                        </div>
                    </div>
                    <div class="title">
                        <div class="icon"></div>
                        检查记录
                    </div> -->

                    <div class="question-list" v-for="(tItem, tIndex) in patrolGroupDTOList" :key='tIndex'>
                        <div class="question-type">
                            <div class="type-name">
                                {{ tIndex + 1 }}、{{ tItem.title }}
                            </div>
                            <div class="icon-box">
                                <i class="el-icon-arrow-down" v-if="tItem.hasChildren"></i>
                                <i class="el-icon-arrow-up" v-if="!tItem.hasChildren"></i>
                            </div>
                        </div>

                        <div v-show="tItem.hasChildren" class="question-item" v-for="(item, index) in tItem.children"
                            :key='index'>
                            <div class="question-name">
                                <div class="key"> {{ item.title }}</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">
                                    {{ item.remark }}
                                </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">
                                    {{ item.rectificationRemark }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>


            <div v-if="current == 2">

                <div class="detail-title-box">
                    <div class="detail-title">消防自查详情</div>
                </div>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">场所名称</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.placeName }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">场所负责人</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.principal }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">场所负责人电话</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.principalPhone }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">检查时间</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.createTime }}</div>
                    </el-col>
                </el-row>
                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">地址</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="">{{ row.location }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">经纬度</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.lng }},{{ row.lat }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">签名</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="mini-code">
                            <el-image fit="contain" style="height: 100px;width: 100px;" :src="row.signaturePath"
                                :preview-src-list="[row.signaturePath]">
                                <div slot="error" class="image-slot"></div>
                            </el-image>
                        </div>
                    </el-col>
                </el-row>

                <div class="flex-1 flex f-d-c examine-details">

                    <div class="question-list" v-for="(tItem, tIndex) in patrolGroupDTOList" :key='tIndex'>
                        <div class="question-type" style="display: flex;">
                            <div class="type-name">
                                {{ getUpperCase(tIndex + 1) }}、{{ tItem.title }}
                            </div>
                            <div class="icon-box">
                                <i class="el-icon-arrow-down" v-if="tItem.hasChildren"></i>
                                <i class="el-icon-arrow-up" v-if="!tItem.hasChildren"></i>
                            </div>
                        </div>

                        <div v-show="tItem.hasChildren" class="question-item" v-for="(item, index) in tItem.children"
                            :key='index'>
                            <div class="question-name" style="display: flex;">
                                <div class="key"> {{ index + 1 }}、 {{ item.title }}</div>
                                <div class="value">
                                    <el-radio v-if="item.state == 0" v-model="item.state" :label="0" disabled>存在</el-radio>
                                    <el-radio v-else 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">
                                    {{ item.remark }}
                                </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">
                                    {{ item.rectificationRemark }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        <div class="btn-box">
          <el-button :type="current == 2 ? 'primary' : ''" size="mini" @click="changeData(2)">消防自查</el-button>
        </div>
      </div>

      <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick" v-if="current == 1">
        <el-table-column align="center" prop="placeName" label="场所名称"> </el-table-column>
        <el-table-column align="center" prop="principal" label="场所负责人"> </el-table-column>
        <el-table-column align="center" prop="principalPhone" label="场所负责人电话"> </el-table-column>
        <el-table-column align="center" prop="terminationTime" label="检查时间"> </el-table-column>
        <el-table-column align="center" prop="location" show-overflow-tooltip label="场所地址"> </el-table-column>
        <el-table-column align="center" prop="hiddenDangerNumber" label="执行状态">
          <template slot-scope="scope">
            {{ scope.row.hiddenDangerNumber == 1 ? '是' : '否' }}
          </template>
        </el-table-column>
      </el-table>

      <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick" v-if="current == 2">
        <el-table-column align="center" prop="placeName" label="场所名称"> </el-table-column>
        <el-table-column align="center" prop="principal" label="场所负责人"> </el-table-column>
        <el-table-column align="center" prop="principalPhone" label="场所负责人电话"> </el-table-column>
        <el-table-column align="center" prop="terminationTime" label="检查时间"> </el-table-column>
        <el-table-column align="center" prop="location" show-overflow-tooltip label="场所地址"> </el-table-column>
        <el-table-column align="center" prop="hiddenDangerNumber" label="执行状态">
          <template slot-scope="scope">
            {{ scope.row.hiddenDangerNumber == 1 ? '是' : '否' }}
          </template>
        </el-table-column>
      </el-table>

      <div class="pages">
        <el-pagination background layout="prev, pager, next" :page-size="100" :total="dataList.total"
          :current-page="currentPage4" @current-change="handleCurrentChange"></el-pagination>
      </div>
    </div>

    <!-- 详情页面 -->
    <el-dialog class="resident-details-box-details" :modal="false" :close-on-click-modal="false" :append-to-body="true"
      :visible.sync="detailBox">
      <div class="detail-box">
        <template v-if="current == 1">
          <div class="detail-title-box">
            <div class="detail-title">消防检查详情 </div>
            <div class="close" @click="detailBox = false" title="关闭"></div>
          </div>

          <div class="detail-content-box">
            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">场所名称</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.placeName }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">场所负责人</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.principal }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">场所负责人电话</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.principalPhone }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">检查时间</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.createTime }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">地址</div>
              </el-col>
              <el-col :span="18">
                <div class="">{{ row.location }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">经纬度</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.lng }},{{ row.lat }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">签名</div>
              </el-col>
              <el-col :span="18">
                <div class="mini-code">
                  <el-image fit="contain" style="height: 100px;width: 100px;" :src="row.signaturePath"
                    :preview-src-list="[row.signaturePath]">
                    <div slot="error" class="image-slot"></div>
                  </el-image>
                </div>
              </el-col>
            </el-row>

            <div class="flex-1 flex f-d-c examine-details">
              <!-- <div class="title">
                  <div class="icon">{{ }}</div>
                  基础信息
              </div>
              <div class="basic-info">
                  <div class="info-item">
                      <div class="info-name">场所名称</div>
                      <div class="info-value">{{ }}</div>
                  </div>
                  <div class="info-item">
                      <div class="info-name">检查时间</div>
                      <div class="info-value">{{ }}</div>
                  </div>
              </div>
              <div class="title">
                  <div class="icon"></div>
                  检查记录
              </div> -->

              <div class="question-list" v-for="(tItem, tIndex) in patrolGroupDTOList" :key='tIndex'>
                <div class="question-type">
                  <div class="type-name">
                    {{ tIndex + 1 }}、{{ tItem.title }}
                  </div>
                  <div class="icon-box">
                    <i class="el-icon-arrow-down" v-if="tItem.hasChildren"></i>
                    <i class="el-icon-arrow-up" v-if="!tItem.hasChildren"></i>
                  </div>
                </div>

                <div v-show="tItem.hasChildren" class="question-item" v-for="(item, index) in tItem.children"
                  :key='index'>
                  <div class="question-name">
                    <div class="key"> {{ item.title }}</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">
                      {{ item.remark }}
                    </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">
                      {{ item.rectificationRemark }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>


        <template v-if="current == 2">
          <div class="detail-title-box">
            <div class="detail-title">消防自查详情</div>

            <div class="close" @click="detailBox = false" title="关闭"></div>
          </div>

          <div class="detail-content-box">
            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">场所名称</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.placeName }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">场所负责人</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.principal }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">场所负责人电话</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.principalPhone }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">检查时间</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.createTime }}</div>
              </el-col>
            </el-row>
            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">地址</div>
              </el-col>
              <el-col :span="18">
                <div class="">{{ row.location }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">经纬度</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.lng }},{{ row.lat }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">签名</div>
              </el-col>
              <el-col :span="18">
                <div class="mini-code">
                  <el-image fit="contain" style="height: 100px;width: 100px;" :src="row.signaturePath"
                    :preview-src-list="[row.signaturePath]">
                    <div slot="error" class="image-slot"></div>
                  </el-image>
                </div>
              </el-col>
            </el-row>

            <div class="flex-1 flex f-d-c examine-details">

              <div class="question-list" v-for="(tItem, tIndex) in patrolGroupDTOList" :key='tIndex'>
                <div class="question-type" style="display: flex;">
                  <div class="type-name">
                    {{ getUpperCase(tIndex + 1) }}、{{ tItem.title }}
                  </div>
                  <div class="icon-box">
                    <i class="el-icon-arrow-down" v-if="tItem.hasChildren"></i>
                    <i class="el-icon-arrow-up" v-if="!tItem.hasChildren"></i>
                  </div>
                </div>

                <div v-show="tItem.hasChildren" class="question-item" v-for="(item, index) in tItem.children"
                  :key='index'>
                  <div class="question-name" style="display: flex;">
                    <div class="key"> {{ index + 1 }}、 {{ item.title }}</div>
                    <div class="value">
                      <el-radio v-if="item.state == 0" v-model="item.state" :label="0" disabled>存在</el-radio>
                      <el-radio v-else 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">
                      {{ item.remark }}
                    </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">
                      {{ item.rectificationRemark }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {
    getTaskPlaceSelfCheckPage,
    getPlaceCheckPage,
    getPatrolGroupTree
  getTaskPlaceSelfCheckPage,
  getPlaceCheckPage,
  getPatrolGroupTree
} from "@/api/dept/newIndex.js"
export default {
    name: 'tableFromPop',
  name: 'tableFromPop',

    props: {
        hushiPeoTy: {
            type: String,
            default: ''
        },
  props: {
    hushiPeoTy: {
      type: String,
      default: ''
    },
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            row: {},
            current: 1,
            detailBox: false,
            dataList: {
                total: 1,
                records: []
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      row: {},
      current: 1,
      detailBox: false,
      dataList: {
        total: 1,
        records: []

            },
            pageparm: {
                pageSize: 10,
                current: 1
            },
            patrolGroupDTOList: []
      },
      pageparm: {
        pageSize: 10,
        current: 1
      },
      patrolGroupDTOList: []

        };
    }
  },
  //监听属性 类似于data概念
  computed: {
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 写一个方法，把阿拉伯数字转换中文的大写
    getUpperCase (num) {
      const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
      const units = ['', '十', '百', '千', '万']
      let str = ''
      num = num.toString() // 确保输入是字符串
      for (let i = 0; i < num.length; i++) {
        str += chineseNumbers[num.charAt(i)] + units[num.length - i - 1]
      }
      let numResult = str.replace(/零[千百十]/g, '零').replace(/^零/, '')
      console.log(numResult)
      return numResult
    },
    //监听属性 类似于data概念
    computed: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageparm.pageSize = val
      this.changeData(this.current)
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 写一个方法，把阿拉伯数字转换中文的大写
        getUpperCase(num) {
            const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
            const units = ['', '十', '百', '千', '万'];
            let str = '';
            num = num.toString(); // 确保输入是字符串
            for (let i = 0; i < num.length; i++) {
                str += chineseNumbers[num.charAt(i)] + units[num.length - i - 1];
            }
            let numResult = str.replace(/零[千百十]/g, '零').replace(/^零/, '');
            console.log(numResult)
            return numResult
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageparm.pageSize = val
            this.changeData(this.current)
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageparm.current = val
            this.changeData(this.current)
        },
        changeData(type) {
            this.current = type
            this.detailBox = false
            if (type == 1) {
                getPlaceCheckPage(123456, this.pageparm.pageSize, this.pageparm.current).then((res) => {
                    this.dataList.total = res.data.data.total
                    this.dataList.records = res.data.data.records
                })
            } else {
                getTaskPlaceSelfCheckPage(1, 123456, this.pageparm.pageSize, this.pageparm.current).then((res) => {
                    this.dataList.total = res.data.data.total
                    this.dataList.records = res.data.data.records
                })
            }
        },
        init() {
            getPlaceCheckPage(123456, this.pageparm.pageSize, this.pageparm.current).then((res) => {
                this.dataList.total = res.data.data.total
                this.dataList.records = res.data.data.records
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pageparm.current = val
      this.changeData(this.current)
    },
    changeData (type) {
      this.current = type
      this.detailBox = false
      if (type == 1) {
        getPlaceCheckPage(123456, this.pageparm.pageSize, this.pageparm.current).then((res) => {
          this.dataList.total = res.data.data.total
          this.dataList.records = res.data.data.records
        })
      } else {
        getTaskPlaceSelfCheckPage(1, 123456, this.pageparm.pageSize, this.pageparm.current).then((res) => {
          this.dataList.total = res.data.data.total
          this.dataList.records = res.data.data.records
        })
      }
    },
    init () {
      getPlaceCheckPage(123456, this.pageparm.pageSize, this.pageparm.current).then((res) => {
        this.dataList.total = res.data.data.total
        this.dataList.records = res.data.data.records
      })

      getPatrolGroupTree(1, 1).then((res) => {
        this.patrolGroupDTOList = res.data.data
        this.patrolGroupDTOList.map(item => {
          return {
            ...item,
            isShowQList: true
          }
        })
      })
    },
    cellClick (row, column, cell, event) {
      row.employerImg = this.getImgUrls(row.employerImg)
      this.row = row
      this.detailBox = !this.detailBox
      // console.log('cellClick', row, column, cell, event)
      this.patrolGroupDTOList.forEach(item => {
        if (item.hasChildren) {
          item.children.forEach(ele => {
            row.patrolRecordVOList.forEach(pp => {
              if (ele.id == pp.itemId) {
                ele.state = pp.itemId
                ele.imageUrls = pp.imageUrls
                ele.remark = pp.remark
                ele.rectificationImageUrls = pp.rectificationImageUrls
                ele.rectificationRemark = pp.rectificationRemark
              }
            })

            getPatrolGroupTree(1, 1).then((res) => {
                this.patrolGroupDTOList = res.data.data
                this.patrolGroupDTOList.map(item => {
                    return {
                        ...item,
                        isShowQList: true
                    }
                })
            })
        },
        cellClick(row, column, cell, event) {
            row.employerImg = this.getImgUrls(row.employerImg)
            this.row = row
            this.detailBox = !this.detailBox
            // console.log('cellClick', row, column, cell, event)
            this.patrolGroupDTOList.forEach(item => {
                if (item.hasChildren) {
                    item.children.forEach(ele => {
                        row.patrolRecordVOList.forEach(pp => {
                            if (ele.id == pp.itemId) {
                                ele.state = pp.itemId
                                ele.imageUrls = pp.imageUrls
                                ele.remark = pp.remark
                                ele.rectificationImageUrls = pp.rectificationImageUrls
                                ele.rectificationRemark = pp.rectificationRemark
                            }
                        })
                    })
          })


                }
        }

            })
      })





        },


        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 || []
            }
        },
        // // 图片转换
        getImgUrls(imageUrls) {
            if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
                imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
                    // return 'http://10.141.11.11/place/' + ele
                    return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
                })
            }
            return imageUrls || []
        },

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        console.log('tableFromPop mounted', this.hushiPeoTy)

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        console.log('tableFromPop mounted', this.hushiPeoTy)
        this.init()

    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 || []
      }
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
    // // 图片转换
    getImgUrls (imageUrls) {
      if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
        imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
          // return 'http://10.141.11.11/place/' + ele
          return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
        })
      }
      return imageUrls || []
    },

  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    console.log('tableFromPop mounted', this.hushiPeoTy)

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    console.log('tableFromPop mounted', this.hushiPeoTy)
    this.init()

  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>


<style scoped lang="scss">
.table-box-w {
    // position: relative;
    // background-color: rgba(228, 17, 17, 0.5);
  // position: relative;
  // background-color: rgba(228, 17, 17, 0.5);

    .btn-box-box {
        display: flex;
  .btn-box-box {
    display: flex;

        .btn-box {
            margin: 2px 5px;
        }
    .btn-box {
      margin: 2px 5px;
    }

    .detail-box {
        height: 700px;
        position: absolute;
        right: -410px;
        top: -70%;
        background-color: rgba(35, 50, 167, 0.7);
        // width: 400px;
        padding: 10px;

        .detail-title-box {
            margin-bottom: 10px;
            font-weight: bold;
            text-align: center;
        }
    }

    .detail-row {
        line-height: 40px;
        // text-align: left;
        // margin-left: 10px;

    }

  }
}
</style>

 src/views/house/components/noFraudAuthentication.vue

@@ -1,262 +1,262 @@
<!--  -->
<template>
    <div class="table-box-w">
        <div>
            <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick">
  <div class="table-box-w">
    <div class="list-box">
      <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick">

                <el-table-column align="center" prop="placeName" label="场所名称"> </el-table-column>
                <el-table-column align="center" prop="principal" label="场所负责人"> </el-table-column>
                <el-table-column align="center" prop="principalPhone" label="手机号码"> </el-table-column>
                <!-- <el-table-column align="center" prop="createTime" label="身份证号码"> </el-table-column> -->
                <el-table-column align="center" prop="noFraudType" label="无诈分类">
                    <template slot-scope="scope">
                        {{ getNoFraudType(scope.row.noFraudType) }}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="addressName" show-overflow-tooltip label="地址"> </el-table-column>
            </el-table>
        <el-table-column align="center" prop="placeName" label="场所名称"> </el-table-column>
        <el-table-column align="center" prop="principal" label="场所负责人"> </el-table-column>
        <el-table-column align="center" prop="principalPhone" label="手机号码"> </el-table-column>
        <!-- <el-table-column align="center" prop="createTime" label="身份证号码"> </el-table-column> -->
        <el-table-column align="center" prop="noFraudType" label="无诈分类">
          <template slot-scope="scope">
            {{ getNoFraudType(scope.row.noFraudType) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="addressName" show-overflow-tooltip label="地址"> </el-table-column>
      </el-table>

            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="dataList.total">
                </el-pagination>
            </div>
        </div>

        <!-- 详情页面 -->
        <div class="detail-box" v-if="detailBox">

            <div class="detail-title-box">
                <div class="detail-title">无诈申报详情</div>
            </div>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">场所名称</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.placeName }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">场所负责人</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.principal }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">手机号码</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.principalPhone }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">街道</div>
                </el-col>
                <el-col :span="18">
                    <div class="">{{ row.streetName }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">社区</div>
                </el-col>
                <el-col :span="18">
                    <div class="">{{ row.communityName }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">网格</div>
                </el-col>
                <el-col :span="18">
                    <div class="">{{ row.gridName }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">派出所</div>
                </el-col>
                <el-col :span="18">
                    <div class="">{{ row.pcsName }}</div>
                </el-col>
            </el-row>


            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">经纬度</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.lng }},{{ row.lat }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">无诈分类</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ getNoFraudType(row.noFraudType) }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">地址</div>
                </el-col>
                <el-col :span="18">
                    <div class="">{{ row.addressName }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">场所照片</div>
                </el-col>
                <el-col :span="18">
                    <div class="mini-code">
                        <el-image fit="contain" style="height: 100px;width: 100px;" :src="row.qrImg"
                            :preview-src-list="[row.qrImg]">
                            <div slot="error" class="image-slot"></div>
                        </el-image>
                    </div>
                </el-col>
            </el-row>


        </div>
      <div class="pages">
        <el-pagination background layout="prev, pager, next" :page-size="100" :total="dataList.total"
          :current-page="currentPage4" @current-change="handleCurrentChange"></el-pagination>
      </div>
    </div>

    <!-- 详情页面 -->
    <el-dialog class="resident-details-box-details" :modal="false" :close-on-click-modal="false" :append-to-body="true"
      :visible.sync="detailBox">
      <div class="detail-box">
        <div class="detail-title-box">
          <div class="detail-title">无诈申报详情</div>
          <div class="close" @click="detailBox = false" title="关闭"></div>
        </div>

        <div class="detail-content-box">
          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">场所名称</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.placeName }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">场所负责人</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.principal }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">手机号码</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.principalPhone }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">街道</div>
            </el-col>
            <el-col :span="18">
              <div class="">{{ row.streetName }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">社区</div>
            </el-col>
            <el-col :span="18">
              <div class="">{{ row.communityName }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">网格</div>
            </el-col>
            <el-col :span="18">
              <div class="">{{ row.gridName }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">派出所</div>
            </el-col>
            <el-col :span="18">
              <div class="">{{ row.pcsName }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">经纬度</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.lng }},{{ row.lat }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">无诈分类</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ getNoFraudType(row.noFraudType) }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">地址</div>
            </el-col>
            <el-col :span="18">
              <div class="">{{ row.addressName }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">场所照片</div>
            </el-col>
            <el-col :span="18">
              <div class="mini-code">
                <el-image fit="contain" style="height: 100px;width: 100px;" :src="row.qrImg"
                  :preview-src-list="[row.qrImg]">
                  <div slot="error" class="image-slot"></div>
                </el-image>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {
    getTaskNoFraudReporting,
    getTaskNoFraudReportingInfo
  getTaskNoFraudReporting,
  getTaskNoFraudReportingInfo
} from "@/api/dept/newIndex.js"
export default {
    name: 'tableFromPop',
  name: 'tableFromPop',

    props: {
        hushiPeoTy: {
            type: String,
            default: ''
        },
  props: {
    hushiPeoTy: {
      type: String,
      default: ''
    },
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            row: {},
            detailBox: false,
            dataList: {
                total: 1,
                records: []
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      row: {},
      detailBox: false,
      dataList: {
        total: 1,
        records: []

            },
            // 无诈分类
            noFraudTypeList: [
                { label: '企业', value: 2 },
                { label: '工地', value: 3 },
                { label: '学校', value: 4 },
                { label: '医院', value: 5 },
                { label: '村（社区）', value: 6 },
                { label: '厂（园区）', value: 7 },
                { label: '单位', value: 8 }
      },
      // 无诈分类
      noFraudTypeList: [
        { label: '企业', value: 2 },
        { label: '工地', value: 3 },
        { label: '学校', value: 4 },
        { label: '医院', value: 5 },
        { label: '村（社区）', value: 6 },
        { label: '厂（园区）', value: 7 },
        { label: '单位', value: 8 }

            ],
            pageparm: {
                pageSize: 10,
                current: 1
            }
      ],
      pageparm: {
        pageSize: 10,
        current: 1
      }

        };
    }
  },
  //监听属性 类似于data概念
  computed: {
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 获取无诈数据
    getNoFraudType (val) {
      let type = ''
      this.noFraudTypeList.forEach(item => {
        if (item.value == val) {
          type = item.label
        }
      })
      return type
    },
    //监听属性 类似于data概念
    computed: {

    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageparm.pageSize = val
      this.init()
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 获取无诈数据
        getNoFraudType(val) {
            let type = ''
            this.noFraudTypeList.forEach(item => {
                if (item.value == val) {
                    type = item.label
                }
            })
            return type
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageparm.pageSize = val
            this.init()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageparm.current = val
            this.init()

        },
        init() {
            getTaskNoFraudReporting(123456, this.pageparm.pageSize, this.pageparm.current).then((res) => {
                this.dataList.total = res.data.data.total
                this.dataList.records = res.data.data.records
            })
        },
        cellClick(row, column, cell, event) {
            row.employerImg = this.getImgUrls(row.employerImg)
            this.row = row
            this.detailBox = !this.detailBox
            console.log('cellClick', row, column, cell, event)
        },
        // // 图片转换
        getImgUrls(imageUrls) {
            if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
                imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
                    // return 'http://10.141.11.11/place/' + ele
                    return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
                })
            }
            return imageUrls || []
        },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pageparm.current = val
      this.init()

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        console.log('tableFromPop mounted', this.hushiPeoTy)

    init () {
      getTaskNoFraudReporting(123456, this.pageparm.pageSize, this.pageparm.current).then((res) => {
        this.dataList.total = res.data.data.total
        this.dataList.records = res.data.data.records
      })
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        console.log('tableFromPop mounted', this.hushiPeoTy)
        this.init()

    cellClick (row, column, cell, event) {
      row.employerImg = this.getImgUrls(row.employerImg)
      this.row = row
      this.detailBox = !this.detailBox
      console.log('cellClick', row, column, cell, event)
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
    // // 图片转换
    getImgUrls (imageUrls) {
      if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
        imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
          // return 'http://10.141.11.11/place/' + ele
          return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
        })
      }
      return imageUrls || []
    },

  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    console.log('tableFromPop mounted', this.hushiPeoTy)

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    console.log('tableFromPop mounted', this.hushiPeoTy)
    this.init()

  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

@@ -264,37 +264,14 @@
<style scoped lang="scss">
.table-box-w {

    // position: relative;
    // background-color: rgba(228, 17, 17, 0.5);
    .btn-box-box {
        display: flex;
  // position: relative;
  // background-color: rgba(228, 17, 17, 0.5);
  .btn-box-box {
    display: flex;

        .btn-box {
            margin: 2px 5px;
        }
    .btn-box {
      margin: 2px 5px;
    }

    .detail-box {
        height: 700px;
        position: absolute;
        right: -410px;
        top: -70%;
        background-color: rgba(35, 50, 167, 0.7);
        width: 400px;
        padding: 10px;

        .detail-title-box {
            margin-bottom: 10px;
            font-weight: bold;
            text-align: center;
        }
    }

    .detail-row {
        line-height: 40px;
        // text-align: left;
        // margin-left: 10px;

    }
  }
}
</style>

 src/views/house/components/positionTrading.vue

@@ -1,265 +1,247 @@
<!--  -->
<template>
    <div class="table-box-w">
        <div>
            <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick">
                <!-- 包含了场所名称、阵地类型、交易人员姓名、手机号、身份证号码、物品名称、交易数量、交易金额、校验过程、交易物品图片等 -->
                <el-table-column align="center" prop="labelName" label="阵地类型"> </el-table-column>
                <el-table-column align="center" prop="placeName" label="场所名称"> </el-table-column>
                <el-table-column align="center" prop="owner" label="交易人姓名"> </el-table-column>
                <el-table-column align="center" prop="phoneNumber" label="手机号"> </el-table-column>
                <el-table-column align="center" prop="idCard" label="身份证号码"> </el-table-column>
                <el-table-column align="center" prop="transactionObject" label="物品名称"> </el-table-column>
                <el-table-column align="center" prop="goodsNums" label="交易数量"> </el-table-column>
                <el-table-column align="center" prop="transactionMoney" label="交易金额"> </el-table-column>
  <div class="table-box-w">
    <div class="list-box">
      <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick">
        <!-- 包含了场所名称、阵地类型、交易人员姓名、手机号、身份证号码、物品名称、交易数量、交易金额、校验过程、交易物品图片等 -->
        <el-table-column align="center" prop="labelName" label="阵地类型"> </el-table-column>
        <el-table-column align="center" prop="placeName" label="场所名称"> </el-table-column>
        <el-table-column align="center" prop="owner" label="交易人姓名"> </el-table-column>
        <el-table-column align="center" prop="phoneNumber" label="手机号"> </el-table-column>
        <el-table-column align="center" prop="idCard" label="身份证号码"> </el-table-column>
        <el-table-column align="center" prop="transactionObject" label="物品名称"> </el-table-column>
        <el-table-column align="center" prop="goodsNums" label="交易数量"> </el-table-column>
        <el-table-column align="center" prop="transactionMoney" label="交易金额"> </el-table-column>

            </el-table>
        </div>

        <!-- 详情页面 -->
        <div class="detail-box" v-if="detailBox">
            <!-- 包含了场所名称、阵地类型、交易人员姓名、手机号、身份证号码、物品名称、交易数量、交易金额、校验过程、交易物品图片等 -->
            <div class="detail-title-box">
                <div class="detail-title">阵地交易详情</div>
            </div>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">场所名称</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.placeName }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">场所负责人</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.principal }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">负责人电话</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.principalPhone }}</div>
                </el-col>
            </el-row>
            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">场所地址</div>
                </el-col>
                <el-col :span="18">
                    <div class="">{{ row.location }}</div>
                </el-col>
            </el-row>


            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">交易类型</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.labelName }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">交易对象</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.transactionObject }}</div>
                </el-col>
            </el-row>


            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">商品价格</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.transactionMoney }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">商品数量</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.goodsNums }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">交易人名称</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.owner }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">交易人电话</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.phoneNumber }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">交易人身份证</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.idCard }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">交易照片</div>
                </el-col>
                <el-col :span="18">
                    <div class="mini-code">
                        <el-image fit="contain" style="height: 100px;width: 100px;" :src="row.imageUrls"
                            :preview-src-list="[row.imageUrls]">
                            <div slot="error" class="image-slot"></div>
                        </el-image>
                    </div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">商品照片</div>
                </el-col>
                <el-col :span="18">
                    <div class="mini-code">
                        <el-image fit="contain" style="height: 100px;width: 100px;" :src="row.goodsImageUrls"
                            :preview-src-list="[row.goodsImageUrls]">
                            <div slot="error" class="image-slot"></div>
                        </el-image>
                    </div>
                </el-col>
            </el-row>

        </div>
      </el-table>
    </div>

    <!-- 详情页面 -->
    <el-dialog class="resident-details-box-details" :modal="false" :close-on-click-modal="false" :append-to-body="true"
      :visible.sync="detailBox">
      <div class="detail-box">
        <!-- 包含了场所名称、阵地类型、交易人员姓名、手机号、身份证号码、物品名称、交易数量、交易金额、校验过程、交易物品图片等 -->
        <div class="detail-title-box">
          <div class="detail-title">阵地交易详情</div>
          <div class="close" @click="detailBox = false" title="关闭"></div>
        </div>

        <div class="detail-content-box">
          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">场所名称</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.placeName }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">场所负责人</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.principal }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">负责人电话</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.principalPhone }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">场所地址</div>
            </el-col>
            <el-col :span="18">
              <div class="">{{ row.location }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">交易类型</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.labelName }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">交易对象</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.transactionObject }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">商品价格</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.transactionMoney }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">商品数量</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.goodsNums }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">交易人名称</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.owner }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">交易人电话</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.phoneNumber }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">交易人身份证</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.idCard }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">交易照片</div>
            </el-col>
            <el-col :span="18">
              <div class="mini-code">
                <el-image fit="contain" style="height: 100px;width: 100px;" :src="row.imageUrls"
                  :preview-src-list="[row.imageUrls]">
                  <div slot="error" class="image-slot"></div>
                </el-image>
              </div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">商品照片</div>
            </el-col>
            <el-col :span="18">
              <div class="mini-code">
                <el-image fit="contain" style="height: 100px;width: 100px;" :src="row.goodsImageUrls"
                  :preview-src-list="[row.goodsImageUrls]">
                  <div slot="error" class="image-slot"></div>
                </el-image>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {
    getTaskLabelReportingEventPage
  getTaskLabelReportingEventPage
} from "@/api/dept/newIndex.js"

export default {
    name: 'tableFromPop',
  name: 'tableFromPop',

    props: {
        hushiPeoTy: {
            type: String,
            default: ''
        },
  props: {
    hushiPeoTy: {
      type: String,
      default: ''
    },
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            row: {},
            detailBox: false,
            dataList: {
                total: 1,
                records: []
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      row: {},
      detailBox: false,
      dataList: {
        total: 1,
        records: []

            },
      },

        };
    }
  },
  //监听属性 类似于data概念
  computed: {
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    cellClick (row, column, cell, event) {
      row.imageUrls = this.getImgUrls(row.imageUrls)
      row.goodsImageUrls = this.getImgUrls(row.goodsImageUrls)
      this.row = row
      this.detailBox = !this.detailBox
      console.log('cellClick', row, column, cell, event)
    },
    //监听属性 类似于data概念
    computed: {
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        cellClick(row, column, cell, event) {
            row.imageUrls = this.getImgUrls(row.imageUrls)
            row.goodsImageUrls = this.getImgUrls(row.goodsImageUrls)
            this.row = row
            this.detailBox = !this.detailBox
            console.log('cellClick', row, column, cell, event)
        },
        // // 图片转换
        getImgUrls(imageUrls) {
            if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
                imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
                    // return 'http://10.141.11.11/place/' + ele
                    return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
                })
            }
            return imageUrls || []
        },

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        console.log('tableFromPop mounted', this.hushiPeoTy)
        // this.residentIdSave
        getTaskLabelReportingEventPage(123456).then((res) => {
            this.dataList.total = res.data.data.total
            this.dataList.records = res.data.data.records
    // // 图片转换
    getImgUrls (imageUrls) {
      if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
        imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
          // return 'http://10.141.11.11/place/' + ele
          return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
        })
      }
      return imageUrls || []
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        console.log('tableFromPop mounted', this.hushiPeoTy)
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发

  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    console.log('tableFromPop mounted', this.hushiPeoTy)
    // this.residentIdSave
    getTaskLabelReportingEventPage(123456).then((res) => {
      this.dataList.total = res.data.data.total
      this.dataList.records = res.data.data.records
    })
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    console.log('tableFromPop mounted', this.hushiPeoTy)
  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>


<style scoped lang="scss">
.table-box-w {
    // position: relative;
    // background-color: rgba(228, 17, 17, 0.5);

    .detail-box {
        height: 800px;
        position: absolute;
        right: -410px;
        top: -60%;
        background-color: rgba(35, 50, 167, 0.7);
        width: 400px;
        padding: 10px;

        .detail-title-box {
            margin-bottom: 10px;
            font-weight: bold;
            text-align: center;
        }
    }

    .detail-row {
        line-height: 40px;
        // text-align: left;
        // margin-left: 10px;
    }
  // position: relative;
  // background-color: rgba(228, 17, 17, 0.5);
}
</style>

 src/views/house/components/rentalHouse.vue

@@ -1,9 +1,9 @@
<!--  -->
<template>
    <div class="table-box-w">
        <div>
  <div class="table-box-w">
    <div class="list-box">

            <!-- <div class="btn-box-box">
      <!-- <div class="btn-box-box">
               
                <div class="btn-box">
                    <el-button :type="current == 1 ? 'primary' : ''" size="mini" @click="changeData(1)">出租屋</el-button>
@@ -16,436 +16,418 @@
                </div>
            </div> -->

            <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick" v-if="current == 1">
                <el-table-column align="center" prop="tenantName" label="租户名称"> </el-table-column>
                <el-table-column align="center" prop="phone" label="租户电话"> </el-table-column>
                <el-table-column align="center" prop="rentalTime" label="租房时间"> </el-table-column>
                <el-table-column align="center" prop="dueTime" label="到期时间"> </el-table-column>
                <el-table-column align="center" prop="houseStatus" label="租赁期限">
                    <template slot-scope="scope">
                        {{ scope.row.houseStatus == 1 ? '长期' : scope.row.houseStatus == 2 ? '中期' : '短期' }}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="houseName" show-overflow-tooltip label="房屋地址"> </el-table-column>
                <el-table-column align="center" prop="houseStatus" label="房屋状态">
                    <template slot-scope="scope">
                        {{ scope.row.houseStatus == 1 ? '部分出租' : '全部出租' }}
                    </template>
                </el-table-column>
            </el-table>
      <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick" v-if="current == 1">
        <el-table-column align="center" prop="tenantName" label="租户名称"> </el-table-column>
        <el-table-column align="center" prop="phone" label="租户电话"> </el-table-column>
        <el-table-column align="center" prop="rentalTime" label="租房时间"> </el-table-column>
        <el-table-column align="center" prop="dueTime" label="到期时间"> </el-table-column>
        <el-table-column align="center" prop="houseStatus" label="租赁期限">
          <template slot-scope="scope">
            {{ scope.row.houseStatus == 1 ? '长期' : scope.row.houseStatus == 2 ? '中期' : '短期' }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="houseName" show-overflow-tooltip label="房屋地址"> </el-table-column>
        <el-table-column align="center" prop="houseStatus" label="房屋状态">
          <template slot-scope="scope">
            {{ scope.row.houseStatus == 1 ? '部分出租' : '全部出租' }}
          </template>
        </el-table-column>
      </el-table>

            <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick" v-if="current == 2">
                <el-table-column align="center" prop="landlordName" label="名称"> </el-table-column>
                <el-table-column align="center" prop="landlordPhone" label="联系电话"> </el-table-column>
                <el-table-column align="center" prop="idCard" label="身份证号"> </el-table-column>
                <el-table-column align="center" prop="remak" label="申请事由"> </el-table-column>
                <el-table-column align="center" prop="createTime" label="申请时间"> </el-table-column>
                <el-table-column align="center" prop="minors" label="未成年">
                    <template slot-scope="scope">
                        {{ scope.row.minors == 1 ? '是' : '否' }}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="address" show-overflow-tooltip label="地址"> </el-table-column>
      <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick" v-if="current == 2">
        <el-table-column align="center" prop="landlordName" label="名称"> </el-table-column>
        <el-table-column align="center" prop="landlordPhone" label="联系电话"> </el-table-column>
        <el-table-column align="center" prop="idCard" label="身份证号"> </el-table-column>
        <el-table-column align="center" prop="remak" label="申请事由"> </el-table-column>
        <el-table-column align="center" prop="createTime" label="申请时间"> </el-table-column>
        <el-table-column align="center" prop="minors" label="未成年">
          <template slot-scope="scope">
            {{ scope.row.minors == 1 ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="address" show-overflow-tooltip label="地址"> </el-table-column>

                <!-- <el-table-column align="center" prop="confirmFlag" label="审核状态">
        <!-- <el-table-column align="center" prop="confirmFlag" label="审核状态">
                    <template slot-scope="scope">
                        {{ scope.row.confirmFlag == 2 ? '待审核' : '通过' }}
                    </template>
                </el-table-column> -->
            </el-table>
      </el-table>

            <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick" v-if="current == 3">
                <el-table-column align="center" prop="name" label="名称"> </el-table-column>
                <el-table-column align="center" prop="idCard" label="身份证号码"> </el-table-column>
                <el-table-column align="center" prop="gender" label="性别">
                    <template slot-scope="scope">
                        {{ scope.row.gender == 1 ? '男' : '女' }}
                    </template> </el-table-column>
                <el-table-column align="center" prop="phoneNumber" label="联系方式"> </el-table-column>
            </el-table>
      <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick" v-if="current == 3">
        <el-table-column align="center" prop="name" label="名称"> </el-table-column>
        <el-table-column align="center" prop="idCard" label="身份证号码"> </el-table-column>
        <el-table-column align="center" prop="gender" label="性别">
          <template slot-scope="scope">
            {{ scope.row.gender == 1 ? '男' : '女' }}
          </template> </el-table-column>
        <el-table-column align="center" prop="phoneNumber" label="联系方式"> </el-table-column>
      </el-table>

            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="dataList.total">
                </el-pagination>
            </div>
        </div>

        <!-- 详情页面 -->
        <div class="detail-box" v-if="detailBox">

            <div v-if="current == 1">
                <div class="detail-title-box">
                    <div class="detail-title">出租屋详情</div>
                </div>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">租户名称</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.tenantName }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">租户电话</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.phone }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">租房时间</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.rentalTime }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">到期时间</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.dueTime }}</div>
                    </el-col>
                </el-row>
                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">地址</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="">{{ row.houseName }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">租赁期限</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row"> {{ row.houseStatus == 1 ? '长期' : row.houseStatus == 2 ? '中期' :
                            '短期' }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">房屋状态</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row"> {{ row.houseStatus == 1 ? '部分出租' : '全部出租' }}</div>
                    </el-col>
                </el-row>

            </div>

            <div v-if="current == 2">
                <div class="detail-title-box">
                    <div class="detail-title">居住证申请详情</div>
                </div>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">姓名</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.landlordName }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">联系电话</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.landlordPhone }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">身份证号码</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.idCard }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">申请事由</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.remak }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">申请时间</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.createTime }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">未成年</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.injuryFlag == 1 ? '是' : '否' }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">审核状态</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.confirmFlag == 2 ? '待审核' : '通过' }}</div>
                    </el-col>
                </el-row>


                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">地址</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="">{{ row.address }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">经纬度</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.lng }},{{ row.lat }}</div>
                    </el-col>
                </el-row>
            </div>


            <div v-if="current == 3">
                <div class="detail-title-box">
                    <div class="detail-title">租客详情</div>
                </div>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">名称</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.name }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">身份证号码</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.idCard }}</div>
                    </el-col>
                </el-row>


                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">联系方式</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.phoneNumber }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">性别</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.gender == 1 ? '是' : '否' }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">经纬度</div>
                    </el-col>
                    <el-col :span="18">
                        <div class="detail-row">{{ row.lng }},{{ row.lat }}</div>
                    </el-col>
                </el-row>
            </div>


        </div>
      <div class="pages">
        <el-pagination background layout="prev, pager, next" :page-size="100" :total="dataList.total"
          :current-page="currentPage4" @current-change="handleCurrentChange"></el-pagination>
      </div>
    </div>

    <!-- 详情页面 -->
    <el-dialog class="resident-details-box-details" :modal="false" :close-on-click-modal="false" :append-to-body="true"
      :visible.sync="detailBox">
      <div class="detail-box">
        <template v-if="current == 1">
          <div class="detail-title-box">
            <div class="detail-title">出租屋详情</div>
            <div class="close" @click="detailBox = false" title="关闭"></div>
          </div>

          <div class="detail-content-box">
            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">租户名称</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.tenantName }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">租户电话</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.phone }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">租房时间</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.rentalTime }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">到期时间</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.dueTime }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">地址</div>
              </el-col>
              <el-col :span="18">
                <div class="">{{ row.houseName }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">租赁期限</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row"> {{ row.houseStatus == 1 ? '长期' : row.houseStatus == 2 ? '中期' :
                  '短期' }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">房屋状态</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row"> {{ row.houseStatus == 1 ? '部分出租' : '全部出租' }}</div>
              </el-col>
            </el-row>
          </div>
        </template>

        <template v-if="current == 2">
          <div class="detail-title-box">
            <div class="detail-title">居住证申请详情</div>
            <div class="close" @click="detailBox = false" title="关闭"></div>
          </div>

          <div class="detail-content-box">
            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">姓名</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.landlordName }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">联系电话</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.landlordPhone }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">身份证号码</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.idCard }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">申请事由</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.remak }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">申请时间</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.createTime }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">未成年</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.injuryFlag == 1 ? '是' : '否' }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">审核状态</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.confirmFlag == 2 ? '待审核' : '通过' }}</div>
              </el-col>
            </el-row>


            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">地址</div>
              </el-col>
              <el-col :span="18">
                <div class="">{{ row.address }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">经纬度</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.lng }},{{ row.lat }}</div>
              </el-col>
            </el-row>
          </div>
        </template>

        <template v-if="current == 3">
          <div class="detail-title-box">
            <div class="detail-title">租客详情</div>
            <div class="close" @click="detailBox = false" title="关闭"></div>
          </div>

          <div class="detail-content-box">
            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">名称</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.name }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">身份证号码</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.idCard }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">联系方式</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.phoneNumber }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">性别</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.gender == 1 ? '是' : '否' }}</div>
              </el-col>
            </el-row>

            <el-row class="">
              <el-col :span="6">
                <div class="detail-row">经纬度</div>
              </el-col>
              <el-col :span="18">
                <div class="detail-row">{{ row.lng }},{{ row.lat }}</div>
              </el-col>
            </el-row>
          </div>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {
    getHouseRentalPage,
    geTaskResidencePermitApplyPage,
    getTenantPage
  getHouseRentalPage,
  geTaskResidencePermitApplyPage,
  getTenantPage
} from "@/api/dept/newIndex.js"
export default {
    name: 'tableFromPop',
  name: 'tableFromPop',

    props: {
        hushiPeoTy: {
            type: String,
            default: ''
        },
  props: {
    hushiPeoTy: {
      type: String,
      default: ''
    },
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            row: {},
            current: 1,
            detailBox: false,
            dataList: {
                total: 1,
                records: []
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      row: {},
      current: 1,
      detailBox: false,
      dataList: {
        total: 1,
        records: []

            },
            pageparm: {
                pageSize: 10,
                current: 1
            }
      },
      pageparm: {
        pageSize: 10,
        current: 1
      }

        };
    }
  },
  //监听属性 类似于data概念
  computed: {
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageparm.pageSize = val
      this.changeData(this.current)
    },
    //监听属性 类似于data概念
    computed: {
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageparm.pageSize = val
            this.changeData(this.current)
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageparm.current = val
            this.changeData(this.current)

        },
        changeData(type) {
            this.current = type
            this.detailBox = false
            if (type == 1) {
                getHouseRentalPage('a1', this.pageparm.pageSize, this.pageparm.current).then((res) => {
                    this.dataList.total = res.data.data.total
                    this.dataList.records = res.data.data.records
                })
            } else if (type == 2) {
                geTaskResidencePermitApplyPage(2, 'a1', this.pageparm.pageSize, this.pageparm.current).then((res) => {
                    this.dataList.total = res.data.data.total
                    this.dataList.records = res.data.data.records
                })
            } else if (type == 3) {
                getTenantPage(1, 'a1', this.pageparm.pageSize, this.pageparm.current).then((res) => {
                    this.dataList.total = res.data.data.total
                    this.dataList.records = res.data.data.records
                })

            }
        },
        init() {
            getHouseRentalPage('a1', this.pageparm.pageSize, this.pageparm.current).then((res) => {
                this.dataList.total = res.data.data.total
                this.dataList.records = res.data.data.records
            })
        },
        cellClick(row, column, cell, event) {
            row.employerImg = this.getImgUrls(row.employerImg)
            this.row = row
            this.detailBox = !this.detailBox
            console.log('cellClick', row, column, cell, event)
        },
        // // 图片转换
        getImgUrls(imageUrls) {
            if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
                imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
                    // return 'http://10.141.11.11/place/' + ele
                    return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
                })
            }
            return imageUrls || []
        },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pageparm.current = val
      this.changeData(this.current)

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        console.log('tableFromPop mounted', this.hushiPeoTy)
    changeData (type) {
      this.current = type
      this.detailBox = false
      if (type == 1) {
        getHouseRentalPage('a1', this.pageparm.pageSize, this.pageparm.current).then((res) => {
          this.dataList.total = res.data.data.total
          this.dataList.records = res.data.data.records
        })
      } else if (type == 2) {
        geTaskResidencePermitApplyPage(2, 'a1', this.pageparm.pageSize, this.pageparm.current).then((res) => {
          this.dataList.total = res.data.data.total
          this.dataList.records = res.data.data.records
        })
      } else if (type == 3) {
        getTenantPage(1, 'a1', this.pageparm.pageSize, this.pageparm.current).then((res) => {
          this.dataList.total = res.data.data.total
          this.dataList.records = res.data.data.records
        })

      }
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        console.log('tableFromPop mounted', this.hushiPeoTy)
        this.init()
    init () {
      getHouseRentalPage('a1', this.pageparm.pageSize, this.pageparm.current).then((res) => {
        this.dataList.total = res.data.data.total
        this.dataList.records = res.data.data.records
      })
    },
    cellClick (row, column, cell, event) {
      row.employerImg = this.getImgUrls(row.employerImg)
      this.row = row
      this.detailBox = !this.detailBox
      console.log('cellClick', row, column, cell, event)
    },
    // // 图片转换
    getImgUrls (imageUrls) {
      if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
        imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
          // return 'http://10.141.11.11/place/' + ele
          return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
        })
      }
      return imageUrls || []
    },

    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    console.log('tableFromPop mounted', this.hushiPeoTy)

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    console.log('tableFromPop mounted', this.hushiPeoTy)
    this.init()

  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>


<style scoped lang="scss">
.table-box-w {
    // position: relative;
    // background-color: rgba(228, 17, 17, 0.5);
  // position: relative;
  // background-color: rgba(228, 17, 17, 0.5);

    .btn-box-box {
        display: flex;
  .btn-box-box {
    display: flex;

        .btn-box {
            margin: 2px 5px;
        }
    .btn-box {
      margin: 2px 5px;
    }

    .detail-box {
        height: 700px;
        position: absolute;
        right: -410px;
        top: -70%;
        background-color: rgba(35, 50, 167, 0.7);
        width: 400px;
        padding: 10px;

        .detail-title-box {
            margin-bottom: 10px;
            font-weight: bold;
            text-align: center;
        }
    }

    .detail-row {
        line-height: 40px;
        // text-align: left;
        // margin-left: 10px;

    }
  }
}
</style>

 src/views/house/components/scanCodeAlarm.vue

@@ -1,216 +1,196 @@
<!--  -->
<template>
    <div class="table-box-w">
        <div>
            <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick">
                <!-- 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等。 -->
                <el-table-column align="center" prop="policeName" label="民警"> </el-table-column>
                <el-table-column align="center" prop="pcsName" label="单位"> </el-table-column>
                <el-table-column align="center" prop="createTime" label="报警时间"> </el-table-column>
                <el-table-column align="center" prop="address" show-overflow-tooltip label="地址"> </el-table-column>
                <el-table-column align="center" prop="injuryFlag" label="是否受伤">
                    <template slot-scope="scope">
                        {{ scope.row.injuryFlag == 1 ? '是' : '否' }}
                    </template>
                </el-table-column>
            </el-table>
  <div class="table-box-w">
    <div class="list-box">
      <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick">
        <!-- 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等。 -->
        <el-table-column align="center" prop="policeName" label="民警"> </el-table-column>
        <el-table-column align="center" prop="pcsName" label="单位"> </el-table-column>
        <el-table-column align="center" prop="createTime" label="报警时间"> </el-table-column>
        <el-table-column align="center" prop="address" show-overflow-tooltip label="地址"> </el-table-column>
        <el-table-column align="center" prop="injuryFlag" label="是否受伤">
          <template slot-scope="scope">
            {{ scope.row.injuryFlag == 1 ? '是' : '否' }}
          </template>
        </el-table-column>
      </el-table>

            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="dataList.total">
                </el-pagination>
            </div>
        </div>

        <!-- 详情页面 -->
        <div class="detail-box" v-if="detailBox">
            <!-- popelList[0]  详情页面 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等-->
            <div class="detail-title-box">
                <div class="detail-title">扫码报警详情</div>
            </div>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">民警</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.policeName }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">单位</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.pcsName }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">是否受伤</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.gender == 1 ? '是' : '否' }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">报警时间</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.createTime }}</div>
                </el-col>
            </el-row>
            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">地址</div>
                </el-col>
                <el-col :span="18">
                    <div class="">{{ row.address }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">经纬度</div>
                </el-col>
                <el-col :span="18">
                    <div class="detail-row">{{ row.longitude }},{{ row.latitude }}</div>
                </el-col>
            </el-row>


        </div>
      <div class="pages">
        <el-pagination background layout="prev, pager, next" :page-size="100" :total="dataList.total"
          :current-page="currentPage4" @current-change="handleCurrentChange"></el-pagination>
      </div>
    </div>

    <!-- 详情页面 -->
    <el-dialog class="resident-details-box-details" :modal="false" :close-on-click-modal="false" :append-to-body="true"
      :visible.sync="detailBox">
      <div class="detail-box">
        <!-- popelList[0]  详情页面 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等-->
        <div class="detail-title-box">
          <div class="detail-title">扫码报警详情</div>
          <div class="close" @click="detailBox = false" title="关闭"></div>
        </div>

        <div class="detail-content-box">
          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">民警</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.policeName }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">单位</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.pcsName }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">是否受伤</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.gender == 1 ? '是' : '否' }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">报警时间</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.createTime }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">地址</div>
            </el-col>
            <el-col :span="18">
              <div class="">{{ row.address }}</div>
            </el-col>
          </el-row>

          <el-row class="">
            <el-col :span="6">
              <div class="detail-row">经纬度</div>
            </el-col>
            <el-col :span="18">
              <div class="detail-row">{{ row.longitude }},{{ row.latitude }}</div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {
    getPoliceAlarmRecordsPage
  getPoliceAlarmRecordsPage
} from "@/api/dept/newIndex.js"
export default {
    name: 'tableFromPop',
  name: 'tableFromPop',

    props: {
        hushiPeoTy: {
            type: String,
            default: ''
        },
  props: {
    hushiPeoTy: {
      type: String,
      default: ''
    },
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            row: {},
            detailBox: false,
            dataList: {
                total: 1,
                records: []
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      row: {},
      detailBox: false,
      dataList: {
        total: 1,
        records: []

            },
            pageparm: {
                pageSize: 10,
                current: 1
            }
      },
      pageparm: {
        pageSize: 10,
        current: 1
      }

        };
    }
  },
  //监听属性 类似于data概念
  computed: {
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageparm.pageSize = val
      this.init()
    },
    //监听属性 类似于data概念
    computed: {
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageparm.pageSize = val
            this.init()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageparm.current = val
            this.init()

        },
        init() {
            getPoliceAlarmRecordsPage(123456, this.pageparm.pageSize, this.pageparm.current).then((res) => {
                this.dataList.total = res.data.data.total
                this.dataList.records = res.data.data.records
            })
        },
        cellClick(row, column, cell, event) {
            row.employerImg = this.getImgUrls(row.employerImg)
            this.row = row
            this.detailBox = !this.detailBox
            console.log('cellClick', row, column, cell, event)
        },
        // // 图片转换
        getImgUrls(imageUrls) {
            if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
                imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
                    // return 'http://10.141.11.11/place/' + ele
                    return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
                })
            }
            return imageUrls || []
        },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pageparm.current = val
      this.init()

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        console.log('tableFromPop mounted', this.hushiPeoTy)

    init () {
      getPoliceAlarmRecordsPage(123456, this.pageparm.pageSize, this.pageparm.current).then((res) => {
        this.dataList.total = res.data.data.total
        this.dataList.records = res.data.data.records
      })
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        console.log('tableFromPop mounted', this.hushiPeoTy)
        this.init()

    cellClick (row, column, cell, event) {
      row.employerImg = this.getImgUrls(row.employerImg)
      this.row = row
      this.detailBox = !this.detailBox
      console.log('cellClick', row, column, cell, event)
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
    // // 图片转换
    getImgUrls (imageUrls) {
      if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
        imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
          // return 'http://10.141.11.11/place/' + ele
          return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
        })
      }
      return imageUrls || []
    },

  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    console.log('tableFromPop mounted', this.hushiPeoTy)

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    console.log('tableFromPop mounted', this.hushiPeoTy)
    this.init()

  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>


<style scoped lang="scss">
.table-box-w {
    // position: relative;
    // background-color: rgba(228, 17, 17, 0.5);

    .detail-box {
        height: 700px;
        position: absolute;
        right: -410px;
        top: -70%;
        background-color: rgba(35, 50, 167, 0.7);
        width: 400px;
        padding: 10px;

        .detail-title-box {
            margin-bottom: 10px;
            font-weight: bold;
            text-align: center;
        }
    }

    .detail-row {
        line-height: 40px;
        // text-align: left;
        // margin-left: 10px;

    }
  // position: relative;
  // background-color: rgba(228, 17, 17, 0.5);
}
</style>