楼盘表右侧图例单元状态统计

杨威
Showing 4 changed files with 105 additions and 19 deletions
src/api/lpb.js
src/assets/less/main.less
src/views/systemZRZ/lpb/bjlp/index.vue
src/views/systemZRZ/lpb/bjlp/lpbContent/index.vue
--- a/src/api/lpb.js
View file @9312898
+++ b/src/api/lpb.js
View file @9312898
@@ -65,4 +65,16 @@ export function batchScYcChange (data) {
        method: 'post',
        data:data
    })
+}
+/**
+ * 楼盘表 获取单元状态统计数据
+ * zrzbsm 自然幢标识码 ,
+ * scyclx 实测预测类型   0预测，1实测
+ */
+export function getLpbTj (data) {
+    return request({
+        url: 'fw/lpb/getLpbTj?zrzbsm='+data.zrzbsm+'&syclx='+data.syclx,
+        method: 'get',
+        data:data
+    })
 }
\ No newline at end of file
--- a/src/assets/less/main.less
View file @9312898
+++ b/src/assets/less/main.less
View file @9312898
@@ -31,6 +31,9 @@
 .fr{
    float: right;
 }
+.tac{
+    text-align: center!important;
+}
 table{
    border-width: 0;
 }
--- a/src/views/systemZRZ/lpb/bjlp/index.vue
View file @9312898
+++ b/src/views/systemZRZ/lpb/bjlp/index.vue
View file @9312898
@@ -76,7 +76,7 @@
 							<th>套数</th>
 							<th>面积</th>
 						</tr>
-						<tr v-for="(item, index) in legendList" :key="index" class="cp" @click="handleChoosedH">
+						<tr v-for="(item, index) in dyztList" :key="index" class="cp" @click="handleChoosedH(item.name)">
 							<td>
 								<i class="el-icon-star-on" :style="{ color: item.color }"></i
 								>{{ item.name }}
@@ -91,7 +91,7 @@
 							<th>套数</th>
 							<th>面积</th>
 						</tr>
-						<tr v-for="(item, index) in legendList" :key="index" class="cp" @click="handleChoosedH">
+						<tr v-for="(item, index) in fwxzList" :key="index" class="cp" @click="handleChoosedH(item.name)">
 							<td>
 								<i class="el-icon-star-on" :style="{ color: item.color }"></i
 								>{{ item.name }}
@@ -99,6 +99,9 @@
 							<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>
@@ -106,7 +109,7 @@
 							<th>套数</th>
 							<th>面积</th>
 						</tr>
-						<tr v-for="(item, index) in legendList" :key="index" class="cp" @click="handleChoosedH">
+						<tr v-for="(item, index) in fwytList" :key="index" class="cp" @click="handleChoosedH(item.name)">
 							<td>
 								<i class="el-icon-star-on" :style="{ color: item.color }"></i
 								>{{ item.name }}
@@ -114,6 +117,9 @@
 							<td>{{ item.ts }}</td>
 							<td>{{ item.mj }}</td>
 						</tr>
+						<tr v-show="fwytList.length<1">
+							<td colspan="3" class="tac">暂无数据</td>
+						</tr>
 					</table>
 				</div>
 			</div>
@@ -167,7 +173,7 @@ import addZdy from "./zdy/index";
 import addCh from "./ch/index";
 import hbj from "./hbj/index"
 import lpbContent from "./lpbContent/index";
-import {getLpbMenuTree,batchScYcChange} from "../../../../api/lpb";
+import {getLpbMenuTree,batchScYcChange,getLpbTj} from "../../../../api/lpb";
 export default {
@@ -195,7 +201,7 @@ export default {
 			treeData: {},
 			inputWidth:74,
 			selectedZt:'dyzt', //图例选中项，默认选中单元状态
-			legendList: [
+			dyztList: [
 				{
 					name: "未确权",
 					color: "#2591FD",
@@ -209,12 +215,6 @@ export default {
 					mj: "3109",
 				},
 				{
-					name: "已注销",
-					color: "#2591FD",
-					ts: "13",
-					mj: "1457",
-				},
-				{
 					name: "已备案",
 					color: "#2591FD",
 					ts: "3",
@@ -257,10 +257,13 @@ export default {
 					mj: "285",
 				},
 			],
+			fwxzList:[],
+			fwytList:[],
 			legendToggleFlag: false,
 			lpbContentHight: "",
 			lpbContentwidth: "",
-			time:''
+			time:'',
+			dyztBsmList:{},//单元状态bsmList
 		};
 	},
 	created() {
@@ -268,8 +271,10 @@ export default {
 		this.getHeight();
 	},
 	mounted() {
-		// this.getLpbMenuTree("1e0c83dfe2e73284f834a80a0947f0c9");
+		//获取楼盘表树结构
 		this.getLpbMenuTree(this.$store.state.zrzbsm);
+		//获取各项单元状态的户bsm
+		this.getDyztBsmList();
 		// 楼盘表绘制区域宽度计算：楼盘表区域宽度-图例宽度34-滚动条宽度6
 		setTimeout(() => {
 			this.lpbContentwidth = this.$store.state.contentWidth - 34 - 6;
@@ -412,16 +417,82 @@ export default {
 			})
 		},
 		//选中房屋状态
-		handleChoosedH(){
+		handleChoosedH(name){
+			console.log(name,'选中房屋状态');
+			// Dyzt:{list:[],mj:''}
 			//清除选中户
 			this.$refs.lpbContent.clearChoosedH()
 			//给hBsmList传值
+			switch (name) {
+				case '未确权':
+					this.$refs.lpbContent.choosedList = this.dyztBsmList.Wqqzt.bsms;
+					break;
+				case '已确权':
+					this.$refs.lpbContent.choosedList = this.dyztBsmList.Qqzt.bsms;
+					break;
+				case '已备案':
+					this.$refs.lpbContent.choosedList = this.dyztBsmList.Bazt.bsms;
+					break;
+				case '预抵押':
+					this.$refs.lpbContent.choosedList = this.dyztBsmList.Ydyzt.bsms;
+					break;
+				case '在建抵押':
+					this.$refs.lpbContent.choosedList = this.dyztBsmList.Zjgcdyzt.bsms;
+					break;
+				case '抵押':
+					this.$refs.lpbContent.choosedList = this.dyztBsmList.Dyzt.bsms;
+					break;
+				case '查封':
+					this.$refs.lpbContent.choosedList = this.dyztBsmList.Cfzt.bsms;
+					break;
+				case '异议':
+					this.$refs.lpbContent.choosedList = this.dyztBsmList.Yyzt.bsms;
+					break;
+				case '限制':
+					this.$refs.lpbContent.choosedList = this.dyztBsmList.Xzzt.bsms;
+					break;
+				default:
+					break;
+			}
 			// this.$refs.lpbContent.choosedList=["0a66bc775dcec26385f9124cc0fd8656", "58cafdbee129bb412527f674ef9267ae", "4bbca678fa56d5ab97b8a62c7cb54898", "ecfd72e9a31a03ba0ab4e46faba2b51b", "049033ea9d244b4b5ea75521b6862239", "013352d8a001a1d5f790296b6843627b", "ed8e3f0e2b2682cf76b4d58b9a74e49c", "37cc53acaf2c3bb92be4b9adf06d94c9", "f5a5e14ce08c26056aca5861f56e5cf6", "11eeaaa5c9f5f1231c69d3b958d05568", "421978023a36d4920dbb86300cc52dc9", "e97f2af2588cc0e41ffb6b203df617c9", "7210987d94350472dca10d4ad71fffc5", "6eb1b50edce538a4c63574e9e28fedce", "43c5fecd7623ceabc37844e8a4722603", "c361ccfcd3da9f7288110c6fa202cb96", "2321512f6f8d0ec9f570c6eec9a892fe", "ea08fb234cd908c89a0d21c085dadb2f", "be71f7f0ec926e1850d3baec8817cdbd", "6f695d6b7ecb97f7ff17f22dbe86b93c", "4ee1604b2629e6797d3096c20229223b"]
 		},
 		//批量添加不动产单元号
 		addBdcdyh(){
 			// this.pd[0].bsm //自然幢标识码
 			console.log(this.$store.state.zrzh,'this.$store.state.zrzh'); 
+		},
+		//获取各项单元状态的户bsm
+		getDyztBsmList(){
+			let data={
+				zrzbsm:this.$store.state.zrzbsm,
+				syclx:"0"
+			}
+			getLpbTj(data).then((res)=>{
+				if(res.code===200){
+					this.dyztBsmList = res.result;
+					//给单元状态图例数据dyztList赋值
+					this.dyztList[0].mj = res.result.Wqqzt.mj
+					this.dyztList[0].ts = res.result.Wqqzt.bsms.length
+					this.dyztList[1].mj = res.result.Qqzt.mj
+					this.dyztList[1].ts = res.result.Qqzt.bsms.length
+					this.dyztList[2].mj = res.result.Bazt.mj
+					this.dyztList[2].ts = res.result.Bazt.bsms.length
+					this.dyztList[3].mj = res.result.Ydyzt.mj
+					this.dyztList[3].ts = res.result.Ydyzt.bsms.length
+					this.dyztList[4].mj = res.result.Zjgcdyzt.mj
+					this.dyztList[4].ts = res.result.Zjgcdyzt.bsms.length
+					this.dyztList[5].mj = res.result.Dyzt.mj
+					this.dyztList[5].ts = res.result.Dyzt.bsms.length
+					this.dyztList[6].mj = res.result.Cfzt.mj
+					this.dyztList[6].ts = res.result.Cfzt.bsms.length
+					this.dyztList[7].mj = res.result.Yyzt.mj
+					this.dyztList[7].ts = res.result.Yyzt.bsms.length
+					this.dyztList[8].mj = res.result.Xzzt.mj
+					this.dyztList[8].ts = res.result.Xzzt.bsms.length
+					console.log(res,'各项单元状态的户bsmList');
+				}
+			})
 		}
 	},
 	computed: {
--- a/src/views/systemZRZ/lpb/bjlp/lpbContent/index.vue
View file @9312898
+++ b/src/views/systemZRZ/lpb/bjlp/lpbContent/index.vue
View file @9312898
@@ -293,11 +293,11 @@ export default {
 		//父组件中选择单元状态改变choosedList
 		choosedList(n){
 			this.$refs.hBsm.forEach(item=>{
-					this.choosedList.forEach(i=>{
+				this.choosedList.forEach(i=>{
-						if(item.dataset.bsm == i){
+					if(item.dataset.bsm == i){
-							item.className = 'tdSelect'
+						item.className = 'tdSelect'
-						}
+					}
-					})
+				})
 			})
 		}
 	},