户选中效果修改

杨威
Showing 2 changed files with 132 additions and 126 deletions
src/assets/tdSelect.png
src/views/systemZRZ/lpb/bjlp/lpbContent/index.vue
--- a/src/assets/tdSelect.png 0 → 100644
View file @a53bda5
+++ b/src/assets/tdSelect.png 0 → 100644
View file @a53bda5
--- a/src/views/systemZRZ/lpb/bjlp/lpbContent/index.vue
View file @a53bda5
+++ b/src/views/systemZRZ/lpb/bjlp/lpbContent/index.vue
View file @a53bda5
@@ -83,9 +83,8 @@
 		</div>
 	</div>
 </template>
 <script>
-import {getLpb} from "../../../../../api/lpb"
+import { getLpb } from "../../../../../api/lpb";
 export default {
 	name: "",
 	components: {},
@@ -93,47 +92,48 @@ export default {
 	data() {
 		return {
 			lpbData: {
-				ljzs:[],
+				ljzs: [],
-				cs:[],
+				cs: [],
-				zdys:[]
+				zdys: [],
 			},
 			lpbContentWidth: "",
-			ljzWidth:10000,
+			ljzWidth: 10000,
-			zdyWidth:1000,
+			zdyWidth: 1000,
-			cHeight:0, //独立层户的div高度
+			cHeight: 0, //独立层户的div高度
-			zdyHeight:0, //独立幢单元的div高度
+			zdyHeight: 0, //独立幢单元的div高度
-			ljzcHeight:0, //逻辑幢下层户的div高度
+			ljzcHeight: 0, //逻辑幢下层户的div高度
-			ljzzdyHeight:0, //逻辑幢下幢单元的div高度
+			ljzzdyHeight: 0, //逻辑幢下幢单元的div高度
-			loading:true,
+			loading: true,
-			hbsmList:[],
+			hbsmList: [],
-			time:null, //区分单双击事件的定时器
+			time: null, //区分单双击事件的定时器
-			searchNum:Math.random(),
+			searchNum: Math.random(),
 			//接收父组件传入的根据单元状态/房屋性质/房屋用途筛选的户bsmList
-			choosedList:[]
+			choosedList: [],
 		};
 	},
-	created() {
+	created() {},
-	},
 	mounted() {
 		this.getLpb(this.$store.state.zrzbsm);
 		setTimeout(() => {
 			//tab-content宽度 - 右侧图例宽度 - lp-overview滚动条宽度 - lpbContent的pandingRight
-			this.lpbContentWidth = this.$store.state.contentWidth - 34 - 20; 
+			this.lpbContentWidth = this.$store.state.contentWidth - 34 - 20;
 			//让滚动条滚动至最下面 -6是横向滚动条的高度
-			this.$refs.lpbContent.scrollTop = this.$refs.lpbContent.scrollHeight - this.$refs.lpbContent.clientHeight - 6;
+			this.$refs.lpbContent.scrollTop =
+				this.$refs.lpbContent.scrollHeight -
+				this.$refs.lpbContent.clientHeight -
+				6;
 		}, 200);
 	},
 	methods: {
 		//获取楼盘表数据
-		getLpb(zrzbsm){
+		getLpb(zrzbsm) {
-			getLpb(zrzbsm)
+			getLpb(zrzbsm).then((res) => {
-			.then((res => {
 				if (res.code == 200) {
 					this.loading = false;
-					this.lpbData = res.result == null ? this.lpbData:res.result;
+					this.lpbData = res.result == null ? this.lpbData : res.result;
 					setTimeout(() => {
 						//渲染楼盘表
-						this.dataChange()
+						this.dataChange();
 					}, 200);
 				} else {
 					this.$message({
@@ -141,98 +141,101 @@ export default {
 						type: "warning",
 					});
 				}
-			}))
+			});
 		},
 		//按照bdcdyh或shbw筛选户
-		lpbDataMap(sh){
+		lpbDataMap(sh) {
 			//清除之前选中户
 			this.clearChoosedH();
 			this.searchNum = sh;
-			console.log('查询searchNum'+searchNum);
+			console.log("查询searchNum" + searchNum);
 		},
 		//自然幢下元素高度宽度计算
-		dataChange(){
+		dataChange() {
 			//计算逻辑幢宽度  20为marginRight值
 			this.ljzWidth -= 9980;
-			if(this.$refs.ljz!=undefined){
+			if (this.$refs.ljz != undefined) {
-				this.$refs.ljz.forEach(item=>{
+				this.$refs.ljz.forEach((item) => {
-					this.ljzWidth += item.offsetWidth + 20
+					this.ljzWidth += item.offsetWidth + 20;
-				})
+				});
-			}else{
+			} else {
 			}
 			//计算独立幢单元和独立层户宽度
 			//考虑this.$refs.zdy的length为0的情况，即自然幢下没有独立幢单元
-			if(this.$refs.zdy != undefined && this.$refs.zdy.length > 0){
+			if (this.$refs.zdy != undefined && this.$refs.zdy.length > 0) {
 				//判断自然幢下有没有比层户高的幢单元
 				let higher = true;
 				//记录最高的幢单元高度 默认为第一个幢单元高度
 				let highest = this.$refs.zdy[0].offsetHeight;
 				this.zdyWidth -= 980;
-				this.$refs.zdy.forEach(item=>{
+				this.$refs.zdy.forEach((item) => {
-					this.zdyWidth += item.offsetWidth + 21; 
+					this.zdyWidth += item.offsetWidth + 21;
-					this.cHeight = item.offsetHeight > this.cHeight ? item.offsetHeight : this.cHeight;
+					this.cHeight =
-					highest = highest > item.offsetHeight ? highest:item.offsetHeight;
+						item.offsetHeight > this.cHeight ? item.offsetHeight : this.cHeight;
-				})
+					highest = highest > item.offsetHeight ? highest : item.offsetHeight;
+				});
 				//判断有无独立层户
-				if(this.$refs.ch != undefined){
+				if (this.$refs.ch != undefined) {
 					//计算自然幢下的幢单元高度，如果有比层户高的幢单元，则幢单元高度设为最高的幢单元高度，如果没有，则设为层户高度
-					higher = highest > this.$refs.ch.offsetHeight ? true:false;
+					higher = highest > this.$refs.ch.offsetHeight ? true : false;
-					this.zdyHeight = higher ? highest : this.$refs.ch.offsetHeight
+					this.zdyHeight = higher ? highest : this.$refs.ch.offsetHeight;
 					this.zdyWidth += this.$refs.ch.offsetWidth;
-				}else{
+				} else {
 					this.zdyHeight = highest;
 				}
-			}else{
+			} else {
 				// this.zdyWidth = 124;
 			}
 			//计算逻辑幢下的幢单元和层户的高度
-			if(this.$refs.ljzzdy != undefined && this.$refs.ljzzdy.length > 0){
+			if (this.$refs.ljzzdy != undefined && this.$refs.ljzzdy.length > 0) {
 				//判断自然幢下有没有比层户高的幢单元
 				let higher = true;
 				//记录最高的幢单元高度 默认为第一个幢单元高度
 				let highest = this.$refs.ljzzdy[0].offsetHeight;
-				this.$refs.ljzzdy.forEach(item=>{
+				this.$refs.ljzzdy.forEach((item) => {
-					this.ljzcHeight = item.offsetHeight > this.ljzcHeight ? item.offsetHeight : this.ljzcHeight;
+					this.ljzcHeight =
-					highest = highest > item.offsetHeight ? highest:item.offsetHeight;
+						item.offsetHeight > this.ljzcHeight
-				})
+							? item.offsetHeight
+							: this.ljzcHeight;
+					highest = highest > item.offsetHeight ? highest : item.offsetHeight;
+				});
 				//判断有无独立层户
-				if(this.$refs.ljzch != undefined){
+				if (this.$refs.ljzch != undefined) {
 					//计算自然幢下的幢单元高度，如果有比层户高的幢单元，则幢单元高度设为最高的幢单元高度，如果没有，则设为层户高度
-					higher = highest > this.$refs.ljzch.offsetHeight ? true:false;
+					higher = highest > this.$refs.ljzch.offsetHeight ? true : false;
-					this.ljzzdyHeight  = higher ? highest : this.$refs.ljzch.offsetHeight
+					this.ljzzdyHeight = higher ? highest : this.$refs.ljzch.offsetHeight;
-				}else{
+				} else {
 					this.ljzzdyHeight = highest;
 				}
-			}else{
+			} else {
 				// this.zdyWidth = 124;
 			}
 		},
 		//户单击事件
-		handleTdClick(e,bsm){
+		handleTdClick(e, bsm) {
 			let self = this;
 			// 开启延时器，200ms的间隔区分单击和双击，解决双击时执行两次单击事件
 			clearTimeout(self.time);
 			self.time = setTimeout(() => {
 				//判断点击的户是否选中
-				if(e.target.className.indexOf('tdSelect') == -1){
+				if (e.target.className.indexOf("tdSelect") == -1) {
 					//未选中→选中
-					e.target.className = 'tdSelect'; //加边框
+					e.target.className = "tdSelect"; //加边框
-					this.hbsmList.push(bsm) // 将户bsm放进hbsmList
+					this.hbsmList.push(bsm); // 将户bsm放进hbsmList
-				}else{
+				} else {
 					//选中→未选中
-					e.target.className = '';
+					e.target.className = "";
-					this.deleteArrOption(this.hbsmList,bsm);
+					this.deleteArrOption(this.hbsmList, bsm);
 				}
-				this.$parent.getHbsm(this.hbsmList,false);
+				this.$parent.getHbsm(this.hbsmList, false);
 			}, 200);
 		},
 		//户双击事件
-		dbclick(bsm){
+		dbclick(bsm) {
 			clearTimeout(this.time);
-			this.hbsmList.push(bsm) // 将户bsm放进hbsmList
+			this.hbsmList.push(bsm); // 将户bsm放进hbsmList
-			this.$parent.getHbsm(this.hbsmList,true);
+			this.$parent.getHbsm(this.hbsmList, true);
 		},
 		//删除多重数组中的某一项
 		deleteArrOption(arr, item) {
@@ -243,18 +246,18 @@ export default {
 			}
 		},
 		//清除选中户
-		clearChoosedH(){
+		clearChoosedH() {
-			this.$nextTick(()=>{
+			this.$nextTick(() => {
 				//将每个选中的户的选中状态清除
-				this.$refs.hBsm.forEach(item=>{
+				this.$refs.hBsm.forEach((item) => {
-					if(item.className == 'tdSelect'){
+					if (item.className == "tdSelect") {
-						item.className = '';
+						item.className = "";
 					}
 				});
 				// 清空hbsmList
 				this.hbsmList = [];
-			})
+			});
-		}
+		},
 	},
 	computed: {
 		createFlagChange() {
@@ -267,39 +270,39 @@ export default {
 	watch: {
 		createFlagChange: function(val) {
 			setTimeout(() => {
-				this.lpbContentWidth = this.$refs.lpbContent.offsetWidth -6;
+				this.lpbContentWidth = this.$refs.lpbContent.offsetWidth - 6;
 			}, 501);
 		},
 		legendToggleFlagChange: function(val) {
 			setTimeout(() => {
-				this.lpbContentWidth = this.$refs.lpbContent.offsetWidth -6;
+				this.lpbContentWidth = this.$refs.lpbContent.offsetWidth - 6;
 			}, 501);
 		},
 		//监听有无通过输入框查询选择到的户,如果有，将其bsm放入hbsmList
-		searchNum(n){
+		searchNum(n) {
 			// 渲染查询到的户
-			this.$nextTick(()=>{
+			this.$nextTick(() => {
-				this.$refs.hBsm.forEach(item=>{
+				this.$refs.hBsm.forEach((item) => {
-					if(item.className == 'tdSelect'){
+					if (item.className == "tdSelect") {
-						console.log(item.dataset.bsm,'item.dataset.bsm');
+						console.log(item.dataset.bsm, "item.dataset.bsm");
 						// 判断hbsmList中是否已经存在
-						if(this.hbsmList.indexOf(item.dataset.bsm) == -1){
+						if (this.hbsmList.indexOf(item.dataset.bsm) == -1) {
-							this.hbsmList.push(item.dataset.bsm) // 将户bsm放进hbsmList
+							this.hbsmList.push(item.dataset.bsm); // 将户bsm放进hbsmList
 						}
 					}
-				})
+				});
-			})
+			});
 		},
 		//父组件中选择单元状态改变choosedList
-		choosedList(n){
+		choosedList(n) {
-			this.$refs.hBsm.forEach(item=>{
+			this.$refs.hBsm.forEach((item) => {
-				this.choosedList.forEach(i=>{
+				this.choosedList.forEach((i) => {
-					if(item.dataset.bsm == i){
+					if (item.dataset.bsm == i) {
-						item.className = 'tdSelect'
+						item.className = "tdSelect";
 					}
-				})
+				});
-			})
+			});
-		}
+		},
 	},
 };
 </script>
@@ -314,26 +317,26 @@ export default {
 		height: 100%;
 		position: relative;
 		overflow: scroll;
-		-webkit-user-select:none;
+		-webkit-user-select: none;
-		-moz-user-select:none;
+		-moz-user-select: none;
-		-ms-user-select:none;
+		-ms-user-select: none;
-		user-select:none;
+		user-select: none;
 		.ljz-wrap {
 			height: auto;
 			overflow: hidden;
 			margin-bottom: 20px;
-			.ljz{
+			.ljz {
 				float: left;
 				margin-right: 20px;
 				// position: relative;
-				.ljz-zdy-wrap{
+				.ljz-zdy-wrap {
-					.ljz-zdy{
+					.ljz-zdy {
 						height: auto;
 						margin-right: 20px;
 						float: left;
 						position: relative;
-						.zdy-name{
+						.zdy-name {
-    						width: 100%;
+							width: 100%;
 							bottom: 0;
 							position: absolute;
 							height: 40px;
@@ -344,28 +347,28 @@ export default {
 						// 	bottom: 40px;
 						// }
 					}
-					.ljz-ch{
+					.ljz-ch {
 						float: left;
 					}
-					.ljz-zdy:last-child{
+					.ljz-zdy:last-child {
 						margin-right: 0;
 					}
-					.column-reverse{
+					.column-reverse {
-						display:flex;
+						display: flex;
 						flex-direction: column-reverse;
 					}
 				}
-				.ljz-name{
+				.ljz-name {
 					width: 100%;
 					height: 40px;
 					background-color: darkorange;
 				}
 			}
-			div:last-child{
+			div:last-child {
 				margin-right: 0;
 			}
 		}
-		.bottom40{
+		.bottom40 {
 			position: absolute;
 			bottom: 40px;
 		}
@@ -373,56 +376,59 @@ export default {
 			height: auto;
 			overflow: hidden;
 			margin-bottom: 60px;
-			.zdy{
+			.zdy {
 				float: left;
 				margin-right: 20px;
-				.zdy-zdy-wrap{
+				.zdy-zdy-wrap {
-					.zdy-zdy{
+					.zdy-zdy {
 						height: auto;
 						margin-right: 20px;
 						display: inline-table;
-						.zdy-name{
+						.zdy-name {
-    						bottom: 0;
+							bottom: 0;
 							background-color: blanchedalmond;
 						}
 					}
-					.zdy-zdy:last-child{
+					.zdy-zdy:last-child {
 						margin-right: 0;
 					}
 				}
-				.zdy-name{
+				.zdy-name {
 					width: 100%;
 					height: 40px;
 					background-color: rosybrown;
 				}
 			}
-			.column-reverse{
+			.column-reverse {
-				display:flex;
+				display: flex;
 				flex-direction: column-reverse;
 			}
 		}
 		// 公共部分样式 start
-		.chTable{
+		.chTable {
 			position: relative;
-			tr{
+			tr {
-				.floor{
+				.floor {
 					background-color: blanchedalmond;
 				}
-				td{
+				td {
 					width: 124px;
 					height: 64px;
 					line-height: 64px;
 					text-align: center;
 					cursor: pointer;
 				}
-				.tdSelect{
+				.tdSelect {
-					border: 1px solid #0091FF!important;
+					border: 1px solid #006cff !important;
+					background-image: url("../../../../../assets/tdSelect.png");
+					background-repeat: no-repeat;
+					background-position: right top;
 				}
 			}
 		}
-		.name{
+		.name {
 			line-height: 40px;
 			text-align: center;
 		}