Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
5f2725f1 by 杨威
Options

楼盘表模块布局

1 parent 9e5fb92e
Inline Side-by-side
Showing 4 changed files with 824 additions and 368 deletions
...@@ -39,7 +39,8 @@ const store = new Vuex.Store({ ...@@ -39,7 +39,8 @@ const store = new Vuex.Store({
39 zrzbsm: '', 39 zrzbsm: '',
40 zjlxList: [], 40 zjlxList: [],
41 gyfsList: [], 41 gyfsList: [],
42 hbsm:'' 42 hbsm:'',
43 contentWidth:'' //内容区域宽度
43 }, 44 },
44 modules: { 45 modules: {
45 user, 46 user,
......
1 <template> 1 <template>
2 <div class="content_box"> 2 <div ref="lpb" class="content_box">
3 <el-tabs v-model="activeName" @tab-click="handleClick"> 3 <el-tabs v-model="activeName" @tab-click="handleClick">
4 <el-tab-pane label="自然幢信息" name="zrzxx"><zrzxx></zrzxx></el-tab-pane> 4 <el-tab-pane label="自然幢信息" name="zrzxx"><zrzxx></zrzxx></el-tab-pane>
5 <el-tab-pane label="业主共有" name="yzgy"><yzgy></yzgy></el-tab-pane> 5 <el-tab-pane label="业主共有" name="yzgy"><yzgy></yzgy></el-tab-pane>
...@@ -33,13 +33,17 @@ export default { ...@@ -33,13 +33,17 @@ export default {
33 }, 33 },
34 }, 34 },
35 created() {}, 35 created() {},
36 mounted() {}, 36 mounted() {
37 this.$store.state.contentWidth = this.$refs.lpb.offsetWidth - 40;
38 },
37 computed: {}, 39 computed: {},
38 watch: {}, 40 watch: {},
39 }; 41 };
40 </script> 42 </script>
41 <style scoped lang="less"> 43 <style scoped lang="less">
42 .content_box{ 44 .content_box{
45 box-sizing: border-box;
46 padding: 0 20px;
43 .el-tabs{ 47 .el-tabs{
44 width: 100%; 48 width: 100%;
45 height: 100%; 49 height: 100%;
......
1 <template> 1 <template>
2 <div class="edit"> 2 <div class="edit">
3 <div class="tab-header"> 3 <div class="tab-header">
4 <div class="searchContent"> 4 <div class="searchContent">
5 <el-radio-group v-model="radio1"> 5 <el-radio-group v-model="radio1">
6 <el-radio-button class="radioBtn" label="1" border>实测</el-radio-button> 6 <el-radio-button class="radioBtn" label="1" border
7 <el-radio-button class="radioBtn" label="2" border>预测</el-radio-button> 7 >实测</el-radio-button
8 </el-radio-group> 8 >
9 <el-input v-model="bdcdyh" class="searchInput" placeholder="输入不动产单元号"></el-input> 9 <el-radio-button class="radioBtn" label="2" border
10 </div> 10 >预测</el-radio-button
11 <div> 11 >
12 <el-button class="radioBtn" label="1" @click="create" border>创建楼盘</el-button> 12 </el-radio-group>
13 <el-button class="radioBtn" label="2" border>实预测转换</el-button> 13 <el-input
14 <el-button class="radioBtn" label="3" border>批量户</el-button> 14 v-model="bdcdyh"
15 <el-button class="radioBtn" label="4" border>批量层</el-button> 15 class="searchInput"
16 <el-button class="radioBtn" label="5" border>批量室号</el-button> 16 placeholder="输入不动产单元号"
17 <el-button class="radioBtn" label="6" border>批量坐落</el-button> 17 ></el-input>
18 <el-button class="radioBtn" label="7" border>批量单元号</el-button> 18 </div>
19 </div> 19 <div>
20 </div> 20 <el-button class="radioBtn" label="1" @click="create" border
21 <div class="tab-content" :style="{'height':lpbContentHight+'px'}"> 21 >创建楼盘</el-button
22 <div class="lp-tree" :class="createFlag ? 'w260':'w0'"> 22 >
23 <LineTree :pd="pd" class="treeData" :islpb = "islpb" ></LineTree> 23 <el-button class="radioBtn" label="2" border>实预测转换</el-button>
24 <p @click="createFlag = false" style="width:20px;float:left;cursor:pointer;">X</p> 24 <el-button class="radioBtn" label="3" border>批量户</el-button>
25 </div> 25 <el-button class="radioBtn" label="4" border>批量层</el-button>
26 <div class="lp-overview"> 26 <el-button class="radioBtn" label="5" border>批量室号</el-button>
27 楼盘单元格 27 <el-button class="radioBtn" label="6" border>批量坐落</el-button>
28 </div> 28 <el-button class="radioBtn" label="7" border>批量单元号</el-button>
29 <div class="lp-legend"> 29 </div>
30 <div class="handleCol"> 30 </div>
31 <div class="btn" @click="legendToggle"> 31 <div
32 <i v-show="!legendToggleFlag" class="el-icon-d-arrow-left"></i> 32 class="tab-content"
33 <i v-show="legendToggleFlag" class="el-icon-d-arrow-right"></i> 33 ref="tabContent"
34 </div> 34 :style="{ height: lpbContentHight + 'px' }"
35 <div class="dyzt">
36 <span>单元状态</span>
37 </div>
38 <div class="fwxz">
39 <span>房屋性质</span>
40 </div>
41 <div class="fwyt">
42 <span>房屋用途</span>
43 </div>
44 </div>
45 <div class="legendTable-wrap" :style="{'width':legendToggleFlag ? '204px' : '0'}">
46 <table class="legendTable" cellspacing="1" cellpadding="1" border="1">
47 <tr>
48 <th>状态</th>
49 <th>套数</th>
50 <th>面积</th>
51 </tr>
52 <tr v-for="(item,index) in legendList" :key="index">
53 <td><i class="el-icon-star-on" :style="{'color':item.color}"></i>{{item.name}}</td>
54 <td>{{item.ts}}</td>
55 <td>{{item.mj}}</td>
56 </tr>
57 </table>
58 </div>
59 </div>
60 </div>
61
62 <el-dialog
63 title="添加"
64 :visible.sync="dialogVisible"
65 width="50%"
66 center
67 > 35 >
68 <!-- 根据菜单类型（menuType）和右键点击的楼盘类型（treeData.type）来区分弹框内容 --> 36 <!-- 左侧树结构 -->
69 <div class="addCh" v-show="menuType == 'ljz'"> 37 <div class="lp-tree" :class="createFlag ? 'w260' : 'w0'">
70 <addLjz ref="ljz"></addLjz> 38 <LineTree :pd="pd" class="treeData" :islpb="islpb"></LineTree>
71 </div> 39 <p
72 <div class="addCh" v-show="menuType == 'zdy'"> 40 @click="createFlag = false"
73 <addZdy ref="zdy"></addZdy> 41 style="width:20px;float:left;cursor:pointer;"
74 </div> 42 >
75 <div class="addCh" v-show="menuType == 'ch'"> 43 X
76 <addCh ref="ch"></addCh> 44 </p>
77 </div> 45 </div>
78 <div class="btnGroup"> 46 <!-- 楼盘表主体 -->
79 <el-button type="primary" @click="saveInfo">保存</el-button> 47 <div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }">
80 <el-button type="primary" @click="resetInfo">重置</el-button> 48 <lpbContent></lpbContent>
81 <el-button type="primary" @click="dialogVisible = false">取消</el-button> 49 </div>
82 </div> 50 <!-- 右侧图例 -->
51 <div class="lp-legend">
52 <div class="handleCol">
53 <div class="btn" @click="legendToggle">
54 <i v-show="!legendToggleFlag" class="el-icon-d-arrow-left"></i>
55 <i v-show="legendToggleFlag" class="el-icon-d-arrow-right"></i>
56 </div>
57 <div class="dyzt">
58 <span>单元状态</span>
59 </div>
60 <div class="fwxz">
61 <span>房屋性质</span>
62 </div>
63 <div class="fwyt">
64 <span>房屋用途</span>
65 </div>
66 </div>
67 <div
68 class="legendTable-wrap"
69 :style="{ width: legendToggleFlag ? '204px' : '0' }"
70 >
71 <table class="legendTable" cellspacing="1" cellpadding="1" border="1">
72 <tr>
73 <th>状态</th>
74 <th>套数</th>
75 <th>面积</th>
76 </tr>
77 <tr v-for="(item, index) in legendList" :key="index">
78 <td>
79 <i class="el-icon-star-on" :style="{ color: item.color }"></i
80 >{{ item.name }}
81 </td>
82 <td>{{ item.ts }}</td>
83 <td>{{ item.mj }}</td>
84 </tr>
85 </table>
86 </div>
87 </div>
88 </div>
89
90 <el-dialog title="添加" :visible.sync="dialogVisible" width="50%" center>
91 <!-- 根据菜单类型（menuType）和右键点击的楼盘类型（treeData.type）来区分弹框内容 -->
92 <div class="addCh" v-show="menuType == 'ljz'">
93 <addLjz ref="ljz"></addLjz>
94 </div>
95 <div class="addCh" v-show="menuType == 'zdy'">
96 <addZdy ref="zdy"></addZdy>
97 </div>
98 <div class="addCh" v-show="menuType == 'ch'">
99 <addCh ref="ch"></addCh>
100 </div>
101 <div class="btnGroup">
102 <el-button type="primary" @click="saveInfo">保存</el-button>
103 <el-button type="primary" @click="resetInfo">重置</el-button>
104 <el-button type="primary" @click="dialogVisible = false"
105 >取消</el-button
106 >
107 </div>
83 </el-dialog> 108 </el-dialog>
84 </div> 109 </div>
85 </template> 110 </template>
86 111
87 <script> 112 <script>
88 import LineTree from "../../../../components/lineTree/lineTree"; 113 import LineTree from "../../../../components/lineTree/lineTree";
89 import addLjz from "./ljz/index" 114 import addLjz from "./ljz/index";
90 import addZdy from "./zdy/index" 115 import addZdy from "./zdy/index";
91 import addCh from "./ch/index" 116 import addCh from "./ch/index";
92 import {getLpbMenuTree} from "../../../../api/lpb" 117 import lpbContent from "./lpbContent/index";
118 import { getLpbMenuTree } from "../../../../api/lpb";
93 export default { 119 export default {
94 name:"", 120 name: "",
95 components:{LineTree,addLjz,addZdy,addCh}, 121 components: { LineTree, addLjz, addZdy, addCh, lpbContent },
96 props:{}, 122 props: {},
97 data(){ 123 data() {
98 return { 124 return {
99 radio1:'', 125 radio1: "",
100 radio2:'', 126 radio2: "",
101 createFlag:false, 127 createFlag: false,
102 bdcdyh:'', 128 bdcdyh: "",
103 islpb:true, 129 islpb: true,
104 pd:[], //创建楼盘的树结构数据 130 pd: [], //创建楼盘的树结构数据
105 dialogVisible:false, 131 dialogVisible: false,
106 menuType:'', 132 menuType: "",
107 treeData:{}, 133 treeData: {},
108 legendList:[ 134 legendList: [
109 { 135 {
110 name:'未确权', 136 name: "未确权",
111 color:'#2591FD', 137 color: "#2591FD",
112 ts:'12', 138 ts: "12",
113 mj:'1633' 139 mj: "1633",
114 }, 140 },
115 { 141 {
116 name:'已确权', 142 name: "已确权",
117 color:'#2591FD', 143 color: "#2591FD",
118 ts:'22', 144 ts: "22",
119 mj:'3109' 145 mj: "3109",
120 }, 146 },
121 { 147 {
122 name:'已注销', 148 name: "已注销",
123 color:'#2591FD', 149 color: "#2591FD",
124 ts:'13', 150 ts: "13",
125 mj:'1457' 151 mj: "1457",
126 }, 152 },
127 { 153 {
128 name:'已备案', 154 name: "已备案",
129 color:'#2591FD', 155 color: "#2591FD",
130 ts:'3', 156 ts: "3",
131 mj:'409' 157 mj: "409",
132 }, 158 },
133 { 159 {
134 name:'预抵押', 160 name: "预抵押",
135 color:'#2591FD', 161 color: "#2591FD",
136 ts:'11', 162 ts: "11",
137 mj:'1466' 163 mj: "1466",
138 }, 164 },
139 { 165 {
140 name:'在建抵押', 166 name: "在建抵押",
141 color:'#2591FD', 167 color: "#2591FD",
142 ts:'13', 168 ts: "13",
143 mj:'1792' 169 mj: "1792",
144 }, 170 },
145 { 171 {
146 name:'抵押', 172 name: "抵押",
147 color:'#2591FD', 173 color: "#2591FD",
148 ts:'14', 174 ts: "14",
149 mj:'13' 175 mj: "13",
150 }, 176 },
151 { 177 {
152 name:'查封', 178 name: "查封",
153 color:'#2591FD', 179 color: "#2591FD",
154 ts:'9', 180 ts: "9",
155 mj:'1436' 181 mj: "1436",
156 }, 182 },
157 { 183 {
158 name:'异议', 184 name: "异议",
159 color:'#2591FD', 185 color: "#2591FD",
160 ts:'34', 186 ts: "34",
161 mj:'4342' 187 mj: "4342",
162 }, 188 },
163 { 189 {
164 name:'限制', 190 name: "限制",
165 color:'#2591FD', 191 color: "#2591FD",
166 ts:'2', 192 ts: "2",
167 mj:'285' 193 mj: "285",
168 }, 194 },
169 ], 195 ],
170 legendToggleFlag:false, 196 legendToggleFlag: false,
171 lpbContentHight:'' 197 lpbContentHight: "",
172 } 198 lpbContentwidth: "",
173 }, 199 };
174 created(){ 200 },
175 window.addEventListener('resize', this.getHeight); 201 created() {
176 this.getHeight() 202 window.addEventListener("resize", this.getHeight);
177 }, 203 this.getHeight();
178 mounted(){ 204 },
179 this.getLpbMenuTree('d1b82b27f2a6ab7bf3f0e7708c96e46f') 205 mounted() {
180 }, 206 this.getLpbMenuTree("d1b82b27f2a6ab7bf3f0e7708c96e46f");
181 methods:{ 207 // 楼盘表绘制区域宽度计算：楼盘表区域宽度-图例宽度34-滚动条宽度6
182 //获取高度计算lpb内容区高度 208 setTimeout(() => {
183 getHeight(){ 209 this.lpbContentwidth = this.$store.state.contentWidth - 34 - 6;
184 this.lpbContentHight = window.innerHeight - 340 210 }, 100);
185 }, 211 },
186 //创建楼盘 212 methods: {
187 create(){ 213 //获取高度计算lpb内容区高度
188 this.createFlag = true 214 getHeight() {
189 }, 215 this.lpbContentHight = window.innerHeight - 340;
190 //获取自然幢树结构数据 216 },
191 getLpbMenuTree(zrzbsm){ 217 //创建楼盘
192 getLpbMenuTree(zrzbsm) 218 create() {
193 .then((res) => { 219 this.createFlag = true;
220 },
221 //获取自然幢树结构数据
222 getLpbMenuTree(zrzbsm) {
223 getLpbMenuTree(zrzbsm)
224 .then((res) => {
194 this.pd = res.result; 225 this.pd = res.result;
195 }) 226 })
196 .catch((error) => {}); 227 .catch((error) => {});
197 }, 228 },
198 //打开新建楼盘树结构右键菜单唤起的弹框 229 //打开新建楼盘树结构右键菜单唤起的弹框
199 openLpbDialog(data,type){ 230 openLpbDialog(data, type) {
200 console.log(data,'data'); 231 console.log(data, "data");
201 this.treeData = data; 232 this.treeData = data;
202 this.menuType = type; 233 this.menuType = type;
203 this.dialogVisible = true 234 this.dialogVisible = true;
204 }, 235 },
205 //弹框中的保存按钮 236 //弹框中的保存按钮
206 saveInfo(){ 237 saveInfo() {
207 debugger 238 switch (this.menuType) {
208 switch (this.menuType) { 239 case "ljz":
209 case 'ljz': 240 this.$refs.ljz.onSave(this.$refs.ljz.form, this.treeData.bsm);
210 this.$refs.ljz.onSave(this.$refs.ljz.form,this.treeData.bsm) 241 break;
211 break; 242 case "zdy":
212 case 'zdy': 243 this.$refs.zdy.submitForm("form", this.pd[0].bsm, this.treeData.bsm);
213 this.$refs.zdy.submitForm('form',this.pd[0].bsm,this.treeData.bsm) 244 break;
214 break; 245 case "ch":
215 case 'ch': 246 break;
216 247
217 break; 248 default:
218 249 break;
219 default: 250 }
220 break; 251 },
221 } 252 //弹框中的重置按钮
222 }, 253 resetInfo() {
223 //弹框中的重置按钮 254 switch (this.menuType) {
224 resetInfo(){ 255 case "ljz":
225 switch (this.menuType) { 256 this.$refs.ljz.reset();
226 case 'ljz': 257 break;
227 this.$refs.ljz.reset() 258 case "zdy":
228 break; 259 this.$refs.zdy.reset();
229 case 'zdy': 260 break;
230 this.$refs.zdy.reset() 261 case "ch":
231 break; 262 this.$refs.ch.reset();
232 case 'ch': 263 break;
233 this.$refs.ch.reset() 264
234 break; 265 default:
235 266 break;
236 default: 267 }
237 break; 268 },
238 } 269 //关闭弹框
239 }, 270 closeDaialog() {
240 //关闭弹框 271 this.dialogVisible = false;
241 closeDaialog(){ 272 },
242 this.dialogVisible = false 273 //图例的展开收起
243 }, 274 legendToggle() {
244 //图例的展开收起 275 this.legendToggleFlag = !this.legendToggleFlag;
245 legendToggle(){ 276 },
246 this.legendToggleFlag = !this.legendToggleFlag; 277 },
247 } 278 computed: {
248 }, 279 // tabContentWidth(){
249 computed: {}, 280 // let w = this.$refs.tabContent != undefined ? this.$refs.tabContent.offsetWidth : 0
250 destroyed(){ 281 // return w;
251 window.removeEventListener('resize', this.getHeight) 282 // // if(this.$refs.tabContent != undefined){
252 }, 283 // // return this.$refs.tabContent.offsetWidth
253 watch: { 284 // // }else{
254 }, 285 // // return
255 } 286 // // }
287 // }
288 },
289 destroyed() {
290 window.removeEventListener("resize", this.getHeight);
291 },
292 watch: {
293 legendToggleFlag(n) {
294 if (n) {
295 this.lpbContentwidth -= 204;
296 } else {
297 this.lpbContentwidth += 204;
298 }
299 },
300 createFlag(n) {
301 if (n) {
302 this.lpbContentwidth -= 260;
303 } else {
304 this.lpbContentwidth += 260;
305 }
306 },
307 // tabContentWidth(n){
308 // debugger
309 // if(n != 0){
310 // // 楼盘表绘制区域宽度计算：楼盘表区域宽度-图例宽度34-滚动条宽度6
311 // this.lpbContentwidth = this.$refs.tabContent.offsetWidth - 34 - 6;
312 // }
313 // }
314 },
315 };
256 </script> 316 </script>
257 <style scoped lang="less"> 317 <style scoped lang="less">
258 .edit{ 318 .edit {
259 height: 100%; 319 height: 100%;
260 background-color: #EAEDF5; 320 background-color: #eaedf5;
261 .tab-header{ 321 .tab-header {
262 border: 1px solid #DEDEDE; 322 border: 1px solid #dedede;
263 border-top: 0; 323 border-top: 0;
264 box-sizing: border-box; 324 box-sizing: border-box;
265 padding: 20px 0; 325 padding: 20px 0;
266 background-color: #ffffff; 326 background-color: #ffffff;
267 margin-bottom: 20px; 327 margin-bottom: 20px;
268 .searchContent{ 328 .searchContent {
269 margin-bottom: 20px; 329 margin-bottom: 20px;
270 .searchInput{ 330 .searchInput {
271 width: 300px; 331 width: 300px;
272 margin-left: 20px; 332 margin-left: 20px;
273 display: inline-block; 333 display: inline-block;
274 } 334 }
275 } 335 }
276 .radioBtn{ 336 .radioBtn {
277 margin-left: 20px; 337 margin-left: 20px;
278 /deep/.el-radio-button__inner{ 338 /deep/.el-radio-button__inner {
279 border: 1px solid #DCDFE6; 339 border: 1px solid #dcdfe6;
280 border-radius:4px; 340 border-radius: 4px;
281 box-shadow: 0 0 0 0 #409EFF!important; 341 box-shadow: 0 0 0 0 #409eff !important;
282 } 342 }
283 } 343 }
284 } 344 }
285 .tab-content{ 345 .tab-content {
286 background-color: #ffffff; 346 background-color: #ffffff;
287 display: flex; 347 display: flex;
288 overflow-y: scroll; 348 overflow-y: scroll;
289 .lp-tree{ 349 .lp-tree {
290 height: 100%; 350 height: 100%;
291 overflow: hidden; 351 overflow: hidden;
292 transition: .5s; 352 transition: 0.5s;
293 .treeData{ 353 .treeData {
294 margin-top: 20px; 354 margin-top: 20px;
295 margin-left: 20px; 355 margin-left: 20px;
296 float: left; 356 float: left;
297 } 357 }
298 } 358 }
299 .w0{ 359 .w0 {
300 width: 0; 360 width: 0;
301 } 361 }
302 .w260{ 362 .w260 {
303 width: 260px; 363 width: 260px;
304 } 364 }
305 .lp-overview{ 365 .lp-overview {
306 flex: 1; 366 transition: 0.5s;
307 } 367 flex: 1;
308 .lp-legend{ 368 }
309 transition: .5s; 369 .lp-legend {
310 height: 100%; 370 transition: 0.5s;
311 font-size: 14px; 371 height: 100%;
312 .handleCol{ 372 font-size: 14px;
313 width: 34px; 373 .handleCol {
314 float: right; 374 width: 34px;
315 height: 100%; 375 float: right;
316 .btn{ 376 height: 100%;
317 cursor: pointer; 377 .btn {
318 height: 40px; 378 cursor: pointer;
319 line-height: 40px; 379 height: 40px;
320 text-align: center; 380 line-height: 40px;
321 border-bottom: 1px solid #E6E6E6 ; 381 text-align: center;
322 } 382 border-bottom: 1px solid #e6e6e6;
323 .dyzt{ 383 }
324 height: 81px; 384 .dyzt {
325 line-height: 81px; 385 height: 81px;
326 } 386 line-height: 81px;
327 .fwxz,.fwyt{ 387 }
328 height: 122px; 388 .fwxz,
329 } 389 .fwyt {
330 .dyzt,.fwxz,.fwyt{ 390 height: 122px;
331 border-bottom: 1px solid #E6E6E6 ; 391 }
332 span{ 392 .dyzt,
333 text-align: center; 393 .fwxz,
334 height: 100%; 394 .fwyt {
335 -webkit-writing-mode: vertical-rl; 395 border-bottom: 1px solid #e6e6e6;
336 writing-mode: vertical-rl; 396 span {
337 line-height: 34px; 397 text-align: center;
338 letter-spacing: 2px; 398 height: 100%;
339 } 399 -webkit-writing-mode: vertical-rl;
340 } 400 writing-mode: vertical-rl;
341 } 401 line-height: 34px;
342 .legendTable-wrap{ 402 letter-spacing: 2px;
343 transition: .5s; 403 }
344 float: right; 404 }
345 overflow: hidden; 405 }
346 .legendTable{ 406 .legendTable-wrap {
347 margin-top: -1px; 407 transition: 0.5s;
348 tr{ 408 float: right;
349 height: 40px; 409 overflow: hidden;
350 line-height: 40px; 410 .legendTable {
351 th:first-child{ 411 margin-top: -1px;
352 width: 80px; 412 tr {
353 } 413 height: 40px;
354 th{ 414 line-height: 40px;
355 width: 60px; 415 th:first-child {
356 height: 40px; 416 width: 80px;
357 white-space: nowrap; 417 }
358 } 418 th {
359 td { 419 width: 60px;
360 height: 40px; 420 height: 40px;
361 text-align: center; 421 white-space: nowrap;
362 white-space: nowrap; 422 }
363 } 423 td {
364 td:first-child{ 424 height: 40px;
365 text-align: left; 425 text-align: center;
366 text-indent: 2px; 426 white-space: nowrap;
367 } 427 }
368 } 428 td:first-child {
369 } 429 text-align: left;
370 } 430 text-indent: 2px;
371 } 431 }
372 } 432 }
373 .btnGroup{ 433 }
374 margin: 20px auto 0; 434 }
375 width: 230px; 435 }
376 } 436 }
437 .btnGroup {
438 margin: 20px auto 0;
439 width: 230px;
440 }
377 } 441 }
378 </style>
...\ No newline at end of file ...\ No newline at end of file
442 </style>
......
1 <template>
2 <div class="lpbContent-wrap" ref="lpbContent">
3 <div class="lpbContent">
4 <div class="ljz">逻辑幢</div>
5 <div class="zdy">幢单元</div>
6 <div class="ch">层户</div>
7 </div>
8 <div
9 class="zrz"
10 :style="{ width: lpbContentWidth + 'px'}"
11 >
12 {{ lpbData.xmmc }}
13 </div>
14 </div>
15 </template>
16
17 <script>
18 export default {
19 name: "",
20 components: {},
21 props: {},
22 data() {
23 return {
24 lpbData: {
25 bsm: "e9d1d425c30dd51b72d6f9daacd65d51",
26 xmmc: "金星小区A幢",
27 type: "zrz",
28 max_singlefloorhouse: "10",
29 zrzh: "600000 000 000 GB 00000 F0001",
30 total_floors: "10",
31 min_floor: "-2",
32 max_floor: "8",
33 ljzs: [
34 {
35 bsm: "ljzljz0101010101",
36 ljzmc: "地下车库",
37 type: "ljz",
38 max_singlefloorhouse: "10",
39 total_hs: "2",
40 min_c: "1",
41 max_c: "2",
42 zdys: [
43 {
44 bsm: "zdybsm01",
45 zdymc: "一单元",
46 type: "zdy",
47 max_singlefloorhouse: "2",
48 total_floors: "2",
49 min_floor: "1",
50 max_floor: "2",
51 cs: [
52 {
53 bsm: "c_01",
54 type: "c",
55 sjc: "1",
56 ch: "1",
57 maxhs: "2",
58 hs: [
59 {
60 BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
61 SHBW: "S01-01(1)",
62 SJCS: "1",
63 SJHS: "1",
64 HH: "1",
65 BDCDYH: "F0001",
66 status: "10101011",
67 },
68 {
69 BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
70 SHBW: "S01-02(2)",
71 SJCS: "2",
72 SJHS: "1",
73 HH: "2",
74 BDCDYH: "F0002",
75 status: "10101011",
76 },
77 ],
78 },
79 {
80 bsm: "c_02",
81 type: "c",
82 sjc: "2",
83 ch: "2",
84 maxhs: "2",
85 hs: [
86 {
87 BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
88 SHBW: "S01-01(1)",
89 SJCS: "1",
90 SJHS: "1",
91 HH: "1",
92 BDCDYH: "F0001",
93 status: "10101011",
94 },
95 {
96 BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
97 SHBW: "S01-02(2)",
98 SJCS: "2",
99 SJHS: "1",
100 HH: "2",
101 BDCDYH: "F0002",
102 status: "10101011",
103 },
104 ],
105 },
106 ],
107 },
108 ],
109 },
110 {
111 bsm: "ljzljz0101010101",
112 ljzmc: "商业",
113 type: "ljz",
114 max_singlefloorhouse: "10",
115 total_hs: "2",
116 min_c: "1",
117 max_c: "2",
118 },
119 {
120 bsm: "ljzljz0101010101",
121 ljzmc: "住宅",
122 type: "ljz",
123 max_singlefloorhouse: "10",
124 total_hs: "2",
125 min_c: "1",
126 max_c: "2",
127 },
128 ],
129 zdys: [
130 {
131 bsm: "zdybsm01",
132 zdymc: "一单元",
133 type: "zdy",
134 max_singlefloorhouse: "2",
135 total_floors: "2",
136 min_floor: "1",
137 max_floor: "2",
138 cs: [
139 {
140 bsm: "c_01",
141 type: "c",
142 sjc: "1",
143 ch: "1",
144 maxhs: "2",
145 hs: [
146 {
147 BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
148 SHBW: "S01-01(1)",
149 SJCS: "1",
150 SJHS: "1",
151 HH: "1",
152 BDCDYH: "F0001",
153 status: "10101011",
154 },
155 {
156 BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
157 SHBW: "S01-02(2)",
158 SJCS: "2",
159 SJHS: "1",
160 HH: "2",
161 BDCDYH: "F0002",
162 status: "10101011",
163 },
164 ],
165 },
166 {
167 bsm: "c_02",
168 type: "c",
169 sjc: "2",
170 ch: "2",
171 maxhs: "2",
172 hs: [
173 {
174 BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
175 SHBW: "S01-01(1)",
176 SJCS: "1",
177 SJHS: "1",
178 HH: "1",
179 BDCDYH: "F0001",
180 status: "10101011",
181 },
182 {
183 BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
184 SHBW: "S01-02(2)",
185 SJCS: "2",
186 SJHS: "1",
187 HH: "2",
188 BDCDYH: "F0002",
189 status: "10101011",
190 },
191 ],
192 },
193 ],
194 },
195 {
196 bsm: "zdybsm02",
197 zdymc: "二单元",
198 type: "zdy",
199 max_singlefloorhouse: "2",
200 total_floors: "2",
201 min_floor: "1",
202 max_floor: "2",
203 cs: [
204 {
205 bsm: "c_01",
206 type: "c",
207 sjc: "1",
208 ch: "1",
209 maxhs: "2",
210 hs: [
211 {
212 BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
213 SHBW: "S01-01(1)",
214 SJCS: "1",
215 SJHS: "1",
216 HH: "1",
217 BDCDYH: "F0001",
218 status: "10101011",
219 },
220 {
221 BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
222 SHBW: "S01-02(2)",
223 SJCS: "2",
224 SJHS: "1",
225 HH: "2",
226 BDCDYH: "F0002",
227 status: "10101011",
228 },
229 ],
230 },
231 {
232 bsm: "c_02",
233 type: "c",
234 sjc: "2",
235 ch: "2",
236 maxhs: "2",
237 hs: [
238 {
239 ID: "e9d1d425c30dd51b72d6f9daacd65d51",
240 RoomNo: "S01-01(2)",
241 SJCS: "2",
242 SJHS: "1",
243 SXH: "1",
244 REUN: "F0001",
245 status: "10101011",
246 },
247 {
248 ID: "e9d1d425c30dd51b72d6f9daacd65d51",
249 RoomNo: "S01-02",
250 SJCS: "1",
251 SJHS: "2",
252 SXH: "2",
253 REUN: "F0002",
254 status: "10101011",
255 },
256 ],
257 },
258 ],
259 },
260 ],
261 cs: [
262 {
263 bsm: "c_01",
264 type: "c",
265 sjc: "1",
266 ch: "1",
267 maxhs: "2",
268 hs: [
269 {
270 BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
271 SHBW: "S01-01(1)",
272 SJCS: "1",
273 SJHS: "1",
274 HH: "1",
275 BDCDYH: "F0001",
276 status: "10101011",
277 },
278 {
279 BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
280 SHBW: "S01-02(2)",
281 SJCS: "2",
282 SJHS: "1",
283 HH: "2",
284 BDCDYH: "F0002",
285 status: "10101011",
286 },
287 ],
288 },
289 {
290 bsm: "c_02",
291 type: "c",
292 sjc: "2",
293 ch: "2",
294 maxhs: "2",
295 hs: [
296 {
297 BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
298 SHBW: "S01-01(1)",
299 SJCS: "1",
300 SJHS: "1",
301 HH: "1",
302 BDCDYH: "F0001",
303 status: "10101011",
304 },
305 {
306 BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
307 SHBW: "S01-02(2)",
308 SJCS: "2",
309 SJHS: "1",
310 HH: "2",
311 BDCDYH: "F0002",
312 status: "10101011",
313 },
314 ],
315 },
316 ],
317 },
318 lpbContentWidth: "",
319 };
320 },
321 created() {},
322 mounted() {
323 setTimeout(() => {
324 this.lpbContentWidth = this.$store.state.contentWidth - 34 - 6;
325 }, 100);
326 },
327 methods: {},
328 computed: {
329 createFlagChange() {
330 return this.$parent.createFlag;
331 },
332 legendToggleFlagChange() {
333 return this.$parent.legendToggleFlag;
334 },
335 },
336 watch: {
337 createFlagChange: function(val) {
338 setTimeout(() => {
339 this.lpbContentWidth = this.$refs.lpbContent.offsetWidth -6;
340 }, 501);
341 },
342 legendToggleFlagChange: function(val) {
343 setTimeout(() => {
344 this.lpbContentWidth = this.$refs.lpbContent.offsetWidth -6;
345 }, 501);
346 },
347 },
348 };
349 </script>
350 <style scoped lang="less">
351 .lpbContent-wrap {
352 width: 100%;
353 height: 100%;
354 overflow: hidden;
355 position: relative;
356 .lpbContent {
357 width: 100%;
358 height: 100%;
359 position: relative;
360 overflow: scroll;
361 .ljz {
362 width: 500px;
363 height: 400px;
364 background-color: darkorange;
365 }
366 .zdy {
367 width: 1580px;
368 height: 200px;
369 background-color: rosybrown;
370 }
371 .ch {
372 width: 800px;
373 height: 200px;
374 background-color: rgb(165, 136, 62);
375 }
376 }
377 .zrz {
378 height: 60px;
379 line-height: 60px;
380 background-color: darkgoldenrod;
381 position: absolute;
382 bottom: 0;
383 text-align: center;
384 transition: 0.5s;
385 }
386 }
387 </style>