Skip to content

bdc / bdcdj-web

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

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

1 parent 929f6d7c
Expand all
Inline Side-by-side
Showing 7 changed files with 550 additions and 196 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'
})
}
......
......@@ -369,4 +369,19 @@ aside {
.item-cwnr img {
height: 30px;
}
\ No newline at end of file
}
//楼盘表的幢/幢单元名称
.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-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> -->
<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-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,58 +210,32 @@ export default {
//获取各项单元状态的户bsm
// this.getDyztBsmList();
//获取房屋用途统计数据
// this.getLpbFwytAndQlxz();
this.getLpbFwytAndQlxz();
// 楼盘表绘制区域宽度计算：楼盘表区域宽度-图例宽度34-滚动条宽度6
setTimeout(() => {
this.lpbContentwidth = ((document.documentElement.clientWidth || document.body.clientWidth) - 340) - 34 - 6;
}, 100);
},
methods: {
/* handleTabClick(event){
if(event.name=="first"){
this.$router.push({
path:"/lpb/index",
})
}else if(event.name=="second"){
this.$router.push({
path:"/ywbl/ywsq/components/selectAllHInfo",
})
}
},*/
loading () {
this.getLpbMenuTree(this.$store.state.zrzbsm);
},
lodding () {
this.getlpbData();
},
/* handleTabClick(event){
if(event.name=="first"){
this.$router.push({
path:"/lpb/index",
})
}else if(event.name=="second"){
this.$router.push({
path:"/ywbl/ywsq/components/selectAllHInfo",
})
}
},*/
//获取高度计算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>
<!--
* @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>