Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
6f1307a3 by yangwei
Options

楼盘表代码优化，功能完善

1 parent 929f6d7c
Inline Side-by-side
Showing 7 changed files with 656 additions and 1042 deletions
import request from '@/utils/request'
import SERVER from './config'
const url = SERVER.LPBSERVERAPI + '/rest/zhcx/lpcx/'
/*
楼盘查询
*/
......@@ -17,7 +17,23 @@ export function getLpZrz (data) {
// 获取楼盘表
export function getLpb (zrzbsm) {
return request({
url: 'service-lpb/rest/zhcx/lpcx/getLpb?zrzbsm=' + zrzbsm,
url: url + 'getLpb?scyclx=1&zrzbsm=' + zrzbsm,
// url: 'service-lpb/rest/zhcx/lpcx/getLpb?zrzbsm=' + zrzbsm ,
method: 'get'
})
}
// 获取楼盘表房屋用途,房屋性质右侧房屋用途统计数据
export function getLpbFwytAndQlxz (zrzbsm) {
return request({
url: url + 'getLpbFwytAndQlxz?scyclx=1&zrzbsm=' + zrzbsm,
method: 'get'
})
}
// 获取楼盘表缺失项统计
export function getLpbQsxtj (zrzbsm) {
return request({
url: url + 'getLpbQsxtj?scyclx=1&zrzbsm=' + zrzbsm,
method: 'get'
})
}
......
......@@ -370,3 +370,18 @@ aside {
.item-cwnr img {
height: 30px;
}
//楼盘表的幢/幢单元名称
.lpb-xmmc {
height: 60px;
line-height: 60px;
background-color: #ffffff;
border: 1px solid #e6e6e6;
text-align: center;
transition: 0.5s;
margin-left: -1px;
border-top: 0;
.el-checkbox__label {
font-size: 16px;
}
}
......
<template>
<div class="edit">
<el-tabs type="card" v-model="activeName" v-if="!isJump">
<el-tabs type="card" v-model="activeName" >
<el-tab-pane label="楼盘页面" name="first"></el-tab-pane>
<el-tab-pane label="单元列表页面" name="second"></el-tab-pane>
</el-tabs>
<!-- <div class="tab-header">
<el-row class="searchContent">
<el-col :span="24" style="margin:0 0 10px 18px;">
<el-radio-group v-model="scyclx" @change="scyclxChange">
<el-radio-button label="0">预测</el-radio-button>
<el-radio-button label="1">实测</el-radio-button>
</el-radio-group>
<el-input maxlength="28" v-model="" :style="{ width: inputWidth + 'px' }" class="searchInput"
placeholder="输入不动产单元号或室号"><i slot="suffix" class="el-input__icon el-icon-search" @click="inputChange"></i>
</el-input>
</el-col>
</el-row>
</div> -->
<div class="tab-content" v-if="activeName=='first'" ref="tabContent" :style="{ height: lpbContentHight + 'px' }" v-show="bjztFlag">
<!-- 楼盘表主体 -->
<div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }">
......@@ -53,7 +40,7 @@
<tr v-for="(item, index) in dyztList" :key="index" class="cp"
@click="handleChoosedH(item.bsms, item.color)">
<td>
<i class="fa fa-circle" :style="{ color: item.color }"></i>{{ item.name }}
<i class="circle" :style="{ 'background-color': item.color }"></i>{{ item.name }}
</td>
<td>{{ item.ts }}</td>
<td>{{ item.mj }}</td>
......@@ -68,7 +55,7 @@
<tr v-for="(item, index) in fwxzList" :key="index" class="cp"
@click="handleChoosedH(item.bsms, item.color)">
<td>
<i class="fa fa-circle" :style="{ color: item.color }"></i>{{ item.name }}
<i class="circle" :style="{ 'background-color': item.color }"></i>{{ item.name }}
</td>
<td>{{ item.ts }}</td>
<td>{{ item.mj }}</td>
......@@ -87,7 +74,7 @@
<tr v-for="(item, index) in fwytList" :key="index" class="cp"
@click="handleChoosedH(item.bsms, item.color)">
<td>
<i class="fa fa-circle" :style="{ color: item.color }"></i>{{ item.name }}
<i class="circle" :style="{ 'background-color': item.color }"></i>{{ item.name }}
</td>
<td>{{ item.ts }}</td>
<td>{{ item.mj }}</td>
......@@ -105,7 +92,7 @@
</tr>
<tr v-for="(item, index) in qsxList" :key="index" class="cp" @click="handleChoosedH(item.bsms, item.color)">
<td>
<i class="fa fa-circle" :style="{ color: item.color }"></i>{{ item.name }}
<i class="circle" :style="{ 'background-color': item.color }"></i>{{ item.name }}
</td>
<td>{{ item.ts }}</td>
<td>0</td>
......@@ -125,6 +112,7 @@
<script>
import lpbContent from "./lpbContent/index";
import selectAllHInfo from "../ywbl/ywsq/components/selectAllHInfo"
import { getLpbFwytAndQlxz,getLpbQsxtj } from '@/api/lpb'
export default {
name: "lpb",
props: {
......@@ -222,7 +210,7 @@ export default {
//获取各项单元状态的户bsm
// this.getDyztBsmList();
//获取房屋用途统计数据
// this.getLpbFwytAndQlxz();
this.getLpbFwytAndQlxz();
// 楼盘表绘制区域宽度计算：楼盘表区域宽度-图例宽度34-滚动条宽度6
setTimeout(() => {
this.lpbContentwidth = ((document.documentElement.clientWidth || document.body.clientWidth) - 340) - 34 - 6;
......@@ -240,40 +228,14 @@ export default {
})
}
},*/
loading () {
this.getLpbMenuTree(this.$store.state.zrzbsm);
},
lodding () {
this.getlpbData();
},
//获取高度计算lpb内容区高度
getHeight () {
this.lpbContentHight = window.innerHeight - 190;
},
//图例的展开收起
legendToggle () {
this.legendToggleFlag = !this.legendToggleFlag;
},
//获取选中户bsm
getHbsm (data, type) {
if (type) {
// 双击
} else {
//单击 TO DO
this.bsms = data;
}
},
//调用楼盘表信息查询和图例统计接口
getlpbData () {
this.$refs.lpbContent.loadingData(this.$store.state.zrzbsm, this.scyclx);
this.getDyztBsmList();
this.getLpbFwytAndQlxz();
//改变楼盘表子组件的key值，重新渲染
// this.time = new Date().getTime();
},
//切换房屋状态
handleChoosedH (bsms, color) {
//每次切换房屋状态，将之前高亮的户边框颜色重置为默认
......@@ -291,13 +253,11 @@ export default {
this.$refs.lpbContent.borderColor = color;
})
},
//获取各项单元状态统计数据
getDyztBsmList () {
let data = {
zrzbsm: this.$store.state.zrzbsm,
scyclx: this.scyclx,
zrzbsm: 'ca71bcc498794a1e0ec3ac93869719f6',
scyclx: 1,
};
getLpbTj(data).then((res) => {
if (res.code === 200) {
......@@ -352,11 +312,7 @@ export default {
},
// 获取房屋用途和房屋性质及缺失项统计数据
getLpbFwytAndQlxz () {
let data = {
zrzbsm: this.$store.state.zrzbsm,
scyclx: this.scyclx,
};
getLpbFwytAndQlxz(data).then((res) => {
getLpbFwytAndQlxz('ca71bcc498794a1e0ec3ac93869719f6').then((res) => {
if (res.code === 200) {
// this.fwytList = res.result
this.fwytList = res.result.fwyt;
......@@ -375,32 +331,31 @@ export default {
}
}
});
getLpbQsxtj(data).then((res) => {
if (res.code === 200) {
this.qsxList = [
{
name: '坐落',
bsms: res.result.zl.bsms,
color: '#2591FD',
ts: res.result.zl.bsms.length
},
{
name: '分层分户图',
bsms: res.result.fcfht.bsms,
color: '#2591FD',
ts: res.result.fcfht.bsms.length
},
{
name: '室号',
bsms: res.result.shbw.bsms,
color: '#2591FD',
ts: res.result.shbw.bsms.length
}
]
}
});
// getLpbQsxtj('ca71bcc498794a1e0ec3ac93869719f6').then((res) => {
// if (res.code === 200) {
// this.qsxList = [
// {
// name: '坐落',
// bsms: res.result.zl.bsms,
// color: '#2591FD',
// ts: res.result.zl.bsms.length
// },
// {
// name: '分层分户图',
// bsms: res.result.fcfht.bsms,
// color: '#2591FD',
// ts: res.result.fcfht.bsms.length
// },
// {
// name: '室号',
// bsms: res.result.shbw.bsms,
// color: '#2591FD',
// ts: res.result.shbw.bsms.length
// }
// ]
// }
// });
}
},
computed: {},
destroyed () {
......@@ -425,60 +380,13 @@ export default {
.edit {
height: 100%;
background-color: #F4F9FF;
.tab-header {
border: 1px solid #dedede;
box-sizing: border-box;
padding: 20px 0;
background-color: #ffffff;
margin-bottom: 10px;
position: relative;
.searchContent {
margin-left: 62px;
box-sizing: border-box;
padding: 0 20px;
.searchInput {
transition: 0.5s;
margin-left: 20px;
display: inline-block;
}
}
.change {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 80px;
border-right: 1px solid #dedede;
i {
cursor: pointer;
color: #0090FF;
font-size: 36px;
display: inherit;
text-align: center;
line-height: 128px;
}
}
.radioBtn {
margin-left: 10px;
padding: 12px 10px;
border: 0;
i {
font-size: 13px;
padding-right: 4px;
}
/deep/.el-radio-button__inner {
border: 1px solid #dcdfe6;
border-radius: 4px;
box-shadow: 0 0 0 0 #409eff !important;
}
}
}
.tab-content {
border: 1px solid #dedede;
background-color: #ffffff;
display: flex;
&::-webkit-scrollbar {
width: 1px;
}
.lp-tree {
height: 100%;
overflow: hidden;
......@@ -489,15 +397,12 @@ export default {
float: left;
}
}
.w0 {
width: 0;
}
.w260 {
width: 260px;
}
.lp-overview {
transition: 0.5s;
flex: 1;
......@@ -507,17 +412,14 @@ export default {
margin-right: 10px;
box-sizing: border-box;
}
.lp-legend {
transition: 0.5s;
height: 100%;
font-size: 14px;
.handleCol {
width: 34px;
float: right;
height: 100%;
.btn {
cursor: pointer;
height: 40px;
......@@ -527,14 +429,12 @@ export default {
color: #fff;
border-bottom: 1px solid #e6e6e6;
}
.dyzt,
.fwxz,
.fwyt,
.qsx {
height: 122px;
}
.dyzt,
.fwxz,
.fwyt,
......@@ -566,7 +466,9 @@ export default {
.legendTable {
margin-top: -1px;
border-color: #e4ebf4 !important;
border-collapse: collapse;
border-spacing: 0;
tr {
height: 40px;
line-height: 40px;
......@@ -585,6 +487,15 @@ export default {
height: 40px;
text-align: center;
white-space: nowrap;
.circle{
display: inline-block;
width: 12px;
height: 12px;
border-radius: 6px;
margin-right: 2px;
position: relative;
top: 1px;
}
}
td:first-child {
......@@ -596,46 +507,5 @@ export default {
}
}
}
.tab-content::-webkit-scrollbar {
width: 1px;
}
.btnGroup {
margin: 20px auto 0;
width: 260px;
}
.hbjDialog {
/deep/ .el-dialog {
margin-top: 10vh !important;
}
}
.fa {
padding-right: 4px;
}
.wrap {
width: 100%;
height: 30px;
position: relative;
.main-button {
display: -webkit-flex;
display: flex;
flex-direction: column-reverse;
flex-wrap: nowrap;
position: absolute;
left: 165px;
top: 18px;
}
.download {
position: absolute;
left: 312px;
top: 19px;
}
}
}
</style>
......
<!--
* @Author: yangwei
* @Date: 2023-02-28 15:47:12
* @LastEditors: yangwei
* @LastEditTime: 2023-03-02 16:35:36
* @FilePath: \bdcdj-web\src\views\lpb\lpbContent\ch.vue
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<template>
<div class="ch-wrap">
<table
class="chTable"
ref="ch"
border="1"
cellspacing="0"
cellpadding="0"
v-show="ch.length"
>
<tr v-for="(cs, csIndex) in ch" :key="csIndex">
<!-- 显示层数 -->
<td
class="floor"
ref="cBsm"
@contextmenu.prevent="openMenu($event, cs, 'c')"
@click="handleClickC($event, cs)"
>
{{ cs.sjc }}层
</td>
<!-- 显示户 -->
<td
v-for="(hs, hsIndex) in cs.hs"
:rowspan="hs.sjcs"
:colspan="hs.sjhs"
:data-bsm="hs.bsm"
:data-qszt="hs.qszt"
ref="hBsm"
:key="hsIndex"
style="border-color: rgb(230, 230, 230)"
:class="hs.select ? 'tdSelect' : ''"
@click="handleClickH($event.target, hs.bsm, hs)"
@dblclick="dbclick(hs.bsm)"
@contextmenu.prevent="openMenu($event, hs, 'h')"
>
{{ hs.shbw }}
<span @click.stop="" class="hqszt lin" v-show="hs.qszt == '0'"
>临</span
>
<span @click.stop="" class="hqszt zheng" v-show="hs.qszt == '1'"
>正</span
>
<span @click.stop="" class="hqszt xian" v-show="hs.qszt == '2'"
>现</span
>
<ul @click.stop="hDyztClick($event, hs.bsm, hs)" class="dyzt">
<li style="background-color: #6edee1" v-show="hs.qqzt == '1'">
确
</li>
<li style="background-color: #8adc88" v-show="hs.bazt == '1'">
备
</li>
<li style="background-color: #ff8282" v-show="hs.dyzt == '1'">
抵
</li>
<li style="background-color: #d7cecf" v-show="hs.cfzt == '1'">
查
</li>
<li style="background-color: #d4a3eb" v-show="hs.yyzt == '1'">
异
</li>
<li style="background-color: #a5a3fb" v-show="hs.xzzt == '1'">
限
</li>
</ul>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: "BdcdjWebCh",
inject: ["openMenu", "selectAll"],
props: {
ch: {
type: Array,
default: function () {
return [];
},
},
},
data() {
return {
//选中户bsm合集
hbsmList: [],
//选中层bsm合集
cbsmList: [],
//选中户qszt集合
hqsztList: [],
//区分单双击事件的定时器
time: null,
};
},
mounted() {},
methods: {
// 层选中事件
handleClickC(e, item) {
//判断点击的层是否选中
if (e.target.className.indexOf("tdSelect") == -1) {
//未选中→选中
e.target.className += " tdSelect"; //加边框
this.cbsmList.push(item.bsm);
} else {
//选中→未选中
e.target.className = "floor";
this.cbsmList = this.cbsmList.filter((i) => i != item.bsm);
}
// this.$parent.getCbsm(this.cbsmList);
},
//户单击事件
handleClickH(e, bsm, hs) {
let self = this;
// 开启延时器，200ms的间隔区分单击和双击，解决双击时执行两次单击事件
clearTimeout(self.time);
self.time = setTimeout(() => {
// this.closeMenu();
//判断点击的户是否选中
if (!hs.select) {
//未选中→选中
hs.select = true; //加边框
this.hbsmList.push(bsm); // 将户bsm放进hbsmList
this.hqsztList.push(hs.qszt); // 将户qszt放进hqsztList
} else {
//选中→未选中
hs.select = false;
this.hbsmList = this.hbsmList.filter((i) => i != bsm);
this.hqsztList = this.hqsztList.filter((i) => i != hs.qszt);
}
}, 200);
},
// 户单元状态点击事件
hDyztClick(e, bsm, hs) {
this.handleClickH(e.target.parentNode, bsm, hs);
},
//户双击事件
dbclick(bsm) {
clearTimeout(this.time);
},
//幢单元全选/反选
zdySelectAll(val) {
this.ch.forEach((c) => {
c.hs.forEach((h) => {
if (val) {
h.select = true;
// 使用hbsmList时，需要去重
this.hbsmList.push(h.bsm)
} else {
h.select = false;
this.hbsmList = []
}
});
});
},
},
watch: {
selectAll: {
handler(val) {
this.zdySelectAll(val.selectAll);
},
immediate: true,
deep: true,
},
},
};
</script>
<style lang="scss" scoped>
.ch-wrap {
display: flex;
flex-direction: column-reverse;
.chTable {
margin-left: -1px;
border-color: #e4ebf4 !important;
border-collapse: collapse;
border-spacing: 0;
// position: relative;
tr {
td {
min-width: 138px;
height: 72px;
line-height: 72px;
text-align: center;
cursor: pointer;
position: relative;
.hqszt {
display: inline-block;
width: 16px;
height: 16px;
font-size: 12px;
line-height: 16px;
position: absolute;
left: 6px;
top: 6px;
border: 1px solid;
border-radius: 8px;
}
.lin {
color: #f7b500;
border-color: #f7b500;
}
.zheng {
color: #1ad6e1;
border-color: #1ad6e1;
}
.xian {
color: #45aefd;
border-color: #45aefd;
}
.dyzt {
user-select: none;
width: 138px;
height: 18px;
position: absolute;
bottom: 32px;
box-sizing: border-box;
padding: 0 6px;
li {
display: inline-block;
width: 18px;
height: 18px;
font-size: 12px;
line-height: 18px;
color: #ffffff;
border: 1px solid;
border-radius: 9px;
}
}
}
.tdSelect {
border: 1px solid #006cff !important;
background-image: url("./images/tdSelect.png");
background-repeat: no-repeat;
background-position: right top;
background-size: 30px;
}
.hasBorder {
border-width: 1px;
border-style: solid;
}
}
}
}
</style>
<template>
<div class="lpbContent-wrap" ref="lpbContentWrap">
<div class="lpbContent" ref="lpbContent">
<div :class="
lpbData.cs.length == 0 && lpbData.zdys.length == 0
? 'bottom40 ljz-wrap'
: 'ljz-wrap'
" :style="{ 'width': ljzWidth + 'px' }" v-show="lpbData.ljzs.length > 0">
<!-- 循环逻辑幢数据 -->
<div class="ljz" ref="ljz" v-for="(ljzs, ljzIndex) in lpbData.ljzs" :key="ljzIndex">
<!-- :class="[{ 'mt30': ljzIndex == 0 }, { 'mt60': ljzIndex == 1 || lpbData.ljzs.length == 1 }]" -->
<!-- :style="{'marginTop':ljzs.zdys.length>0?'0':'30px'}" -->
<!-- 循环逻辑幢下的幢单元 -->
<div class="ljz-zdy-wrap" :style="{ 'marginTop': ljzs.zdys.length > 0 ? '0' : '30px' }">
<div class="ljz-zdy column-reverse"
:style="{ 'min-height': ljzzdyHeight + 'px', 'marginRight': zdyIndex < (ljzs.zdys.length - 1) || ljzs.cs.length > 1 ? '20px' : '0' }"
ref="ljzzdy" v-show="ljzs.zdys.length > 0" v-for="(zdys, zdyIndex) in ljzs.zdys" :key="zdyIndex">
<!-- 幢单元名称 -->
<div class="zdy-name name">
<p class="cp" @dblclick="openZxx(zdys.bsm, 'zdy')">
<el-checkbox @change='zdySelectAll($event, zdys.cs)'>{{ zdys.zdymc }}</el-checkbox>
</p>
</div>
<!-- 循环幢单元下的层户 -->
<!-- <div class="chTable-wrap"> -->
<table class="chTable psr" border="0" cellspacing="0" cellpadding="0" v-show="zdys.cs.length > 0">
<tr v-for="(cs, csIndex) in zdys.cs" :key="csIndex">
<!-- 显示层数 -->
<td class="floor" ref="cBsm" @contextmenu.prevent="openMenu($event, cs, 'c')"
@click="handleClickC($event, cs)" @dblclick="openZxx(cs.bsm, 'c')">
{{ cs.sjc }}层
</td>
<!-- 显示户 -->
<td v-for="(hs, hsIndex) in cs.hs" :rowspan="hs.sjcs" :colspan="hs.sjhs" :data-bsm="hs.bsm"
:data-qszt="hs.qszt" ref="hBsm" :key="hsIndex"
:class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
@click="handleTdClick($event.target, hs.bsm, hs)" @dblclick="dbclick(hs.bsm)"
@contextmenu.prevent="openMenu($event, hs, 'h')">
{{ hs.shbw }}
<span @click.stop="dyztIconClick" class="hqszt lin" v-show="hs.qszt == '0'">临</span>
<span @click.stop="dyztIconClick" class="hqszt zheng" v-show="hs.qszt == '1'">正</span>
<span @click.stop="dyztIconClick" class="hqszt xian" v-show="hs.qszt == '2'">现</span>
<ul class="dyzt" @click.stop="hDyztClick($event, hs.bsm, hs)">
<li style="background-color:#6EDEE1" v-show="hs.qqzt == '1'" @click.stop="dyztIconClick">确</li>
<li style="background-color:#8ADC88" v-show="hs.bazt == '1'" @click.stop="dyztIconClick">备</li>
<li style="background-color:#FF8282" v-show="hs.dyzt == '1'" @click.stop="dyztIconClick">抵</li>
<li style="background-color:#D7CECF" v-show="hs.cfzt == '1'" @click.stop="dyztIconClick">查</li>
<li style="background-color:#D4A3EB" v-show="hs.yyzt == '1'" @click.stop="dyztIconClick">异</li>
<li style="background-color:#A5A3FB" v-show="hs.xzzt == '1'" @click.stop="dyztIconClick">限</li>
</ul>
</td>
</tr>
</table>
<!-- </div> -->
<div class="lpbContent">
<!-- 纵向倒序排列 逻辑幢位于独立幢单元和独立层户的上方 -->
<div class="ch-zdy-wrap">
<!-- 幢单元 -->
<zdy-cpn v-if="lpbData.zdys.length" :zdys="lpbData.zdys" />
<!-- 独立层户 -->
<ch-cpn v-if="lpbData.cs.length" :ch="lpbData.cs" />
</div>
<!-- 逻辑幢 -->
<ljzs-cpn v-if="lpbData.ljzs.length" :ljzs="lpbData.ljzs" />
</div>
<!-- 循环逻辑幢下的层户 -->
<div class="ljz-ch" ref="ljzDlch"
:style="{ height: 'auto', marginTop: (ljzs.zdys.length > 0 ? '39' : 0) + 'px' }" v-if="ljzs.cs.length > 0">
<table class="chTable prs" :style="{
top:
ljzzdyHeight + 40 - ljzs.cs.length * 65 < 0
? 0
: ljzzdyHeight + 40 - ljzs.cs.length * 65 + 'px',
}" border="1" cellspacing="0" cellpadding="0">
<tr v-for="cs in ljzs.cs" :key="cs.bsm">
<!-- 显示层数 -->
<td class="floor" ref="cBsm" @contextmenu.prevent="openMenu($event, cs, 'c')"
@click="handleClickC($event, cs)" @dblclick="openZxx(cs.bsm, 'c')">
{{ cs.sjc }}层
</td>
<!-- 显示户 -->
<td v-for="(hs, hsIndex) in cs.hs" :rowspan="hs.sjcs" :colspan="hs.sjhs" :data-bsm="hs.bsm"
:data-qszt="hs.qszt" ref="hBsm" :key="hsIndex"
:class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
@click="handleTdClick($event.target, hs.bsm, hs)" @dblclick="dbclick(hs.bsm)"
@contextmenu.prevent="openMenu($event, hs, 'h')">
{{ hs.shbw }}
<span @click.stop="dyztIconClick" class="hqszt lin" v-show="hs.qszt == '0'">临</span>
<span @click.stop="dyztIconClick" class="hqszt zheng" v-show="hs.qszt == '1'">正</span>
<span @click.stop="dyztIconClick" class="hqszt xian" v-show="hs.qszt == '2'">现</span>
<ul class="dyzt" @click.stop="hDyztClick($event, hs.bsm, hs)">
<li style="background-color:#6EDEE1" v-show="hs.qqzt == '1'" @click.stop="dyztIconClick">确</li>
<li style="background-color:#8ADC88" v-show="hs.bazt == '1'" @click.stop="dyztIconClick">备</li>
<li style="background-color:#FF8282" v-show="hs.dyzt == '1'" @click.stop="dyztIconClick">抵</li>
<li style="background-color:#D7CECF" v-show="hs.cfzt == '1'" @click.stop="dyztIconClick">查</li>
<li style="background-color:#D4A3EB" v-show="hs.yyzt == '1'" @click.stop="dyztIconClick">异</li>
<li style="background-color:#A5A3FB" v-show="hs.xzzt == '1'" @click.stop="dyztIconClick">限</li>
</ul>
</td>
</tr>
</table>
</div>
<!-- 逻辑幢名称 -->
<div class="ljz-name name">
<p class="cp" @dblclick="openZxx(ljzs.bsm, 'ljz')">
{{ ljzs.ljzmc }}
<!-- 自然幢名称 -->
<p class="lpb-xmmc">
<el-checkbox @change="zdySelectAll($event)">{{
lpbData.xmmc
}}</el-checkbox>
</p>
</div>
</div>
</div>
<div class="zdy-wrap"
:style="{ width: zdyWidth + 'px', marginTop: (lpbData.zdys.length > 0 || lpbData.cs.length > 0) ? '30px' : '0' }">
<!-- 循环自然幢下的幢单元 -->
<div class="zdy column-reverse" ref="zdy" v-for="(zdys, zdyIndex) in lpbData.zdys" :key="zdyIndex"
:style="{ 'min-height': zdyHeight + 'px' }">
<!-- 幢单元名称 -->
<div class="zdy-name name">
<p class="cp" @dblclick="openZxx(zdys.bsm, 'zdy')">
<el-checkbox @change='zdySelectAll($event, zdys.cs)'>{{ zdys.zdymc }}</el-checkbox>
</p>
</div>
<!-- 循环幢单元下的层户 -->
<table class="chTable" border="1" cellspacing="0" cellpadding="0" v-show="zdys.cs.length > 0">
<tr v-for="(cs, csIndex) in zdys.cs" :key="csIndex">
<!-- 显示层数 -->
<td class="floor" ref="cBsm" @contextmenu.prevent="openMenu($event, cs, 'c')"
@click="handleClickC($event, cs)" @dblclick="openZxx(cs.bsm, 'c')">
{{ cs.sjc }}层
</td>
<!-- 显示户 -->
<td v-for="(hs, hsIndex) in cs.hs" :rowspan="hs.sjcs" :colspan="hs.sjhs" :data-bsm="hs.bsm"
:data-qszt="hs.qszt" ref="hBsm" :key="hsIndex"
:class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
@click="handleTdClick($event.target, hs.bsm, hs)" @dblclick="dbclick(hs.bsm)"
@contextmenu.prevent="openMenu($event, hs, 'h')">
{{ hs.shbw }}
<span @click.stop="dyztIconClick" class="hqszt lin" v-show="hs.qszt == '0'">临</span>
<span @click.stop="dyztIconClick" class="hqszt zheng" v-show="hs.qszt == '1'">正</span>
<span @click.stop="dyztIconClick" class="hqszt xian" v-show="hs.qszt == '2'">现</span>
<ul class="dyzt" @click.stop="hDyztClick($event, hs.bsm, hs)">
<li style="background-color:#6EDEE1" v-show="hs.qqzt == '1'" @click.stop="dyztIconClick">确</li>
<li style="background-color:#8ADC88" v-show="hs.bazt == '1'" @click.stop="dyztIconClick">备</li>
<li style="background-color:#FF8282" v-show="hs.dyzt == '1'" @click.stop="dyztIconClick">抵</li>
<li style="background-color:#D7CECF" v-show="hs.cfzt == '1'" @click.stop="dyztIconClick">查</li>
<li style="background-color:#D4A3EB" v-show="hs.yyzt == '1'" @click.stop="dyztIconClick">异</li>
<li style="background-color:#A5A3FB" v-show="hs.xzzt == '1'" @click.stop="dyztIconClick">限</li>
</ul>
</td>
</tr>
</table>
</div>
<!-- 循环自然幢下的独立层户 -->
<!-- <template > -->
<div class="zdy column-reverse" ref="zrzDlch" :style="{ 'min-height': cHeight + 'px' }">
<table class="chTable" ref="ch" border="1" cellspacing="0" cellpadding="0"
v-show="lpbData.cs != null && lpbData.cs.length > 0">
<tr v-for="(cs, csIndex) in lpbData.cs" :key="csIndex">
<!-- 显示层数 -->
<td class="floor" ref="cBsm" @contextmenu.prevent="openMenu($event, cs, 'c')"
@click="handleClickC($event, cs)" @dblclick="openZxx(cs.bsm, 'c')">
{{ cs.sjc }}层
</td>
<!-- 显示户 -->
<td v-for="(hs, hsIndex) in cs.hs" :rowspan="hs.sjcs" :colspan="hs.sjhs" :data-bsm="hs.bsm"
:data-qszt="hs.qszt" ref="hBsm" :key="hsIndex"
:class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
@click="handleTdClick($event.target, hs.bsm, hs)" @dblclick="dbclick(hs.bsm)"
@contextmenu.prevent="openMenu($event, hs, 'h')">
{{ hs.shbw }}
<span @click.stop="dyztIconClick" class="hqszt lin" v-show="hs.qszt == '0'">临</span>
<span @click.stop="dyztIconClick" class="hqszt zheng" v-show="hs.qszt == '1'">正</span>
<span @click.stop="dyztIconClick" class="hqszt xian" v-show="hs.qszt == '2'">现</span>
<ul class="dyzt" @click.stop="hDyztClick($event, hs.bsm, hs)">
<li style="background-color:#6EDEE1" v-show="hs.qqzt == '1'" @click.stop="dyztIconClick">确</li>
<li style="background-color:#8ADC88" v-show="hs.bazt == '1'" @click.stop="dyztIconClick">备</li>
<li style="background-color:#FF8282" v-show="hs.dyzt == '1'" @click.stop="dyztIconClick">抵</li>
<li style="background-color:#D7CECF" v-show="hs.cfzt == '1'" @click.stop="dyztIconClick">查</li>
<li style="background-color:#D4A3EB" v-show="hs.yyzt == '1'" @click.stop="dyztIconClick">异</li>
<li style="background-color:#A5A3FB" v-show="hs.xzzt == '1'" @click.stop="dyztIconClick">限</li>
<!-- 右键菜单 -->
<ul
v-show="lpbChVisible"
:style="{ left: lpbChLeft + 'px', top: lpbChTop + 'px' }"
class="contextmenu"
>
<li @click="menuClick">菜单一</li>
<li @click="menuClick">菜单二</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
<!-- 层户 -->
<div class="zrz" :style="{ width: lpbContentWidth + 'px' }">
<el-checkbox v-model="zrzChecked" @change='lpbSelectAll'>{{ lpbData.xmmc }}</el-checkbox>
</div>
</div>
<!-- 双击户的弹出框 -->
<el-dialog :close-on-click-modal="false" title="户编辑" class="hbjDialog" :visible.sync="hbjVisible" width="80%">
<hbj ref="hbj" :bsm="hbsm" :scyclx="scyclx" :lpbParent="lpbParent"></hbj>
</el-dialog>
</div>
</template>
<script>
import { getLpb } from '@/api/lpb'
import { getLpb } from "@/api/lpb";
import chCpn from "./ch.vue";
import zdyCpn from "./zdys.vue";
import ljzsCpn from "./ljzs.vue";
export default {
provide() {
return {
openMenu: this.openMenu,
selectAll: this.selectAllObj,
};
},
name: "",
components: { },
components: { chCpn, zdyCpn, ljzsCpn },
props: {
zrzbsm: {
type: String,
default: ''
default: "",
},
lpbParent: {
type: String,
default: 'isLpb'
default: "isLpb",
},
isHb: {
type: Boolean,
default: true
default: true,
},
},
data () {
data() {
return {
lpbData: {
ljzs: [],
cs: [],
zdys: [],
},
hbjVisible: false,
lpbContentWidth: 0,
ljzWidth: 10000,
zdyWidth: 1000,
cHeight: 0, //独立层户的div高度
zdyHeight: 0, //独立幢单元的div高度
ljzcHeight: 0, //逻辑幢下层户的div高度
ljzzdyHeight: 0, //逻辑幢下幢单元的div高度
loading: true,
hbsm: '',
hbsmList: [],
hqsztList: [],
cbsmList: [],
time: null, //区分单双击事件的定时器
searchNum: Math.random(),
//接收父组件传入的根据单元状态/房屋性质/房屋用途筛选的户bsmList
choosedList: [],
borderColor: "#E6E6E6",
lpbChVisible: false, //层户右键菜单显隐
//户全选标识 由于依赖注入的绑定并不是可响应的,所以传入可监听的对象以获取其属性的响应
selectAllObj: {
selectAll: false,
},
//层户右键菜单显隐
lpbChVisible: false,
//右键菜单定位位置
lpbChLeft: 100,
lpbChTop: 100,
//右键层户数据
chData: "",
rightClickFlag: "",
formLabelWidth: "120px",
yclpbData: {},
sclpbData: {},
zrzChecked: false, //自然幢全选
};
},
mounted () {
this.getLpb(this.zrzbsm ? this.zrzbsm : '9434bdb243ba342cc6c043065fc9e480');
setTimeout(() => {
//让滚动条滚动至最下面 -6是横向滚动条的高度
this.$refs.lpbContent.scrollTop =
this.$refs.lpbContent.scrollHeight -
this.$refs.lpbContent.clientHeight -
6;
}, 200);
window.lpbContent = this;
mounted() {
this.getLpb("dfc08a0cc6a25188990ea53d1d2c500e");
// setTimeout(() => {
// //让滚动条滚动至最下面 -6是横向滚动条的高度
// this.$refs.lpbContent.scrollTop =
// this.$refs.lpbContent.scrollHeight -
// this.$refs.lpbContent.clientHeight -
// 6;
// }, 200);
// window.lpbContent = this;
},
methods: {
loadingData (zrzbsm, scyclx) {
this.getLpb(zrzbsm, scyclx, true);
//全选户
zdySelectAll(val) {
this.selectAllObj.selectAll = val;
},
//获取楼盘表数据
getLpb (zrzbsm, scyclx, actual) {
getLpb(zrzbsm, scyclx, actual) {
getLpb(zrzbsm, scyclx).then((res) => {
if (res.code == 200) {
res.result.ljzs = res.result.ljzs
.sort(this.compare("place"))
.reverse();
res.result.ljzs = res.result.ljzs.sort(this.compare("place"));
this.lpbData = res.result == null ? this.lpbData : res.result;
this.$nextTick(() => {
//渲染楼盘表
this.dataChange();
});
// this.$nextTick(() => {
// //渲染楼盘表
// this.dataChange();
// });
console.log(this.lpbData, "this.lpbData");
} else {
this.$message({
message: res.message,
......@@ -282,379 +109,31 @@ export default {
}
});
},
compare (property) {
return function (a, b) {
var value1 = a[property];
var value2 = b[property];
return value1 - value2;
};
},
//按照bdcdyh或shbw筛选户
lpbDataMap (sh) {
this.searchNum = sh;
if (this.hbsmList.length > 0) {
//清除之前选中户
this.clearChoosedH();
}
// console.log("查询searchNum" + searchNum);
},
//自然幢下元素高度宽度计算
dataChange () {
//计算逻辑幢宽度 20为marginRight值
this.ljzWidth = 0;
if (this.$refs.ljzzdy != undefined) {
this.$refs.ljzzdy.forEach((item) => {
this.ljzWidth += item.offsetWidth + 20;
});
if (this.$refs.ljzDlch != undefined) {
this.$refs.ljzDlch.forEach((item) => {
this.ljzWidth += item.offsetWidth;
});
}
} else {
if (this.$refs.ljzDlch != undefined) {
this.$refs.ljzDlch.forEach((item) => {
this.ljzWidth += item.offsetWidth + 20;
});
}
}
//计算独立幢单元和独立层户宽度
//考虑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 = 20;
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) {
//计算自然幢下的幢单元高度，如果有比层户高的幢单元，则幢单元高度设为最高的幢单元高度，如果没有，则设为层户高度
higher = highest > this.$refs.ch.offsetHeight ? true : false;
this.zdyHeight = higher ? highest : this.$refs.ch.offsetHeight;
highest = 0;
this.zdyWidth += this.$refs.ch.offsetWidth;
} else {
this.zdyHeight = highest;
highest = 0;
}
} else {
//有且仅有独立层户
if (this.$refs.zrzDlch != undefined) {
this.zdyWidth = this.$refs.zrzDlch.offsetWidth + 20;
}
}
//计算逻辑幢下的幢单元和层户的高度
this.ljzzdyHeight = 0;
if (this.$refs.ljzzdy != undefined && this.$refs.ljzzdy.length > 0) {
//判断自然幢下有没有比层户高的幢单元
let higher = true;
let zrzhighest = 0;
//记录最高的幢单元高度 默认为第一个幢单元高度
zrzhighest = this.$refs.ljzzdy[0].offsetHeight;
this.$refs.ljzzdy.forEach((item) => {
this.ljzcHeight = item.offsetHeight > this.ljzcHeight ? item.offsetHeight : this.ljzcHeight;
zrzhighest = zrzhighest > item.offsetHeight ? zrzhighest : item.offsetHeight;
});
//判断有无独立层户
if (this.$refs.ljzch != undefined) {
//计算自然幢下的幢单元高度，如果有比层户高的幢单元，则幢单元高度设为最高的幢单元高度，如果没有，则设为层户高度
higher = zrzhighest > this.$refs.ljzch.offsetHeight ? true : false;
this.$nextTick(() => {
this.ljzzdyHeight = higher ? zrzhighest : this.$refs.ljzch.offsetHeight;
zrzhighest = 0;
});
} else {
this.$nextTick(() => {
this.ljzzdyHeight = zrzhighest;
zrzhighest = 0;
});
}
} else {
}
this.$nextTick(() => {
this.lpbContentWidth = this.zdyWidth > this.ljzWidth ? this.zdyWidth - 20 : this.ljzWidth - 20;
if (this.lpbContentWidth == 0) {
//his.lpbContentWidth = this.$refs.lpbContent.offsetWidth
}
})
},
//户单击事件
handleTdClick (e, bsm, hs) {
let self = this;
// 开启延时器，200ms的间隔区分单击和双击，解决双击时执行两次单击事件
clearTimeout(self.time);
self.time = setTimeout(() => {
this.closeMenu()
//判断点击的户是否选中
if (e.className.indexOf("tdSelect") == -1) {
//未选中→选中
e.className = "tdSelect"; //加边框
this.hbsmList.push(bsm); // 将户bsm放进hbsmList
this.hqsztList.push(hs.qszt); // 将户qszt放进hqsztList
switch (this.lpbParent) {
case 'isHbfg':
self.fghbChoosedList.push(hs);
break;
case 'isFwsxbg':
break;
case 'isCxlz':
break;
case 'isLpb':
break;
default:
break;
}
} else {
//选中→未选中
e.className = "";
this.hbsmList = this.hbsmList.filter(i => i != bsm);
this.hqsztList = this.hqsztList.filter(i => i != hs.qszt);
switch (this.lpbParent) {
case 'isHbfg':
self.fghbChoosedList = self.fghbChoosedList.filter(i => i != hs)
break;
case 'isFwsxbg':
break;
case 'isCxlz':
break;
case 'isLpb':
this.hbsmList = this.hbsmList.filter(i => i != bsm);
this.hqsztList = this.hqsztList.filter(i => i != hs.qszt);
this.$parent.getHbsm(this.hbsmList, false);
this.$parent.getQsztList(this.hqsztList, false);
break;
default:
break;
}
}
}, 200);
},
//户双击事件
dbclick (bsm) {
clearTimeout(this.time);
this.hbsm = bsm;
this.$store.state.hbsm = bsm;
this.hbjVisible = true;
this.$nextTick(function () {
this.$refs.hbj.$refs.hbj.getHInfo(this.hbsm);
});
},
//删除多重数组中的某一项
deleteArrOption (arr, item) {
for (var i = arr.length; i > 0; i--) {
if (arr[i - 1] == item) {
arr.splice(i - 1, 1);
}
}
},
//清除选中户
clearChoosedH () {
// this.$nextTick(() => {
//将每个选中的户的选中状态清除
this.$refs.hBsm.forEach((item) => {
if (item.className == "tdSelect") {
item.className = "";
}
});
// 清空hbsmList
this.hbsmList = [];
this.hqsztList = [];
// });
},
//户右键点击事件
openMenu (e, item, type) {
this.lpbChLeft = e.pageX;
this.lpbChTop = e.pageY;
this.chData = item;
switch (this.lpbParent) {
case 'isHbfg':
break;
case 'isFwsxbg':
break;
case 'isCxlz':
break;
case 'isLpb':
this.rightClickFlag = type;
openMenu(e, item, type) {
this.lpbChLeft = e.pageX - 96;
this.lpbChTop = e.pageY - 23;
this.lpbChVisible = true;
break;
default:
break;
}
},
// 户单元状态点击事件
hDyztClick (e, bsm, hs) {
this.handleTdClick(e.target.parentNode, bsm, hs);
},
// 层选中事件
handleClickC (e, item) {
if (this.lpbParent == 'isLpb') {
//判断点击的层是否选中
if (e.target.className.indexOf("tdSelect") == -1) {
//未选中→选中
e.target.className += " tdSelect"; //加边框
this.cbsmList.push(item.bsm);
} else {
//选中→未选中
e.target.className = "floor";
this.deleteArrOption(this.cbsmList, item.bsm);
}
this.$parent.getCbsm(this.cbsmList);
} else {
}
},
//关闭右键菜单
closeMenu () {
//关闭户右键菜单
closeMenu() {
this.lpbChVisible = false;
},
//end
//楼盘表户全选
lpbSelectAll (val) {
if (val) {
this.$refs.hBsm.forEach((item) => {
item.className = "tdSelect";
this.hbsmList.push(item.dataset.bsm); // 将户bsm放进hbsmList
this.hqsztList.push(item.dataset.qszt)
});
} else {
this.$refs.hBsm.forEach((item) => {
item.className = "";
this.hbsmList = [];
this.hqsztList = [];
});
}
this.$nextTick(() => {
this.$parent.getHbsm(this.hbsmList, false);
this.$parent.getQsztList(this.hqsztList, false);
})
},
//幢单元全选
zdySelectAll (val, cs) {
let zdyHbsmList = [];
let zdyHqsztList = [];
cs.forEach(i => {
i.hs.forEach(j => {
zdyHbsmList.push(j.bsm)
zdyHqsztList.push(j.qszt)
})
});
if (val) {
this.$nextTick(() => {
this.$refs.hBsm.forEach((item) => {
if (zdyHbsmList.indexOf(item.dataset.bsm) > -1) {
item.className = "tdSelect";
}
});
this.hbsmList = this.hbsmList.concat(zdyHbsmList);
this.hqsztList = this.hqsztList.concat(zdyHqsztList);
})
} else {
this.$refs.hBsm.forEach((item) => {
console.log(item.dataset.bsm);
if (zdyHbsmList.indexOf(item.dataset.bsm) > -1) {
item.className = "";
}
zdyHbsmList.forEach(j => {
if (item.dataset.bsm == j) {
this.hbsmList = this.hbsmList.filter(i => i != j)
}
})
zdyHqsztList.forEach(j => {
if (item.dataset.qszt == j) {
this.hqsztList = this.hqsztList.filter(i => i != j)
}
})
});
}
this.$nextTick(() => {
this.$parent.getHbsm(this.hbsmList, false);
this.$parent.getQsztList(this.hqsztList, false);
})
},
//逻辑幢、幢单元、层双击
openZxx (bsm, type) {
if (this.lpbParent == 'isLpb') {
this.$parent.taskTitle = '编辑';
this.$parent.dialogVisible = true;
this.$parent.curBsm = bsm;
this.$parent.menuType = type;
}
}
},
computed: {
createFlagChange () {
return this.$parent.createFlag;
},
legendToggleFlagChange () {
return this.$parent.legendToggleFlag;
//右键菜单点击
menuClick() {
this.closeMenu();
},
scyclx () {
return this.$parent.scyclx;
compare(property) {
return function (a, b) {
var value1 = a[property];
var value2 = b[property];
return value1 - value2;
};
},
},
watch: {
scyclx (n) {
this.hqsztList = [];
// this.getLpb(this.$store.state.zrzbsm, n);
if (n == '0') {
this.lpbData = this.yclpbData;
} else {
this.lpbData = this.sclpbData;
}
},
//监听有无通过输入框查询选择到的户,如果有，将其bsm放入hbsmList
searchNum (n) {
// 渲染查询到的户
this.$nextTick(() => {
this.$refs.hBsm.forEach((item) => {
if (item.className == "tdSelect") {
// console.log(item.offsetLeft,'offsetLeft');
// console.log(item.offsetTop,'offsetHeight');
//定位到最后一个户所在位置
this.$refs.lpbContent.scrollTop = item.offsetTop;
this.$refs.lpbContent.scrollLeft = item.offsetLeft;
console.log(item.dataset.bsm, "item.dataset.bsm");
// 判断hbsmList中是否已经存在
if (this.hbsmList.indexOf(item.dataset.bsm) == -1) {
this.hbsmList.push(item.dataset.bsm);
this.hqsztList.push(item.dataset.qszt);
}
}
});
});
},
//父组件中选择单元状态改变选中户的边框颜色
choosedList (n) {
if (n.length > 0) {
this.$refs.hBsm.forEach((item) => {
this.choosedList.forEach((i, ind) => {
if (item.dataset.bsm == i) {
if (ind == 0) {
//定位到第一个户所在位置
this.$refs.lpbContent.scrollTop = item.offsetTop;
this.$refs.lpbContent.scrollLeft = item.offsetLeft;
}
item.style.border = '1px solid ' + this.borderColor;
item.className = "tdSelect"
}
});
});
}
},
lpbChVisible (value) {
//户右键菜单显示时，监听到鼠标点击时关闭户右键菜单
lpbChVisible(value) {
if (value) {
document.body.addEventListener("click", this.closeMenu);
} else {
......@@ -669,288 +148,69 @@ export default {
width: 100%;
height: 100%;
overflow: hidden;
.lpbContent {
width: 100%;
height: 100%;
height: calc(100% - 62px);
position: relative;
overflow: scroll;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.ljz-wrap {
height: auto;
overflow: hidden;
.ljz {
display: table;
// margin-top: 30px;
.ljz-zdy-wrap {
width: auto;
display: table;
float: left;
.ljz-zdy {
height: auto;
float: left;
position: relative;
table {
bottom: 40px;
}
.zdy-name {
width: 100%;
// bottom: 0;
// position: absolute;
height: 40px;
// background-color: rosybrown;
// border:1px solid #E6E6E6
}
// .chTable-wrap{
// position: absolute;
// bottom: 40px;
// }
}
}
div:last-child {
margin-right: 0;
}
.ljz-ch {
float: left;
}
.ljz-zdy:last-child {
margin-right: 0;
}
.column-reverse {
display: flex;
flex-direction: column-reverse;
}
// }
.ljz-name {
width: calc(100% - 32px);
height: 40px;
// background-color: darkorange;
}
}
.mt30 {
margin-top: 30px;
}
.mt60 {
margin-top: 60px;
}
div:last-child {
margin-right: 0;
}
}
.zdy-wrap {
height: auto;
overflow: hidden;
// margin-top: 30px;
.zdy {
float: left;
margin-right: 20px;
.zdy-zdy-wrap {
.zdy-zdy {
height: auto;
margin-right: 20px;
display: inline-table;
.zdy-name {
bottom: 0;
// background-color: blanchedalmond;
// border:1px solid #E6E6E6
}
}
.zdy-zdy:last-child {
margin-right: 0;
}
}
.zdy-name {
width: calc;
height: 40px;
// background-color: rosybrown;
border: 1px solid #E6E6E6
}
}
.column-reverse {
box-sizing: border-box;
padding-top: 20px;
.ch-zdy-wrap {
display: flex;
flex-direction: column-reverse;
}
}
// 公共部分样式 start
.chTable {
margin-left: -1px;
// position: relative;
tr {
.floor {
background-color: #fff;
}
td {
min-width: 138px;
height: 72px;
line-height: 72px;
text-align: center;
flex-direction: row;
}
}
.lpb-xmmc {
border: 0;
border-top: 1px solid #e6e6e6;
}
// 自定义右键菜单样式
.contextmenu {
margin: 0;
background: #fff;
width: 92px;
z-index: 3000;
position: fixed;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
li {
margin: 0;
padding: 7px 16px;
cursor: pointer;
position: relative;
border: 1px solid #d5d6da;
.hqszt {
display: inline-block;
width: 16px;
height: 16px;
font-size: 12px;
line-height: 16px;
position: absolute;
left: 6px;
top: 6px;
border: 1px solid;
border-radius: 8px;
}
.lin {
color: #F7B500;
border-color: #F7B500;
}
.zheng {
color: #1AD6E1;
border-color: #1AD6E1;
}
.xian {
color: #45AEFD;
border-color: #45AEFD;
}
.dyzt {
user-select: none;
width: 138px;
height: 18px;
.childUl {
display: none;
position: absolute;
// background: orange;
bottom: 32px;
box-sizing: border-box;
padding: 0 6px;
left: 92px !important;
top: 0 !important;
li {
display: inline-block;
width: 18px;
height: 18px;
font-size: 12px;
line-height: 18px;
color: #ffffff;
border: 1px solid;
border-radius: 9px;
}
width: 76px;
}
}
.tdSelect {
border: 1px solid #006cff !important;
background-image: url("./images/tdSelect.png");
background-repeat: no-repeat;
background-position: right top;
background-size: 30px;
}
.hasBorder {
border-width: 1px;
border-style: solid;
}
}
}
.name {
line-height: 40px;
text-align: center;
display: table-footer-group;
p {
width: calc(100% - 2px);
height: 100%;
// border: 1px solid #E6E6E6;
}
li:hover {
background: #eee;
> .childUl {
display: block;
}
// end
}
.column-reverse {
display: flex;
flex-direction: column-reverse;
}
.zrz {
height: 60px;
line-height: 60px;
background-color: #ffffff;
border: 1px solid #E6E6E6;
// position: relative;
// bottom: 66px;
text-align: center;
transition: 0.5s;
}
.cantHb {
opacity: .5;
.noEdit {
color: #e6e6e6;
cursor: not-allowed;
}
.btnGroup {
margin: 20px auto 0;
width: 150px;
}
.el-checkbox {
font-size: 16px;
/deep/.el-checkbox__label {
font-size: 16px;
}
/deep/ .el-checkbox__inner {
width: 16px;
height: 16px;
}
/deep/ .el-checkbox__inner::after {
height: 9px;
left: 4px;
top: 0px;
width: 5px;
}
/deep/ .el-checkbox__input {
top: 1px;
}
}
.hbjDialog {
/deep/.el-dialog {
margin-top: 10vh !important;
.noEdit:hover {
background: #ffffff;
}
}
}
......
<!--
* @Author: yangwei
* @Date: 2023-02-28 17:25:45
* @LastEditors: yangwei
* @LastEditTime: 2023-03-02 17:34:24
* @FilePath: \bdcdj-web\src\views\lpb\lpbContent\ljzs.vue
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<template>
<div class="ljzs-wrap">
<div v-for="ljzarr in ljzsCptd" :key="ljzarr[0].bsm">
<!-- 多个同起始层逻辑幢 横向排列 -->
<div class="ch-zdy-wrap" v-if="ljzarr.length > 1">
<div v-for="ljz in ljzarr" :key="ljz.ljzmc" class="same-floor-ljz">
<div
:class="
ljz.cs.length ? 'cs-visible ch-zdy-wrap' : 'cs-none ch-zdy-wrap'
"
>
<!-- 逻辑幢名称 -->
<p class="lpb-xmmc ljz-xmmc">{{ ljz.ljzmc }}</p>
<!-- 独立层户 -->
<ch-cpn v-if="ljz.cs.length" :ch="ljz.cs" />
<!-- 幢单元 -->
<zdy-cpn v-if="ljz.zdys.length" :zdys="ljz.zdys" />
</div>
</div>
</div>
<!-- 不同起始层的逻辑幢纵向排列 -->
<div
:class="
ljzarr[0].cs.length ? 'cs-visible ch-zdy-wrap' : 'cs-none ch-zdy-wrap'
"
v-else
>
<!-- 逻辑幢名称 -->
<p class="lpb-xmmc ljz-xmmc">{{ ljzarr[0].ljzmc }}</p>
<!-- 独立层户 -->
<ch-cpn v-if="ljzarr[0].cs.length" :ch="ljzarr[0].cs" />
<!-- 幢单元 -->
<zdy-cpn v-if="ljzarr[0].zdys.length" :zdys="ljzarr[0].zdys" />
</div>
</div>
</div>
</template>
<script>
import chCpn from "./ch.vue";
import zdyCpn from "./zdys.vue";
export default {
name: "BdcdjWebLjzs",
components: { chCpn, zdyCpn },
props: {
ljzs: {
type: Array,
default: function () {
return [];
},
},
},
data() {
return {
};
},
mounted() {
console.log(this.ljzsCptd);
},
computed: {
ljzsCptd() {
let tempArr = [];
//逻辑幢数据已经按照place从小到大排序
this.ljzs.forEach((item, index) => {
//判断当前逻辑幢是否与上一个逻辑幢的起始层数相同，将起始层数相同的逻辑幢放在同一排
if (index && item.place == this.ljzs[index - 1].place) {
tempArr[index - 1].push(item);
} else {
tempArr[index] = [];
tempArr[index].push(item);
}
});
//过滤假值
return tempArr.filter(Boolean)
},
},
methods: {},
};
</script>
<style lang="scss">
.ljzs-wrap {
display: flex;
flex-direction: column-reverse;
> div {
margin-bottom: 80px;
margin-right: 20px;
display: flex;
flex-direction: column;
.ch-zdy-wrap {
display: flex;
flex-direction: row-reverse;
width: fit-content;
position: relative;
.same-floor-ljz{
display: flex;
flex-direction: row;
margin-right: 20px;
}
.ljz-xmmc {
position: absolute;
width: calc(100% + 1px);
bottom: -60px;
}
}
.cs-none {
.zdys-wrap > div:last-child {
margin-right: 0;
}
}
}
}
</style>
<!--
* @Author: yangwei
* @Date: 2023-02-28 16:29:04
* @LastEditors: yangwei
* @LastEditTime: 2023-03-02 14:45:19
* @FilePath: \bdcdj-web\src\views\lpb\lpbContent\zdys.vue
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<template>
<div class="zdys-wrap">
<div v-for="zdy in realZdys" :key="zdy.bsm">
<!-- 幢单元名称 -->
<p class="lpb-xmmc">
<el-checkbox @change="zdySelectAll($event,zdy.bsm)">{{
zdy.zdymc
}}</el-checkbox>
</p>
<!-- 每个幢单元下的层户 -->
<ch-cpn :ref="zdy.bsm" :ch="zdy.cs" />
</div>
</div>
</template>
<script>
import chCpn from "./ch.vue";
export default {
name: "BdcdjWebZdys",
components: { chCpn },
props: {
zdys: {
type: Array,
default: function () {
return [];
},
},
},
data() {
return {};
},
mounted() {},
methods: {
//幢单元全选
zdySelectAll(val,r) {
this.$refs[r][0].zdySelectAll(val)
},
},
computed: {
realZdys() {
return this.zdys.sort((a, b) => {
return a.zdysxh > b.zdysxh ? 1 : -1;
});
},
},
};
</script>
<style lang="scss" scoped>
.zdys-wrap {
display: flex;
flex-direction: row;
> div {
margin-right: 20px;
display: flex;
flex-direction: column-reverse;
.lpb-xmmc {
border-top: 0;
}
}
}
</style>