Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
21c04667 by 杨威
Options

根据房屋状态标记的不同颜色改变选中户的边框颜色

1 parent 7fcc0686
Inline Side-by-side
Showing 3 changed files with 388 additions and 210 deletions
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
37 table{ 37 table{
38 border-width: 0; 38 border-width: 0;
39 } 39 }
40 table,td,tr,.el-col,.title{ 40 table,tr,.el-col,.title{
41 border-color: #E6E6E6 !important; 41 border-color: #E6E6E6 !important;
42 } 42 }
43 .el-table th{ 43 .el-table th{
......
...@@ -138,7 +138,7 @@ ...@@ -138,7 +138,7 @@
138 v-for="(item, index) in dyztList" 138 v-for="(item, index) in dyztList"
139 :key="index" 139 :key="index"
140 class="cp" 140 class="cp"
141 @click="handleChoosedH(item.bsms)" 141 @click="handleChoosedH(item.bsms,item.color)"
142 > 142 >
143 <td> 143 <td>
144 <i class="fa fa-circle" :style="{ color: item.color }"></i 144 <i class="fa fa-circle" :style="{ color: item.color }"></i
...@@ -165,7 +165,7 @@ ...@@ -165,7 +165,7 @@
165 v-for="(item, index) in fwxzList" 165 v-for="(item, index) in fwxzList"
166 :key="index" 166 :key="index"
167 class="cp" 167 class="cp"
168 @click="handleChoosedH(item.bsms)" 168 @click="handleChoosedH(item.bsms,item.color)"
169 > 169 >
170 <td> 170 <td>
171 <i class="fa fa-circle" :style="{ color: item.color }"></i 171 <i class="fa fa-circle" :style="{ color: item.color }"></i
...@@ -195,7 +195,7 @@ ...@@ -195,7 +195,7 @@
195 v-for="(item, index) in fwytList" 195 v-for="(item, index) in fwytList"
196 :key="index" 196 :key="index"
197 class="cp" 197 class="cp"
198 @click="handleChoosedH(item.bsms)" 198 @click="handleChoosedH(item.bsms,item.color)"
199 > 199 >
200 <td> 200 <td>
201 <i class="fa fa-circle" :style="{ color: item.color }"></i 201 <i class="fa fa-circle" :style="{ color: item.color }"></i
...@@ -596,14 +596,23 @@ export default { ...@@ -596,14 +596,23 @@ export default {
596 } 596 }
597 }); 597 });
598 }, 598 },
599 //选中房屋状态 599 //切换房屋状态
600 handleChoosedH(bsms) { 600 handleChoosedH(bsms,color) {
601 console.log(bsms,'bsms'); 601 //每次切换房屋状态，将之前高亮的户边框颜色重置为默认
602 this.$refs.lpbContent.choosedList = [];
603 this.$refs.lpbContent.$refs.hBsm.forEach((item) => {
604 item.style.borderColor = '#E6E6E6';
605 });
606 // console.log(bsms,'bsms');
607 // console.log(color,'color');
602 // Dyzt:{list:[],mj:''} 608 // Dyzt:{list:[],mj:''}
603 //清除选中户 609 //清除选中户
604 this.$refs.lpbContent.clearChoosedH(); 610 // this.$refs.lpbContent.clearChoosedH();
605 //给hBsmList传值 611 this.$nextTick(()=>{
606 this.$refs.lpbContent.choosedList = bsms; 612 //给hBsmList传值
613 this.$refs.lpbContent.choosedList = bsms;
614 this.$refs.lpbContent.borderColor = color;
615 })
607 }, 616 },
608 //批量添加不动产单元号 617 //批量添加不动产单元号
609 addBdcdyh() { 618 addBdcdyh() {
......
1 <template> 1 <template>
2 <div class="lpbContent-wrap" ref="lpbContentWrap"> 2 <div class="lpbContent-wrap" ref="lpbContentWrap">
3 <div :class="lpbData.ljzs.length == 0 ? 'column-reverse lpbContent':'lpbContent'" ref="lpbContent" v-loading='loading'> 3 <div
4 <div :class="(lpbData.cs.length == 0 && lpbData.zdys.length == 0) ? 'bottom40 ljz-wrap':'ljz-wrap'" v-show="lpbData.ljzs.length>0"> 4 :class="
5 lpbData.ljzs.length == 0 ? 'column-reverse lpbContent' : 'lpbContent'
6 "
7 ref="lpbContent"
8 v-loading="loading"
9 >
10 <div
11 :class="
12 lpbData.cs.length == 0 && lpbData.zdys.length == 0
13 ? 'bottom40 ljz-wrap'
14 : 'ljz-wrap'
15 "
16 v-show="lpbData.ljzs.length > 0"
17 >
5 <!-- 循环逻辑幢数据 --> 18 <!-- 循环逻辑幢数据 -->
6 <div class="ljz" ref="ljz" v-for="(ljzs,ljzIndex) in lpbData.ljzs" :key="ljzIndex"> 19 <div
20 class="ljz"
21 ref="ljz"
22 v-for="(ljzs, ljzIndex) in lpbData.ljzs"
23 :key="ljzIndex"
24 >
7 <!-- <div class="ljz-zdy-wrap" :style="{'min-height':ljzzdyHeight+40+'px'}"> --> 25 <!-- <div class="ljz-zdy-wrap" :style="{'min-height':ljzzdyHeight+40+'px'}"> -->
8 <!-- 循环逻辑幢下的幢单元 --> 26 <!-- 循环逻辑幢下的幢单元 -->
9 <div class="ljz-zdy" :style="{'min-height':ljzzdyHeight+40+'px'}" ref="ljzzdy" v-show="ljzs.zdys.length>0" v-for="(zdys,zdyIndex) in ljzs.zdys" :key="zdyIndex" > 27 <div
10 <!-- 循环幢单元下的层户 --> 28 class="ljz-zdy"
11 <!-- <div class="chTable-wrap"> --> 29 :style="{ 'min-height': ljzzdyHeight + 40 + 'px' }"
12 <table class="chTable psr" :style="{'top':(ljzzdyHeight-1-zdys.cs.length*65)+'px'}" border="1" cellspacing="0" cellpadding="0" v-show="zdys.cs.length>0"> 30 ref="ljzzdy"
13 <tr v-for="(cs,csIndex) in zdys.cs" :key="csIndex"> 31 v-show="ljzs.zdys.length > 0"
14 <!-- 显示层数 --> 32 v-for="(zdys, zdyIndex) in ljzs.zdys"
15 <td class="floor" ref="cBsm" @contextmenu.prevent="openMenu($event, cs,'c')" @click="handleClickC($event,cs)">{{cs.sjc}}层</td> 33 :key="zdyIndex"
16 <!-- 显示户 --> 34 >
17 <td v-for="(hs,hsIndex) in cs.hs" :data-bsm="hs.bsm" ref="hBsm" :key="hsIndex" :class="(searchNum == hs.shbw || searchNum == hs.bdcdyh) ? 'tdSelect':''" @click="handleTdClick($event,hs.bsm)" @dblclick="dbclick(hs.bsm)" @contextmenu.prevent="openMenu($event, hs,'h')">{{hs.shbw}}</td> 35 <!-- 循环幢单元下的层户 -->
18 </tr> 36 <!-- <div class="chTable-wrap"> -->
19 </table> 37 <table
20 <!-- </div> --> 38 class="chTable psr"
21 <!-- 幢单元名称 --> 39 :style="{ top: ljzzdyHeight - 1 - zdys.cs.length * 65 + 'px' }"
22 <div class="zdy-name name"> 40 border="1"
23 {{zdys.zdymc}} 41 cellspacing="0"
24 </div> 42 cellpadding="0"
25 </div> 43 v-show="zdys.cs.length > 0"
26 <!-- 循环逻辑幢下的层户 --> 44 >
27 <div class="ljz-ch" :style="{'height':'auto'}" v-if="ljzs.cs.length>0"> 45 <tr v-for="(cs, csIndex) in zdys.cs" :key="csIndex">
28 <table class="chTable" :style="{'top':(ljzzdyHeight+40-1-ljzs.cs.length*65)<0? 0:(ljzzdyHeight+40-1-ljzs.cs.length*65) +'px'}" border="1" cellspacing="0" cellpadding="0"> 46 <!-- 显示层数 -->
29 <tr v-for="(cs) in ljzs.cs" :key="cs.bsm"> 47 <td
30 <!-- 显示层数 --> 48 class="floor"
31 <td class="floor" ref="cBsm" @contextmenu.prevent="openMenu($event, cs,'c')" @click="handleClickC($event,cs)">{{cs.sjc}}层</td> 49 ref="cBsm"
32 <!-- 显示户 --> 50 @contextmenu.prevent="openMenu($event, cs, 'c')"
33 <td v-for="(hs,hsIndex) in cs.hs" :data-bsm="hs.bsm" ref="hBsm" :key="hsIndex" :class="(searchNum == hs.shbw || searchNum == hs.bdcdyh) ? 'tdSelect':''" @click="handleTdClick($event,hs.bsm)" @dblclick="dbclick(hs.bsm)" @contextmenu.prevent="openMenu($event, hs,'h')">{{hs.shbw}}</td> 51 @click="handleClickC($event, cs)"
34 </tr> 52 >
35 </table> 53 {{ cs.sjc }}层
54 </td>
55 <!-- 显示户 -->
56 <td
57 v-for="(hs, hsIndex) in cs.hs"
58 :rowspan="hs.sjcs"
59 :data-bsm="hs.bsm"
60 ref="hBsm"
61 :key="hsIndex"
62 :class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
63 @click="handleTdClick($event, hs.bsm)"
64 @dblclick="dbclick(hs.bsm)"
65 @contextmenu.prevent="openMenu($event, hs, 'h')"
66 >
67 {{ hs.shbw }}
68 </td>
69 </tr>
70 </table>
71
72 <!-- </div> -->
73 <!-- 幢单元名称 -->
74 <div class="zdy-name name">
75 {{ zdys.zdymc }}
36 </div> 76 </div>
77 </div>
78 <!-- 循环逻辑幢下的层户 -->
79 <div
80 class="ljz-ch"
81 :style="{ height: 'auto' }"
82 v-if="ljzs.cs.length > 0"
83 >
84 <table
85 class="chTable"
86 :style="{
87 top:
88 ljzzdyHeight + 40 - 1 - ljzs.cs.length * 65 < 0
89 ? 0
90 : ljzzdyHeight + 40 - 1 - ljzs.cs.length * 65 + 'px',
91 }"
92 border="1"
93 cellspacing="0"
94 cellpadding="0"
95 >
96 <tr v-for="cs in ljzs.cs" :key="cs.bsm">
97 <!-- 显示层数 -->
98 <td
99 class="floor"
100 ref="cBsm"
101 @contextmenu.prevent="openMenu($event, cs, 'c')"
102 @click="handleClickC($event, cs)"
103 >
104 {{ cs.sjc }}层
105 </td>
106 <!-- 显示户 -->
107 <td
108 v-for="(hs, hsIndex) in cs.hs"
109 :rowspan="hs.sjcs"
110 :data-bsm="hs.bsm"
111 ref="hBsm"
112 :key="hsIndex"
113 :class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
114 @click="handleTdClick($event, hs.bsm)"
115 @dblclick="dbclick(hs.bsm)"
116 @contextmenu.prevent="openMenu($event, hs, 'h')"
117 >
118 {{ hs.shbw }}
119 </td>
120 </tr>
121 </table>
122 </div>
37 <!-- </div> --> 123 <!-- </div> -->
38 124
39 <!-- 逻辑幢名称 --> 125 <!-- 逻辑幢名称 -->
40 <div class="ljz-name name"> 126 <div class="ljz-name name">
41 {{ljzs.ljzmc}} 127 {{ ljzs.ljzmc }}
42 </div> 128 </div>
43 </div> 129 </div>
44 </div> 130 </div>
45 <div class="zdy-wrap" :style="{'width':zdyWidth+'px'}"> 131 <div class="zdy-wrap" :style="{ width: zdyWidth + 'px' }">
46 <!-- 循环自然幢下的幢单元 --> 132 <!-- 循环自然幢下的幢单元 -->
47 <div class="zdy column-reverse" ref="zdy" v-for="(zdys,zdyIndex) in lpbData.zdys" :key="zdyIndex" :style="{'min-height':zdyHeight+'px'}"> 133 <div
134 class="zdy column-reverse"
135 ref="zdy"
136 v-for="(zdys, zdyIndex) in lpbData.zdys"
137 :key="zdyIndex"
138 :style="{ 'min-height': zdyHeight + 'px' }"
139 >
48 <!-- 幢单元名称 --> 140 <!-- 幢单元名称 -->
49 <div class="zdy-name name"> 141 <div class="zdy-name name">
50 {{zdys.zdymc}} 142 {{ zdys.zdymc }}
51 </div> 143 </div>
52 <!-- 循环幢单元下的层户 --> 144 <!-- 循环幢单元下的层户 -->
53 <table class="chTable" border="1" cellspacing="0" cellpadding="0" v-show="zdys.cs.length>0"> 145 <table
54 <tr v-for="(cs,csIndex) in zdys.cs" :key="csIndex"> 146 class="chTable"
147 border="1"
148 cellspacing="0"
149 cellpadding="0"
150 v-show="zdys.cs.length > 0"
151 >
152 <tr v-for="(cs, csIndex) in zdys.cs" :key="csIndex">
55 <!-- 显示层数 --> 153 <!-- 显示层数 -->
56 <td class="floor" ref="cBsm" @contextmenu.prevent="openMenu($event, cs,'c')" @click="handleClickC($event,cs)">{{cs.sjc}}层</td> 154 <td
155 class="floor"
156 ref="cBsm"
157 @contextmenu.prevent="openMenu($event, cs, 'c')"
158 @click="handleClickC($event, cs)"
159 >
160 {{ cs.sjc }}层
161 </td>
57 <!-- 显示户 --> 162 <!-- 显示户 -->
58 <td v-for="(hs,hsIndex) in cs.hs" :data-bsm="hs.bsm" ref="hBsm" :key="hsIndex" :class="(searchNum == hs.shbw || searchNum == hs.bdcdyh) ? 'tdSelect':''" @click="handleTdClick($event,hs.bsm)" @dblclick="dbclick(hs.bsm)" @contextmenu.prevent="openMenu($event, hs,'h')">{{hs.shbw}}</td> 163 <td
164 v-for="(hs, hsIndex) in cs.hs"
165 :rowspan="hs.sjcs"
166 :data-bsm="hs.bsm"
167 ref="hBsm"
168 :key="hsIndex"
169 :class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
170 @click="handleTdClick($event, hs.bsm)"
171 @dblclick="dbclick(hs.bsm)"
172 @contextmenu.prevent="openMenu($event, hs, 'h')"
173 >
174 {{ hs.shbw }}
175 </td>
59 </tr> 176 </tr>
60 </table> 177 </table>
61 </div> 178 </div>
62 <!-- 循环自然幢下的独立层户 --> 179 <!-- 循环自然幢下的独立层户 -->
63 <!-- <template > --> 180 <!-- <template > -->
64 <div class="zdy column-reverse" :style="{'min-height':cHeight+'px'}"> 181 <div
65 <table class="chTable" ref="ch" border="1" cellspacing="0" cellpadding="0" v-show="lpbData.cs != null && lpbData.cs.length>0" > 182 class="zdy column-reverse"
66 <tr v-for="(cs,csIndex) in lpbData.cs" :key="csIndex"> 183 :style="{ 'min-height': cHeight + 'px' }"
184 >
185 <table
186 class="chTable"
187 ref="ch"
188 border="1"
189 cellspacing="0"
190 cellpadding="0"
191 v-show="lpbData.cs != null && lpbData.cs.length > 0"
192 >
193 <tr v-for="(cs, csIndex) in lpbData.cs" :key="csIndex">
67 <!-- 显示层数 --> 194 <!-- 显示层数 -->
68 <td class="floor" ref="cBsm" @contextmenu.prevent="openMenu($event, cs,'c')" @click="handleClickC($event,cs)">{{cs.sjc}}层</td> 195 <td
196 class="floor"
197 ref="cBsm"
198 @contextmenu.prevent="openMenu($event, cs, 'c')"
199 @click="handleClickC($event, cs)"
200 >
201 {{ cs.sjc }}层
202 </td>
69 <!-- 显示户 --> 203 <!-- 显示户 -->
70 <td v-for="(hs,hsIndex) in cs.hs" :data-bsm="hs.bsm" ref="hBsm" :key="hsIndex" :class="(searchNum == hs.shbw || searchNum == hs.bdcdyh) ? 'tdSelect':''" @click="handleTdClick($event,hs.bsm)" @dblclick="dbclick(hs.bsm)" @contextmenu.prevent="openMenu($event, hs,'h')">{{hs.shbw}}</td> 204 <td
205 v-for="(hs, hsIndex) in cs.hs"
206 :rowspan="hs.sjcs"
207 :data-bsm="hs.bsm"
208 ref="hBsm"
209 :key="hsIndex"
210 :class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
211 @click="handleTdClick($event, hs.bsm)"
212 @dblclick="dbclick(hs.bsm)"
213 @contextmenu.prevent="openMenu($event, hs, 'h')"
214 >
215 {{ hs.shbw }}
216 </td>
71 </tr> 217 </tr>
72 </table> 218 </table>
73 </div> 219 </div>
...@@ -75,10 +221,7 @@ ...@@ -75,10 +221,7 @@
75 </div> 221 </div>
76 <!-- <div class="ch-wrap">层户</div> --> 222 <!-- <div class="ch-wrap">层户</div> -->
77 </div> 223 </div>
78 <div 224 <div class="zrz" :style="{ width: lpbContentWidth + 'px' }">
79 class="zrz"
80 :style="{ width: lpbContentWidth + 'px'}"
81 >
82 {{ lpbData.xmmc }} 225 {{ lpbData.xmmc }}
83 </div> 226 </div>
84 <ul 227 <ul
...@@ -86,22 +229,39 @@ ...@@ -86,22 +229,39 @@
86 :style="{ left: lpbChLeft + 'px', top: lpbChTop + 'px' }" 229 :style="{ left: lpbChLeft + 'px', top: lpbChTop + 'px' }"
87 class="contextmenu" 230 class="contextmenu"
88 > 231 >
89 <li v-show='rightClickFlag=="h"' @click="handleAddH">添加</li> 232 <li v-show="rightClickFlag == 'h'" @click="handleAddH">添加</li>
90 <li v-show='rightClickFlag=="h"' @click="handleMoveH">移动</li> 233 <li v-show="rightClickFlag == 'h'" @click="handleMoveH">移动</li>
91 <li v-show='rightClickFlag=="h"' @click="handleDeleteH">删除</li> 234 <li v-show="rightClickFlag == 'h'" @click="handleDeleteH">删除</li>
92 <li v-show='rightClickFlag=="h"' @click="handleSyczh">实预测转换</li> 235 <li v-show="rightClickFlag == 'h'" @click="handleSyczh">实预测转换</li>
93 <li v-show='rightClickFlag=="c"' @click="handleAddC('up')">向上添加层</li> 236 <li v-show="rightClickFlag == 'c'" @click="handleAddC('up')">
94 <li v-show='rightClickFlag=="c"' @click="handleAddC('down')">向下添加层</li> 237 向上添加层
95 <li v-show='rightClickFlag=="c"' @click="handleDeleteC">删除层</li> 238 </li>
239 <li v-show="rightClickFlag == 'c'" @click="handleAddC('down')">
240 向下添加层
241 </li>
242 <li v-show="rightClickFlag == 'c'" @click="handleDeleteC">删除层</li>
96 </ul> 243 </ul>
97 <!-- 层操作弹框 --> 244 <!-- 层操作弹框 -->
98 <el-dialog :title="addCData.title" :visible.sync="addCVisible" width="50%" center> 245 <el-dialog
99 <el-form :model="addCData"> 246 :title="addCData.title"
247 :visible.sync="addCVisible"
248 width="50%"
249 center
250 >
251 <el-form :model="addCData">
100 <el-form-item label="层号" :label-width="formLabelWidth"> 252 <el-form-item label="层号" :label-width="formLabelWidth">
101 <el-input disabled v-model="addCData.sjc" autocomplete="off"></el-input> 253 <el-input
254 disabled
255 v-model="addCData.sjc"
256 autocomplete="off"
257 ></el-input>
102 </el-form-item> 258 </el-form-item>
103 <el-form-item label="实际层" :label-width="formLabelWidth"> 259 <el-form-item label="实际层" :label-width="formLabelWidth">
104 <el-input disabled v-model="addCData.sjc" autocomplete="off"></el-input> 260 <el-input
261 disabled
262 v-model="addCData.sjc"
263 autocomplete="off"
264 ></el-input>
105 </el-form-item> 265 </el-form-item>
106 <el-form-item label="添加的户数" :label-width="formLabelWidth"> 266 <el-form-item label="添加的户数" :label-width="formLabelWidth">
107 <el-input v-model="addCData.hcount" autocomplete="off"></el-input> 267 <el-input v-model="addCData.hcount" autocomplete="off"></el-input>
...@@ -112,19 +272,25 @@ ...@@ -112,19 +272,25 @@
112 <el-button type="primary" @click="addCVisible = false">取消</el-button> 272 <el-button type="primary" @click="addCVisible = false">取消</el-button>
113 </div> 273 </div>
114 </el-dialog> 274 </el-dialog>
115 <move-h :hbsm="chData.bsm" @close="moveHClose" :move-hvisible="moveHvisible" :type="scyclx" @loading="loadingData"></move-h> 275 <move-h
276 :hbsm="chData.bsm"
277 @close="moveHClose"
278 :move-hvisible="moveHvisible"
279 :type="scyclx"
280 @loading="loadingData"
281 ></move-h>
116 </div> 282 </div>
117 </template> 283 </template>
118 <script> 284 <script>
119 import moveH from "./../../../../../components/moveH/moveH" 285 import moveH from "./../../../../../components/moveH/moveH";
120 import { getLpb,insertUpDownC,deleteCByBsm } from "../../../../../api/lpb"; 286 import { getLpb, insertUpDownC, deleteCByBsm } from "../../../../../api/lpb";
121 export default { 287 export default {
122 name: "", 288 name: "",
123 components: {moveH}, 289 components: { moveH },
124 props: {}, 290 props: {},
125 data() { 291 data() {
126 return { 292 return {
127 moveHvisible:false, 293 moveHvisible: false,
128 lpbData: { 294 lpbData: {
129 ljzs: [], 295 ljzs: [],
130 cs: [], 296 cs: [],
...@@ -139,32 +305,33 @@ export default { ...@@ -139,32 +305,33 @@ export default {
139 ljzzdyHeight: 0, //逻辑幢下幢单元的div高度 305 ljzzdyHeight: 0, //逻辑幢下幢单元的div高度
140 loading: true, 306 loading: true,
141 hbsmList: [], 307 hbsmList: [],
142 cbsmList:[], 308 cbsmList: [],
143 time: null, //区分单双击事件的定时器 309 time: null, //区分单双击事件的定时器
144 searchNum: Math.random(), 310 searchNum: Math.random(),
145 //接收父组件传入的根据单元状态/房屋性质/房屋用途筛选的户bsmList 311 //接收父组件传入的根据单元状态/房屋性质/房屋用途筛选的户bsmList
146 choosedList: [], 312 choosedList: [],
147 lpbChVisible:false, //层户右键菜单显隐 313 borderColor: "#E6E6E6",
148 lpbChLeft:100, 314 lpbChVisible: false, //层户右键菜单显隐
149 lpbChTop:100, 315 lpbChLeft: 100,
316 lpbChTop: 100,
150 //右键层户数据 317 //右键层户数据
151 chData:'', 318 chData: "",
152 rightClickFlag:"", 319 rightClickFlag: "",
153 //层操作数据 320 //层操作数据
154 addCVisible:false, 321 addCVisible: false,
155 addCData:{ 322 addCData: {
156 title:"", 323 title: "",
157 cbsm:"",//层标识码 324 cbsm: "", //层标识码
158 hcount:"",//添加户数 325 hcount: "", //添加户数
159 scyclx:"",//实测预测类型 326 scyclx: "", //实测预测类型
160 sjc:"", //当前的层的SJC +1 327 sjc: "", //当前的层的SJC +1
161 }, 328 },
162 formLabelWidth: '120px' 329 formLabelWidth: "120px",
163 }; 330 };
164 }, 331 },
165 created() {}, 332 created() {},
166 mounted() { 333 mounted() {
167 this.getLpb(this.$store.state.zrzbsm,this.$parent.scyclx); 334 this.getLpb(this.$store.state.zrzbsm, this.$parent.scyclx);
168 setTimeout(() => { 335 setTimeout(() => {
169 //tab-content宽度 - 右侧图例宽度 - lp-overview滚动条宽度 - lpbContent的pandingRight 336 //tab-content宽度 - 右侧图例宽度 - lp-overview滚动条宽度 - lpbContent的pandingRight
170 this.lpbContentWidth = this.$store.state.contentWidth - 34 - 20; 337 this.lpbContentWidth = this.$store.state.contentWidth - 34 - 20;
...@@ -176,20 +343,22 @@ export default { ...@@ -176,20 +343,22 @@ export default {
176 }, 200); 343 }, 200);
177 }, 344 },
178 methods: { 345 methods: {
179 loadingData(){ 346 loadingData() {
180 this.getLpb(this.$store.state.zrzbsm,this.$parent.scyclx); 347 this.getLpb(this.$store.state.zrzbsm, this.$parent.scyclx);
181 }, 348 },
182 //获取楼盘表数据 349 //获取楼盘表数据
183 getLpb(zrzbsm,scyclx) { 350 getLpb(zrzbsm, scyclx) {
184 getLpb(zrzbsm,scyclx).then((res) => { 351 getLpb(zrzbsm, scyclx).then((res) => {
185 if (res.code == 200) { 352 if (res.code == 200) {
186 this.loading = false; 353 this.loading = false;
187 res.result.ljzs = res.result.ljzs.sort(this.compare('place')).reverse(); 354 res.result.ljzs = res.result.ljzs
355 .sort(this.compare("place"))
356 .reverse();
188 this.lpbData = res.result == null ? this.lpbData : res.result; 357 this.lpbData = res.result == null ? this.lpbData : res.result;
189 this.$nextTick(()=>{ 358 this.$nextTick(() => {
190 //渲染楼盘表 359 //渲染楼盘表
191 this.dataChange(); 360 this.dataChange();
192 }) 361 });
193 } else { 362 } else {
194 this.$message({ 363 this.$message({
195 message: res.message, 364 message: res.message,
...@@ -198,12 +367,12 @@ export default { ...@@ -198,12 +367,12 @@ export default {
198 } 367 }
199 }); 368 });
200 }, 369 },
201 compare(property){ 370 compare(property) {
202 return function(a,b){ 371 return function(a, b) {
203 var value1 = a[property]; 372 var value1 = a[property];
204 var value2 = b[property]; 373 var value2 = b[property];
205 return value1 - value2; 374 return value1 - value2;
206 } 375 };
207 }, 376 },
208 //按照bdcdyh或shbw筛选户 377 //按照bdcdyh或shbw筛选户
209 lpbDataMap(sh) { 378 lpbDataMap(sh) {
...@@ -221,7 +390,6 @@ export default { ...@@ -221,7 +390,6 @@ export default {
221 this.ljzWidth += item.offsetWidth + 20; 390 this.ljzWidth += item.offsetWidth + 20;
222 }); 391 });
223 } else { 392 } else {
224
225 } 393 }
226 //计算独立幢单元和独立层户宽度 394 //计算独立幢单元和独立层户宽度
227 //考虑this.$refs.zdy的length为0的情况，即自然幢下没有独立幢单元 395 //考虑this.$refs.zdy的length为0的情况，即自然幢下没有独立幢单元
...@@ -250,7 +418,7 @@ export default { ...@@ -250,7 +418,7 @@ export default {
250 } 418 }
251 } else { 419 } else {
252 //有且仅有独立层户 420 //有且仅有独立层户
253 if(this.$refs.hBsm != undefined){ 421 if (this.$refs.hBsm != undefined) {
254 this.$refs.hBsm.forEach((item) => { 422 this.$refs.hBsm.forEach((item) => {
255 this.zdyWidth += item.offsetWidth + 21; 423 this.zdyWidth += item.offsetWidth + 21;
256 }); 424 });
...@@ -274,21 +442,21 @@ export default { ...@@ -274,21 +442,21 @@ export default {
274 if (this.$refs.ljzch != undefined) { 442 if (this.$refs.ljzch != undefined) {
275 //计算自然幢下的幢单元高度，如果有比层户高的幢单元，则幢单元高度设为最高的幢单元高度，如果没有，则设为层户高度 443 //计算自然幢下的幢单元高度，如果有比层户高的幢单元，则幢单元高度设为最高的幢单元高度，如果没有，则设为层户高度
276 higher = highest > this.$refs.ljzch.offsetHeight ? true : false; 444 higher = highest > this.$refs.ljzch.offsetHeight ? true : false;
277 this.$nextTick(()=>{ 445 this.$nextTick(() => {
278 this.ljzzdyHeight = higher ? highest : this.$refs.ljzch.offsetHeight; 446 this.ljzzdyHeight = higher
447 ? highest
448 : this.$refs.ljzch.offsetHeight;
279 highest = 0; 449 highest = 0;
280 }) 450 });
281 } else { 451 } else {
282 this.$nextTick(()=>{ 452 this.$nextTick(() => {
283 this.ljzzdyHeight = highest; 453 this.ljzzdyHeight = highest;
284 highest = 0; 454 highest = 0;
285 }) 455 });
286 } 456 }
287 } else { 457 } else {
288 // this.zdyWidth = 124; 458 // this.zdyWidth = 124;
289 } 459 }
290
291
292 }, 460 },
293 //户单击事件 461 //户单击事件
294 handleTdClick(e, bsm) { 462 handleTdClick(e, bsm) {
...@@ -326,19 +494,19 @@ export default { ...@@ -326,19 +494,19 @@ export default {
326 //清除选中户 494 //清除选中户
327 clearChoosedH() { 495 clearChoosedH() {
328 // this.$nextTick(() => { 496 // this.$nextTick(() => {
329 //将每个选中的户的选中状态清除 497 //将每个选中的户的选中状态清除
330 this.$refs.hBsm.forEach((item) => { 498 this.$refs.hBsm.forEach((item) => {
331 if (item.className == "tdSelect") { 499 if (item.className == "tdSelect") {
332 item.className = ""; 500 item.className = "";
333 } 501 }
334 }); 502 });
335 // 清空hbsmList 503 // 清空hbsmList
336 this.hbsmList = []; 504 this.hbsmList = [];
337 // }); 505 // });
338 }, 506 },
339 //户右键点击事件 507 //户右键点击事件
340 openMenu(e,item,type){ 508 openMenu(e, item, type) {
341 console.log(e,'e'); 509 console.log(e, "e");
342 this.lpbChLeft = e.pageX; 510 this.lpbChLeft = e.pageX;
343 this.lpbChTop = e.pageY; 511 this.lpbChTop = e.pageY;
344 this.chData = item; 512 this.chData = item;
...@@ -346,7 +514,7 @@ export default { ...@@ -346,7 +514,7 @@ export default {
346 this.lpbChVisible = true; 514 this.lpbChVisible = true;
347 }, 515 },
348 // 层选中事件 516 // 层选中事件
349 handleClickC(e,item){ 517 handleClickC(e, item) {
350 //判断点击的层是否选中 518 //判断点击的层是否选中
351 if (e.target.className.indexOf("tdSelect") == -1) { 519 if (e.target.className.indexOf("tdSelect") == -1) {
352 //未选中→选中 520 //未选中→选中
...@@ -355,84 +523,80 @@ export default { ...@@ -355,84 +523,80 @@ export default {
355 } else { 523 } else {
356 //选中→未选中 524 //选中→未选中
357 e.target.className = "floor"; 525 e.target.className = "floor";
358 this.deleteArrOption(this.cbsmList,item.bsm); 526 this.deleteArrOption(this.cbsmList, item.bsm);
359 } 527 }
360 this.$parent.getCbsm(this.cbsmList); 528 this.$parent.getCbsm(this.cbsmList);
361 }, 529 },
362 //关闭右键菜单 530 //关闭右键菜单
363 closeMenu(){ 531 closeMenu() {
364 this.lpbChVisible = false 532 this.lpbChVisible = false;
365 }, 533 },
366 //户右键菜单 start 534 //户右键菜单 start
367 handleAddH(){ 535 handleAddH() {},
368 536 handleMoveH() {
537 // 移动户
538 console.log(this.chData, "chData");
539 console.log(this.$parent.scyclx, "实预测类型");
540 this.moveHvisible = true;
369 }, 541 },
370 handleMoveH(){ 542 moveHClose() {
371 // 移动户 543 this.moveHvisible = false;
372 console.log(this.chData,"chData")
373 console.log(this.$parent.scyclx,"实预测类型")
374 this.moveHvisible=true;
375 },
376 moveHClose(){
377 this.moveHvisible=false;
378 },
379 handleDeleteH(){
380
381 },
382 handleSyczh(){
383
384 }, 544 },
545 handleDeleteH() {},
546 handleSyczh() {},
385 //end 547 //end
386 // 层右键菜单 start 548 // 层右键菜单 start
387 //添加 549 //添加
388 handleAddC(type){ 550 handleAddC(type) {
389 this.addCData.title = type == "up" ? "向上添加层" : "向下添加层"; 551 this.addCData.title = type == "up" ? "向上添加层" : "向下添加层";
390 this.addCVisible = true; 552 this.addCVisible = true;
391 this.addCData.sjc = type == "up" ? Number(this.chData.sjc) + 1 : Number(this.chData.sjc) - 1; 553 this.addCData.sjc =
554 type == "up"
555 ? Number(this.chData.sjc) + 1
556 : Number(this.chData.sjc) - 1;
392 this.addCData.cbsm = this.chData.bsm; 557 this.addCData.cbsm = this.chData.bsm;
393 this.addCData.scyclx = this.$parent.scyclx; 558 this.addCData.scyclx = this.$parent.scyclx;
394 }, 559 },
395 //删除 560 //删除
396 handleDeleteC(){ 561 handleDeleteC() {
397 let params = { 562 let params = {
398 cbsm:this.chData.bsm, 563 cbsm: this.chData.bsm,
399 scyclx:this.$parent.scyclx 564 scyclx: this.$parent.scyclx,
400 } 565 };
401 this.$confirm('是否确认删除该层?', '提示', { 566 this.$confirm("是否确认删除该层?", "提示", {
402 confirmButtonText: '确定', 567 confirmButtonText: "确定",
403 cancelButtonText: '取消', 568 cancelButtonText: "取消",
404 type: 'warning' 569 type: "warning",
405 }).then(() => { 570 })
406 deleteCByBsm(params).then((res) => { 571 .then(() => {
407 if (res.code == 200) { 572 deleteCByBsm(params).then((res) => {
408 this.$message({ 573 if (res.code == 200) {
409 message: "删除成功", 574 this.$message({
410 type: "success", 575 message: "删除成功",
411 }); 576 type: "success",
412 this.getLpb(this.$store.state.zrzbsm,this.$parent.scyclx); 577 });
413 }else{ 578 this.getLpb(this.$store.state.zrzbsm, this.$parent.scyclx);
414 this.$message({ 579 } else {
415 message: res.message, 580 this.$message({
416 type: "warning", 581 message: res.message,
417 }); 582 type: "warning",
418 } 583 });
419 }); 584 }
420 }).catch(() => { 585 });
421 586 })
422 }); 587 .catch(() => {});
423
424 }, 588 },
425 //确认添加 589 //确认添加
426 saveAddC(){ 590 saveAddC() {
427 insertUpDownC(this.addCData).then((res) => { 591 insertUpDownC(this.addCData).then((res) => {
428 if (res.code == 200) { 592 if (res.code == 200) {
429 this.$message({ 593 this.$message({
430 message: "添加成功", 594 message: "添加成功",
431 type: "success", 595 type: "success",
432 }); 596 });
433 this.getLpb(this.$store.state.zrzbsm,this.$parent.scyclx); 597 this.getLpb(this.$store.state.zrzbsm, this.$parent.scyclx);
434 this.addCVisible = false; 598 this.addCVisible = false;
435 }else{ 599 } else {
436 this.$message({ 600 this.$message({
437 message: res.message, 601 message: res.message,
438 type: "warning", 602 type: "warning",
...@@ -449,13 +613,13 @@ export default { ...@@ -449,13 +613,13 @@ export default {
449 legendToggleFlagChange() { 613 legendToggleFlagChange() {
450 return this.$parent.legendToggleFlag; 614 return this.$parent.legendToggleFlag;
451 }, 615 },
452 scyclx(){ 616 scyclx() {
453 return this.$parent.scyclx 617 return this.$parent.scyclx;
454 } 618 },
455 }, 619 },
456 watch: { 620 watch: {
457 scyclx(n){ 621 scyclx(n) {
458 this.getLpb(this.$store.state.zrzbsm,n) 622 this.getLpb(this.$store.state.zrzbsm, n);
459 }, 623 },
460 createFlagChange: function(val) { 624 createFlagChange: function(val) {
461 setTimeout(() => { 625 setTimeout(() => {
...@@ -482,13 +646,14 @@ export default { ...@@ -482,13 +646,14 @@ export default {
482 }); 646 });
483 }); 647 });
484 }, 648 },
485 //父组件中选择单元状态改变choosedList 649 //父组件中选择单元状态改变选中户的边框颜色
486 choosedList(n) { 650 choosedList(n) {
487 this.$refs.hBsm.forEach((item) => { 651 this.$refs.hBsm.forEach((item) => {
488 this.choosedList.forEach((i) => { 652 this.choosedList.forEach((i) => {
489 if (item.dataset.bsm == i) { 653 if (item.dataset.bsm == i) {
490 console.log(item.dataset.bsm+'----分割线-----'+i); 654 console.log(item.style.borderColor ,'item.style.borderColor ');
491 item.className = "tdSelect"; 655 console.log(this.borderColor,'this.borderColor');
656 item.style.borderColor = this.borderColor;
492 } 657 }
493 }); 658 });
494 }); 659 });
...@@ -499,7 +664,7 @@ export default { ...@@ -499,7 +664,7 @@ export default {
499 } else { 664 } else {
500 document.body.removeEventListener("click", this.closeMenu); 665 document.body.removeEventListener("click", this.closeMenu);
501 } 666 }
502 } 667 },
503 }, 668 },
504 }; 669 };
505 </script> 670 </script>
...@@ -526,37 +691,37 @@ export default { ...@@ -526,37 +691,37 @@ export default {
526 // position: relative; 691 // position: relative;
527 // .ljz-zdy-wrap { 692 // .ljz-zdy-wrap {
528 // width: auto; 693 // width: auto;
529 // display: table; 694 // display: table;
530 .ljz-zdy { 695 .ljz-zdy {
531 height: auto; 696 height: auto;
532 margin-right: 20px; 697 margin-right: 20px;
533 float: left; 698 float: left;
534 position: relative; 699 position: relative;
535 .zdy-name { 700 .zdy-name {
536 width: 100%; 701 width: 100%;
537 bottom: 0; 702 bottom: 0;
538 position: absolute; 703 position: absolute;
539 height: 40px; 704 height: 40px;
540 background-color: rosybrown; 705 background-color: rosybrown;
541 }
542 // .chTable-wrap{
543 // position: absolute;
544 // bottom: 40px;
545 // }
546 }
547 div:last-child{
548 margin-right: 0;
549 }
550 .ljz-ch {
551 float: left;
552 }
553 .ljz-zdy:last-child {
554 margin-right: 0;
555 }
556 .column-reverse {
557 display: flex;
558 flex-direction: column-reverse;
559 } 706 }
707 // .chTable-wrap{
708 // position: absolute;
709 // bottom: 40px;
710 // }
711 }
712 div:last-child {
713 margin-right: 0;
714 }
715 .ljz-ch {
716 float: left;
717 }
718 .ljz-zdy:last-child {
719 margin-right: 0;
720 }
721 .column-reverse {
722 display: flex;
723 flex-direction: column-reverse;
724 }
560 // } 725 // }
561 .ljz-name { 726 .ljz-name {
562 width: calc(100% - 32px); 727 width: calc(100% - 32px);
...@@ -627,6 +792,10 @@ export default { ...@@ -627,6 +792,10 @@ export default {
627 background-position: right top; 792 background-position: right top;
628 background-size: 30px; 793 background-size: 30px;
629 } 794 }
795 .hasBorder {
796 border-width: 1px;
797 border-style: solid;
798 }
630 } 799 }
631 } 800 }
632 .name { 801 .name {
......