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

shuishen

2024-12-18 b6fe0d66cd2b1349d357d0a105300fe2ac3b7bc0

 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>