~admin/srs-police-affairs.git

			@@ -66,21 +66,42 @@

			<div class="base-info" v-show="navType == 0">
			<div class="sub-nav-list">
			<div class="sub-nav">楼栋</div>
			<div class="sub-nav">出入口</div>
			<div class="sub-nav">停车场</div>
			<div class="sub-nav">商业</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">
			<div class="ridgepole-list">
			<div
			v-for="(item, index) in villageHousesList"
			:key="index"
			@click="buildingClick(item)"
			:class="{on: ridgepoleNum.name == item.name}"
			>{{item.name}}</div>
			<div class="build-info">
			<div class="nextBtn" @click="lastBtn" v-show="lastBtnShow==true">
			<i class="el-icon-caret-left"></i>
			</div>
			<div class="build-outBox">
			<div
			class="build-box"
			style="left: 0px;"
			:style="{width:Math.ceil(villageHousesList.length/10)*356+'px'}"
			>
			<div
			class="ridgepole-list"
			v-for="index of Math.ceil(villageHousesList.length/10)"
			:key="index"
			>
			<div
			v-for="(item, index) in villageHousesList.slice((index-1)10,index10)"
			:key="index"
			@click="buildingClick(item)"
			:class="{on: ridgepoleNum.name == item.name}"
			>{{item.name}}</div>
			</div>
			</div>
			</div>
			<div class="nextBtn rightBtn" @click="nextBtn">
			<i v-show="nextBtnShow" class="el-icon-caret-right"></i>
			</div>
			</div>

			<div class="ridgepole-info">
			<div class="title">楼栋信息</div>

			@@ -109,7 +130,7 @@
			<div>实有人口</div>
			</div>
			<div>
			<div>{{ ridgepoleNum.emphasisPerson }}</div>
			<div style="color:#FF796C">{{ ridgepoleNum.emphasisPerson }}</div>
			<div>重点人口</div>
			</div>
			</div>
			@@ -120,11 +141,11 @@
			<div>户籍人口</div>
			</div>
			<div>
			<div>{{ ridgepoleNum.flowPerson }}</div>
			<div style="color:#0E88FF">{{ ridgepoleNum.flowPerson }}</div>
			<div>流动人口</div>
			</div>
			<div>
			<div>{{ ridgepoleNum.outsidePerson }}</div>
			<div style="color:#FEAC04">{{ ridgepoleNum.outsidePerson }}</div>
			<div>境外人口</div>
			</div>
			</div>
			@@ -156,8 +177,8 @@
			<!-- 选择单元 -->
			<div class="condo">
			<div class="type">选择单元</div>
			<div class="type-val">
			<el-select size="mini" v-model="apartmentValue" placeholder="请选择">
			<div class="type-select">
			<el-select size="small" v-model="apartmentValue" placeholder="请选择">
			<el-option
			v-for="item in apartmentOptions"
			:key="item.value"
			@@ -183,7 +204,7 @@
			<div>
			<span
			style="width: 10px; height: 10px; background: #FEAC04; border-radius: 50%;"
			></span> 禁毒
			></span> 境外人口
			</div>
			</div>
			</div>
			@@ -212,12 +233,39 @@
			</div>
			</div>
			</div>

			<div class="floor-num">
			<div>1~5层</div>
			<div>6~10层</div>
			<div>11~15层</div>
			<div>16~20层</div>
			<div class="floor-outBox">
			<div @click="lastFloorBtn" class="floorBtn" v-show="lastFloorShow">
			<i class="el-icon-caret-left"></i>
			</div>
			<div class="floor-box">
			<div class="floor-num">
			<div :class="{on:floorsType == 1}" @click="floorsType = 1">1~5层</div>
			<div :class="{on:floorsType == 2}" @click="floorsType = 2">6~10层</div>
			<div
			:class="{on:floorsType == 3}"
			@click="floorsType = 3"
			>11~15层</div>
			<div
			:class="{on:floorsType == 4}"
			@click="floorsType = 4"
			>16~20层</div>
			<div
			:class="{on:floorsType == 5}"
			@click="floorsType = 5"
			>21~25层</div>
			<div
			:class="{on:floorsType == 6}"
			@click="floorsType = 6"
			>26~30层</div>
			</div>
			</div>
			<div
			@click="nextFloorBtn"
			class="floorBtn rightFloorBtn"
			v-show="nextFloorShow"
			>
			<i class="el-icon-caret-right"></i>
			</div>
			</div>

			<div class="floor-detail">
			@@ -230,6 +278,66 @@
			@click="residentDetailsClick(item)"
			>
			10{{item}}
			<div class="flow"></div>
			<div class="focus"></div>
			<div class="warning"></div>
			</div>
			</div>
			</div>
			<div>
			<div class="title">2层：</div>
			<div class="detail">
			<div
			v-for="item,i in 4"
			:key="i"
			@click="residentDetailsClick(item)"
			>
			20{{item}}
			<div class="flow"></div>
			<div class="focus"></div>
			<div class="warning"></div>
			</div>
			</div>
			</div>
			<div>
			<div class="title">3层：</div>
			<div class="detail">
			<div
			v-for="item,i in 4"
			:key="i"
			@click="residentDetailsClick(item)"
			>
			30{{item}}
			<div class="flow"></div>
			<div class="focus"></div>
			<div class="warning"></div>
			</div>
			</div>
			</div>
			<div>
			<div class="title">4层：</div>
			<div class="detail">
			<div
			v-for="item,i in 4"
			:key="i"
			@click="residentDetailsClick(item)"
			>
			40{{item}}
			<div class="flow"></div>
			<div class="focus"></div>
			<div class="warning"></div>
			</div>
			</div>
			</div>
			<div>
			<div class="title">5层：</div>
			<div class="detail">
			<div
			v-for="item,i in 4"
			:key="i"
			@click="residentDetailsClick(item)"
			>
			50{{item}}
			<div class="flow"></div>
			<div class="focus"></div>
			<div class="warning"></div>
			@@ -648,6 +756,222 @@
			rent: 80,
			occupation: 148,
			vacancy: 32
			},
			{
			name: '11栋',
			lng: 116.027542,
			lat: 28.686920,
			alt: 360,
			elevator: true,
			floorAll: 48,
			familyRoom: 260,
			realityPerson: 156,
			emphasisPerson: 11,
			kosekiPerson: 126,
			flowPerson: 26,
			outsidePerson: 16,
			houseAll: 260,
			rent: 80,
			occupation: 148,
			vacancy: 32
			},
			{
			name: '12栋',
			lng: 116.027542,
			lat: 28.686920,
			alt: 360,
			elevator: true,
			floorAll: 48,
			familyRoom: 260,
			realityPerson: 156,
			emphasisPerson: 11,
			kosekiPerson: 126,
			flowPerson: 26,
			outsidePerson: 16,
			houseAll: 260,
			rent: 80,
			occupation: 148,
			vacancy: 32
			},
			{
			name: '13栋',
			lng: 116.027542,
			lat: 28.686920,
			alt: 360,
			elevator: true,
			floorAll: 48,
			familyRoom: 260,
			realityPerson: 156,
			emphasisPerson: 11,
			kosekiPerson: 126,
			flowPerson: 26,
			outsidePerson: 16,
			houseAll: 260,
			rent: 80,
			occupation: 148,
			vacancy: 32
			},
			{
			name: '14栋',
			lng: 116.027542,
			lat: 28.686920,
			alt: 360,
			elevator: true,
			floorAll: 48,
			familyRoom: 260,
			realityPerson: 156,
			emphasisPerson: 11,
			kosekiPerson: 126,
			flowPerson: 26,
			outsidePerson: 16,
			houseAll: 260,
			rent: 80,
			occupation: 148,
			vacancy: 32
			},
			{
			name: '15栋',
			lng: 116.027542,
			lat: 28.686920,
			alt: 360,
			elevator: true,
			floorAll: 48,
			familyRoom: 260,
			realityPerson: 156,
			emphasisPerson: 11,
			kosekiPerson: 126,
			flowPerson: 26,
			outsidePerson: 16,
			houseAll: 260,
			rent: 80,
			occupation: 148,
			vacancy: 32
			},
			{
			name: '16栋',
			lng: 116.027542,
			lat: 28.686920,
			alt: 360,
			elevator: true,
			floorAll: 48,
			familyRoom: 260,
			realityPerson: 156,
			emphasisPerson: 11,
			kosekiPerson: 126,
			flowPerson: 26,
			outsidePerson: 16,
			houseAll: 260,
			rent: 80,
			occupation: 148,
			vacancy: 32
			},
			{
			name: '17栋',
			lng: 116.027542,
			lat: 28.686920,
			alt: 360,
			elevator: true,
			floorAll: 48,
			familyRoom: 260,
			realityPerson: 156,
			emphasisPerson: 11,
			kosekiPerson: 126,
			flowPerson: 26,
			outsidePerson: 16,
			houseAll: 260,
			rent: 80,
			occupation: 148,
			vacancy: 32
			},
			{
			name: '18栋',
			lng: 116.027542,
			lat: 28.686920,
			alt: 360,
			elevator: true,
			floorAll: 48,
			familyRoom: 260,
			realityPerson: 156,
			emphasisPerson: 11,
			kosekiPerson: 126,
			flowPerson: 26,
			outsidePerson: 16,
			houseAll: 260,
			rent: 80,
			occupation: 148,
			vacancy: 32
			},
			{
			name: '19栋',
			lng: 116.027542,
			lat: 28.686920,
			alt: 360,
			elevator: true,
			floorAll: 48,
			familyRoom: 260,
			realityPerson: 156,
			emphasisPerson: 11,
			kosekiPerson: 126,
			flowPerson: 26,
			outsidePerson: 16,
			houseAll: 260,
			rent: 80,
			occupation: 148,
			vacancy: 32
			},
			{
			name: '20栋',
			lng: 116.027542,
			lat: 28.686920,
			alt: 360,
			elevator: true,
			floorAll: 48,
			familyRoom: 260,
			realityPerson: 156,
			emphasisPerson: 11,
			kosekiPerson: 126,
			flowPerson: 26,
			outsidePerson: 16,
			houseAll: 260,
			rent: 80,
			occupation: 148,
			vacancy: 32
			},
			{
			name: '21栋',
			lng: 116.027542,
			lat: 28.686920,
			alt: 360,
			elevator: true,
			floorAll: 48,
			familyRoom: 260,
			realityPerson: 156,
			emphasisPerson: 11,
			kosekiPerson: 126,
			flowPerson: 26,
			outsidePerson: 16,
			houseAll: 260,
			rent: 80,
			occupation: 148,
			vacancy: 32
			},
			{
			name: '22栋',
			lng: 116.027542,
			lat: 28.686920,
			alt: 360,
			elevator: true,
			floorAll: 48,
			familyRoom: 260,
			realityPerson: 156,
			emphasisPerson: 11,
			kosekiPerson: 126,
			flowPerson: 26,
			outsidePerson: 16,
			houseAll: 260,
			rent: 80,
			occupation: 148,
			vacancy: 32
			}
			],
			JWdetails: {},
			@@ -669,7 +993,15 @@
			}],
			apartmentValue: '1',
			residentDetailsTitle: '',
			residentDetailsShow: false
			residentDetailsShow: false,
			lastBtnShow: false,
			nextBtnShow: true,
			floorsType: 1,
			subNavType: 1,
			lastFloorShow: false,
			nextFloorShow: true,


			}
			},
			created () {
			@@ -735,7 +1067,31 @@
			this.ridgepoleNum.siteGd = item.alt

			this.$EventBus.$emit('toPosition', this.ridgepoleNum)
			}
			},
			nextBtn () {
			if (parseInt(document.querySelector(".build-box").offsetWidth) > Math.abs(parseInt(document.querySelector(".build-box").style.left)) + 356) {
			document.querySelector(".build-box").style.left = parseInt(document.querySelector(".build-box").style.left) - 356 + 'px'
			this.lastBtnShow = true
			if (parseInt(document.querySelector(".build-box").offsetWidth) == Math.abs(parseInt(document.querySelector(".build-box").style.left)) + 356) {
			this.nextBtnShow = false
			}
			}
			},
			lastBtn () {
			document.querySelector(".build-box").style.left = parseInt(document.querySelector(".build-box").style.left) + 356 + 'px'
			this.nextBtnShow = true
			if (Math.abs(parseInt(document.querySelector(".build-box").style.left)) == 0) {
			this.lastBtnShow = false
			}
			},
			lastFloorBtn () {
			console.log(111)
			},
			nextFloorBtn () {
			console.log('点击了有按钮')
			console.log(document.querySelector(".floor-box").style.left)//NaN
			// document.querySelector(".floor-box").style.left = '-50px'
			},
			},

			destroyed () {
			@@ -757,7 +1113,6 @@
			li {
			list-style: none;
			}

			.search-box {
			padding: 5px;
			height: 48px;
			@@ -856,28 +1211,76 @@
			border-radius: 13px;
			background: #0158a2;
			cursor: pointer;
			color: rgb(223, 219, 219);
			}
			.on {
			box-sizing: border-box;
			border: 1px solid #fff;
			background-color: #0158a2;
			text-decoration: underline;
			color: #fff;
			}
			}

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

			& > div {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 6px 8px;
			width: 54px;
			height: 36px;
			border: 1px solid #ccc;
			cursor: pointer;
			.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: center;
			display: flex;
			flex-wrap: wrap;
			width: 356px;

			&.on {
			color: orange;
			border-color: orange;
			& > div {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 6px 8px;
			width: 54px;
			height: 36px;
			border: 1px solid #ccc;
			cursor: pointer;

			&.on {
			color: orange;
			border-color: orange;
			}
			}
			}
			}
			}
			}
			@@ -986,6 +1389,12 @@
			.type {
			width: 80px;
			}
			.type-select {
			margin-left: 20px;
			:deep(.el-input--suffix .el-input__inner) {
			padding-right: 54px;
			}
			}

			.type-val {
			display: flex;
			@@ -1002,20 +1411,58 @@
			}
			}
			}

			.floor-num {
			.floor-outBox {
			display: flex;
			align-items: center;

			& > div {
			margin: 0 4px;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 84px;
			position: relative;
			height: 26px;
			margin-top: 9px;
			.floorBtn {
			position: absolute;
			left: 30px;
			top: -2px;
			width: 20px;
			height: 26px;
			border-radius: 13px;
			background: #202434;
			i {
			font-size: 30px;
			margin-left: -5px;
			}
			}
			.floorBtn :hover {
			color: #0158a2;
			}
			.rightFloorBtn {
			left: 350px;
			}
			.floor-box {
			width: 276px;
			height: 26px;
			position: absolute;
			overflow: hidden;
			left: 67px;
			.floor-num {
			display: flex;
			align-items: center;
			position: absolute;
			width: 700px;
			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;
			}
			& > .on {
			border: 1px solid orange;
			color: orange;
			}
			}
			}
			}