Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
a53bda53 by 杨威
Options

户选中效果修改

1 parent 6a96103d
Inline Side-by-side
Showing 2 changed files with 132 additions and 126 deletions
......@@ -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:[],
cs:[],
zdys:[]
ljzs: [],
cs: [],
zdys: [],
},
lpbContentWidth: "",
ljzWidth:10000,
zdyWidth:1000,
cHeight:0, //独立层户的div高度
zdyHeight:0, //独立幢单元的div高度
ljzcHeight:0, //逻辑幢下层户的div高度
ljzzdyHeight:0, //逻辑幢下幢单元的div高度
loading:true,
hbsmList:[],
time:null, //区分单双击事件的定时器
searchNum:Math.random(),
ljzWidth: 10000,
zdyWidth: 1000,
cHeight: 0, //独立层户的div高度
zdyHeight: 0, //独立幢单元的div高度
ljzcHeight: 0, //逻辑幢下层户的div高度
ljzzdyHeight: 0, //逻辑幢下幢单元的div高度
loading: true,
hbsmList: [],
time: null, //区分单双击事件的定时器
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)
.then((res => {
getLpb(zrzbsm) {
getLpb(zrzbsm).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){
this.$refs.ljz.forEach(item=>{
this.ljzWidth += item.offsetWidth + 20
})
}else{
if (this.$refs.ljz != undefined) {
this.$refs.ljz.forEach((item) => {
this.ljzWidth += item.offsetWidth + 20;
});
} 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.zdyWidth += item.offsetWidth + 21;
this.cHeight = item.offsetHeight > this.cHeight ? item.offsetHeight : this.cHeight;
highest = highest > item.offsetHeight ? highest:item.offsetHeight;
})
this.$refs.zdy.forEach((item) => {
this.zdyWidth += item.offsetWidth + 21;
this.cHeight =
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;
this.zdyHeight = higher ? highest : this.$refs.ch.offsetHeight
higher = highest > this.$refs.ch.offsetHeight ? true : false;
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.ljzcHeight = item.offsetHeight > this.ljzcHeight ? item.offsetHeight : this.ljzcHeight;
highest = highest > item.offsetHeight ? highest:item.offsetHeight;
})
this.$refs.ljzzdy.forEach((item) => {
this.ljzcHeight =
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;
this.ljzzdyHeight = higher ? highest : this.$refs.ljzch.offsetHeight
}else{
higher = highest > this.$refs.ljzch.offsetHeight ? true : false;
this.ljzzdyHeight = higher ? highest : this.$refs.ljzch.offsetHeight;
} 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'; //加边框
this.hbsmList.push(bsm) // 将户bsm放进hbsmList
}else{
e.target.className = "tdSelect"; //加边框
this.hbsmList.push(bsm); // 将户bsm放进hbsmList
} else {
//选中→未选中
e.target.className = '';
this.deleteArrOption(this.hbsmList,bsm);
e.target.className = "";
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.$parent.getHbsm(this.hbsmList,true);
this.hbsmList.push(bsm); // 将户bsm放进hbsmList
this.$parent.getHbsm(this.hbsmList, true);
},
//删除多重数组中的某一项
deleteArrOption(arr, item) {
......@@ -243,18 +246,18 @@ export default {
}
},
//清除选中户
clearChoosedH(){
this.$nextTick(()=>{
clearChoosedH() {
this.$nextTick(() => {
//将每个选中的户的选中状态清除
this.$refs.hBsm.forEach(item=>{
if(item.className == 'tdSelect'){
item.className = '';
this.$refs.hBsm.forEach((item) => {
if (item.className == "tdSelect") {
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.$refs.hBsm.forEach(item=>{
if(item.className == 'tdSelect'){
console.log(item.dataset.bsm,'item.dataset.bsm');
this.$nextTick(() => {
this.$refs.hBsm.forEach((item) => {
if (item.className == "tdSelect") {
console.log(item.dataset.bsm, "item.dataset.bsm");
// 判断hbsmList中是否已经存在
if(this.hbsmList.indexOf(item.dataset.bsm) == -1){
this.hbsmList.push(item.dataset.bsm) // 将户bsm放进hbsmList
if (this.hbsmList.indexOf(item.dataset.bsm) == -1) {
this.hbsmList.push(item.dataset.bsm); // 将户bsm放进hbsmList
}
}
})
})
});
});
},
//父组件中选择单元状态改变choosedList
choosedList(n){
this.$refs.hBsm.forEach(item=>{
this.choosedList.forEach(i=>{
if(item.dataset.bsm == i){
item.className = 'tdSelect'
choosedList(n) {
this.$refs.hBsm.forEach((item) => {
this.choosedList.forEach((i) => {
if (item.dataset.bsm == i) {
item.className = "tdSelect";
}
})
})
}
});
});
},
},
};
</script>
......@@ -314,26 +317,26 @@ export default {
height: 100%;
position: relative;
overflow: scroll;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-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{
.ljz-zdy-wrap {
.ljz-zdy {
height: auto;
margin-right: 20px;
float: left;
position: relative;
.zdy-name{
width: 100%;
.zdy-name {
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{
display:flex;
.column-reverse {
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{
.zdy-zdy-wrap {
.zdy-zdy {
height: auto;
margin-right: 20px;
display: inline-table;
.zdy-name{
bottom: 0;
.zdy-name {
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{
display:flex;
.column-reverse {
display: flex;
flex-direction: column-reverse;
}
}
// 公共部分样式 start
.chTable{
.chTable {
position: relative;
tr{
.floor{
tr {
.floor {
background-color: blanchedalmond;
}
td{
td {
width: 124px;
height: 64px;
line-height: 64px;
text-align: center;
cursor: pointer;
}
.tdSelect{
border: 1px solid #0091FF!important;
.tdSelect {
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;
}
......