Skip to content

任超 / js.CadastralSystem

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

楼盘表模块布局

1 parent 9e5fb92e
Expand all
Inline Side-by-side
Showing 4 changed files with 395 additions and 3 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>
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>