首页现有地对接接口、首页下拉框渲染逻辑完善、社区区域树形数据对接

guanqb

2023-01-13 06e87b8905aaa00bbcea5fe4dcb5c1c092564469

首页现有地对接接口、首页下拉框渲染逻辑完善、社区区域树形数据对接

 src/api/dept/index.js

@@ -146,4 +146,16 @@
            infos,
        }
    })
}

// 小区树形数据
export const getPoliceStationLazyTree = (type, id) => {
    return request({
        url: `/api/policeStationInfo/policeStationInfo/getPoliceStationLazyTree`,
        method: 'get',
        params: {
            type,
            id
        }
    })
}

 src/api/home/index.js

@@ -105,6 +105,17 @@
    })
}

// 现有地模块
export const getAreaStatisticInfo = (type) => {
    return request({
        url: `/api/policeStationInfo/policeStationInfo/getAreaStatisticInfo`,
        method: 'get',
        params: {
            type,
        }
    })
}

// 获取设备分页数据 
export const getEquipmentPaging = (params) => {
    return request({

 src/components/map/index.vue

@@ -593,7 +593,6 @@
            // let polygon = new global.DC.Polygon(positions)
            // let polygonObj = {}//要在全局定义
            polygonObj[polygonName] = new global.DC.Polygon(positions)
            console.log(layerName, 1212)
            // polygon.setStyle({
            polygonObj[polygonName].setStyle({
                material: material,

 src/views/home/components/leftContainer.vue

@@ -152,7 +152,7 @@
                        @click="landTabClick(0)"
                    >
                        <div class="tab-title-small">小区:</div>
                        <div class="tab-title-small">634个</div>
                        <div class="tab-title-small">{{villageNum}}个</div>
                    </div>
                    <div
                        class="tab"
@@ -160,7 +160,7 @@
                        @click="landTabClick(1)"
                    >
                        <div class="tab-title-small">责任区:</div>
                        <div class="tab-title-small">634个</div>
                        <div class="tab-title-small">{{areaNum}}个</div>
                    </div>
                </div>
                <div id="landEcharts" class="echarts-box"></div>
@@ -188,6 +188,8 @@

<script>
import { fontSize } from '@/utils/fontSize.js'
import { getAreaStatisticInfo } from "@/api/home/index.js"

let homePersonmyChart
let houseMyChart
let landMyChart
@@ -317,8 +319,18 @@
                { name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区4', 'type': '重点上访人员' }
            ],
            keyPersonSelectSaveArr: [],
            areaNum: '',
            villageNum: '',
            areaOptionData: [],
            villageOptionData: [],
        }
    },

    created () {
        this.getAreaStatisticInfo(1)
        this.getAreaStatisticInfo(2)
    },

    mounted () {
        this.initLandEcharts()
        this.initPersonEcharts()
@@ -565,7 +577,7 @@
        initLandEcharts () {
            var chartDom = document.getElementById('landEcharts')
            landMyChart = this.$echarts.init(chartDom)
            landMyChart.setOption(this.initLandOptions(['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所'], [6414, 2211, 4321, 1232, 881, 6414, 2211, 4321, 1232, 881]))
            landMyChart.setOption(this.initLandOptions(this.villageOptionData[0], this.villageOptionData[1]))
        },

        initLandOptions (xDate, yDate) {
@@ -574,7 +586,7 @@
                    top: '4%',
                    left: '12%',
                    right: '4%',
                    bottom: '24%'
                    bottom: '28%'
                },
                tooltip: {
                    trigger: 'item',
@@ -596,7 +608,7 @@
                        color: "#fff",
                        interval: 0,
                        rotate: 45,
                        fontSize: fontSize(14)
                        fontSize: fontSize(12)
                    },
                    axisLine: {
                        lineStyle: {
@@ -663,11 +675,11 @@
            let xDate, yDate

            if (type == 0) {
                xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所']
                yDate = [6414, 2211, 4321, 1232, 881, 6414, 2211, 4321, 1232, 881]
                xDate = this.villageOptionData[0]
                yDate = this.villageOptionData[1]
            } else if (type == 1) {
                xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所']
                yDate = [881, 2211, 6414, 4321, 1232, 6414, 2211, 4321, 1232, 881]
                xDate = this.areaOptionData[0]
                yDate = this.areaOptionData[1]
            }

            landMyChart.setOption(this.initLandOptions(xDate, yDate), true)
@@ -996,6 +1008,33 @@
        //     echartsName.resize()
        // },

        getAreaStatisticInfo (type) {
            getAreaStatisticInfo(type).then(res => {
                if (type == 1) {
                    this.areaNum = res.data.data.areaNum
                    this.villageNum = res.data.data.villageNum
                    let nameArr = []
                    let countArr = []
                    res.data.data.data.forEach(item => {
                        nameArr.push(item.name)
                        countArr.push(item.count)
                    })
                    this.villageOptionData = [nameArr, countArr]
                } else {
                    this.areaNum = res.data.data.areaNum
                    this.villageNum = res.data.data.villageNum
                    let nameArr = []
                    let countArr = []
                    res.data.data.data.forEach(item => {
                        nameArr.push(item.name)
                        countArr.push(item.count)
                    })
                    this.areaOptionData = [nameArr, countArr]
                }
                this.initLandEcharts()
            })
        },

    },

    destroyed () {

 src/views/home/index.vue

@@ -11,17 +11,29 @@

<template>
    <div class="home-page container">
        <left-container class="left-container" @showpeopledetail="showpeopledetail" @showlanddetail="showlanddetail"
            @showkeypersondetail="showkeypersondetail" ref="leftContainer"></left-container>
        <left-container
            class="left-container"
            @showpeopledetail="showpeopledetail"
            @showlanddetail="showlanddetail"
            @showkeypersondetail="showkeypersondetail"
            ref="leftContainer"
        ></left-container>

        <right-container class="right-container" @showequimentdetail="showequimentdetail"
            @selectPoliceChangeEventData="selectPoliceChangeEventData" @changeActivityType="changeActivityType"
            ref="rightContainer"></right-container>
        <right-container
            class="right-container"
            @showequimentdetail="showequimentdetail"
            @selectPoliceChangeEventData="selectPoliceChangeEventData"
            @changeActivityType="changeActivityType"
            ref="rightContainer"
        ></right-container>

        <bottom-container class="bottom-container" ref="bottomContainer"
        <bottom-container
            class="bottom-container"
            ref="bottomContainer"
            @changePoliceSituationHistoryType="changePoliceSituationHistoryType"
            @policeSituationChange="policeSituationChange"
            @policeSituationSiteClick="policeSituationSiteClick"></bottom-container>
            @policeSituationSiteClick="policeSituationSiteClick"
        ></bottom-container>

        <div class="center-container">
            <div class="layers-control-btn house">
@@ -45,24 +57,51 @@
        </div>

        <div ref="RegionSelect" style="left: 0;" class="region-select">
            <map-select class="map-select" @selectCheck="policeStationSelect" :checkValue="policeStationCheckValue"
                :options="policeStationOptions" :optionsName="'name'"></map-select>
            <map-select
                class="map-select"
                @selectCheck="policeStationSelect"
                :checkValue="policeStationCheckValue"
                :options="policeStationOptions"
                :optionsName="'name'"
            ></map-select>

            <map-select class="map-select" @selectCheck="areaSelect" :checkValue="areaCheckValue" :options="areaOptions"
                :optionsName="'name'"></map-select>
            <map-select
                class="map-select"
                @selectCheck="areaSelect"
                :checkValue="areaCheckValue"
                :options="areaOptions"
                :optionsName="'name'"
            ></map-select>

            <map-select class="map-select" @selectCheck="housingSelect" :checkValue="housingCheckValue"
                :options="housingOptions" :optionsName="'name'"></map-select>
            <map-select
                class="map-select"
                @selectCheck="housingSelect"
                :checkValue="housingCheckValue"
                :options="housingOptions"
                :optionsName="'name'"
            ></map-select>
        </div>

        <el-dialog :title="panoramaTitle" :modal="true" :visible.sync="panoramaVisible"
            :before-close="panoramaBeforeClose" :close-on-click-modal="true" class="panorama-details-box">
        <el-dialog
            :title="panoramaTitle"
            :modal="true"
            :visible.sync="panoramaVisible"
            :before-close="panoramaBeforeClose"
            :close-on-click-modal="true"
            class="panorama-details-box"
        >
            <!-- <iframe src="http://vr.jxpskj.com/JXSFKZQJ/QJ/" style="width: 100%; height: 100%;" frameborder="0"></iframe>-->
            <iframe :src="panoramaVrUrl" style="width: 100%; height: 100%;" frameborder="0" />
        </el-dialog>

        <el-dialog :title="phoneTitle" :modal="true" :visible.sync="phoneVisible" :before-close="phoneBeforeClose"
            :close-on-click-modal="true" class="phone-details-box">
        <el-dialog
            :title="phoneTitle"
            :modal="true"
            :visible.sync="phoneVisible"
            :before-close="phoneBeforeClose"
            :close-on-click-modal="true"
            class="phone-details-box"
        >
            <div class="item">
                <div>责任人：</div>
                <div>{{ phoneDetails.person }}</div>
@@ -81,8 +120,14 @@
            </div>
        </el-dialog>

        <el-dialog :title="peopleTitle" :modal="true" :visible.sync="peopleVisible" :before-close="peopleBeforeClose"
            :close-on-click-modal="true" class="area-details-box">
        <el-dialog
            :title="peopleTitle"
            :modal="true"
            :visible.sync="peopleVisible"
            :before-close="peopleBeforeClose"
            :close-on-click-modal="true"
            class="area-details-box"
        >
            <div class="item">
                <div>责任区负责人：</div>
                <div>王某某</div>
@@ -101,14 +146,23 @@
            </div>
        </el-dialog>

        <el-dialog :title="equimentTitle" :modal="true" :visible.sync="equimentVisible"
            :before-close="equimentBeforeClose" :close-on-click-modal="true" class="equiment-details-box">
        <el-dialog
            :title="equimentTitle"
            :modal="true"
            :visible.sync="equimentVisible"
            :before-close="equimentBeforeClose"
            :close-on-click-modal="true"
            class="equiment-details-box"
        >
            <div class="equiment-detail">
                <div class="others">
                    <el-table :data="equimentTableData" style="width: 100%"
                    <el-table
                        :data="equimentTableData"
                        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-class-name="tableRowClassName"
                    >
                        <el-table-column type="index" :index="indexMethod" label="序号"></el-table-column>
                        <el-table-column prop="channelId" label="通道编号"></el-table-column>
                        <el-table-column prop="channelId" label="通道编号"></el-table-column>
@@ -116,33 +170,51 @@
                        <el-table-column prop="name" label="名称"></el-table-column>
                        <el-table-column label="状态">
                            <template slot-scope="scope">
                                <span>
                                    {{ scope.row.status == 0 ? '离线' : '在线' }}
                                </span>
                                <span>{{ scope.row.status == 0 ? '离线' : '在线' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click="play(scope.row)" type="text" size="small" title="播放视频">
                                <el-button
                                    @click="play(scope.row)"
                                    type="text"
                                    size="small"
                                    title="播放视频"
                                >
                                    <i class="el-icon-video-play"></i>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pages">
                        <el-pagination background layout="prev, pager, next" :total="equimentPagingTotal"
                            :page-size="pagesize" pager-count="3" :current-page="currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="equimentPagingTotal"
                            :page-size="pagesize"
                            pager-count="3"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                    </div>
                </div>
            </div>
        </el-dialog>

        <el-dialog :title="landTitle" :modal="true" :visible.sync="landVisible" :before-close="landBeforeClose"
            :close-on-click-modal="true" class="land-details-box">
            <el-table :data="landDetailArr" style="width: 100%"
        <el-dialog
            :title="landTitle"
            :modal="true"
            :visible.sync="landVisible"
            :before-close="landBeforeClose"
            :close-on-click-modal="true"
            class="land-details-box"
        >
            <el-table
                :data="landDetailArr"
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
            >
                <el-table-column prop="housingEastate" label="小区名称" width="100"></el-table-column>
                <el-table-column prop="location" label="位置" width="140"></el-table-column>
                <el-table-column prop="area" label="面积" width="120"></el-table-column>
@@ -151,11 +223,20 @@
            </el-table>
        </el-dialog>

        <el-dialog :title="keyPersonTitle" :modal="true" :visible.sync="keyPersonVisible"
            :before-close="keyPersonBeforeClose" :close-on-click-modal="true" class="keyPerson-details-box">
            <el-table :data="keyPersonDetailArr" style="width: 100%"
        <el-dialog
            :title="keyPersonTitle"
            :modal="true"
            :visible.sync="keyPersonVisible"
            :before-close="keyPersonBeforeClose"
            :close-on-click-modal="true"
            class="keyPerson-details-box"
        >
            <el-table
                :data="keyPersonDetailArr"
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
            >
                <el-table-column prop="type" label="重点人员类型"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="sex" label="性别"></el-table-column>
@@ -166,11 +247,23 @@
            </el-table>
        </el-dialog>

        <el-dialog title="警情信息" :modal="true" :visible.sync="policeSituationVisible"
            :before-close="policeSituationBeforeClose" :close-on-click-modal="true" class="policeSituation-details-box">
        <el-dialog
            title="警情信息"
            :modal="true"
            :visible.sync="policeSituationVisible"
            :before-close="policeSituationBeforeClose"
            :close-on-click-modal="true"
            class="policeSituation-details-box"
        >
            <div class="btn-change">
                <div :class="{ on: policeInformationType == '接警信息' }" @click="alarmOrActAsPolice('接警信息')">接警信息</div>
                <div :class="{ on: policeInformationType == '出警信息' }" @click="alarmOrActAsPolice('出警信息')">出警信息</div>
                <div
                    :class="{ on: policeInformationType == '接警信息' }"
                    @click="alarmOrActAsPolice('接警信息')"
                >接警信息</div>
                <div
                    :class="{ on: policeInformationType == '出警信息' }"
                    @click="alarmOrActAsPolice('出警信息')"
                >出警信息</div>
            </div>

            <div v-show="policeInformationType == '接警信息'" class="box">
@@ -232,7 +325,10 @@
                </div>
            </div>

            <div v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) != '{}'" class="box">
            <div
                v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) != '{}'"
                class="box"
            >
                <div class="item">
                    <div>处警单位编号:</div>
                    <div>{{ CJdata.CJDWBH }}</div>
@@ -289,14 +385,29 @@
                </div>
            </div>

            <div v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) == '{}'" class="box no-data">暂无数据
            </div>
            <div
                v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) == '{}'"
                class="box no-data"
            >暂无数据</div>
        </el-dialog>

        <el-dialog :title="dialogEquimentVideoTitle" :modal="true" :visible.sync="dialogEquimentVideoVisible"
            :before-close="dialogBeforeClose" :close-on-click-modal="true" class="car-video-box">
            <video src="" autoplay controls width="100%" height="100%" ref="videoElement"
                style="object-fit: fill"></video>
        <el-dialog
            :title="dialogEquimentVideoTitle"
            :modal="true"
            :visible.sync="dialogEquimentVideoVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <video
                src
                autoplay
                controls
                width="100%"
                height="100%"
                ref="videoElement"
                style="object-fit: fill"
            ></video>
        </el-dialog>
    </div>
</template>
@@ -378,10 +489,16 @@
    global.DC.Namespace.Cesium.Color.fromBytes(100, 149, 237, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(220, 20, 60, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(0, 0, 139, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(189, 183, 107, 800),
    global.DC.Namespace.Cesium.Color.fromBytes(148, 0, 211, 800),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 20, 147, 800),
    global.DC.Namespace.Cesium.Color.fromBytes(124, 252, 0, 800),
    global.DC.Namespace.Cesium.Color.fromBytes(189, 183, 107, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(148, 0, 211, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 20, 147, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(216, 191, 216, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 99, 71, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(64, 224, 208, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(238, 130, 238, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(245, 222, 179, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(154, 205, 50, 100),
    global.DC.Namespace.Cesium.Color.fromBytes(70, 130, 180, 100),
]
let timer = []

@@ -499,7 +616,6 @@
            that.policeSituationSiteClick(params)
        })
        getPoliceStationTree(1).then(res => {
            console.log(111, res.data.data)
            this.policeStationOptions = res.data.data
        })

@@ -516,6 +632,13 @@
            document.querySelector('.screen-full-btn').classList.add('homebottom')
            document.querySelector('.image-switch-icon-btn').classList.add('iconbottom')
            this.setDomStyle()
            this.$EventBus.$emit('toPosition', {
                siteJd: 118.0404977,
                siteWd: 28.4896891,
                siteGd: 60000,
                siteHeading: -3,
                sitePitch: -90
            })
        })
        // axios.get('/user/getUserList').then((res) => {
        //     console.log(res, 999)
@@ -585,7 +708,6 @@
        // 获取小区列表
        getResidentialQuartersList (adcode) {
            getResidentialQuartersList(adcode).then(res => {
                console.log(res.data.data, 111)
                let position = []
                res.data.data.forEach(item => {
                    position = JSON.parse(item.geom).coordinates
@@ -615,19 +737,19 @@
                this.areaCheckValue = '请选择责任区'
                this.housingCheckValue = '请选择小区'
            } else {
                this.initAreaOptionLayer(item)
                cylinderLayer.clear()
                this.initAreaOptionLayer(item)
                this.areaCheckValue = '请选择责任区'
                getPoliceStationTree(2, item.id).then(res => {
                    this.areaOptions = res.data.data
                })
            }
            this.policeStaionChecked = item
            this.$refs.leftContainer.selectPoliceChangeData(item.policeStationName)
            this.$refs.rightContainer.selectPoliceChangeEquimentData(item.policeStationName)
            this.$refs.rightContainer.selectPoliceChangeEventData(item.policeStationName)
            this.$refs.bottomContainer.selectPoliceSituatiionArr(item.policeStationName)
            this.policeSituationChange()
            // this.$refs.leftContainer.selectPoliceChangeData(item.policeStationName)
            // this.$refs.rightContainer.selectPoliceChangeEquimentData(item.policeStationName)
            // this.$refs.rightContainer.selectPoliceChangeEventData(item.policeStationName)
            // this.$refs.bottomContainer.selectPoliceSituatiionArr(item.policeStationName)
            // this.policeSituationChange()

        },

@@ -641,6 +763,22 @@
                this.housingCheckValue = '请选择小区'
                getPoliceStationTree(3, item.id).then(res => {
                    this.housingOptions = res.data.data
                    res.data.data.forEach(item => {
                        let itPositionStr = item.replace(/POINT\(/g, '')
                        itPositionStr = itPositionStr.replace(/\)/g, '')
                        let positionArr = [Number(itPositionStr.split(' ')[0]), Number(itPositionStr.split(' ')[1])]
                        this.$EventBus.$emit('layerPointAdd', {
                            layerName: 'polygonLayer',
                            type: 'billboard',
                            params: {
                                lng: positionArr[0],
                                lat: positionArr[1],
                                alt: 0,
                                url: '/img/icon/house.png'
                            },
                            distanceDisplayCondition: { "near": 0, "far": 200000 }
                        })
                    })
                })
                this.areaChecked = item
                this.initHousingLayer(item)
@@ -658,13 +796,15 @@

        },

        getCenter (arr) {
            let positions = []
            arr.forEach((item, index) => {
                positions[index] = [item[0], item[1]]
        getCenter (str) {
            let itPositionStr = str.replace(/MULTIPOLYGON\(\(\(/g, '')
            itPositionStr = itPositionStr.replace(/\)\)\)/g, '')
            let positionArr = itPositionStr.split(',')
            let positionNewArr = []
            positionArr.forEach(item => {
                positionNewArr.push([Number(item.split(' ')[0]), Number(item.split(' ')[1])])
            })
            positions.push([arr[0][0], arr[0][1]])
            let polygon = this.$turf.polygon([positions])
            let polygon = this.$turf.polygon([positionNewArr])
            let center = this.$turf.centroid(polygon)
            return [center.geometry.coordinates[0], center.geometry.coordinates[1]]
        },
@@ -865,34 +1005,33 @@
            this.currentPage = 1
        },

        initAreaCheckoptions (areaArr) {
            areaArr.forEach((item, index) => {
                if (item.areaCheckName != '全部') {
                    let str = ''
                    item.position.forEach(it => {
                        str = str + `${it[0]},${it[1]},${it[2]};`
                    })
                    console.log('str', str)
                    this.$EventBus.$emit('layerPolygonAdd', {
                        layerName: 'polygonLayer',
                        positions: str,
                        material: positionColor[index]
                    })
                    const center = this.getCenter(item.position)
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'polygonLayer',
                        type: 'label',
                        params: {
                            lng: center[0],
                            lat: center[1],
                            alt: 0,
                            text: item.areaCheckName
                        },
                        distanceDisplayCondition: { "near": 0, "far": 200000 }
                    })
                }
            })
        },
        // initAreaCheckoptions (areaArr) {
        //     areaArr.forEach((item, index) => {
        //         if (item.areaCheckName != '全部') {
        //             let str = ''
        //             item.position.forEach(it => {
        //                 str = str + `${it[0]},${it[1]},${it[2]};`
        //             })
        //             this.$EventBus.$emit('layerPolygonAdd', {
        //                 layerName: 'polygonLayer',
        //                 positions: str,
        //                 material: positionColor[index]
        //             })
        //             const center = this.getCenter(item.position)
        //             this.$EventBus.$emit('layerPointAdd', {
        //                 layerName: 'polygonLayer',
        //                 type: 'label',
        //                 params: {
        //                     lng: center[0],
        //                     lat: center[1],
        //                     alt: 0,
        //                     text: item.areaCheckName
        //                 },
        //                 distanceDisplayCondition: { "near": 0, "far": 200000 }
        //             })
        //         }
        //     })
        // },

        initHousingOptions (housingArr) {
            housingArr.forEach((item, index) => {
@@ -926,7 +1065,6 @@
            cylinderLayer = new global.DC.PrimitiveLayer('cylinderLayer')
            global.viewer.addLayer(cylinderLayer)
            this.policeStationOptions.forEach((item, index) => {
                console.log(item, 89)
                if (item.position && item.position.length > 0) {
                    item.position.forEach(it => {
                        let itPositionStr = it.replace(/MULTIPOLYGON\(\(\(/g, '')
@@ -979,42 +1117,54 @@
        },

        initAreaOptionLayer (item) {
            // let center = this.getPoliceStationCenter(item.policeStationName)
            this.clearPolygonLayer()
            item.position.forEach((it, index) => {
                let itPositionStr = it.replace(/MULTIPOLYGON\(\(\(/g, '')
                itPositionStr = itPositionStr.replace(/\)\)\)/g, '')
                itPositionStr = itPositionStr.replace(/,/g, ";")
                itPositionStr = itPositionStr.replace(/ /g, ",")
                let center = this.getCenter(item.position[0])
                this.$EventBus.$emit('layerPolygonAdd', {
                    layerName: 'polygonLayer',
                    positions: itPositionStr,
                    material: positionColor[index],
                })
                this.$EventBus.$emit('toPosition', {
                    siteJd: center[0],
                    siteWd: center[1],
                    siteGd: 20000,
                    siteHeading: -3,
                    sitePitch: -90
                })
            })
        },

        initHousingLayer (item) {
            // let center = this.getAreaCenter(item.areaCheckName)
            this.clearPolygonLayer()
            // this.$EventBus.$emit('toPosition', {
            //     siteJd: center[0],
            //     siteWd: center[1],
            //     siteGd: 60000,
            //     siteGd: 18000,
            //     siteHeading: -3,
            //     sitePitch: -90
            // })
            // this.areaOptionData.some((option) => {
            //     if (item.policeStationName == option.policeStationName) {
            //         this.initAreaCheckoptions(option.areaCheckOptions)
            //         this.areaOptions = option.areaCheckOptions
            //     }
            // })
        },

        initHousingLayer (item) {
            let center = this.getAreaCenter(item.areaCheckName)
            this.clearPolygonLayer()
            let itPositionStr = item.position[0].replace(/MULTIPOLYGON\(\(\(/g, '')
            itPositionStr = itPositionStr.replace(/\)\)\)/g, '')
            itPositionStr = itPositionStr.replace(/,/g, ";")
            itPositionStr = itPositionStr.replace(/ /g, ",")
            let center = this.getCenter(item.position[0])
            this.$EventBus.$emit('layerPolygonAdd', {
                layerName: 'polygonLayer',
                positions: itPositionStr,
                material: positionColor[0],
            })
            this.$EventBus.$emit('toPosition', {
                siteJd: center[0],
                siteWd: center[1],
                siteGd: 18000,
                siteGd: 6000,
                siteHeading: -3,
                sitePitch: -90
            })
            this.housingDate.some((option) => {
                if (this.policeStaionChecked.policeStationName == option.policeStationName) {
                    option.areaOptionArr.some((one) => {
                        if (item.areaCheckName == one.areaCheckName) {
                            this.initHousingOptions(one.housingArr)
                            this.housingOptions = one.housingArr
                        }
                    })
                }
            })
        },

@@ -1054,16 +1204,6 @@
                layerName: 'polygonLayer',
                type: 'VectorLayer'
            })
        },

        getPoliceStationCenter (name) {
            let center = []
            this.policeStationOptions.some((item) => {
                if (name == item.policeStationName) {
                    center = this.getCenter(item.position)
                }
            })
            return center
        },

        getAreaCenter (name) {
@@ -1275,7 +1415,9 @@
                console.log(index, 5000)
            })
            return index + 1
        }
        },


    },

    destroyed () {

 src/views/house/index.vue

@@ -16,25 +16,56 @@
                <!-- <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
                <button @click="searchClick" class="el-icon-search"></button>-->

                <el-popover ref="popover" placement="bottom" trigger="click" :visible-arrow="false"
                    popper-class="tree-search-popup">
                <el-popover
                    ref="popover"
                    placement="bottom"
                    trigger="click"
                    :visible-arrow="false"
                    popper-class="tree-search-popup"
                >
                    <el-input placeholder="请输入搜索条件" v-model="filterText"></el-input>

                    <el-tree style="width: 360px; height: 400px; overflow: auto;" class="select-tree-box"
                        :data="testData" :props="defaultProps" ref="popupTree" @current-change="currentChangeHandle"
                        :default-expand-all="defaultExpandAll" :accordion="accordion"
                        :highlight-current="highlightCurrent" :expand-on-click-node="true" check-strictly
                        :filter-node-method="filterNode"></el-tree>
                    <!-- <el-tree
                        style="width: 360px; height: 400px; overflow: auto;"
                        class="select-tree-box"
                        :data="testData"
                        :props="defaultProps"
                        ref="popupTree"
                        @current-change="currentChangeHandle"
                        :default-expand-all="defaultExpandAll"
                        :accordion="accordion"
                        :highlight-current="highlightCurrent"
                        :expand-on-click-node="true"
                        check-strictly
                        :filter-node-method="filterNode"
                    ></el-tree>-->
                    <el-tree
                        style="width: 360px; height: 400px; overflow: auto;"
                        class="select-tree-box"
                        :props="props"
                        :load="loadNode"
                        ref="popupTree"
                        lazy
                    ></el-tree>
                </el-popover>

                <el-input slot="reference" v-model="prop" v-popover:popover :readonly="true" placeholder="请输入搜索条件"
                    style="cursor: pointer;"></el-input>
                <el-input
                    slot="reference"
                    v-model="prop"
                    v-popover:popover
                    :readonly="true"
                    placeholder="请输入搜索条件"
                    style="cursor: pointer;"
                ></el-input>
            </div>

            <div v-show="searchValBoxShow" class="search-val-box">
                <div>
                    <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{ item.name }}
                    </div>
                    <div
                        @click="searchVlaClick(item)"
                        v-for="(item, index) in searchArray"
                        :key="index"
                    >{{ item.name }}</div>
                </div>
            </div>

@@ -68,17 +99,48 @@
                </div>

                <div class="nav-tab">
                    <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 class="nav" :class="navType == 2 ? 'choosed' : ''" @click="navClick" data-type="2">出警信息</div>
                    <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
                        class="nav"
                        :class="navType == 2 ? 'choosed' : ''"
                        @click="navClick"
                        data-type="2"
                    >出警信息</div>
                </div>

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

                    <div class="floor-content" v-show="subNavType == 1">
@@ -89,17 +151,26 @@
                            <div class="build-outBox" ref="BuildOutBox">
                                <div class="build-box" style="left: 0px;">
                                    <!-- :style="{ width: `calc(${Math.ceil(buildingList.length / 10)} * (356 / 1920) * 100vw` }" -->
                                    <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>
                                    <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>
                                    </div>
                                </div>
                            </div>
                            <div class="nextBtn rightBtn" @click="nextBtn">
                                <i v-show="buildingList.length > 10 && nextBtnShow" class="el-icon-caret-right"></i>
                                <i
                                    v-show="buildingList.length > 10 && nextBtnShow"
                                    class="el-icon-caret-right"
                                ></i>
                            </div>
                        </div>

@@ -180,9 +251,19 @@
                            <div class="condo">
                                <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
                                        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>
@@ -236,29 +317,42 @@
                                </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(unitHouseChoosed.length / 5)" :key="index">
                                        <div
                                            :class="{ on: floorsType == index }"
                                            @click="floorsType = index"
                                            v-for="index in Math.ceil(unitHouseChoosed.length / 5)"
                                            :key="index"
                                        >
                                            {{ unitHouseChoosed[index * 5 - 5].floor_num }}-{{
                                                unitHouseChoosed[index *
                                                    5
                                                    - 1]? unitHouseChoosed[index * 5
                                                        - 1].floor_num : unitHouseChoosed[unitHouseChoosed.length - 1].floor_num
                                            unitHouseChoosed[index *
                                            5
                                            - 1]? unitHouseChoosed[index * 5
                                            - 1].floor_num : unitHouseChoosed[unitHouseChoosed.length - 1].floor_num
                                            }}层
                                        </div>
                                    </div>
                                </div>
                                <div @click="nextFloorBtn" class="floorBtn rightFloorBtn" v-show="nextFloorShow">
                                <div
                                    @click="nextFloorBtn"
                                    class="floorBtn rightFloorBtn"
                                    v-show="nextFloorShow"
                                >
                                    <i class="el-icon-caret-right"></i>
                                </div>
                            </div>

                            <div class="floor-detail">
                                <div v-for="(item, index) in unitHouseChoosed.slice((floorsType - 1) * 5, floorsType * 5)"
                                    :key="index">
                                <div
                                    v-for="(item, index) in unitHouseChoosed.slice((floorsType - 1) * 5, floorsType * 5)"
                                    :key="index"
                                >
                                    <div class="title">{{ item.floor_num }}层：</div>
                                    <div class="detail">
                                        <div v-for="(value, index) in item.floor_house" :key="index"
                                            @click="residentDetailsClick(value)">
                                        <div
                                            v-for="(value, index) in item.floor_house"
                                            :key="index"
                                            @click="residentDetailsClick(value)"
                                        >
                                            <!-- :class="[{ 'chuzu': value.houseType == '出租' }, { 'zizhu': value.houseType == '自住' }, { 'kongzhi': value.houseType == '空置' }, { 'shangye': value.houseType == '商业' }]" -->
                                            {{ value.house_num }}
                                            <!-- <div class="flow"></div>
@@ -272,36 +366,60 @@
                    </div>

                    <div class="come-out-content" v-show="subNavType == 2">
                        <el-table :data="comeOutData" style="width: 100%"
                        <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')">
                            <el-table-column prop="name" label="名称" width="180"
                                :show-overflow-tooltip="true"></el-table-column>
                            :row-class-name="tableRowClassName"
                            @row-click="deepDataRowClick($event, 'comeOut')"
                        >
                            <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" v-show="subNavType == 3">
                        <el-table :data="parkingLotData" style="width: 100%"
                        <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')">
                            <el-table-column prop="name" label="名称" width="180"
                                :show-overflow-tooltip="true"></el-table-column>
                            :row-class-name="tableRowClassName"
                            @row-click="deepDataRowClick($event, 'park')"
                        >
                            <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" v-show="subNavType == 4">
                        <el-table :data="businessData" style="width: 100%"
                        <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')">
                            <el-table-column prop="name" label="名称" width="180"
                                :show-overflow-tooltip="true"></el-table-column>
                            :row-class-name="tableRowClassName"
                            @row-click="deepDataRowClick($event, 'business')"
                        >
                            <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>
@@ -309,10 +427,14 @@
                </div>

                <div class="police-info" v-show="navType == 1">
                    <el-table :data="arr" style="width: 100%"
                    <el-table
                        :data="arr"
                        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="clickData">
                        :row-class-name="tableRowClassName"
                        @row-click="clickData"
                    >
                        <el-table-column prop="name" label="名称" width="130"></el-table-column>
                        <el-table-column prop="time" label="时间" width="150"></el-table-column>
                        <el-table-column prop="type" label="类别" width="120"></el-table-column>
@@ -320,10 +442,14 @@
                </div>

                <div class="warning-info" v-show="navType == 2">
                    <el-table :data="warningArray" style="width: 100%"
                    <el-table
                        :data="warningArray"
                        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="clickData">
                        :row-class-name="tableRowClassName"
                        @row-click="clickData"
                    >
                        <el-table-column prop="name" label="名称" width="130"></el-table-column>
                        <el-table-column prop="time" label="时间" width="150"></el-table-column>
                        <el-table-column prop="type" label="类别" width="120"></el-table-column>
@@ -333,8 +459,13 @@
        </div>
        <!-- <transition name="special-animal"></transition>-->
        <div class="search-content">
            <input v-model="searchExtensivelyValue" @input="searchExtensivelyChange" @focus="searchExtensivelyFocus"
                type="text" placeholder="请输入搜索条件" />
            <input
                v-model="searchExtensivelyValue"
                @input="searchExtensivelyChange"
                @focus="searchExtensivelyFocus"
                type="text"
                placeholder="请输入搜索条件"
            />
            <div class="clear" v-show="isShowClearBtn" @click="clearSearchValue" title="清空">
                <img src="../../../public/img/icon/clear.png" alt />
            </div>
@@ -342,12 +473,21 @@
        </div>
        <div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
            <div>
                <div @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray"
                    :key="index">{{ item.name }}</div>
                <div
                    @click="searchExtensivelyVlaClick(item)"
                    v-for="(item, index) in searchExtensivelyArray"
                    :key="index"
                >{{ item.name }}</div>
            </div>
        </div>
        <el-dialog title="信息详情" :modal="false" :visible.sync="dialogVisible" :before-close="handleClose"
            :close-on-click-modal="true" class="police-affairs-details-box">
        <el-dialog
            title="信息详情"
            :modal="false"
            :visible.sync="dialogVisible"
            :before-close="handleClose"
            :close-on-click-modal="true"
            class="police-affairs-details-box"
        >
            <div class="item">
                <div>名称：</div>
                <div>{{ JWdetails.name }}</div>
@@ -382,12 +522,21 @@
            </div>
        </el-dialog>

        <el-dialog :title="residentDetailsTitle" :modal="false" :visible.sync="residentDetailsShow"
            :before-close="residentDetailsClose" :close-on-click-modal="true" class="resident-details-box" width="30%">
        <el-dialog
            :title="residentDetailsTitle"
            :modal="false"
            :visible.sync="residentDetailsShow"
            :before-close="residentDetailsClose"
            :close-on-click-modal="true"
            class="resident-details-box"
            width="30%"
        >
            <h3 style="text-align:left;margin:10px 0 10px 0">户主信息</h3>
            <el-table :data="houseDate.householdsDate"
            <el-table
                :data="houseDate.householdsDate"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }">
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
            >
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="peopleType" label="重点人员"></el-table-column>
                <el-table-column prop="nation" label="民族"></el-table-column>
@@ -412,11 +561,20 @@
            </el-table>-->
        </el-dialog>

        <el-dialog :title="keyPersonTitle" :modal="false" :visible.sync="keyPersonVisible"
            :before-close="keyPersonBeforeClose" :close-on-click-modal="true" class="keyPerson-details-box">
            <el-table :data="keyPersonDetailArr" style="width: 100%"
        <el-dialog
            :title="keyPersonTitle"
            :modal="false"
            :visible.sync="keyPersonVisible"
            :before-close="keyPersonBeforeClose"
            :close-on-click-modal="true"
            class="keyPerson-details-box"
        >
            <el-table
                :data="keyPersonDetailArr"
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
            >
                <el-table-column prop="type" label="重点人员类型"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="sex" label="性别"></el-table-column>
@@ -432,7 +590,7 @@
<script>
import { listQuery, accurateSearch } from "@/utils/search.js"
import housingData from '@/assets/data/housingData.js'
import { getResidentialQuartersList, getResidentialQuartersInfo, getSearchExtensively, getAoiByPt, getUnitbuild, getHouses, getSearchExtensivelyBgAoiDeepdata } from '@/api/dept/index.js'
import { getResidentialQuartersList, getResidentialQuartersInfo, getSearchExtensively, getAoiByPt, getUnitbuild, getHouses, getSearchExtensivelyBgAoiDeepdata, getPoliceStationLazyTree } from '@/api/dept/index.js'

export default {
    data () {
@@ -535,77 +693,82 @@
            boxShow: false,
            // 下拉搜索
            filterText: "",
            testData: [
                {
                    name: "一级 1",
                    children: [
                        {
                            name: "二级 1-1",
                            children: [
                                {
                                    name: "万达华府",
                                },
                                {
                                    name: "万达晶座",
                                },
                                {
                                    name: "万达广场",
                                },
                            ],
                        },
                    ],
                },
                {
                    name: "一级 2",
                    children: [
                        {
                            name: "二级 2-1",
                            children: [
                                {
                                    name: "三级 2-1-1",
                                },
                            ],
                        },
                        {
                            name: "二级 2-2",
                            children: [
                                {
                                    name: "三级 2-2-1",
                                },
                            ],
                        },
                    ],
                },
                {
                    name: "一级 3",
                    children: [
                        {
                            name: "二级 3-1",
                            children: [
                                {
                                    name: "三级 3-1-1",
                                },
                            ],
                        },
                        {
                            name: "二级 3-2",
                            children: [
                                {
                                    name: "三级 3-2-1",
                                },
                            ],
                        },
                    ],
                },
            ],
            defaultProps: {
                children: "children", //代表children为子级
                label: "name", //根据name渲染tree列表
            // testData: [
            //     {
            //         name: "一级 1",
            //         children: [
            //             {
            //                 name: "二级 1-1",
            //                 children: [
            //                     {
            //                         name: "万达华府",
            //                     },
            //                     {
            //                         name: "万达晶座",
            //                     },
            //                     {
            //                         name: "万达广场",
            //                     },
            //                 ],
            //             },
            //         ],
            //     },
            //     {
            //         name: "一级 2",
            //         children: [
            //             {
            //                 name: "二级 2-1",
            //                 children: [
            //                     {
            //                         name: "三级 2-1-1",
            //                     },
            //                 ],
            //             },
            //             {
            //                 name: "二级 2-2",
            //                 children: [
            //                     {
            //                         name: "三级 2-2-1",
            //                     },
            //                 ],
            //             },
            //         ],
            //     },
            //     {
            //         name: "一级 3",
            //         children: [
            //             {
            //                 name: "二级 3-1",
            //                 children: [
            //                     {
            //                         name: "三级 3-1-1",
            //                     },
            //                 ],
            //             },
            //             {
            //                 name: "二级 3-2",
            //                 children: [
            //                     {
            //                         name: "三级 3-2-1",
            //                     },
            //                 ],
            //             },
            //         ],
            //     },
            // ],
            // defaultProps: {
            //     children: "children", //代表children为子级
            //     label: "name", //根据name渲染tree列表
            // },
            // prop: '',
            // defaultExpandAll: false,
            // accordion: true,
            // highlightCurrent: true,
            props: {
                label: 'name',
                children: 'zones',
                isLeaf: 'leaf'
            },
            prop: '',
            defaultExpandAll: false,
            accordion: true,
            highlightCurrent: true,
            buildingList: [],
            buildingChoosed: {},
            unitHouseChoosed: [],
@@ -696,6 +859,7 @@
        // this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', '万达')
        // this.getAoiByPt('117.9471794', '28.4474852', '361100', '0', '361102', '10')
        // this.getUnitbuild('6E513C5E5D1611EAB6183C15FB00027B', '361102')
        // this.getPoliceStationLazyTree(1)
    },
    mounted () {
        this.$parent.$parent.resize('400px', true)
@@ -1094,6 +1258,40 @@
        goTOPeopleDetail () {
            this.keyPersonVisible = true
        },

        getPoliceStationLazyTree (type, id) {
            getPoliceStationLazyTree(type, id).then(res => {
                console.log(res, 4444444)
            })
        },

        async loadNode (node, resolve) {
            console.log(node, 111)
            if (node.level === 0) {
                let policeStaionList = []
                await getPoliceStationLazyTree(1).then(res => {
                    policeStaionList = res.data.data
                })
                return resolve(policeStaionList)
            }
            if (node.level == 1) {
                let areaList = []
                await getPoliceStationLazyTree(2, node.data.id).then(res => {
                    areaList = res.data.data
                })
                return resolve(areaList)
            }
            if (node.level == 2) {
                let villageList = []
                await getPoliceStationLazyTree(3, node.data.id).then(res => {
                    res.data.data.forEach(item => {
                        villageList = res.data.data
                    })
                })
                return resolve(villageList)
            }
        },

    },

    destroyed () {
@@ -1187,7 +1385,7 @@
            border-radius: 10px;
            overflow: hidden;

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

@@ -1222,9 +1420,11 @@
                        left: 10px;
                        right: 10px;
                        bottom: 4px;
                        background: linear-gradient(135deg,
                                rgb(33 150 243 / 74%),
                                rgb(254 254 254 / 0%));
                        background: linear-gradient(
                            135deg,
                            rgb(33 150 243 / 74%),
                            rgb(254 254 254 / 0%)
                        );
                        z-index: -1;
                    }
                }
@@ -1235,7 +1435,7 @@
                }

                .housing-introduce {
                    &>div {
                    & > div {
                        padding: 0 10px;
                        display: flex;

@@ -1298,7 +1498,7 @@
                    }
                }

                &>.floor-content {
                & > .floor-content {
                    background: rgba(8, 56, 185, 0.5);

                    .build-info {
@@ -1349,7 +1549,7 @@
                                    flex-wrap: wrap;
                                    width: 356px;

                                    &>div {
                                    & > div {
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
@@ -1384,7 +1584,7 @@
                            background: rgba(8, 56, 185, 0.5);
                            display: flex;

                            &>div {
                            & > div {
                                height: 26px;
                                line-height: 26px;
                                flex: 1;
@@ -1392,11 +1592,11 @@
                                justify-content: center;
                                border-right: 1px solid #50555f;

                                &>div {
                                & > div {
                                    cursor: pointer;
                                }

                                &>div:last-child {
                                & > div:last-child {
                                    margin-left: 14px;
                                    font-size: 18px;
                                    font-weight: bold;
@@ -1404,11 +1604,11 @@
                                }
                            }

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

                            &>div:last-child {
                            & > div:last-child {
                                border: none;
                            }
                        }
@@ -1435,10 +1635,10 @@
                                display: flex;
                                justify-content: space-around;

                                &>div {
                                & > div {
                                    flex: 1;

                                    &>div:first-child {
                                    & > div:first-child {
                                        height: 30px;
                                        line-height: 30px;
                                        font-size: 18px;
@@ -1446,7 +1646,7 @@
                                        color: #499d99;
                                    }

                                    &>div:last-child {
                                    & > div:last-child {
                                        height: 26px;
                                        line-height: 26px;
                                    }
@@ -1461,8 +1661,8 @@
                            justify-content: space-around;
                            background: rgba(8, 56, 185, 0.5);

                            &>div {
                                &>div:first-child {
                            & > div {
                                & > div:first-child {
                                    height: 30px;
                                    line-height: 30px;
                                    font-size: 18px;
@@ -1496,7 +1696,6 @@
                    }

                    .house-element-info {

                        .condo,
                        .legend {
                            display: flex;
@@ -1519,12 +1718,12 @@
                                display: flex;
                                flex: 1;

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

                                    &>span {
                                    & > span {
                                        margin: 0 10px;
                                        width: 14px;
                                        height: 8px;
@@ -1591,7 +1790,7 @@
                                    left: 0;
                                    transition: all 1s;

                                    &>div {
                                    & > div {
                                        margin: 0 4px;
                                        display: flex;
                                        justify-content: center;
@@ -1604,7 +1803,7 @@
                                        border: 0.0925925926vh solid #fff;
                                    }

                                    &>.on {
                                    & > .on {
                                        border: 1px solid orange;
                                        color: orange;
                                    }
@@ -1616,7 +1815,7 @@
                            margin-top: 14px;
                            height: 220px;

                            &>div {
                            & > div {
                                margin: 8px;
                                height: 36px;
                                line-height: 36px;
@@ -1630,7 +1829,7 @@
                                    flex: 1;
                                    display: flex;

                                    &>div {
                                    & > div {
                                        margin: 0 4px;
                                        position: relative;
                                        width: 68px;
@@ -1654,29 +1853,33 @@
                                        }

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

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

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

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

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

                                    &>.shangye {
                                    & > .shangye {
                                        border: 1px solid #cc9456;
                                    }
                                }
@@ -1790,7 +1993,7 @@
        border-radius: 10px;
        overflow: hidden;

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

@@ -1820,9 +2023,11 @@
    height: 100%;
    overflow: hidden;
    border-radius: 2px;
    background: linear-gradient(135deg,
            rgba(252, 252, 252, 0.108),
            rgb(254, 254, 254));
    background: linear-gradient(
        135deg,
        rgba(252, 252, 252, 0.108),
        rgb(254, 254, 254)
    );
    animation: prog 3s ease infinite;
}