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

shuishen

2024-12-18 b6fe0d66cd2b1349d357d0a105300fe2ac3b7bc0

 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>