~admin/srs-police-affairs.git

			@@ -1,8 +1,8 @@
			<!--
			* @Author: shuishen 1109946754@qq.com
			* @Date: 2022-08-18 16:18:17
			* @LastEditors: shuishen 1109946754@qq.com
			* @LastEditTime: 2023-04-01 22:48:33
			* @LastEditors: song
			* @LastEditTime: 2023-04-02 13:15:37
			* @FilePath: \srs-police-affairs\src\views\house\index.vue
			* @Description: 小区-栋-层-房屋
			*
			@@ -31,7 +31,10 @@
			</div>

			<div v-show="contentShow" class="result-content" ref="resultContentBox">

			<div class="housing-estate-info" ref="housingEstateInfoBox">
			<el-main v-loading="villageInfoLoading" element-loading-background="rgba(0, 0, 0, 0.2)"
			element-loading-text="数据正在加载中" element-loading-spinner="el-icon-loading">
			<div class="housing-title">
			{{ villageInfo.name }}
			<div class="progress"></div>
			@@ -70,6 +73,7 @@
			</div>
			</div>
			</div>
			</el-main>

			<div class="nav-tab" ref="navTabBox">
			<div class="nav" :class="navType == 0 ? 'choosed' : ''" @click="navClick" data-type="0">基本信息</div>
			@@ -382,1613 +386,1808 @@
			</template>

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

			import {
			getSearchExtensively, getHouses, getSearchExtensivelyBgAoiDeepdata,
			getPoliceStationLazyTree, getPoliceStationTrees, getVillageInfo,
			getVillagePersonStatisticInfoByBuildId, getVillagePersonInfo,
			getResidentialQuartersInfo, getAoiByBgId, getPoliceSationVillageInfo, getAoiByPt
			} from '@/api/dept/index.js'
			import { getAlarmList } from "@/api/home/index.js"
			getSearchExtensively,
			getHouses,
			getSearchExtensivelyBgAoiDeepdata,
			getPoliceStationLazyTree,
			getPoliceStationTrees,
			getVillageInfo,
			getVillagePersonStatisticInfoByBuildId,
			getVillagePersonInfo,
			getResidentialQuartersInfo,
			getAoiByBgId,
			getPoliceSationVillageInfo,
			getAoiByPt,
			} from "@/api/dept/index.js";
			import { getAlarmList } from "@/api/home/index.js";

			let wallLayer = null
			let wallLayer = null;

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

			data () {
			return {
			// 下拉搜索--树状数据相关
			searchTreeShowFlag: false,
			keyPeopleLoading: 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: "",
			data() {
			return {
			// 下拉搜索--树状数据相关
			searchTreeShowFlag: false,
			keyPeopleLoading: 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: 1,
			searchHouse: '',
			navType: 0,
			contentShow: true,
			unitOptions: [{ value: 1, label: "1单元" }],
			unitValue: 1,
			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: [],
			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: [],

			boxShow: false,
			boxShow: false,

			buildingList: [],
			buildingChoosed: {},
			unitHouseChoosed: [],
			parkingLotData: [],
			comeOutData: [],
			businessData: [],
			keyPersonTitle: '人员详情',
			keyPersonVisible: false,
			personDetailArr: [],
			buildingList: [],
			buildingChoosed: {},
			unitHouseChoosed: [],
			parkingLotData: [],
			comeOutData: [],
			businessData: [],
			keyPersonTitle: "人员详情",
			keyPersonVisible: false,
			personDetailArr: [],

			// 报警信息
			policeSituationHistoryArr: [],
			// 报警信息
			policeSituationHistoryArr: [],

			// 详情
			policeSituationDetailObj: {},
			// 详情
			policeSituationDetailObj: {},

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

			// table高度
			currentTableHeight: 0,
			villageInfo: {
			pic_url: '',
			pic_url_list: []
			},
			floorInfo: {},
			peopleInfo: {},
			choosedBuildId: '',
			keyPeopleType: '',
			peoplePage: {
			total: 0,
			pageSize: 0,
			currentPage: 1
			},
			peopleName: '',
			callPhone: '',
			pictLoading: false,
			isShowHouseBox: true,
			floorChoosed: {},
			isShowUnitChoose: false,
			allHouseFloorList: [],
			isShowPictArrow: 'never',
			}
			},
			// table高度
			currentTableHeight: 0,
			villageInfo: {
			pic_url: "",
			pic_url_list: [],
			},
			floorInfo: {},
			peopleInfo: {},
			choosedBuildId: "",
			keyPeopleType: "",
			peoplePage: {
			total: 0,
			pageSize: 0,
			currentPage: 1,
			},
			peopleName: "",
			callPhone: "",
			pictLoading: false,
			isShowHouseBox: true,
			floorChoosed: {},
			isShowUnitChoose: false,
			allHouseFloorList: [],
			isShowPictArrow: "never",
			villageInfoLoading:false
			};
			},

			created () {
			// 首页跳转社区包含参数
			if (this.$route.query.id) {
			this.getVillageInfo(this.$route.query.id)
			// 使用首页传过来的小区id获取停车场出入口商场和小区名称类型地址数据
			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
			// let villageId = res.data.data.Md5Id
			//直接进入社区默认获取万达广场的责任民警及所属辖区
			// this.getVillageInfo('644A2C4049024A3C8C76D96EEE4366FD')
			// this.getVillageInfo(villageId)
			created() {
			// 首页跳转社区包含参数
			if (this.$route.query.id) {
			this.getVillageInfo(this.$route.query.id);
			// 使用首页传过来的小区id获取停车场出入口商场和小区名称类型地址数据
			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;
			// let villageId = res.data.data.Md5Id
			//直接进入社区默认获取万达广场的责任民警及所属辖区
			// this.getVillageInfo('644A2C4049024A3C8C76D96EEE4366FD')
			// this.getVillageInfo(villageId)

			// 测试万达
			this.getVillageInfo(villageId)
			// 测试万达
			this.getVillageInfo(villageId);

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

			const that = this

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

			this.$EventBus.$on('housingIndent', (e) => {
			that.housingIndent(e)
			})

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

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

			this.$nextTick(() => {
			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)
			}
			})
			},

			updated () {
			},

			methods: {
			housingIndent (e) {
			this.getAoiByPtStd(e)
			},

			/**
			* @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 {*}
			*/
			async loadNode (node, resolve) {
			if (this.userInfo.dept_id != '1123598813738675201') {
			let list = []
			let type = node.level + 1
			await 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
			await 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) return
			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.getResidentialQuartersInfo(current.id, '361102')
			this.getSearchExtensivelyBgAoiDeepdata('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', current.id, '1\|3')
			this.getVillageInfo(current.id)
			this.$refs.searchTreeInput.blur()
			this.searchLazyFlag = true
			},

			navClick (e) {
			this.navType = e.target.dataset.type

			if (this.navType == 1) {
			this.callPolicePage.currentPage = 1
			this.getAlarmList()
			} else {
			circleLayer.clear()
			circleLayer.remove()
			circleLayer = null
			}
			},

			// 大搜之搜索面详细数据（停车场出入口商场、小区名称类型地址、楼栋数据）
			getSearchExtensivelyBgAoiDeepdata (ak, region, ids, infos) {
			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.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_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'
			}
			// 停车场出入口商场
			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
			console.log('deepData------', deepData)
			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 (res.data.result[0].children_infos && res.data.result[0].children_infos.length) {
			let buildData = res.data.result[0].children_infos
			this.buildingList = []
			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]}`, floor_num: `${item.floor_num}`, elev: `${item.elev}` })
			})
			this.buildingClick(this.buildingList[0])
			}

			this.callPolicePage.currentPage = 1
			this.getAlarmList()
			})
			},

			// 楼栋单元楼层户室查询
			getHouses (build_id, adcode, aoiArr) {
			getHouses(build_id, adcode).then(res => {
			let maxHeight = res.data.data.properties.hwtxa.features[0].properties.mbfdr - res.data.data.properties.hwtxa.features[0].properties.yjpca


			let houseData = res.data.data.properties

			curHousingName = res.data.data.properties.ckgkt

			this.floorChoosed = []

			this.$EventBus.$emit('showThreeDimensions', { positions: houseData.kmj3a, minHeight: 0, maxHeight: maxHeight })

			if (res.data != null && houseData.nwwqd.features != []) {
			let unitData = houseData.nwwqd.features
			console.log(unitData.length, 223366)
			this.floorInfo.house_num = unitData.length
			if (houseData.hwtxa.features.length > 1) {
			this.isShowUnitChoose = true
			}
			let allUnitDate = []
			this.unitOptions = []
			houseData.hwtxa.features.forEach((item, index) => {
			this.unitOptions.push({ value: `${index + 1}`, label: `${item.properties.pgjmz}` })
			let unitOptionData = []
			unitData.forEach(inItem => {
			if (inItem.properties.pgjmz == item.properties.pgjmz) {
			unitOptionData.push(inItem)
			}
			})
			allUnitDate.push(unitOptionData)
			})
			this.allHouseFloorList = []
			allUnitDate.forEach(item => {
			let houseFloorList = []
			item.forEach(inItem => {
			if (houseFloorList.indexOf(Number(inItem.properties.cftlg)) === -1) {
			houseFloorList.push(Number(inItem.properties.cftlg))
			}
			})
			houseFloorList = houseFloorList.sort((a, b) => {
			return a - b
			})
			let newArr = []
			houseFloorList.forEach(floor => {
			let houseArr = item.filter(inItem => {
			return Number(inItem.properties.cftlg) == floor
			})
			newArr.push({ floor_num: floor, floor_house: houseArr.slice(0, 4) })
			})
			this.allHouseFloorList.push(newArr)
			})
			this.unitHouseChoosed = this.allHouseFloorList[0]
			if (aoiArr) {
			this.unitHouseChoosed.forEach((item, index) => {
			let aoiHeight = aoiArr[1]
			let minHeight = item.floor_house[0].properties.szhfr
			let maxHeight = item.floor_house[0].properties.szhfr + item.floor_house[0].properties.hnagn
			if (minHeight < aoiHeight && aoiHeight < maxHeight) {
			this.floorsType = Math.ceil((index + 1) / 5)
			if (this.floorsType > 3) {
			for (let i = 0; i < this.floorsType - 3; i++) {
			this.nextFloorBtn()
			}
			}
			item.floor_house.forEach(one => {
			let polygon = this.$turf.polygon([JSON.parse(one.properties.kmj3a).coordinates[0]])
			let point = this.$turf.point(aoiArr[0])
			if (this.$turf.booleanContains(polygon, point)) {
			this.residentDetailsClick(one)
			}
			})
			}
			})
			}
			this.pictLoading = false
			} else {
			this.isShowHouseBox = false
			}

			})
			},

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

			// 点击户室
			residentDetailsClick (params) {
			this.floorChoosed = params.properties.fojcu
			this.$EventBus.$emit('clearHouse3D')
			this.getVillagePersonInfo(params.properties.snxmi)
			this.residentDetailsTitle = `${curHousingName}${this.unitOptions.filter(item => item.value == this.unitValue)[0].label}${params.properties.fojcu}住户信息`
			this.residentDetailsShow = true
			this.residentLoading = true
			console.log('residentDetailsClick-params', params)
			this.$EventBus.$emit('showHouse3D', { positions: params.properties.kmj3a, minHeight: params.properties.szhfr, maxHeight: params.properties.szhfr + params.properties.hnagn })
			},

			residentDetailsClose () {
			this.residentDetailsShow = false
			},

			buildingClick (item, aoiArr) {
			console.log('buildingClick-start', 111)
			this.unitHouseChoosed = []
			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: 240,
			sitePitch: -45
			})
			}
			this.buildingChoosed = item
			this.floorInfo.elev = item.elev
			this.floorInfo.floor_num = item.floor_num
			// 获取户籍人口重点人口数据
			this.choosedBuildId = item.build_id
			this.getVillagePersonStatisticInfoByBuildId(item.build_id)
			this.getHouses(item.build_id, '361102', aoiArr)
			console.log('buildingClick-end')
			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.unitHouseChoosed = this.allHouseFloorList[this.unitValue - 1]
			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: 'label',
			params: {
			lng: `${row.x}`,
			lat: `${row.y}`,
			alt: 1,
			text: row.name
			}
			})
			this.$EventBus.$emit('layerPointAdd', {
			layerName: 'deepDataLayer',
			type: "billboard",
			params: {
			lng: `${row.x}`,
			lat: `${row.y}`,
			alt: 1,
			url: url
			},
			})
			},

			goTOPeopleDetail (status) {
			this.keyPersonVisible = true
			this.keyPeopleType = status
			this.peoplePage.currentPage = 1
			this.keyPersonTitle = status == 1 ? '户籍人口详情' : '重点人口详情'
			this.keyPeopleLoading = true
			this.getVillagePersonInfo('', this.choosedBuildId, status == 1 ? '' : status)
			},

			// 获取历史接警记录
			getAlarmList () {
			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, sfdz: this.villageInfo.name, jjdwbh: this.userInfo.dept_id }).then(res => {
			this.callPolicePage.count = res.data.data.pages

			this.callPoliceData = []

			if (res.data.data.records.length > 0) {
			this.callPoliceData = res.data.data.records.map((item, index) => {
			return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
			})

			this.callPoliceData.forEach((item, index) => {
			if (item.lng != '' && item.lat != '') {
			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: global.DC.Color.RED.withAlpha(0.5),//边框颜色
			outlineWidth: num,//边框大小，
			color: global.DC.Color.RED
			})
			}, 100)

			point.attrParams = item
			point.on(global.DC.MouseEventType.CLICK, this.housingPoliceSiteClick)
			circleLayer.addOverlay(point)
			}
			})
			} else {
			this.callPoliceData = []
			}

			this.setTableHeight()
			})
			},

			// 警情列表点击事件
			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.getAlarmList()
			},

			peopleHandleCurrentChange (currentPage) {
			this.peoplePage.currentPage = currentPage
			this.getVillagePersonInfo('', this.choosedBuildId, this.keyPeopleType == 1 ? '' : 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
			})
			},

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

			// 房屋人口信息
			getVillagePersonInfo (resBusId, buildId, status, current, realName, phone) {
			getVillagePersonInfo(resBusId, buildId, status, current, realName, phone).then(res => {
			if (buildId) {
			this.personDetailArr = res.data.data.records
			this.peoplePage.pageSize = res.data.data.size
			this.peoplePage.total = res.data.data.total
			} else {
			this.houseDate = res.data.data.records
			}
			setTimeout(() => {
			this.keyPeopleLoading = false
			this.residentLoading = false
			}, 500)
			})
			},

			// 清空人员列表搜索内容
			clearPeopleDetailSearchValue () {
			this.keyPeopleLoading = true
			this.callPhone = ''
			this.peopleName = ''
			this.peoplePage.currentPage = 1
			this.getVillagePersonInfo('', this.choosedBuildId, this.keyPeopleType == 1 ? '' : this.keyPeopleType, this.peoplePage.currentPage)
			},

			// 搜索指定人员
			searchPeopleDetail () {
			this.keyPeopleLoading = true
			this.peoplePage.currentPage = 1
			this.getVillagePersonInfo('', this.choosedBuildId, this.keyPeopleType == 1 ? '' : 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] + ',' + '10;'
			})

			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
			})
			})
			wallLayer.addOverlay(wall)
			})
			},

			// 大搜点查询
			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(async res => {
			let chooseBuildItem = []
			this.buildingList.forEach(item => {
			if (item.build_id == res.data.result[0].cid) {
			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.$store.commit('SET_DETAILSPOPUP', {
			showBox: false,
			showBtn: 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.clear()

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

			const that = this;

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

			this.$EventBus.$on("housingIndent", (e) => {
			that.housingIndent(e);
			});

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

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

			this.$nextTick(() => {
			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);
			}
			});
			},

			updated() {},

			methods: {
			housingIndent(e) {
			this.getAoiByPtStd(e);
			},

			/**
			* @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 {*}
			*/
			async loadNode(node, resolve) {
			if (this.userInfo.dept_id != "1123598813738675201") {
			let list = [];
			let type = node.level + 1;
			await 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;
			await 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) return;
			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.getResidentialQuartersInfo(current.id, "361102");
			this.getSearchExtensivelyBgAoiDeepdata(
			"ebf48ecaa1fd436fa3d40c4600aa051f",
			"361100",
			current.id,
			"1\|3"
			);
			this.getVillageInfo(current.id);
			this.$refs.searchTreeInput.blur();
			this.searchLazyFlag = true;
			},

			navClick(e) {
			this.navType = e.target.dataset.type;

			if (this.navType == 1) {
			this.callPolicePage.currentPage = 1;
			this.getAlarmList();
			} else {
			circleLayer.clear();
			circleLayer.remove();
			circleLayer = null;
			}
			},

			// 大搜之搜索面详细数据（停车场出入口商场、小区名称类型地址、楼栋数据）
			getSearchExtensivelyBgAoiDeepdata(ak, region, ids, infos) {
			this.villageInfoLoading = true
			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.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_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

			// 停车场出入口商场
			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;
			console.log("deepData------", deepData);
			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 (
			res.data.result[0].children_infos &&
			res.data.result[0].children_infos.length
			) {
			let buildData = res.data.result[0].children_infos;
			this.buildingList = [];
			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]}`,
			floor_num: `${item.floor_num}`,
			elev: `${item.elev}`,
			});
			});
			this.buildingClick(this.buildingList[0]);
			}

			this.callPolicePage.currentPage = 1;
			this.getAlarmList();
			});
			},

			// 楼栋单元楼层户室查询
			getHouses(build_id, adcode, aoiArr) {
			getHouses(build_id, adcode).then((res) => {
			let maxHeight =
			res.data.data.properties.hwtxa.features[0].properties.mbfdr -
			res.data.data.properties.hwtxa.features[0].properties.yjpca;

			let houseData = res.data.data.properties;

			curHousingName = res.data.data.properties.ckgkt;

			this.floorChoosed = [];

			this.$EventBus.$emit("showThreeDimensions", {
			positions: houseData.kmj3a,
			minHeight: 0,
			maxHeight: maxHeight,
			});

			if (res.data != null && houseData.nwwqd.features != []) {
			let unitData = houseData.nwwqd.features;
			console.log(unitData.length, 223366);
			this.floorInfo.house_num = unitData.length;
			if (houseData.hwtxa.features.length > 1) {
			this.isShowUnitChoose = true;
			}
			let allUnitDate = [];
			this.unitOptions = [];
			houseData.hwtxa.features.forEach((item, index) => {
			this.unitOptions.push({
			value: `${index + 1}`,
			label: `${item.properties.pgjmz}`,
			});
			let unitOptionData = [];
			unitData.forEach((inItem) => {
			if (inItem.properties.pgjmz == item.properties.pgjmz) {
			unitOptionData.push(inItem);
			}
			});
			allUnitDate.push(unitOptionData);
			});
			this.allHouseFloorList = [];
			allUnitDate.forEach((item) => {
			let houseFloorList = [];
			item.forEach((inItem) => {
			if (
			houseFloorList.indexOf(Number(inItem.properties.cftlg)) === -1
			) {
			houseFloorList.push(Number(inItem.properties.cftlg));
			}
			});
			houseFloorList = houseFloorList.sort((a, b) => {
			return a - b;
			});
			let newArr = [];
			houseFloorList.forEach((floor) => {
			let houseArr = item.filter((inItem) => {
			return Number(inItem.properties.cftlg) == floor;
			});
			newArr.push({
			floor_num: floor,
			floor_house: houseArr.slice(0, 4),
			});
			});
			this.allHouseFloorList.push(newArr);
			});
			this.unitHouseChoosed = this.allHouseFloorList[0];
			if (aoiArr) {
			this.unitHouseChoosed.forEach((item, index) => {
			let aoiHeight = aoiArr[1];
			let minHeight = item.floor_house[0].properties.szhfr;
			let maxHeight =
			item.floor_house[0].properties.szhfr +
			item.floor_house[0].properties.hnagn;
			if (minHeight < aoiHeight && aoiHeight < maxHeight) {
			this.floorsType = Math.ceil((index + 1) / 5);
			if (this.floorsType > 3) {
			for (let i = 0; i < this.floorsType - 3; i++) {
			this.nextFloorBtn();
			}
			}
			item.floor_house.forEach((one) => {
			let polygon = this.$turf.polygon([
			JSON.parse(one.properties.kmj3a).coordinates[0],
			]);
			let point = this.$turf.point(aoiArr[0]);
			if (this.$turf.booleanContains(polygon, point)) {
			this.residentDetailsClick(one);
			}
			});
			}
			});
			}
			this.pictLoading = false;
			} else {
			this.isShowHouseBox = false;
			}
			});
			},

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

			// 点击户室
			residentDetailsClick(params) {
			this.floorChoosed = params.properties.fojcu;
			this.$EventBus.$emit("clearHouse3D");
			this.getVillagePersonInfo(params.properties.snxmi);
			this.residentDetailsTitle = `${curHousingName}${
			this.unitOptions.filter((item) => item.value == this.unitValue)[0].label
			}${params.properties.fojcu}住户信息`;
			this.residentDetailsShow = true;
			this.residentLoading = true;
			console.log("residentDetailsClick-params", params);
			this.$EventBus.$emit("showHouse3D", {
			positions: params.properties.kmj3a,
			minHeight: params.properties.szhfr,
			maxHeight: params.properties.szhfr + params.properties.hnagn,
			});
			},

			residentDetailsClose() {
			this.residentDetailsShow = false;
			},

			buildingClick(item, aoiArr) {
			console.log("buildingClick-start", 111);
			this.unitHouseChoosed = [];
			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: 240,
			sitePitch: -45,
			});
			}
			this.buildingChoosed = item;
			this.floorInfo.elev = item.elev;
			this.floorInfo.floor_num = item.floor_num;
			// 获取户籍人口重点人口数据
			this.choosedBuildId = item.build_id;
			this.getVillagePersonStatisticInfoByBuildId(item.build_id);
			this.getHouses(item.build_id, "361102", aoiArr);
			console.log("buildingClick-end");
			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.unitHouseChoosed = this.allHouseFloorList[this.unitValue - 1];
			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: "label",
			params: {
			lng: `${row.x}`,
			lat: `${row.y}`,
			alt: 1,
			text: row.name,
			},
			});
			this.$EventBus.$emit("layerPointAdd", {
			layerName: "deepDataLayer",
			type: "billboard",
			params: {
			lng: `${row.x}`,
			lat: `${row.y}`,
			alt: 1,
			url: url,
			},
			});
			},

			goTOPeopleDetail(status) {
			this.keyPersonVisible = true;
			this.keyPeopleType = status;
			this.peoplePage.currentPage = 1;
			this.keyPersonTitle = status == 1 ? "户籍人口详情" : "重点人口详情";
			this.keyPeopleLoading = true;
			this.getVillagePersonInfo(
			"",
			this.choosedBuildId,
			status == 1 ? "" : status
			);
			},

			// 获取历史接警记录
			getAlarmList() {
			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,
			sfdz: this.villageInfo.name,
			jjdwbh: this.userInfo.dept_id,
			}).then((res) => {
			this.callPolicePage.count = res.data.data.pages;

			this.callPoliceData = [];

			if (res.data.data.records.length > 0) {
			this.callPoliceData = res.data.data.records.map((item, index) => {
			return {
			...item,
			index: index + 1,
			lng: item.ZDDWXZB,
			lat: item.ZDDWYZB,
			};
			});

			this.callPoliceData.forEach((item, index) => {
			if (item.lng != "" && item.lat != "") {
			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: global.DC.Color.RED.withAlpha(0.5), //边框颜色
			outlineWidth: num, //边框大小，
			color: global.DC.Color.RED,
			});
			}, 100);

			point.attrParams = item;
			point.on(
			global.DC.MouseEventType.CLICK,
			this.housingPoliceSiteClick
			);
			circleLayer.addOverlay(point);
			}
			});
			} else {
			this.callPoliceData = [];
			}

			this.setTableHeight();
			});
			},

			// 警情列表点击事件
			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.getAlarmList();
			},

			peopleHandleCurrentChange(currentPage) {
			this.peoplePage.currentPage = currentPage;
			this.getVillagePersonInfo(
			"",
			this.choosedBuildId,
			this.keyPeopleType == 1 ? "" : 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;
			});
			},

			// 重点人口户籍人口
			getVillagePersonStatisticInfoByBuildId(buildId) {
			getVillagePersonStatisticInfoByBuildId(buildId).then((res) => {
			this.peopleInfo.registeredPopulation = res.data.data[0];
			this.peopleInfo.KeyPopulation = res.data.data[1];
			});
			},

			// 房屋人口信息
			getVillagePersonInfo(resBusId, buildId, status, current, realName, phone) {
			getVillagePersonInfo(
			resBusId,
			buildId,
			status,
			current,
			realName,
			phone
			).then((res) => {
			if (buildId) {
			this.personDetailArr = res.data.data.records;
			this.peoplePage.pageSize = res.data.data.size;
			this.peoplePage.total = res.data.data.total;
			} else {
			this.houseDate = res.data.data.records;
			}
			setTimeout(() => {
			this.keyPeopleLoading = false;
			this.residentLoading = false;
			}, 500);
			});
			},

			// 清空人员列表搜索内容
			clearPeopleDetailSearchValue() {
			this.keyPeopleLoading = true;
			this.callPhone = "";
			this.peopleName = "";
			this.peoplePage.currentPage = 1;
			this.getVillagePersonInfo(
			"",
			this.choosedBuildId,
			this.keyPeopleType == 1 ? "" : this.keyPeopleType,
			this.peoplePage.currentPage
			);
			},

			// 搜索指定人员
			searchPeopleDetail() {
			this.keyPeopleLoading = true;
			this.peoplePage.currentPage = 1;
			this.getVillagePersonInfo(
			"",
			this.choosedBuildId,
			this.keyPeopleType == 1 ? "" : 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] + "," + "10;";
			});

			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,
			}),
			});
			wallLayer.addOverlay(wall);
			});
			},

			// 大搜点查询
			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(async (res) => {
			let chooseBuildItem = [];
			this.buildingList.forEach((item) => {
			if (item.build_id == res.data.result[0].cid) {
			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.$store.commit("SET_DETAILSPOPUP", {
			showBox: false,
			showBtn: 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.clear();

			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;
			position: relative;
			width: 100%;
			height: 100%;

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

			&-content {
			width: 100%;
			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;
			background: $bg-color;
			border: 1px solid rgb(0, 92, 169);
			cursor: pointer;
			border-radius: 0 20px 20px 0;
			}

			li {
			list-style: none;
			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;
			}
			}
			}

			.search-box {
			padding: 5px;
			height: 48px;
			display: flex;
			.result-content {
			height: calc(100% - 48px);
			overflow-x: hidden;
			overflow-y: auto;

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

			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;
			&::after {
			content: "";
			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;
			}
			}
			top: 18px;
			left: 10px;
			right: 10px;
			bottom: 4px;
			background: linear-gradient(
			135deg,
			rgb(229 253 255 / 9%),
			rgb(43 124 255 / 90%)
			);
			z-index: -1;
			}
			}

			.result-content {
			height: calc(100% - 48px);
			overflow-x: hidden;
			overflow-y: auto;
			.housing-bg {
			margin-top: 6px;
			height: 200px;

			.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;
			img {
			width: 100%;
			height: 100%;
			}

			&::after {
			content: '';
			position: absolute;
			top: 18px;
			left: 10px;
			right: 10px;
			bottom: 4px;
			background: linear-gradient(135deg, rgb(229 253 255 / 9%), rgb(43 124 255 / 90%));
			z-index: -1;
			}
			}
			:deep(.el-empty__description) {
			p {
			color: #fff;
			}
			}

			.housing-bg {
			margin-top: 6px;
			height: 200px;
			:deep(.el-empty__image) {
			width: 120px;
			}

			img {
			width: 100%;
			height: 100%;
			}
			:deep(.el-empty) {
			padding: 0;
			}
			}

			:deep(.el-empty__description) {
			p {
			color: #fff;
			}
			}
			.housing-introduce {
			& > div {
			padding: 0 10px;
			display: flex;

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

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

			.housing-introduce {
			&>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;
			}
			}
			}
			.l {
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;
			width: 80px;
			line-height: 40px;
			}

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

			.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;
			justify-content: space-around;
			position: absolute;
			left: 0;
			transition: all 1s;

			.nav {
			flex: 1;
			height: 40px;
			line-height: 40px;
			border-bottom: 1px solid #33566c;
			cursor: pointer;
			}
			.ridgepole-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: left;
			display: flex;
			flex-wrap: wrap;
			width: 356px;

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

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

			.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 #50555f;

			&>div {
			cursor: pointer;
			}

			&>div:last-child {
			margin-left: 14px;
			font-size: 18px;
			font-weight: bold;
			color: #499d99;
			}
			}

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

			&>div:last-child {
			border: none;
			}
			}
			}

			.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: 14px;
			height: 8px;
			}

			.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: 220px;

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

			.title {
			width: 50px;
			}

			.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: 4px;
			width: 6px;
			height: 6px;
			border-radius: 50%;
			}

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

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

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

			&>.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;
			}
			}
			}
			}
			}
			}

			.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 {
			.tableClass {
			margin: 0 auto;
			width: 600px;
			height: 400px;
			border-collapse: collapse;
			}

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

			.pages {
			height: 40px;
			& > 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;

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

			.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 #50555f;

			& > div {
			cursor: pointer;
			}

			& > div:last-child {
			margin-left: 14px;
			font-size: 18px;
			font-weight: bold;
			color: #499d99;
			}
			}

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

			& > div:last-child {
			border: none;
			}
			}
			}

			.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: 14px;
			height: 8px;
			}

			.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: 220px;

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

			.title {
			width: 50px;
			}

			.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: 4px;
			width: 6px;
			height: 6px;
			border-radius: 50%;
			}

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

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

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

			& > .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;
			}
			}
			}
			}
			}
			}

			.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 {
			.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;
			}
			}
			}
			}
			}

			.progress {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 2px;
			overflow: hidden;
			border-radius: 2px;
			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;
			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);
			}
			0% {
			transform: translate(-80%, 0);
			}

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