扫码报警页面模型遮挡图标处理 默认显示影像+轻量处理 阵地管理页面模型遮挡图标处理 从业人员页面模型遮挡图标处理 群众上报页面模型遮挡图标处理 九小场...

shuishen

2024-12-09 d75e47f5a8d2df158a3dd33b7b598a97854ea1df

 src/views/scanOrCode/index.vue

@@ -10,102 +10,100 @@
-->

<template>
    <div class="police-page container scan-or-code-page">
        <div v-show="boxShow" class="container-content" ref="containerContent">
            <div class="time-select" ref="timeSelect">
  <div class="police-page container scan-or-code-page">
    <div v-show="boxShow" class="container-content" ref="containerContent">
      <div class="time-select" ref="timeSelect">

                <div class="search-item-box">
                    <span>登记类型：</span>
        <div class="search-item-box">
          <span>登记类型：</span>

                    <el-select style="flex: 1;" size="small" v-model="typeValue" @change="typeChange" placeholder="请选择">
                        <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </div>

                <div class="search-item-box">
                    <span>关键字：</span>

                    <el-input style="flex: 1;" size="small" :placeholder="placeholder" v-model="searchKey"
                        clearable></el-input>
                </div>

                <div class="search-item-box" style="justify-content: center;">
                    <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
                    <el-button @click="clearRow" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
                </div>
            </div>

            <div class="list police-info" ref="tableBox">
                <el-table :data="tableData" style="width: 100%" :height="currentTableHeight"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
                    :row-class-name="tableRowClassName" class="police-infor-table">
                    <!-- 业主租客登记 -->
                    <el-table-column prop="name" :show-overflow-tooltip="true" label="姓名" v-if="typeValue == 1"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="phone" :show-overflow-tooltip="true" label="手机号" v-if="typeValue == 1"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="idCardNumber" :show-overflow-tooltip="true" label="身份证号" v-if="typeValue == 1"
                        :key="Math.random()"></el-table-column>
                    <!-- <el-table-column prop="address" :show-overflow-tooltip="true" label="住址" v-if="typeValue == 1"
                        :key="Math.random()"></el-table-column> -->
                    <!-- 同住登记 -->
                    <el-table-column prop="name" :show-overflow-tooltip="true" label="姓名" v-if="typeValue == 2"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="phone" :show-overflow-tooltip="true" label="手机号" v-if="typeValue == 2"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="idCardNumber" :show-overflow-tooltip="true" label="身份证号" v-if="typeValue == 2"
                        :key="Math.random()"></el-table-column>
                    <!-- <el-table-column prop="address" :show-overflow-tooltip="true" label="住址" v-if="typeValue == 2"
                        :key="Math.random()"></el-table-column>  -->
                    <!-- 信息登记 -->
                    <el-table-column prop="name" :show-overflow-tooltip="true" label="姓名" v-if="typeValue == 3"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="phone" :show-overflow-tooltip="true" label="手机号" v-if="typeValue == 3"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="idCard" :show-overflow-tooltip="true" label="身份证号" v-if="typeValue == 3"
                        :key="Math.random()"></el-table-column>
                    <!-- <el-table-column prop="address" :show-overflow-tooltip="true" label="住址" v-if="typeValue == 3"
                        :key="Math.random()"></el-table-column> -->
                    <!-- 企业登记 -->
                    <el-table-column prop="companyName" :show-overflow-tooltip="true" label="企业名称" v-if="typeValue == 4"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="empName" :show-overflow-tooltip="true" label="姓名" v-if="typeValue == 4"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="empIdCard" :show-overflow-tooltip="true" label="身份证" v-if="typeValue == 4"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="stdAddress" :show-overflow-tooltip="true" label="住址" v-if="typeValue == 4"
                        :key="Math.random()"></el-table-column>
                    <!-- 扫码上报 -->
                    <el-table-column prop="reportName" :show-overflow-tooltip="true" label="上报人" v-if="typeValue == 5"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="exceptionTypeName" :show-overflow-tooltip="true" label="门牌异常类型"
                        v-if="typeValue == 5" :key="Math.random()"></el-table-column>
                    <el-table-column prop="phone" :show-overflow-tooltip="true" label="联系电话" v-if="typeValue == 5"
                        :key="Math.random()"></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" title="定位" :disabled="positionDisabled(scope.row)"
                                @click="rowClick(scope.row)">
                                <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
                            </el-button>
                            <el-button type="text" size="small" title="详情" @click="goDetail(scope.row)">
                                <i class="el-icon-document"  style="color:#66b1ff"></i>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pages all-pagination-sty" ref="tablePagination" style="padding-top:-15px">
                    <el-pagination background layout="prev, pager, next" :page-size="pages.pageSize" :total="pages.total"
                        :pager-count="4" :current-page="pages.currentPage"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
          <el-select style="flex: 1;" size="small" v-model="typeValue" @change="typeChange" placeholder="请选择">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </div>
        <detailsPopup ref="detailsPopup" :popupTile="popupTile"></detailsPopup>

        <div class="search-item-box">
          <span>关键字：</span>

          <el-input style="flex: 1;" size="small" :placeholder="placeholder" v-model="searchKey" clearable></el-input>
        </div>

        <div class="search-item-box" style="justify-content: center;">
          <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
          <el-button @click="clearRow" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
        </div>
      </div>

      <div class="list police-info" ref="tableBox">
        <el-table :data="tableData" style="width: 100%" :height="currentTableHeight"
          :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
          :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
          :row-class-name="tableRowClassName" class="police-infor-table">
          <!-- 业主租客登记 -->
          <el-table-column prop="name" :show-overflow-tooltip="true" label="姓名" v-if="typeValue == 1"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="phone" :show-overflow-tooltip="true" label="手机号" v-if="typeValue == 1"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="idCardNumber" :show-overflow-tooltip="true" label="身份证号" v-if="typeValue == 1"
            :key="Math.random()"></el-table-column>
          <!-- <el-table-column prop="address" :show-overflow-tooltip="true" label="住址" v-if="typeValue == 1"
                        :key="Math.random()"></el-table-column> -->
          <!-- 同住登记 -->
          <el-table-column prop="name" :show-overflow-tooltip="true" label="姓名" v-if="typeValue == 2"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="phone" :show-overflow-tooltip="true" label="手机号" v-if="typeValue == 2"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="idCardNumber" :show-overflow-tooltip="true" label="身份证号" v-if="typeValue == 2"
            :key="Math.random()"></el-table-column>
          <!-- <el-table-column prop="address" :show-overflow-tooltip="true" label="住址" v-if="typeValue == 2"
                        :key="Math.random()"></el-table-column>  -->
          <!-- 信息登记 -->
          <el-table-column prop="name" :show-overflow-tooltip="true" label="姓名" v-if="typeValue == 3"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="phone" :show-overflow-tooltip="true" label="手机号" v-if="typeValue == 3"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="idCard" :show-overflow-tooltip="true" label="身份证号" v-if="typeValue == 3"
            :key="Math.random()"></el-table-column>
          <!-- <el-table-column prop="address" :show-overflow-tooltip="true" label="住址" v-if="typeValue == 3"
                        :key="Math.random()"></el-table-column> -->
          <!-- 企业登记 -->
          <el-table-column prop="companyName" :show-overflow-tooltip="true" label="企业名称" v-if="typeValue == 4"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="empName" :show-overflow-tooltip="true" label="姓名" v-if="typeValue == 4"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="empIdCard" :show-overflow-tooltip="true" label="身份证" v-if="typeValue == 4"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="stdAddress" :show-overflow-tooltip="true" label="住址" v-if="typeValue == 4"
            :key="Math.random()"></el-table-column>
          <!-- 扫码上报 -->
          <el-table-column prop="reportName" :show-overflow-tooltip="true" label="上报人" v-if="typeValue == 5"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="exceptionTypeName" :show-overflow-tooltip="true" label="门牌异常类型" v-if="typeValue == 5"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="phone" :show-overflow-tooltip="true" label="联系电话" v-if="typeValue == 5"
            :key="Math.random()"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" title="定位" :disabled="positionDisabled(scope.row)"
                @click="rowClick(scope.row)">
                <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
              </el-button>
              <el-button type="text" size="small" title="详情" @click="goDetail(scope.row)">
                <i class="el-icon-document" style="color:#66b1ff"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pages all-pagination-sty" ref="tablePagination" style="padding-top:-15px">
          <el-pagination background layout="prev, pager, next" :page-size="pages.pageSize" :total="pages.total"
            :pager-count="4" :current-page="pages.currentPage" @current-change="handleCurrentChange"></el-pagination>
        </div>
      </div>
    </div>
    <detailsPopup ref="detailsPopup" :popupTile="popupTile"></detailsPopup>
  </div>
</template>

<script>
@@ -115,734 +113,737 @@
let loading = null

export default {
    inject: ['userInfo'],
  inject: ['userInfo'],

    data () {
        return {
            placeholder: '请输入（姓名、手机号、身份证号、住址）',
            popupTile: '详情信息',
            searchKey: '',
            realEmptyText: "",
            currentTableHeight: 0,
            tableData: [],
  data () {
    return {
      placeholder: '请输入（姓名、手机号、身份证号、住址）',
      popupTile: '详情信息',
      searchKey: '',
      realEmptyText: "",
      currentTableHeight: 0,
      tableData: [],

            boxShow: false,
      boxShow: false,

            pages: {
                total: 0,
                pageSize: 22,
                count: 0,
                currentPage: 1
            },
      pages: {
        total: 0,
        pageSize: 22,
        count: 0,
        currentPage: 1
      },

            typeValue: '1',
            typeOptions: [
                {
                    value: '1',
                    label: '业主租客登记'
                },
                {
                    value: '2',
                    label: '同住登记'
                },
                {
                    value: '3',
                    label: '信息登记'
                },
                {
                    value: '4',
                    label: '企业登记'
                },
                {
                    value: '5',
                    label: '扫码上报'
                }
            ],
      typeValue: '1',
      typeOptions: [
        {
          value: '1',
          label: '业主租客登记'
        },
        {
          value: '2',
          label: '同住登记'
        },
        {
          value: '3',
          label: '信息登记'
        },
        {
          value: '4',
          label: '企业登记'
        },
        {
          value: '5',
          label: '扫码上报'
        }
    },

    created () {
        const that = this

        that.$nextTick(() => {
            initMapPosition()
            that.getList()
        })
    },

    mounted () {
        this.$parent.$parent.resize('400px', true)

        this.$nextTick(() => {
            this.$EventBus.$emit('closeMxTileset')

            this.setTableHeight()
        })

        window.addEventListener('resize', this.setTableHeight)
    },

    computed: {
        positionColor () {
            return (row) => {
                if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
                    return "#1AFA29"
                } else {
                    return "#ccc"
                }
            }
        },

        positionDisabled () {
            return (row) => {
                if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
                    return false
                } else {
                    return true
                }
            }
        },
    },

    methods: {
        // 根据类型获取数据--暂时为测试数据
        getRowData (row) {
            let data = []
            if (this.typeValue == 1) {
                data = [
                    {
                        label: '名字',
                        prop: 'name',
                        value: row.name,
                        type: 'popup'
                    },
                    {
                        label: '性别',
                        prop: 'gender',
                        value: row.gender == 1 ? '男' : '女',
                        type: 'popup'
                    },
                    {
                        label: '身份证号',
                        prop: 'idCardNumber',
                        value: row.idCardNumber,
                        type: 'popup'
                    },
                    {
                        label: '联系电话',
                        prop: 'phone',
                        value: row.phone,
                        type: 'popup'
                    },
                    {
                        label: '住户类型',
                        prop: 'type',
                        value: row.type == 1 ? '业主' : '租客',
                        type: 'popup'
                    },
                    {
                        label: '出生年月',
                        prop: 'birth',
                        value: row.birth,
                        type: 'detail'
                    },
                    {
                        label: '民族',
                        prop: 'nation',
                        value: row.nation,
                        type: 'detail'
                    },
                    {
                        label: '房屋地址',
                        prop: 'address',
                        value: row.address,
                        type: 'detail'
                    }
                ]
            } else if (this.typeValue == 2) {
                data = [
                    {
                        label: '名字',
                        prop: 'name',
                        value: row.name,
                        type: 'popup'
                    },
                    {
                        label: '性别',
                        prop: 'gender',
                        value: row.gender == 1 ? '男' : '女',
                        type: 'popup'
                    },
                    {
                        label: '身份证号',
                        prop: 'idCardNumber',
                        value: row.idCardNumber,
                        type: 'popup'
                    },
                    {
                        label: '联系电话',
                        prop: 'phone',
                        value: row.phone,
                        type: 'popup'
                    },
                    {
                        label: '住户类型',
                        prop: 'type',
                        value: row.type == 1 ? '业主' : '租客',
                        type: 'popup'
                    },
                    {
                        label: '是否成年',
                        prop: 'isAdult',
                        value: row.isAdult == 1 ? '是' : '否',
                        type: 'detail'
                    },
                    {
                        label: '出生年月',
                        prop: 'birth',
                        value: row.birth,
                        type: 'detail'
                    },
                    {
                        label: '民族',
                        prop: 'nation',
                        value: row.nation,
                        type: 'detail'
                    },
                    {
                        label: '房屋地址',
                        prop: 'address',
                        value: row.address,
                        type: 'detail'
                    }
                ]
            } else if (this.typeValue == 3) {
                data = [
                    {
                        label: '名字',
                        prop: 'name',
                        value: row.name,
                        type: 'popup'
                    },
                    {
                        label: '身份证号',
                        prop: 'idCard',
                        value: row.idCard,
                        type: 'popup'
                    },
                    {
                        label: '联系方式',
                        prop: 'phone',
                        value: row.phone,
                        type: 'popup'
                    },
                    {
                        label: '常用地址',
                        prop: 'commonUseAddress',
                        value: row.commonUseAddress,
                        type: 'popup'
                    },
                    {
                        label: '户籍地址',
                        prop: 'domicileAddress',
                        value: row.domicileAddress,
                        type: 'detail'
                    },
                    {
                        label: '审核状态',
                        prop: 'auditStatus',
                        value: row.auditStatus,
                        type: 'detail'
                    },
                    {
                        label: '人员类型',
                        prop: 'personType',
                        value: row.personType,
                        type: 'popup'
                    },
                    {
                        label: '操作类型',
                        prop: 'operateType',
                        value: row.operateType == 1 ? '扫码录入' : '人工录入',
                        type: 'detail'
                    },
                    {
                        label: '审核时间',
                        prop: 'auditTime',
                        value: row.auditTime,
                        type: 'detail'
                    },
                    {
                        label: '文字描述',
                        prop: 'descriptionText',
                        value: row.descriptionText,
                        type: 'detail'
                    },
                    {
                        label: '备注',
                        prop: 'remark',
                        value: row.remark,
                        type: 'detail'
                    },
                    {
                        label: '登记人',
                        prop: 'createPerson',
                        value: row.createPerson,
                        type: 'detail'
                    },
                    {
                        label: '审核人',
                        prop: 'auditPerson',
                        value: row.auditPerson,
                        type: 'detail'
                    }
                ]
            } else if (this.typeValue == 4) {
                data = [
                    {
                        label: '企业名称',
                        prop: 'companyName',
                        value: row.companyName,
                        type: 'popup'
                    },
                    {
                        label: '岗位名称',
                        prop: 'position',
                        value: row.position,
                        type: 'popup'
                    },
                    {
                        label: '员工姓名',
                        prop: 'empName',
                        value: row.empName,
                        type: 'popup'
                    },
                    {
                        label: '员工性别',
                        prop: 'empSex',
                        value: row.empSex == 1 ? '女' : '男',
                        type: 'popup'
                    },
                    {
                        label: '员工身份证号',
                        prop: 'empIdCard',
                        value: row.empIdCard,
                        type: 'popup'
                    },
                    {
                        label: '员工联系电话',
                        prop: 'empPhone',
                        value: row.empPhone,
                        type: 'popup'
                    },
                    {
                        label: '备注',
                        prop: 'remark',
                        value: row.remark,
                        type: 'detail'
                    },
                    {
                        label: '创建时间',
                        prop: 'createTime',
                        value: row.createTime,
                        type: 'detail'
                    },
                    {
                        label: '创建人',
                        prop: 'createBy',
                        value: row.createBy,
                        type: 'detail'
                    },
                    {
                        label: '更新时间',
                        prop: 'updateTime',
                        value: row.updateTime,
                        type: 'detail'
                    },
                    {
                        label: '更新人',
                        prop: 'updateBy',
                        value: row.updateBy,
                        type: 'detail'
                    }
                ]
            } else if (this.typeValue == 5) {
                data = [
                    {
                        label: '异常类型',
                        prop: 'exception_type_name',
                        value: row.exceptionTypeName,
                        type: 'popup'
                    },
                    {
                        label: '异常描述',
                        prop: 'exception_description',
                        value: row.exceptionDescription,
                        type: 'popup'
                    },
                    {
                        label: '上报人名称',
                        prop: 'report_name',
                        value: row.reportName,
                        type: 'popup'
                    },
                    {
                        label: '上报用户类型',
                        prop: 'reportor_type_name',
                        value: row.reportorTypeName,
                        type: 'detail'
                    },
                    {
                        label: '上报时间',
                        prop: 'report_time',
                        value: row.reportTime,
                        type: 'popup'
                    },
                    {
                        label: '上报来源',
                        prop: 'report_source',
                        value: row.reportSource,
                        type: 'popup'
                    },
                    {
                        label: '联系电话',
                        prop: 'phone',
                        value: row.phone,
                        type: 'detail'
                    },
                    {
                        label: '地址',
                        prop: 'std_address',
                        value: row.stdAddress.replace('江西省上饶市', ''),
                        type: 'popup'
                    },
                    {
                        label: '处理人名称',
                        prop: 'resolve_by_name',
                        value: row.resolveByName,
                        type: 'detail'
                    },
                    {
                        label: '处理状态',
                        prop: 'resolve_status',
                        value: row.resolveStatus,
                        type: 'popup'
                    },
                    {
                        label: '处理时间',
                        prop: 'resolve_time',
                        value: row.resolveTime,
                        type: 'popup'
                    },
                    {
                        label: '处理意见',
                        prop: 'resolve_msg',
                        value: row.resolve_msg,
                        type: 'detail'
                    },
                    {
                        label: '采集经度',
                        prop: 'photo_lat',
                        value: row.x,
                        type: 'detail'
                    },
                    {
                        label: '采集纬度',
                        prop: 'photo_lng',
                        value: row.y,
                        type: 'detail'
                    },
                ]
            }
            return data
        },

        // 点击详情
        goDetail (row) {
            const typeLabel = this.typeOptions.find(e => e.value == this.typeValue).label
            this.popupTile = `详情信息（${typeLabel}）`
            let data = this.getRowData(row)
            this.$refs.detailsPopup.initOpen(data)
        },

        // 点击定位
        rowClick (row) {
            let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.x, row.y)[0]
            let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.x, row.y)[1]

            this.$EventBus.$emit('toPosition', {
                siteJd: lng,
                siteWd: lat,
                siteGd: 2000
            })
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'scanLayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'scanLayer',
                type: "billboard",
                params: {
                    ...row,
                    lng: lng,
                    lat: lat,
                    alt: 1,
                    url: `/img/icon/location.png`
                },
            })
            let data = this.getRowData(row)
            this.$store.commit('SET_DIALOGDETAILPOPUP', true)

            this.$store.commit('SET_DIALOGDETAILPOPUPDATA', data)
            // 商业模拟数据
            var dialogDetailPopup = new global.DC.DivForms(global.viewer, {
                domId: 'dialogDetailPopup',
                position: [
                    global.DC.Transform.transformWGS84ToCartesian(
                        new global.DC.Position(
                            Number(lng),
                            Number(lat),
                            0
                        )
                    )
                ]
            })
        },

        // 清空按钮-清除图标图层
        clearRow () {
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'scanLayer',
                type: 'VectorLayer'
            })
            this.$store.commit('SET_DIALOGDETAILPOPUP', false)
        },

        // 获取列表
        getList () {
            this.loading()
            let params = {
                searchKey: this.searchKey,
                size: this.pages.pageSize,
                current: this.pages.currentPage
            }
            if (this.typeValue == 1) {//业主租客登记
                this.getAppOwerRenterRegistrantList(params)
            } else if (this.typeValue == 2) {//同住登记
                this.getAppOwerRenterRegistrantCohabitList(params)
            } else if (this.typeValue == 3) {//信息登记
                this.getAppRegisterInfoList(params)
            } else if (this.typeValue == 4) {//企业登记
                this.getAppEmploymentRegistrationList(params)
            } else if (this.typeValue == 5) {//扫码上报
                this.getAddressManageList(params)
            }
        },

        searchBtn () {
            this.pages.currentPage = 1
            this.getList()
        },

        // 分页处理
        handleCurrentChange (currentPage) {
            this.pages.currentPage = currentPage
            this.getList()
        },

        // 加载动画
        loading () {
            loading = this.$loading({
                lock: true,
                text: '拼命加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.5)'
            })
        },

        // 切换登记类型
        typeChange () {
            if (this.typeValue == 1 || this.typeValue == 2) {
                this.placeholder = '请输入（姓名、手机号、身份证号、住址）'
            } else if (this.typeValue == 3) {
                this.placeholder = '请输入（姓名、手机号、身份证号、住址）'
            } else if (this.typeValue == 4) {
                this.placeholder = '请输入（企业名称、姓名、身份证、住址）'
            } else if (this.typeValue == 5) {
                this.placeholder = '请输入（上报人、门牌异常类型、联系电话）'
            }
            this.pages.currentPage = 1
            this.getList()
            this.clearRow()
        },

        //业主租客登记列表数据
        getAppOwerRenterRegistrantList (params) {
            getAppOwerRenterRegistrantList(params).then(res => {
                this.tableData = res.data.data.records
                this.pages.total = res.data.data.total
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            }).catch(error => {
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            })
        },

        //同住登记列表数据
        getAppOwerRenterRegistrantCohabitList (params) {
            getAppOwerRenterRegistrantCohabitList(params).then(res => {
                this.tableData = res.data.data.records
                this.pages.total = res.data.data.total
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            }).catch(error => {
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            })
        },

        //信息登记列表数据
        getAppRegisterInfoList (params) {
            getAppRegisterInfoList(params).then(res => {
                if (res.data.data.records.length > 0) {
                    res.data.data.records.forEach(item => {
                        if (item.auditStatus == 0) {
                            item.auditStatus = '未审核'
                        } else if (item.auditStatus == 1) {
                            item.auditStatus = '已通过'
                        } else if (item.auditStatus == 2) {
                            item.auditStatus = '已驳回'
                        }
                    })
                }
                this.tableData = res.data.data.records
                this.pages.total = res.data.data.total
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            }).catch(error => {
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            })
        },

        //企业登记列表数据
        getAppEmploymentRegistrationList (params) {
            getAppEmploymentRegistrationList(params).then(res => {
                this.tableData = res.data.data.records
                this.pages.total = res.data.data.total
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            }).catch(error => {
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            })
        },

        // 扫码上报列表数据
        getAddressManageList (params) {
            getAddressManageList(params).then(res => {
                if (res.data.data.records.length > 0) {
                    res.data.data.records.forEach(item => {
                        if (item.resolveStatus == 0) {
                            item.resolveStatus = '待审核'
                        } else if (item.resolveStatus == 1) {
                            item.resolveStatus = '已通过'
                        } else if (item.resolveStatus == 2) {
                            item.resolveStatus = '已驳回'
                        }
                        if (item.reportSource == 1) {
                            item.reportSource = '扫码访问'
                        } else if (item.reportSource == 2) {
                            item.reportSource = '贴牌APP'
                        } else if (item.reportSource == 3) {
                            item.reportSource = '人工导入'
                        }
                    })
                }
                this.tableData = res.data.data.records
                this.pages.total = res.data.data.total
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            }).catch(error => {
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            })
        },

        // 高度自适应
        setTableHeight () {
            this.currentTableHeight = this.$refs.containerContent.offsetHeight - this.$refs.timeSelect.offsetHeight
        },

        // 大小重置
        boxResize (val) {
            this.boxShow = val
        },
    },

    destroyed () {
        loading && loading.close()

        window.removeEventListener('resize', this.setTableHeight)

        this.$parent.$parent.resize('0px')

        this.clearRow()
      ],
    }
  },

  created () {
    const that = this

    that.$nextTick(() => {
      initMapPosition()
      that.getList()
    })
  },

  mounted () {
    this.$parent.$parent.resize('400px', true)

    this.$nextTick(() => {
      this.$EventBus.$emit('closeMxTileset')

      this.setTableHeight()
    })

    window.addEventListener('resize', this.setTableHeight)
  },

  computed: {
    positionColor () {
      return (row) => {
        if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
          return "#1AFA29"
        } else {
          return "#ccc"
        }
      }
    },

    positionDisabled () {
      return (row) => {
        if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
          return false
        } else {
          return true
        }
      }
    },
  },

  methods: {
    // 根据类型获取数据--暂时为测试数据
    getRowData (row) {
      let data = []
      if (this.typeValue == 1) {
        data = [
          {
            label: '名字',
            prop: 'name',
            value: row.name,
            type: 'popup'
          },
          {
            label: '性别',
            prop: 'gender',
            value: row.gender == 1 ? '男' : '女',
            type: 'popup'
          },
          {
            label: '身份证号',
            prop: 'idCardNumber',
            value: row.idCardNumber,
            type: 'popup'
          },
          {
            label: '联系电话',
            prop: 'phone',
            value: row.phone,
            type: 'popup'
          },
          {
            label: '住户类型',
            prop: 'type',
            value: row.type == 1 ? '业主' : '租客',
            type: 'popup'
          },
          {
            label: '出生年月',
            prop: 'birth',
            value: row.birth,
            type: 'detail'
          },
          {
            label: '民族',
            prop: 'nation',
            value: row.nation,
            type: 'detail'
          },
          {
            label: '房屋地址',
            prop: 'address',
            value: row.address,
            type: 'detail'
          }
        ]
      } else if (this.typeValue == 2) {
        data = [
          {
            label: '名字',
            prop: 'name',
            value: row.name,
            type: 'popup'
          },
          {
            label: '性别',
            prop: 'gender',
            value: row.gender == 1 ? '男' : '女',
            type: 'popup'
          },
          {
            label: '身份证号',
            prop: 'idCardNumber',
            value: row.idCardNumber,
            type: 'popup'
          },
          {
            label: '联系电话',
            prop: 'phone',
            value: row.phone,
            type: 'popup'
          },
          {
            label: '住户类型',
            prop: 'type',
            value: row.type == 1 ? '业主' : '租客',
            type: 'popup'
          },
          {
            label: '是否成年',
            prop: 'isAdult',
            value: row.isAdult == 1 ? '是' : '否',
            type: 'detail'
          },
          {
            label: '出生年月',
            prop: 'birth',
            value: row.birth,
            type: 'detail'
          },
          {
            label: '民族',
            prop: 'nation',
            value: row.nation,
            type: 'detail'
          },
          {
            label: '房屋地址',
            prop: 'address',
            value: row.address,
            type: 'detail'
          }
        ]
      } else if (this.typeValue == 3) {
        data = [
          {
            label: '名字',
            prop: 'name',
            value: row.name,
            type: 'popup'
          },
          {
            label: '身份证号',
            prop: 'idCard',
            value: row.idCard,
            type: 'popup'
          },
          {
            label: '联系方式',
            prop: 'phone',
            value: row.phone,
            type: 'popup'
          },
          {
            label: '常用地址',
            prop: 'commonUseAddress',
            value: row.commonUseAddress,
            type: 'popup'
          },
          {
            label: '户籍地址',
            prop: 'domicileAddress',
            value: row.domicileAddress,
            type: 'detail'
          },
          {
            label: '审核状态',
            prop: 'auditStatus',
            value: row.auditStatus,
            type: 'detail'
          },
          {
            label: '人员类型',
            prop: 'personType',
            value: row.personType,
            type: 'popup'
          },
          {
            label: '操作类型',
            prop: 'operateType',
            value: row.operateType == 1 ? '扫码录入' : '人工录入',
            type: 'detail'
          },
          {
            label: '审核时间',
            prop: 'auditTime',
            value: row.auditTime,
            type: 'detail'
          },
          {
            label: '文字描述',
            prop: 'descriptionText',
            value: row.descriptionText,
            type: 'detail'
          },
          {
            label: '备注',
            prop: 'remark',
            value: row.remark,
            type: 'detail'
          },
          {
            label: '登记人',
            prop: 'createPerson',
            value: row.createPerson,
            type: 'detail'
          },
          {
            label: '审核人',
            prop: 'auditPerson',
            value: row.auditPerson,
            type: 'detail'
          }
        ]
      } else if (this.typeValue == 4) {
        data = [
          {
            label: '企业名称',
            prop: 'companyName',
            value: row.companyName,
            type: 'popup'
          },
          {
            label: '岗位名称',
            prop: 'position',
            value: row.position,
            type: 'popup'
          },
          {
            label: '员工姓名',
            prop: 'empName',
            value: row.empName,
            type: 'popup'
          },
          {
            label: '员工性别',
            prop: 'empSex',
            value: row.empSex == 1 ? '女' : '男',
            type: 'popup'
          },
          {
            label: '员工身份证号',
            prop: 'empIdCard',
            value: row.empIdCard,
            type: 'popup'
          },
          {
            label: '员工联系电话',
            prop: 'empPhone',
            value: row.empPhone,
            type: 'popup'
          },
          {
            label: '备注',
            prop: 'remark',
            value: row.remark,
            type: 'detail'
          },
          {
            label: '创建时间',
            prop: 'createTime',
            value: row.createTime,
            type: 'detail'
          },
          {
            label: '创建人',
            prop: 'createBy',
            value: row.createBy,
            type: 'detail'
          },
          {
            label: '更新时间',
            prop: 'updateTime',
            value: row.updateTime,
            type: 'detail'
          },
          {
            label: '更新人',
            prop: 'updateBy',
            value: row.updateBy,
            type: 'detail'
          }
        ]
      } else if (this.typeValue == 5) {
        data = [
          {
            label: '异常类型',
            prop: 'exception_type_name',
            value: row.exceptionTypeName,
            type: 'popup'
          },
          {
            label: '异常描述',
            prop: 'exception_description',
            value: row.exceptionDescription,
            type: 'popup'
          },
          {
            label: '上报人名称',
            prop: 'report_name',
            value: row.reportName,
            type: 'popup'
          },
          {
            label: '上报用户类型',
            prop: 'reportor_type_name',
            value: row.reportorTypeName,
            type: 'detail'
          },
          {
            label: '上报时间',
            prop: 'report_time',
            value: row.reportTime,
            type: 'popup'
          },
          {
            label: '上报来源',
            prop: 'report_source',
            value: row.reportSource,
            type: 'popup'
          },
          {
            label: '联系电话',
            prop: 'phone',
            value: row.phone,
            type: 'detail'
          },
          {
            label: '地址',
            prop: 'std_address',
            value: row.stdAddress.replace('江西省上饶市', ''),
            type: 'popup'
          },
          {
            label: '处理人名称',
            prop: 'resolve_by_name',
            value: row.resolveByName,
            type: 'detail'
          },
          {
            label: '处理状态',
            prop: 'resolve_status',
            value: row.resolveStatus,
            type: 'popup'
          },
          {
            label: '处理时间',
            prop: 'resolve_time',
            value: row.resolveTime,
            type: 'popup'
          },
          {
            label: '处理意见',
            prop: 'resolve_msg',
            value: row.resolve_msg,
            type: 'detail'
          },
          {
            label: '采集经度',
            prop: 'photo_lat',
            value: row.x,
            type: 'detail'
          },
          {
            label: '采集纬度',
            prop: 'photo_lng',
            value: row.y,
            type: 'detail'
          },
        ]
      }
      return data
    },

    // 点击详情
    goDetail (row) {
      const typeLabel = this.typeOptions.find(e => e.value == this.typeValue).label
      this.popupTile = `详情信息（${typeLabel}）`
      let data = this.getRowData(row)
      this.$refs.detailsPopup.initOpen(data)
    },

    // 点击定位
    rowClick (row) {
      let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.x, row.y)[0]
      let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.x, row.y)[1]

      this.$EventBus.$emit('toPosition', {
        siteJd: lng,
        siteWd: lat,
        siteGd: 2000
      })
      this.$EventBus.$emit('mapClearLayer', {
        layerName: 'scanLayer',
        type: 'VectorLayer'
      })
      this.$EventBus.$emit('layerPointAdd', {
        layerName: 'scanLayer',
        type: "billboard",
        params: {
          ...row,
          lng: lng,
          lat: lat,
          alt: 1,
          url: `/img/icon/location.png`,
          setStyle: {
            disableDepthTestDistance: Number.POSITIVE_INFINITY
          }
        },
      })
      let data = this.getRowData(row)
      this.$store.commit('SET_DIALOGDETAILPOPUP', true)

      this.$store.commit('SET_DIALOGDETAILPOPUPDATA', data)
      // 商业模拟数据
      var dialogDetailPopup = new global.DC.DivForms(global.viewer, {
        domId: 'dialogDetailPopup',
        position: [
          global.DC.Transform.transformWGS84ToCartesian(
            new global.DC.Position(
              Number(lng),
              Number(lat),
              0
            )
          )
        ]
      })
    },

    // 清空按钮-清除图标图层
    clearRow () {
      this.$EventBus.$emit('mapClearLayer', {
        layerName: 'scanLayer',
        type: 'VectorLayer'
      })
      this.$store.commit('SET_DIALOGDETAILPOPUP', false)
    },

    // 获取列表
    getList () {
      this.loading()
      let params = {
        searchKey: this.searchKey,
        size: this.pages.pageSize,
        current: this.pages.currentPage
      }
      if (this.typeValue == 1) {//业主租客登记
        this.getAppOwerRenterRegistrantList(params)
      } else if (this.typeValue == 2) {//同住登记
        this.getAppOwerRenterRegistrantCohabitList(params)
      } else if (this.typeValue == 3) {//信息登记
        this.getAppRegisterInfoList(params)
      } else if (this.typeValue == 4) {//企业登记
        this.getAppEmploymentRegistrationList(params)
      } else if (this.typeValue == 5) {//扫码上报
        this.getAddressManageList(params)
      }
    },

    searchBtn () {
      this.pages.currentPage = 1
      this.getList()
    },

    // 分页处理
    handleCurrentChange (currentPage) {
      this.pages.currentPage = currentPage
      this.getList()
    },

    // 加载动画
    loading () {
      loading = this.$loading({
        lock: true,
        text: '拼命加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      })
    },

    // 切换登记类型
    typeChange () {
      if (this.typeValue == 1 || this.typeValue == 2) {
        this.placeholder = '请输入（姓名、手机号、身份证号、住址）'
      } else if (this.typeValue == 3) {
        this.placeholder = '请输入（姓名、手机号、身份证号、住址）'
      } else if (this.typeValue == 4) {
        this.placeholder = '请输入（企业名称、姓名、身份证、住址）'
      } else if (this.typeValue == 5) {
        this.placeholder = '请输入（上报人、门牌异常类型、联系电话）'
      }
      this.pages.currentPage = 1
      this.getList()
      this.clearRow()
    },

    //业主租客登记列表数据
    getAppOwerRenterRegistrantList (params) {
      getAppOwerRenterRegistrantList(params).then(res => {
        this.tableData = res.data.data.records
        this.pages.total = res.data.data.total
        setTimeout(() => {
          loading && loading.close()
        }, 300)
      }).catch(error => {
        setTimeout(() => {
          loading && loading.close()
        }, 300)
      })
    },

    //同住登记列表数据
    getAppOwerRenterRegistrantCohabitList (params) {
      getAppOwerRenterRegistrantCohabitList(params).then(res => {
        this.tableData = res.data.data.records
        this.pages.total = res.data.data.total
        setTimeout(() => {
          loading && loading.close()
        }, 300)
      }).catch(error => {
        setTimeout(() => {
          loading && loading.close()
        }, 300)
      })
    },

    //信息登记列表数据
    getAppRegisterInfoList (params) {
      getAppRegisterInfoList(params).then(res => {
        if (res.data.data.records.length > 0) {
          res.data.data.records.forEach(item => {
            if (item.auditStatus == 0) {
              item.auditStatus = '未审核'
            } else if (item.auditStatus == 1) {
              item.auditStatus = '已通过'
            } else if (item.auditStatus == 2) {
              item.auditStatus = '已驳回'
            }
          })
        }
        this.tableData = res.data.data.records
        this.pages.total = res.data.data.total
        setTimeout(() => {
          loading && loading.close()
        }, 300)
      }).catch(error => {
        setTimeout(() => {
          loading && loading.close()
        }, 300)
      })
    },

    //企业登记列表数据
    getAppEmploymentRegistrationList (params) {
      getAppEmploymentRegistrationList(params).then(res => {
        this.tableData = res.data.data.records
        this.pages.total = res.data.data.total
        setTimeout(() => {
          loading && loading.close()
        }, 300)
      }).catch(error => {
        setTimeout(() => {
          loading && loading.close()
        }, 300)
      })
    },

    // 扫码上报列表数据
    getAddressManageList (params) {
      getAddressManageList(params).then(res => {
        if (res.data.data.records.length > 0) {
          res.data.data.records.forEach(item => {
            if (item.resolveStatus == 0) {
              item.resolveStatus = '待审核'
            } else if (item.resolveStatus == 1) {
              item.resolveStatus = '已通过'
            } else if (item.resolveStatus == 2) {
              item.resolveStatus = '已驳回'
            }
            if (item.reportSource == 1) {
              item.reportSource = '扫码访问'
            } else if (item.reportSource == 2) {
              item.reportSource = '贴牌APP'
            } else if (item.reportSource == 3) {
              item.reportSource = '人工导入'
            }
          })
        }
        this.tableData = res.data.data.records
        this.pages.total = res.data.data.total
        setTimeout(() => {
          loading && loading.close()
        }, 300)
      }).catch(error => {
        setTimeout(() => {
          loading && loading.close()
        }, 300)
      })
    },

    // 高度自适应
    setTableHeight () {
      this.currentTableHeight = this.$refs.containerContent.offsetHeight - this.$refs.timeSelect.offsetHeight
    },

    // 大小重置
    boxResize (val) {
      this.boxShow = val
    },
  },

  destroyed () {
    loading && loading.close()

    window.removeEventListener('resize', this.setTableHeight)

    this.$parent.$parent.resize('0px')

    this.clearRow()
  }
}
</script>

<style scoped lang="scss">
.container {
    position: relative;
  position: relative;
  width: 100%;
  height: 100%;

  &-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    &-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        color: #fff;
        background: $bg-color;
    }
    color: #fff;
    background: $bg-color;
  }
}

.list {
    height: calc(100% - 48px);
  height: calc(100% - 48px);
  display: flex;
  flex-direction: column;

  .pages {
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

    .pages {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
  .state-box {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #adadad;
  }

    .state-box {
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        margin: 0 auto;
        border-radius: 50%;
        background-color: #adadad;
    }

    .online {
        background-color: #4ccc7d;
    }
  .online {
    background-color: #4ccc7d;
  }
}
</style>