Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
69c583cc by yangwei
Options

楼盘表

1 parent b4865ddb
Inline Side-by-side
Showing 6 changed files with 694 additions and 564 deletions
/*
* @Description:
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-06-08 13:43:33
* @LastEditTime: 2023-06-16 16:06:39
*/
import request from '@/utils/request'
let SERVER = window.config ? window.config : JSON.parse(localStorage.getItem('ApiUrl'))
const url = SERVER.SERVERAPI + '/rest/zhcx/lpcx/'
//
import request from "@/utils/request";
let SERVER = window.config
? window.config
: JSON.parse(localStorage.getItem("ApiUrl"));
const url = SERVER.SERVERAPI + "/rest/zhcx/lpcx/";
//
/**
* @description:楼盘查询- 根据条件进行列表查询
* @param {*} data
* @author: renchao
*/
export function getLpZrz (data) {
export function getLpZrz(data) {
return request({
url: 'service-lpb-zq/rest/zhcx/lpcx/getLpZrz',
method: 'post',
data: data
})
url: "service-lpb-zq/rest/zhcx/lpcx/getLpZrz",
method: "post",
data: data,
});
}
/**
......@@ -25,32 +27,47 @@ export function getLpZrz (data) {
* @param {*} zrzbsm
* @author: renchao
*/
export function getLpb (zrzbsm) {
export function getLpb(zrzbsm) {
return request({
url: 'service-lpb-zq/rest/zhcx/lpcx/getLpb?scyclx=1&zrzbsm=' + zrzbsm,
method: 'get'
})
url: "service-lpb-zq/rest/zhcx/lpcx/getLpb?scyclx=0&zrzbsm=" + zrzbsm,
method: "get",
});
}
/**
* @description: 获取楼盘表房屋用途,房屋性质右侧房屋用途统计数据
* @param {*} zrzbsm
* @author: renchao
*/
export function getLpbFwytAndQlxz (zrzbsm) {
export function getLpbFwytAndQlxz(zrzbsm) {
return request({
url: 'service-lpb-zq/rest/zhcx/lpcx/getLpbFwytAndQlxz?scyclx=1&zrzbsm=' + zrzbsm,
method: 'get'
})
url:
"service-lpb-zq/rest/zhcx/lpcx/getLpbFwytAndQlxz?scyclx=0&zrzbsm=" +
zrzbsm,
method: "get",
});
}
/**
* @description: 获取楼盘表缺失项统计
* @param {*} zrzbsm
* @author: renchao
*/
export function getLpbQsxtj (zrzbsm) {
export function getLpbQsxtj(zrzbsm) {
return request({
url: url + 'getLpbQsxtj?scyclx=1&zrzbsm=' + zrzbsm,
method: 'get'
})
url: "service-lpb-zq/rest/zhcx/lpcx/getLpbQsxtj?scyclx=0&zrzbsm=" + zrzbsm,
method: "get",
});
}
/**
* @description: 楼盘表 获取单元状态统计数据
* @param {*} data
* zrzbsm 自然幢标识码
* scyclx 实测预测类型 0预测，1实测
* @return {*}
*/
export function getLpbTj(zrzbsm) {
return request({
url: "service-lpb-zq/rest/zhcx/lpcx/getLpbTj?scyclx=0&zrzbsm=" + zrzbsm,
method: "get",
});
}
......
<template>
<div class="edit">
<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' }">
<lpbContent ref="lpbContent" :zrzbsm="formData.bsm" :key="time"></lpbContent>
</div>
<!-- 右侧图例 -->
<div class="lp-legend">
<div class="handleCol">
<div class="btn" @click="legendToggle">
<i v-show="!legendToggleFlag" class="el-icon-d-arrow-left"></i>
<i v-show="legendToggleFlag" class="el-icon-d-arrow-right"></i>
</div>
<div :class="selectedZt == 'dyzt' ? 'dyzt selectedZt' : 'dyzt'" @click="selectedZt = 'dyzt'">
<span>单元状态</span>
</div>
<div :class="selectedZt == 'fwxz' ? 'fwxz selectedZt' : 'fwxz'" @click="selectedZt = 'fwxz'">
<span>房屋性质</span>
</div>
<div :class="selectedZt == 'fwyt' ? 'fwyt selectedZt' : 'fwyt'" @click="selectedZt = 'fwyt'">
<span>房屋用途</span>
</div>
<div :class="selectedZt == 'qsx' ? 'qsx selectedZt' : 'qsx'" @click="selectedZt = 'qsx'">
<span>缺失项</span>
</div>
<div class="edit">
<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' }">
<lpbContent
ref="lpbContent"
:zrzbsm="formData.bsm"
:key="time"
></lpbContent>
</div>
<!-- 右侧图例 -->
<div class="lp-legend">
<div class="handleCol">
<div class="btn" @click="legendToggle">
<i v-show="!legendToggleFlag" class="el-icon-d-arrow-left"></i>
<i v-show="legendToggleFlag" class="el-icon-d-arrow-right"></i>
</div>
<div
:class="selectedZt == 'dyzt' ? 'dyzt selectedZt' : 'dyzt'"
@click="selectedZt = 'dyzt'"
>
<span>单元状态</span>
</div>
<div
:class="selectedZt == 'fwxz' ? 'fwxz selectedZt' : 'fwxz'"
@click="selectedZt = 'fwxz'"
>
<span>房屋性质</span>
</div>
<div
:class="selectedZt == 'fwyt' ? 'fwyt selectedZt' : 'fwyt'"
@click="selectedZt = 'fwyt'"
>
<span>房屋用途</span>
</div>
<div
:class="selectedZt == 'qsx' ? 'qsx selectedZt' : 'qsx'"
@click="selectedZt = 'qsx'"
>
<span>缺失项</span>
</div>
</div>
<div
class="legendTable-wrap"
:style="{ width: legendToggleFlag ? '200px' : '0' }"
>
<table
class="legendTable"
v-show="selectedZt == 'dyzt'"
cellspacing="1"
cellpadding="1"
border="1"
>
<tr>
<th>状态</th>
<th>套数</th>
<th>面积</th>
</tr>
<tr
v-for="(item, index) in dyztList"
:key="index"
class="cp"
@click="handleChoosedH(item.bsms, item.color)"
>
<td>
<i
class="fa fa-circle"
:style="{ backgroundColor: item.color }"
></i
>{{ item.name }}
</td>
<td>{{ item.ts }}</td>
<td>{{ item.mj }}</td>
</tr>
</table>
</div>
<div class="legendTable-wrap" :style="{ width: legendToggleFlag ? '204px' : '0' }">
<table class="legendTable" v-show="selectedZt == 'dyzt'" cellspacing="1" cellpadding="1" border="1">
<tr>
<th>状态</th>
<th>套数</th>
<th>面积</th>
</tr>
<tr v-for="(item, index) in dyztList" :key="index" class="cp"
@click="handleChoosedH(item.bsms, item.color)">
<td>
<i class="circle" :style="{ 'background-color': item.color }"></i>{{ item.name }}
</td>
<td>{{ item.ts }}</td>
<td>{{ item.mj }}</td>
</tr>
</table>
<table class="legendTable" v-show="selectedZt == 'fwxz'" cellspacing="1" cellpadding="1" border="1">
<tr>
<th>性质</th>
<th>套数</th>
<th>面积</th>
</tr>
<tr v-for="(item, index) in fwxzList" :key="index" class="cp"
@click="handleChoosedH(item.bsms, item.color)">
<td>
<i class="circle" :style="{ 'background-color': item.color }"></i>{{ item.name }}
</td>
<td>{{ item.ts }}</td>
<td>{{ item.mj }}</td>
</tr>
<tr v-show="fwxzList.length < 1">
<td colspan="3" class="tac">暂无数据</td>
</tr>
</table>
<table
class="legendTable"
v-show="selectedZt == 'fwxz'"
cellspacing="1"
cellpadding="1"
border="1"
>
<tr>
<th>性质</th>
<th>套数</th>
<th>面积</th>
</tr>
<tr
v-for="(item, index) in fwxzList"
:key="index"
class="cp"
@click="handleChoosedH(item.bsms, item.color)"
>
<td>
<i
class="fa fa-circle"
:style="{ backgroundColor: item.color }"
></i
>{{ item.name }}
</td>
<td>{{ item.ts }}</td>
<td>{{ item.mj }}</td>
</tr>
<tr v-show="fwxzList.length < 1">
<td colspan="3" class="tac">暂无数据</td>
</tr>
</table>
<table class="legendTable" v-show="selectedZt == 'fwyt'" cellspacing="1" cellpadding="1" border="1">
<tr>
<th>用途</th>
<th>套数</th>
<th>面积</th>
</tr>
<tr v-for="(item, index) in fwytList" :key="index" class="cp"
@click="handleChoosedH(item.bsms, item.color)">
<td>
<i class="circle" :style="{ 'background-color': item.color }"></i>{{ item.name }}
</td>
<td>{{ item.ts }}</td>
<td>{{ item.mj }}</td>
</tr>
<tr v-show="fwytList.length < 1">
<td colspan="3" class="tac">暂无数据</td>
</tr>
</table>
<table
class="legendTable"
v-show="selectedZt == 'fwyt'"
cellspacing="1"
cellpadding="1"
border="1"
>
<tr>
<th>用途</th>
<th>套数</th>
<th>面积</th>
</tr>
<tr
v-for="(item, index) in fwytList"
:key="index"
class="cp"
@click="handleChoosedH(item.bsms, item.color)"
>
<td>
<i
class="fa fa-circle"
:style="{ backgroundColor: item.color }"
></i
>{{ item.name }}
</td>
<td>{{ item.ts }}</td>
<td>{{ item.mj }}</td>
</tr>
<tr v-show="fwytList.length < 1">
<td colspan="3" class="tac">暂无数据</td>
</tr>
</table>
<table class="legendTable" v-show="selectedZt == 'qsx'" cellspacing="1" cellpadding="1" border="1">
<tr>
<th>数据缺失项</th>
<th>套数</th>
<th>面积</th>
</tr>
<tr v-for="(item, index) in qsxList" :key="index" class="cp" @click="handleChoosedH(item.bsms, item.color)">
<td>
<i class="circle" :style="{ 'background-color': item.color }"></i>{{ item.name }}
</td>
<td>{{ item.ts }}</td>
<td>0</td>
</tr>
<tr v-show="qsxList.length < 1">
<td colspan="3" class="tac">暂无数据</td>
</tr>
</table>
</div>
</div>
</div>
<table
class="legendTable"
v-show="selectedZt == 'qsx'"
cellspacing="1"
cellpadding="1"
border="1"
>
<tr>
<th>数据缺失项</th>
<th>套数</th>
<th>面积</th>
</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="{ backgroundColor: item.color }"
></i
>{{ item.name }}
</td>
<td>{{ item.ts }}</td>
<td>0</td>
</tr>
<tr v-show="qsxList.length < 1">
<td colspan="3" class="tac">暂无数据</td>
</tr>
</table>
</div>
</div>
</div>
<!-- 单元列表页面-->
<selectZrzH v-else :sqywInfo="formData" />
</div>
</div>
</template>
<script>
import lpbContent from "./lpbContent/index";
import selectZrzH from "../ywbl/ywsq/components/selectZrzH"
import { getLpbFwytAndQlxz,getLpbQsxtj } from '@/api/lpb'
import selectZrzH from "../ywbl/ywsq/components/selectZrzH";
import { getLpbFwytAndQlxz, getLpbQsxtj, getLpbTj } from "@/api/lpb";
export default {
name: "lpb",
props: {
formData: {
type: Object,
default: {}
}
},
components: {
lpbContent,
selectZrzH
},
data () {
return {
activeName:"first",
bsms: [],
dialogVisible: false,
scyclx: "0", //1是实测 0是预测
menuType: "",
selectedZt: "dyzt", //图例选中项，默认选中单元状态
dyztList: [
{
name: "未确权",
color: "#83AAFE",
ts: "12",
mj: "1633",
},
{
name: "已确权",
color: "#6EDEE1",
ts: "22",
mj: "3109",
},
{
name: "已备案",
color: "#8ADC88",
ts: "3",
mj: "409",
},
{
name: "预抵押",
color: "#F2AD67",
ts: "11",
mj: "1466",
},
{
name: "在建抵押",
color: "#F191C8",
ts: "13",
mj: "1792",
},
{
name: "抵押",
color: "#FF8282",
ts: "14",
mj: "13",
},
{
name: "查封",
color: "#D7CECF",
ts: "9",
mj: "1436",
},
{
name: "异议",
color: "#D4A3EB",
ts: "34",
mj: "4342",
},
{
name: "限制",
color: "#A5A3FB",
ts: "2",
mj: "285",
},
],
fwxzList: [],
fwytList: [],
qsxList: [],
legendToggleFlag: false,
lpbContentHight: "",
lpbContentwidth: "",
time: "",
dyztBsmList: {}, //单元状态bsmList
bjztFlag: true,
qsztList: [],
};
},
created () {
window.addEventListener("resize", this.getHeight);
name: "lpb",
props: {
formData: {
type: Object,
default: {},
},
},
components: {
lpbContent,
selectZrzH,
},
data() {
return {
activeName: "first",
bsms: [],
dialogVisible: false,
scyclx: "0", //1是实测 0是预测
menuType: "",
selectedZt: "dyzt", //图例选中项，默认选中单元状态
dyztList: [
{
name: "未确权",
color: "#83AAFE",
ts: "12",
mj: "1633",
},
{
name: "已确权",
color: "#6EDEE1",
ts: "22",
mj: "3109",
},
{
name: "已备案",
color: "#8ADC88",
ts: "3",
mj: "409",
},
{
name: "预抵押",
color: "#F2AD67",
ts: "11",
mj: "1466",
},
{
name: "在建抵押",
color: "#F191C8",
ts: "13",
mj: "1792",
},
{
name: "抵押",
color: "#FF8282",
ts: "14",
mj: "13",
},
{
name: "查封",
color: "#D7CECF",
ts: "9",
mj: "1436",
},
{
name: "异议",
color: "#D4A3EB",
ts: "34",
mj: "4342",
},
{
name: "限制",
color: "#A5A3FB",
ts: "2",
mj: "285",
},
],
fwxzList: [],
fwytList: [],
qsxList: [],
legendToggleFlag: false,
lpbContentHight: "",
lpbContentwidth: "",
time: "",
dyztBsmList: {}, //单元状态bsmList
bjztFlag: true,
qsztList: [],
};
},
created() {
window.addEventListener("resize", this.getHeight);
console.log(this.formData);
this.getHeight();
},
mounted () {
//获取各项单元状态的户bsm
// this.getDyztBsmList();
//获取房屋用途统计数据
this.getLpbFwytAndQlxz();
// 楼盘表绘制区域宽度计算：楼盘表区域宽度-图例宽度34-滚动条宽度6
setTimeout(() => {
this.lpbContentwidth = ((document.documentElement.clientWidth || document.body.clientWidth) - 340) - 34 - 6;
}, 100);
},
methods: {
/* handleTabClick(event){
this.getHeight();
},
mounted() {
//获取各项单元状态的户bsm
this.getDyztBsmList();
//获取房屋用途统计数据
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",
......@@ -228,284 +314,264 @@ export default {
})
}
},*/
//获取高度计算lpb内容区高度
getHeight () {
this.lpbContentHight = window.innerHeight - 190;
},
//图例的展开收起
legendToggle () {
this.legendToggleFlag = !this.legendToggleFlag;
},
//切换房屋状态
handleChoosedH (bsms, color) {
//每次切换房屋状态，将之前高亮的户边框颜色重置为默认
this.$refs.lpbContent.choosedList = [];
this.$refs.lpbContent.$refs.hBsm.forEach((item) => {
item.style.border = '';
item.className = '';
});
this.bsms = bsms;
//清除选中户
this.$nextTick(() => {
//给hBsmList传值
// console.log(bsms,'bsms');
this.$refs.lpbContent.choosedList = bsms;
this.$refs.lpbContent.borderColor = color;
})
},
//获取各项单元状态统计数据
getDyztBsmList () {
let data = {
zrzbsm: 'ca71bcc498794a1e0ec3ac93869719f6',
scyclx: 1,
};
getLpbTj(data).then((res) => {
if (res.code === 200) {
this.dyztList = res.result;
this.dyztList.splice(1, 0, this.dyztList[8]);
this.dyztList.pop();
this.dyztList.forEach(item => {
item.ts = item.bsms.length;
switch (item.name) {
case 'Qqzt':
item.color = "#6EDEE1";
item.name = "已确权"
break;
case 'Wqqzt':
item.color = "#83AAFE";
item.name = "未确权"
break;
case 'Bazt':
item.color = "#8ADC88";
item.name = "已备案"
break;
case 'Ydyzt':
item.color = "#F2AD67";
item.name = "预抵押"
break;
case 'Zjgcdyzt':
item.color = "#F191C8";
item.name = "在建抵押"
break;
case 'Dyzt':
item.color = "#FF8282";
item.name = "抵押"
break;
case 'Cfzt':
item.color = "#D7CECF";
item.name = "查封"
break;
case 'Yyzt':
item.color = "#D4A3EB";
item.name = "异议"
break;
case 'Xzzt':
item.color = "#A5A3FB";
item.name = "限制"
break;
default:
break;
}
})
}
});
},
// 获取房屋用途和房屋性质及缺失项统计数据
getLpbFwytAndQlxz () {
getLpbFwytAndQlxz('ca71bcc498794a1e0ec3ac93869719f6').then((res) => {
if (res.code === 200) {
// this.fwytList = res.result
this.fwytList = res.result.fwyt;
this.fwxzList = res.result.qlxz;
if (this.fwytList.length > 0) {
this.fwytList.forEach(item => {
item.color = "#2591FD";
item.ts = item.bsms.length
})
}
if (this.fwxzList.length > 0) {
this.fwxzList.forEach(item => {
item.color = "#2591FD";
item.ts = item.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 () {
window.removeEventListener("resize", this.getHeight);
},
watch: {
//树结构和图例伸缩时修改楼盘表主要内容区宽度
legendToggleFlag (n) {
if (n) {
this.lpbContentwidth -= 204;
} else {
this.lpbContentwidth += 204;
}
},
selectedZt (n) {
this.legendToggleFlag = true;
},
},
//获取高度计算lpb内容区高度
getHeight() {
this.lpbContentHight = window.innerHeight - 190;
},
//图例的展开收起
legendToggle() {
this.legendToggleFlag = !this.legendToggleFlag;
},
//切换房屋状态
handleChoosedH(bsms, color) {
debugger
this.$refs.lpbContent.changeChoosed(bsms, color);
},
//获取各项单元状态统计数据
getDyztBsmList() {
getLpbTj(this.formData.bsm).then((res) => {
if (res.code === 200) {
this.dyztList = res.result;
this.dyztList.splice(1, 0, this.dyztList[8]);
this.dyztList.pop();
this.dyztList.forEach((item) => {
item.ts = item.bsms.length;
switch (item.name) {
case "Qqzt":
item.color = "#6EDEE1";
item.name = "已确权";
break;
case "Wqqzt":
item.color = "#83AAFE";
item.name = "未确权";
break;
case "Bazt":
item.color = "#8ADC88";
item.name = "已备案";
break;
case "Ydyzt":
item.color = "#F2AD67";
item.name = "预抵押";
break;
case "Zjgcdyzt":
item.color = "#F191C8";
item.name = "在建抵押";
break;
case "Dyzt":
item.color = "#FF8282";
item.name = "抵押";
break;
case "Cfzt":
item.color = "#D7CECF";
item.name = "查封";
break;
case "Yyzt":
item.color = "#D4A3EB";
item.name = "异议";
break;
case "Xzzt":
item.color = "#A5A3FB";
item.name = "限制";
break;
default:
break;
}
});
}
});
},
// 获取房屋用途和房屋性质及缺失项统计数据
getLpbFwytAndQlxz() {
getLpbFwytAndQlxz(this.formData.bsm).then((res) => {
if (res.code === 200) {
// this.fwytList = res.result
this.fwytList = res.result.fwyt;
this.fwxzList = res.result.qlxz;
if (this.fwytList.length > 0) {
this.fwytList.forEach((item) => {
item.color = "#2591FD";
item.ts = item.bsms.length;
});
}
if (this.fwxzList.length > 0) {
this.fwxzList.forEach((item) => {
item.color = "#2591FD";
item.ts = item.bsms.length;
});
}
}
});
getLpbQsxtj(this.formData.bsm).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() {
window.removeEventListener("resize", this.getHeight);
},
watch: {
//树结构和图例伸缩时修改楼盘表主要内容区宽度
legendToggleFlag(n) {
if (n) {
this.lpbContentwidth -= 204;
} else {
this.lpbContentwidth += 204;
}
},
selectedZt(n) {
this.legendToggleFlag = true;
},
},
};
</script>
<style scoped lang="scss">
table {
border-width: 0;
border-collapse: collapse;
border-spacing: 0;
}
.edit {
height: 100%;
background-color: #F4F9FF;
.tab-content {
border: 1px solid #dedede;
background-color: #ffffff;
display: flex;
&::-webkit-scrollbar {
width: 1px;
}
.lp-tree {
height: 100%;
overflow: hidden;
transition: 0.5s;
.treeData {
margin-top: 20px;
margin-left: 26px;
float: left;
}
}
.w0 {
width: 0;
}
.w260 {
width: 260px;
}
.lp-overview {
transition: 0.5s;
flex: 1;
border: 1px solid rgb(236, 236, 236);
border-top: 0;
border-bottom: 0;
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;
line-height: 40px;
text-align: center;
background-color: #0091ff;
color: #fff;
border-bottom: 1px solid #e6e6e6;
}
.dyzt,
.fwxz,
.fwyt,
.qsx {
height: 122px;
}
.dyzt,
.fwxz,
.fwyt,
.qsx {
cursor: pointer;
border-bottom: 1px solid #e6e6e6;
border-left: 1px solid #e6e6e6;
span {
text-align: center;
height: 100%;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
line-height: 34px;
letter-spacing: 2px;
}
}
.selectedZt {
background-color: #0091ff;
color: #fff;
}
}
height: 100%;
background-color: #f4f9ff;
.tab-content {
border: 1px solid #dedede;
background-color: #ffffff;
display: flex;
&::-webkit-scrollbar {
width: 1px;
}
.lp-tree {
height: 100%;
overflow: hidden;
transition: 0.5s;
.treeData {
margin-top: 20px;
margin-left: 26px;
float: left;
}
}
.w0 {
width: 0;
}
.w260 {
width: 260px;
}
.lp-overview {
transition: 0.5s;
flex: 1;
border: 1px solid rgb(236, 236, 236);
border-top: 0;
border-bottom: 0;
margin-right: 10px;
box-sizing: border-box;
}
.legendTable-wrap {
transition: 0.5s;
float: right;
overflow: hidden;
.legendTable {
margin-top: -1px;
border-color: #e4ebf4 !important;
border-collapse: collapse;
border-spacing: 0;
tr {
height: 40px;
line-height: 40px;
th:first-child {
width: 80px;
}
th {
width: 60px;
height: 40px;
white-space: nowrap;
}
td {
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 {
text-align: left;
text-indent: 2px;
}
}
}
}
}
}
.lp-legend {
transition: 0.5s;
height: 100%;
font-size: 14px;
.handleCol {
width: 34px;
float: right;
height: 100%;
.btn {
cursor: pointer;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #5a78de;
color: #fff;
border-bottom: 1px solid #e6e6e6;
}
.dyzt,
.fwxz,
.fwyt,
.qsx {
height: 122px;
}
.dyzt,
.fwxz,
.fwyt,
.qsx {
cursor: pointer;
border-bottom: 1px solid #e6e6e6;
border-left: 1px solid #e6e6e6;
span {
text-align: center;
height: 100%;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
line-height: 34px;
letter-spacing: 2px;
}
}
.selectedZt {
// background-color: #5A78DE;
color: #3d59c4;
}
}
.legendTable-wrap {
transition: 0.5s;
float: right;
overflow: hidden;
.legendTable {
margin-top: -1px;
.fa-circle {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
vertical-align: middle;
margin-right: 4px;
}
tr {
height: 40px;
line-height: 40px;
border-color: #d8e0ea !important;
th:first-child {
width: 80px;
}
th {
width: 60px;
height: 40px;
white-space: nowrap;
background-color: #eceef2;
}
td {
height: 40px;
text-align: center;
white-space: nowrap;
}
td:first-child {
text-align: left;
text-indent: 2px;
}
}
}
}
}
}
}
</style>
......
......@@ -2,7 +2,7 @@
* @Author: yangwei
* @Date: 2023-02-28 15:47:12
* @LastEditors: yangwei
* @LastEditTime: 2023-03-02 16:35:36
* @LastEditTime: 2023-06-16 16:14:51
* @FilePath: \bdcdj-web\src\views\lpb\lpbContent\ch.vue
* @Description:
*
......@@ -37,7 +37,7 @@
:data-qszt="hs.qszt"
ref="hBsm"
:key="hsIndex"
style="border-color: rgb(230, 230, 230)"
:style="{'border-color': borderColor}"
:class="hs.select ? 'tdSelect' : ''"
@click="handleClickH($event.target, hs.bsm, hs)"
@dblclick="dbclick(hs.bsm)"
......@@ -82,7 +82,12 @@
<script>
export default {
name: "BdcdjWebCh",
inject: ["openMenu", "selectAll"],
inject: {
openMenu:{value:'openMenu',default:null},
selectAll:{value:'selectAll',default:null},
changeChoosedObj:{value:'changeChoosedObj',default:null},
clearChangeChoosedObj:{value:'clearChangeChoosedObj',default:null}
},
props: {
ch: {
type: Array,
......@@ -101,6 +106,8 @@ export default {
hqsztList: [],
//区分单双击事件的定时器
time: null,
// 边框颜色
borderColor:'rgb(230, 230, 230)'
};
},
mounted() {},
......@@ -108,48 +115,32 @@ export default {
// 层选中事件
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);
}
// 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);
// this.handleClickH(e.target.parentNode, bsm, hs);
},
//户双击事件
dbclick(bsm) {
clearTimeout(this.time);
// clearTimeout(this.time);
},
//幢单元全选/反选
zdySelectAll(val) {
zdySelectAll(val,flag) {
// 手动点击全部取消选中
!flag && this.clearChangeChoosedObj()
this.ch.forEach((c) => {
c.hs.forEach((h) => {
if (val) {
......@@ -158,10 +149,16 @@ export default {
this.hbsmList.push(h.bsm)
} else {
h.select = false;
this.borderColor = 'rgb(230, 230, 230)'
this.hbsmList = []
}
});
});
this.$refs.hBsm && this.$refs.hBsm.forEach((item) => {
// item.style.borderColor = this.borderColor
item.style.backgroundColor = '#fff';
// item.style.border = `1px solid ${this.borderColor}`
});
},
},
watch: {
......@@ -172,6 +169,34 @@ export default {
immediate: true,
deep: true,
},
changeChoosedObj: {
handler(val) {
debugger
//清除选中户
this.borderColor = 'rgb(230, 230, 230)';
this.zdySelectAll(false,true)
if (val.bsms.length) {
this.$refs.hBsm.forEach((item) => {
val.bsms.forEach((i,ind) => {
if (item.dataset.bsm == i) {
if (ind == 0) {
//定位到第一个户所在位置
window.lpbContent.$refs.lpbContent.scrollTop = item.offsetTop;
window.lpbContent.$refs.lpbContent.scrollLeft = item.offsetLeft;
}
item.style.border = '1px solid '+ val.color;
// item.style.backgroundColor = val.color;
}
});
});
}else{
this.borderColor = 'rgb(230, 230, 230)'
}
},
immediate: true,
deep: true,
},
},
};
</script>
......@@ -181,16 +206,26 @@ export default {
display: flex;
flex-direction: column-reverse;
.chTable {
margin-left: -1px;
// margin-left: -1px;
border-color: #e4ebf4 !important;
border-collapse: collapse;
border-spacing: 0;
// position: relative;
tr {
.floor {
min-width: 56px;
background: #e8f2ff;
border: 1px solid #acbae8;
}
&:first-child {
.floor {
border-radius: 4px 0px 0px 1px;
}
}
td {
min-width: 138px;
height: 72px;
line-height: 72px;
height: 64px;
line-height: 64px;
text-align: center;
cursor: pointer;
position: relative;
......@@ -204,7 +239,7 @@ export default {
left: 6px;
top: 6px;
border: 1px solid;
border-radius: 8px;
border-radius: 3px 0px 3px 0px;
}
.lin {
color: #f7b500;
......@@ -223,7 +258,7 @@ export default {
width: 138px;
height: 18px;
position: absolute;
bottom: 32px;
bottom: 28px;
box-sizing: border-box;
padding: 0 6px;
li {
......@@ -239,7 +274,8 @@ export default {
}
}
.tdSelect {
border: 1px solid #006cff !important;
border: 1px solid ;
border-color: #5A78DE !important;
background-image: url("./images/tdSelect.png");
background-repeat: no-repeat;
background-position: right top;
......
<template>
<div class="lpbContent-wrap" ref="lpbContentWrap">
<div class="lpbContent">
<div class="lpbContent" ref="lpbContent">
<!-- 纵向倒序排列 逻辑幢位于独立幢单元和独立层户的上方 -->
<div class="ch-zdy-wrap">
<!-- 幢单元 -->
......@@ -13,9 +13,10 @@
</div>
<!-- 自然幢名称 -->
<p class="lpb-xmmc">
<el-checkbox @change="zdySelectAll($event)">{{
<!-- <el-checkbox @change="zdySelectAll($event)">{{
lpbData.xmmc
}}</el-checkbox>
}}</el-checkbox> -->
{{lpbData.xmmc}}
</p>
<!-- 右键菜单 -->
<ul
......@@ -38,6 +39,8 @@ export default {
return {
openMenu: this.openMenu,
selectAll: this.selectAllObj,
changeChoosedObj:this.changeChoosedObj,
clearChangeChoosedObj:this.clearChangeChoosedObj
};
},
name: "",
......@@ -72,20 +75,27 @@ export default {
//右键菜单定位位置
lpbChLeft: 100,
lpbChTop: 100,
// 改变户选中状态
changeChoosedObj:{
bsms:[],
color:''
}
};
},
mounted() {
this.getLpb("dfc08a0cc6a25188990ea53d1d2c500e");
// setTimeout(() => {
// //让滚动条滚动至最下面 -6是横向滚动条的高度
// this.$refs.lpbContent.scrollTop =
// this.$refs.lpbContent.scrollHeight -
// this.$refs.lpbContent.clientHeight -
// 6;
// }, 200);
// window.lpbContent = this;
this.getLpb(this.zrzbsm);
window.lpbContent = this;
},
methods: {
// 改变户选中状态
changeChoosed(bsms, color){
debugger
this.changeChoosedObj.bsms = bsms;
this.changeChoosedObj.color = color;
},
clearChangeChoosedObj(){
this.changeChoosedObj.bsms = [];
},
//全选户
zdySelectAll(val) {
this.selectAllObj.selectAll = val;
......@@ -113,7 +123,7 @@ export default {
openMenu(e, item, type) {
this.lpbChLeft = e.pageX - 96;
this.lpbChTop = e.pageY - 23;
this.lpbChVisible = true;
// this.lpbChVisible = true;
},
//关闭户右键菜单
closeMenu() {
......
......@@ -10,7 +10,7 @@
-->
<template>
<div class="ljzs-wrap">
<div v-for="ljzarr in ljzsCptd" :key="ljzarr[0].bsm">
<div v-for="ljzarr in ljzsCptd" :style="{'margin-bottom': ljzarr.length == 1 ? '34px':'80px'}" :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">
......@@ -94,7 +94,7 @@ export default {
display: flex;
flex-direction: column-reverse;
> div {
margin-bottom: 80px;
// margin-bottom: 80px;
margin-right: 20px;
display: flex;
flex-direction: column;
......@@ -110,8 +110,8 @@ export default {
}
.ljz-xmmc {
position: absolute;
width: calc(100% + 1px);
bottom: -60px;
width: calc(100% - 4px);
bottom: -34px;
}
}
.cs-none {
......
......@@ -2,7 +2,7 @@
* @Author: yangwei
* @Date: 2023-02-28 16:29:04
* @LastEditors: yangwei
* @LastEditTime: 2023-03-02 14:45:19
* @LastEditTime: 2023-06-08 13:58:58
* @FilePath: \bdcdj-web\src\views\lpb\lpbContent\zdys.vue
* @Description:
*
......@@ -13,9 +13,10 @@
<div v-for="zdy in realZdys" :key="zdy.bsm">
<!-- 幢单元名称 -->
<p class="lpb-xmmc">
<el-checkbox @change="zdySelectAll($event,zdy.bsm)">{{
<!-- <el-checkbox @change="zdySelectAll($event,zdy.bsm)">{{
zdy.zdymc
}}</el-checkbox>
}}</el-checkbox> -->
{{zdy.zdymc}}
</p>
<!-- 每个幢单元下的层户 -->
<ch-cpn :ref="zdy.bsm" :ch="zdy.cs" />
......