社区感知小区商铺数据改为调用单独接口

guanqb

2024-01-26 98e7655a3c6911df603b4f604eb82340d20dddcf

社区感知小区商铺数据改为调用单独接口

 src/api/dept/index.js

@@ -402,4 +402,16 @@
        method: 'get',
        params
    })
}

/**
 * @description:小区商铺
 * @return {*}
 */
export const getBusinessList = (params) => {
    return request({
        url: `/api/blade-place/place/page`,
        method: 'get',
        params
    })
}

 src/components/map/components/businessDataPopup.vue

@@ -29,28 +29,36 @@
                                <div class="label-content">
                                    <div class="item">
                                        <div>名称</div><span>:</span>
                                        <div>{{ businessDataPopupData.name }}</div>
                                        <div>{{ businessDataPopupData.placeName }}</div>
                                    </div>
                                    <div class="item">
                                        <div>类型</div><span>:</span>
                                        <div>{{ businessDataPopupData.third_level }}</div>
                                        <div>{{ businessDataPopupData.labelName }}</div>
                                    </div>
                                    <div class="item">
                                        <div>地址</div><span>:</span>
                                        <div>{{ businessDataPopupData.std_address }}</div>
                                        <div>{{ businessDataPopupData.location }}</div>
                                    </div>
                                    <div class="item">
                                        <div>责任人</div><span>:</span>
                                        <div>{{ businessDataPopupData.principal }}</div>
                                    </div>
                                    <div class="item">
                                        <div>责任人电话</div><span>:</span>
                                        <div>{{ businessDataPopupData.principalPhone }}</div>
                                    </div>
                                    <div class="item">
                                        <div>经度</div><span>:</span>
                                        <div>{{ businessDataPopupData.lng }}</div>
                                        <div>{{ businessDataPopupData.x }}</div>
                                    </div>
                                    <div class="item">
                                        <div>经度</div><span>:</span>
                                        <div>{{ businessDataPopupData.lat }}</div>
                                        <div>{{ businessDataPopupData.y }}</div>
                                    </div>
                                    <div class="item item-pic">
                                        <div>图片</div><span>:</span>
                                        <div>
                                            <img :src="businessDataPopupData.picUrl" width="100%" height="100%" alt />
                                            <img :src="businessDataPopupData.imageUrls" width="100%" height="100%" alt />
                                        </div>
                                    </div>
                                </div>
@@ -258,7 +266,9 @@
            display: flex;
            flex-direction: row;
            width: calc(100% - 20px);
            height: 30px;
            //height: 30px;
            // flex-wrap: wrap;
            white-space: wrap;
            line-height: 30px;
            margin: 0 10px;
            text-align: left;
@@ -295,15 +305,15 @@
            }
        }

        .item:nth-of-type(3) {
            height: 90px;
        // .item:nth-of-type(3) {
        //     height: 90px;

            &>div:nth-of-type(2) {
                word-wrap: break-word;
                white-space: break-spaces;
                width: 190px;
            }
        }
        //     &>div:nth-of-type(2) {
        //         word-wrap: break-word;
        //         white-space: break-spaces;
        //         width: 190px;
        //     }
        // }
    }

    .label-content.no-data {

 src/views/house/index.vue

@@ -383,11 +383,9 @@
                            element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                            element-loading-background="rgba(0, 0, 0, 0.5)" :show-overflow-tooltip="true"
                            @cell-mouse-enter="businessMouseEnter" @cell-mouse-leave="businessMouseLeave">
                            <el-table-column sortable="custom" prop="name" label="名称"
                            <el-table-column sortable="custom" prop="placeName" label="场所名称"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column v-if="isQFL27" prop="third_level" label="类型"></el-table-column>
                            <el-table-column v-if="!isQFL27" prop="x" label="经度"></el-table-column>
                            <el-table-column v-if="!isQFL27" prop="y" label="纬度"></el-table-column>
                            <el-table-column prop="labelName" label="场所类型"></el-table-column>
                        </el-table>
                    </div>
                </div>
@@ -447,29 +445,29 @@
        <div class="business-details" v-show="isBusinessHoverShow">
            <div class="item">
                <div class="key">名称:</div>
                <div class="value">{{ businessChooseItem.name
                <div class="value">{{ businessChooseItem.placeName
                }}</div>
            </div>
            <div class="item">
                <div class="key">类型:</div>
                <div class="value">{{
                    businessChooseItem.third_level
                    businessChooseItem.labelName
                }}</div>
            </div>
            <div class="item">
                <div class="key">地址:</div>
                <div class="value">{{
                    businessChooseItem.std_address
                    businessChooseItem.location
                }}</div>
            </div>
            <div class="item">
                <div class="key">经度:</div>
                <div class="value">{{ businessChooseItem.lng
                <div class="value">{{ businessChooseItem.x
                }}</div>
            </div>
            <div class="item">
                <div class="key">纬度:</div>
                <div class="value">{{ businessChooseItem.lat
                <div class="value">{{ businessChooseItem.y
                }}</div>
            </div>
        </div>
@@ -812,7 +810,6 @@
<script>
let circleLayer = null
let timer = []
let curHousingName = ""

let JQSmychart = null

@@ -831,10 +828,10 @@
    getAoiByPt,
    getSearchExtensivelyHousesdata,
    getPicURL,
    getPersonConnectionConditionByBuildingId
    getPersonConnectionConditionByBuildingId,
    getBusinessList
} from "@/api/dept/index.js"
import { getAlarmList, getAlarmStatistics } from "@/api/home/index.js"
import { businessJs } from "./businessData.js"

let wallLayer = null

@@ -971,14 +968,7 @@
            unitAllArr: [],
            parkingLotData: [],
            comeOutData: [],
            businessData: [
                {
                    name: '测试',
                    third_level: '类型',
                    x: '112.22',
                    y: '23.22'
                }
            ],
            businessData: [],
            keyPersonTitle: "人员详情",
            keyPersonVisible: false,
            personDetailArr: [],
@@ -1060,7 +1050,6 @@
            curHousingHWTXAYjpca: '',
            personConnectionData: [],
            buildingInfo: {},
            isQFL27: true,
            businessChooseItem: {},
            isBusinessHoverShow: false,
            hushiPeoTy: 1,
@@ -1177,6 +1166,19 @@
    updated () { },

    methods: {
        // 获取小区商铺数据
        getBusinessList (aoiId) {
            let params = {
                current: 1,
                size: 10,
                aoiId: 111
            }
            getBusinessList(params).then(res => {
                console.log('getBusinessList', res.data.data.records)
                this.businessData = res.data.data.records
            })
        },

        // 户室人口类型切换
        hushiPeoTyClick (type) {
            this.hushiPeoTy = type
@@ -1186,10 +1188,8 @@

        // 鼠标移入商业数据
        businessMouseEnter (row) {
            if (this.isQFL27) {
                this.isBusinessHoverShow = true
                this.businessChooseItem = row
            }
            this.isBusinessHoverShow = true
            this.businessChooseItem = row
        },

        // 鼠标移出商业数据
@@ -1573,7 +1573,7 @@

                this.villageInfoLoading = false
                console.log('search--------', res.data.result[0])
                // 停车场出入口商场
                // 停车场出入口
                if (
                    res.data.result[0].deep_infos != null &&
                    res.data.result[0].deep_infos.deep_info.length
@@ -1587,45 +1587,11 @@
                            this.comeOutData.push(item)
                        } else if (item.pc_type == 2) {
                            this.parkingLotData.push(item)
                        } else if (item.pc_type == 4) {
                            this.businessData.push(item)
                        }
                    })
                    if (ids == '62556EAF45C31B9DE0530EF4520A0CFC' || ids == '62556EAF4B731B9DE0530EF4520A0CFC' || ids == 'aba5227bc3c16d3fec0f0b1e87f25bbb' || ids == '644A2C4049024A3C8C76D96EEE4366FD') {//小区uid
                        this.isQFL27 = true
                        let sCAoiId = ''//商场aoiId
                        if (ids == '62556EAF45C31B9DE0530EF4520A0CFC') {//指定庆丰路27号天集信江明珠小区uid
                            sCAoiId = '6E5276A05D1611EAB6183C15FB00027B'
                        } else if (ids == '62556EAF4B731B9DE0530EF4520A0CFC') {//指定万达广场uid
                            sCAoiId = '6E513C5E5D1611EAB6183C15FB00027B'
                        } else if (ids == 'aba5227bc3c16d3fec0f0b1e87f25bbb') {//指定万达晶座uid--此路不通因为没deep_infos
                            sCAoiId = 'A425AEC8D3FE4C85937FE36B4F996437'
                        } else if (ids == '644A2C4049024A3C8C76D96EEE4366FD') {//指定万达华府uid
                            sCAoiId = '6E5271B45D1611EAB6183C15FB00027B'
                        }

                        let sCData = []
                        businessJs.forEach(item => {
                            if (item.aoi_id == sCAoiId) {
                                item.name = item.place_name
                                item.x = item.lng
                                item.y = item.lat
                                item.picUrl = 'http://10.141.11.11' + item.url
                                sCData.push(item)
                            }
                            if (sCAoiId == '6E513C5E5D1611EAB6183C15FB00027B' && item.aoi_id == 'A425AEC8D3FE4C85937FE36B4F996437') {//万达晶座并入万达广场
                                item.name = item.place_name
                                item.x = item.lng
                                item.y = item.lat
                                item.picUrl = 'http://10.141.11.11' + item.url
                                sCData.push(item)
                            }
                        })
                        this.businessData = sCData
                    } else {
                        this.isQFL27 = false
                    }
                }
                // 搜索小区商铺数据
                this.getBusinessList(ids)

                this.unitChoosedArr = []
                // 小区楼栋数据
@@ -2128,7 +2094,10 @@
                    url: url,
                },
            })
            if (this.isQFL27) {
            if (params == "business") {
                if (row.imageUrls) {
                    row.imageUrls = 'http://10.141.11.11/place/' + row.imageUrls
                }
                this.$store.commit('SET_BUSINESSDATAPOPUP', true)

                this.$store.commit('SET_BUSINESSDATAPOPUPDATA', {

 src/views/house/index（商铺用接口前）.vue

New file
@@ -0,0 +1,3606 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-09-05 11:13:38
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @Description: 小区-栋-层-房屋
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
-->

<template>
    <div class="house-page container">
        <div v-show="boxShow" class="container-content">
            <div v-show="contentShow" class="search-box">
                <el-popover ref="popover" placement="bottom" trigger="manual" v-model="searchTreeShowFlag"
                    popper-class="tree-search-popup" @mousedown.native="preventFocusLost">
                    <el-tree v-show="searchLazyFlag == true" ref="popupTree" style="overflow: auto;" class="select-tree-box"
                        :load="loadNode" :lazy="true" :props="props" @current-change="currentChangeHandle"
                        @mousedown.native="preventFocusLost"></el-tree>

                    <el-tree v-show="searchLazyFlag == false" :empty-text="treeEmptyText" ref="popupTree"
                        style="overflow: auto;" class="select-tree-box" :data="searchTreeData" :props="defaultProps"
                        :default-expand-all="true" @current-change="currentChangeHandle"
                        @mousedown.native="preventFocusLost"></el-tree>
                </el-popover>

                <el-input ref="searchTreeInput" v-model="searchTreeName" @input="searchInputTree"
                    @focus="searchTreeShowFlag = true" @blur="searchTreeShowFlag = false" v-popover:popover
                    placeholder="请输入搜索条件" style="cursor: pointer;"></el-input>
            </div>

            <div v-show="contentShow" class="result-content" ref="resultContentBox">
                <el-main v-loading="villageInfoLoading" element-loading-background="rgba(0, 0, 0, 0.5)"
                    element-loading-text="数据正在加载中" element-loading-spinner="el-icon-loading"
                    style="overflow:hidden;padding:0px;">
                    <div class="housing-estate-info" ref="housingEstateInfoBox">
                        <div class="housing-title">
                            {{ villageInfo.name }}
                            <div class="progress"></div>
                        </div>
                        <div class="housing-bg">
                            <el-image fit="contain" :src="villageInfo.pic_url"
                                :preview-src-list="villageInfo.pic_url_singleArr">
                                <div slot="error" class="image-slot">暂无照片</div>
                            </el-image>
                            <el-empty :image-size="120" description="暂无照片"
                                v-show="!villageInfo.pic_url && isHaveNoPic == true"></el-empty>
                        </div>
                        <div class="housing-introduce">
                            <div>
                                <div class="l">分类属性：</div>
                                <div class="r">{{ villageInfo.type_name ? villageInfo.type_name : '暂无数据' }}</div>
                            </div>
                            <div>
                                <div class="l">所属辖区：</div>
                                <div class="r">{{ villageInfo.policeStationName ? villageInfo.policeStationName : '暂无数据' }}
                                </div>
                            </div>
                            <div>
                                <div class="l">包干民警：</div>
                                <div class="r">{{ villageInfo.policeName ? villageInfo.policeName : '暂无数据' }}</div>
                            </div>
                            <div>
                                <div class="l">联系方式：</div>
                                <div class="r">{{ villageInfo.policePhone ? villageInfo.policePhone : '暂无数据' }}</div>
                            </div>
                            <div>
                                <div class="l">标准地址：</div>
                                <div class="r">{{ villageInfo.address ? villageInfo.address : '暂无数据' }}</div>
                            </div>
                            <div>
                                <div class="l">人口情况：</div>
                                <div class="p-r">
                                    <div>
                                        <div style="color:#0e88ff">{{ villageInfo.censusRegisterNumber ?
                                            villageInfo.censusRegisterNumber
                                            : '0' }}</div>
                                        <div>户籍人口</div>
                                    </div>
                                    <div>
                                        <div style="color:#71fdf7">{{ villageInfo.realExistenceNumber ?
                                            villageInfo.realExistenceNumber :
                                            '0' }}</div>
                                        <div>实有人口</div>
                                    </div>
                                    <div>
                                        <div style="color:#ff796c">{{ villageInfo.emphasisNumber ?
                                            villageInfo.emphasisNumber :
                                            '0' }}</div>
                                        <div>重点人口</div>
                                    </div>
                                    <div>
                                        <div style="color:#2ba80f">{{ villageInfo.nonageNumber ?
                                            villageInfo.nonageNumber :
                                            '0' }}</div>
                                        <div>未成年人口</div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="l">户室情况：</div>
                                <div class="p-r">
                                    <div>
                                        <div style="color:#2a91f5">{{ villageInfo.busTotalNumber ?
                                            villageInfo.busTotalNumber :
                                            '0' }}</div>
                                        <div>户室总数</div>
                                    </div>
                                    <div>
                                        <div style="color:#eeeeee">{{ villageInfo.uncorrelatedNumber ?
                                            villageInfo.uncorrelatedNumber :
                                            '0' }}</div>
                                        <div>未关联</div>
                                    </div>
                                    <div>
                                        <div style="color:#ee0000">{{ villageInfo.unexaminedNumber ?
                                            villageInfo.unexaminedNumber :
                                            '0' }}</div>
                                        <div>未核实</div>
                                    </div>
                                    <div>
                                        <div style="color:#00ee00">{{ villageInfo.verifiedNumber ?
                                            villageInfo.verifiedNumber
                                            : '0' }}</div>
                                        <div>已核实</div>
                                    </div>
                                </div>
                            </div>
                            <div class="code">
                                <el-image fit="contain" :src="villageInfo.codeUrl"
                                    :preview-src-list="[villageInfo.codeUrl]">
                                    <div slot="error" class="image-slot"></div>
                                </el-image>
                            </div>
                        </div>
                        <!-- 点击展开 -->
                        <div class="house-shrink-unfold-btn" @click="unfoldHouseBox('down')" v-show="!isShowHouseInfoBox"><i
                                class="el-icon-arrow-down"></i>
                        </div>
                        <!-- 点击收缩 -->
                        <div class="house-shrink-unfold-btn" @click="unfoldHouseBox('up')" v-show="isShowHouseInfoBox"><i
                                class="el-icon-arrow-up"></i></div>
                    </div>
                </el-main>

                <div class="nav-tab" ref="navTabBox">
                    <div class="nav" :class="navType == 0 ? 'choosed' : ''" @click="navClick" data-type="0">基本信息</div>
                    <div class="nav" :class="navType == 1 ? 'choosed' : ''" @click="navClick" data-type="1">报警信息</div>
                </div>

                <div class="base-info" v-show="navType == 0">
                    <div class="sub-nav-list">
                        <div class="sub-nav" :class="{ on: subNavType == 1 }" @click="switchSubNav(1)">楼栋</div>
                        <div class="sub-nav" :class="{ on: subNavType == 2 }" @click="switchSubNav(2)">出入口</div>
                        <div class="sub-nav" :class="{ on: subNavType == 3 }" @click="switchSubNav(3)">停车场</div>
                        <div class="sub-nav" :class="{ on: subNavType == 4 }" @click="switchSubNav(4)">商业</div>
                    </div>

                    <div class="floor-content" v-show="subNavType == 1">
                        <el-main v-loading="BuildListLoading" v-show="isShowBuildListBox"
                            element-loading-background="rgba(0, 0, 0, 0.5)" element-loading-text="数据正在加载中"
                            element-loading-spinner="el-icon-loading" style="overflow:hidden;padding:0px;"
                            class="build-item">
                            <div class="build-info" v-show="!BuildListLoading && buildingList.length">
                                <div class="nextBtn" @click="lastBtn" v-show="lastBtnShow == true">
                                    <i class="el-icon-caret-left"></i>
                                </div>
                                <div class="build-outBox" ref="BuildOutBox">
                                    <div class="build-box" style="left: 0px;">
                                        <div class="ridgepole-list" v-for="index of Math.ceil(buildingList.length / 10)"
                                            :key="index">
                                            <div v-for="(item, index) in buildingList.slice((index - 1) * 10, index * 10)"
                                                :key="index" @click="buildingClick(item)"
                                                :class="{ on: buildingChoosed.name == item.name }" :title="item.name">
                                                {{
                                                    item.name
                                                }}
                                                <div @click.stop title="显示/隐藏楼栋高亮">
                                                    <el-checkbox v-model="isBuildHighLightchecked"
                                                        v-show="buildingChoosed.name == item.name"
                                                        @change="changeBuildHighLightchecked"></el-checkbox>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="nextBtn rightBtn" @click="nextBtn">
                                    <i v-show="buildingList.length > 10 && nextBtnShow" class="el-icon-caret-right"></i>
                                </div>
                            </div>
                            <div class="build-info" v-show="!BuildListLoading && !buildingList.length"
                                style="justify-content: center;">暂无楼栋数据</div>
                        </el-main>
                        <div class="ridgepole-info" v-if="isShowHouseBox">
                            <div class="title">楼栋信息</div>
                            <div class="content">
                                <div>
                                    <div>电梯</div>
                                    <div style="color:#59a9ff">{{ floorInfo.elev }}</div>
                                </div>
                                <div v-if="isShowFloorCount">
                                    <div>楼层总数</div>
                                    <div style="color:#59a9ff">{{ floorInfo.floor_num }}</div>
                                </div>
                                <div>
                                    <div>户室总数</div>
                                    <div style="color:#59a9ff">{{ floorInfo.house_num }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="people-info" v-if="isShowHouseBox">
                            <div class="title">人口情况</div>
                            <div class="content">
                                <div class="one">
                                    <div @click="goTOPeopleDetail(1)">
                                        <div style="color:#0e88ff">{{ peopleInfo.registeredPopulation }}</div>
                                        <div>户籍人口</div>
                                    </div>
                                    <div @click="goTOPeopleDetail(2)">
                                        <div style="color:#71fdf7">{{ peopleInfo.actualPopulation }}</div>
                                        <div>实有人口</div>
                                    </div>
                                    <div @click="goTOPeopleDetail(3)">
                                        <div style="color:#ff796c">{{ peopleInfo.KeyPopulation }}</div>
                                        <div>重点人口</div>
                                    </div>
                                    <div @click="goTOPeopleDetail(4)">
                                        <div style="color:#2ba80f">{{ peopleInfo.nonagePeople }}</div>
                                        <div>未成年人口</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="people-info" v-if="isShowHouseBox">
                            <div class="title">户室情况</div>
                            <div class="content">
                                <div class="one">
                                    <div>
                                        <div style="color:#2a91f5">{{ buildingInfo.busTotalNumber ?
                                            buildingInfo.busTotalNumber :
                                            '0' }}</div>
                                        <div>户室总数</div>
                                    </div>
                                    <div>
                                        <div style="color:#eeeeee">{{ buildingInfo.uncorrelatedNumber ?
                                            buildingInfo.uncorrelatedNumber :
                                            '0' }}</div>
                                        <div>未关联</div>
                                    </div>
                                    <div>
                                        <div style="color:#ee0000">{{ buildingInfo.unexaminedNumber ?
                                            buildingInfo.unexaminedNumber :
                                            '0' }}</div>
                                        <div>未核实</div>
                                    </div>
                                    <div>
                                        <div style="color:#00ee00">{{ buildingInfo.verifiedNumber ?
                                            buildingInfo.verifiedNumber
                                            : '0' }}</div>
                                        <div>已核实</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="house-element-info" v-if="isShowHouseBox">
                            <!-- 选择单元 -->
                            <div class="condo" v-show="isShowUnitChoose">
                                <div class="type">选择单元</div>
                                <div class="type-select">
                                    <el-select size="small" v-model="unitValue" placeholder="请选择" @change="chooseUnit">
                                        <el-option v-for="item in unitOptions" :key="item.value" :label="item.label"
                                            :value="item.value" class="unit-option"></el-option>
                                    </el-select>
                                </div>
                            </div>
                            <!-- <div class="legend">
                                <div class="type">户室图例</div>
                                <div class="type-val">
                                    <div>
                                        <span
                                            style="width: 10px; height: 10px; background: #eeeeee; border-radius: 50%;"></span>
                                        未关联
                                    </div>
                                    <div>
                                        <span
                                            style="width: 10px; height: 10px; background: #ee0000; border-radius: 50%;"></span>
                                        未核实
                                    </div>
                                    <div>
                                        <span
                                            style="width: 10px; height: 10px; background: #00ee00; border-radius: 50%;"></span>
                                        已核实
                                    </div>
                                </div>
                            </div> -->
                            <el-main v-loading="pictLoading" element-loading-background="rgba(0, 0, 0, 0.5)"
                                element-loading-text="数据正在加载中" element-loading-spinner="el-icon-loading"
                                class="resident-box">
                                <div class="floor-outBox">
                                    <div @click="lastFloorBtn" class="floorBtn" v-show="lastFloorShow">
                                        <i class="el-icon-caret-left"></i>
                                    </div>
                                    <div class="floor-box">
                                        <div class="floor-num" style="left: 0;">
                                            <div :class="{ on: floorsType == index }" @click="floorsType = index"
                                                v-for="index in Math.ceil(unitChoosedArr.length / 5)" :key="index">
                                                {{ unitChoosedArr[index * 5 - 5].sname }}{{ unitChoosedArr[index * 5
                                                    - 5].sname ==
                                                    unitChoosedArr[unitChoosedArr.length - 1].sname ? '' : '-' }}{{
        unitChoosedArr[index *
        5
        - 1] ? (unitChoosedArr[index * 5
            - 1].sname) : (unitChoosedArr[index * 5 - 5].sname ==
                unitChoosedArr[unitChoosedArr.length - 1].sname
                ? '' : unitChoosedArr[unitChoosedArr.length - 1].sname)
    }}层
                                            </div>
                                        </div>
                                    </div>
                                    <div @click="nextFloorBtn" class="floorBtn rightFloorBtn" v-show="nextFloorShow">
                                        <i class="el-icon-caret-right"></i>
                                    </div>
                                </div>
                                <div class="floor-detail" v-show="!pictLoading && isHaveResidentData">
                                    <div v-for="(item, index) in unitChoosedArr.slice((floorsType - 1) * 5, floorsType * 5)"
                                        :key="index">
                                        <div class="title">{{ item.sname }}层：</div>
                                        <div class="detail">
                                            <div v-for="(value, index) in item.children_infos" :key="index"
                                                @click="residentDetailsClick(value)"
                                                :class="{ on: floorChoosed == value.sname }">{{ value.sname }}室
                                                <div class="flow"
                                                    :class="[value.isBus == '1' ? 'red' : '', value.isBus == '2' ? 'grey' : '', value.isBus == '3' ? 'green' : '']">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="floor-detail" v-show="!pictLoading && !isHaveResidentData"
                                    style="display: flex;justify-content: center;align-items: center;">暂无户室数据</div>
                            </el-main>
                        </div>
                    </div>

                    <div class="come-out-content" :class="{ 'come-out-content-long': !isShowHouseInfoBox }"
                        v-show="subNavType == 2">
                        <el-table :data="comeOutData" style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            :row-class-name="tableRowClassName" @row-click="deepDataRowClick($event, 'comeOut')"
                            :empty-text="houseDeepNoDataText" v-loading="houseDeepLoading" element-loading-text="拼命加载中"
                            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                            <el-table-column prop="name" label="名称" width="180"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="x" label="经度" width="100"></el-table-column>
                            <el-table-column prop="y" label="纬度" width="100"></el-table-column>
                        </el-table>
                    </div>

                    <div class="park-content" :class="{ 'come-out-content-long': !isShowHouseInfoBox }"
                        v-show="subNavType == 3">
                        <el-table :data="parkingLotData" style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            :row-class-name="tableRowClassName" @row-click="deepDataRowClick($event, 'park')"
                            :empty-text="houseDeepNoDataText" v-loading="houseDeepLoading" element-loading-text="拼命加载中"
                            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                            <el-table-column prop="name" label="名称" width="180"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="x" label="经度" width="100"></el-table-column>
                            <el-table-column prop="y" label="纬度" width="100"></el-table-column>
                        </el-table>
                    </div>

                    <div class="business-content" :class="{ 'come-out-content-long': !isShowHouseInfoBox }"
                        v-show="subNavType == 4">
                        <el-table :data="businessData" style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            :row-class-name="tableRowClassName" @row-click="deepDataRowClick($event, 'business')"
                            @sort-change="sortDevName" :empty-text="houseDeepNoDataText" v-loading="houseDeepLoading"
                            element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                            element-loading-background="rgba(0, 0, 0, 0.5)" :show-overflow-tooltip="true"
                            @cell-mouse-enter="businessMouseEnter" @cell-mouse-leave="businessMouseLeave">
                            <el-table-column sortable="custom" prop="name" label="名称"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column v-if="isQFL27" prop="third_level" label="类型"></el-table-column>
                            <el-table-column v-if="!isQFL27" prop="x" label="经度"></el-table-column>
                            <el-table-column v-if="!isQFL27" prop="y" label="纬度"></el-table-column>
                        </el-table>
                    </div>
                </div>

                <div class="police-info" v-if="navType == 1" ref="policeTableBox">
                    <el-main v-loading="policeInfoLoading" element-loading-text="拼命加载中"
                        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                        <div class="select-type">
                            <el-date-picker :clearable="false" v-model="eventTime" type="daterange" align="right"
                                unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                @change="caseTimeChange" :picker-options="pickerOptions"></el-date-picker>
                            <el-select v-model="typeValue" @change="changeJQType" placeholder="请选择" class="type-select-css">
                                <el-option v-for="item in policeInforOptions" :key="item.value" :label="item.label"
                                    :value="item.value" class="option-css"></el-option>
                            </el-select>
                        </div>
                        <div class="jq-tab">
                            <div :class="{ choosed: jqType == 0 }" @click="jqTabClick(0)">明细</div>
                            <div :class="{ choosed: jqType == 1 }" @click="jqTabClick(1)">统计图</div>
                        </div>
                        <div v-show="jqType == 0">
                            <el-table :data="callPoliceData" style="width: 100%" :height="currentTableHeight"
                                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                                :row-class-name="tableRowClassName" :empty-text="jqNoDataText" class="police-infor-table"
                                @cell-click="housingPoliceSiteClick">
                                <el-table-column prop="JJDWMC" :show-overflow-tooltip="true" label="接警单位"
                                    min-width="80%"></el-table-column>
                                <el-table-column label="报警时间" prop="BJSJ" min-width="50%"></el-table-column>
                                <el-table-column prop="jqlxName" :show-overflow-tooltip="true"
                                    label="报警类型"></el-table-column>
                                <el-table-column label="操作" align="center" min-width="36%">
                                    <template slot-scope="scope">
                                        <el-button v-if="!whetherPosition(scope.row)" @click="clickData(scope.row)"
                                            type="text" size="small" title="定位">
                                            <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <div class="pages all-pagination-sty" ref="ElPagination">
                                <el-pagination background layout="prev, pager, next" :page-size="callPolicePage.pageSize"
                                    :page-count="callPolicePage.count" :current-page="callPolicePage.currentPage"
                                    @current-change="handleCurrentChange"></el-pagination>
                            </div>
                        </div>
                        <div v-show="jqType == 1">
                            <div class="echarts-box" id="JQSEchart"></div>
                        </div>
                    </el-main>
                </div>
            </div>
        </div>

        <!-- 商业数据详情弹窗 -->
        <div class="business-details" v-show="isBusinessHoverShow">
            <div class="item">
                <div class="key">名称:</div>
                <div class="value">{{ businessChooseItem.name
                }}</div>
            </div>
            <div class="item">
                <div class="key">类型:</div>
                <div class="value">{{
                    businessChooseItem.third_level
                }}</div>
            </div>
            <div class="item">
                <div class="key">地址:</div>
                <div class="value">{{
                    businessChooseItem.std_address
                }}</div>
            </div>
            <div class="item">
                <div class="key">经度:</div>
                <div class="value">{{ businessChooseItem.lng
                }}</div>
            </div>
            <div class="item">
                <div class="key">纬度:</div>
                <div class="value">{{ businessChooseItem.lat
                }}</div>
            </div>
        </div>
        <map-search-box></map-search-box>

        <el-dialog title="报警信息" :visible.sync="policeSituationVisible" :modal-append-to-body="false" :modal="true"
            :close-on-click-modal="false" :before-close="policeSituationBeforeClose" class="policeSituation-details-box">
            <div class="box">
                <div class="item">
                    <div>接警单位编号:</div>
                    <div>{{ policeSituationDetailObj.JJDWBH }}</div>
                </div>
                <div class="item">
                    <div>接警单位名称:</div>
                    <div>{{ policeSituationDetailObj.JJDWMC }}</div>
                </div>
                <div class="item">
                    <div>接警单编号:</div>
                    <div>{{ policeSituationDetailObj.JJDBH }}</div>
                </div>
                <div class="item">
                    <div>接警员编号:</div>
                    <div>{{ policeSituationDetailObj.JJYBH }}</div>
                </div>
                <div class="item">
                    <div>接警员姓名:</div>
                    <div>{{ policeSituationDetailObj.JJYXM }}</div>
                </div>
                <div class="item">
                    <div>报警时间:</div>
                    <div>{{ policeSituationDetailObj.BJSJ }}</div>
                </div>
                <div class="item">
                    <div>报警电话:</div>
                    <div>{{ policeSituationDetailObj.LXDH }}</div>
                </div>
                <div class="item">
                    <div>报警人姓名:</div>
                    <div>{{ policeSituationDetailObj.BJRXM }}</div>
                </div>
                <div class="item">
                    <div>报警类别:</div>
                    <div>{{ policeSituationDetailObj.BJLB }}</div>
                </div>

                <div class="item">
                    <div>报警类型:</div>
                    <div>{{ policeSituationDetailObj.jqlxName }}</div>
                </div>

                <div class="dialog-content">
                    <div>事发地址:</div>
                    <div>{{ policeSituationDetailObj.SFDZ }}</div>
                </div>

                <div class="dialog-content">
                    <div>报警内容:</div>
                    <div>{{ policeSituationDetailObj.BJNR }}</div>
                </div>

                <div class="dialog-content">
                    <div>备注:</div>
                    <div>{{ policeSituationDetailObj.MEMO }}</div>
                </div>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="residentDetailsShow" :modal-append-to-body="false" :modal="true"
            :close-on-click-modal="false" :before-close="residentDetailsClose" class="resident-details-box">
            <div class="house-info-box">
                <div class="house-title">{{ residentDetailsTitle }}</div>
                <div class="mini-code">
                    <el-image fit="contain" :src="residentCodeUrl" :preview-src-list="[residentCodeUrl]">
                        <div slot="error" class="image-slot"></div>
                    </el-image>
                </div>
            </div>
            <div class="table-box">
                <div class="type-tab-box">
                    <div class="tab-item" :class="{ 'tab-choose-item': hushiPeoTy == 1 }" @click="hushiPeoTyClick(1)">
                        户籍人口</div>
                    <div class="tab-item" :class="{ 'tab-choose-item': hushiPeoTy == 2 }" @click="hushiPeoTyClick(2)">
                        实有人口</div>
                    <div class="tab-item" :class="{ 'tab-choose-item': hushiPeoTy == 3 }" @click="hushiPeoTyClick(3)">其他
                    </div>
                    <div v-show="isShowPayInfo" class="tab-item" :class="{ 'tab-choose-item': hushiPeoTy == 4 }"
                        @click="hushiPeoTyClick(4)">交易信息
                    </div>
                </div>
                <el-table :data="houseDate"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" v-loading="residentLoading"
                    element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(17, 38, 163, 1)" :empty-text="residentNoDataText"
                    v-if="!isShowPayInfo && hushiPeoTy != 4">
                    <el-table-column prop="realName" label="姓名">
                        <template slot-scope="scope">
                            <span :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">
                                {{
                                    scope.row.realName }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="phone" label="电话">
                        <template slot-scope="scope">
                            <span :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">
                                {{
                                    scope.row.phone }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="cardNo" label="身份证号" width="200">
                        <template slot-scope="scope">
                            <span :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">
                                {{
                                    scope.row.cardNo }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="relation" label="户主关系">
                        <template slot-scope="scope">
                            <span :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">
                                {{
                                    scope.row.relation }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="censusAddress" label="户籍地址">
                        <template slot-scope="scope">
                            <span :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">
                                {{
                                    scope.row.censusAddress }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="人口类型">
                        <template slot-scope="scope">
                            <span :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">
                                {{
                                    scope.row.personType == 1 ? '户籍人口' : '实有人口' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="是否未成年">
                        <template slot-scope="scope">
                            <span :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">
                                {{
                                    scope.row.isNonage == 1 ? '是' : '否' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注">
                        <template slot-scope="scope">
                            <span :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">
                                {{
                                    scope.row.zdryxl
                                }}
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table :data="houseDate"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" v-loading="residentLoading"
                    element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(17, 38, 163, 1)" :empty-text="residentNoDataText"
                    v-if="isShowPayInfo && hushiPeoTy != 4">
                    <el-table-column prop="realName" label="姓名">
                        <template slot-scope="scope">
                            <span :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">
                                {{
                                    scope.row.realName }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="phone" label="电话">
                        <template slot-scope="scope">
                            <span :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">
                                {{
                                    scope.row.phone }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="cardNo" label="身份证号" width="200">
                        <template slot-scope="scope">
                            <span :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">
                                {{
                                    scope.row.cardNo }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="relation" label="户主关系">
                        <template slot-scope="scope">
                            <span :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">
                                {{
                                    scope.row.relation }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="censusAddress" label="户籍地址">
                        <template slot-scope="scope">
                            <span :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">
                                {{
                                    scope.row.censusAddress }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="人口类型">
                        <template slot-scope="scope">
                            <span :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">
                                {{
                                    scope.row.personType == 1 ? '户籍人口' : '实有人口' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="是否未成年">
                        <template slot-scope="scope">
                            <span :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">
                                {{
                                    scope.row.isNonage == 1 ? '是' : '否' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注">
                        <template slot-scope="scope">
                            <span :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">
                                {{
                                    scope.row.zdryxl
                                }}
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table :data="payInfoDate"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" v-loading="residentLoading"
                    element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(17, 38, 163, 1)" :empty-text="residentNoDataText"
                    v-if="isShowPayInfo && hushiPeoTy == 4">
                    <el-table-column prop="transaction_object" label="交易对象">
                        <template slot-scope="scope">
                            <span>
                                {{
                                    scope.row.transaction_object }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="transaction_object_tel" label="手机号">
                        <template slot-scope="scope">
                            <span>
                                {{
                                    scope.row.transaction_object_tel }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="task_name" label="交易内容">
                        <template slot-scope="scope">
                            <span>
                                {{
                                    scope.row.task_name }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="transaction_money" label="交易金额">
                        <template slot-scope="scope">
                            <span>
                                {{
                                    scope.row.transaction_money }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="goods_nums" label="交易数量">
                        <template slot-scope="scope">
                            <span>
                                {{
                                    scope.row.goods_nums }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="happen_time" label="发生时间">
                        <template slot-scope="scope">
                            <span>
                                {{
                                    scope.row.happen_time }}
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>

        <el-dialog :title="keyPersonTitle" :visible.sync="keyPersonVisible" :modal-append-to-body="false" :modal="true"
            :close-on-click-modal="false" :before-close="keyPersonBeforeClose" class="keyPerson-details-box-two">
            <div class="header">
                <div>
                    姓名：
                    <input type="text" v-model="peopleName" placeholder="请输入人员姓名" />
                </div>
                <div>
                    联系电话：
                    <input type="text" v-model="callPhone" placeholder="请输入联系电话" />
                </div>
                <el-button type="primary" icon="el-icon-search" @click="searchPeopleDetail">搜索</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="clearPeopleDetailSearchValue">清空</el-button>
            </div>
            <el-main v-loading="keyPeopleLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.5)">
                <el-table :data="personDetailArr" style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
                    :empty-text="peopleNoDataText">
                    <el-table-column label="序号" type="index" width="50" align="center">
                        <template slot-scope="scope">
                            <span>{{ (peoplePage.currentPage - 1) * peoplePage.pageSize + scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="zdryxl" label="重点人员类型" v-if="keyPeopleType == 3"></el-table-column>
                    <el-table-column prop="realName" label="姓名"></el-table-column>
                    <el-table-column prop="cardNo" label="身份证号"></el-table-column>
                    <el-table-column prop="isNonage" label="是否未成年">
                        <template slot-scope="scope">{{ scope.row.isNonage == 1 ? '是' : '否' }}</template>
                    </el-table-column>
                    <el-table-column label="户室">
                        <template slot-scope="scope">{{ scope.row.reAddress.split(villageInfo.name)[1] }}</template>
                    </el-table-column>
                    <el-table-column prop="phone" label="电话"></el-table-column>
                    <el-table-column prop="policeStationName" label="所属派出所"></el-table-column>
                    <el-table-column prop="areaName" label="所属责任区"></el-table-column>
                </el-table>
                <div class="pages all-pagination-sty" ref="tablePagination" v-show="!keyPeopleLoading">
                    <el-pagination background layout="prev, pager, next" :page-size="peoplePage.pageSize"
                        :total="peoplePage.total" :current-page="peoplePage.currentPage"
                        @current-change="peopleHandleCurrentChange"></el-pagination>
                </div>
            </el-main>
        </el-dialog>
    </div>
</template>

<script>
let circleLayer = null
let timer = []
let curHousingName = ""

let JQSmychart = null

import {
    getSearchExtensively,
    getHouses,
    getSearchExtensivelyBgAoiDeepdata,
    getPoliceStationLazyTree,
    getPoliceStationTrees,
    getVillageInfo,
    getVillagePersonStatisticInfoByBuildId,
    getVillagePersonInfo,
    getResidentialQuartersInfo,
    getAoiByBgId,
    getPoliceSationVillageInfo,
    getAoiByPt,
    getSearchExtensivelyHousesdata,
    getPicURL,
    getPersonConnectionConditionByBuildingId
} from "@/api/dept/index.js"
import { getAlarmList, getAlarmStatistics } from "@/api/home/index.js"
import { businessJs } from "./businessData.js"

let wallLayer = null

export default {
    inject: ["userInfo"],

    data () {
        return {
            isShowPayInfo: false,
            isShowHouseInfoBox: true,
            typeValue: '',
            jqType: 0,
            policeInforOptions: [
                {
                    value: '',
                    label: '全部'
                },
                {
                    value: '盗窃',
                    label: '盗窃'
                },
                {
                    value: '涉诈',
                    label: '涉诈'
                },
                {
                    value: '纠纷',
                    label: '纠纷'
                },
                {
                    value: '涉赌',
                    label: '涉赌'
                },
                {
                    value: '涉毒',
                    label: '涉毒'
                },
                {
                    value: '涉黄',
                    label: '涉黄'
                },
                {
                    value: '求助',
                    label: '求助'
                },
                {
                    value: '其他',
                    label: '其他'
                }
            ],
            isShowFloorCount: false,
            isBuildHighLightchecked: true,
            isShowBuildListBox: true,
            // 下拉搜索--树状数据相关
            searchTreeShowFlag: false,
            houseDeepLoading: false,
            peopleNoDataText: ' ',
            jqNoDataText: ' ',
            residentNoDataText: ' ',
            houseDeepNoDataText: ' ',
            keyPeopleLoading: false,
            policeInfoLoading: false,
            isHaveNoPic: false,
            residentLoading: false,
            searchTreeName: "",
            searchTreeData: [],
            props: {
                children: "zones", //代表children为子级
                label: "name", //根据name渲染tree列表
                isLeaf: "leaf",
            },
            defaultProps: {
                children: "children", //代表children为子级
                label: "name", //根据name渲染tree列表
            },
            searchLazyFlag: true,
            treeEmptyText: "",

            contentShow: true,
            unitOptions: [{ value: 1, label: "1单元" }],
            unitValue: '',
            searchHouse: "",
            navType: 0,

            comeoutArr: [
                { name: "入口1", position: "北门", type: "正门" },
                { name: "入口2", position: "南门", type: "后门" },
                { name: "入口3", position: "西门", type: "侧门" },
            ],
            parkArr: [
                { name: "停车场1", position: "北门", type: "地面停车场" },
                { name: "停车场2", position: "南门", type: "地面停车场" },
                { name: "停车场3", position: "西门", type: "地下停车场" },
            ],
            businessArr: [
                { name: "商铺1", position: "北门", type: "超市" },
                { name: "商铺2", position: "南门", type: "水果店" },
                { name: "商铺3", position: "西门", type: "快递站" },
            ],
            arrTitle: [
                { title: "警务名称" },
                { title: "警务时间" },
                { title: "警务类型" },
                { title: "责任警员" },
                { title: "涉案金额" },
                { title: "所属辖区" },
                { title: "处理时长" },
                { title: "案件级别" },
            ],
            policeSituationVisible: false,
            JWdetails: {},
            residentDetailsTitle: "",
            residentDetailsShow: false,
            lastBtnShow: false,
            nextBtnShow: true,
            floorsType: 1,
            subNavType: 1,
            lastFloorShow: false,
            nextFloorShow: true,
            houseDate: [],
            payInfoDate: [{
                transaction_object: '王强',
                transaction_object_tel: 13977351552,
                task_name: '黄金买卖',
                transaction_money: 4600.00,
                goods_nums: 10,
                happen_time: '2023/10/7 15:40:32',
            }],
            boxShow: false,

            buildingList: [],
            buildingChoosed: {},
            unitChoosedArr: [],
            unitAllArr: [],
            parkingLotData: [],
            comeOutData: [],
            businessData: [
                {
                    name: '测试',
                    third_level: '类型',
                    x: '112.22',
                    y: '23.22'
                }
            ],
            keyPersonTitle: "人员详情",
            keyPersonVisible: false,
            personDetailArr: [],

            // 报警信息
            policeSituationHistoryArr: [],

            // 详情
            policeSituationDetailObj: {},

            callPolicePage: {
                total: 0,
                pageSize: 15,
                count: 0,
                currentPage: 1,
            },

            // table高度
            currentTableHeight: 0,
            villageInfo: {
                pic_url: "",
                pic_url_list: [],
            },
            floorInfo: {},
            peopleInfo: {},
            choosedBuildUid: "",
            choosedBuildStdId: "",
            keyPeopleType: "",
            peoplePage: {
                total: 0,
                pageSize: 0,
                currentPage: 1,
            },
            peopleName: "",
            callPhone: "",
            pictLoading: false,
            isShowHouseBox: false,
            floorChoosed: {},
            isShowUnitChoose: false,
            isShowPictArrow: "never",
            villageInfoLoading: false,
            BuildListLoading: false,
            isHaveResidentData: false,
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit("pick", [start, end])
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                            picker.$emit("pick", [start, end])
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                            picker.$emit("pick", [start, end])
                        },
                    },
                ],
            },
            eventTime: [],
            eventTimeArr: [],
            residentCodeUrl: '',
            unitChoosed3DList: [],
            curHousingHWTXAYjpca: '',
            personConnectionData: [],
            buildingInfo: {},
            isQFL27: true,
            businessChooseItem: {},
            isBusinessHoverShow: false,
            hushiPeoTy: 1,
            residentIdSave: '',
        }
    },

    computed: {
        whetherPosition () {
            return (row) => {
                return !(row.ZDDWXZB && row.ZDDWXZB != 0 && row.ZDDWYZB && row.ZDDWYZB != 0)
            }
        },

        positionColor () {
            return (row) => {
                if (row.ZDDWXZB && row.ZDDWXZB != 0 && row.ZDDWYZB && row.ZDDWYZB != 0) {
                    return "#1AFA29"
                } else {
                    return "#ccc"
                }
            }
        }
    },

    created () {
        // 首页跳转社区包含参数
        if (this.$route.query.id) {
            this.getVillageInfo(this.$route.query.id)
            // 使用首页传过来的小区id获取停车场出入口商场和 小区名称类型地址数据
            // 原来 361100  临时361102
            this.getSearchExtensivelyBgAoiDeepdata(
                "ebf48ecaa1fd436fa3d40c4600aa051f",
                "361100",
                this.$route.query.id,
                "1|3"
            )
        } else {
            const data = {
                deptId: this.userInfo.dept_id,
            }
            // 获得对应派出所默认展示小区
            getPoliceSationVillageInfo(data).then((res) => {
                let villageId = res.data.data.aoiId
                // villageId = '6E5276A05D1611EAB6183C15FB00027B'//27号
                // let villageId = '62556EAF45C31B9DE0530EF4520A0CFC'//27号F12-bg_id-uid???不是三段？aba5227bc3c16d3fec0f0b1e87f25bbb
                // let villageId = 'aba5227bc3c16d3fec0f0b1e87f25bbb'//晶座uid不行？aba5227bc3c16d3fec0f0b1e87f25bbb
                // let villageId = res.data.data.Md5Id
                //直接进入社区 默认获取万达广场的包干民警及所属辖区

                this.getVillageInfo(villageId)

                // 大搜之搜索面详细数据（停车场出入口商场）--默认万达华府
                this.getSearchExtensivelyBgAoiDeepdata(
                    "ebf48ecaa1fd436fa3d40c4600aa051f",
                    "361100",
                    villageId,
                    "1|3"
                )
            })
        }

        const that = this

        this.$EventBus.$on("housingPoliceSiteClick", (params) => {
            that.housingPoliceSiteClick(params)
        })

        this.$EventBus.$on("showHouseingTileset", (params) => {
            that.showHouseingTileset(params)
        })

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

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

        this.$nextTick(() => {
            this.$EventBus.$emit('highOrLightChange', 'light', 'house')

            this.$EventBus.$emit('registerMxClick', this.getAoiByPtStd)


            circleLayer = new global.DC.PrimitiveLayer("circleLayer")
            global.viewer.addLayer(circleLayer)

            this.searchHouse = this.$route.query.searchName

            if (wallLayer == null) {
                wallLayer = new global.DC.VectorLayer("wallLayer")
                global.viewer.addLayer(wallLayer)
            }

            let option = {
                series: [
                    {
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ]
                    }
                ]
            }
            JQSmychart.setOption(option, true)
        })
    },

    updated () { },

    methods: {
        // 户室人口类型切换
        hushiPeoTyClick (type) {
            this.hushiPeoTy = type
            this.getVillagePersonInfo(this.residentIdSave, '', { personType: this.hushiPeoTy })
            console.log('hushiPeoTyClick', type)
        },

        // 鼠标移入商业数据
        businessMouseEnter (row) {
            if (this.isQFL27) {
                this.isBusinessHoverShow = true
                this.businessChooseItem = row
            }
        },

        // 鼠标移出商业数据
        businessMouseLeave () {
            this.isBusinessHoverShow = false
        },

        // 查询当前楼栋下户室信息（是否关联）
        getPersonConnectionConditionByBuildingId (params) {
            getPersonConnectionConditionByBuildingId(params).then(res => {
                this.personConnectionData = res.data.data.list
                //未关联户室数  uncorrelatedNumber-未核实户室数 unexaminedNumber-已核实户室数 verifiedNumber-户室总数 busTotalNumber 
                this.buildingInfo.uncorrelatedNumber = res.data.data.uncorrelatedNumber
                this.buildingInfo.unexaminedNumber = res.data.data.unexaminedNumber
                this.buildingInfo.verifiedNumber = res.data.data.verifiedNumber
                this.buildingInfo.busTotalNumber = res.data.data.busTotalNumber
                this.unitChoosedArr.forEach(item => {
                    item.children_infos.forEach(it => {
                        let residentId = it.std_addr_id.split('|')[2]
                        res.data.data.list.forEach(one => {
                            if (one.busId == residentId) {
                                it.isBus = one.isBus
                            }
                        })
                    })
                })
            })
        },

        // 收缩或展开小区信息
        unfoldHouseBox (type) {
            if (type == 'up') {
                // 收缩
                this.isShowHouseInfoBox = false
                document.querySelector('.housing-introduce').classList.add('shrink-house')
                document.querySelector('.housing-bg').classList.add('shrink-house')
            } else {
                // 展开
                this.isShowHouseInfoBox = true
                document.querySelector('.housing-introduce').classList.remove('shrink-house')
                document.querySelector('.housing-bg').classList.remove('shrink-house')
            }
        },

        // 警情统计
        getAlarmStatistics () {
            getAlarmStatistics({
                start: this.eventTimeArr[0],
                end: this.eventTimeArr[1],
                aoiId: this.villageInfo.aoiId,
            }).then(
                res => {
                    console.log('getAlarmStatistics', res.data)
                    let newArr = []
                    res.data.forEach(item => {
                        newArr.push({ name: item.name, value: item.count })
                    })
                    this.$nextTick(() => {
                        var chartDom = document.getElementById('JQSEchart')
                        JQSmychart = this.$echarts.init(chartDom)
                        JQSmychart.setOption(this.initJQSOption(newArr))
                    })

                }
            )
        },

        // 警情图表
        initJQSOption (dataArr) {
            let options
            if (dataArr.length == 0) {
                options = {
                    title: {
                        text: '暂无警情数据',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            color: '#fff',
                            fontWeight: 'normal',
                            // fontSize: fontSize(14)
                        }
                    }
                }
            } else {
                options = {
                    series: [
                        {
                            type: 'pie',
                            radius: '50%',
                            data: dataArr
                        }
                    ]
                }
            }
            return options
        },

        // 警情切换tab
        jqTabClick (type) {
            this.jqType = type
            if (type == 1) {
                this.getAlarmStatistics()
            }
        },

        // 警情下拉事件
        changeJQType (type) {
            this.getAlarmList()
        },

        // 警情统计中时间变化
        caseTimeChange (e) {
            const date = e.map((item) => {
                return this.dateFormat(item)
            })
            this.eventTimeArr = date
            this.getAlarmList()
        },

        // 获取当前日期
        dateFormat (dateData) {
            var date = new Date(dateData)
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            m = m < 10 ? "0" + m : m
            var d = date.getDate()
            d = d < 10 ? "0" + d : d
            const time = y + "-" + m + "-" + d
            return time
        },

        changeBuildHighLightchecked (e) {
            this.$EventBus.$emit("switchThreeDimensions", e)
        },

        // 获取半年前时间
        getHalfYearTime () {
            const nowResult = new Date().getTime()
            let halfYear = 365 / 2 * 24 * 3600 * 1000
            let pastResult = nowResult - halfYear
            let pastDate = new Date(pastResult),
                pastYear = pastDate.getFullYear(),
                pastMonth = pastDate.getMonth() + 1,
                pastDay = pastDate.getDate()
            let nowDate = new Date(nowResult),
                nowYear = nowDate.getFullYear(),
                nowMonth = nowDate.getMonth() + 1,
                nowDay = nowDate.getDate()
            let halfYearTime = pastYear + '-' + pastMonth + '-' + pastDay
            let nowTime = nowYear + '-' + nowMonth + '-' + nowDay
            return [halfYearTime, nowTime]
        },

        showHouseingTileset (params) {
            if (params.type == 'remove') {
                this.$EventBus.$emit('unbindMxClick', this.getAoiByPtStd)
            } else {
                this.$EventBus.$emit('registerMxClick', this.getAoiByPtStd)
            }
        },

        // 切换小区信息导航栏
        switchSubNav (type) {
            this.subNavType = type
            this.$store.commit('SET_HOUSEDEEPDATAPOPUP', false)
            this.$EventBus.$emit("mapClearLayer", {
                layerName: "deepDataLayer",
                type: "VectorLayer",
            })
            this.houseDeepLoading = true
            this.houseDeepNoDataText = ' '
            setTimeout(() => {
                this.houseDeepLoading = false
                if (!this.comeOutData.length && type == 2) {
                    this.houseDeepNoDataText = '暂无出入口数据'
                } else if (!this.parkingLotData.length && type == 3) {
                    this.houseDeepNoDataText = '暂无停车场数据'
                } else if (!this.businessData.length && type == 4) {
                    this.houseDeepNoDataText = '暂无商业数据'
                }
            }, 500)

        },

        /**
         * @description: 顶部搜索条件更改
         * @param {*} val
         * @return {*}
         */
        searchInputTree (val) {
            if (val.trim().length > 0) {
                this.searchTreeData = []
                this.treeEmptyText = "正在加载中"
                this.getPoliceStationTrees()
                this.searchLazyFlag = false
            } else {
                this.searchLazyFlag = true
            }
        },

        /**
         * @description: 禁用鼠标点击树结构的时候input失去焦点
         * @param {*} event
         * @return {*}
         */
        preventFocusLost (event) {
            event.preventDefault()
        },

        /**
         * @description: 当输入框有值时触发的搜索事件
         * @return {*}
         */
        getPoliceStationTrees () {
            getPoliceStationTrees({
                name: this.searchTreeName,
                deptId: this.userInfo.dept_id,
            }).then((res) => {
                this.searchTreeData = res.data.data
                if (res.data.data.length == 0) this.treeEmptyText = "暂无数据"
            })
        },

        /**
         * @description: 树结构懒加载
         * @param {*} node
         * @param {*} resolve
         * @return {*}
         */
        loadNode (node, resolve) {
            if (this.userInfo.dept_id != "1123598813738675201") {
                let list = []
                let type = node.level + 1
                getPoliceStationLazyTree(
                    type,
                    node.level === 0 ? this.userInfo.dept_id : node.data.id
                ).then((res) => {
                    if (res.data.data instanceof Array) {
                        list = res.data.data
                    }

                    if (Object.getPrototypeOf(res.data.data) === Object.prototype) {
                        list.push(res.data.data)
                    }

                    list.forEach((item) => {
                        item.leaf = !item.hasChildren
                    })
                    return resolve(list)
                })
            } else {
                let list = []
                let type = node.level + 1
                getPoliceStationLazyTree(
                    type,
                    node.level === 0 ? "" : node.data.id
                ).then((res) => {
                    if (res.data.data instanceof Array) {
                        list = res.data.data
                    }

                    if (Object.getPrototypeOf(res.data.data) === Object.prototype) {
                        list.push(res.data.data)
                    }

                    list.forEach((item) => {
                        item.leaf = !item.hasChildren
                    })
                    return resolve(list)
                })
            }
        },

        /**
         * @description: 树节点的选中事件
         * @param {*} current
         * @param {*} currentNode
         * @return {*}
         */
        currentChangeHandle (current, currentNode) {
            if (current.hasChildren == true || current.type != 3) return
            this.isShowHouseBox = false
            this.$EventBus.$emit("clearHouse3D")
            this.filterText = ""
            this.prop = current.name
            if (current.type == 3) {
                this.searchTreeName = current.name
            }
            if (circleLayer && circleLayer != null && circleLayer != undefined) {
                circleLayer.clear()
                circleLayer.remove()
                circleLayer = null
            }
            this.subNavType = 1

            this.comeOutData = []
            this.parkingLotData = []
            this.businessData = []

            this.getSearchExtensivelyBgAoiDeepdata(
                "ebf48ecaa1fd436fa3d40c4600aa051f",
                "361100",
                current.id,
                "1|3"
            )
            this.getVillageInfo(current.id)
            this.$refs.searchTreeInput.blur()
            this.searchLazyFlag = true
        },

        navClick (e) {
            if (this.navType == e.target.dataset.type) return
            this.jqType = 0
            this.navType = e.target.dataset.type

            this.$store.commit('SET_HOUSEDEEPDATAPOPUP', false)
            this.$EventBus.$emit("mapClearLayer", {
                layerName: "deepDataLayer",
                type: "VectorLayer",
            })

            if (this.navType == 1) {
                this.policeInfoLoading = true
                this.jqNoDataText = '  '
                this.callPolicePage.currentPage = 1
                this.callPoliceData = []
                this.eventTime = this.getHalfYearTime()
                this.eventTimeArr = this.eventTime
                this.getAlarmList()
            } else {
                circleLayer.clear()
                circleLayer.remove()
                circleLayer = null
            }
        },

        // 大搜之搜索面详细数据（停车场出入口商场、 小区名称类型地址、楼栋数据）
        getSearchExtensivelyBgAoiDeepdata (ak, region, ids, infos) {
            this.villageInfoLoading = true
            this.BuildListLoading = true
            this.buildingList = []
            getSearchExtensivelyBgAoiDeepdata(ak, region, ids, infos).then((res) => {
                let baseUrl
                if (process.env.NODE_ENV == "development") {
                    // 开发
                    baseUrl = "http://192.168.0.112/"
                } else {
                    // 部署
                    baseUrl = "http://10.141.11.11/"
                }

                // 小区名称类型地址
                let villageData = res.data.result[0]

                this.$EventBus.$emit("toPosition", {
                    ...villageData,
                    siteJd: Number(villageData.location.lng),
                    siteWd: Number(villageData.location.lat) - 0.0021,
                    siteGd: 240,
                    sitePitch: -45,
                })

                this.villageInfo.name = villageData.name
                this.villageInfo.address = villageData.address
                this.villageInfo.type_name = villageData.type_name.split("|")[0]

                this.villageInfo.pic_url = baseUrl + villageData.pic_url.split(";")[0]
                this.villageInfo.pic_url_singleArr = []
                this.villageInfo.pic_url_singleArr.push(this.villageInfo.pic_url)
                this.villageInfo.pic_url_list = []
                villageData.pic_url.split(";").forEach((item) => {
                    let pic_url_item = baseUrl + item
                    this.villageInfo.pic_url_list.push(pic_url_item)
                })
                this.villageInfo.pic_url_list.push("pic_url_item")
                this.isHaveNoPic =
                    this.villageInfo.pic_url_list.length > 0 ? false : true
                if (this.villageInfo.pic_url_list.length != 0) {
                    this.isShowPictArrow = "hover"
                }

                this.villageInfoLoading = false
                console.log('search--------', res.data.result[0])
                // 停车场出入口商场
                if (
                    res.data.result[0].deep_infos != null &&
                    res.data.result[0].deep_infos.deep_info.length
                ) {
                    let deepData = res.data.result[0].deep_infos.deep_info
                    this.parkingLotData = []
                    this.comeOutData = []
                    this.businessData = []
                    deepData.forEach((item) => {
                        if (item.pc_type == 1) {
                            this.comeOutData.push(item)
                        } else if (item.pc_type == 2) {
                            this.parkingLotData.push(item)
                        } else if (item.pc_type == 4) {
                            this.businessData.push(item)
                        }
                    })
                    if (ids == '62556EAF45C31B9DE0530EF4520A0CFC' || ids == '62556EAF4B731B9DE0530EF4520A0CFC' || ids == 'aba5227bc3c16d3fec0f0b1e87f25bbb' || ids == '644A2C4049024A3C8C76D96EEE4366FD') {//小区uid
                        this.isQFL27 = true
                        let sCAoiId = ''//商场aoiId
                        if (ids == '62556EAF45C31B9DE0530EF4520A0CFC') {//指定庆丰路27号天集信江明珠小区uid
                            sCAoiId = '6E5276A05D1611EAB6183C15FB00027B'
                        } else if (ids == '62556EAF4B731B9DE0530EF4520A0CFC') {//指定万达广场uid
                            sCAoiId = '6E513C5E5D1611EAB6183C15FB00027B'
                        } else if (ids == 'aba5227bc3c16d3fec0f0b1e87f25bbb') {//指定万达晶座uid--此路不通因为没deep_infos
                            sCAoiId = 'A425AEC8D3FE4C85937FE36B4F996437'
                        } else if (ids == '644A2C4049024A3C8C76D96EEE4366FD') {//指定万达华府uid
                            sCAoiId = '6E5271B45D1611EAB6183C15FB00027B'
                        }

                        let sCData = []
                        businessJs.forEach(item => {
                            if (item.aoi_id == sCAoiId) {
                                item.name = item.place_name
                                item.x = item.lng
                                item.y = item.lat
                                item.picUrl = 'http://10.141.11.11' + item.url
                                sCData.push(item)
                            }
                            if (sCAoiId == '6E513C5E5D1611EAB6183C15FB00027B' && item.aoi_id == 'A425AEC8D3FE4C85937FE36B4F996437') {//万达晶座并入万达广场
                                item.name = item.place_name
                                item.x = item.lng
                                item.y = item.lat
                                item.picUrl = 'http://10.141.11.11' + item.url
                                sCData.push(item)
                            }
                        })
                        this.businessData = sCData
                    } else {
                        this.isQFL27 = false
                    }
                }

                this.unitChoosedArr = []
                // 小区楼栋数据
                if (
                    res.data.result[0].children_infos &&
                    res.data.result[0].children_infos.length
                ) {
                    console.log('search---building', res.data.result[0].children_infos)
                    if (res.data.result[0].children_infos[0].exttype == 'building') {
                        this.isShowBuildListBox = true
                        let buildData = res.data.result[0].children_infos
                        buildData.forEach((item) => {
                            this.buildingList.push({
                                name: `${item.sname}`,
                                siteJd: `${item.x}`,
                                siteWd: `${item.y}`,
                                siteGd: 360,
                                // build_id: `${item.std_addr_id.split("|")[1]}`,
                                build_uid: `${item.uid}`,
                                // 文档请求3D
                                build_std_addr_id: `${item.std_addr_id.split("|")[1]}`,

                                // 临时新加 business_id 用来请求3D
                                business_id: `${item.business_id}`,
                                floor_num: `${item.floor_num}`,
                                elev: `${item.elev}`,
                            })
                        })

                        this.$EventBus.$emit("toPosition", {
                            ...this.buildingList[0],
                            siteJd: Number(this.buildingList[0].siteJd),
                            siteWd: Number(this.buildingList[0].siteWd) - 0.0021,
                            siteGd: 240,
                            sitePitch: -45,
                        })
                        setTimeout(() => {
                            this.BuildListLoading = false
                        }, 500)

                        // this.buildingClick(this.buildingList[0])
                    } else if (res.data.result[0].children_infos[0].exttype == 'unit') {
                        console.log('search---unit')
                        this.isShowHouseBox = true
                        this.isShowBuildListBox = false
                        let houseUintList = res.data.result[0]
                        this.unitAllArr = houseUintList
                        this.isShowUnitChoose = true
                        this.unitOptions = []
                        this.unitValue = '1单元'
                        houseUintList.children_infos.forEach((item, index) => {
                            this.unitOptions.push({
                                value: `${index + 1}`,
                                label: `${item.sname}`,
                            })
                        })
                        this.unitChoosedArr = this.unitAllArr.children_infos[0].children_infos
                        this.floorInfo.elev = this.unitAllArr.children_infos[0].elev == 1 ? '有' : '无'
                        // this.floorInfo.floor_num = this.unitAllArr.children_infos[0].children_infos.length
                        this.isShowFloorCount = false
                        let buildId = this.unitAllArr.std_addr_id.split("|")[1]
                        this.getVillagePersonStatisticInfoByBuildId({ buildId })
                        let houseCount = 0
                        this.unitChoosedArr.forEach(item => {
                            item.children_infos.forEach(it => {
                                houseCount++
                            })
                            this.floorInfo.house_num = houseCount
                            this.isHaveResidentData = true
                        })
                    } else if (res.data.result[0].children_infos[0].exttype == 'floor') {
                        let houseUintList = res.data.result[0]
                        this.isShowHouseBox = true
                        this.isShowBuildListBox = false
                        this.isShowUnitChoose = false
                        this.unitChoosedArr = houseUintList.children_infos
                        this.floorInfo.elev = houseUintList.elev == 1 ? '有' : '无'
                        this.isShowFloorCount = false
                        let aoiId = houseUintList.std_addr_id.split("|")[0]
                        this.choosedBuildUid = aoiId
                        this.getVillagePersonStatisticInfoByBuildId({ aoiId })
                        let houseCount = 0
                        this.unitChoosedArr.forEach(item => {
                            item.children_infos.forEach(it => {
                                houseCount++
                            })
                            this.floorInfo.house_num = houseCount
                            this.isHaveResidentData = true
                        })

                    }

                }

                this.callPolicePage.currentPage = 1
                this.getAlarmList()
            }).catch(res => {
                setTimeout(() => {
                    this.villageInfoLoading = false
                    this.BuildListLoading = false
                    this.isHaveResidentData = false
                }, 500)
            })
        },

        // 楼栋单元楼层户室查询--大搜
        getUnitHousesData (ak, region, ids, infos, buildId) {
            getSearchExtensivelyHousesdata(ak, region, ids, infos).then((res) => {
                console.log('getUnitHousesData--then')
                if (res.data.result == null) {
                    setTimeout(() => {
                        this.pictLoading = false
                    }, 3000)
                    this.isShowHouseBox = false
                } else {
                    this.pictLoading = true
                    this.isShowHouseBox = true
                }
                if (res.data.result != []) {
                    let houseUintList = res.data.result[0]
                    this.unitAllArr = houseUintList
                    // 林家小区小区下只有楼栋情况
                    console.log('children_infos' in res.data.result[0], 55552222333)
                    if ('children_infos' in res.data.result[0] == false) {
                        setTimeout(() => {
                            this.pictLoading = false
                        }, 3000)
                        this.isShowHouseBox = false
                        this.residentDetailsClick(houseUintList)
                        return
                    }
                    if (houseUintList.children_infos.length > 1 && houseUintList.children_infos[0].exttype == 'unit') {
                        this.isShowUnitChoose = true
                        this.unitOptions = []
                        this.unitValue = 1
                        houseUintList.children_infos.forEach((item, index) => {
                            this.unitOptions.push({
                                value: `${index + 1}`,
                                label: `${item.sname}`,
                            })
                        })
                        this.unitChoosedArr = this.unitAllArr.children_infos[0].children_infos
                    } else if (houseUintList.children_infos.length > 1 && houseUintList.children_infos[0].exttype == 'floor') {
                        this.isShowUnitChoose = false
                        this.unitChoosedArr = this.unitAllArr.children_infos
                    }
                    let houseCount = 0
                    this.unitChoosedArr.forEach(item => {
                        item.children_infos.forEach(it => {
                            houseCount++
                        })
                        this.floorInfo.house_num = houseCount
                        this.isHaveResidentData = true
                        setTimeout(() => {
                            this.pictLoading = false
                        }, 3000)
                    })
                    // 查询户室是否关联
                    this.getPersonConnectionConditionByBuildingId({ buildId })
                } else {
                    this.isShowHouseBox = false
                    this.isHaveResidentData = false
                    setTimeout(() => {
                        this.pictLoading = false
                    }, 3000)
                }

            })
        },

        // 三维接口查询楼栋户室
        getHouses3DData (build_std_addr_id, adcode, aoiArr) {
            this.unitChoosed3DList = []
            getHouses(build_std_addr_id, adcode).then((res) => {
                let houseData = res.data.data.properties
                console.log('getHouses3DData--then')
                this.$EventBus.$emit("showThreeDimensions", {
                    positions: houseData.kmj3a,
                    minHeight: res.data.data.properties.hwtxa.features[0].properties.yjpca,
                    maxHeight: res.data.data.properties.hwtxa.features[0].properties.mbfdr,
                })
                this.unitChoosed3DList = houseData.nwwqd.features
                this.curHousingHWTXAYjpca = houseData.hwtxa.features[0].properties.yjpca
                if (aoiArr) {
                    this.unitChoosed3DList.forEach(item => {
                        let aoiHeight = aoiArr[1]
                        let minHeight = item.properties.szhfr
                        let maxHeight =
                            item.properties.szhfr +
                            item.properties.hnagn
                        if (minHeight < aoiHeight && aoiHeight < maxHeight) {
                            let chooseIndex = ''
                            this.unitChoosedArr.forEach((one, index) => {
                                if (one.sname == item.properties.cftlg) {
                                    chooseIndex = index
                                }
                            })
                            this.floorsType = Math.ceil((chooseIndex + 1) / 5)
                            if (this.floorsType > 3) {
                                for (let i = 0; i < this.floorsType - 3; i++) {
                                    this.nextFloorBtn()
                                }
                            }
                            let polygon = this.$turf.polygon([
                                JSON.parse(item.properties.kmj3a).coordinates[0],
                            ])
                            let point = this.$turf.point(aoiArr[0])
                            if (this.$turf.booleanContains(polygon, point)) {
                                this.unitChoosedArr.forEach(xIt => {
                                    xIt.children_infos.forEach(yIt => {
                                        if (item.properties.snxmi == yIt.std_addr_id.split('|')[2]) {
                                            this.residentDetailsClick(yIt)
                                        }
                                    })
                                })
                            }
                        }
                    })
                }
            })

        },

        // 三维接口高亮楼栋户室-通过
        getResident3DData (build_std_addr_id) {
            this.unitChoosed3DList.forEach(item => {
                if (item.properties.snxmi == build_std_addr_id) {
                    let sanWeiData = item.properties.kmj3a
                    const polygon = JSON.parse(sanWeiData).coordinates[0].reduce((pre, cur) => {
                        pre.push([cur[0], cur[1]])
                        return pre
                    }, [])

                    const homeCenter = this.$turf.centroid(this.$turf.polygon([polygon])).geometry.coordinates

                    // this.$EventBus.$emit("toPosition", {
                    //     siteJd: Number(homeCenter[0]) + 0.00006,
                    //     siteWd: Number(homeCenter[1]) - 0.00030,
                    //     siteGd: item.properties.szhfr + 240,
                    //     sitePitch: -80,
                    // })
                    // this.$EventBus.$emit("toPosition", {
                    //     siteJd: Number(homeCenter[0]) + 0.00006,
                    //     siteWd: Number(homeCenter[1]) - 0.00030,
                    //     siteGd: item.properties.szhfr + 40,
                    //     sitePitch: -45,
                    // })
                    this.$EventBus.$emit("toPosition", {
                        ...item,
                        siteJd: Number(homeCenter[0]),
                        siteWd: Number(homeCenter[1]) - 0.0021,
                        siteGd: 240,
                        sitePitch: -45,
                    })
                    this.$EventBus.$emit("clearHouse3D")
                    this.$EventBus.$emit("showThreeDimensions", {
                        positions: item.properties.kmj3a,
                        minHeight: item.properties.szhfr + this.curHousingHWTXAYjpca,
                        maxHeight: item.properties.szhfr + item.properties.hnagn + this.curHousingHWTXAYjpca,
                    })
                }
            })
        },

        tableRowClassName ({ row, rowIndex }) {
            row.index = rowIndex
            return "rows"
        },

        // 点击户室--大搜
        residentDetailsClick (params) {
            let residentId = ''
            this.houseDate = []
            if (params.exttype == 'room') {
                residentId = params.std_addr_id.split('|')[2]
                if (residentId == '11ACAB7FB7909F652F579C6E1ADE3F71') {//测试万达晶座11栋310
                    console.log('this.isShowPayInfo=true')
                    this.isShowPayInfo = true
                } else {
                    console.log(' this.isShowPayInfo=false')
                    this.isShowPayInfo = false
                }
                this.residentIdSave = residentId
                this.getVillagePersonInfo(residentId, '', { personType: this.hushiPeoTy })
                this.floorChoosed = params.sname
                this.getResident3DData(residentId)
            } else {
                residentId = params.std_addr_id.split('|')[1]
                this.getVillagePersonInfo('', residentId, '', '', '', '', '独栋')
                // this.$EventBus.$emit("toPosition", {
                //     siteJd: Number(params.lng),
                //     siteWd: Number(params.lat) - 0.0021,
                //     siteGd: 240,
                //     sitePitch: -45,
                // })
            }
            this.getPicURL(residentId)
            this.residentDetailsTitle = `${params.name}住户信息`
            this.residentDetailsShow = true
            this.residentNoDataText = ' '
            this.residentLoading = true
        },

        residentDetailsClose () {
            this.hushiPeoTy = 1
            this.residentDetailsShow = false
        },

        buildingClick (item, aoiArr) {
            if (this.buildingChoosed.name == item.name && !aoiArr) return
            this.unfoldHouseBox('up')
            this.isBuildHighLightchecked = true
            this.unitHouseChoosed = []
            this.unitChoosedArr = []
            this.pictLoading = true
            if (!aoiArr) {
                this.$EventBus.$emit("clearHouse3D")
                // this.$EventBus.$emit("toPosition", {
                //     ...item,
                //     siteJd: Number(item.siteJd),
                //     siteWd: Number(item.siteWd) - 0.0021,
                //     siteGd: 600,
                //     sitePitch: -60,
                // })
                this.$EventBus.$emit("toPosition", {
                    ...item,
                    siteJd: Number(item.siteJd),
                    siteWd: Number(item.siteWd) - 0.0021,
                    siteGd: 240,
                    sitePitch: -45,
                })
            }
            this.buildingChoosed = item
            this.floorInfo.elev = ''
            this.floorInfo.floor_num = ''
            setTimeout(() => {
                this.floorInfo.elev = item.elev == 1 ? '有' : '无'
                this.floorInfo.floor_num = item.floor_num
            }, 200)
            this.isShowFloorCount = true
            // 获取户籍人口重点人口数据
            console.log(item, 'item-------------')
            this.choosedBuildUid = item.build_uid
            this.choosedBuildStdId = item.build_std_addr_id
            // 重点人口户籍人口
            let buildId = item.build_std_addr_id
            this.getVillagePersonStatisticInfoByBuildId({ buildId })

            // 楼栋单元楼层户室查询-大搜
            this.getUnitHousesData(
                "ebf48ecaa1fd436fa3d40c4600aa051f",
                "361100",
                item.build_uid,
                "1|3",
                buildId)
            this.getHouses3DData(item.build_std_addr_id, "361102", aoiArr)
            this.floorsType = 1
            document.querySelector(".floor-num").style.left = "0px"
            this.lastFloorShow = false
            this.unitValue = 1
        },

        nextBtn () {
            const boxWidth = parseInt(this.$refs.BuildOutBox.offsetWidth)
            // if (parseInt(document.querySelector(".build-box").offsetWidth) > Math.abs(parseInt(document.querySelector(".build-box").style.left)) + boxWidth) {
            if (
                Math.ceil(this.buildingList.length / 10) * 356 >
                Math.abs(parseInt(document.querySelector(".build-box").style.left)) +
                boxWidth
            ) {
                document.querySelector(".build-box").style.left =
                    parseInt(document.querySelector(".build-box").style.left) -
                    boxWidth +
                    "px"
                this.lastBtnShow = true
                // if (parseInt(document.querySelector(".build-box").offsetWidth) == Math.abs(parseInt(document.querySelector(".build-box").style.left)) + boxWidth) {
                if (
                    Math.ceil(this.buildingList.length / 10) * 356 ==
                    Math.abs(parseInt(document.querySelector(".build-box").style.left)) +
                    boxWidth
                ) {
                    this.nextBtnShow = false
                }
            }
        },

        lastBtn () {
            const boxWidth = parseInt(this.$refs.BuildOutBox.offsetWidth)

            document.querySelector(".build-box").style.left =
                parseInt(document.querySelector(".build-box").style.left) +
                boxWidth +
                "px"
            this.nextBtnShow = true
            if (
                Math.abs(parseInt(document.querySelector(".build-box").style.left)) == 0
            ) {
                this.lastBtnShow = false
            }
        },

        lastFloorBtn () {
            document.querySelector(".floor-num").style.left =
                parseInt(document.querySelector(".floor-num").style.left) + 84 + "px"
            this.nextFloorShow = true
            if (
                Math.abs(parseInt(document.querySelector(".floor-num").style.left)) == 0
            ) {
                this.lastFloorShow = false
            }
        },

        nextFloorBtn () {
            if (
                parseInt(document.querySelector(".floor-num").offsetWidth) >
                Math.abs(parseInt(document.querySelector(".floor-num").style.left)) + 84
            ) {
                document.querySelector(".floor-num").style.left =
                    parseInt(document.querySelector(".floor-num").style.left) - 84 + "px"
                this.lastFloorShow = true
                if (
                    parseInt(document.querySelector(".floor-num").offsetWidth) ==
                    Math.abs(parseInt(document.querySelector(".floor-num").style.left)) +
                    252
                ) {
                    this.nextFloorShow = false
                }
            }
        },

        chooseUnit (value) {
            this.floorsType = 1
            this.floorChoosed = []
            this.unitChoosedArr = []
            this.pictLoading = true
            setTimeout(() => {
                this.unitChoosedArr = this.unitAllArr.children_infos[this.unitValue - 1].children_infos
                this.pictLoading = false
            }, 1000)
            let houseCount = 0
            this.unitChoosedArr.forEach(item => {
                item.children_infos.forEach(it => {
                    houseCount++
                })
            })
            this.floorInfo.house_num = houseCount
            document.querySelector(".floor-num").style.left = "0px"
            this.lastFloorShow = false
        },

        isHaveLiudong (arr) {
            return arr.some((item) => {
                return item.peopleType == "流动人口"
            })
        },

        isHaveZhongdian (arr) {
            return arr.some((item) => {
                return item.peopleType == "重点人员"
            })
        },

        isHaveJingwai (arr) {
            return arr.some((item) => {
                return item.peopleType == "境外人口"
            })
        },

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

        deepDataRowClick (row, params) {
            let url = ""
            if (params == "comeOut") {
                url = "/img/icon/bubble.png"
            } else if (params == "park") {
                url = "/img/icon/p-biao.png"
            } else if (params == "business") {
                url = "/img/icon/business.png"
            }
            this.$EventBus.$emit("mapClearLayer", {
                layerName: "deepDataLayer",
                type: "VectorLayer",
            })
            this.$EventBus.$emit("toPosition", {
                siteJd: `${row.x}`,
                siteWd: `${row.y}`,
                siteGd: 1000,
            })

            this.$EventBus.$emit("layerPointAdd", {
                layerName: "deepDataLayer",
                type: "billboard",
                params: {
                    lng: `${row.x}`,
                    lat: `${row.y}`,
                    alt: 1,
                    url: url,
                },
            })
            if (this.isQFL27) {
                this.$store.commit('SET_BUSINESSDATAPOPUP', true)

                this.$store.commit('SET_BUSINESSDATAPOPUPDATA', {
                    ...row
                })
                // 商业模拟数据
                var businessPopup = new global.DC.DivForms(global.viewer, {
                    domId: 'businessDataPopup',
                    position: [
                        global.DC.Transform.transformWGS84ToCartesian(
                            new global.DC.Position(
                                Number(row.x),
                                Number(row.y),
                                0
                            )
                        )
                    ]
                })
            } else {
                this.$store.commit('SET_HOUSEDEEPDATAPOPUP', true)

                this.$store.commit('SET_HOUSEDEEPDATAPOPUPDATA', {
                    ...row
                })

                var popup = new global.DC.DivForms(global.viewer, {
                    domId: 'houseDeepDataPopup',
                    position: [
                        global.DC.Transform.transformWGS84ToCartesian(
                            new global.DC.Position(
                                Number(row.x),
                                Number(row.y),
                                0
                            )
                        )
                    ]
                })
            }
        },

        goTOPeopleDetail (status) {
            this.keyPersonVisible = true
            this.keyPeopleType = status
            this.peoplePage.currentPage = 1
            this.keyPersonTitle = status == 1 ? "户籍人口详情" : status == 2 ? "实有人口详情" : status == 3 ? "重点人口详情" : "未成年人口详情"
            this.peopleNoDataText = ' '
            this.keyPeopleLoading = true
            this.personDetailArr = []

            this.getVillagePersonInfo(
                "",
                // this.choosedBuildUid,//之前无法获取人口数据
                this.choosedBuildStdId,
                { type: status },
                this.peoplePage.currentPage,
            )
        },

        // 获取历史接警记录
        getAlarmList () {
            this.callPoliceData = []

            if (circleLayer != null) {
                circleLayer.clear()
                circleLayer.remove()
                circleLayer = null
            }

            circleLayer = new global.DC.PrimitiveLayer("circleLayer")
            global.viewer.addLayer(circleLayer)

            // 获取半年内数据
            getAlarmList({
                current: this.callPolicePage.currentPage,
                size: this.callPolicePage.pageSize,
                aoiId: this.villageInfo.aoiId,
                // jjdwbh: this.userInfo.dept_id,
                bjlx: this.typeValue,
                start: this.eventTimeArr[0],
                end: this.eventTimeArr[1]
            }).then((res) => {
                this.callPolicePage.count = res.data.data.pages
                console.log('getAlarmList', res)
                if (res.data.data.records.length > 0) {

                    this.callPoliceData = res.data.data.records.map((item, index) => {

                        if (item.JJDWMC.indexOf('上饶市公安局') != -1) item.JJDWMC = item.JJDWMC.replace(/上饶市公安局/, '市局')
                        if (item.JJDWMC.indexOf('信州区分局') != -1) item.JJDWMC = item.JJDWMC.replace(/信州区分局/, '')
                        if (item.JJDWMC.indexOf('信州') != -1) item.JJDWMC = item.JJDWMC.replace(/信州/, '')

                        return {
                            ...item,
                            index: index + 1,
                            lng: item.ZDDWXZB,
                            lat: item.ZDDWYZB
                        }
                    })
                    this.callPoliceData.forEach((item, index) => {
                        if (item.lng != "" && item.lat != "") {
                            let pointColor, pointOutlineColor

                            switch (item.jqlxJointName) {
                                case '盗窃':
                                    pointColor = global.DC.Namespace.Cesium.Color.fromBytes(57, 16, 133, 255)
                                    pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(57, 16, 133, 125)
                                    break
                                case '涉诈':
                                    pointColor = global.DC.Namespace.Cesium.Color.fromBytes(196, 29, 127, 255)
                                    pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(196, 29, 127, 125)
                                    break
                                case '纠纷':
                                    pointColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 120, 117, 255)
                                    pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 120, 117, 125)
                                    break
                                case '涉赌':
                                    pointColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 122, 69, 255)
                                    pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 122, 69, 125)
                                    break
                                case '涉毒':
                                    pointColor = global.DC.Namespace.Cesium.Color.fromBytes(47, 84, 235, 255)
                                    pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(47, 84, 235, 125)
                                    break
                                case '涉黄':
                                    pointColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 236, 61, 255)
                                    pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 236, 61, 125)
                                    break
                                case '求助':
                                    pointColor = global.DC.Namespace.Cesium.Color.fromBytes(82, 196, 26, 255)
                                    pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(82, 196, 26, 125)
                                    break
                                default:
                                    pointColor = global.DC.Namespace.Cesium.Color.fromBytes(207, 19, 34, 255)
                                    pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(207, 19, 34, 125)
                                    break
                            }

                            let center = new global.DC.Position(item.lng, item.lat)
                            let point = new global.DC.PointPrimitive(center)

                            let num = 0

                            timer[index] = setInterval(() => {
                                num++
                                if (num >= 10) {
                                    num = 0
                                }
                                point.setStyle({
                                    outlineColor: pointOutlineColor, //边框颜色
                                    outlineWidth: num, //边框大小，
                                    color: pointColor,
                                })
                            }, 100)

                            point.attrParams = item
                            point.on(
                                global.DC.MouseEventType.CLICK,
                                this.housingPoliceSiteClick
                            )
                            circleLayer.addOverlay(point)
                        }
                    })
                    setTimeout(() => {
                        this.policeInfoLoading = false
                    }, 500)

                } else {
                    setTimeout(() => {
                        this.jqNoDataText = '暂无报警信息'
                        this.policeInfoLoading = false
                    }, 3000)
                }

                this.setTableHeight()
            }).catch(res => {
                setTimeout(() => {
                    this.jqNoDataText = '暂无报警信息'
                    this.policeInfoLoading = false
                }, 3000)
            })
        },

        // 警情列表点击事件
        clickData (item) {
            if (
                item.ZDDWXZB &&
                item.ZDDWXZB != 0 &&
                item.ZDDWYZB &&
                item.ZDDWYZB != 0
            ) {
                this.$EventBus.$emit("toPosition", {
                    layerName: "policeSituationyLayers",
                    siteJd: Number(item.ZDDWXZB),
                    siteWd: Number(item.ZDDWYZB),
                })

                this.$store.commit("SET_DETAILSPOPUP", {
                    showBox: true,
                    showBtn: false,
                })

                this.$store.commit("SET_DATAPOPUP", item)

                var popup = new global.DC.DivForms(global.viewer, {
                    domId: "divFormsDomBox",
                    position: [
                        global.DC.Transform.transformWGS84ToCartesian(
                            new global.DC.Position(
                                Number(item.ZDDWXZB),
                                Number(item.ZDDWYZB),
                                0
                            )
                        ),
                    ],
                })
            } else {
                this.policeSituationDetailObj = item
                this.policeSituationVisible = true
            }
        },

        /**
         * @description: 警情闪烁点的点击事件
         * @param {*} e
         * @return {*}
         */
        housingPoliceSiteClick (e) {
            if ("overlay" in e) {
                this.$store.commit("SET_DETAILSPOPUP", {
                    showBox: true,
                    showBtn: false,
                })

                this.$store.commit("SET_DATAPOPUP", e.overlay.attrParams)
                var popup = new global.DC.DivForms(global.viewer, {
                    domId: "divFormsDomBox",
                    position: [
                        global.DC.Transform.transformWGS84ToCartesian(
                            new global.DC.Position(
                                Number(e.overlay.attrParams.lng),
                                Number(e.overlay.attrParams.lat),
                                0
                            )
                        ),
                    ],
                })
            } else {
                this.policeSituationDetailObj = e
                this.policeSituationVisible = true
            }
        },

        // 分页选择事件
        handleCurrentChange (currentPage) {
            this.callPolicePage.currentPage = currentPage
            this.policeInfoLoading = true
            this.jqNoDataText = '  '
            this.getAlarmList()
        },

        peopleHandleCurrentChange (currentPage) {
            this.keyPeopleLoading = true
            this.peoplePage.currentPage = currentPage
            this.personDetailArr = []
            this.getVillagePersonInfo(
                "",
                this.choosedBuildStdId,
                { type: this.keyPeopleType },
                currentPage
            )
        },

        // 获取table高度
        setTableHeight () {
            this.$nextTick(() => {
                if (
                    this.$refs.policeTableBox &&
                    this.$refs.ElPagination &&
                    this.$refs.policeTableBox.offsetHeight != 0
                ) {
                    this.currentTableHeight =
                        this.$refs.resultContentBox.offsetHeight -
                        this.$refs.housingEstateInfoBox.offsetHeight -
                        this.$refs.navTabBox.offsetHeight -
                        this.$refs.ElPagination.offsetHeight
                }
            })
        },

        // 获取包干民警、所属辖区
        getVillageInfo (aoiId) {
            getVillageInfo(aoiId).then((res) => {
                this.getResidentialQuartersInfo(res.data.data.md5Id, "361102")
                this.villageInfo.policeName = res.data.data.policeName
                this.villageInfo.policeStationName = res.data.data.policeStationName
                this.villageInfo.codeUrl = res.data.data.url
                this.villageInfo.aoiId = res.data.data.aoiId
                this.villageInfo.policePhone = res.data.data.policePhone
                // 实有人口数 realExistenceNumber; 户籍人口数 censusRegisterNumber;重点人口数 emphasisNumber;
                this.villageInfo.realExistenceNumber = res.data.data.realExistenceNumber
                this.villageInfo.censusRegisterNumber = res.data.data.censusRegisterNumber
                this.villageInfo.emphasisNumber = res.data.data.emphasisNumber
                //未关联户室数  uncorrelatedNumber-未核实户室数 unexaminedNumber-已核实户室数 verifiedNumber-户室总数 busTotalNumber 
                this.villageInfo.uncorrelatedNumber = res.data.data.uncorrelatedNumber
                this.villageInfo.unexaminedNumber = res.data.data.unexaminedNumber
                this.villageInfo.verifiedNumber = res.data.data.verifiedNumber
                this.villageInfo.busTotalNumber = res.data.data.busTotalNumber
            })
        },

        // 重点人口户籍人口
        getVillagePersonStatisticInfoByBuildId (params) {
            getVillagePersonStatisticInfoByBuildId(params).then((res) => {
                this.peopleInfo.registeredPopulation = res.data.data[0]
                this.peopleInfo.actualPopulation = res.data.data[1]
                this.peopleInfo.KeyPopulation = res.data.data[2]
                this.peopleInfo.nonagePeople = res.data.data[3]
            })
        },

        // 获取户室二维码
        getPicURL (id) {
            getPicURL(id).then(res => {
                this.residentCodeUrl = res.data.data
            })
        },

        // 房屋人口信息
        getVillagePersonInfo (resBusId, buildId, typeObj, current, realName, phone, isDuDong) {
            getVillagePersonInfo(
                resBusId,
                buildId,
                typeObj,
                current,
                realName,
                phone
            ).then((res) => {
                if (buildId) {
                    if (isDuDong == '独栋') {
                        this.houseDate = res.data.data.records
                        setTimeout(() => {
                            this.residentLoading = false
                        }, 500)
                        if (res.data.data.records.length == 0) {
                            this.residentNoDataText = '暂无户室信息'
                        }
                        return
                    }
                    setTimeout(() => {
                        this.personDetailArr = res.data.data.records
                    }, 500)
                    this.peoplePage.pageSize = res.data.data.size
                    this.peoplePage.total = res.data.data.total
                    setTimeout(() => {
                        this.keyPeopleLoading = false
                        if (res.data.data.records.length == 0) {
                            if (this.keyPeopleType == 1) {
                                this.peopleNoDataText = '暂无户籍人口信息'
                            } else if (this.keyPeopleType == 2) {
                                this.peopleNoDataText = '暂无实有人口信息'
                            } else if (this.keyPeopleType == 3) {
                                this.peopleNoDataText = '暂无重点人口信息'
                                // 户室为楼栋情况
                            } else if (this.keyPeopleType == 4) {
                                this.peopleNoDataText = '暂无未成年人口信息'
                            } else {
                                if (this.hushiPeoTy == 1) {
                                    this.residentNoDataText = '暂无户籍人口信息'
                                } else if (this.hushiPeoTy == 2) {
                                    this.residentNoDataText = '暂无实有人口信息'
                                } else if (this.hushiPeoTy == 3) {
                                    this.residentNoDataText = '暂无其他信息'
                                }
                            }
                        }
                        // 户室为楼栋情况
                        this.residentLoading = false
                    }, 500)
                } else {
                    this.houseDate = res.data.data.records

                    setTimeout(() => {
                        this.residentLoading = false
                    }, 500)
                    if (res.data.data.records.length == 0) {
                        if (this.hushiPeoTy == 1) {
                            this.residentNoDataText = '暂无户籍人口信息'
                        } else if (this.hushiPeoTy == 2) {
                            this.residentNoDataText = '暂无实有人口信息'
                        } else if (this.hushiPeoTy == 3) {
                            this.residentNoDataText = '暂无其他信息'
                        }
                    }
                }
            }).catch((res) => {
                setTimeout(() => {
                    this.keyPeopleLoading = false
                    this.residentLoading = false
                    if (this.keyPeopleType == 1) {
                        this.peopleNoDataText = '暂无户籍人口信息'
                    } else if (this.keyPeopleType == 2) {
                        this.peopleNoDataText = '暂无实有人口信息'
                    } else if (this.keyPeopleType == 3) {
                        this.peopleNoDataText = '暂无重点人口信息'
                        // 户室为楼栋情况
                    } else if (this.keyPeopleType == 4) {
                        this.peopleNoDataText = '暂无未成年人口信息'
                    } else {
                        if (this.hushiPeoTy == 1) {
                            this.residentNoDataText = '暂无户籍人口信息'
                        } else if (this.hushiPeoTy == 2) {
                            this.residentNoDataText = '暂无实有人口信息'
                        } else if (this.hushiPeoTy == 3) {
                            this.residentNoDataText = '暂无其他信息'
                        }
                    }
                }, 500)
            })
        },

        // 清空人员列表搜索内容
        clearPeopleDetailSearchValue () {
            this.keyPeopleLoading = true
            this.callPhone = ""
            this.peopleName = ""
            this.peoplePage.currentPage = 1
            this.personDetailArr = []
            this.getVillagePersonInfo(
                "",
                this.choosedBuildStdId,
                { type: this.keyPeopleType },
                this.peoplePage.currentPage
            )
        },

        // 搜索指定人员
        searchPeopleDetail () {
            this.keyPeopleLoading = true
            this.peoplePage.currentPage = 1
            this.personDetailArr = []
            this.getVillagePersonInfo(
                "",
                this.choosedBuildStdId,
                { type: this.keyPeopleType },
                this.peoplePage.currentPage,
                this.peopleName,
                this.callPhone
            )
        },

        // 小区范围围栏光柱
        getResidentialQuartersInfo (area_id, adcode) {
            // '6E513C5E5D1611EAB6183C15FB00027B', '361102'
            getResidentialQuartersInfo(area_id, adcode).then((res) => {
                let positionStr = ""
                res.data.data.geometry.coordinates[0].forEach((item) => {
                    positionStr += item[0] + "," + item[1] + "," + "20;"
                })

                if (wallLayer != null) {
                    wallLayer.clear()
                }
                let wall = new global.DC.Wall(positionStr)

                wall.setStyle({
                    material: new global.DC.WallTrailMaterialProperty({
                        color: global.DC.Namespace.Cesium.Color.fromBytes(
                            33,
                            150,
                            243,
                            200
                        ),
                        speed: 8,
                    }),
                })
                wall.allowDrillPicking = true

                wallLayer.addOverlay(wall)

                wallLayer.show = true
            })
        },

        // 大搜点查询
        getAoiByPtStd (e) {
            getAoiByPt(
                e.wgs84Position.lng,
                e.wgs84Position.lat,
                e.wgs84Position.alt,
                "361102",
                "0.00001"
            ).then((res) => {
                let bgId = res.data.data.properties.ijnnl
                getSearchExtensively(
                    "ebf48ecaa1fd436fa3d40c4600aa051f",
                    "361100",
                    "",
                    bgId
                ).then((res) => {
                    let chooseBuildItem = []
                    this.buildingList.forEach((item) => {
                        if (item.build_std_addr_id == res.data.result[0].std_addr_id.split("|")[1]) {
                            chooseBuildItem = item
                        }
                    })
                    this.buildingClick(chooseBuildItem, [
                        [e.wgs84Position.lng, e.wgs84Position.lat],
                        e.wgs84Position.alt,
                    ])
                })
            })
        },

        /**
         * @description: 小区商业排序
         * @return {*}
         */
        sortDevName ({ prop, order }) {
            this.businessData.sort(this.compare(prop, order))
        },

        compare (property, order) {
            if (order == "ascending") {
                return (a, b) => {
                    var value1 = a[property]
                    var value2 = b[property]

                    const char1Type = this.getChartType(value1)
                    const char2Type = this.getChartType(value2)

                    // 类型相同的逐个比较字符
                    if (char1Type[0] === char2Type[0]) {
                        if (value1 === value2) {
                            return char1Type[1] - char2Type[1]
                        } else {
                            if (char1Type[0] === "zh") {
                                return value1.localeCompare(value2)
                            } else if (char1Type[0] === "en") {
                                return value1.charCodeAt(0) - value2.charCodeAt(0)
                            } else {
                                return value1 - value2
                            }
                        }
                    } else {
                        return char1Type[1] - char2Type[1]
                    }
                }
            } else {
                return (a, b) => {
                    var value1 = a[property]
                    var value2 = b[property]

                    const char1Type = this.getChartType(value1)
                    const char2Type = this.getChartType(value2)

                    // 类型相同的逐个比较字符
                    if (char1Type[0] === char2Type[0]) {
                        if (value1 === value2) {
                            return char2Type[1] - char1Type[1]
                        } else {
                            if (char1Type[0] === "zh") {
                                return value2.localeCompare(value1)
                            } else if (char1Type[0] === "en") {
                                return value2.charCodeAt(0) - value1.charCodeAt(0)
                            } else {
                                return value2 - value1
                            }
                        }
                    } else {
                        return char2Type[1] - char1Type[1]
                    }
                }
            }
        },

        getChartType (char) {
            // 数字可按照排序的要求进行自定义，我这边产品的要求是
            // 数字（0->9）->大写字母（A->Z）->小写字母（a->z）->中文拼音（a->z）
            if (/^[\u4e00-\u9fa5]$/.test(char.trim().charAt(0))) {
                return ["zh", 300]
            }
            if (/^[a-zA-Z]$/.test(char.trim().charAt(0))) {
                return ["en", 200]
            }
            if (/^[0-9]$/.test(char.trim().charAt(0))) {
                return ["number", 100]
            }
            return ["others", 999]
        },
    },

    destroyed () {
        this.$EventBus.$off("housingPoliceSiteClick")
        this.$EventBus.$off("showHouseingTileset")

        this.$EventBus.$emit('unbindMxClick', this.getAoiByPtStd)


        this.$store.commit("SET_DETAILSPOPUP", {
            showBox: false,
            showBtn: false,
        })

        this.$store.commit('SET_BUSINESSDATAPOPUP', false)
        this.$store.commit('SET_HOUSEDEEPDATAPOPUP', false)

        this.$parent.$parent.resize("0px")
        this.$EventBus.$emit("mapRemoveLayer", {
            layerName: "searchLayer",
            type: "VectorLayer",
        })

        this.$EventBus.$emit("mapRemoveLayer", {
            layerName: "deepDataLayer",
            type: "VectorLayer",
        })

        this.$EventBus.$emit("clearHouse3D")

        wallLayer && wallLayer.remove(), wallLayer = null

        if (circleLayer && circleLayer != null) {
            circleLayer.clear()
            circleLayer.remove()
            circleLayer = null
        }

        for (let i = 0; i < timer.length; i++) {
            clearInterval(timer[i])
        }

        window.removeEventListener("resize", this.setTableHeight)
    },
}
</script>

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

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

        li {
            list-style: none;
        }

        .search-box {
            padding: 5px;
            height: 48px;
            display: flex;

            input {
                flex: 1;
                height: 100%;
                font-size: 18px;
                text-indent: 1em;
                color: #ffffff;
                background-color: transparent;
                border: 1px solid rgb(0, 92, 169);
                border-radius: 20px 0 0 20px;
            }

            input:focus {
                outline: none;
            }

            input::-webkit-input-placeholder {
                color: rgba(238, 238, 238, 0.7);
            }

            button {
                font-size: 24px;
                font-weight: 700;
                width: 80px;
                height: 100%;
                background-color: rgb(0, 92, 169);
                color: #fff;
                border: 1px solid rgb(0, 92, 169);
                cursor: pointer;
                border-radius: 0 20px 20px 0;
            }

            button:active {
                background-color: rgb(0, 92, 169);
                border: 1px solid rgb(0, 92, 169);
            }
        }

        .search-val-box {
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 48px;
            left: 6px;
            width: calc(100% - 12px);
            max-height: 160px;
            text-align: left;
            color: #fff;
            background: $el-dialog-bg-color;
            z-index: 1111;
            border-radius: 10px;
            overflow: hidden;

            &>div {
                height: 100%;
                overflow-y: auto;

                div {
                    padding: 0 10px;
                    line-height: 36px;
                    cursor: pointer;
                }
            }
        }

        .result-content {
            height: calc(100% - 48px);
            overflow-x: hidden;
            overflow-y: auto;

            .housing-estate-info {
                .housing-title {
                    padding-left: 20px;
                    position: relative;
                    height: 60px;
                    text-align: left;
                    line-height: 60px;
                    font-size: 28px;
                    font-weight: bold;
                    z-index: 1;

                    &::after {
                        content: '';
                        position: absolute;
                        top: 18px;
                        left: 10px;
                        right: 10px;
                        bottom: 4px;
                        background: linear-gradient(135deg,
                                rgba(229, 253, 255, 0.013),
                                rgb(43 124 255 / 90%));
                        z-index: -1;
                    }
                }

                .housing-bg {
                    margin-top: 6px;
                    height: 200px;

                    img {
                        height: 100%;
                    }

                    :deep(.el-empty__description) {
                        p {
                            color: #fff;
                        }
                    }

                    :deep(.el-empty__image) {
                        width: 120px;
                    }

                    :deep(.el-empty) {
                        padding: 0;
                    }

                    :deep(.el-image) {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-color: transparent;
                        width: 100%;
                        height: 100%;
                    }

                    :deep(.el-image__placeholder) {
                        background-color: transparent;
                    }
                }

                .housing-introduce {
                    position: relative;

                    &>div {
                        padding: 0 10px;
                        display: flex;

                        .l {
                            display: flex;
                            justify-content: flex-start;
                            flex-wrap: nowrap;
                            width: 80px;
                            line-height: 40px;
                        }

                        .r {
                            flex: 1;
                            text-align: left;
                            line-height: 40px;
                        }

                        .p {
                            width: 130px;
                            flex-shrink: 0;
                            text-align: left;
                        }
                    }

                    .code {
                        position: absolute;
                        width: 120px;
                        height: 120px;
                        right: 0;
                        top: 0;
                    }

                    .p-r {
                        display: flex;
                        flex: 1;
                        justify-content: space-around;

                        &>div {
                            flex: 1;

                            &>div:first-child {
                                height: 26px;
                                line-height: 26px;
                                font-size: 16px;
                                font-weight: bold;
                                color: #499d99;
                            }

                            &>div:last-child {
                                height: 22px;
                                line-height: 22px;
                            }
                        }
                    }

                }

                .shrink-house {
                    height: 0 !important;
                    overflow: hidden;
                }

                .house-shrink-unfold-btn {
                    font-size: 20px;
                    cursor: pointer;
                }

                .house-shrink-unfold-btn:hover {
                    color: #2c75f1;
                }
            }

            .nav-tab {
                display: flex;
                justify-content: space-around;

                .nav {
                    flex: 1;
                    height: 40px;
                    line-height: 40px;
                    border-bottom: 1px solid #33566c;
                    cursor: pointer;
                }

                .choosed {
                    // background-color: rgba(0, 92, 169, 1);
                    background-color: #3d5ad5;
                }
            }

            .base-info {
                .sub-nav-list {
                    padding: 14px 0;
                    display: flex;
                    justify-content: space-around;

                    .sub-nav {
                        width: 76px;
                        height: 26px;
                        line-height: 26px;
                        border-radius: 13px;
                        // background: #0158a2;
                        cursor: pointer;
                        color: rgb(223, 219, 219);
                    }

                    .on {
                        border: 1px solid #fff;
                        // background-color: #0158a2;
                        background-color: #3d5ad5;
                        color: #fff;
                    }
                }

                &>.floor-content {
                    .build-info {
                        display: flex;
                        position: relative;
                        align-items: center;
                        height: 100px;

                        .nextBtn {
                            position: absolute;
                            left: 1px;
                            width: 20px;
                            height: 60px;
                            padding-top: 12px;

                            i {
                                font-size: 30px;
                                margin-left: -5px;
                            }
                        }

                        .rightBtn {
                            left: 369px;
                        }

                        .nextBtn :hover {
                            color: #0158a2;
                        }

                        .build-outBox {
                            position: absolute;
                            left: 18px;
                            width: 356px;
                            height: 100px;
                            overflow: hidden;

                            .build-box {
                                display: flex;
                                position: absolute;
                                left: 0;
                                transition: all 1s;

                                .ridgepole-list {
                                    display: flex;
                                    flex-wrap: wrap;
                                    justify-content: left;
                                    display: flex;
                                    flex-wrap: wrap;
                                    width: 356px;

                                    &>div {
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        margin: 6px 8px;
                                        width: 54px;
                                        height: 36px;
                                        line-height: 30px;
                                        border: 1px solid #ccc;
                                        cursor: pointer;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        display: block;
                                        position: relative;

                                        &.on {
                                            color: orange;
                                            border-color: orange !important;
                                        }

                                        :deep(.el-checkbox) {
                                            position: absolute;
                                            top: 0;
                                            right: 0;
                                        }

                                        :deep(.el-checkbox .el-checkbox__inner) {
                                            width: 12px;
                                            height: 12px;
                                            border-radius: 1px;
                                            border: 0;
                                        }

                                        :deep(.el-checkbox .el-checkbox__inner::after) {
                                            height: 7px;
                                            left: 5px;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .ridgepole-info {
                        .title {
                            // border-bottom: 1px solid #33566c;
                            margin-left: 10px;
                        }

                        .content {
                            display: flex;

                            &>div {
                                height: 26px;
                                line-height: 26px;
                                flex: 1;
                                display: flex;
                                justify-content: center;
                                border-right: 1px solid #fff !important;

                                &>div {
                                    cursor: default;
                                }

                                &>div:last-child {
                                    margin-left: 14px;
                                    font-size: 18px;
                                    font-weight: bold;
                                    color: rgb(114, 255, 248);
                                }
                            }

                            &>div:first-child {
                                width: 30%;
                            }

                            &>div:last-child {
                                border-right: 1px solid transparent !important;
                            }
                        }
                    }

                    .people-info {
                        .title {
                            margin-left: 10px;
                        }

                        .content {
                            .one div {
                                cursor: pointer;
                            }

                            .two {
                                margin-top: 16px;
                            }

                            .one,
                            .two {
                                display: flex;
                                justify-content: space-around;

                                &>div {
                                    flex: 1;

                                    &>div:first-child {
                                        height: 30px;
                                        line-height: 30px;
                                        font-size: 18px;
                                        font-weight: bold;
                                        color: #499d99;
                                    }

                                    &>div:last-child {
                                        height: 26px;
                                        line-height: 26px;
                                    }
                                }
                            }
                        }
                    }

                    .house-info {
                        .content {
                            display: flex;
                            justify-content: space-around;
                            background: rgba(8, 56, 185, 0.5);

                            &>div {
                                &>div:first-child {
                                    height: 30px;
                                    line-height: 30px;
                                    font-size: 18px;
                                    font-weight: bold;
                                    color: #499d99;
                                }
                            }
                        }

                        border-bottom: 1px dashed #ccc;
                    }

                    .ridgepole-info,
                    .people-info,
                    .house-info {
                        .title {
                            height: 40px;
                            line-height: 40px;
                            text-align: left;
                        }

                        .content {
                            padding: 10px 0;
                        }
                    }

                    .house-element-info {
                        .condo {
                            margin-top: 5px;
                        }

                        .el-main {
                            padding: 0;
                        }
                    }

                    .house-element-info {

                        .condo,
                        .legend {
                            display: flex;
                            align-items: center;
                            height: 36px;

                            .type {
                                width: 80px;
                            }

                            .type-select {
                                margin-left: 20px;

                                :deep(.el-input--suffix .el-input__inner) {
                                    padding-right: 54px;
                                }
                            }

                            .type-val {
                                display: flex;
                                flex: 1;

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

                                    &>span {
                                        margin: 0 10px;
                                        width: 10px;
                                        height: 10px;
                                        border-radius: 50%;
                                    }

                                    .chuzu {
                                        border: 1px solid #348b3a;
                                    }

                                    .zizhu {
                                        border: 1px solid #2c77bb;
                                    }

                                    .kongzhi {
                                        border: 1px solid #5c6169;
                                    }

                                    .shangye {
                                        border: 1px solid #cc9456;
                                    }
                                }
                            }
                        }

                        .floor-outBox {
                            display: flex;
                            position: relative;
                            height: 26px;
                            margin-top: 9px;

                            .floorBtn {
                                position: absolute;
                                left: 30px;
                                top: -2px;
                                width: 20px;
                                height: 26px;

                                i {
                                    font-size: 30px;
                                    margin-left: -5px;
                                }
                            }

                            .floorBtn :hover {
                                color: #0158a2;
                            }

                            .rightFloorBtn {
                                left: 350px;
                            }

                            .floor-box {
                                width: 252px;
                                height: 26px;
                                position: absolute;
                                overflow: hidden;
                                left: 67px;

                                .floor-num {
                                    display: flex;
                                    align-items: center;
                                    position: absolute;
                                    width: 504px;
                                    left: 0;
                                    transition: all 1s;

                                    &>div {
                                        margin: 0 4px;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        width: 84px;
                                        height: 26px;
                                        border-radius: 13px;
                                        // background: #202434;
                                        cursor: default;
                                        border: 0.0925925926vh solid #fff;
                                    }

                                    &>.on {
                                        border: 1px solid orange;
                                        color: orange;
                                    }
                                }
                            }
                        }

                        .floor-detail {
                            margin-top: 14px;
                            height: 240px;
                            overflow-x: scroll;

                            &>div {
                                margin: 8px;
                                height: 36px;
                                line-height: 36px;
                                display: flex;

                                .title {
                                    width: 50px;
                                    flex-shrink: 0;
                                }

                                .detail {
                                    flex: 1;
                                    display: flex;

                                    &>div {
                                        margin: 0 4px;
                                        position: relative;
                                        width: 68px;
                                        height: 36px;
                                        border: 1px solid #ccc;
                                        cursor: pointer;

                                        .flow,
                                        .focus,
                                        .warning {
                                            position: absolute;
                                            right: 2px;
                                            width: 10px;
                                            height: 10px;
                                            border-radius: 50%;
                                        }

                                        .flow {
                                            // top: calc((100% - 18px) / 4);
                                            // top: calc((100% / 3) - 3px);
                                            // top: calc(50% - 3px);
                                            top: 2px;
                                            // background: rgb(14, 136, 255);
                                            background: rgb(238, 238, 238);
                                        }

                                        .focus {
                                            // top: calc((100% - 18px) / 4 * 2 + 6px);
                                            top: calc((100% / 3) * 2 - 3px);
                                            background: rgb(255, 121, 108);
                                        }

                                        .warning {
                                            top: calc((100% - 18px) / 4 * 3 + 12px);
                                            background: rgb(254, 172, 4);
                                        }

                                        // 灰色：未关联，红色：未核实（关联），绿色：已核实
                                        .yellow {
                                            background: rgb(238, 238, 0);
                                        }

                                        .green {
                                            background: rgb(0, 238, 0);
                                        }

                                        .grey {
                                            background: rgb(238, 238, 238);
                                        }

                                        .red {
                                            background: rgb(238, 0, 0);
                                        }
                                    }

                                    &>.on {
                                        color: orange;
                                        border-color: orange !important;
                                    }

                                    &>.chuzu {
                                        border: 1px solid #3a8b3a;
                                    }

                                    &>.zizhu {
                                        border: 1px solid #2c77bb;
                                    }

                                    &>.kongzhi {
                                        border: 1px solid #5c6169;
                                    }

                                    &>.shangye {
                                        border: 1px solid #cc9456;
                                    }
                                }
                            }
                        }

                        .resident-box {
                            overflow: hidden;
                            padding: 0px;
                            height: 294px;
                        }
                    }
                }

                // .come-out-content,
                // .park-content,
                // .business-content {
                //     height: 380px;
                // }

                :deep(.el-table td.el-table__cell div) {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }

            .police-info {
                .el-main {
                    padding: 0;
                }

                .tableClass {
                    margin: 0 auto;
                    width: 600px;
                    height: 400px;
                    border-collapse: collapse;
                }

                .tableClass th,
                .tableClass td {
                    width: 200px;
                }

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

                .select-type {
                    :deep(.el-select) {
                        width: 100%;
                    }
                }

                .jq-tab {
                    display: flex;

                    div {
                        width: 50%;
                        height: 30px;
                        line-height: 30px;
                        cursor: pointer;
                    }

                    div.choosed {
                        background-color: #2f50b7;
                    }
                }

                .echarts-box {
                    // padding: 12px;
                    padding-top: 0;
                    flex: 1;
                    width: 100%;
                    height: 300px;
                }
            }
        }
    }

    .business-details {
        padding: 10px;
        width: 300px;
        background: $bg-color;
        color: #fff;
        position: absolute;
        bottom: 50px;
        left: 460px;
        border-radius: 4px;

        .item {
            display: flex;
            text-align: left;
            line-height: 20px;

            .key {
                width: 50px;
            }

            .value {
                width: 0;
                flex: 1;
            }
        }
    }
}

.progress {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2px;
    overflow: hidden;
    border-radius: 2px;
}

.progress::after {
    content: '';
    position: absolute;
    left: 0;
    width: 80%;
    height: 100%;
    overflow: hidden;
    border-radius: 2px;
    background: linear-gradient(135deg,
            rgba(252, 252, 252, 0.108),
            rgb(254, 254, 254));
    animation: prog 3s ease infinite;
}

@keyframes prog {
    0% {
        transform: translate(-80%, 0);
    }

    100% {
        transform: translate(180%, 0);
    }
}
</style>