经开分局优化

linwe

2025-12-14 d084257daf1e4baa99ef895e121c5a3da7207200

经开分局优化

 src/views/antiFraudShow/index.vue

@@ -1,472 +1,474 @@
<template>
    <div class="police-page container">
        <div v-show="boxShow" class="container-content" ref="containerContent">
            <div class="type-tab-box">
                <div class="tab-item" :class="{ 'tab-choose-item': chooseTab == 1 }" @click="tabClick(1)">
                    反诈宣防</div>
                <div class="tab-item" :class="{ 'tab-choose-item': chooseTab == 2 }" @click="tabClick(2)">
                    反诈入户处置</div>
            </div>
            <div class="time-select" ref="timeSelect">
                <div class="search-item-box">
                    <el-input size="small" placeholder="请输入(地址、内容)" v-model="searchKey" clearable></el-input>
                    <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
                    <el-button @click="resetBtn" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
                </div>
                <div class="search-item-box" style="overflow-wrap: break-word;" v-if="chooseTab == 1">
                    <el-button @click="filterAppBtn(1)" class="bjnr-btn"
                        :class="{ isOneClick: criminalRecordFlag == 1 }">已下载反炸app（{{ isFzAppNum ? isFzAppNum :
            '0'
                        }}） 宣防人员数（{{ isFzAppPersonNum ? isFzAppPersonNum :
            '0' }}）</el-button>
                </div>
                <div class="search-item-box" style="overflow-wrap: break-word;" v-if="chooseTab == 1">
                    <el-button @click="filterAlarmBtn(1)" class="bjnr-btn"
                        :class="{ isOneClick: criminalRecordFlag == 1 }">打开预警功能（{{ isOpenAlarmNum ? isOpenAlarmNum :
            '0'
                        }}）宣防人员数（{{ isOpenAlarmPersonNum ? isOpenAlarmPersonNum :
            '0' }}）</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="address" :show-overflow-tooltip="true" label="地址" v-if="chooseTab == 1"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="pubContent" :show-overflow-tooltip="true" label="宣防内容" v-if="chooseTab == 1"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="createTime" :show-overflow-tooltip="true" label="时间" v-if="chooseTab == 1"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="address" :show-overflow-tooltip="true" label="地址" v-if="chooseTab == 2"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="recContent" :show-overflow-tooltip="true" label="核实内容信息"
                        v-if="chooseTab == 2" :key="Math.random()"></el-table-column>
                    <el-table-column prop="createTime" :show-overflow-tooltip="true" label="时间" v-if="chooseTab == 2"
                        :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 class="police-page container">
    <div v-show="boxShow" class="container-content" ref="containerContent">
      <div class="type-tab-box">
        <div class="tab-item" :class="{ 'tab-choose-item': chooseTab == 1 }" @click="tabClick(1)">
          反诈宣防</div>
        <div class="tab-item" :class="{ 'tab-choose-item': chooseTab == 2 }" @click="tabClick(2)">
          反诈入户处置</div>
      </div>
      <div class="time-select" ref="timeSelect">
        <div class="search-item-box">
          <el-input size="small" placeholder="请输入(地址、内容)" v-model="searchKey" clearable></el-input>
          <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
          <el-button @click="resetBtn" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
        </div>
        <detailDialog ref="detailDialog" />
        <div class="search-item-box" style="overflow-wrap: break-word;" v-if="chooseTab == 1">
          <el-button @click="filterAppBtn(1)" class="bjnr-btn"
            :class="{ isOneClick: criminalRecordFlag == 1 }">已下载反炸app（{{ isFzAppNum ? isFzAppNum :
              '0'
            }}） 宣防人员数（{{ isFzAppPersonNum ? isFzAppPersonNum :
  '0' }}）</el-button>
        </div>
        <div class="search-item-box" style="overflow-wrap: break-word;" v-if="chooseTab == 1">
          <el-button @click="filterAlarmBtn(1)" class="bjnr-btn"
            :class="{ isOneClick: criminalRecordFlag == 1 }">打开预警功能（{{ isOpenAlarmNum ? isOpenAlarmNum :
              '0'
            }}）宣防人员数（{{ isOpenAlarmPersonNum ? isOpenAlarmPersonNum :
  '0' }}）</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="address" :show-overflow-tooltip="true" label="地址" v-if="chooseTab == 1"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="pubContent" :show-overflow-tooltip="true" label="宣防内容" v-if="chooseTab == 1"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="createTime" :show-overflow-tooltip="true" label="时间" v-if="chooseTab == 1"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="address" :show-overflow-tooltip="true" label="地址" v-if="chooseTab == 2"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="recContent" :show-overflow-tooltip="true" label="核实内容信息" v-if="chooseTab == 2"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="createTime" :show-overflow-tooltip="true" label="时间" v-if="chooseTab == 2"
            :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>
    <detailDialog ref="detailDialog" />
  </div>
</template>

<script>
import { initMapPosition } from '@/utils/mapPositionInit'
import {
    getBackblastPubRecordList,
    getBackblastWarnHanRecList,
    getStatistic
  getBackblastPubRecordList,
  getBackblastWarnHanRecList,
  getStatistic
} from "@/api/antiFraudShow/index.js"
import detailDialog from './components/detailDialog.vue'

let loading = null

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

    components: { detailDialog },
  components: { detailDialog },

    data() {
        return {
            isFzAppNum: 0,
            isFzAppPersonNum: 0,
            isOpenAlarmNum: 0,
            isOpenAlarmPersonNum: 0,
            isFzApp: null,
            isOpenAlarm: null,
            chooseTab: 1,
            searchKey: '',
            realEmptyText: "",
            currentTableHeight: 0,
            tableData: [],
            boxShow: false,
            pages: {
                total: 0,
                pageSize: 22,
                count: 0,
                currentPage: 1
            },
        }
    },

    created() {
        const that = this

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

    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: {
        // 过滤
        filterAppBtn(isFzApp) {
            this.isFzApp = isFzApp
            this.getList()
        },
        filterAlarmBtn(isOpenAlarm) {
            this.isOpenAlarm = isOpenAlarm
            this.getList()
        },
        getStatistic() {
            var that = this
            getStatistic({
                searchKey: this.searchKey,
            }).then(res => {
                that.isFzAppNum = res.data.data.isFzApp
                that.isFzAppPersonNum = res.data.data.isFzAppPersonNum
                that.isOpenAlarmNum = res.data.data.isOpenAlarm
                that.isOpenAlarmPersonNum = res.data.data.isOpenAlarmPersonNum
            })
        },
        // 切换tab
        tabClick(curTab) {
            this.chooseTab = curTab
            this.resetBtn()
        },

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

            this.$EventBus.$emit('toPosition', {
                siteJd: lng,
                siteWd: lat,
                siteGd: 200
            })
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchAILayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchAILayer',
                type: "billboard",
                params: {
                    ...row,
                    lng: lng,
                    lat: lat,
                    alt: 1,
                    url: `/img/icon/location.png`
                },
            })
        },

        // 点击详情
        goDetail(row) {
            let detailList = []
            let title = ''
            if (this.chooseTab == 1) {
                title = '反诈宣防详情'
                detailList = [
                    {
                        label: '地址',
                        value: row.address
                    },
                    {
                        label: '宣防内容',
                        value: row.pubContent
                    },
                    {
                        label: '宣防佐证照片',
                        value: row.pubUrls,
                        isPic: true
                    },
                    {
                        label: '时间',
                        value: row.createTime
                    },
                    {
                        label: '是否下载国家反诈app',
                        value: row.isFzApp == 1 ? '是' : '否'
                    },
                    {
                        label: '是否打开预警功能',
                        value: row.is0penAlarm == 1 ? '是' : '否'
                    },
                    {
                        label: '民警姓名',
                        value: row.policeman
                    },
                    {
                        label: '民警联系方式',
                        value: row.policemanPhone
                    },
                    {
                        label: '地区',
                        value: row.townName
                    },
                    {
                        label: '辖区派出所',
                        value: row.pcsName
                    }
                ]
                this.$refs.detailDialog.initOpen(detailList, title, row, [
                    '基本信息',
                    '宣防对象'
                ],this.chooseTab)
            } else if (this.chooseTab == 2) {
                title = '反诈预警详情'
                detailList = [
                    {
                        label: '地址',
                        value: row.address
                    },
                    {
                        label: '核实内容信息',
                        value: row.recContent
                    },
                    {
                        label: '核实现场照片',
                        value: row.sceUrls,
                        isPic: true
                    },
                    {
                        label: '时间',
                        value: row.createTime
                    },
                    {
                        label: '民警姓名',
                        value: row.policeman
                    },
                    {
                        label: '民警联系方式',
                        value: row.policemanPhone
                    },
                    {
                        label: '地区',
                        value: row.townName
                    },
                    {
                        label: '辖区派出所',
                        value: row.pcsName
                    }
                ]
                this.$refs.detailDialog.initOpen(detailList, title, row, [
                    '基本信息'
                ],this.chooseTab)
            }

        },

        // 获取列表
        getList() {
            this.loading()
            let params = {
                isFzApp: this.isFzApp,
                isOpenAlarm: this.isOpenAlarm,
                searchKey: this.searchKey,
                size: this.pages.pageSize,
                current: this.pages.currentPage
            }
            // 反诈宣防列表
            if (this.chooseTab == 1) {
                this.getBackblastPubRecordList(params)
                this.getStatistic()
            } else {// 反诈预警列表
                this.getBackblastWarnHanRecList(params)
            }
        },

        // 反诈宣防列表
        getBackblastPubRecordList(params) {
            getBackblastPubRecordList(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)
            })
        },

        // 反诈预警列表
        getBackblastWarnHanRecList(params) {
            getBackblastWarnHanRecList(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)
            })
        },

        // 搜索按钮
        searchBtn() {
            this.pages.currentPage = 1
            this.getList()
        },

        // 清空按钮
        resetBtn() {
            this.isFzApp = null
            this.isOpenAlarm = null
            this.searchKey = ''
            this.pages.currentPage = 1
            this.getList()
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchAILayer',
                type: 'VectorLayer'
            })
        },

        // 分页处理
        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)'
            })
        },

        // 表格高度
        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.$EventBus.$emit('mapClearLayer', {
            layerName: 'searchAILayer',
            type: 'VectorLayer'
        })
  data () {
    return {
      isFzAppNum: 0,
      isFzAppPersonNum: 0,
      isOpenAlarmNum: 0,
      isOpenAlarmPersonNum: 0,
      isFzApp: null,
      isOpenAlarm: null,
      chooseTab: 1,
      searchKey: '',
      realEmptyText: "",
      currentTableHeight: 0,
      tableData: [],
      boxShow: false,
      pages: {
        total: 0,
        pageSize: 22,
        count: 0,
        currentPage: 1
      },
    }
  },

  created () {
    const that = this

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

  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: {
    // 过滤
    filterAppBtn (isFzApp) {
      this.isFzApp = isFzApp
      this.getList()
    },
    filterAlarmBtn (isOpenAlarm) {
      this.isOpenAlarm = isOpenAlarm
      this.getList()
    },
    getStatistic () {
      var that = this
      getStatistic({
        searchKey: this.searchKey,
      }).then(res => {
        that.isFzAppNum = res.data.data.isFzApp
        that.isFzAppPersonNum = res.data.data.isFzAppPersonNum
        that.isOpenAlarmNum = res.data.data.isOpenAlarm
        that.isOpenAlarmPersonNum = res.data.data.isOpenAlarmPersonNum
      })
    },
    // 切换tab
    tabClick (curTab) {
      this.chooseTab = curTab
      this.resetBtn()
    },

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


      this.$EventBus.$emit('toPosition', {
        siteJd: lng,
        siteWd: lat,
        siteGd: 200
      })
      this.$EventBus.$emit('mapClearLayer', {
        layerName: 'searchAILayer',
        type: 'VectorLayer'
      })
      this.$EventBus.$emit('layerPointAdd', {
        layerName: 'searchAILayer',
        type: "billboard",
        params: {
          ...row,
          lng: lng,
          lat: lat,
          alt: 1,
          url: `/img/icon/location.png`
        },
      })
    },

    // 点击详情
    goDetail (row) {
      let detailList = []
      let title = ''
      if (this.chooseTab == 1) {
        title = '反诈宣防详情'
        detailList = [
          {
            label: '地址',
            value: row.address
          },
          {
            label: '宣防内容',
            value: row.pubContent
          },
          {
            label: '宣防佐证照片',
            value: row.pubUrls,
            isPic: true
          },
          {
            label: '时间',
            value: row.createTime
          },
          {
            label: '是否下载国家反诈app',
            value: row.isFzApp == 1 ? '是' : '否'
          },
          {
            label: '是否打开预警功能',
            value: row.is0penAlarm == 1 ? '是' : '否'
          },
          {
            label: '民警姓名',
            value: row.policeman
          },
          {
            label: '民警联系方式',
            value: row.policemanPhone
          },
          {
            label: '地区',
            value: row.townName
          },
          {
            label: '辖区派出所',
            value: row.pcsName
          }
        ]
        this.$refs.detailDialog.initOpen(detailList, title, row, [
          '基本信息',
          '宣防对象'
        ], this.chooseTab)
      } else if (this.chooseTab == 2) {
        title = '反诈预警详情'
        detailList = [
          {
            label: '地址',
            value: row.address
          },
          {
            label: '核实内容信息',
            value: row.recContent
          },
          {
            label: '核实现场照片',
            value: row.sceUrls,
            isPic: true
          },
          {
            label: '时间',
            value: row.createTime
          },
          {
            label: '民警姓名',
            value: row.policeman
          },
          {
            label: '民警联系方式',
            value: row.policemanPhone
          },
          {
            label: '地区',
            value: row.townName
          },
          {
            label: '辖区派出所',
            value: row.pcsName
          }
        ]
        this.$refs.detailDialog.initOpen(detailList, title, row, [
          '基本信息'
        ], this.chooseTab)
      }

    },

    // 获取列表
    getList () {
      this.loading()
      let params = {
        isFzApp: this.isFzApp,
        isOpenAlarm: this.isOpenAlarm,
        searchKey: this.searchKey,
        size: this.pages.pageSize,
        current: this.pages.currentPage
      }
      // 反诈宣防列表
      if (this.chooseTab == 1) {
        this.getBackblastPubRecordList(params)
        this.getStatistic()
      } else {// 反诈预警列表
        this.getBackblastWarnHanRecList(params)
      }
    },

    // 反诈宣防列表
    getBackblastPubRecordList (params) {
      getBackblastPubRecordList(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)
      })
    },

    // 反诈预警列表
    getBackblastWarnHanRecList (params) {
      getBackblastWarnHanRecList(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)
      })
    },

    // 搜索按钮
    searchBtn () {
      this.pages.currentPage = 1
      this.getList()
    },

    // 清空按钮
    resetBtn () {
      this.isFzApp = null
      this.isOpenAlarm = null
      this.searchKey = ''
      this.pages.currentPage = 1
      this.getList()
      this.$EventBus.$emit('mapClearLayer', {
        layerName: 'searchAILayer',
        type: 'VectorLayer'
      })
    },

    // 分页处理
    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)'
      })
    },

    // 表格高度
    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.$EventBus.$emit('mapClearLayer', {
      layerName: 'searchAILayer',
      type: 'VectorLayer'
    })
  }
}
</script>

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

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

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

        .type-tab-box {
            display: flex;
      .tab-item {
        cursor: pointer;
        width: 50%;
      }

            .tab-item {
                cursor: pointer;
                width: 50%;
            }

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

.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>

 src/views/contradictionEventShow/index 匹配e呼即办.vue

@@ -1,22 +1,22 @@
<template>
    <div class="police-page container">
        <div v-show="boxShow" class="container-content" ref="containerContent">
            <div class="time-select" ref="timeSelect">
                <div class="search-item-box">
                    <span>矛盾纠纷类型：</span>
  <div class="police-page container">
    <div v-show="boxShow" class="container-content" ref="containerContent">
      <div class="time-select" ref="timeSelect">
        <div class="search-item-box">
          <span>矛盾纠纷类型：</span>

                    <el-select clearable style="flex: 1;" size="small" v-model="typeValue" @change="typeChange"
                        placeholder="请选择矛盾纠纷类型">
                        <el-option v-for="item in typeOptions" :key="item.dictKey" :label="item.dictValue"
                            :value="item.dictKey"></el-option>
                    </el-select>
                </div>
                <div class="search-item-box">
                    <el-input size="small" placeholder="请输入(地址、纠纷内容)" v-model="searchKey" clearable></el-input>
                    <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
                    <el-button @click="resetBtn" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
                </div>
                <!-- <div class="search-item-box" style="overflow-wrap: break-word;">
          <el-select clearable style="flex: 1;" size="small" v-model="typeValue" @change="typeChange"
            placeholder="请选择矛盾纠纷类型">
            <el-option v-for="item in typeOptions" :key="item.dictKey" :label="item.dictValue"
              :value="item.dictKey"></el-option>
          </el-select>
        </div>
        <div class="search-item-box">
          <el-input size="small" placeholder="请输入(地址、纠纷内容)" v-model="searchKey" clearable></el-input>
          <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
          <el-button @click="resetBtn" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
        </div>
        <!-- <div class="search-item-box" style="overflow-wrap: break-word;">
                    <el-button @click="filterBtn(1)" class="bjnr-btn"
                        :class="{ isOneClick: criminalRecordFlag == 1 }">已化解（{{ yhj ? yhj :
            '0'
@@ -30,48 +30,47 @@
            '0'
                        }}）</el-button>
                </div> -->
            </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="address" :show-overflow-tooltip="true" label="事发地址"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="eventTime" :show-overflow-tooltip="true" label="事发时间"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="disputeTypeName" :show-overflow-tooltip="true" label="纠纷类型"
                        :key="Math.random()"></el-table-column>
      <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="address" :show-overflow-tooltip="true" label="事发地址"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="eventTime" :show-overflow-tooltip="true" label="事发时间"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="disputeTypeName" :show-overflow-tooltip="true" label="纠纷类型"
            :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>
          <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 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>
        <detailDialog ref="detailDialog" />
      </div>
    </div>
    <detailDialog ref="detailDialog" />
  </div>
</template>

<script>
import { initMapPosition } from '@/utils/mapPositionInit'
import {
    getDisputeRecordList, getStatistic
  getDisputeRecordList, getStatistic
} from "@/api/contradictionEventShow/index.js"
import { getDictionaryListByCode } from "@/api/rentalInfo/index.js"

@@ -80,374 +79,376 @@
let loading = null

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

    components: { detailDialog },
  components: { detailDialog },

    data () {
        return {
            handleResult: null,
            yhj: 0,
            whj: 0,
            ysehjb: 0,
            typeValue: '',
            typeOptions: [],
            searchKey: '',
            currentTableHeight: 0,
            tableData: [],
            boxShow: false,
            pages: {
                currentPage: 1,
                total: 0,
                pageSize: 22,
                count: 0,
            },
            disputeTypeList: [],
            disputeSourceList: []
        }
    },

    created () {
        const that = this

        that.$nextTick(() => {
            initMapPosition()
            that.getDictionaryListByCode()
            that.getStatistic()
            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: {
        // 统计
        getStatistic () {
            var that = this
            getStatistic({
                disputeType: this.typeValue,
                searchKey: this.searchKey
            }).then(res => {
                that.yhj = res.data.data.yhj
                that.whj = res.data.data.whj
                that.ysehjb = res.data.data.ysehjb
            })
        },
        // 获取字典列表
        getDictionaryListByCode () {
            getDictionaryListByCode('disputeType').then(res => {
                this.disputeTypeList = res.data.data
            })
            getDictionaryListByCode('disputeSource').then(res => {
                this.disputeSourceList = res.data.data
            })
            // 矛盾纠纷类型获取
            getDictionaryListByCode('disputeType').then(res => {
                this.typeOptions = res.data.data
            })
        },

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

            this.$EventBus.$emit('toPosition', {
                siteJd: lng,
                siteWd: lat,
                siteGd: 200
            })
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchAILayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchAILayer',
                type: "billboard",
                params: {
                    ...row,
                    lng: lng,
                    lat: lat,
                    alt: 1,
                    url: `/img/icon/location.png`
                },
            })
        },

        // 点击详情
        goDetail (row) {
            let detailList = []
            let title = '矛盾纠纷事件详情'

            detailList = [
                {
                    label: '事发地址',
                    value: row.address
                },
                {
                    label: '事发时间',
                    value: row.eventTime
                },
                {
                    label: '纠纷内容',
                    value: row.disputeContent,
                },
                {
                    label: '纠纷类型',
                    value: this.disputeTypeList.find(i => i.dictKey == row.disputeType).dictValue
                },
                // {
                //     label: '是否受伤',
                //     value: row.injuryFlag == 1 ? '是' : '否'
                // },
                {
                    label: '处置情况',
                    value: row.injuryDesc
                },
                // {
                //     label: '报警次数',
                //     value: row.alarmNum
                // },
                // {
                //     label: '信息来源',
                //     value: this.disputeSourceList.find(i => i.dictKey == row.source).dictValue
                // },
                // {
                //     label: '当事人1姓名',
                //     value: row.nameOne
                // },
                // {
                //     label: '当事人1性别',
                //     value: row.genderOne == 1 ? '男' : row.genderOne == 2 ? '女' : '未知'
                // },
                // {
                //     label: '当事人1电话',
                //     value: row.phoneOne
                // },
                // {
                //     label: '当事人1身份证号',
                //     value: row.idCardOne
                // },
                // {
                //     label: '当事人2姓名',
                //     value: row.nameTwo
                // },
                // {
                //     label: '当事人2性别',
                //     value: row.genderTwo == 1 ? '男' : '女'
                // },
                // {
                //     label: '当事人2电话',
                //     value: row.phoneTwo
                // },
                // {
                //     label: '当事人2身份证号',
                //     value: row.idCardTwo
                // },
                // {
                //     label: '地区',
                //     value: row.townName
                // },
                {
                    label: '辖区派出所',
                    value: row.pcsName
                },
                // {
                //     label: '处理结果',
                //     value: row.handleResult == 1 ? '已化解' : row.handleResult == 2 ? '未化解' : row.handleResult == 3 ? '移送e呼即办' : ''
                // }
            ]

            this.$refs.detailDialog.initOpen(detailList, title, [], [])
        },
        // 切换登记类型
        typeChange () {
            this.pages.currentPage = 1
            this.getList()
            this.getStatistic()
        },
        // 获取列表
        getList () {
            this.loading()
            let params = {
                handleResult: this.handleResult,
                disputeType: this.typeValue,
                searchKey: this.searchKey,
                size: this.pages.pageSize,
                current: this.pages.currentPage
            }

            this.getDisputeRecordList(params)
        },

        // 矛盾纠纷列表
        getDisputeRecordList (params) {
            getDisputeRecordList(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)
            })
        },

        // 搜索按钮
        searchBtn () {
            this.pages.currentPage = 1
            this.getList()
            this.getStatistic()
        },

        // 清空按钮
        resetBtn () {
            this.searchKey = ''
            this.typeValue = null
            this.handleResult = null
            this.pages.currentPage = 1
            this.getList()
            this.getStatistic()
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchAILayer',
                type: 'VectorLayer'
            })
        },
        filterBtn (handleResult) {
            this.handleResult = handleResult
            this.getList()
        },

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

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

        // 表格高度
        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.$EventBus.$emit('mapClearLayer', {
            layerName: 'searchAILayer',
            type: 'VectorLayer'
        })
  data () {
    return {
      handleResult: null,
      yhj: 0,
      whj: 0,
      ysehjb: 0,
      typeValue: '',
      typeOptions: [],
      searchKey: '',
      currentTableHeight: 0,
      tableData: [],
      boxShow: false,
      pages: {
        currentPage: 1,
        total: 0,
        pageSize: 22,
        count: 0,
      },
      disputeTypeList: [],
      disputeSourceList: []
    }
  },

  created () {
    const that = this

    that.$nextTick(() => {
      initMapPosition()
      that.getDictionaryListByCode()
      that.getStatistic()
      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: {
    // 统计
    getStatistic () {
      var that = this
      getStatistic({
        disputeType: this.typeValue,
        searchKey: this.searchKey
      }).then(res => {
        that.yhj = res.data.data.yhj
        that.whj = res.data.data.whj
        that.ysehjb = res.data.data.ysehjb
      })
    },
    // 获取字典列表
    getDictionaryListByCode () {
      getDictionaryListByCode('disputeType').then(res => {
        this.disputeTypeList = res.data.data
      })
      getDictionaryListByCode('disputeSource').then(res => {
        this.disputeSourceList = res.data.data
      })
      // 矛盾纠纷类型获取
      getDictionaryListByCode('disputeType').then(res => {
        this.typeOptions = res.data.data
      })
    },

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

      this.$EventBus.$emit('toPosition', {
        siteJd: lng,
        siteWd: lat,
        siteGd: 200
      })
      this.$EventBus.$emit('mapClearLayer', {
        layerName: 'searchAILayer',
        type: 'VectorLayer'
      })
      this.$EventBus.$emit('layerPointAdd', {
        layerName: 'searchAILayer',
        type: "billboard",
        params: {
          ...row,
          lng: lng,
          lat: lat,
          alt: 1,
          url: `/img/icon/location.png`
        },
      })
    },

    // 点击详情
    goDetail (row) {
      let detailList = []
      let title = '矛盾纠纷事件详情'

      detailList = [
        {
          label: '事发地址',
          value: row.address
        },
        {
          label: '事发时间',
          value: row.eventTime
        },
        {
          label: '纠纷内容',
          value: row.disputeContent,
        },
        {
          label: '纠纷类型',
          value: this.disputeTypeList.find(i => i.dictKey == row.disputeType).dictValue
        },
        // {
        //     label: '是否受伤',
        //     value: row.injuryFlag == 1 ? '是' : '否'
        // },
        {
          label: '处置情况',
          value: row.injuryDesc
        },
        // {
        //     label: '报警次数',
        //     value: row.alarmNum
        // },
        // {
        //     label: '信息来源',
        //     value: this.disputeSourceList.find(i => i.dictKey == row.source).dictValue
        // },
        // {
        //     label: '当事人1姓名',
        //     value: row.nameOne
        // },
        // {
        //     label: '当事人1性别',
        //     value: row.genderOne == 1 ? '男' : row.genderOne == 2 ? '女' : '未知'
        // },
        // {
        //     label: '当事人1电话',
        //     value: row.phoneOne
        // },
        // {
        //     label: '当事人1身份证号',
        //     value: row.idCardOne
        // },
        // {
        //     label: '当事人2姓名',
        //     value: row.nameTwo
        // },
        // {
        //     label: '当事人2性别',
        //     value: row.genderTwo == 1 ? '男' : '女'
        // },
        // {
        //     label: '当事人2电话',
        //     value: row.phoneTwo
        // },
        // {
        //     label: '当事人2身份证号',
        //     value: row.idCardTwo
        // },
        // {
        //     label: '地区',
        //     value: row.townName
        // },
        {
          label: '辖区派出所',
          value: row.pcsName
        },
        // {
        //     label: '处理结果',
        //     value: row.handleResult == 1 ? '已化解' : row.handleResult == 2 ? '未化解' : row.handleResult == 3 ? '移送e呼即办' : ''
        // }
      ]

      this.$refs.detailDialog.initOpen(detailList, title, [], [])
    },
    // 切换登记类型
    typeChange () {
      this.pages.currentPage = 1
      this.getList()
      this.getStatistic()
    },
    // 获取列表
    getList () {
      this.loading()
      let params = {
        handleResult: this.handleResult,
        disputeType: this.typeValue,
        searchKey: this.searchKey,
        size: this.pages.pageSize,
        current: this.pages.currentPage
      }

      this.getDisputeRecordList(params)
    },

    // 矛盾纠纷列表
    getDisputeRecordList (params) {
      getDisputeRecordList(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)
      })
    },

    // 搜索按钮
    searchBtn () {
      this.pages.currentPage = 1
      this.getList()
      this.getStatistic()
    },

    // 清空按钮
    resetBtn () {
      this.searchKey = ''
      this.typeValue = null
      this.handleResult = null
      this.pages.currentPage = 1
      this.getList()
      this.getStatistic()
      this.$EventBus.$emit('mapClearLayer', {
        layerName: 'searchAILayer',
        type: 'VectorLayer'
      })
    },
    filterBtn (handleResult) {
      this.handleResult = handleResult
      this.getList()
    },

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

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

    // 表格高度
    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.$EventBus.$emit('mapClearLayer', {
      layerName: 'searchAILayer',
      type: 'VectorLayer'
    })
  }
}
</script>

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

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

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

        .type-tab-box {
            display: flex;
      .tab-item {
        cursor: pointer;
        width: 50%;
      }

            .tab-item {
                cursor: pointer;
                width: 50%;
            }

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

.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>

 src/views/contradictionEventShow/index.vue

@@ -5,135 +5,60 @@
        <div class="search-item-box">
          <span>矛盾纠纷类型：</span>

          <el-select
            clearable
            style="flex: 1"
            size="small"
            v-model="typeValue"
            @change="typeChange"
            placeholder="请选择矛盾纠纷类型"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey"
            ></el-option>
          <el-select clearable style="flex: 1" size="small" v-model="typeValue" @change="typeChange"
            placeholder="请选择矛盾纠纷类型">
            <el-option v-for="item in typeOptions" :key="item.dictKey" :label="item.dictValue"
              :value="item.dictKey"></el-option>
          </el-select>
        </div>
        <div class="search-item-box">
          <el-input
            size="small"
            placeholder="请输入(地址、纠纷内容)"
            v-model="searchKey"
            clearable
          ></el-input>
          <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn"
            >搜索</el-button
          >
          <el-button @click="resetBtn" icon="el-icon-delete" class="bjnr-btn"
            >清除</el-button
          >
          <el-input size="small" placeholder="请输入(地址、纠纷内容)" v-model="searchKey" clearable></el-input>
          <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
          <el-button @click="resetBtn" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
        </div>
        <div class="search-item-box" style="overflow-wrap: break-word">
          <el-button
            @click="filterBtn(1)"
            class="bjnr-btn"
            :class="{ isOneClick: criminalRecordFlag == 1 }"
            >已化解（{{ yhj ? yhj : "0" }}）</el-button
          >
          <el-button
            @click="filterBtn(2)"
            class="bjnr-btn"
            :class="{ isOneClick: criminalRecordFlag == 1 }"
            >未化解（{{ whj ? whj : "0" }}）</el-button
          >
          <el-button
            @click="filterBtn(3)"
            class="bjnr-btn"
            :class="{ isOneClick: criminalRecordFlag == 1 }"
            >移交E呼即办（{{ ysehjb ? ysehjb : "0" }}）</el-button
          >
          <el-button @click="filterBtn(1)" class="bjnr-btn" :class="{ isOneClick: criminalRecordFlag == 1 }">已化解（{{ yhj ?
            yhj : "0" }}）</el-button>
          <el-button @click="filterBtn(2)" class="bjnr-btn" :class="{ isOneClick: criminalRecordFlag == 1 }">未化解（{{ whj ?
            whj : "0" }}）</el-button>
          <el-button @click="filterBtn(3)" class="bjnr-btn" :class="{ isOneClick: criminalRecordFlag == 1 }">移交E呼即办（{{
            ysehjb ? ysehjb : "0" }}）</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="address"
            :show-overflow-tooltip="true"
            label="事发地址"
            :key="Math.random()"
          ></el-table-column>
          <el-table-column
            prop="eventTime"
            :show-overflow-tooltip="true"
            label="事发时间"
            :key="Math.random()"
          ></el-table-column>
          <el-table-column
            prop="disputeTypeName"
            :show-overflow-tooltip="true"
            label="纠纷类型"
            :key="Math.random()"
          ></el-table-column>
        <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="address" :show-overflow-tooltip="true" label="事发地址"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="eventTime" :show-overflow-tooltip="true" label="事发时间"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="disputeTypeName" :show-overflow-tooltip="true" label="纠纷类型"
            :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 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)"
              >
              <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 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>
@@ -142,23 +67,23 @@
</template>

<script>
import { initMapPosition } from "@/utils/mapPositionInit";
import { initMapPosition } from "@/utils/mapPositionInit"
import {
  getDisputeRecordList,
  getStatistic,
} from "@/api/contradictionEventShow/index.js";
import { getDictionaryListByCode } from "@/api/rentalInfo/index.js";
} from "@/api/contradictionEventShow/index.js"
import { getDictionaryListByCode } from "@/api/rentalInfo/index.js"

import detailDialog from "./components/detailDialog.vue";
import detailDialog from "./components/detailDialog.vue"

let loading = null;
let loading = null

export default {
  inject: ["userInfo"],

  components: { detailDialog },

  data() {
  data () {
    return {
      handleResult: null,
      yhj: 0,
@@ -178,34 +103,34 @@
      },
      disputeTypeList: [],
      disputeSourceList: [],
    };
    }
  },

  created() {
    const that = this;
  created () {
    const that = this

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

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

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

      this.setTableHeight();
    });
      this.setTableHeight()
    })

    window.addEventListener("resize", this.setTableHeight);
    window.addEventListener("resize", this.setTableHeight)
  },

  computed: {
    positionColor() {
    positionColor () {
      return (row) => {
        if (
          (row.X && row.X != 0) ||
@@ -213,14 +138,14 @@
          (row.longitude && row.longitude != 0) ||
          (row.x && row.x != 0)
        ) {
          return "#1AFA29";
          return "#1AFA29"
        } else {
          return "#ccc";
          return "#ccc"
        }
      };
      }
    },

    positionDisabled() {
    positionDisabled () {
      return (row) => {
        if (
          (row.X && row.X != 0) ||
@@ -228,55 +153,57 @@
          (row.longitude && row.longitude != 0) ||
          (row.x && row.x != 0)
        ) {
          return false;
          return false
        } else {
          return true;
          return true
        }
      };
      }
    },
  },

  methods: {
    // 统计
    getStatistic() {
      var that = this;
    getStatistic () {
      var that = this
      getStatistic({
        disputeType: this.typeValue,
        searchKey: this.searchKey,
      }).then((res) => {
        that.yhj = res.data.data.yhj;
        that.whj = res.data.data.whj;
        that.ysehjb = res.data.data.ysehjb;
      });
        that.yhj = res.data.data.yhj
        that.whj = res.data.data.whj
        that.ysehjb = res.data.data.ysehjb
      })
    },
    // 获取字典列表
    getDictionaryListByCode() {
    getDictionaryListByCode () {
      getDictionaryListByCode("disputeType").then((res) => {
        this.disputeTypeList = res.data.data;
      });
        this.disputeTypeList = res.data.data
      })
      getDictionaryListByCode("disputeSource").then((res) => {
        this.disputeSourceList = res.data.data;
      });
        this.disputeSourceList = res.data.data
      })
      // 矛盾纠纷类型获取
      getDictionaryListByCode("disputeType").then((res) => {
        this.typeOptions = res.data.data;
      });
        this.typeOptions = res.data.data
      })
    },

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

      this.$EventBus.$emit("toPosition", {
        siteJd: lng,
        siteWd: lat,
        siteGd: 200,
      });
      })
      this.$EventBus.$emit("mapClearLayer", {
        layerName: "searchAILayer",
        type: "VectorLayer",
      });
      })
      this.$EventBus.$emit("layerPointAdd", {
        layerName: "searchAILayer",
        type: "billboard",
@@ -287,13 +214,13 @@
          alt: 1,
          url: `/img/icon/location.png`,
        },
      });
      })
    },

    // 点击详情
    goDetail(row) {
      let detailList = [];
      let title = "矛盾纠纷事件详情";
    goDetail (row) {
      let detailList = []
      let title = "矛盾纠纷事件详情"

      detailList = [
        {
@@ -316,7 +243,7 @@
          // value: this.disputeTypeList.find(i => i.dictKey == row.disputeType).dictValue
          value: this.disputeTypeList.some((i) => i.dictKey == row.disputeType)
            ? this.disputeTypeList.find((i) => i.dictKey == row.disputeType)
                .dictValue
              .dictValue
            : "",
          width: "50%",
        },
@@ -340,7 +267,7 @@
          // value: this.disputeSourceList.find(i => i.dictKey == row.source).dictValue
          value: this.disputeSourceList.some((i) => i.dictKey == row.source)
            ? this.disputeSourceList.find((i) => i.dictKey == row.source)
                .dictValue
              .dictValue
            : "",
          width: "50%",
        },
@@ -400,121 +327,121 @@
            row.handleResult == 1
              ? "已化解"
              : row.handleResult == 2
              ? "未化解"
              : row.handleResult == 3
              ? "移送e呼即办"
              : "",
                ? "未化解"
                : row.handleResult == 3
                  ? "移送e呼即办"
                  : "",
          width: "50%",
        },
      ];
      ]

      this.$refs.detailDialog.initOpen(detailList, title, [], []);
      this.$refs.detailDialog.initOpen(detailList, title, [], [])
    },
    // 切换登记类型
    typeChange() {
      this.pages.currentPage = 1;
      this.getList();
      this.getStatistic();
    typeChange () {
      this.pages.currentPage = 1
      this.getList()
      this.getStatistic()
    },
    // 获取列表
    getList() {
      this.loading();
    getList () {
      this.loading()
      let params = {
        handleResult: this.handleResult,
        disputeType: this.typeValue,
        searchKey: this.searchKey,
        size: this.pages.pageSize,
        current: this.pages.currentPage,
      };
      }

      this.getDisputeRecordList(params);
      this.getDisputeRecordList(params)
    },

    // 矛盾纠纷列表
    getDisputeRecordList(params) {
    getDisputeRecordList (params) {
      getDisputeRecordList(params)
        .then((res) => {
          this.tableData = res.data.data.records;
          this.pages.total = res.data.data.total;
          this.tableData = res.data.data.records
          this.pages.total = res.data.data.total
          setTimeout(() => {
            loading && loading.close();
          }, 300);
            loading && loading.close()
          }, 300)
        })
        .catch((error) => {
          setTimeout(() => {
            loading && loading.close();
          }, 300);
        });
            loading && loading.close()
          }, 300)
        })
    },

    // 搜索按钮
    searchBtn() {
      this.pages.currentPage = 1;
      this.getList();
      this.getStatistic();
    searchBtn () {
      this.pages.currentPage = 1
      this.getList()
      this.getStatistic()
    },

    // 清空按钮
    resetBtn() {
      this.searchKey = "";
      this.typeValue = null;
      this.handleResult = null;
      this.pages.currentPage = 1;
      this.getList();
      this.getStatistic();
    resetBtn () {
      this.searchKey = ""
      this.typeValue = null
      this.handleResult = null
      this.pages.currentPage = 1
      this.getList()
      this.getStatistic()
      this.$EventBus.$emit("mapClearLayer", {
        layerName: "searchAILayer",
        type: "VectorLayer",
      });
      })
    },
    filterBtn(handleResult) {
      this.handleResult = handleResult;
      this.getList();
    filterBtn (handleResult) {
      this.handleResult = handleResult
      this.getList()
    },

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

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

    // 表格高度
    setTableHeight() {
    setTableHeight () {
      this.currentTableHeight =
        this.$refs.containerContent.offsetHeight -
        this.$refs.timeSelect.offsetHeight-45;
        this.$refs.timeSelect.offsetHeight - 45
    },

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

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

    window.removeEventListener("resize", this.setTableHeight);
    window.removeEventListener("resize", this.setTableHeight)

    this.$parent.$parent.resize("0px");
    this.$parent.$parent.resize("0px")

    this.$EventBus.$emit("mapClearLayer", {
      layerName: "searchAILayer",
      type: "VectorLayer",
    });
    })
  },
};
}
</script>

<style scoped lang="scss">
@@ -548,7 +475,7 @@

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

  .pages {

 src/views/home/components/dialog/otherPlaceDetailsBox.vue

@@ -17,10 +17,10 @@
          'background-color': '#203c60',
          borderColor: '#324e75',
        }" :cell-style="{
          'text-align': 'center',
          borderColor: '#324e75',
          cursor: 'default',
        }">
  'text-align': 'center',
  borderColor: '#324e75',
  cursor: 'default',
}">
          <template slot="empty">
            <div>{{ landEmptyText }}</div>
          </template>
@@ -128,8 +128,10 @@
    rowClick (row) {
      this.landBeforeClose()

      let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[0]
      let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[1]
      // let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[0]
      // let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[1]
      let lng = row.lng
      let lat = row.lat

      this.$EventBus.$emit("toPosition", {
        siteJd: lng,

 src/views/home/components/dialog/placeDetailsBox.vue

@@ -35,10 +35,10 @@
          'background-color': '#203c60',
          borderColor: '#324e75',
        }" :cell-style="{
          'text-align': 'center',
          borderColor: '#324e75',
          cursor: 'default',
        }">
  'text-align': 'center',
  borderColor: '#324e75',
  cursor: 'default',
}">
          <template slot="empty">
            <div>{{ landEmptyText }}</div>
          </template>
@@ -204,8 +204,10 @@
    rowClick (row) {
      this.landBeforeClose()

      let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[0]
      let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[1]
      // let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[0]
      // let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[1]
      let lng = row.lng
      let lat = row.lat

      this.$EventBus.$emit("toPosition", {
        siteJd: lng,

 src/views/home/components/dialog/riskDetailsBox.vue

@@ -217,8 +217,10 @@
    rowClick (row) {
      this.landBeforeClose()

      let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.x, row.y)[0]
      let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.x, row.y)[1]
      // let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.x, row.y)[0]
      // let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.x, row.y)[1]
      let lng = row.x
      let lat = row.y

      this.$EventBus.$emit("toPosition", {
        siteJd: lng,

 src/views/home/components/leftContainer.vue

@@ -100,12 +100,12 @@
    </div>
    <div class="land-box" style="position: relative;">
      <div class="box">
        <div class="title">现有小区</div>
        <div class="title">现有院落</div>
        <el-main v-loading="landEchartsLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.5)" style="height: calc(100% - 17.6%);">
          <div class="sub-tab" v-show="isAllPoliceStation">
            <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)">
              <div class="tab-title-small">小区:</div>
              <div class="tab-title-small">院落:</div>
              <div class="tab-title-small">{{ villageNum ? villageNum : 0 }}个</div>
            </div>
            <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)">

 src/views/home/index.vue

@@ -1707,7 +1707,7 @@
      this.areaOptions = []
      this.housingOptions = []
      this.areaCheckValue = '请选择责任区'
      this.housingCheckValue = '请选择小区'
      this.housingCheckValue = '请选择院落'

      if (item.name == "全部") {
        this.clearPolygonLayer()

 src/views/house/index.vue

Diff too large

 src/views/policeAlarmRecordsManage/index.vue

@@ -38,11 +38,11 @@
          <el-button @click="filterBtn(2)" class="bjnr-btn" :class="{ isOneClick: criminalRecordFlag == 1 }">已处置（{{ ycz
            ? ycz :
            '0'
            }}）</el-button>
          }}）</el-button>
          <el-button @click="filterBtn(1)" class="bjnr-btn" :class="{ isOneClick: criminalRecordFlag == 1 }">未处置（{{ dcz
            ? dcz :
            '0'
            }}）</el-button>
          }}）</el-button>

        </div>
      </div>
@@ -252,8 +252,11 @@

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


      this.$EventBus.$emit('toPosition', {
        siteJd: lng,

 src/views/positionManage/index.vue

@@ -218,8 +218,11 @@

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


      this.$EventBus.$emit('toPosition', {
        siteJd: lng,

 src/views/practitionersManage/index.vue

@@ -17,8 +17,8 @@
        <div class="search-item-box">
          <span>关键字：</span>

          <el-input style="flex: 1;" size="small" placeholder="请输入（姓名、联系电话、工作场所）" v-model="keyword"
            @change="searchChange" clearable></el-input>
          <el-input style="flex: 1;" size="small" placeholder="请输入（姓名、联系电话、工作场所）" v-model="keyword" @change="searchChange"
            clearable></el-input>
        </div>

        <div class="search-item-box" style="justify-content: center;">
@@ -29,7 +29,7 @@
          <el-button @click="filterBtn" class="bjnr-btn" :class="{ isOneClick: criminalRecordFlag == 1 }">有前科（{{ scycNum
            ? scycNum :
            '0'
            }}）</el-button>
          }}）</el-button>
        </div>
      </div>

@@ -216,8 +216,11 @@

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


      this.$EventBus.$emit('toPosition', {
        siteJd: lng,

 src/views/rentalInfo/index.vue

@@ -1,561 +1,561 @@
<template>
    <div class="site-page-home police-page container">
        <div v-show="boxShow" class="container-content rentall-info-box" ref="containerContent">
            <div class="tab">
                <div v-for="(item, index) in tabList" :key="index" @click="changeTab(item)"
                    :class="{ on: chooseTab == item }">
                    {{ item }}</div>
            </div>
            <div class="list-container">
                <div class="time-select">
                    <div class="search-item-box" v-if="chooseTab != '出租屋管理'">
                        <span>关键字：</span>
  <div class="site-page-home police-page container">
    <div v-show="boxShow" class="container-content rentall-info-box" ref="containerContent">
      <div class="tab">
        <div v-for="(item, index) in tabList" :key="index" @click="changeTab(item)" :class="{ on: chooseTab == item }">
          {{ item }}</div>
      </div>
      <div class="list-container">
        <div class="time-select">
          <div class="search-item-box" v-if="chooseTab != '出租屋管理'">
            <span>关键字：</span>

                        <el-input style="flex: 1;" size="small" placeholder="请输入（姓名或联系电话）" v-model="keyword"
                            @change="searchChange" clearable></el-input>
                    </div>
            <el-input style="flex: 1;" size="small" placeholder="请输入（姓名或联系电话）" v-model="keyword" @change="searchChange"
              clearable></el-input>
          </div>

                    <div class="search-item-box" v-if="chooseTab == '出租屋管理'">
                        <span>用途：</span>
          <div class="search-item-box" v-if="chooseTab == '出租屋管理'">
            <span>用途：</span>

                        <el-select v-model="rentalUseType" clearable placeholder="请选择用途" @change="changeSelect">
                            <el-option v-for="item in rentalUseTypeList" :key="item.dictKey" :label="item.dictValue"
                                :value="item.dictKey">
                            </el-option>
                        </el-select>
                    </div>
            <el-select v-model="rentalUseType" clearable placeholder="请选择用途" @change="changeSelect">
              <el-option v-for="item in rentalUseTypeList" :key="item.dictKey" :label="item.dictValue"
                :value="item.dictKey">
              </el-option>
            </el-select>
          </div>

                    <div class="search-item-box" v-if="chooseTab == '出租屋管理'">
                        <span>租赁期限：</span>
          <div class="search-item-box" v-if="chooseTab == '出租屋管理'">
            <span>租赁期限：</span>

                        <el-select v-model="dldType" clearable placeholder="请选择租赁期限" @change="changeSelect">
                            <el-option v-for="item in dldTypeList" :key="item.dictKey" :label="item.dictValue"
                                :value="item.dictKey">
                            </el-option>
                        </el-select>
                    </div>
            <el-select v-model="dldType" clearable placeholder="请选择租赁期限" @change="changeSelect">
              <el-option v-for="item in dldTypeList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey">
              </el-option>
            </el-select>
          </div>

                    <div class="search-item-box" style="justify-content: center;" v-if="chooseTab != '出租屋管理'">
                        <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
                        <el-button @click="resetSearch" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
                    </div>
                    <div class="search-item-box" style="justify-content: flex-start;" v-if="chooseTab == '租客管理'">
                        <el-button @click="filterBtn" class="bjnr-btn" :class="{ isOneClick: keyManFlag == 3 }">重点人员（{{
            zdryNum }}）</el-button>
                    </div>
                </div>
                <div class="list police-info" ref="tableBox">
                    <el-table :data="tableData" style="width: 100%"
                        :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="chooseTab == '居住证申请'" :key="Math.random()"></el-table-column>
                        <el-table-column prop="phone" :show-overflow-tooltip="true" label="联系电话"
                            v-if="chooseTab == '居住证申请'" :key="Math.random()"></el-table-column>
                        <el-table-column prop="address" :show-overflow-tooltip="true" label="地址"
                            v-if="chooseTab == '居住证申请'" :key="Math.random()"></el-table-column>
                        <el-table-column prop="houseName" :show-overflow-tooltip="true" label="房屋"
                            v-if="chooseTab == '出租屋管理'" :key="Math.random()"></el-table-column>
                        <el-table-column prop="rentalUse" :show-overflow-tooltip="true" label="用途"
                            v-if="chooseTab == '出租屋管理'" :key="Math.random()">
                            <template slot-scope="scope">
                                <div v-if="scope.row.rentalUse == 1">仓库</div>
                                <div v-if="scope.row.rentalUse == 2">办公</div>
                                <div v-if="scope.row.rentalUse == 3">商用</div>
                                <div v-if="scope.row.rentalUse == 4">居住</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="houseStatus" :show-overflow-tooltip="true" label="房屋状态"
                            v-if="chooseTab == '出租屋管理'" :key="Math.random()">
                            <template slot-scope="scope">
                                <div>{{ scope.row.houseStatus == 1 ? '部分出租' : '全部出租' }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" :show-overflow-tooltip="true" label="名称" v-if="chooseTab == '租客管理'"
                            :key="Math.random()"></el-table-column>
                        <el-table-column prop="idCard" :show-overflow-tooltip="true" label="身份证号"
                            v-if="chooseTab == '租客管理'" :key="Math.random()"></el-table-column>
                        <el-table-column prop="phoneNumber" :show-overflow-tooltip="true" label="手机号"
                            v-if="chooseTab == '租客管理'" :key="Math.random()"></el-table-column>
                        <el-table-column width="80" 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">
                        <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>
          <div class="search-item-box" style="justify-content: center;" v-if="chooseTab != '出租屋管理'">
            <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
            <el-button @click="resetSearch" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
          </div>
          <div class="search-item-box" style="justify-content: flex-start;" v-if="chooseTab == '租客管理'">
            <el-button @click="filterBtn" class="bjnr-btn" :class="{ isOneClick: keyManFlag == 3 }">重点人员（{{
              zdryNum }}）</el-button>
          </div>
        </div>
        <detailDialog ref="detailDialog" />
        <div class="list police-info" ref="tableBox">
          <el-table :data="tableData" style="width: 100%"
            :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="chooseTab == '居住证申请'"
              :key="Math.random()"></el-table-column>
            <el-table-column prop="phone" :show-overflow-tooltip="true" label="联系电话" v-if="chooseTab == '居住证申请'"
              :key="Math.random()"></el-table-column>
            <el-table-column prop="address" :show-overflow-tooltip="true" label="地址" v-if="chooseTab == '居住证申请'"
              :key="Math.random()"></el-table-column>
            <el-table-column prop="houseName" :show-overflow-tooltip="true" label="房屋" v-if="chooseTab == '出租屋管理'"
              :key="Math.random()"></el-table-column>
            <el-table-column prop="rentalUse" :show-overflow-tooltip="true" label="用途" v-if="chooseTab == '出租屋管理'"
              :key="Math.random()">
              <template slot-scope="scope">
                <div v-if="scope.row.rentalUse == 1">仓库</div>
                <div v-if="scope.row.rentalUse == 2">办公</div>
                <div v-if="scope.row.rentalUse == 3">商用</div>
                <div v-if="scope.row.rentalUse == 4">居住</div>
              </template>
            </el-table-column>
            <el-table-column prop="houseStatus" :show-overflow-tooltip="true" label="房屋状态" v-if="chooseTab == '出租屋管理'"
              :key="Math.random()">
              <template slot-scope="scope">
                <div>{{ scope.row.houseStatus == 1 ? '部分出租' : '全部出租' }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="name" :show-overflow-tooltip="true" label="名称" v-if="chooseTab == '租客管理'"
              :key="Math.random()"></el-table-column>
            <el-table-column prop="idCard" :show-overflow-tooltip="true" label="身份证号" v-if="chooseTab == '租客管理'"
              :key="Math.random()"></el-table-column>
            <el-table-column prop="phoneNumber" :show-overflow-tooltip="true" label="手机号" v-if="chooseTab == '租客管理'"
              :key="Math.random()"></el-table-column>
            <el-table-column width="80" 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">
            <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>
    </div>
    <detailDialog ref="detailDialog" />
  </div>
</template>

<script>
import { initMapPosition } from '@/utils/mapPositionInit'
import { getTaskResidencePermitApplyList, getHouseRentalList, getHouseholdSelectTenantList, getDictionaryListByCode, selectTenantStatistic,selectTenantPage } from "@/api/rentalInfo/index.js"
import { getTaskResidencePermitApplyList, getHouseRentalList, getHouseholdSelectTenantList, getDictionaryListByCode, selectTenantStatistic, selectTenantPage } from "@/api/rentalInfo/index.js"
import detailDialog from './components/detailDialog.vue'

let loading = null

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

    components: { detailDialog },
  components: { detailDialog },

    data () {
        return {
            zdryNum: 0,
            boxShow: false,
            tabList: ['居住证申请', '出租屋管理', '租客管理'],
            chooseTab: '居住证申请',
            placeName: '',
            typeValue: '',
            typeOptions: [],
  data () {
    return {
      zdryNum: 0,
      boxShow: false,
      tabList: ['居住证申请', '出租屋管理', '租客管理'],
      chooseTab: '居住证申请',
      placeName: '',
      typeValue: '',
      typeOptions: [],

            tableData: [],
      tableData: [],

            pages: {
                total: 0,
                pageSize: 22,
                count: 0,
                currentPage: 1
            },
            rentalUseTypeList: [],
            rentalUseType: '',
            dldType: '',
            dldTypeList: [
                {
                    dictKey: 1,
                    dictValue: '长期'
                },
                {
                    dictKey: 2,
                    dictValue: '中期'
                },
                {
                    dictKey: 3,
                    dictValue: '短期'
                }
            ],
            nationTypeList: [],
            keyManFlag: '',
            keyword: '',
      pages: {
        total: 0,
        pageSize: 22,
        count: 0,
        currentPage: 1
      },
      rentalUseTypeList: [],
      rentalUseType: '',
      dldType: '',
      dldTypeList: [
        {
          dictKey: 1,
          dictValue: '长期'
        },
        {
          dictKey: 2,
          dictValue: '中期'
        },
        {
          dictKey: 3,
          dictValue: '短期'
        }
    },

    created () {
        const that = this

        that.$nextTick(() => {
            initMapPosition()
            this.initTableList()
            this.getDictionaryListByCode()
        })
    },

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

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

    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: {
        selectTenantStatistic () {
            var that = this
            selectTenantStatistic({
                keyword: this.keyword
            }).then(res => {
                that.zdryNum = res.data.data.count
            })
        },
        // 下拉值发生改变
        changeSelect () {
            this.pages.currentPage = 1
            this.initTableList()
        },

        // 点击搜索
        searchBtn () {
            this.pages.currentPage = 1
            this.initTableList()
        },

        // 重置搜索
        resetSearch () {
            this.pages.currentPage = 1
            this.keyword = ''
            this.keyManFlag = ''
            this.initTableList()
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchAILayer',
                type: 'VectorLayer'
            })
        },

        // 重点人员筛选
        filterBtn () {
            if (this.keyManFlag == 3) {
                this.keyManFlag = ''
            } else {
                this.keyManFlag = 3
            }
            this.initTableList()
        },
        // 获取页面所需字典数据
        getDictionaryListByCode () {
            // 用途
            getDictionaryListByCode('rentalUseType').then(res => {
                this.rentalUseTypeList = res.data.data
            })
            // 民族
            getDictionaryListByCode('nationType').then(res => {
                this.nationTypeList = res.data.data
            })
        },

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

            this.$EventBus.$emit('toPosition', {
                siteJd: lng,
                siteWd: lat,
                siteGd: 200
            })
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchAILayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchAILayer',
                type: "billboard",
                params: {
                    ...row,
                    lng: lng,
                    lat: lat,
                    alt: 1,
                    url: `/img/icon/location.png`
                },
            })
        },

        // 列表操作按钮-详情
        async goDetail (row) {
            let detailList = []
            let title = ''
            let tabList = []
            let tableData = []
            if (this.chooseTab == '居住证申请') {
                title = '居住证申请详情'
                detailList = [
                    {
                        label: '名称',
                        value: row.name
                    },
                    {
                        label: '联系电话',
                        value: row.phone
                    },
                    {
                        label: '身份证号',
                        value: row.idCard
                    },
                    {
                        label: '地址',
                        value: row.address
                    },
                    {
                        label: '房东姓名',
                        value: row.landlordName
                    },
                    {
                        label: '房东电话',
                        value: row.landlordPhone
                    },
                    {
                        label: '申请事由',
                        value: row.remak
                    },
                    {
                        label: '申请时间',
                        value: row.createTime
                    },
                    {
                        label: '审核状态',
                        value: row.confirmFlag == 1 ? '待审核' : row.confirmFlag == 3 ? '通过' : row.confirmFlag == 4 ? '驳回' : ''
                    },
                    {
                        label: '审核明细',
                        value: row.checkAnoDesc
                    }
                ]
            } else if (this.chooseTab == '出租屋管理') {
                title = '出租屋详情'
                tabList = ['出租屋信息', '租户列表']
                const { data } = await selectTenantPage({ housingRentalId: row.id })
                tableData = data.data.records
                detailList = [
                    {
                        label: '房屋名称',
                        value: row.houseName
                    },
                    {
                        label: '关系',
                        value: row.tenantRelationship ? (row.tenantRelationship == 1 ? '同一户' : '不同一户') : ''
                    },
                    {
                        label: '房屋状态',
                        value: row.houseStatus ? (row.houseStatus == 1 ? '部分出租' : '全部出租') : ''
                    },
                    {
                        label: '用途',
                        value: this.rentalUseTypeList.some(i => i.dictKey == row.rentalUse) ? this.rentalUseTypeList.find(i => i.dictKey == row.rentalUse).dictValue : ''
                    },
                    {
                        label: '租房时间',
                        value: row.rentalTime
                    },
                    {
                        label: '到期时间',
                        value: row.dueTime
                    },
                    {
                        label: '租赁期限',
                        value: row.dldType == 1 ? '长期' : row.dldType == 2 ? '中期' : row.dldType == 3 ? '短期' : ''
                    },
                    {
                        label: '审核状态',
                        value: row.auditStatus == 1 ? '已确认' : '待确认'
                    }
                ]
            } else if (this.chooseTab == '租客管理') {
                title = '租客详情'
                detailList = [
                    {
                        label: '姓名',
                        value: row.name
                    },
                    {
                        label: '身份证号',
                        value: row.idCard
                    },
                    {
                        label: '民族',
                        value: this.nationTypeList.some(i => i.dictKey == row.ethnicity) ? this.nationTypeList.find(i => i.dictKey == row.ethnicity).dictValue :''
                    },
                    {
                        label: '性别',
                        value: row.gender == 1 ? '男' : '女'
                    },
                    {
                        label: '手机号码',
                        value: row.phoneNumber
                    },
                    {
                        label: '户籍地址',
                        value: row.hukouRegistration
                    },
                    {
                        label: '工作单位',
                        value: row.employer
                    },
                    {
                        label: '小区名称',
                        value: row.aoiName
                    },
                    {
                        label: '审核状态',
                        value: row.confirmFlag == 1 ? '待确认' : '已确认'
                    },
                    {
                        label: '审核明细',
                        value: row.checkAnoDesc
                    }
                ]
            }
            this.$refs.detailDialog.initOpen(detailList, title, tabList, tableData)
        },

        // tab切换事件
        changeTab (item) {
            if (this.chooseTab == item) return
            this.chooseTab = item
            this.resetSearch()
        },

        // 渲染表格数据
        initTableList () {
            this.loading()
            this.tableData = []
            if (this.chooseTab == '居住证申请') {
                this.getTaskResidencePermitApplyList()
            } else if (this.chooseTab == '出租屋管理') {
                this.getHouseRentalList()
            } else if (this.chooseTab == '租客管理') {
                this.getHouseholdSelectTenantList()
                this.selectTenantStatistic()
            }
        },

        // 获得居住证申请记录列表
        getTaskResidencePermitApplyList () {
            getTaskResidencePermitApplyList({ reportType: 2, current: this.pages.currentPage, size: this.pages.pageSize, searchKey: this.keyword }).then(res => {
                this.tableData = res.data.data.records
                this.pages.total = res.data.data.total
                loading && loading.close()
            })
        },

        // 获得出租屋列表
        getHouseRentalList () {
            getHouseRentalList({ current: this.pages.currentPage, size: this.pages.pageSize, dldType: this.dldType, rentalUse: this.rentalUseType }).then(res => {
                this.tableData = res.data.data.records
                this.pages.total = res.data.data.total
                loading && loading.close()
            })
        },

        // 获得租客列表
        getHouseholdSelectTenantList () {
            selectTenantPage({ current: this.pages.currentPage, size: this.pages.pageSize, relationship: 18, checkFlag: this.keyManFlag, searchKey: this.keyword }).then(res => {
                this.tableData = res.data.data.records
                this.pages.total = res.data.data.total
                loading && loading.close()
            })
        },

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

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

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

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

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

        this.$EventBus.$emit('mapClearLayer', {
            layerName: 'searchAILayer',
            type: 'VectorLayer'
        })
      ],
      nationTypeList: [],
      keyManFlag: '',
      keyword: '',
    }
  },

  created () {
    const that = this

    that.$nextTick(() => {
      initMapPosition()
      this.initTableList()
      this.getDictionaryListByCode()
    })
  },

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

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

  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: {
    selectTenantStatistic () {
      var that = this
      selectTenantStatistic({
        keyword: this.keyword
      }).then(res => {
        that.zdryNum = res.data.data.count
      })
    },
    // 下拉值发生改变
    changeSelect () {
      this.pages.currentPage = 1
      this.initTableList()
    },

    // 点击搜索
    searchBtn () {
      this.pages.currentPage = 1
      this.initTableList()
    },

    // 重置搜索
    resetSearch () {
      this.pages.currentPage = 1
      this.keyword = ''
      this.keyManFlag = ''
      this.initTableList()
      this.$EventBus.$emit('mapClearLayer', {
        layerName: 'searchAILayer',
        type: 'VectorLayer'
      })
    },

    // 重点人员筛选
    filterBtn () {
      if (this.keyManFlag == 3) {
        this.keyManFlag = ''
      } else {
        this.keyManFlag = 3
      }
      this.initTableList()
    },
    // 获取页面所需字典数据
    getDictionaryListByCode () {
      // 用途
      getDictionaryListByCode('rentalUseType').then(res => {
        this.rentalUseTypeList = res.data.data
      })
      // 民族
      getDictionaryListByCode('nationType').then(res => {
        this.nationTypeList = res.data.data
      })
    },

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


      this.$EventBus.$emit('toPosition', {
        siteJd: lng,
        siteWd: lat,
        siteGd: 200
      })
      this.$EventBus.$emit('mapClearLayer', {
        layerName: 'searchAILayer',
        type: 'VectorLayer'
      })
      this.$EventBus.$emit('layerPointAdd', {
        layerName: 'searchAILayer',
        type: "billboard",
        params: {
          ...row,
          lng: lng,
          lat: lat,
          alt: 1,
          url: `/img/icon/location.png`
        },
      })
    },

    // 列表操作按钮-详情
    async goDetail (row) {
      let detailList = []
      let title = ''
      let tabList = []
      let tableData = []
      if (this.chooseTab == '居住证申请') {
        title = '居住证申请详情'
        detailList = [
          {
            label: '名称',
            value: row.name
          },
          {
            label: '联系电话',
            value: row.phone
          },
          {
            label: '身份证号',
            value: row.idCard
          },
          {
            label: '地址',
            value: row.address
          },
          {
            label: '房东姓名',
            value: row.landlordName
          },
          {
            label: '房东电话',
            value: row.landlordPhone
          },
          {
            label: '申请事由',
            value: row.remak
          },
          {
            label: '申请时间',
            value: row.createTime
          },
          {
            label: '审核状态',
            value: row.confirmFlag == 1 ? '待审核' : row.confirmFlag == 3 ? '通过' : row.confirmFlag == 4 ? '驳回' : ''
          },
          {
            label: '审核明细',
            value: row.checkAnoDesc
          }
        ]
      } else if (this.chooseTab == '出租屋管理') {
        title = '出租屋详情'
        tabList = ['出租屋信息', '租户列表']
        const { data } = await selectTenantPage({ housingRentalId: row.id })
        tableData = data.data.records
        detailList = [
          {
            label: '房屋名称',
            value: row.houseName
          },
          {
            label: '关系',
            value: row.tenantRelationship ? (row.tenantRelationship == 1 ? '同一户' : '不同一户') : ''
          },
          {
            label: '房屋状态',
            value: row.houseStatus ? (row.houseStatus == 1 ? '部分出租' : '全部出租') : ''
          },
          {
            label: '用途',
            value: this.rentalUseTypeList.some(i => i.dictKey == row.rentalUse) ? this.rentalUseTypeList.find(i => i.dictKey == row.rentalUse).dictValue : ''
          },
          {
            label: '租房时间',
            value: row.rentalTime
          },
          {
            label: '到期时间',
            value: row.dueTime
          },
          {
            label: '租赁期限',
            value: row.dldType == 1 ? '长期' : row.dldType == 2 ? '中期' : row.dldType == 3 ? '短期' : ''
          },
          {
            label: '审核状态',
            value: row.auditStatus == 1 ? '已确认' : '待确认'
          }
        ]
      } else if (this.chooseTab == '租客管理') {
        title = '租客详情'
        detailList = [
          {
            label: '姓名',
            value: row.name
          },
          {
            label: '身份证号',
            value: row.idCard
          },
          {
            label: '民族',
            value: this.nationTypeList.some(i => i.dictKey == row.ethnicity) ? this.nationTypeList.find(i => i.dictKey == row.ethnicity).dictValue : ''
          },
          {
            label: '性别',
            value: row.gender == 1 ? '男' : '女'
          },
          {
            label: '手机号码',
            value: row.phoneNumber
          },
          {
            label: '户籍地址',
            value: row.hukouRegistration
          },
          {
            label: '工作单位',
            value: row.employer
          },
          {
            label: '小区名称',
            value: row.aoiName
          },
          {
            label: '审核状态',
            value: row.confirmFlag == 1 ? '待确认' : '已确认'
          },
          {
            label: '审核明细',
            value: row.checkAnoDesc
          }
        ]
      }
      this.$refs.detailDialog.initOpen(detailList, title, tabList, tableData)
    },

    // tab切换事件
    changeTab (item) {
      if (this.chooseTab == item) return
      this.chooseTab = item
      this.resetSearch()
    },

    // 渲染表格数据
    initTableList () {
      this.loading()
      this.tableData = []
      if (this.chooseTab == '居住证申请') {
        this.getTaskResidencePermitApplyList()
      } else if (this.chooseTab == '出租屋管理') {
        this.getHouseRentalList()
      } else if (this.chooseTab == '租客管理') {
        this.getHouseholdSelectTenantList()
        this.selectTenantStatistic()
      }
    },

    // 获得居住证申请记录列表
    getTaskResidencePermitApplyList () {
      getTaskResidencePermitApplyList({ reportType: 2, current: this.pages.currentPage, size: this.pages.pageSize, searchKey: this.keyword }).then(res => {
        this.tableData = res.data.data.records
        this.pages.total = res.data.data.total
        loading && loading.close()
      })
    },

    // 获得出租屋列表
    getHouseRentalList () {
      getHouseRentalList({ current: this.pages.currentPage, size: this.pages.pageSize, dldType: this.dldType, rentalUse: this.rentalUseType }).then(res => {
        this.tableData = res.data.data.records
        this.pages.total = res.data.data.total
        loading && loading.close()
      })
    },

    // 获得租客列表
    getHouseholdSelectTenantList () {
      selectTenantPage({ current: this.pages.currentPage, size: this.pages.pageSize, relationship: 18, checkFlag: this.keyManFlag, searchKey: this.keyword }).then(res => {
        this.tableData = res.data.data.records
        this.pages.total = res.data.data.total
        loading && loading.close()
      })
    },

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

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

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

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

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

    this.$EventBus.$emit('mapClearLayer', {
      layerName: 'searchAILayer',
      type: 'VectorLayer'
    })
  }
}
</script>

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

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

    &-content {
    .tab {
      width: 40px;

      &>div {
        width: 40px;
        height: 33.3%;
        text-align: center;
        writing-mode: vertical-lr;
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        color: #fff;
        background: $bg-color;
        align-items: center;
        justify-content: center;
        letter-spacing: 6px;
        font-weight: 700;
        background-color: #0838b9e6;
        cursor: pointer;
        border-bottom: 1px solid #3d95f3;
      }

        .tab {
            width: 40px;

            &>div {
                width: 40px;
                height: 33.3%;
                text-align: center;
                writing-mode: vertical-lr;
                display: flex;
                align-items: center;
                justify-content: center;
                letter-spacing: 6px;
                font-weight: 700;
                background-color: #0838b9e6;
                cursor: pointer;
                border-bottom: 1px solid #3d95f3;
            }

            .on {
                background-color: #3b63cde6;
            }
        }

        .list-container {
            width: 0;
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100%;

            .list {
                display: flex;
                flex-direction: column;

                .pages {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }

            .isOneClick {
                color: #fcbd56 !important;
            }
        }
      .on {
        background-color: #3b63cde6;
      }
    }

    .list-container {
      width: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;

      .list {
        display: flex;
        flex-direction: column;

        .pages {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .isOneClick {
        color: #fcbd56 !important;
      }
    }
  }
}
</style>

 src/views/scanOrCode/index.vue

@@ -18,8 +18,7 @@
          <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-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>

@@ -565,8 +564,10 @@

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

      this.$EventBus.$emit('toPosition', {
        siteJd: lng,

 src/views/site/index.vue

@@ -10,89 +10,84 @@
-->

<template>
    <div class="site-page-home police-page container">
        <div v-show="boxShow" class="container-content" ref="containerContent">
  <div class="site-page-home police-page container">
    <div v-show="boxShow" class="container-content" ref="containerContent">

            <div class="time-select" ref="timeSelect">
                <div class="search-item-box">
                    <span>场所类型：</span>
      <div class="time-select" ref="timeSelect">
        <div class="search-item-box">
          <span>场所类型：</span>

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

                <div class="search-item-box">
                    <span>场所名称：</span>

                    <el-input style="flex: 1;" size="small" placeholder="请输入场所名称" v-model="placeName"
                        @change="searchChange" 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 class="search-item-box" style="overflow-wrap: break-word;">
                    <el-button @click="filterBtn(1)" class="bjnr-btn"
                        :class="{ isOneClick: criminalRecordFlag == 1 }">有隐患场所（{{
                            yhcsNum ? yhcsNum :
                                '0'
                        }}）隐患总数（{{ yhNum ? yhNum :
                            '0' }}）</el-button>
                </div>
                <div class="search-item-box" style="overflow-wrap: break-word;">
                    <el-button @click="filterBtn(2)" class="bjnr-btn"
                        :class="{ isOneClick: criminalRecordFlag == 1 }">已整改场所（{{
                            yzgcsNum ? yzgcsNum :
                                '0'
                        }}）已整改隐患（{{ yzgyhNum ? yzgyhNum :
                            '0' }}）</el-button>
                </div>
                <div class="search-item-box" style="overflow-wrap: break-word;">
                    <el-button @click="filterBtn(3)" class="bjnr-btn"
                        :class="{ isOneClick: criminalRecordFlag == 1 }">未整改场所（{{
                            wzgcsNum ? wzgcsNum :
                                '0'
                        }}）未整改隐患（{{ wzgyhNum ? wzgyhNum :
                            '0' }}）</el-button>
                </div>
            </div>

            <div class="list police-info" ref="tableBox">
                <el-table :data="tableData" style="width: 100%"
                    :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="placeName" :show-overflow-tooltip="true" label="场所名称"></el-table-column>
                    <el-table-column prop="location" :show-overflow-tooltip="true" label="场所地址"></el-table-column>
                    <el-table-column prop="nineName" :show-overflow-tooltip="true" label="场所类型"></el-table-column>
                    <el-table-column width="80" 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">
                    <el-pagination background layout="prev, pager, next" :page-size="pages.size" :total="pages.total"
                        :pager-count="4" :current-page="pages.current"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>

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

        <SiteDialogPopup ref="SiteDialogPopup"></SiteDialogPopup>
        <div class="search-item-box">
          <span>场所名称：</span>

          <el-input style="flex: 1;" size="small" placeholder="请输入场所名称" v-model="placeName" @change="searchChange"
            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 class="search-item-box" style="overflow-wrap: break-word;">
          <el-button @click="filterBtn(1)" class="bjnr-btn" :class="{ isOneClick: criminalRecordFlag == 1 }">有隐患场所（{{
            yhcsNum ? yhcsNum :
            '0'
          }}）隐患总数（{{ yhNum ? yhNum :
  '0' }}）</el-button>
        </div>
        <div class="search-item-box" style="overflow-wrap: break-word;">
          <el-button @click="filterBtn(2)" class="bjnr-btn" :class="{ isOneClick: criminalRecordFlag == 1 }">已整改场所（{{
            yzgcsNum ? yzgcsNum :
            '0'
          }}）已整改隐患（{{ yzgyhNum ? yzgyhNum :
  '0' }}）</el-button>
        </div>
        <div class="search-item-box" style="overflow-wrap: break-word;">
          <el-button @click="filterBtn(3)" class="bjnr-btn" :class="{ isOneClick: criminalRecordFlag == 1 }">未整改场所（{{
            wzgcsNum ? wzgcsNum :
            '0'
          }}）未整改隐患（{{ wzgyhNum ? wzgyhNum :
  '0' }}）</el-button>
        </div>
      </div>

      <div class="list police-info" ref="tableBox">
        <el-table :data="tableData" style="width: 100%"
          :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="placeName" :show-overflow-tooltip="true" label="场所名称"></el-table-column>
          <el-table-column prop="location" :show-overflow-tooltip="true" label="场所地址"></el-table-column>
          <el-table-column prop="nineName" :show-overflow-tooltip="true" label="场所类型"></el-table-column>
          <el-table-column width="80" 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">
          <el-pagination background layout="prev, pager, next" :page-size="pages.size" :total="pages.total"
            :pager-count="4" :current-page="pages.current" @current-change="handleCurrentChange"></el-pagination>
        </div>
      </div>

    </div>

    <SiteDialogPopup ref="SiteDialogPopup"></SiteDialogPopup>
  </div>
</template>

<script>
@@ -104,33 +99,33 @@
let JQSmychart = null

let positionColor = [
    global.DC.Namespace.Cesium.Color.fromBytes(255, 97, 97, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 142, 97, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 192, 97, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 58, 242, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(0, 185, 209, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(250, 84, 28, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(221, 255, 97, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(51, 255, 0, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 97, 255, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(97, 255, 181, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(58, 181, 252, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 129, 58, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(58, 252, 236, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(97, 184, 255, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 58, 58, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(97, 113, 255, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(81, 252, 58, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(126, 97, 255, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(168, 252, 58, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(171, 97, 255, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 249, 58, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(210, 97, 255, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 174, 58, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 226, 97, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 97, 176, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(58, 252, 155, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 58, 155, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(255, 97, 97, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(255, 142, 97, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(255, 192, 97, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(252, 58, 242, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(0, 185, 209, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(250, 84, 28, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(221, 255, 97, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(51, 255, 0, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(255, 97, 255, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(97, 255, 181, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(58, 181, 252, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(252, 129, 58, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(58, 252, 236, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(97, 184, 255, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(252, 58, 58, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(97, 113, 255, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(81, 252, 58, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(126, 97, 255, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(168, 252, 58, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(171, 97, 255, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(252, 249, 58, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(210, 97, 255, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(252, 174, 58, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(255, 226, 97, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(255, 97, 176, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(58, 252, 155, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(252, 58, 155, 20),
]
import { initMapPosition } from '@/utils/mapPositionInit'
import { getNineTypeTree, getNinePage, getNineStatisticsNum } from "@/api/site/index.js"
@@ -138,336 +133,338 @@
let loading = null

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

    data () {
        return {
            boxShow: false,
            isDanger: null,
            placeName: '',
            typeValue: '',
            typeOptions: [],
  data () {
    return {
      boxShow: false,
      isDanger: null,
      placeName: '',
      typeValue: '',
      typeOptions: [],

            tableData: [],
            yhcsNum: 0,
            yhNum: 0,
            yzgcsNum: 0,
            yzgyhNum: 0,
            wzgcsNum: 0,
            wzgyhNum: 0,
            pages: {
                current: 1,
                size: 22,
                total: 0,
                count: 0,
            },
            policeStationOptions: []
        }
    },

    created () {
        // 获取九小场所隐患数量统计
        this.getNineStatisticsNum()
        this.getNineTypeTree()
        this.getNinePage()
        const that = this

        that.$nextTick(() => {
            initMapPosition()
        })
        this.getPoliceStationTree(1)
    },

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

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

    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: {
        // 加载首页下拉列表数据
        getPoliceStationTree (type, id = '') {
            var that = this
            getPoliceStationTree(type, id).then(res => {
                if (type == 1) {

                    this.policeStationOptions = res.data.data

                    this.policeStationOptions.unshift({
                        name: '全部',
                        id: 1
                    })

                    this.initPoliceStationLayer()
                }
            })
        },

        // 加载面数据的方法
        initPoliceStationLayer () {
            const that = this
            cylinderLayer = new global.DC.PrimitiveLayer('cylinderLayer')
            global.viewer.addLayer(cylinderLayer)

            DataSourcesArray.forEach(item => {
                global.viewer.dataSources.remove(item, true)
            })

            this.policeStationOptions.forEach((item, index) => {
                if (item.position && item.position.length > 0) {
                    item.position.forEach((sourceItem, sourceIndex) => {

                        const Json = { ...JSON.parse(sourceItem) }

                        global.DC.Namespace.Cesium.GeoJsonDataSource.load(Json, {
                            stroke: positionColor[index],
                            fill: positionColor[index], //注意：颜色必须大写，即不能为blue
                            strokeWidth: 0,
                            clampToGround: false
                        }).then(function (dataSource) {
                            let entities = dataSource.entities.values
                            //修改entity样式
                            for (let i = 0; i < entities.length; i++) {
                                let entity = entities[i]
                                entity.polyline = {
                                    positions: entity.polygon.hierarchy._value.positions,
                                    width: 4,
                                    material: global.DC.Namespace.Cesium.Color.fromCssColorString('#19298d'),
                                    clampToGround: true
                                }
                            }

                            DataSourcesArray.push(dataSource)
                            dataSource.show = true
                            global.viewer.dataSources.add(dataSource)
                        })

                    })
                }
            })
        },
        // 是否有隐患
        filterBtn (isDanger) {
            this.isDanger = isDanger
            this.getNinePage()
        },
        // 获取九小场所隐患数量统计
        getNineStatisticsNum () {
            var that = this
            getNineStatisticsNum({
                nineType: this.typeValue,
                placeName: this.placeName
            }).then(res => {
                const data = res.data.data
                that.yhcsNum = data[0].total
                that.yhNum = data[0].patrolNum
                that.yzgcsNum = data[1].total
                that.yzgyhNum = data[1].patrolNum
                that.wzgcsNum = data[2].total
                that.wzgyhNum = data[2].patrolNum
            })
        },
        getNineTypeTree () {
            getNineTypeTree().then(res => {
                this.typeOptions = res.data.data
            })
        },

        // 切换登记类型
        typeChange () {
            this.pages.current = 1
            this.getNinePage()
            this.getNineStatisticsNum()
        },

        searchChange () {
            if (this.placeName.trim() == '') {
                this.pages.current = 1
                this.getNinePage()
                this.getNineStatisticsNum()
            }
        },

        searchBtn () {
            this.pages.current = 1
            this.getNinePage()
            this.getNineStatisticsNum()
        },

        // 分页处理
        handleCurrentChange (current) {
            this.pages.current = current
            this.getNinePage()
            this.getNineStatisticsNum()
        },

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

        getNinePage () {
            this.loading()

            getNinePage({
                current: this.pages.current,
                size: this.pages.size,
                nineType: this.typeValue,
                placeName: this.placeName,
                isDanger: this.isDanger
            }).then(res => {
                const data = res.data.data

                this.tableData = data.records
                this.pages.total = data.total

                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            }).catch(error => {
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            })
        },

        // 点击定位
        rowClick (row) {
            let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[0]
            let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[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,
                    size: [25.8, 32.4],
                    url: `/img/icon/site.png`,
                    setStyle: {
                        disableDepthTestDistance: Number.POSITIVE_INFINITY
                    }
                },
                incident: this.siteClick
            })
        },

        // 查看详情
        goDetail (row) {
            this.$refs.SiteDialogPopup.initOpen(row)
        },

        siteClick (e) {
            this.$refs.SiteDialogPopup.initOpen(e.overlay.attrParams)
        },

        // 清空按钮-清除图标图层
        clearRow () {
            this.isDanger = null
            this.placeName = null
            this.typeValue = null
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'scanLayer',
                type: 'VectorLayer'
            })
            this.$store.commit('SET_DIALOGDETAILPOPUP', false)
            this.pages.current = 1
            this.getNinePage()
            this.getNineStatisticsNum()
        },

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

    destroyed () {
        DataSourcesArray.forEach(item => {
            global.viewer.dataSources.remove(item, true)
        })

        DataSourcesArray = []

        if (cylinderLayer != null) {
            cylinderLayer.remove()
            cylinderLayer = null
        }

        loading && loading.close()

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

        this.clearRow()
      tableData: [],
      yhcsNum: 0,
      yhNum: 0,
      yzgcsNum: 0,
      yzgyhNum: 0,
      wzgcsNum: 0,
      wzgyhNum: 0,
      pages: {
        current: 1,
        size: 22,
        total: 0,
        count: 0,
      },
      policeStationOptions: []
    }
  },

  created () {
    // 获取九小场所隐患数量统计
    this.getNineStatisticsNum()
    this.getNineTypeTree()
    this.getNinePage()
    const that = this

    that.$nextTick(() => {
      initMapPosition()
    })
    this.getPoliceStationTree(1)
  },

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

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

  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: {
    // 加载首页下拉列表数据
    getPoliceStationTree (type, id = '') {
      var that = this
      getPoliceStationTree(type, id).then(res => {
        if (type == 1) {

          this.policeStationOptions = res.data.data

          this.policeStationOptions.unshift({
            name: '全部',
            id: 1
          })

          this.initPoliceStationLayer()
        }
      })
    },

    // 加载面数据的方法
    initPoliceStationLayer () {
      const that = this
      cylinderLayer = new global.DC.PrimitiveLayer('cylinderLayer')
      global.viewer.addLayer(cylinderLayer)

      DataSourcesArray.forEach(item => {
        global.viewer.dataSources.remove(item, true)
      })

      this.policeStationOptions.forEach((item, index) => {
        if (item.position && item.position.length > 0) {
          item.position.forEach((sourceItem, sourceIndex) => {

            const Json = { ...JSON.parse(sourceItem) }

            global.DC.Namespace.Cesium.GeoJsonDataSource.load(Json, {
              stroke: positionColor[index],
              fill: positionColor[index], //注意：颜色必须大写，即不能为blue
              strokeWidth: 0,
              clampToGround: false
            }).then(function (dataSource) {
              let entities = dataSource.entities.values
              //修改entity样式
              for (let i = 0; i < entities.length; i++) {
                let entity = entities[i]
                entity.polyline = {
                  positions: entity.polygon.hierarchy._value.positions,
                  width: 4,
                  material: global.DC.Namespace.Cesium.Color.fromCssColorString('#19298d'),
                  clampToGround: true
                }
              }

              DataSourcesArray.push(dataSource)
              dataSource.show = true
              global.viewer.dataSources.add(dataSource)
            })

          })
        }
      })
    },
    // 是否有隐患
    filterBtn (isDanger) {
      this.isDanger = isDanger
      this.getNinePage()
    },
    // 获取九小场所隐患数量统计
    getNineStatisticsNum () {
      var that = this
      getNineStatisticsNum({
        nineType: this.typeValue,
        placeName: this.placeName
      }).then(res => {
        const data = res.data.data
        that.yhcsNum = data[0].total
        that.yhNum = data[0].patrolNum
        that.yzgcsNum = data[1].total
        that.yzgyhNum = data[1].patrolNum
        that.wzgcsNum = data[2].total
        that.wzgyhNum = data[2].patrolNum
      })
    },
    getNineTypeTree () {
      getNineTypeTree().then(res => {
        this.typeOptions = res.data.data
      })
    },

    // 切换登记类型
    typeChange () {
      this.pages.current = 1
      this.getNinePage()
      this.getNineStatisticsNum()
    },

    searchChange () {
      if (this.placeName.trim() == '') {
        this.pages.current = 1
        this.getNinePage()
        this.getNineStatisticsNum()
      }
    },

    searchBtn () {
      this.pages.current = 1
      this.getNinePage()
      this.getNineStatisticsNum()
    },

    // 分页处理
    handleCurrentChange (current) {
      this.pages.current = current
      this.getNinePage()
      this.getNineStatisticsNum()
    },

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

    getNinePage () {
      this.loading()

      getNinePage({
        current: this.pages.current,
        size: this.pages.size,
        nineType: this.typeValue,
        placeName: this.placeName,
        isDanger: this.isDanger
      }).then(res => {
        const data = res.data.data

        this.tableData = data.records
        this.pages.total = data.total

        setTimeout(() => {
          loading && loading.close()
        }, 300)
      }).catch(error => {
        setTimeout(() => {
          loading && loading.close()
        }, 300)
      })
    },

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

      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,
          size: [25.8, 32.4],
          url: `/img/icon/site.png`,
          setStyle: {
            disableDepthTestDistance: Number.POSITIVE_INFINITY
          }
        },
        incident: this.siteClick
      })
    },

    // 查看详情
    goDetail (row) {
      this.$refs.SiteDialogPopup.initOpen(row)
    },

    siteClick (e) {
      this.$refs.SiteDialogPopup.initOpen(e.overlay.attrParams)
    },

    // 清空按钮-清除图标图层
    clearRow () {
      this.isDanger = null
      this.placeName = null
      this.typeValue = null
      this.$EventBus.$emit('mapClearLayer', {
        layerName: 'scanLayer',
        type: 'VectorLayer'
      })
      this.$store.commit('SET_DIALOGDETAILPOPUP', false)
      this.pages.current = 1
      this.getNinePage()
      this.getNineStatisticsNum()
    },

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

  destroyed () {
    DataSourcesArray.forEach(item => {
      global.viewer.dataSources.remove(item, true)
    })

    DataSourcesArray = []

    if (cylinderLayer != null) {
      cylinderLayer.remove()
      cylinderLayer = null
    }

    loading && loading.close()

    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 {
    display: flex;
    flex-direction: column;
  display: flex;
  flex-direction: column;

    .pages {
        display: flex;
        align-items: center;
        justify-content: center;
    }
  .pages {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>