Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
80c2a733 by renchao@pashanhoo.com
Options

style:代码整理

1 parent da7a03df
Inline Side-by-side
Showing 13 changed files with 267 additions and 4952 deletions
1 <template>
2 <div class="temp">
3 <table class="tempTable" cellspacing="0" cellpadding="0" border="1">
4 <tr>
5 <template v-if="lq == ''">
6 <td colspan="2"><span class="table-title">权利人信息</span></td>
7 <td colspan="2">共有方式</td>
8 </template>
9 <template v-else>
10 <td colspan="2">共有方式</td>
11 </template>
12 <td :colspan="lq == '' ? 8 : 10">
13 <el-row>
14 <el-col :span="14" class="fl" style="line-height:32px">
15 <el-radio-group v-model="gyfs" @change="updateGyfs">
16 <el-radio :label="item.bsm" :disabled="+qszt !== 0 || item.disabled" :key="item.bsm"
17 v-for="item in gyfsList">{{ item.mc }}</el-radio>
18 </el-radio-group>
19 </el-col>
20 <el-col :span="10" class="fr">
21 <!-- <div v-show="qszt=='0'" class="fr" style="margin-right:20px">
22 <el-button class="qlrBtn" size="mini" @click="addRow">
23 <i class="iconfont iconxinzeng"></i> 新增
24 </el-button>
25 <el-button class="qlrBtn" size="mini" @click="changeRow">
26 <i class="iconfont iconbianji"></i> 编辑
27 </el-button>
28 <el-button class="qlrBtn" size="mini" @click="delRow">
29 <i class="iconfont iconshanchu"></i> 删除
30 </el-button>
31 </div>-->
32 <div v-show="+qszt === 0" class="fr" style="margin-right:20px">
33 <el-button class="qlrBtn" size="mini"
34 :disabled="+qszt !== 0 || (tableData.length > 0 && gyfs === 'PSHGSBDCQJDC000000000000DC340010')"
35 @click="addRow">
36 <i class="iconfont iconxinzeng" :disabled="+qszt !== 0"></i> 新增
37 </el-button>
38 <el-button class="qlrBtn" size="mini" :disabled="+qszt !== 0" @click="changeRow">
39 <i class="iconfont iconbianji"></i> 编辑
40 </el-button>
41 <el-button class="qlrBtn" size="mini" :disabled="+qszt !== 0" @click="delRow">
42 <i class="iconfont iconshanchu"></i> 删除
43 </el-button>
44 </div>
45 </el-col>
46 </el-row>
47 </td>
48 </tr>
49 </table>
50
51 <el-table class="qlrTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
52 @row-dblclick="rowDbclick" border>
53 <el-table-column type="selection" width="40" align="center">
54 </el-table-column>
55 <el-table-column prop="qlrmc" label="权利人名称" align="center">
56 </el-table-column>
57 <el-table-column prop="qlrlxbsm_dictText" label="权利人类型" align="center">
58 </el-table-column>
59 <el-table-column prop="zjzlbsm_dictText" label="证件种类" align="center">
60 </el-table-column>
61 <el-table-column prop="zjh" label="证件号" align="center">
62 </el-table-column>
63 <el-table-column prop="dz" label="通讯地址" align="center">
64 </el-table-column>
65 <el-table-column prop="dh" label="联系电话" align="center">
66 </el-table-column>
67 </el-table>
68 <el-dialog :close-on-click-modal="false" title="权利人信息" :visible.sync="dialogVisible" custom-class="insetDialog"
69 append-to-body width="50%">
70 <el-form :model="formData" class="qlrForm">
71 <table class="zdjbxxTable" cellspacing="0" cellpadding="0" border="1">
72 <tr>
73 <td colspan="4" class="tdright"><i class="requisite">*</i>权利人名称</td>
74 <td colspan="6">
75 <el-input v-model="formData.qlrmc" ref="qlrmc" @blur="inputBlur($event)"></el-input>
76 </td>
77 <td colspan="4" class="tdright"><i class="requisite">*</i>权利人类型</td>
78 <td colspan="6">
79 <el-select class="formSelect" v-model="formData.qlrlxbsm" ref="qlrlxbsm">
80 <el-option v-for="item in $store.state.qlrlxList" :key="item.bsm" :label="item.mc" :value="item.bsm">
81 </el-option>
82 </el-select>
83 </td>
84 </tr>
85 <tr>
86 <td colspan="4" class="tdright"><i class="requisite">*</i>证件类型</td>
87 <td colspan="6">
88 <el-select class="formSelect" v-model="formData.zjzlbsm" ref="zjzlbsm">
89 <el-option v-for="item in $store.state.zjzlList" :key="item.bsm" :label="item.mc" :value="item.bsm">
90 </el-option>
91 </el-select>
92 </td>
93 <td colspan="4" class="tdright"><i class="requisite">*</i>证件号</td>
94 <td colspan="6">
95 <el-input maxlength="18" v-model="formData.zjh" ref="zjh" @blur="inputBlur($event)"></el-input>
96 </td>
97 </tr>
98 <tr>
99 <td colspan="4" class="tdright"><i class="requisite">*</i>电话</td>
100 <td colspan="6">
101 <!-- @blur="inputBlur($event)"-->
102 <el-input v-model="formData.dh" ref="dh" @blur="inputBlur($event)"></el-input>
103 </td>
104 <td colspan="4" class="tdright"><i class="requisite">*</i>地址</td>
105 <td colspan="6">
106 <el-input v-model="formData.dz" ref="dz" @blur="inputBlur($event)"></el-input>
107 </td>
108 </tr>
109 <tr>
110 <td colspan="4" class="tdright">国家</td>
111 <td colspan="6">
112 <el-select class="formSelect" v-model="formData.gjbsm">
113 <el-option v-for="item in $store.state.gjList" :key="item.bsm" :label="item.mc" :value="item.bsm">
114 </el-option>
115 </el-select>
116 </td>
117 <td colspan="4" class="tdright">户籍所在省市</td>
118 <td colspan="6">
119 <el-select class="formSelect" v-model="formData.hjszssbsm">
120 <el-option v-for="item in $store.state.ssList" :key="item.bsm" :label="item.mc" :value="item.bsm">
121 </el-option>
122 </el-select>
123 </td>
124 </tr>
125 <tr>
126 <td colspan="4" class="tdright">性别</td>
127 <td colspan="6">
128 <el-select class="formSelect" v-model="formData.xbbsm">
129 <el-option v-for="item in $store.state.xbList" :key="item.bsm" :label="item.mc" :value="item.bsm">
130 </el-option>
131 </el-select>
132 </td>
133 <td colspan="4" class="tdright">邮编</td>
134 <td colspan="6">
135 <el-input v-model="formData.yb" />
136 </td>
137 </tr>
138 <tr>
139 <td colspan="4" class="tdright">所属行业</td>
140 <td colspan="6">
141 <el-select class="formSelect" v-model="formData.sshy">
142 <el-option v-for="item in $store.state.sshyList" :key="item.bsm" :label="item.mc" :value="item.bsm">
143 </el-option>
144 </el-select>
145 </td>
146 <td colspan="4" class="tdright">电子邮件</td>
147 <td colspan="6">
148 <el-input v-model="formData.dzyj" />
149 </td>
150 </tr>
151 <tr>
152 <th colspan="20">法人信息</th>
153 </tr>
154 <tr>
155 <td colspan="4" class="tdright">法定代表人或负责人姓名</td>
156 <td colspan="6">
157 <el-input v-model="formData.fr.dlrfrmc" />
158 </td>
159 <td colspan="4" class="tdright">证件类型</td>
160 <td colspan="6">
161 <el-select class="formSelect" v-model="formData.fr.zjzlbsm">
162 <el-option v-for="item in $store.state.zjzlList" :key="item.bsm" :label="item.mc" :value="item.bsm">
163 </el-option>
164 </el-select>
165 </td>
166 </tr>
167 <tr>
168 <td colspan="4" class="tdright">证件号码</td>
169 <td colspan="6">
170 <el-input v-model="formData.fr.zjh" />
171 </td>
172 <td colspan="4" class="tdright">电话</td>
173 <td colspan="6">
174 <el-input v-model="formData.fr.dh" />
175 </td>
176 </tr>
177 <tr>
178 <th colspan="20">代理人信息</th>
179 </tr>
180 <template v-for="(item, index) in formData.dlrList">
181 <tr :key="item.index">
182 <td :rowspan="(formData.dlrList.length - 1) * 2 + 2" v-if="index == 0" class="btnCol">
183 <span :style="{ 'padding-top': (formData.dlrList.length - 1) * 36 + 20 + 'px' }">
184 <i v-show="index == 0" class="iconfont iconicon-test2" @click="handleClick(item, index, 'add')"></i>
185 </span>
186 <!-- <div class="line" v-show=" index != formData.dlrList.length-1"></div> -->
187 </td>
188 <td rowspan="2" class="minusBtnCol">
189 <span>
190 <i class="iconfont icon-" @click="handleClick(item, index, 'minus')"></i>
191 </span>
192 </td>
193 <td class="tdright" colspan="2">代理人姓名</td>
194 <td colspan="6">
195 <el-input v-model="item.dlrfrmc" />
196 </td>
197 <td colspan="4" class="tdright">证件类型</td>
198 <td colspan="6">
199 <el-select class="formSelect" v-model="item.zjzlbsm">
200 <el-option v-for="item in $store.state.zjzlList" :key="item.bsm" :label="item.mc" :value="item.bsm">
201 </el-option>
202 </el-select>
203 </td>
204 </tr>
205 <!-- <tr :key="item.dh">-->
206 <tr :key="'dh' + index">
207 <td class="tdright" colspan="2">证件号码</td>
208 <td colspan="6">
209 <el-input v-model="item.zjh" />
210 </td>
211 <td colspan="4" class="tdright">电话</td>
212 <td colspan="6">
213 <el-input v-model="item.dh" />
214 </td>
215 </tr>
216 </template>
217
218 <tr>
219 <th colspan="20">权利信息</th>
220 </tr>
221 <tr>
222 <td colspan="4" class="tdright">共有方式</td>
223 <td colspan="6">
224 <el-select class="formSelect" v-model="formData.gyfsbsm" disabled>
225 <el-option v-for="item in $store.state.gyfsList" :key="item.bsm" :label="item.mc" :value="item.bsm">
226 </el-option>
227 </el-select>
228 </td>
229 <td colspan="4" class="tdright">权利比例(%)</td>
230 <td colspan="6">
231 <el-input v-model="formData.qlbl"></el-input>
232 </td>
233 </tr>
234 <tr>
235 <td colspan="4" class="tdright">房产证号</td>
236 <td colspan="6">
237 <el-input v-model="formData.fczh"></el-input>
238 </td>
239 <td colspan="4" class="tdright">土地证号</td>
240 <td colspan="6">
241 <el-input v-model="formData.tdzh"></el-input>
242 </td>
243 </tr>
244 <tr>
245 <td colspan="4" class="tdright">共有情况</td>
246 <td colspan="12">
247 <el-input v-model="formData.gyqk"></el-input>
248 </td>
249 </tr>
250 </table>
251 </el-form>
252 <div class="dialog-footer">
253 <el-button type="primary" @click="addNewQlrInfo">确 定</el-button>
254 <el-button @click="dialogVisible = false">取 消</el-button>
255 </div>
256 </el-dialog>
257 </div>
258 </template>
259
260 <script>
261 // import { getDdicByMC } from "@api/common";
262 // import { insertQlrDlrFr, getQlrInfoByGlbsm, updateQlrDlrFr, deleteQlrDlrFrByQlrbsm, updateGyGyQlrQk, getQlrByGlbsmAndType } from "@api/qlr";
263
264 export default {
265 props: {
266 qszt: {
267 type: String,
268 default: "0",
269 },
270 title: {
271 type: String,
272 default: "",
273 },
274 topHeight: {
275 type: String,
276 default: "15vh",
277 },
278 bsm: {
279 type: String,
280 default: "",
281 },
282 type: {
283 type: String,
284 default: "",
285 },
286 lq: {
287 type: String,
288 default: "",
289 }
290 },
291 data () {
292 return {
293 update: false,
294 gyfs: this.$store.state.gyfsList[0].bsm,
295 tableData: [],
296 gyfsList: [],
297 //表格选中项
298 multipleSelection: [],
299 dialogVisible: false,
300 formData: {
301 addQjDlrFrRequest: [],
302 dlrList: [
303 {
304 dh: "",
305 dlrfrmc: "",
306 qlrbsm: "",
307 zjh: "",
308 zjzlbsm: "",
309 },
310 ],
311 fr: {
312 dh: "",
313 dlrfrmc: "",
314 qlrbsm: "",
315 zjh: "",
316 zjzlbsm: "",
317 },
318 bz: "",
319 dh: "",
320 dz: "",
321 dzyj: "",
322 fczh: "",
323 fzjg: "",
324 gjbsm: "PSHGSBDCQJDC000000000000DC350010", //默认中国
325 glbsm: "",
326 gyfsbsm: "",
327 gyqk: "",
328 gzdw: "",
329 hjszssbsm: "",
330 isdel: 0,
331 qlbl: "",
332 qlrlxbsm: "",
333 qlrmc: "",
334 sshy: "",
335 sxh: 0,
336 tdzh: "",
337 xbbsm: "",
338 yb: "",
339 zjh: "",
340 zjzlbsm: "",
341 lqqlrtype: ""
342 },
343 glbsm: '',
344 rules: [],
345 };
346 },
347 methods: {
348 inputBlur (e) {
349 if (e.target.value != '') {
350 e.target.style.border = ""
351 } else {
352 e.target.style.border = "1px solid red";
353 e.target.style.boxSizing = 'border-box';
354 }
355 },
356
357 //新增行数据
358 addRow () {
359
360 console.log(this.gyfs, '共有方式')
361
362 this.update = false;
363 let flag = false;
364 for (let i = 0; i < this.$store.state.gyfsList.length; i++) {
365 let item = this.$store.state.gyfsList[i];
366 if (item.mc === "单独所有" && item.bsm === this.gyfs) {
367 flag = true;
368 }
369 }
370 if (flag) {
371 if (this.tableData.length > 0) {
372 this.$message({
373 message: "当前方式不可再新增权利人",
374 type: "warning",
375 });
376 } else {
377 this.formData.gyfsbsm = this.gyfs;
378 this.dialogVisible = true;
379 }
380 } else {
381 this.formData.gyfsbsm = this.gyfs;
382 this.dialogVisible = true;
383 }
384 },
385 //确认权利人信息按钮；可以进行新增；可以进行更新；
386 addNewQlrInfo () {
387
388 this.rules = [
389 {
390 data: this.formData.qlrmc,
391 name: '权利人名称',
392 dom: this.$refs.qlrmc,
393 rule: /^\s*$/g, //非空
394 },
395 {
396 data: this.formData.qlrlxbsm,
397 name: '权利人类型',
398 dom: this.$refs.qlrlxbsm,
399 rule: /^\s*$/g, //非空
400 },
401 {
402 data: this.formData.zjzlbsm,
403 name: '证件类型',
404 dom: this.$refs.zjzlbsm,
405 rule: /^\s*$/g, //非空
406 },
407 {
408 data: this.formData.zjh,
409 name: '证件号',
410 dom: this.$refs.zjh,
411 rule: /^\s*$/g, //非空
412 },
413 {
414 data: this.formData.dh,
415 name: '电话',
416 dom: this.$refs.dh,
417 rule: /^\s*$/g, //非空
418 },
419 {
420 data: this.formData.dz,
421 name: '地址',
422 dom: this.$refs.dz,
423 rule: /^\s*$/g, //非空
424 },
425 ]
426 let flag = true;
427 this.rules.forEach(item => {
428 if (item.rule.test(item.data) || item.data == null) {
429 if (item.dom.$el) {
430 item.dom.$el.style.border = '1px solid red';
431 item.dom.$el.style.boxSizing = 'border-box';
432 } else {
433 item.dom.style.border = '1px solid red';
434 item.dom.style.boxSizing = 'border-box';
435 }
436 flag = false;
437 return false
438 }
439 console.log(this.tableData, '权利人信息')
440 console.log(this.$store.state.gyfsList[0].bsm, '确定之后共有方式')
441 })
442 this.$nextTick(() => {
443 if (flag) {
444 //todo 权利人页面调整
445 this.formData.addQjDlrFrRequest = [];
446 this.formData.glbsm = this.bsm;
447 //将代理人，法人数据合在一起，名称为addQjDlrFrRequest；
448 //法人的type字段类型为0,
449 this.formData.fr.type = 0;
450 this.formData.addQjDlrFrRequest.push(this.formData.fr);
451 for (let k = 0; k < this.formData.dlrList.length; k++) {
452 //代理人的type字段类型为1,
453 this.formData.dlrList[k].type = 1;
454 this.formData.addQjDlrFrRequest.push(this.formData.dlrList[k]);
455 }
456 //林权权利人类型判断
457 this.formData.lqqlrtype = this.lq;
458 //如果是从更新按钮点击确定的则进行更新操作，如果不是，则进行添加操作
459 if (this.update) {
460 console.log(this.formData)
461 updateQlrDlrFr(this.formData).then((res) => {
462 if (res.code === 200) {
463 this.dialogVisible = false;
464 this.$message.success("修改完成！");
465 this.getQlrInfo(this.bsm);
466 this.update = false;
467 }
468 })
469 } else {
470 insertQlrDlrFr(this.formData).then((res) => {
471 if (res.code === 200) {
472 this.dialogVisible = false;
473 this.tableData.push(this.formData);
474 this.getQlrInfo(this.bsm);
475 Object.assign(this.$data, this.$options.data())
476
477 }
478 })
479 }
480 }
481 })
482
483
484 },
485 //修改行数据
486 changeRow () {
487 if (this.multipleSelection.length === 1) {
488 this.dialogVisible = true;
489 this.update = true;
490 this.formData = this.multipleSelection[0];
491 if (this.multipleSelection[0].frList.length > 0) {
492 this.formData.fr = this.multipleSelection[0].frList[0];
493 }
494 } else {
495 this.$message({
496 message: "请选择一条信息后继续操作",
497 type: "warning",
498 });
499 }
500 },
501
502 updateGyfs (val) {
503 console.log(val, this.type)
504 updateGyGyQlrQk(this.bsm, this.type, val).then((res) => {
505 if (res.code === 200) {
506 console.log("修改完成！")
507 //todo 修改该建筑物的所有权利人的相关共有方式
508 }
509 })
510 },
511
512 //父组件改变子组件的共有方式
513 changeGyfs (val) {
514 this.gyfs = val;
515 },
516
517 //行双击事件
518 rowDbclick (row) {
519 if (+this.qszt == 0) {
520 this.dialogVisible = true;
521 this.update = true;
522 this.formData = row;
523 if (row.frList.length > 0) {
524 this.formData.fr = row.frList[0];
525 }
526 }
527 },
528
529 // inputBlur(e){
530 // if(e.target.value!=''){
531 // console.log(e.target.value)
532 // console.log(!(/^1(3|4|5|6|7|8|9)d{9}$/.test(e.target.value)))
533 // if(!(/^1(3|4|5|6|7|8|9)d{9}$/.test(e.target.value))){
534 // e.target.style.border="1px solid red";
535 // e.target.style.boxSizing = 'border-box';
536 // }else {
537 // e.target.style.border=""
538 // }
539 // }else{
540 // e.target.style.border="1px solid red";
541 // e.target.style.boxSizing = 'border-box';
542 // }
543 // },
544
545 //删除行数据
546 delRow () {
547 if (this.multipleSelection.length > 0) {
548 let qlrbsms = [];
549 for (let i = 0; i < this.multipleSelection.length; i++) {
550 qlrbsms.push(this.multipleSelection[i].qlrbsm)
551 }
552 console.log(qlrbsms)
553 deleteQlrDlrFrByQlrbsm(qlrbsms).then((res) => {
554 if (res.code === 200) {
555 this.$message.success("删除完成！")
556 this.getQlrInfo(this.bsm);
557 }
558 })
559 } else {
560 this.$message({
561 message: "请至少选择一条信息后继续操作",
562 type: "warning",
563 });
564 }
565 },
566 //选中表格某一项
567 handleSelectionChange (val) {
568 this.multipleSelection = val;
569 },
570
571 //供父组件调用来获取共有方式
572 getQlgyfsData () {
573 return this.gyfs;
574 },
575 //供父组件调用来获取权利人表格数据
576 getQlrxxData () {
577 return this.tableData;
578 },
579 //增删代理人
580 handleClick (obj, ind, type) {
581 if (type === "add") {
582 this.formData.dlrList.push({
583 id: Math.random(),
584 dh: "",
585 dlrfrmc: "",
586 qlrbsm: "",
587 zjh: "",
588 zjzlbsm: "",
589 });
590 } else {
591 this.formData.dlrList.forEach((item, index) => {
592 if (index == ind && this.formData.dlrList.length > 1) {
593 this.formData.dlrList.splice(ind, 1);
594 }
595 });
596 }
597 },
598 getQlrInfo (bsm) {
599 if (this.lq == "") {
600 getQlrInfoByGlbsm(bsm).then((res) => {
601 if (res.code) {
602 if (res.result != null) {
603 this.tableData = res.result;
604 if (this.tableData.length === 0) {
605 this.gyfs = this.$store.state.gyfsList[0].bsm;
606 } else {
607 this.gyfs = res.result[0].gyfsbsm;
608 }
609 }
610 }
611 })
612 } else {
613 let params = {
614 bsm: bsm,
615 type: this.lq
616 }
617 getQlrByGlbsmAndType(params).then((res) => {
618 if (res.code) {
619 if (res.result != null) {
620 this.tableData = res.result;
621 if (this.tableData.length === 0) {
622 this.gyfs = this.$store.state.gyfsList[0].bsm;
623 } else {
624 this.gyfs = res.result[0].gyfsbsm;
625 }
626 }
627 }
628 })
629 }
630 }
631 },
632 created () {
633 this.gyfsList = this.$store.state.gyfsList;
634 },
635 mounted () {
636 this.getQlrInfo(this.bsm);
637 },
638 watch: {
639 tableData: {
640 handler: function (v) {
641 this.gyfsList[0].disabled = v.length > 1;
642 },
643 deep: true
644 },
645 dialogVisible (n) {
646 if (n === false) {
647 this.formData = {
648 addQjDlrFrRequest: [],
649 dlrList: [
650 {
651 dh: "",
652 dlrfrmc: "",
653 qlrbsm: "",
654 zjh: "",
655 zjzlbsm: "",
656 },
657 ],
658 fr: {
659 dh: "",
660 dlrfrmc: "",
661 qlrbsm: "",
662 zjh: "",
663 zjzlbsm: "",
664 },
665 bz: "",
666 dh: "",
667 dz: "",
668 dzyj: "",
669 fczh: "",
670 fzjg: "",
671 gjbsm: "PSHGSBDCQJDC000000000000DC350010", //默认中国
672 glbsm: "",
673 gyfsbsm: "",
674 gyqk: "",
675 gzdw: "",
676 hjszssbsm: "",
677 isdel: 0,
678 qlbl: "",
679 qlrlxbsm: "",
680 qlrmc: "",
681 sshy: "",
682 sxh: 0,
683 tdzh: "",
684 xbbsm: "",
685 yb: "",
686 zjh: "",
687 zjzlbsm: "",
688 }
689 }
690 },
691
692 "formData.qlrlxbsm": function (val) {
693 if (val != '') {
694 this.$refs.qlrlxbsm.$el.style.border = '';
695 }
696 },
697 }
698 };
699 </script>
700 <style lang="scss">
701 .temp {
702 width: 100%;
703
704 table {
705 border-bottom: 0;
706 background-color: #fff;
707 font-size: 14px;
708 width: 100%;
709 table-layout: fixed;
710
711 .qlrBtn {
712 border: 0;
713 font-size: 14px;
714 }
715
716 .qlrBtn:hover {
717 background-color: none !important;
718 }
719
720 .iconfont {
721 font-size: 14px !important;
722 }
723
724 .span {
725 color: #409eff;
726 margin-right: 10px;
727 cursor: pointer;
728 }
729
730 .noEdit {
731 color: #606266;
732 margin-right: 10px;
733 cursor: not-allowed;
734 }
735
736 .el-radio {
737 margin-right: 20px !important;
738 }
739
740 td {
741 text-align: center;
742 padding: 8px 0;
743 }
744 }
745
746 .table-title {
747 font-weight: 700;
748 font-size: 15px;
749 }
750
751 .el-table th {
752 background-color: #fff !important;
753 }
754
755 el-table td,
756 .el-table th.is-leaf,
757 .el-table--border,
758 .el-table--group {
759 border-color: black;
760 }
761
762 .el-table--border::after,
763 .el-table--group::after,
764 .el-table::before {
765 background-color: rgba(0, 0, 0, 0);
766 }
767
768 .el-table--border td,
769 .el-table--border th,
770 .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
771 border-right: 1px solid#E6E6E6;
772 }
773
774 .el-table td,
775 .el-table th {
776 padding: 12px 0;
777 color: #333 !important;
778 font-weight: normal;
779 }
780
781 .el-table td,
782 .el-table th.is-leaf {
783 border-bottom: 1px solid#E6E6E6;
784 border-color: #E6E6E6 !important;
785 }
786
787 .qlrTable {
788 border-color: #E6E6E6 !important;
789 border-bottom: 0;
790 border-right: 0;
791 position: relative;
792 top: -1px;
793
794 .el-input__inner {
795 height: 20px;
796 margin: 0;
797 line-height: 20px;
798 outline: none;
799 border: none;
800 color: #606764;
801 overflow: visible;
802 cursor: text;
803 text-align: center;
804 }
805 }
806 }
807
808 .insetDialog {
809 .qlrForm {
810 height: 500px;
811 overflow-y: scroll;
812 }
813
814 .zdjbxxTable {
815 margin: 10px 0;
816 background-color: #fff;
817 font-size: 14px;
818 width: 100%;
819 border-bottom: 1px solid #000;
820
821 .btnCol,
822 .minusBtnCol {
823 position: relative;
824 padding-right: 0;
825
826 span {
827 display: inline-block;
828 width: 100%;
829 height: 100%;
830 position: relative;
831 box-sizing: border-box;
832 padding-right: 10px;
833 padding-top: 20px;
834 }
835
836 .line {
837 width: 100%;
838 height: 2px;
839 background: #fff;
840 }
841
842 i {
843 color: #66b1ff;
844 font-size: 30px;
845 cursor: pointer;
846 z-index: 1;
847 }
848 }
849
850 .minusBtnCol {
851 i {
852 color: #FA6400;
853 }
854 }
855
856 th {
857 height: 36px;
858 line-height: 36px;
859 }
860
861 td {
862 text-align: right;
863 height: 36px;
864 }
865
866 /deep/.el-input__inner {
867 margin: 0;
868 height: 36px;
869 outline: none;
870 border: none;
871 color: #606764;
872 overflow: visible;
873 text-align: left;
874 cursor: text;
875 }
876
877 .percent68 {
878 width: 68% !important;
879 float: left;
880 position: relative;
881 top: 7px;
882 }
883
884 .percent30 {
885 width: 30% !important;
886 float: left;
887 }
888
889 .el-input__icon {
890 line-height: 37px;
891 }
892
893 .el-select {
894 width: 100%;
895 }
896 }
897
898 .dialog-footer {
899 width: 160px;
900 margin: 20px auto 0;
901 }
902 }
903 </style>
1 <template>
2 <div class="temp">
3 <div class="qlxzAdd fl">
4 <span>权利性质</span>
5 <i class="iconfont iconicon-test2" v-if="formData.qszt == '0'" @click="handleClick(0, 'add')"></i>
6 <i class="iconfont iconicon-test2" v-if="formData.qszt != '0'" style="cursor: not-allowed;"></i>
7 </div>
8 <el-row class="qlxzModule fl" v-for="(items, index) in countList" :key="items.id">
9 <template v-for="(childItem, childIndex) in items.list">
10 <el-col :span="1" class="btnCol " :key="childIndex + '1'" :class="childIndex > 0 ? 'childYT noTopBorder' : ''">
11 <i v-show="childIndex == 0 && formData.qszt == '0'"
12 :style="{ 'margin-top': (items.list.length - 1) * 57 - 18 + 'px' }" class="iconfont icon- qlxzMinus"
13 @click="handleClick(index, 'minus')"></i>
14 <i v-show="childIndex == 0 && formData.qszt != '0'"
15 :style="{ 'margin-top': (items.list.length - 1) * 57 - 18 + 'px' }" class="iconfont icon- qlxzMinus"
16 style="cursor: not-allowed;"></i>
17 <div :class="items.hasNotBorder ? 'itemShow whiteItem' : 'whiteItem'" v-if="items.isInside"></div>
18 </el-col>
19 <el-col :span="2" class="btnCol tdytAdd" :key="childIndex + '17'"
20 :class="childIndex > 0 ? 'childYT noTopBorder' : ''">
21 <template>
22 <span v-show="childIndex == 0"
23 :style="{ 'margin-top': (items.list.length - 1) * 57 - 40 + 'px' }">土地用途</span>
24 <i class="iconfont iconicon-test1" v-show="childIndex == 0 && formData.qszt == '0'"
25 :style="{ 'margin-top': (items.list.length - 1) * 57 + 'px' }"
26 @click="handleInClick(index, childIndex, 'add')"></i>
27 <i class="iconfont iconicon-test1" v-show="childIndex == 0 && formData.qszt != '0'"
28 :style="{ 'margin-top': (items.list.length - 1) * 57 + 'px' }" style="cursor: not-allowed;"></i>
29 </template>
30 </el-col>
31 <el-col :span="1" class="btnCol tdytMinus pr10" :key="childIndex + '18'"
32 :class="childIndex > 0 ? 'childYT' : ''">
33 <i class="iconfont iconicon-test" v-if="formData.qszt == '0'"
34 @click="handleInClick(index, childIndex, 'minus')"></i>
35 <i class="iconfont iconicon-test" v-if="formData.qszt != '0'" style="cursor: not-allowed;"></i>
36 </el-col>
37 <template v-if="hasSyqx">
38 <el-col :span="3" :key="childIndex + '7'" :class="childIndex > 0 ? 'childYT' : ''">
39 <ul>
40 <li class="pr10"><i class="requisite">*</i>批准用途</li>
41 <li class="pr10"><i class="requisite">*</i>实际用途</li>
42 <li class="pr10"><i class="requisite">*</i>土地使用起始时间</li>
43 </ul>
44 </el-col>
45 <el-col :span="4" :key="childIndex + '6'" :class="childIndex > 0 ? 'childYT' : ''">
46 <ul>
47 <li>
48 <el-select-tree class="formSelect percent30" v-if="show" :default-expand-all="defaultExpandAll"
49 ref="pzytdm" :multiple="multiple" :placeholder="placeholder" :disabled="formData.qszt != '0'"
50 :data="$store.state.tdytList" :props="treeProps" :check-strictly="checkStrictly"
51 :clearable="clearable" v-model="childItem.pzytdm"></el-select-tree>
52 </li>
53 <li>
54 <el-select-tree class="formSelect percent30" v-if="show" :default-expand-all="defaultExpandAll"
55 ref="sjytdm" :multiple="multiple" :placeholder="placeholder" :disabled="formData.qszt != '0'"
56 :data="$store.state.tdytList" :props="treeProps" :check-strictly="checkStrictly"
57 :clearable="clearable" v-model="childItem.sjytdm"></el-select-tree>
58 </li>
59 <li>
60 <el-date-picker :disabled="formData.qszt != '0'" v-model="childItem.tdsyqssj" type="date" ref="tdsyqssj"
61 :picker-options="childItem.pickerStart" value-format="yyyy-MM-dd" placeholder="选择日期"
62 @blur="inputBlur($event, true)" @input="startTime(index, childIndex)">
63 </el-date-picker>
64 </li>
65 </ul>
66 </el-col>
67 <el-col :span="3" :key="childIndex + '5'" :class="childIndex > 0 ? 'childYT' : ''">
68 <ul>
69 <li class="pr10">地类编码</li>
70 <li class="pr10">地类编码</li>
71 <li class="pr10"><i class="requisite">*</i>年限</li>
72 </ul>
73 </el-col>
74 <el-col :span="3" :key="childIndex + '4'" :class="childIndex > 0 ? 'childYT' : ''">
75 <ul>
76 <li>
77 <input type="text" style="top: -1px;" :disabled="formData.qszt != '0'" v-model="childItem.pzytdm"
78 class="formInput" />
79 </li>
80 <li>
81 <input type="text" :disabled="formData.qszt != '0'" v-model="childItem.sjytdm" class="formInput" />
82 </li>
83 <li>
84 <input type="text" ref="syqx" @blur="inputBlur($event, false)" maxlength="3"
85 onkeyup="value=value.replace(/[^\d]/g,'')"
86 @input="sumTime(index, childIndex, childItem.syqx, childItem.syqx)" :disabled="formData.qszt != '0'"
87 v-model="childItem.syqx" class="formInput" />
88 </li>
89 </ul>
90 </el-col>
91 <el-col class="pr10" :span="3" :key="childIndex + '2'" :class="childIndex > 0 ? 'childYT' : ''">
92 <ul>
93 <li>等级</li>
94 <li>等级</li>
95 <li><i class="requisite">*</i>土地使用结束时间</li>
96 </ul>
97 </el-col>
98 <el-col :span="4" :key="childIndex + '3'" class="noRightBorder" :class="childIndex > 0 ? 'childYT ' : ''">
99 <ul>
100 <li>
101 <el-select :disabled="formData.qszt != '0'" class="formSelect percent30" v-model="childItem.pzdjbsm">
102 <el-option v-for="item in $store.state.tddjList" :key="item.bsm" :label="item.mc" :value="item.bsm">
103 </el-option>
104 </el-select>
105 </li>
106 <li>
107 <el-select :disabled="formData.qszt != '0'" class="formSelect percent30" v-model="childItem.sjdjbsm">
108 <el-option v-for="item in $store.state.tddjList" :key="item.bsm" :label="item.mc" :value="item.bsm">
109 </el-option>
110 </el-select>
111 </li>
112 <li>
113 <el-date-picker :disabled="formData.qszt != '0'" v-model="childItem.tdsyjssj" type="date" ref="tdsyjssj"
114 @blur="inputBlur($event, true)" :picker-options="childItem.pickerEnd"
115 @input="endTime(index, childIndex, $event)" value-format="yyyy-MM-dd" placeholder="选择日期">
116 </el-date-picker>
117 </li>
118 </ul>
119 </el-col>
120 </template>
121 <template v-if="!hasSyqx">
122 <el-col :span="5" :key="childIndex + '7'" :class="childIndex > 0 ? 'childYT' : ''">
123 <ul>
124 <li class="pr10"><i class="requisite">*</i>批准用途</li>
125 <li class="pr10"><i class="requisite">*</i>实际用途</li>
126 <li class="pr10"><i class="requisite">*</i>土地使用起始时间</li>
127 </ul>
128 </el-col>
129 <el-col :span="5" :key="childIndex + '6'" :class="childIndex > 0 ? 'childYT' : ''">
130 <ul>
131 <li>
132 <el-select-tree v-if="show" class="formSelect percent30" :default-expand-all="defaultExpandAll"
133 ref="pzytdm" :multiple="multiple" :placeholder="placeholder" :disabled="formData.qszt != '0'"
134 :data="$store.state.tdytList" :props="treeProps" :check-strictly="checkStrictly"
135 :clearable="clearable" v-model="childItem.pzytdm"></el-select-tree>
136 </li>
137 <li>
138 <el-select-tree v-if="show" class="formSelect percent30" :default-expand-all="defaultExpandAll"
139 ref="sjytdm" :multiple="multiple" :placeholder="placeholder" :disabled="formData.qszt != '0'"
140 :data="$store.state.tdytList" :props="treeProps" :check-strictly="checkStrictly"
141 :clearable="clearable" v-model="childItem.sjytdm"></el-select-tree>
142 </li>
143 <li>
144 <el-date-picker v-model="childItem.tdsyqssj" ref="tdsyqssj" :disabled="formData.qszt != '0'"
145 :picker-options="childItem.pickerStart" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
146 @blur="inputBlur($event, true)" @input="startTime(index, childIndex)">
147 </el-date-picker>
148 </li>
149 </ul>
150 </el-col>
151 <el-col :span="5" :key="childIndex + '5'" :class="childIndex > 0 ? 'childYT' : ''">
152 <ul>
153 <li class="pr10">地类编码</li>
154 <li class="pr10">地类编码</li>
155 <li class="pr10"><i class="requisite">*</i>土地使用结束时间</li>
156 </ul>
157 </el-col>
158 <el-col :span="5" :key="childIndex + '4'" :class="childIndex > 0 ? 'childYT' : ''">
159 <ul>
160 <li>
161 <input type="text" style="top: -1px;" :disabled="formData.qszt != '0'" v-model="childItem.pzytdm"
162 class="formInput" />
163 </li>
164 <li>
165 <input type="text" :disabled="formData.qszt != '0'" v-model="childItem.sjytdm" class="formInput" />
166 </li>
167 <li>
168 <el-date-picker v-model="childItem.tdsyjssj" :disabled="formData.qszt != '0'" ref="tdsyjssj" type="date"
169 value-format="yyyy-MM-dd" :picker-options="childItem.pickerEnd" placeholder="选择日期"
170 @blur="inputBlur($event, true)" @input="endTime(index, childIndex)">
171 </el-date-picker>
172 </li>
173 </ul>
174 </el-col>
175 </template>
176 </template>
177
178 <div class="title">
179 <el-select-tree v-if="show" class="formSelect" :disabled="formData.qszt != '0'"
180 :default-expand-all="defaultExpandAll" :multiple="multiple" :placeholder="placeholder"
181 :data="$store.state.qlxzList" :props="treeProps" :check-strictly="checkStrictly" :clearable="clearable"
182 ref="qlxzdm" v-model="items.qlxzdm"></el-select-tree>
183 </div>
184 </el-row>
185 </div>
186 </template>
187
188 <script>
189 // import { getDdicByMC } from "@api/common";
190 export default {
191 props: {
192 formData: {
193 type: Object,
194 default: () => {
195 return {};
196 },
197 },
198 hasSyqx: {
199 type: Boolean,
200 default: false
201 }
202 },
203 data () {
204 return {
205 //树型结构
206 show: true,
207 clearable: true,
208 defaultExpandAll: true,
209 multiple: false,
210 placeholder: "请选择",
211 disabled: false,
212 checkStrictly: true,
213 treeProps: {
214 value: "dm",
215 children: "children",
216 label: "mc",
217 },
218
219 countList: [
220 {
221 id: Math.random(),
222 isInside: false,
223 hasNotBorder: false,
224 bsm: "", //权利性质标识码
225 glbsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
226 qlxzdm: "",
227 qlxzmc: "",
228 zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
229 list: [
230 {
231 pzdjbsm: "",
232 pzdjmc: "",
233 pzytdm: "",
234 pzytmc: "",
235 pzytmj: 0,
236 qlxzbsm: "",
237 sjdjbsm: "",
238 sjdjmc: "",
239 sjytdm: "",
240 sjytmc: "",
241 sjytmj: 0,
242 syqx: "",
243 tdsyjssj: "",
244 pickerStart: {},
245 pickerEnd: {},
246 tdsyqssj: "",
247 tdzh: "",
248 },
249 ],
250 },
251 ],
252 outNum: 0,
253 rulesResult: true,//权利性质表单校验结果
254 };
255 },
256 created () { },
257 mounted () {
258 },
259 methods: {
260 startTime (index, childIndex) {
261 let startTime = this.countList[index].list[childIndex].tdsyqssj;
262 let endTime = this.countList[index].list[childIndex].tdsyjssj;
263 this.countList[index].list[childIndex].pickerEnd = {
264 disabledDate: (time) => {
265 if (Object.keys(startTime).length > 0) {
266 return new Date(startTime).getTime() > time.getTime();
267 } else {
268 return time.getTime() < Date.now();
269 }
270 }
271 }
272 if (Object.keys(startTime).length > 0 && Object.keys(endTime).length > 0) {
273 let startYear = new Date(startTime).getFullYear();
274 let endYear = new Date(endTime).getFullYear();
275 //年限暂时不算
276 // this.countList[index].list[childIndex].syqx=endYear-startYear;
277 }
278 },
279 sumTime (index, childIndex, syqx, e) {
280 this.$refs.syqx.forEach((item, index) => {
281 if (item.value == syqx) {
282 this.$refs.tdsyjssj[index].$el.style.border = ""
283 }
284 })
285 let startTime = this.countList[index].list[childIndex].tdsyqssj;
286 this.countList[index].list[childIndex].tdsyjssj = Number(startTime.substring(0, 4)) + Number(syqx) + startTime.slice(4, 10);
287 },
288 endTime (index, childIndex, e) {
289 let startTime = this.countList[index].list[childIndex].tdsyqssj;
290 let endTime = this.countList[index].list[childIndex].tdsyjssj;
291 this.countList[index].list[childIndex].pickerStart = {
292 disabledDate: (time) => {
293 if (Object.keys(endTime).length > 0) {
294 return new Date(endTime).getTime() < time.getTime();
295 } else {
296 return time.getTime() > Date.now();
297 }
298 }
299 }
300 if (Object.keys(startTime).length > 0 && Object.keys(endTime).length > 0) {
301 let startYear = new Date(startTime).getFullYear();
302 let endYear = new Date(endTime).getFullYear();
303 // this.countList[index].list[childIndex].syqx=endYear-startYear;
304 }
305 },
306 //外层操作
307 handleClick (ind, type) {
308 let outsideObj = {
309 id: Math.random(),
310 isInside: false,
311 hasNotBorder: false,
312 bsm: "", //权利性质标识码
313 glbsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
314 qlxzdm: "",
315 qlxzmc: "",
316 zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
317 list: [
318 {
319 pzdjbsm: "",
320 pzdjmc: "",
321 pzytdm: "",
322 pzytmc: "",
323 pzytmj: 0,
324 qlxzbsm: "",
325 sjdjbsm: "",
326 sjdjmc: "",
327 sjytdm: "",
328 pickerStart: {},
329 pickerEnd: {},
330 sjytmc: "",
331 sjytmj: 0,
332 syqx: "",
333 tdsyjssj: "",
334 tdsyqssj: "",
335 tdzh: "",
336 },
337 ],
338 };
339 if (type === "add") {
340 this.countList.push(outsideObj);
341 this.outNum++;
342 } else {
343 this.countList.forEach((item, index) => {
344 if (index == ind && this.countList.length > 1) {
345 this.countList.splice(index, 1);
346 }
347 });
348 this.outNum--;
349 }
350 },
351 reset () {
352 this.countList = [
353 {
354 id: Math.random(),
355 isInside: false,
356 hasNotBorder: false,
357 bsm: "", //权利性质标识码
358 glbsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
359 qlxzdm: "",
360 qlxzmc: "",
361 zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
362 list: [
363 {
364 pzdjbsm: "",
365 pzdjmc: "",
366 pzytdm: "",
367 pzytmc: "",
368 pzytmj: 0,
369 qlxzbsm: "",
370 sjdjbsm: "",
371 sjdjmc: "",
372 sjytdm: "",
373 sjytmc: "",
374 sjytmj: 0,
375 syqx: "",
376 tdsyjssj: "",
377 pickerStart: {},
378 pickerEnd: {},
379 tdsyqssj: "",
380 tdzh: "",
381 },
382 ],
383 },
384 ];
385 },
386 //内层操作
387 handleInClick (index, childIndex, type) {
388 let insideObj = {
389 pzdjbsm: "",
390 pzdjmc: "",
391 pzytdm: "",
392 pzytmc: "",
393 pzytmj: 0,
394 qlxzbsm: "",
395 sjdjbsm: "",
396 sjdjmc: "",
397 sjytdm: "",
398 sjytmc: "",
399 sjytmj: 0,
400 pickerStart: {},
401 pickerEnd: {},
402 syqx: "",
403 tdsyjssj: "",
404 tdsyqssj: "",
405 tdzh: "",
406 };
407 if (type === "add") {
408 this.countList[index].list.splice(childIndex + 1, 0, insideObj);
409 } else {
410 this.countList[index].list.forEach((item, childInd) => {
411 if (childIndex == childInd && this.countList[index].list.length > 1) {
412 this.countList[index].list.splice(childIndex, 1);
413 }
414 });
415 }
416 this.hasBorderOrNot();
417 },
418 //判断是否显示边框
419 hasBorderOrNot () {
420 this.countList.forEach((item, index) => {
421 if (index == this.countList.length - 1) {
422 item.hasNotBorder = true;
423 } else {
424 item.hasNotBorder =
425 item.isInside && !this.countList[index + 1].isInside ? true : false;
426 }
427 });
428 },
429 getQlxzDataList () {
430 return this.countList;
431 },
432 getRules () {
433 let rules = [];
434 let temp = 0;
435 this.countList.forEach((item, index) => {
436 rules.push({
437 data: this.countList[index].qlxzdm,
438 name: '权利性质',
439 dom: this.$refs.qlxzdm[index],
440 rule: /^\s*$/g, //非空
441 })
442 item.list.forEach((j, ind) => {
443 rules.push(
444 {
445 data: item.list[ind].tdsyqssj,
446 name: '土地使用起始时间',
447 dom: this.$refs.tdsyqssj[temp + ind],
448 // val:this.$refs.tdsyqssj[temp+ind].value,
449 rule: /^\s*$/g, //非空
450 },
451 {
452 data: item.list[ind].tdsyjssj,
453 name: '土地使用结束时间',
454 dom: this.$refs.tdsyjssj[temp + ind],
455 // val:this.$refs.tdsyjssj[temp+ind].value,
456 rule: /^\s*$/g, //非空
457 },
458 {
459 data: item.list[ind].pzytdm,
460 name: '批准用途',
461 dom: this.$refs.pzytdm[temp + ind],
462 // val:this.$refs.tdsyjssj[temp+ind].value,
463 rule: /^\s*$/g, //非空
464 },
465 {
466 data: item.list[ind].sjytdm,
467 name: '实际用途',
468 dom: this.$refs.sjytdm[temp + ind],
469 // val:this.$refs.tdsyjssj[temp+ind].value,
470 rule: /^\s*$/g, //非空
471 },
472 )
473 if (this.hasSyqx) {
474 rules.push(
475 {
476 data: item.list[ind].syqx,
477 name: '使用期限',
478 dom: this.$refs.syqx[temp + ind],
479 // val:this.$refs.syqx[temp+ind].value,
480 rule: /^\s*$/g, //非空
481 }
482 )
483 }
484 if (ind == item.list.length - 1) {
485 temp += item.list.length;
486 }
487 })
488 })
489 this.rulesResult = true;
490 rules.forEach(item => {
491 if (item.rule.test(item.data) || item.data == null) {
492 if (item.dom.$el) {
493 item.dom.$el.style.border = '1px solid red';
494 item.dom.$el.style.boxSizing = 'border-box';
495 } else {
496 item.dom.style.border = '1px solid red';
497 item.dom.style.boxSizing = 'border-box';
498 }
499 // this.$message({
500 // // message: item.name+'不能为空',
501 // message: '不能为空',
502 // type: "warning",
503 // });
504 this.rulesResult = false;
505 return false
506 }
507 })
508 // console.log(rules,'rules');
509 },
510 getRulesResult () {
511 return this.rulesResult
512 },
513 inputBlur (e, flag) {
514 if (flag) {
515 if (e.value != '') {
516 e.$el.style.border = ""
517 } else {
518 e.$el.style.border = "1px solid red"
519 e.$el.style.boxSizing = 'border-box';
520 }
521 } else {
522 if (e.target.value != '') {
523 e.target.style.border = ""
524 } else {
525 e.target.style.border = "1px solid red"
526 e.target.style.boxSizing = 'border-box';
527 }
528 }
529 },
530 //后续考虑在点击加减号时操作校验规则
531 // addRules(){
532 // this.tempQssj.push()
533 // },
534 // minusRules(){
535
536 // },
537 },
538 watch: {
539 countList: {
540 handler: function (newVal, oldVal) {
541 newVal.forEach((i, ind) => {
542 if (i.qlxzdm != '' && i.qlxzdm != null) {
543 console.log(this.$refs.qlxzdm, 'this.$refs.qlxzdm[ind]');
544 i.qlxzmc = this.$refs.qlxzdm[ind].name;
545 this.$refs.qlxzdm[ind].$el.style.border = ""
546 }
547 i.list.forEach((item, index) => {
548 if (item.sjytdm != '' && item.sjytdm != null) {
549 this.$refs.sjytdm[ind].$el.style.border = ""
550 }
551 if (item.pzytdm != '' && item.pzytdm != null) {
552 this.$refs.pzytdm[ind].$el.style.border = ""
553 }
554 })
555 })
556 },
557 deep: true
558 },
559 }
560 };
561 </script>
562 <style lang="scss">
563 .temp {
564 width: 100%;
565 height: 100%;
566
567 .iconfont {
568 cursor: pointer;
569 }
570
571 .qlxzAdd {
572 width: 100px;
573 height: 100%;
574 border-right: 1px solid #E6E6E6;
575 position: relative;
576
577 span {
578 font-size: 14px;
579 height: 140px;
580 text-align: center;
581 -webkit-writing-mode: vertical-rl;
582 writing-mode: vertical-rl;
583 position: absolute;
584 top: 50%;
585 margin-top: -70px;
586 left: 30%;
587 }
588
589 i {
590 color: #66b1ff;
591 font-size: 30px;
592 position: absolute;
593 top: 50%;
594 margin-top: -18px;
595 left: 55%;
596 z-index: 1;
597 }
598 }
599
600 .qlxzModule {
601 width: calc(100% - 102px);
602 height: auto;
603 position: relative;
604 border-bottom: 1px solid #E6E6E6;
605
606 .pr10 {
607 padding-right: 10px !important;
608 }
609
610 .el-col {
611 // height: 100%;
612 border-right: 1px solid #E6E6E6;
613 position: relative;
614 text-align: right;
615
616 .qlxz {
617 line-height: 34px;
618 }
619
620 .qlxzMinus {
621 color: #FA6400;
622 font-size: 30px;
623 position: absolute;
624 top: 50%;
625 left: 50%;
626 margin: -18px 0 0 -18px;
627 z-index: 1;
628 }
629
630 ul {
631 margin-top: 34px;
632
633 li {
634 height: 37px;
635 line-height: 37px;
636 text-decoration: none;
637 border-bottom: 1px solid #e6e6e6;
638
639 .el-select {
640 width: 100%;
641 }
642
643 .el-input {
644 width: 100%;
645 }
646
647 input {
648 position: relative;
649 top: -2px;
650 height: 35px;
651 width: calc(100% - 1px) !important;
652 }
653
654 .el-input__inner {
655 height: 34px;
656 }
657 }
658
659 li:last-child {
660 border-bottom: none;
661 }
662 }
663
664 .whiteItem {
665 background-color: #fff;
666 position: absolute;
667 width: 100%;
668 height: 2px;
669 bottom: -1px;
670 left: 0;
671 }
672
673 .itemShow {
674 bottom: 2px;
675 }
676 }
677
678 .childYT {
679 height: 114px;
680 border-top: 1px solid #E6E6E6;
681
682 ul {
683 margin-top: 0;
684
685 li {
686 .el-input__inner {
687 height: 29px;
688 }
689 }
690 }
691
692 .changeBtn {
693 margin-top: -48px;
694 }
695
696 .el-button+.el-button {
697 margin-top: 4px;
698 }
699 }
700
701 .noTopBorder {
702 border-top: 0;
703 }
704
705 .noRightBorder {
706 border-right: 0;
707 }
708
709 .el-col:nth-last-child(2) {
710 border-right: none;
711 }
712
713 .title {
714 width: 95.83333%;
715 height: 34px;
716 line-height: 34px;
717 background-color: #fff;
718 border-bottom: 1px solid #E6E6E6;
719 position: absolute;
720 right: 0;
721 top: 0;
722
723 .formSelect {
724 top: -1px;
725 width: 100%;
726
727 .el-input__inner {
728 height: 32px;
729 }
730 }
731 }
732 }
733
734 .btnCol {
735 position: relative;
736 height: 146px;
737
738 .changeBtn {
739 width: 46px;
740 height: 46px;
741 font-size: 30px;
742 padding: 4px 6px;
743 position: absolute;
744 top: 50%;
745 left: 50%;
746 margin-top: -38px;
747 margin-left: -23px;
748 }
749
750 .el-button+.el-button {
751 margin-left: -23px;
752 margin-top: 16px;
753 }
754 }
755
756 .tdytAdd {
757 width: 100px;
758 }
759
760 .tdytAdd,
761 .tdytMinus {
762 span {
763 font-size: 14px;
764 height: 114px;
765 text-align: center;
766 -webkit-writing-mode: vertical-rl;
767 writing-mode: vertical-rl;
768 position: absolute;
769 top: 50%;
770 left: 30%;
771 }
772
773 i {
774 color: #66b1ff;
775 font-size: 30px;
776 position: absolute;
777 top: 50%;
778 margin-top: 0px;
779 left: 55%;
780 z-index: 1;
781 }
782 }
783
784 .tdytMinus {
785 i {
786 color: #FA6400;
787 left: 50%;
788 margin-left: -18px;
789 }
790 }
791
792 .childYT {
793 i {
794 top: 50%;
795 margin-top: -18px;
796 }
797 }
798
799 .el-row:nth-last-child(1) {
800 border-bottom: none;
801 }
802
803 /deep/.el-select-tree {
804 width: 100%;
805
806 .el-input__inner {
807 height: 34px !important;
808 position: relative;
809 top: -1px;
810 }
811 }
812 }
813 </style>
1 <template>
2 <div class="temp">
3 <el-row class="qlxzModule" v-for="(items, index) in countList" :key="items.id">
4 <template v-for="(childItem, childIndex) in items.list">
5 <el-col :span="2" class="btnCol" :key="childIndex + '1'" :class="childIndex > 0 ? 'childYT noTopBorder' : ''">
6 <el-button v-show="childIndex < 1" type="primary" class="changeBtn addMinus outAdd"
7 @click="handleClick(index, 'add')">+</el-button>
8 <el-button v-show="childIndex < 1" type="primary" class="changeBtn addMinus outMinus"
9 @click="handleClick(index, 'minus')">-</el-button>
10 <div :class="items.hasNotBorder ? 'itemShow whiteItem' : 'whiteItem'" v-if="items.isInside"></div>
11 </el-col>
12 <el-col :span="2" class="btnCol" :key="childIndex + '8'" :class="childIndex > 0 ? 'childYT' : ''">
13 <!-- <template v-if="childIndex>0"> -->
14 <span class="qlxz" v-show="childIndex < 1">权利性质</span><br />
15 <el-button type="primary" class="changeBtn addMinus inAdd" @click="handleInClick(index, childIndex, 'add')">+
16 </el-button>
17 <el-button type="primary" class="changeBtn addMinus inMinus"
18 @click="handleInClick(index, childIndex, 'minus')">-</el-button>
19 <!-- </template> -->
20 </el-col>
21 <el-col :span="5" :key="childIndex + '7'" :class="childIndex > 0 ? 'childYT' : ''">
22 <ul>
23 <li>批准用途</li>
24 <li>实际用途</li>
25 <li>土地使用起始时间<i class="requisite">*</i></li>
26 </ul>
27 </el-col>
28 <el-col :span="5" :key="childIndex + '6'" :class="childIndex > 0 ? 'childYT' : ''">
29 <ul>
30 <li>
31 <el-select-tree v-if="show" :default-expand-all="defaultExpandAll" :multiple="multiple"
32 :placeholder="placeholder" :disabled="disabled" :data="$store.state.tdytList" :props="treeProps"
33 :check-strictly="checkStrictly" :clearable="clearable" v-model="childItem.pzytdm"></el-select-tree>
34 </li>
35 <li>
36 <el-select-tree v-if="show" :default-expand-all="defaultExpandAll" :multiple="multiple"
37 :placeholder="placeholder" :disabled="disabled" :data="$store.state.tdytList" :props="treeProps"
38 :check-strictly="checkStrictly" :clearable="clearable" v-model="childItem.sjytdm"></el-select-tree>
39 </li>
40 <li>
41 <el-date-picker v-model="childItem.tdsyqssj" :picker-options="childItem.pickerStart" type="date"
42 value-format="yyyy-MM-dd" placeholder="选择日期" @input="startTime(index, childIndex)">
43 </el-date-picker>
44 </li>
45 </ul>
46 </el-col>
47 <el-col :span="5" :key="childIndex + '5'" :class="childIndex > 0 ? 'childYT' : ''">
48 <ul>
49 <li>地类编码</li>
50 <li>地类编码</li>
51 <li>土地使用结束时间<i class="requisite">*</i></li>
52 </ul>
53 </el-col>
54 <el-col :span="5" :key="childIndex + '4'" :class="childIndex > 0 ? 'childYT' : ''">
55 <ul>
56 <li>
57 <input type="text" style="top: -1px;" v-model="childItem.pzytdm" class="formInput" />
58 </li>
59 <li>
60 <input type="text" v-model="childItem.sjytdm" class="formInput" />
61 </li>
62 <li>
63 <el-date-picker v-model="childItem.tdsyjssj" type="date" value-format="yyyy-MM-dd"
64 :picker-options="childItem.pickerEnd" placeholder="选择日期" @input="endTime(index, childIndex)">
65 </el-date-picker>
66 </li>
67 </ul>
68 </el-col>
69 </template>
70
71 <div class="title">
72 <el-select class="formSelect" v-model="items.qlxzdm">
73 <el-option v-for="item in $store.state.qlxzList" :key="item.dm" :label="item.mc" :value="item.dm">
74 </el-option>
75 </el-select>
76 </div>
77 </el-row>
78 </div>
79 </template>
80
81 <script>
82 // import { getDdicByMC } from "@api/common";
83 export default {
84 props: {
85 // widtd: {
86 // type: String,
87 default: "70%",
88 ,
89 a () {
90 return {
91 //树型结构
92 how: true,
93 arable: true,
94 aultExpandAll: true,
95 tiple: false,
96 ceholder: "请选择",
97 abled: false,
98 ckStrictly: true,
99 eProps: {
100 lue: "dm",
101 ildren: "children",
102 bel: "mc",
103
104 ntList: [
105
106 id: Math.random(),
107 isInside: false,
108 hasNotBorder: false,
109 bsm: "", //权利性质标识码
110 lbsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
111 lxzdm: "",
112 zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
113 list: [
114 {
115 pzdjbsm: "",
116 pzdjmc: "",
117 pzytdm: "",
118 pzytmc: "",
119 pzytmj: 0,
120 qlxzbsm: "",
121 sjdjbsm: "",
122 sjdjmc: "",
123 sjytdm: "",
124 sjytmc: "",
125 jytmj: 0,
126 syqx: "",
127 tdsyjssj: "",
128 tdsyqssj: "",
129 pickerStart: {},
130 pickerEnd: {},
131 tdzh: "",
132 },
133
134
135
136 Num: 0,
137
138
139 ed () { },
140 hods: {
141 外层操作
142 ndleClick (ind, type) {
143 outsideObj = {
144 Math.random(),
145 Inside: false,
146 sNotBorder: false,
147 "", //权利性质标识码
148 bsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
149 xzdm: "",
150 zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
151 list: [
152 {
153 pzdjbsm: "",
154 pzdjmc: "",
155 pzytdm: "",
156 pzytmc: "",
157 pzytmj: 0,
158 qlxzbsm: "",
159 sjdjbsm: "",
160 sjdjmc: "",
161 sjytdm: "",
162 sjytmc: "",
163 sjytmj: 0,
164 syqx: "",
165 tdsyjssj: "",
166 tdsyqssj: "",
167 tdzh: "",
168
169
170 };
171 (type === "add") {
172 is.countList.push(outsideObj);
173 is.outNum++;
174 lse {
175 .countList.forEach((item, index) => {
176 f (index == ind && this.countList.length > 1) {
177 this.countList.splice(index, 1);
178 }
179 });
180 this.outNum--;
181
182 Click (index, childIndex, type) {
183 eObj = {
184 ",
185 ,
186 "",
187 "",
188 : 0,
189 m: "",
190 m: "",
191 "",
192 : "",
193 : "",
194 : 0,
195 "",
196 jssj: "",
197 sj: "",
198 : "",
199 e === "add") {
200 ountList[index].list.splice(childIndex + 1, 0, insideObj);
201
202 ountList[index].list.forEach((item, childInd) => {
203 (childIndex == childInd && this.countList[index].list.length > 1) {
204 this.countList[index].list.splice(childIndex, 1);
205 }
206 });
207
208 s.hasBorderOrNot();
209 是否显示边框
210 orderOrNot () {
211 s.countList.forEach((item, index) => {
212 (index == this.countList.length - 1) {
213 m.hasNotBorder = true;
214 {
215 sNotBorder =
216 sInside && !this.countList[index + 1].isInside ? true : false;
217 aList () {
218 this.countList;
219 时间判断
220 tTime (index, childIndex) {
221 tartTime = this.countList[index].list[childIndex].tdsyqssj;
222 endTime = this.countList[index].list[childIndex].tdsyjssj;
223 s.countList[index].list[childIndex].pickerEnd = {
224 bledDate: (time) => {
225 f (Object.keys(startTime).length > 0) {
226 return new Date(startTime).getTime() > time.getTime();
227 lse {
228 rn time.getTime() < Date.now();
229 t.keys(startTime).length > 0 && Object.keys(endTime).length > 0) {
230 ear = new Date(startTime).getFullYear();
231 ear = new Date(endTime).getFullYear();
232 ime (index, childIndex, e) {
233 onsole.log(e, 'eeeeee');
234 let startTime = this.countList[index].list[childIndex].tdsyqssj;
235 let endTime = this.countList[index].list[childIndex].tdsyjssj;
236 this.countList[index].list[childIndex].pickerStart = {
237 disabledDate: (time) => {
238 if (Object.keys(endTime).length > 0) {
239 return new Date(endTime).getTime() < time.getTime();
240 } else {
241 return time.getTime() > Date.now();
242 }
243 }
244 }
245 if (Object.keys(startTime).length > 0 && Object.keys(endTime).length > 0) {
246 let startYear = new Date(startTime).getFullYear();
247 let endYear = new Date(endTime).getFullYear();
248 }
249 },
250 },
251 };
252 </script>
253 <style lang="scss">
254 .temp {
255 width: 100%;
256
257 .qlxzModule {
258 height: auto;
259 position: relative;
260 border-bottom: 1px solid #e6e6e6;
261
262 .el-col {
263 // height: 100%;
264 border-right: 1px solid #E6E6E6;
265 position: relative;
266 text-align: right;
267 padding-right: 10px;
268
269 .qlxz {
270 line-height: 34px;
271 }
272
273 ul {
274 margin-top: 34px;
275
276 li {
277 height: 37px;
278 line-height: 37px;
279 text-decoration: none;
280 border-bottom: 1px solid #e6e6e6;
281
282 .el-select {
283 width: 100%;
284 }
285
286 .el-input {
287 width: 100%;
288 }
289
290 .el-input__inner {
291 height: 34px;
292 }
293
294 input {
295 position: relative;
296 top: -2px;
297 height: 35px;
298 width: calc(100% - 1px) !important;
299 }
300 }
301
302 li:last-child {
303 border-bottom: none;
304 }
305 }
306
307 .whiteItem {
308 background-color: #fff;
309 position: absolute;
310 width: 100%;
311 height: 2px;
312 bottom: -1px;
313 left: 0;
314 }
315
316 .itemShow {
317 bottom: 2px;
318 }
319 }
320
321 .childYT {
322 height: 114px;
323 border-top: 1px solid #E6E6E6;
324
325 ul {
326 margin-top: 0;
327
328 li {
329 .el-input__inner {
330 height: 29px;
331 }
332 }
333 }
334
335 .changeBtn {
336 margin-top: -48px;
337 }
338
339 .el-button+.el-button {
340 margin-top: 4px;
341 }
342 }
343
344 .noTopBorder {
345 border-top: 0;
346 }
347
348 .noRightBorder {
349 border-right: 0;
350 }
351
352 .el-col:nth-last-child(2) {
353 border-right: none;
354 }
355
356 .title {
357 width: 83.33333%;
358 height: 34px;
359 line-height: 34px;
360 background-color: #fff;
361 border-bottom: 1px solid #E6E6E6;
362 position: absolute;
363 right: 0;
364 top: 0;
365
366 .formSelect {
367 top: -1px;
368 width: 100%;
369
370 .el-input__inner {
371 height: 32px;
372 }
373 }
374 }
375 }
376
377 .btnCol {
378 position: relative;
379 height: 146px;
380
381 .changeBtn {
382 width: 46px;
383 height: 46px;
384 font-size: 30px;
385 padding: 4px 6px;
386 position: absolute;
387 top: 50%;
388 left: 50%;
389 margin-top: -38px;
390 margin-left: -23px;
391 }
392
393 .el-button+.el-button {
394 margin-left: -23px;
395 margin-top: 16px;
396 }
397 }
398
399 .el-row:nth-last-child(1) {
400 border-bottom: none;
401 }
402
403 /deep/.el-select-tree {
404 width: 100%;
405
406 .el-input__inner {
407 height: 30px !important;
408 }
409 }
410 }
411 </style>
1 <template>
2 <div class="tree_item_box">
3 <div class="column-start-start linkLine_default" v-for="(item, s_index) in list" :key="s_index" :class="{
4 linkLine_first: (s_index === 0) & (list.length > 1),
5 linkLine_half_top: s_index === 0 && list.length === 1,
6 linkLine_last: s_index === list.length - 1 && s_index !== 0,
7 third_layer: !item.children,
8 second_layer: item.children,
9 curNode: $route.query.bsm && $route.query.bsm == item.bsm,
10 zxxNode: item.qszt,
11 iszd: item.qszt && item.type == 'zd',
12 isdz: item.qszt && item.type == 'dz',
13 iszrz: item.qszt && item.type == 'zrz',
14 isgzw: item.qszt && item.type == 'gzw'
15 }">
16 <div class="row-flex-start basic_banner" @click="itemClick(item)" @dblclick="dbclick(item, item.zdbsm)" :class="{
17 active_color: item.expand,
18 }">
19 <div class="layer_text nowrap" @contextmenu.prevent="openMenu($event, item, list)" :class="{
20 active_color: item.expand
21 }" :ref="($route.query.bsm && $route.query.bsm == item.bsm) ? 'curZxx' : ''" :data-zdbsm="item.zdbsm"
22 :title=item.mc>
23 <i v-show="!islpb && !item.qszt && !item.type" class="iconfont iconguoyou" style="margin-right:6px"></i>
24 <template v-if="islpb && item.type == 'ljz' && item.children.length > 0">
25 <i v-if="!item.expand" class="iconfont iconxiala lpbTree-node"></i>
26 <i v-if="item.expand" class="iconfont iconxialazhankai lpbTree-node"></i>
27 </template>
28 <!-- <i v-show="islpb && item.expand && item.children.length > 0" class="iconfont iconxiala" style="margin-right:6px"></i>
29 <i v-show="islpb && !item.expand && item.children.length > 0" class="iconfont iconxialazhankai" style="margin-right:6px"></i> -->
30 <span class="qsztImg" v-if="item.bblx == 1 || (item.bhqkbsm != '' && item.bhqkbsm != null)">
31 <!-- <span class="qsztFont" style="color: #9e9b9b">变</span> -->
32 <i
33 :class="$route.query.bsm && $route.query.bsm == item.bsm ? 'iconfont iconbianing' : 'iconfont iconbian'"></i>
34 </span>
35 <template v-else>
36 <span class="qsztImg" v-if="item.qszt == '0'">
37 <!-- <span class="qsztFont" style="color: #2FA3FA; ">临</span> -->
38 <i :class="$route.query.bsm && $route.query.bsm == item.bsm ? 'iconfont iconlining' : 'iconfont iconlin'"
39 style="color: #F7B500;"></i>
40 </span>
41 <span class="qsztImg" v-if="item.qszt == '1'">
42 <!-- <span class="qsztFont" style="color: #1AD6E1; ">正</span> -->
43 <i :class="$route.query.bsm && $route.query.bsm == item.bsm ? 'iconfont iconzhenging' : 'iconfont iconzheng'"
44 style="color: #15D7E2;"></i>
45 </span>
46 <span class="qsztImg" v-if="item.qszt == '2'">
47 <!-- <span class="qsztFont" style="color: #45AEFD; ">现</span> -->
48 <i :class="$route.query.bsm && $route.query.bsm == item.bsm ? 'iconfont iconxianing' : 'iconfont iconxian'"
49 style="color: #2FA3FA;"></i>
50 </span>
51 </template>
52 <i class="iconfont iconziranchuang1 mr4" v-if="item.type == 'zrz'"></i>
53 <i class="iconfont iconduochuang1 mr4" v-if="item.type == 'dz'"></i>
54 <i class="iconfont icongouzhuwu mr4" v-if="item.type == 'gzw'"></i>
55 <span v-if="islpb">({{ item.type | bdcLxFilter }})</span>
56 <span>{{ item.mc }}</span>
57
58 </div>
59 <div v-if="item.children" class="reTree_icon" :style="{
60 height: 10 + 'px',
61 width: 10 + 'px',
62 }" :class="{
63 reTree_default_icon: item.children.length === 0,
64 reTree_collapse_icon: !islpb && item.expand && item.children.length > 0,
65 reTree_expand_icon: !islpb && !item.expand && item.children.length > 0,
66 }"></div>
67 <div v-if="item.children == null" class="reTree_icon" :class="{
68 reTree_default_icon: item.dm != 'G' && item.dm != 'J' && item.dm != 'Z',
69 reTree_expand_icon: item.dm == 'G' || item.dm == 'J' || item.dm == 'Z',
70 }" :style="{
71 height: 10 + 'px',
72 width: 10 + 'px',
73 }"></div>
74 </div>
75 <line-item :list="item.children" v-on="$listeners" :islpb="islpb" :size="size"
76 v-if="item.expand && item.children && item.children.length > 0"></line-item>
77 </div>
78 </div>
79 </template>
80 <script>
81 // import { getZdDetailList } from "@api/common"
82 export default {
83 name: "line-item",
84 props: {
85 list: {
86 ype: Array,
87 ault: () => {
88 turn [];
89 ,
90 },
91 formatData: {
92 ype: Array,
93 ault: () => {
94 turn [];
95
96 : {
97 e: Number,
98 ault: 16,
99 ble: {
100 e: Boolean,
101 ault: false,
102 b: {
103 e: Boolean,
104 efault: false,
105 }
106 ,
107 a () {
108 rn {
109 e: null,
110 reeXzqHeight: 0,
111 linshi: require("@/image/lpb/lin.png"),
112 zhengshi: require("@/image/lpb/zheng.png"),
113 ianshi: require("@/image/lpb/xian.png"),
114 }
115 ,
116 nted () {
117 onsole.log(this.$refs.curZxx,'this.$refs.curZxx');
118 this.$refs.curZxx) {
119 onsole.log(this.$refs.curZxx[0].dataset.zdbsm);
120 his.$store.state.oldZdbsm = this.$refs.curZxx[0].dataset.zdbsm;
121 : {
122 Click (item) {
123 self = this;
124 开启延时器，300ms的间隔区分单击和双击，解决双击时执行两次单击事件
125 learTimeout(self.time);
126 elf.time = setTimeout(() => {
127 em.expand = item.expand == undefined ? true : !item.expand;
128 self.$emit("itemClick", item);
129 source = ''
130 itch (this.$route.path) {
131 ase '/add':
132 source = '1,2'
133 break;
134 case '/change':
135 source = '2'
136 break;
137 case '/panel':
138 source = '0,1,2'
139 break;
140 e '/modify':
141 source = '1'
142 break;
143 e '/search':
144 source = '0,1,2'
145 break;
146 default:
147 break;
148
149 目录树的所有权类型单击时加载子节点
150 (!item.children && !item.type) {
151 et data = {
152 xzqbsm: item.xzq,
153 djqbsm: item.djq,
154 djzqbsm: item.djzq,
155 syqlx: item.dm,
156 source: source
157
158 / getZdDetailList(data).then((res) => {
159 // if (res.result.length > 0) {
160 / res.result.forEach(i => {
161 // if (i.children.length > 0) {
162 / i.expand = false;
163 }
164 / })
165 // self.$emit("ownerMethod", item, res.result);
166 / }
167 / }).catch((error) => {
168 / });
169
170 0);
171 键点击事件
172 enMenu (e, item, list) {
173 onsole.log(item, '右键list');
174 his.$emit("changeTop", e.pageY);
175 s.$emit("changeLeft", e.pageX);
176 s.$emit("changeZdData", item);
177 $emit("changeVisible", false);
178 所有权类型
179 e.log(item.dm,'item.dm ');
180 dm == 'G' || item.dm == 'J' ||item.dm == 'Z'){
181 mit("changeCreateVisible", true);
182
183 (item.type) {
184 zd':
185 $emit("changeIsZD", true);
186 mit("changeVisible", true);
187 ;
188 dz':
189 $emit("changeDzVisible", true);
190 ;
191 'zrz':
192 $emit("changeIsZD", false);
193 s.$emit("changeVisible", true);
194 ;
195 zdy':
196 $emit("changeLpbVisible", true);
197
198 ljz':
199 s.$emit("changeLpbVisible", true);
200 reak;
201 case 'gzw':
202 this.$emit("changeGzwVisible", true);
203 break;
204 fault:
205 reak;
206 键双击事件
207 ick (item, bsm) {
208 Timeout(this.time);
209 tore.state.newZdbsm = bsm;
210 tem.type) {
211 ':
212 tore.state.zdbsm = item.bsm;
213
214 :
215 tore.state.zrzbsm = item.bsm;
216 ;
217 'dz':
218 his.$store.state.dzbsm = item.bsm;
219 reak;
220 'gzw':
221 his.$store.state.gzwbsm = item.bsm;
222 reak;
223 fault:
224 reak;
225 m.type == 'zd' || item.type == 'dz' || item.type == 'zrz' || item.type == 'gzw') {
226 = {
227 2,
228 .bsm,
229 his.$route.query.auth ? this.$route.query.auth : '0,1,2'
230 .$route.query.workitemInstanceId) {
231 workitemInstanceId = this.$route.query.workitemInstanceId;
232 (this.$route.query.ywbsm) {
233 data.ywbsm = this.$route.query.ywbsm;
234 }
235 this.$router.push({
236 path: '/' + item.type,
237 query: data
238 });
239 }
240 },
241 closeMenu () {
242 this.$emit("changeVisible", false);
243 },
244 },
245 watch: {
246 visible (value) {
247 if (value) {
248 document.body.addEventListener("click", this.closeMenu);
249 } else {
250 document.body.removeEventListener("click", this.closeMenu);
251 }
252 },
253 },
254 };
255 </script>
256 <style lang="scss">
257 .content {
258 height: 100%;
259 width: 100%;
260 }
261
262 .column-start-center {
263 display: flex;
264 display: -webkit-flex;
265 flex-direction: column;
266 justify-content: flex-start;
267 align-items: center;
268 }
269
270 .row-flex-start {
271 display: flex;
272 display: -webkit-flex;
273 flex-direction: row;
274 justify-content: flex-start;
275 align-items: center;
276 }
277
278 .nowrap {
279 overflow: hidden;
280 text-overflow: ellipsis;
281 white-space: nowrap;
282 }
283
284 // .active_color {
285 // color: #ffffff;
286 // }
287 .reTree_icon {
288 width: 17px;
289 height: 17px;
290 margin-right: 16px;
291 }
292
293 .no_icon {
294 width: 17px;
295 height: 17px;
296 }
297
298 .tree_item_box {
299 position: relative;
300 width: 100%;
301 cursor: pointer;
302 }
303
304 // .ofy_scroll{
305 // overflow-y: scroll;
306 // overflow-x: hidden;
307 // }
308 .basic_layer {
309 width: 100%;
310 position: relative;
311 color: #4a4a4a;
312 cursor: pointer;
313
314 .layer_text {
315 flex: 1;
316 line-height: 40px;
317 }
318 }
319
320 .first_vertical_line {
321 content: "";
322 position: absolute;
323 width: 1px;
324 left: 6px;
325 top: 17px;
326 background: #c3c5c8;
327 }
328
329 .basic_banner {
330 position: relative;
331 width: 279px;
332 height: 40px;
333 box-sizing: border-box;
334 padding-left: 20px;
335 }
336
337 .lpb_basic_banner {
338 padding-left: 42px;
339 }
340
341 .second_layer {
342 position: relative;
343 width: calc(100% - 20px);
344 cursor: pointer;
345 padding-left: 20px;
346
347 .basic_banner {
348 width: 100%;
349 }
350 }
351
352 .zxxNode {
353 width: 279px !important;
354 position: relative;
355 left: -80px;
356 text-indent: 80px;
357 }
358
359 .iszd {
360 .tree_item_box {
361 .zxxNode {
362 padding-left: 0;
363 left: 0;
364 }
365 }
366 }
367
368 .iszrz,
369 .isgzw {
370 left: 0px !important;
371 text-indent: 96px;
372 }
373
374 .isdz {
375 text-indent: 96px !important;
376
377 .iszrz {
378 left: 0 !important;
379 text-indent: 112px !important;
380 }
381 }
382
383 .third_layer {
384 position: relative;
385 width: calc(100% - 20px);
386 cursor: pointer;
387 padding-left: 20px;
388 }
389
390 .white_layer {
391 color: black !important;
392 }
393
394 .lpbTree-node {
395 position: absolute;
396 top: 1px;
397 left: 0;
398 }
399
400 // .second_layer::before {
401 // content: "";
402 // position: absolute;
403 // height: 1px;
404 // width: 16px;
405 // left: 8px;
406 // top: 8px;
407 // opacity: .5;
408 // background: url('../../assets/images/rowline1.png');
409 // background-position-y: center;
410 // }
411 // .third_layer::before {
412 // content: "";
413 // position: absolute;
414 // height: 1px;
415 // width: 16px;
416 // left: 8px;
417 // top: 8px;
418 // opacity: .5;
419 // background: url('../../assets/images/rowline1.png');
420 // background-position-y: center;
421 // }
422
423 // .linkLine_default::after {
424 // content: "";
425 // position: absolute;
426 // height: 100%;
427 // width: 1px;
428 // left: 7px;
429 // top: 0px;
430 // opacity: .5;
431 // background: url('../../assets/images/colline1.png');
432 // background-position-x: center;
433 // }
434 // .linkLine_first::after {
435 // content: "";
436 // position: absolute;
437 // /* 为了触顶 */
438 // top: -16px;
439 // height: calc(100% + 16px);
440 // width: 1px;
441 // left: 7px;
442 // opacity: .5;
443 // background: url('../../assets/images/colline1.png');
444 // background-position-x: center;
445 // }
446 // // 上半截
447 // .linkLine_half_top::after {
448 // content: "";
449 // position: absolute;
450 // height: 23px;
451 // top: -14px;
452 // width: 1px;
453 // left: 7px;
454 // opacity: .5;
455 // background: url('../../assets/images/colline1.png');
456 // background-position-x: center;
457 // }
458 // .linkLine_last::after {
459 // content: "";
460 // position: absolute;
461 // height: 9px;
462 // width: 1px;
463 // left: 7px;
464 // top: 0px;
465 // opacity: .5;
466 // background: url('../../assets/images/colline1.png');
467 // background-position-x: center;
468 // }
469
470 .reTree_default_icon {
471 // opacity: .5;
472 background-size: contain;
473 }
474
475 .reTree_collapse_icon {
476 // opacity: .5;
477 background: url("../../assets/images/arrow-down-bold.svg") no-repeat center center;
478 background-size: contain;
479 }
480
481 .reTree_expand_icon {
482 // opacity: .5;
483 background: url("../../assets/images/arrow-left-bold.svg") no-repeat center center;
484 background-size: contain;
485 }
486
487 .lpbTree_collapse_icon {
488 // opacity: .5;
489 background-size: contain;
490 }
491
492 .lpbTree_expand_icon {
493 // opacity: .5;
494 background: url("../../assets/images/arrow-left-bold.svg") no-repeat center center;
495 background-size: contain;
496 }
497
498
499 .reTree_focus_icon {
500 // opacity: .5;
501 background: url("../../assets/images/reTree_focus_.svg") no-repeat center center;
502 background-size: contain;
503 }
504
505 .qsztImg {
506 width: 16px;
507 margin-right: 6px;
508 // border-radius: 50%; height: 20px; width: 20px; display: inline-block;
509 }
510
511 .curNode {
512 >.basic_banner {
513 background: #E9F5FF;
514 box-shadow: inset 2px 0 0 0 #0C71FB;
515 color: #0C71FB;
516 }
517 }
518
519 .qsztFont {
520 text-align: center;
521
522 display: inline-block;
523 width: 16px;
524 height: 16px;
525 font-size: 12px;
526 line-height: 16px;
527 border: 1px solid;
528 border-radius: 8px;
529 }
530
531 .mr4 {
532 margin-right: 4px;
533 }
534 </style>
1 <template>
2 <div class="content column-start-center reTree_box"
3 :style="{ fontSize: (size || 16) + 'px', lineHeight: (size || 16) + 'px', width: (islpb ? '200' : '286') + 'px' }">
4 <div class="column-start-center basic_layer" :class="islpb ? 'white_layer' : ''" v-for="(item, index) in formatData"
5 :key="index">
6 <div class="row-flex-start basic_banner" :class="{
7 active_color: item.expand && item.children.length > 0,
8 }" @click="itemClick(item)">
9
10 <div class="layer_text nowrap" @contextmenu.prevent="openMenu($event, item)"><i class="iconfont iconguoyou"></i>
11 {{ item.mc }}</div>
12 <div class="reTree_icon" :style="{
13 height: 10 + 'px',
14 width: 10 + 'px',
15 }" :class="{
16 reTree_default_icon: item.children.length === 0,
17 reTree_collapse_icon: !islpb && item.expand && item.children.length > 0,
18 reTree_expand_icon: !islpb && !item.expand && item.children.length > 0,
19 lpbTree_collapse_icon: islpb && item.expand && item.children.length > 0,
20 lpbTree_expand_icon: islpb && !item.expand && item.children.length > 0,
21 }"></div>
22 </div>
23
24 <lineItem v-if="item.expand && item.children.length > 0" v-on="$listeners" @ownerMethod="ownerMethod(arguments)"
25 @changeTop="changeTop" @changeZdData="changeZdData" @changeLeft="changeLeft" @changeVisible="changeVisible"
26 @changeLpbVisible="changeLpbVisible" @changeIsZD="changeIsZD" @changeCreateVisible="changeCreateVisible"
27 @changeDzVisible="changeDzVisible" @changeGzwVisible="changeGzwVisible" :list="item.children"
28 :visible="zrzVisible" :size="size" :islpb="islpb" :formatData="formatData"></lineItem>
29 </div>
30
31 <ul v-show="zrzVisible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
32 <li @click="postionToMap">定位</li>
33 <li @click="importGeo">导入图形</li>
34 <li>
35 导出图形
36 <ul class="contextmenu childUl">
37 <li @click="exportText">文本</li>
38 <li @click="exportCad">CAD</li>
39 <li @click="exportExcel">Excel</li>
40 <li @click="exportToShp">ESRI Shape</li>
41 </ul>
42 </li>
43 <li @click="drsx" :class="zdQszt == '0' ? '' : 'noEdit'">导入属性</li>
44 <li @click="dcsx">导出属性</li>
45 <li v-show="!isZD">导入楼盘</li>
46 <!-- <li>重叠分析</li> -->
47 <li v-show="isZD && (zdQszt == '1' || zdQszt == '2')" @click="openCreateDialog('dzw')">添加定着物</li>
48 <li v-show="isZD && (zdQszt != '1' && zdQszt != '2')" class="noEdit">添加定着物</li>
49 <li @click="deleteByBsm()">删除</li>
50 <li @click="deleteGeoByBsm()">删除图形</li>
51 </ul>
52 <ul v-show="dzVisible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
53 <li @click="openCreateDialog('zrz')">新建自然幢</li>
54 <li @click="deleteByBsm()">删除</li>
55 </ul>
56 <ul v-show="createVisible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
57 <li @click="openCreateDialog">新建宗地</li>
58 </ul>
59 <!-- 构筑物删除 -->
60 <ul v-show="gzwVisible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
61 <li @click="deleteByBsm">删除</li>
62 </ul>
63 <ul v-show="lpbvisible" :style="{ left: lpbleft + 'px', top: lpbtop + 'px' }" class="contextmenu">
64 <li v-show="zdData.type == 'zrz'" @click="openLpbDialog('ljz')">添加逻辑幢</li>
65 <li v-show="zdData.type == 'zrz' || zdData.type == 'ljz'" @click="openLpbDialog('zdy')">添加幢单元</li>
66 <li v-show="zdData.type == 'zrz' || zdData.type == 'ljz' || zdData.type == 'zdy'" @click="openLpbDialog('ch')">
67 添加层户</li>
68 <li v-show="zdData.type == 'ljz'" @click="deleteLjz">删除</li>
69 <li v-show="zdData.type == 'zdy'" @click="deleteZdy">删除</li>
70 </ul>
71
72 <!--@close="closeImportDialog"-->
73 <el-dialog :close-on-click-modal="false" title="导入图形" :modal="false" custom-class="importDialog"
74 :visible.sync="improtDialog" width="30%" @close="closeImportDialog">
75 <import-geo :property-info="zdData" :timeLine="new Date().getTime()" :geo-info="currentClickZdGeo"
76 @closeImportDialog="closeImportDialog"></import-geo>
77 </el-dialog>
78 <!-- 添加定着物弹框 -->
79 <el-dialog :close-on-click-modal="false" title="新建" :modal="false" :visible.sync="dialogVisible" width="48%">
80 <!-- <Create @closeDialog="closeDialog" :auth="true" :createZrz="createZrz" ></Create> -->
81 </el-dialog>
82 <!-- <sxdr :sxdr-visible="sxdrVisible" @close="sxdrClose" :dylx="zdData.type" :bsm="zdData.bsm"></sxdr> -->
83 </div>
84 </template>
85 <script>
86 import lineItem from "./lineItem.vue";
87 // import { deleteZdInfoByBsm, exportShp, exportExcel, delJzdByBsm, delJzxByBsm } from "@api/zd";
88 // import Create from "../../views/panel/create/index";
89 import ImportGeo from './tx/importGeo'
90 port geoUtils from "@/components/lineTree/tx/js/geoUtils";
91 rt featureUpdate from "@/libs/map/featureUpdate";
92 ort { deleteLjz, deleteZdy } from "@api/lpcx.js"
93 exportTemJson from '@/api/json/exportTemplate.json'
94 mport sxdr from '@/components/sxdr/sxdr'
95 port default {
96 nheritAttrs: false,
97 ps: {
98 {
99 e: Array,
100 ault: () => {
101 turn[];
102
103 : {
104 e: Number,
105 ault: 16,
106 b: {
107 e: Boolean,
108 ault: false,
109
110 omponents: { lineItem, Create, ImportGeo, sxdr },
111 ixins: [geoUtils, featureUpdate],
112 a() {
113 rn {
114 rVisible: false,
115 electedDetail: { },
116 timer: { },
117 formatData: this.$store.state.treeData,
118 isible: false,
119 top: 0,
120 left: 0,
121 sZD: true,
122 ata: { },
123 rentClickZdGeo: "",
124 mprotDialog: false,
125 ialogVisible: false,
126 制自然幢右键菜单
127 Visible: false,
128 盘表
129 visible: false,
130 top: 0,
131 left: 0,
132 /控制新建宗地菜单
133 reateVisible: false,
134 幢
135 isible: false,
136 属状态
137 szt: null,
138 : "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]",
139 ateZrz: false,
140 /构筑物
141 zwVisible: false
142
143 ch: {
144 (n, o) {
145 s.formatData = this.preDealData(n);
146 isible(value) {
147 (value) {
148 ment.body.addEventListener("click", this.closeMenu);
149 lse {
150 cument.body.removeEventListener("click", this.closeMenu);
151
152
153 Visible(value) {
154 (value) {
155 cument.body.addEventListener("click", this.closeMenu);
156 lse {
157 cument.body.removeEventListener("click", this.closeMenu);
158 wVisible(value) {
159 f(value) {
160 document.body.addEventListener("click", this.closeMenu);
161 lse {
162 cument.body.removeEventListener("click", this.closeMenu);
163 }
164 zrzVisible(value) {
165 (value) {
166 ment.body.addEventListener("click", this.closeMenu);
167 lse {
168 document.body.removeEventListener("click", this.closeMenu);
169 reateVisible(value) {
170 (value) {
171 document.body.addEventListener("click", this.closeMenu);
172 } else {
173 document.body.removeEventListener("click", this.closeMenu);
174 }
175 }
176 ed() {
177 nextTick(() => {
178 eDealData(this.pd);
179 ndTreeItemById(["6b5af49d803f97baf06afb897de257f5"]);
180
181 {
182 .log(this.zdData, 'zdData')
183 ow.open(`api/tx/excelGeo/export?bsm=${this.zdData.bsm}&type=${this.zdData.type}`)
184 `api/tx/excelGeo/export?bsm=${this.zdData.bsm}&type=${this.zdData.type}`
185 mIF = document.createElement("iframe");
186 src = url;
187 style.display = "none";
188 t.body.appendChild(elemIF)
189 {
190 his.zdQszt != '0') {
191
192 drVisible = true;
193 e() {
194 sxdrVisible = false;
195 ading() {
196 his.$emit("loading")
197
198 eleteLjz() {
199 console.log("删除逻辑幢")
200 console.log(this.zdData, "zdData")
201 deleteLjz(this.zdData.bsm).then(res => {
202 if (res.success) {
203 this.loading()
204 else {
205 dy() {
206 log("删除幢单元")
207 e.log(this.zdData, "zdData")
208 teZdy(this.zdData.bsm).then(res => {
209 f(res.success) {
210 this.loading()
211 }
212
213 ,
214 变菜单数据
215 Visible(data) {
216 s.zrzVisible = data;
217 s.lpbvisible = false;
218 dzVisible = false;
219 wVisible = false;
220 ta(data) {
221 = data;
222 zt = data.qszt;
223 (data) {
224 p = data;
225 lpbtop = data;
226 angeLeft(data) {
227 this.left = data;
228 this.lpbleft = data;
229 },
230 changeIsZD(data) {
231 this.isZD = data;
232 },
233 changeLpbVisible(data) {
234 this.lpbvisible = data;
235 this.zrzVisible = false;
236 this.dzVisible = false;
237 this.gzwVisible = false;
238 },
239 changeCreateVisible(data) {
240 this.createVisible = true;
241 },
242 //多幢
243 changeDzVisible(data) {
244 this.dzVisible = data;
245 this.zrzVisible = false;
246 this.lpbvisible = false;
247 this.gzwVisible = false;
248 },
249 //构筑物
250 changeGzwVisible(data) {
251 this.gzwVisible = data;
252 this.zrzVisible = false;
253 this.lpbvisible = false;
254 this.dzVisible = false;
255 },
256 //添加定着物
257 openCreateDialog(type) {
258 if (type == 'zrz') {
259 this.createZrz = true;
260 }
261 console.log(this.zdData, 'this.zdData');
262 this.dialogVisible = true;
263 this.$store.state.zdbsm = this.zdData.zdbsm;
264 if (this.zdData.type == 'dz') {
265 this.$store.state.dzbsm = this.zdData.bsm;
266 } else {
267 this.$store.state.dzbsm = '';
268 }
269 },
270 //关闭添加定着物弹框
271 closeDialog() {
272 this.dialogVisible = false;
273 this.createZrz = false;
274 },
275 preDealData(list) {
276 //楼盘表目录树没有expand属性
277 // if(list == null){
278 // return list
279 // }else{
280 list.forEach((x) => {
281 if (x.expand == undefined) this.$set(x, "expand", true);
282 if (x.children && x.children.length > 0) {
283 this.preDealData(x.children);
284 }
285 });
286 return list;
287 // }
288 },
289 // 根据id展开树的具体项
290 expandTreeItemById(idList) {
291 let _this = this;
292 function loopTree (list) {
293 list.forEach((x) => {
294 if (idList.includes(x.zdbsm)) {
295 _this.$set(x, "expand", true);
296 } else {
297 _this.$set(x, "expand", false);
298 }
299 if (x.children && x.children.length > 0) loopTree(x.children);
300 });
301 return list;
302 }
303 this.formatData = loopTree(this.pd);
304 console.log(this.formatData, "this.formatData");
305 },
306 itemClick(item) {
307 // item.expand = item.expand == undefined? true:!item.expand;
308 this.formatData.forEach(i => {
309 if (i.bsm != item.bsm) {
310 i.expand = false
311 } else {
312 // i.expand = !item.expand
313 }
314 })
315 item.expand = !item.expand;
316 // this.$emit("itemClick", item);
317 },
318 //给所有权类型添加子节点
319 ownerMethod(arr) {
320 let item = arr[0];
321 let list = arr[1]
322 this.formatData.forEach(i => {
323 if (i.bsm == item.xzq) {
324 i.children.forEach(j => {
325 if (j.bsm == item.djq) {
326 j.children.forEach(k => {
327 if (k.bsm == item.djzq) {
328 k.children.forEach(n => {
329 if (n.dm == item.dm) {
330 this.$nextTick(() => {
331 n.children = list;
332 })
333 }
334 })
335 }
336 })
337 }
338 })
339 }
340 });
341 this.$store.state.treeData = this.formatData;
342 },
343 //自然幢右键点击事件
344 openMenu(e, item) {
345 this.lpbleft = e.pageX;
346 this.lpbtop = e.pageY;
347 this.zdData = item;
348 this.changeLpbVisible(true);
349 },
350 //关闭右键菜单
351 closeMenu() {
352 this.zrzVisible = false;
353 this.lpbvisible = false;
354 this.dzVisible = false;
355 this.gzwVisible = false;
356 },
357 //楼盘表右键菜单项打开父组件弹框
358 openLpbDialog(type) {
359 this.$parent.openLpbDialog(this.zdData, type);
360 },
361 detailDoubleClick(data) {
362 clearTimeout(this.timer);
363 this.selectedDetail = data;
364 this.$emit("detailDoubleClick", data);
365 },
366 //右键菜单的删除
367 deleteByBsm() {
368 let name = '';
369 switch (this.zdData.type) {
370 case 'zd':
371 name = '宗地'
372 break;
373 case 'dz':
374 name = '多幢'
375 break;
376 case 'zrz':
377 name = '自然幢'
378 break;
379 case 'gzw':
380 name = '构筑物'
381 break;
382
383 default:
384 break;
385 }
386 this.$confirm('是否确定删除该' + name + '?', '提示', {
387 confirmButtonText: '确定',
388 cancelButtonText: '取消',
389 type: 'warning'
390 }).then(() => {
391 let params = { "bsm": this.zdData.bsm, "type": this.zdData.type };
392 deleteZdInfoByBsm(params)
393 .then((res) => {
394 console.log(res);
395 if (res.success) {
396 this.$message({
397 type: 'success',
398 message: '删除成功!'
399 });
400 this.$router.push("/panel");
401 } else {
402 this.$message({
403 message: res.message,
404 type: "warning",
405 });
406 }
407 })
408 .catch((error) => { });
409 }).catch(() => {
410
411 });
412 var self = this;
413 var BSM = "";
414 var type = this.zdData.type;
415 if (type == "zd") {
416 BSM = this.zdData.zdbsm;
417 } else {
418 BSM = this.zdData.bsm;
419 }
420 //删除图形相关信息
421 var type = this.zdData.type;
422 this.queryGeoByBsm(BSM, type, function (features) {
423 if (features && features.length > 0) {
424 var layer = null;
425 if (type == 'zd') {
426 layer = self.getLayerByName("ZDJBXX");
427 } else {
428 layer = self.getLayerByName("ZRZ");
429
430 }
431 var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
432 featureUrl += "/" + layer.id;
433 self.delGraphic(featureUrl, features[0], null);
434 }
435 });
436 },
437 //删除图形
438 deleteGeoByBsm() {
439 var self = this;
440 var BSM = "";
441 var type = this.zdData.type;
442 if (type == "zd") {
443 BSM = this.zdData.zdbsm;
444 } else {
445 BSM = this.zdData.bsm;
446 }
447 //删除图形相关信息
448 var type = this.zdData.type;
449 this.queryGeoByBsm(BSM, type, function (features) {
450 if (features && features.length > 0 && features[0].geometry.rings.length > 0) {
451 var layer = null;
452 if (type == 'zd') {
453 layer = self.getLayerByName("ZDJBXX");
454 } else {
455 layer = self.getLayerByName("ZRZ");
456 }
457 var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
458 featureUrl += "/" + layer.id;
459 features[0].geometry = null;
460 self.updateGraphic(featureUrl, features, function (res) {
461 if (!res.updateFeatureResults[0].error) {
462 self.$message.warning("删除成功!!!")
463 //清除图层
464 self.clearHighlightLayer("testMap");
465 //self.addGeoByBsm(BSM,type,"testMap");
466 //删除界址点 界址线
467 if (type == 'zd') {
468 self.delJzdAndJzx(BSM);
469 }
470 }
471
472 });
473 } else {
474 self.$message.warning("暂无图形信息!!!")
475 }
476 });
477 },
478 //删除宗地界址点 界址线
479 delJzdAndJzx(bsm) {
480 delJzdByBsm({ zdbsm: bsm }).then(res => {
481 if (res.success) {
482 console.log("删除界址点成功!!!");
483 }
484 });
485 delJzxByBsm({ zdbsm: bsm }).then(res => {
486 if (res.success) {
487 console.log("删除界址线成功!!!");
488 }
489 })
490 },
491 /*
492 * 导入图形
493 * */
494 importGeo() {
495 var self = this;
496 var BSM = "";
497 if (this.zdData.qszt != '0') {
498 this.$message.warning("不是临时数据，不能导入图形!!!");
499 return;
500 }
501 var type = this.zdData.type;
502 if (type == "zd") {
503 BSM = this.zdData.zdbsm;
504 } else {
505 BSM = this.zdData.bsm;
506 }
507 //当确定导入图形是 跳转到图形界面
508 this.queryGeoByBsm(BSM, type, function (features) {
509 if (features && features.length > 0) {
510 if (features[0].geometry && features[0].geometry.rings.length > 0) {
511 self.$confirm('该条数据有地块信息，是否继续导入?', '提示', {
512 confirmButtonText: '继续',
513 cancelButtonText: '取消',
514 type: 'warning'
515 }).then(() => {
516 self.postionToMap();
517 self.improtDialog = true;
518 self.currentClickZdGeo = features[0];
519 }).catch(() => {
520 self.$message({
521 type: 'info',
522 message: '已取消'
523 });
524 });
525 } else {
526 self.postionToMap();
527 self.currentClickZdGeo = features[0];
528 self.improtDialog = true;
529 }
530
531 } else {
532 self.postionToMap();
533 self.currentClickZdGeo = null;
534 self.improtDialog = true;
535 }
536 });
537 },
538 //导出文本文件
539 exportText() {
540 var self = this;
541 var type = this.zdData.type;
542 var BSM = type == 'zd' ? this.zdData.zdbsm : this.zdData.bsm;
543 this.queryGeoByBsm(BSM, type, function (features) {
544 if (features && features.length > 0 && features[0].geometry.rings.length > 0) {
545 var data = features[0];
546 var jzdInfo = self.craetJZPoint(data);
547 var textCotent = "";
548 textCotent += exportTemJson.exprotTextAttr;
549 textCotent += "[地块坐标]\n";
550 var dkMc = "", dkYt = "";
551 if (type == 'zd') {
552 dkMc = data.attributes.ZL;
553 dkYt = data.attributes.YT;
554 } else {
555 dkMc = data.attributes.XMMC + data.attributes.JZWMC;
556 dkYt = "建设用地";
557 }
558 textCotent += ",,," + dkMc + ",面,," + dkYt + ",,@\n";
559 for (var i = 0; i < jzdInfo.length; i++) {
560 textCotent += jzdInfo[i].jzdh + "," + jzdInfo[i].sxh + "," +
561 jzdInfo[i].x + "," + jzdInfo[i].y + "\n"
562 }
563 self.downloadTxt(textCotent, "outPut.txt");
564 }
565 }, { wkt: this.wkt });
566 },
567 //导出shp文件
568 exportToShp() {
569 var self = this;
570 var type = this.zdData.type;
571 var BSM = type == 'zd' ? this.zdData.zdbsm : this.zdData.bsm;
572 this.queryGeoByBsm(BSM, type, function (features) {
573 if (features && features.length > 0 && features[0].geometry.rings.length > 0) {
574 var data = JSON.stringify(features[0]);
575 window.location.href = "/api/tx/shpUtils/writeShp?strObj=" + encodeURI(data)
576 /* exportShp({
577 "strObj":encodeURI(data)
578 }).then(res => {
579 debugger
580 });*/
581 } else {
582 self.$message.warning("暂无空间信息!!!!");
583 }
584 }, { wkt: this.wkt });
585 },
586 //导出excel
587 exportExcel() {
588 var self = this;
589 var type = this.zdData.type;
590 var BSM = type == 'zd' ? this.zdData.zdbsm : this.zdData.bsm;
591 this.queryGeoByBsm(BSM, type, function (features) {
592 if (features && features.length > 0 && features[0].geometry.rings.length > 0) {
593 var data = features[0];
594 var jzdInfo = self.craetJZPoint(data);
595 var submitData = [];
596 for (var i = 0; i < jzdInfo.length; i++) {
597 var obj = {
598 jzdHao: jzdInfo[i].jzdh,
599 x: jzdInfo[i].x,
600 y: jzdInfo[i].y,
601 diKuaiQuanHao: jzdInfo.sxh
602 }
603 submitData.push(obj);
604 }
605 exportExcel(submitData).then((res) => {
606 if (res.code == 200) {
607 var path = res.result;
608 window.location.href = "/api/tx/excelGeo/download?filePath=" + encodeURI(path);
609 }
610 });
611 } else {
612 self.$message.warning("还没有空间信息!!!!")
613 }
614 }, { wkt: this.wkt })
615 },
616 //导出CAD
617 exportCad() {
618 //TODO
619 },
620 downloadTxt(text, fileName) {
621 let element = document.createElement('a')
622 element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
623 element.setAttribute('download', fileName)
624 element.style.display = 'none'
625 element.click()
626 },
627 //图形定位
628 postionToMap() {
629 var type = this.zdData.type;
630 var BSM = type == 'zd' ? this.zdData.zdbsm : this.zdData.bsm;
631 if (this.$route.path == "/viewMap") {
632 //定位到当前空间位置
633 // TODO 这个方法只是为了支撑功能
634 this.postionToThisGeo(BSM, type);
635 return;
636 }
637 var curretRouterInfo = {
638 path: this.$route.path,
639 query: this.$route.query
640 }
641 sessionStorage.setItem("curretRouterInfo", JSON.stringify(curretRouterInfo));
642 this.$router.push({
643 path: "/viewMap",
644 query: {
645 bsm: BSM,
646 type: type
647 }
648 });
649 },
650
651 //关闭图形弹框
652 closeImportDialog() {
653 this.improtDialog = false;
654 this.clearOverLayer();
655 }
656
657 },
658 };
659 </script>
660 <style lang="scss" scoped>
661 .content {
662 height: 100%;
663 width: 100%;
664 overflow-y: scroll;
665 overflow-x: hidden;
666 }
667
668 .column-start-center {
669 display: flex;
670 display: -webkit-flex;
671 flex-direction: column;
672 justify-content: flex-start;
673 align-items: center;
674
675 }
676
677 .row-flex-start {
678 display: flex;
679 display: -webkit-flex;
680 flex-direction: row;
681 justify-content: flex-start;
682 align-items: center;
683 }
684
685 .nowrap {
686 overflow: hidden;
687 text-overflow: ellipsis;
688 white-space: nowrap;
689 }
690
691 .reTree_icon {
692 width: 17px;
693 height: 17px;
694 margin-right: 16px;
695 }
696
697 .basic_layer {
698 width: 100%;
699 position: relative;
700 color: #4a4a4a;
701 cursor: pointer;
702 -moz-user-select: none;
703 -o-user-select: none;
704 -khtml-user-select: none;
705 -webkit-user-select: none;
706 -ms-user-select: none;
707 user-select: none;
708
709 .layer_text {
710 flex: 1;
711 }
712 }
713
714 .white_layer {
715 color: black !important;
716 }
717
718 .first_vertical_line {
719 content: "";
720 position: absolute;
721 width: 1px;
722 left: 6px;
723 top: 17px;
724 background: #c3c5c8;
725 }
726
727 .basic_banner {
728 position: relative;
729 width: 280px;
730 height: 40px;
731 }
732
733 .second_layer {
734 position: relative;
735 width: 100%;
736 cursor: pointer;
737 padding-left: 25px;
738 }
739
740 .second_layer::before {
741 content: "";
742 position: absolute;
743 height: 1px;
744 width: 16px;
745 left: 9px;
746 top: 9px;
747 background: #c3c5c8;
748 }
749
750 .linkLine_default::after {
751 content: "";
752 position: absolute;
753 height: 100%;
754 width: 1px;
755 left: 9px;
756 top: 0px;
757 background: #c3c5c8;
758 }
759
760 .linkLine_first::after {
761 content: "";
762 position: absolute;
763 /* 为了触顶 */
764 top: -16px;
765 height: calc(100% + 16px);
766 width: 1px;
767 left: 9px;
768 background: #c3c5c8;
769 }
770
771 // 上半截
772 .linkLine_half_top::after {
773 content: "";
774 position: absolute;
775 height: 23px;
776 top: -14px;
777 width: 1px;
778 left: 9px;
779 background: #c3c5c8;
780 }
781
782 .linkLine_last::after {
783 content: "";
784 position: absolute;
785 height: 9px;
786 width: 1px;
787 left: 9px;
788 top: 0px;
789 background: #c3c5c8;
790 }
791
792 .reTree_collapse_icon {
793 background: url("../../assets/images/arrow-down-bold.svg") no-repeat center center;
794 background-size: contain;
795 }
796
797 .reTree_default_icon {
798 background: url("../../assets/images/reTree_default_.svg") no-repeat center center;
799 background-size: contain;
800 }
801
802 .reTree_expand_icon {
803 background: url("../../assets/images/arrow-left-bold.svg") no-repeat center center;
804 background-size: contain;
805 }
806
807 .lpbTree_collapse_icon {
808 // opacity: .5;
809 background: url("../../assets/images/lpbTree_expand_.svg") no-repeat center center;
810 background-size: contain;
811 }
812
813 .lpbTree_expand_icon {
814 // opacity: .5;
815 background: url("../../assets/images/lpbTree_collapse_.svg") no-repeat center center;
816 background-size: contain;
817 }
818
819 .reTree_focus_icon {
820 background: url("../../assets/images/reTree_focus_.svg") no-repeat center center;
821 background-size: contain;
822 }
823
824 /* /deep/ .importDialog{
825 margin-top: 120px!important;
826 margin-left: 291px;
827 } */
828 </style>
1 <template>
2 <div>
3 <ul class="importDiv" v-if="!resultDialog && !txtResultDialog && !dealDialog">
4 <li>
5 <el-upload class="avatar-uploader" action="#" accept=".txt" :auto-upload="false" :show-file-list="false"
6 :on-change="txtFileChange">
7 <!-- <el-button size="small" type="primary">点击上传</el-button>-->
8 <i class="iconfont iconshangchuan"></i>
9 <div class="title">TXT文本格式</div>
10 <div class="templateDowload">
11 <a href="#" @click.stop="downloadFile('./fileTemplate/txttemplet.txt', 'txttemplet.txt')">TXT模板下载</a>
12 </div>
13 </el-upload>
14 </li>
15 <li>
16 <el-upload class="avatar-uploader" action="/api/tx/shpUtils/readShp" accept=".zip" :show-file-list="false"
17 :on-success="shpFileSuccess">
18 <!--<el-button size="small" type="primary">点击上传</el-button>-->
19 <i class="iconfont iconshangchuan"></i>
20 <div class="title">ESRI Shape文件格式</div>
21 </el-upload>
22 </li>
23 <li>
24 <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" accept=".dwg,.dxf"
25 :show-file-list="false" :on-success="cadFileSuccess">
26 <!-- <el-button size="small" type="primary">点击上传</el-button>-->
27 <i class="iconfont iconshangchuan"></i>
28 <div class="title">CAD文件</div>
29 </el-upload>
30 </li>
31 <li>
32 <el-upload class="avatar-uploader" action="/api/tx/excelGeo/readExcel" accept=".xls,.xlsx"
33 :show-file-list="false" :on-success="excelFileSuccess">
34 <!--<el-button size="small" type="primary">点击上传</el-button>-->
35 <i class="iconfont iconshangchuan"></i>
36 <div class="title">Excel文件格式</div>
37 <div class="templateDowload">
38 <a href="#"
39 @click.stop="downloadFile('./fileTemplate/exceltemplet.xlsx', 'exceltemplet.xlsx')">Excel模板下载</a>
40 </div>
41 </el-upload>
42 </li>
43 </ul>
44 <div v-if="resultDialog">
45 <el-form :model="zdForm" ref="zdCheckForm" label-width="100px" size="small" @submit.native.prevent
46 class="demo-ruleForm">
47 <el-form-item label="宗地" prop="zdBsm" :rules="[
48 { required: true, message: '请选择宗地', trigger: 'change' },
49 ]">
50 <el-select v-model="zdForm.zdBsm" filterable placeholder="请选择" @change="zdChange">
51 <el-option v-for="item in resultData" :key="item.objectid" :label="item.XMMC" :value="item">
52 </el-option>
53 </el-select>
54 </el-form-item>
55 <el-form-item>
56 <el-button type="primary" @click="submitForm('zdCheckForm')">导入</el-button>
57 <el-button @click="cancel('zdCheckForm')">取消</el-button>
58 </el-form-item>
59 </el-form>
60 </div>
61 <div v-if="txtResultDialog">
62 <el-form :model="txtZd" ref="txtZdForm" label-width="100px" size="small" @submit.native.prevent
63 class="demo-ruleForm">
64 <el-form-item label="地块名称" prop="name" :rules="[
65 { required: true, message: '请选择地块', trigger: 'change' },
66 ]">
67 <el-select v-model="txtZd.name" filterable placeholder="请选择" @change="txtChange">
68 <el-option v-for="(item, index) in txtResult" :key="index" :label="item.attributes.name"
69 :value="item.attributes.name">
70 </el-option>
71 </el-select>
72 </el-form-item>
73 <el-form-item>
74 <el-button type="primary" @click="submitTxtForm('txtZdForm')">导入</el-button>
75 <el-button @click="cancelTxtForm('txtZdForm')">取消</el-button>
76 </el-form-item>
77 </el-form>
78 </div>
79 <div v-if="dealDialog">
80 <el-form :model="dealForm" ref="dealForm" label-width="100px" size="small" @submit.native.prevent
81 class="demo-ruleForm">
82 <el-form-item label="处理方法" prop="method" :rules="[
83 { required: true, message: '请选择', trigger: 'change' },
84 ]">
85 <el-select v-model="dealForm.method" filterable placeholder="请选择">
86 <el-option v-for="(item, index) in dealMethods" :key="index" :label="item.label" :value="item.value">
87 </el-option>
88 </el-select>
89 </el-form-item>
90 <el-form-item>
91 <el-button type="primary" @click="submitDealForm('dealForm')">确定</el-button>
92 <el-button @click="cancelDealForm('dealForm')">取消</el-button>
93 </el-form-item>
94 </el-form>
95 </div>
96 </div>
97 </template>
98 <script>
99 import geoUtils from "@components/lineTree/tx/js/geoUtils";
100 import featureUpdate from "@libs/map/featureUpdate";
101 // import { addjzd, addjzx } from "@/api/zd"
102 export default {
103 props: {
104 propertyInfo: {
105 type: Object,
106 default: null
107 },
108 geoInfo: {
109 type: Object,
110 default: null
111 },
112 timeLine: {
113 type: Number,
114 default: null
115 }
116 },
117 mixins: [geoUtils, featureUpdate],
118 data () {
119 return {
120 resultData: [],
121 resultDialog: false,
122 zdForm: {
123 zdBsm: ""
124 },
125 currentClickZd: null,
126 txtResult: [],
127 txtResultDialog: null,
128 txtZd: {
129 name: ""
130 },
131 overResults: [],//与导入宗地重叠的地块
132 currntDealGraphic: null,
133 dealMethods: [{
134 label: "不做处理",
135 value: "1"
136 }, {
137 label: "删除叠加部分",
138 value: "2"
139 }, {
140 label: "删除已重叠部分",
141 value: "3"
142 }, {
143 label: "删除原图形",
144 value: "4"
145 }],
146 dealDialog: false,
147 dealForm: {
148 method: ""
149 }
150 }
151 },
152 watch: {
153 timeLine (newValue, oldValue) {
154 this.resultDialog = false;
155 this.txtResultDialog = false;
156 this.dealDialog = false;
157 }
158 },
159 methods: {
160 txtFileChange (file, fileList) {
161 var self = this;
162 var fileReader = new FileReader();
163 fileReader.readAsText(file.raw);
164 fileReader.onload = function (res) {
165 var content = this.result;
166 if (!content || content.length == 0) {
167 self.$message.warning("文件内容为空!!!");
168 return;
169 }
170 self.analysisTextFile(content);
171 }
172 },
173 analysisTextFile (content) {
174 var index = content.indexOf("[地块坐标]"),
175 geoInfos = content.substr(index),
176 geoList = geoInfos.split("\n");
177 if (geoList.length < 1) {
178 this.$message.warning("文本内容格式有误，请效验文本内容格式!!!");
179 return;
180 }
181 //this.$emit("closeImportDialog");
182 var features = [], attributes = {}, points = [], j = 1;
183 for (var i = 1; i < geoList.length; i++) {
184 var rowData = geoList[i];
185 if ((rowData.indexOf("J") != -1 && rowData.indexOf("J") == 0) || (rowData.indexOf("j") != -1 && rowData.indexOf("j") == 0)) {
186 //解析坐标点信息
187 var pointInfo = rowData.split(",");
188 var point = [parseFloat(pointInfo[2]), parseFloat(pointInfo[3])];
189 points.push(point);
190 } else {
191 if (points.length > 0) {
192 var graphic = {
193 attributes: JSON.parse(JSON.stringify(attributes)),
194 geometry: {
195 rings: [points]
196 }
197 }
198 features.push(graphic);
199 }
200 //新建一个信息 坐标名称 类型
201 attributes = {};
202 points = []
203 var info = rowData.split(",");
204 if (info[3] || info[3] == 'null') {
205 attributes.name = '地块' + j;
206 j++
207 } else {
208 attributes.name = info[3];
209 }
210 }
211 }
212 if (points.length > 0) {
213 var graphic = {
214 attributes: JSON.parse(JSON.stringify(attributes)),
215 geometry: {
216 rings: [[points.concat()]]
217 }
218 }
219 features.push(graphic);
220 }
221 //新建一个信息 坐标名称 类型
222 attributes = {};
223 points = []
224 this.txtResult = features;
225 this.txtZd.name = "";
226 this.txtResultDialog = true;
227 },
228 shpFileSuccess (response, file, fileList) {
229 var self = this;
230 if (response.success) {
231 this.resultData = response.result;
232 this.resultDialog = true;
233 } else {
234 this.$message.warning(response.message);
235 }
236 },
237 cadFileSuccess (response, file, fileList) {
238
239 },
240 excelFileSuccess (response, file, fileList) {
241 var self = this;
242 if (response.success) {
243 var result = response.result;
244 var points = [];
245 for (var i = 0; i < result.length; i++) {
246 var point = [];
247 point[0] = parseFloat(result[i].x);
248 point[1] = parseFloat(result[i].y);
249 points.push(point);
250 }
251 var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
252 var geometry = {
253 rings: [points],
254 spatialReference: {
255 wkt: wkt
256 },
257 type: "polygon"
258 }
259 var graphic = {
260 attributes: null,
261 geometry: geometry
262 }
263 self.checkGeo(graphic);
264 } else {
265 this.$message.warning(response.message);
266 }
267 },
268 //文本文档导入
269 submitTxtForm (formName) {
270 var self = this;
271 this.$refs[formName].validate((valid) => {
272 if (valid) {
273 var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
274 var graphics = self.txtResult.filter(item => {
275 return item.attributes.name == self.txtZd.name;
276 })
277 var graphic = graphics[0];
278 graphic.geometry.type = "polygon";
279 graphic.geometry.spatialReference = {
280 wkt: wkt
281 }
282 self.checkGeo(graphic);
283 } else {
284 console.log('error submit!!');
285 return false;
286 }
287 })
288 },
289 txtChange (value) {
290 var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
291 var graphics = this.txtResult.filter(item => {
292 return item.attributes.name == value;
293 })
294 var graphic = graphics[0];
295 graphic.geometry.type = "polygon";
296 graphic.geometry.spatialReference = {
297 wkt: wkt
298 }
299 this.addOverLayer(graphic.geometry, []);
300 },
301 //校验空间完整性
302 checkGeo (graphic) {
303 var self = this;
304 //校验完整性 直接调用空间方法 提交空间表
305 self.geoJoint(graphic.geometry, function (isJoint, message) {
306 if (isJoint) {
307 self.$message.warning(message)
308 return;
309 } else {
310 var type = self.propertyInfo.type;
311 if (type == 'zd') {
312 //重叠分析
313 self.zdOverAnalys(self.propertyInfo.zdbsm, graphic, function (flag, results) {
314 if (flag) {
315 self.$message.warning("导入的宗地与其他宗地有重叠，请处理！！");
316 self.dealOverData(results, graphic);
317 } else {
318 self.saveZd(graphic);
319 }
320 });
321 } else {
322 self.zrzOverAnalys(self.propertyInfo.bsm, graphic, function (flag, mes) {
323 if (flag) {
324 self.$message.warning(mes);
325 return;
326 } else {
327 self.saveZRZ(graphic);
328 }
329 });
330 }
331 }
332 });
333 },
334 //选择处理方式
335 submitDealForm (formName) {
336 var self = this;
337 this.$refs[formName].validate((valid) => {
338 if (valid) {
339 //选择处理方式
340 var value = self.dealForm.method;
341 self.currntDealGraphic.attributes = {};
342 switch (value) {
343 case '1': self.currntDealGraphic.attributes.BGZT = 1; self.saveZd(self.currntDealGraphic); break;
344 case "2": self.getDifference(self.currntDealGraphic, self.overResults, self.delOverGeo); break;
345 case "3": self.getResultsDif(self.overResults, self.currntDealGraphic, self.delOtherGeo, true); break;
346 case "4": self.getResultsDif(self.overResults, self.currntDealGraphic, self.delOtherGeo, false); break;
347 }
348 } else {
349 console.log('error submit!!');
350 return false;
351 }
352 })
353 },
354 //裁剪自己在保存
355 delOverGeo (geometry) {
356 if (!this.currntDealGraphic.attributes) {
357 this.currntDealGraphic.attributes = {};
358 }
359 this.currntDealGraphic.attributes.BGZT = 2;
360 if (geometry == null) {
361 this.$message.warning("完全重叠，已删除图形信息!!!")
362 this.currntDealGraphic.geometry = geometry;
363 }
364 this.saveZd(this.currntDealGraphic);
365 },
366 //裁剪别的在保存
367 delOtherGeo (results) {
368 //执行编辑操作
369 var layer = this.getLayerByName("ZDJBXX");
370 var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
371 featureUrl += "/" + layer.id;
372 this.updateGraphic(featureUrl, results);
373 this.saveZd(this.currntDealGraphic);
374 },
375 //下载文档模板
376 downloadFile (url, fileName) {
377 let link = document.createElement("a");
378 link.style.display = "none";
379 link.href = url;
380 link.setAttribute("download", fileName);
381 document.body.appendChild(link);
382 link.click();
383 document.body.removeChild(link);
384 },
385 //导入
386 submitForm (formName) {
387 //校验完整性 直接调用空间方法 提交空间表
388 var self = this;
389 this.$refs[formName].validate((valid) => {
390 if (valid) {
391 var geometry = self.parseWktToArc(self.currentClickZd.wkt);
392 geometry.type = "polygon";
393 var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
394 geometry.spatialReference = {
395 wkt: wkt
396 }
397 var graphic = {
398 attributes: self.currentClickZd,
399 geometry: geometry
400 }
401 self.checkGeo(graphic);
402 } else {
403 console.log('error submit!!');
404 return false;
405 }
406 });
407 },
408 dealOverData (results, graphic) {
409 this.overResults = results;
410 this.currntDealGraphic = graphic;
411 this.resultDialog = false;
412 this.txtResultDialog = false;
413 this.dealDialog = true;
414 },
415 saveZd (graphic) {
416 var self = this;
417 var points = null, lines = null,
418 layer = self.getLayerByName("ZDJBXX");
419 var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
420 featureUrl += "/" + layer.id;
421 if (self.geoInfo) {
422 //替换 生成图像 高亮
423 if (graphic.attributes && graphic.attributes.BGZT) {
424 self.geoInfo.attributes.BGZT = graphic.attributes.BGZT;
425 }
426 self.geoInfo.attributes.BSM = this.propertyInfo.zdbsm;
427 self.geoInfo.attributes.ZDDM = this.propertyInfo.zddm;
428 self.geoInfo.attributes.XMMC = this.propertyInfo.mc;
429 graphic.attributes = self.geoInfo.attributes;
430 self.updateGraphic(featureUrl, graphic, function (res) {
431 //保存成功之后生成界址点 界址线
432 //生成坐标点
433 //跳转至map界面updateResults
434 var updResult = res.updateFeatureResults[0];
435 if (updResult.objectId) {
436 var OBJECTID = updResult.objectId;
437 if (graphic.geometry) {
438 points = self.craetJZPoint(graphic);
439 self.savejzd(points)
440 //生成边框线
441 self.createJZLine(graphic, function (res) {
442 lines = res;
443 self.saveJzx(lines);
444 });
445 }
446 self.$message.success("保存成功!!!");
447 self.goMap();
448 }
449 });
450 } else {
451 //生成图像 保存
452 var attributes = {
453 BSM: this.propertyInfo.zdbsm,
454 ZDDM: this.propertyInfo.zddm,
455 XMMC: this.propertyInfo.mc
456 };
457 if (graphic.attributes && graphic.attributes.BGZT) {
458 attributes.BGZT = graphic.attributes.BGZT;
459 }
460 graphic.attributes = attributes;
461 self.addGraphic(featureUrl, graphic, function (res) {
462 var addRresult = res.addFeatureResults[0];
463 if (addRresult.objectId) {
464 var OBJECTID = addRresult.objectId;
465 if (graphic.geometry) {
466 points = self.craetJZPoint(graphic);
467 self.savejzd(points)
468 //生成边框线
469 self.createJZLine(graphic, function (res) {
470 lines = res;
471 self.saveJzx(lines);
472 });
473 }
474 self.$message.success("保存成功!!!");
475 self.goMap();
476 }
477 });
478 }
479 },
480 savejzd (points) {
481 var savePoints = []
482 for (var i = 0; i < points.length; i++) {
483 var obj = {
484 glbsm: this.propertyInfo.zdbsm,
485 jzdh: points[i].jzdh,
486 sxh: points[i].sxh,
487 xzbz: points[i].x,
488 yzbz: points[i].y,
489 jblx: "",
490 jzdlx: ""
491 }
492 savePoints.push(obj);
493 }
494 //保存矢量数据表
495 // addjzd(savePoints).then(res => {
496 // if (res.succcess) {
497 // console.log("界址点保存成成功！！！");
498 // }
499 // });
500 //保存空间数据
501
502 },
503 saveJzx (lines) {
504 var jzxLines = [];
505 for (var i = 0; i < lines.length; i++) {
506 var obj = {
507 glbsm: this.propertyInfo.zdbsm,
508 qsd: lines[i].startPoint,
509 zzd: lines[i].endPoint,
510 jzjj: lines[i].distance,
511 qdh: lines[i].qdh,
512 zdh: lines[i].zdh,
513 jzxlx: "",
514 jzxwz: "",
515 jxxz: "",
516 sm: ""
517 }
518 jzxLines.push(obj);
519 }
520 //保存矢量数据表
521 // addjzx(jzxLines).then(res => {
522 // if (res.success) {
523 // //触发查询界址线
524 // console.log("界址线保存成功!!!!!");
525 // }
526 // });
527 //保存空间数据表
528 },
529 saveZRZ (graphic) {
530 var self = this;
531 var layer = null;
532 layer = self.getLayerByName("ZRZ");
533 var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
534 featureUrl += "/" + layer.id;
535 if (self.geoInfo) {
536 self.geoInfo.BSM = self.propertyInfo.bsm;
537 graphic.attributes = self.geoInfo.attributes;
538 //替换 生成图像 高亮
539 self.updateGraphic(featureUrl, graphic, function (res) {
540 var addRresult = res.updateFeatureResults[0];
541 if (addRresult.objectId) {
542 self.$message.success("保存成功!!!");
543 self.goMap();
544 }
545 });
546 } else {
547 var attributes = {
548 BSM: this.propertyInfo.bsm,
549 XMMC: this.propertyInfo.xmmc
550 }
551 graphic.attributes = attributes;
552 //生成图像 保存
553 self.addGraphic(featureUrl, graphic, function (res) {
554 var addRresult = res.addFeatureResults[0];
555 if (addRresult.objectId) {
556 self.$message.success("保存成功!!!");
557 self.goMap();
558 }
559 });
560 }
561 },
562 //操作成功不需要跳转地图 (直接定位新导入的图形)
563 goMap () {
564 var bsm = "", type = this.propertyInfo.type;
565 if (type == "zd") {
566 bsm = this.propertyInfo.zdbsm;
567 } else {
568 bsm = this.propertyInfo.bsm;
569 }
570 this.resultDialog = false;
571 this.txtResultDialog = false;
572 this.dealDialog = false;
573 this.$emit("closeImportDialog");
574 //TODO 定位当前新导入的图形
575 this.addGeoByBsm(bsm, type, "testMap");
576 },
577 //取消
578 cancel () {
579 this.zdForm.zdBsm = "";
580 this.currentClickZd = null;
581 this.resultDialog = false;
582 // 清空当前图层上显示的图形
583 this.clearOverLayer();
584 },
585 //取消文本选择的弹出框
586 cancelTxtForm () {
587 this.txtZd.name = "";
588 this.txtResultDialog = false;
589 // 清空当前图层上显示的图形
590 this.clearOverLayer();
591 },
592 //取消导入处理的结果
593 cancelDealForm () {
594 this.dealForm.method = "";
595 this.dealDialog = false;
596 this.overResults = [];
597 // 清空当前图层上显示的图形
598 this.clearOverLayer();
599 },
600 //宗地选择发生改变
601 zdChange (value) {
602 this.zdForm.zdBsm = value.XMMC;
603 this.currentClickZd = value;
604 var geometry = this.parseWktToArc(this.currentClickZd.wkt);
605 geometry.type = "polygon";
606 var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
607 geometry.spatialReference = {
608 wkt: wkt
609 }
610 this.addOverLayer(geometry, []);
611 }
612 }
613 }
614 </script>
615 <style scoped lang="scss">
616 .importDiv {
617 display: flex;
618 justify-content: center;
619 align-content: center;
620
621 li {
622 margin: 5px;
623 width: 50%;
624
625 .title {
626 line-height: 1;
627 margin-top: -57px;
628 font-size: 14px;
629 }
630
631 .templateDowload {
632 line-height: 1;
633 margin-top: 7px;
634
635 a {
636 color: #409eff;
637 }
638 }
639 }
640 }
641
642 /deep/ .avatar-uploader .el-upload {
643 border: 1px dashed #d9d9d9;
644 border-radius: 6px;
645 cursor: pointer;
646 position: relative;
647 overflow: hidden;
648 width: 100%;
649 height: 178px;
650 line-height: 178px;
651 }
652
653 /deep/ .avatar-uploader .el-upload:hover {
654 border-color: #409EFF;
655 }
656
657 /deep/ .iconfont {
658 font-size: 20px;
659 color: #8c939d;
660 width: 100%;
661 text-align: center;
662 }
663 </style>
...\ No newline at end of file ...\ No newline at end of file
1 
2 export default {
3 methods:{
4 downloadTxt(text, fileName){
5 let element = document.createElement('a')
6 element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
7 element.setAttribute('download', fileName)
8 element.style.display = 'none'
9 element.click()
10 },
11 createTextContent(jzdInfo){
12 var textContent = "";
13 for(var i = 0;i < jzdInfo.length;i++){
14 textContent += jzdInfo[i].jzdh +","+jzdInfo[i].sxh+"," +
15 jzdInfo[i].x+","+jzdInfo[i].y+"\n"
16 }
17 return textContent;
18 },
19
20 }
21 }
...\ No newline at end of file ...\ No newline at end of file
1 /*
2 * 图形相关的操作 js
3 * */
4
5 import layers from '@/api/json/layers.json'
6 import queryUtils from "@/utils/map/queryUtils";
7 import identifyUtils from '@/utils/map/IdentifyUtils'
8 import { loadModules } from "esri-loader"
9 import featureUpdate from "@/utils/map/featureUpdate";
10 import arcgisParser from 'terraformer-arcgis-parser'
11 import wktParse from 'terraformer-wkt-parser'
12 import { maps } from '@/utils/map/mapUtils'
13 import graphicSymbol from '@/api/json/graphicSymbol.json'
14
15 export default {
16 data () {
17 return {
18
19 }
20 },
21 methods: {
22 getLayerByName (name) {
23 for (var i = 0; i < layers.length; i++) {
24 if (layers[i].layerName == name) {
25 return layers[i];
26 }
27 }
28 return null;
29 },
30 queryGeoByBsm (bsm, type, callBackFunction, outSpatialReference) {
31 var layer = null;
32 if (type == 'zd') {
33 layer = this.getLayerByName("ZDJBXX");
34 } else if (type == 'zrz') {
35 layer = this.getLayerByName("ZRZ");
36 } else {
37 console.log("未定义类型！！");
38 return;
39 }
40 if (!layer) {
41 console.log("没有找到图层，不能查询");
42 return;
43 }
44 queryUtils.methods.queryByWhere(layer.layerUrl + "/" + layer.id, { "BSM": bsm }, null, true, null, outSpatialReference, function (res) {
45 var features = res.features;
46 if (callBackFunction && typeof callBackFunction == 'function') {
47 callBackFunction(features);
48 }
49 });
50 },
51 //生成介质点
52 craetJZPoint (graphic) {
53 var geomtry = graphic.geometry, rings = geomtry.rings[0];
54 var pointInfos = [];
55 this.getPointByRings(rings, pointInfos);
56 return pointInfos;
57 },
58 getPointByRings (rings, pointInfos) {
59 for (var i = 0; i < rings.length; i++) {
60 var children = rings[i];
61 if (children.length == 2 && typeof children[0] == 'number') {
62 var obj = {};
63 obj.jzdh = "j" + pointInfos.length;
64 obj.sxh = pointInfos.length;
65 obj.x = children[0];
66 obj.y = children[1];
67 pointInfos.push(obj);
68 } else {
69 this.getPointByRings(children, pointInfos);
70 }
71 }
72 },
73 //生成介质线
74 createJZLine (graphic, callBackFunction) {
75 var self = this;
76 loadModules([
77 "esri/geometry/support/geodesicUtils",
78 "esri/geometry/Point",
79 "esri/geometry/Polyline"
80
81 ]).then(([
82 geodesicUtils,
83 Point,
84 Polyline
85 ]) => {
86 //取得各个坐标点 然后生成外围坐标线
87 var geometry = graphic.geometry,
88 rings = geometry.rings,
89 points = [];
90 if (rings.length > 0) {
91 for (var i = 0; i < rings.length; i++) {
92 var danPoints = [];
93 self.getPointByRings(rings[i], danPoints);
94 points.push(danPoints);
95 }
96 } else {
97 var danPoints = [];
98 self.getPointByRings(rings, danPoints);
99 points.push(danPoints);
100 }
101 var lines = [];
102 //meters
103 for (var i = 0; i < points.length; i++) {
104 for (var j = 0; j < points[i].length; j++) {
105 if (j < (points[i].length - 1)) {
106 const join = geodesicUtils.geodesicDistance(
107 new Point({ x: points[i][j].x, y: points[i][j].y }),
108 new Point({ x: points[i][j + 1].x, y: points[i][j + 1].y }),
109 "meters"
110 );
111 const { distance, azimuth } = join;
112
113 var obj = {
114 startPoint: points[i][j].x + "," + points[i][j].y,
115 endPoint: points[i][j + 1].x + "," + points[i][j + 1].y,
116 qdh: points[i][j].sxh,
117 zdh: points[i][j + 1].sxh,
118 distance: distance,
119 jzxlx: "",
120 jzxwz: "",
121 jzxxz: "",
122 remark: ""
123 }
124 lines.push(obj);
125 } else {
126 const join = geodesicUtils.geodesicDistance(
127 new Point({ x: points[i][j].x, y: points[i][j].y }),
128 new Point({ x: points[i][0].x, y: points[i][0].y }),
129 "meters"
130 );
131 const { distance, azimuth } = join;
132 var obj = {
133 startPoint: points[i][j].x + "," + points[i][j].y,
134 endPoint: points[i][0].x + "," + points[i][0].y,
135 qdh: points[i][j].sxh,
136 zdh: points[i][0].sxh,
137 distance: distance,
138 jzxlx: "",
139 jzxwz: "",
140 jzxxz: "",
141 remark: ""
142 }
143 lines.push(obj);
144 }
145 }
146 }
147 if (callBackFunction && typeof callBackFunction == "function") {
148 callBackFunction(lines);
149 }
150 }).catch(err => {
151 throw (err);
152 })
153 },
154 //wkt转换成arcgis
155 parseWktToArc (wkt) {
156 var primitive = wktParse.parse(wkt);
157 /*if(primitive.type == "MultiPolygon"){
158 primitive.type = "Polygon"
159 }*/
160 return arcgisParser.convert(primitive)
161 },
162 postionToThisGeo (bsm, type) {
163 var view = maps["testMap"];
164 var layer = view.map.findLayerById("highlightLayer");
165 if (layer) {
166 var graphics = layer.graphics;
167 if (graphics.length > 0 && graphics.items[0].attributes.BSM == bsm) {
168 // view.extent = graphics.items[0].geometry.extent;
169 view.center = graphics.items[0].geometry.extent.center;
170 view.zoom = 15;
171 }
172 } else {
173 this.$message.success("暂无图形信息！！！");
174 }
175 },
176 //导入空间图形是 先判断数据是否跨界
177 geoJoint (geometry, callBacFunction) {
178 var self = this;
179 loadModules([
180 "esri/geometry/geometryEngine",
181 "esri/geometry/Polygon"
182 ]).then(([
183 geometryEngine,
184 Polygon
185 ]) => {
186 var djqLayer = null, djzqLayer = null, xjzqLayer = null;
187 djqLayer = self.getLayerByName("DJQ");
188 djzqLayer = self.getLayerByName("DJZQ");
189 xjzqLayer = self.getLayerByName("XJZQ");
190 var layerIds = [];
191 layerIds.push(djqLayer.id);
192 layerIds.push(djzqLayer.id);
193 layerIds.push(xjzqLayer.id);
194 var polygon = new Polygon(geometry);
195 identifyUtils.methods.identify(djqLayer.layerUrl, layerIds, polygon, function (res) {
196 var results = res.results;
197 var isJoint = false, layerName = "", message = "";
198 if (!results || results.length == 0) {
199 callBacFunction(true, "不在行政区内，请检查空间位置信息!!!");
200 }
201 for (var i = 0; i < results.length; i++) {
202 var feature = results[i].feature;
203 var flag = geometryEngine.intersects(polygon, feature.geometry);
204 var withinFlag = geometryEngine.within(polygon, feature.geometry);
205 if (!withinFlag && flag) {
206 isJoint = true;
207 layerName = results[i].layerName;
208 switch (layerName) {
209 case 'DJQ': message = "地块跨越地籍区，数据不合法!!!"; break;
210 case 'DJZQ': message = "地块跨越地籍子区，数据不合法!!!"; break;
211 case 'XJZQ': message = "地块跨越行政区，数据不合法!!!"; break;
212 }
213 break
214 }
215 }
216 if (callBacFunction && typeof callBacFunction == "function") {
217 callBacFunction(isJoint, message);
218 }
219 }, true)
220 }).catch(err => {
221 console.log(err);
222 throw (err);
223 })
224 },
225 //保存或者编辑属性信息
226 updAttributes (bsm, type, attributes, callBackFunction, ydybsm) {
227 var layer = null;
228 if (type == 'zd') {
229 layer = this.getLayerByName("ZDJBXX");
230 } else {
231 layer = this.getLayerByName("ZRZ");
232 }
233 var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
234 featureUrl += "/" + layer.id;
235 this.queryGeoByBsm(ydybsm ? ydybsm : bsm, type, function (features) {
236 if (features && features.length > 0) {
237 attributes.OBJECTID = features[0].attributes.OBJECTID;
238 features[0].attributes = attributes;
239 /* var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
240 features[0].geometry.spatialReference = {
241 wkt:wkt
242 }*/
243 if (ydybsm) {
244 features[0].attributes.BSM = ydybsm;
245 }
246 featureUpdate.methods.updateGraphic(featureUrl, features[0], callBackFunction);
247 } else {
248 var graphic = {
249 attributes: attributes
250 }
251 featureUpdate.methods.addGraphic(featureUrl, graphic, callBackFunction);
252 }
253 });
254 },
255 //叠加分析 同一个图层的叠加分析
256 zdOverAnalys (bsm, graphic, callBacFunction) {
257 var self = this;
258 loadModules([
259 "esri/geometry/Polygon"
260 ]).then(([
261 Polygon
262 ]) => {
263 var zdLayer = null;
264 zdLayer = self.getLayerByName("ZDJBXX");
265 var layerIds = [];
266 layerIds.push(zdLayer.id);
267 var polygon = new Polygon(graphic.geometry);
268 identifyUtils.methods.identify(zdLayer.layerUrl, layerIds, polygon, function (res) {
269 var results = res.results;
270 //判断数据是否与其他数据有重叠
271 var flag = false;
272 if (results && results.length > 0) {
273 flag = true;
274 //加载在图层上 原本的要导入的数据 和重叠数据
275 self.addOverLayer(polygon, results);
276 }
277 callBacFunction(flag, results);
278 }, true)
279 }).catch(err => {
280 console.log(err);
281 throw (err);
282 })
283 },
284 //添加添加元素和覆盖的元素到地图上
285 addOverLayer (geometry, results) {
286 var view = maps["testMap"];
287 loadModules([
288 "esri/Graphic",
289 "esri/geometry/Polygon",
290 "esri/layers/GraphicsLayer",
291 "esri/geometry/geometryEngineAsync",
292 "esri/geometry/Extent"
293 ]).then(([
294 Graphic,
295 Polygon,
296 GraphicsLayer,
297 geometryEngineAsync,
298 Extent
299 ]) => {
300 var graphic = new Graphic({
301 geometry: geometry
302 })
303 var layer = view.map.findLayerById("overLayer");
304 if (layer) {
305 layer.removeAll();
306 } else {
307 layer = new GraphicsLayer({
308 id: "overLayer"
309 })
310 view.map.add(layer);
311 }
312 var impotSymbol = graphicSymbol.fillSymbol.importSymbol,
313 defaultSymbol = graphicSymbol.fillSymbol.defaultSymbol;
314 for (var i = 0; i < results.length; i++) {
315 var feature = results[i].feature;
316 feature.symbol = defaultSymbol;
317 layer.add(feature);
318 var geo = geometryEngineAsync.intersect(feature.geometry, geometry);
319 geo.then(function (res) {
320 var interGra = new Graphic({
321 geometry: res,
322 symbol: graphicSymbol.fillSymbol.highlightSymbol
323 })
324 layer.add(interGra);
325 })
326 }
327 graphic.symbol = impotSymbol
328 layer.add(graphic);
329 var extent = new Extent(JSON.parse(JSON.stringify(graphic.geometry.extent)))
330 extent.spatialReference = view.spatialReference;
331 // view.extent = extent;
332 view.center = extent.center;
333 view.zoom = 15;
334 }).catch(err => {
335 console.log(err);
336
337 })
338 },
339 clearOverLayer () {
340 var view = maps["testMap"];
341 var layer = view.map.findLayerById("overLayer");
342 if (layer) {
343 layer.removeAll();
344 }
345 },
346 //自然幢叠加分析 不能跨宗地 图层本身的叠加分析
347 zrzOverAnalys (bsm, graphic, callBacFunction) {
348 var self = this;
349 loadModules([
350 "esri/geometry/Polygon",
351 "esri/geometry/geometryEngine"
352 ]).then(([
353 Polygon,
354 geometryEngine
355 ]) => {
356 var polygon = new Polygon(graphic.geometry);
357 var zdLayer = null,
358 zrzLayer = null;
359 zdLayer = self.getLayerByName("ZDJBXX");
360 zrzLayer = self.getLayerByName("ZRZ");
361 var layerIds = [];
362 layerIds.push(zdLayer.id);
363 layerIds.push(zrzLayer.id);
364 identifyUtils.methods.identify(zdLayer.layerUrl, layerIds, polygon, function (res) {
365 var results = res.results;
366 //判断数据是否与其他数据有重叠
367 var flag = false,
368 mesge = "";
369 if (results && results.length > 0) {
370 for (var i = 0; i < results.length; i++) {
371 var feature = results[i].feature,
372 layerName = results[i].layerName;
373 if (layerName == 'ZRZ') {
374 if (!feature.attributes['标识码'] || feature.attributes['标识码'] != bsm) {
375 var interFlag = geometryEngine.intersects(polygon, feature.geometry);
376 if (interFlag) {
377 flag = true;
378 mesge = "导入的自然幢与其他自然幢重叠，不能导入!!!";
379 break;
380 }
381 }
382 } else if (layerName == 'ZDJBXX') {
383 var interFlag = geometryEngine.intersects(polygon, feature.geometry);
384 var withinFlag = geometryEngine.within(polygon, feature.geometry);
385 if (!withinFlag && interFlag) {
386 flag = true;
387 mesge = "导入的自然幢与其跨宗地，不能导入!!!";
388 break;
389 }
390 }
391 }
392 }
393 callBacFunction(flag, mesge);
394 }, true)
395 }).catch(err => {
396 console.log(err);
397 })
398 },
399 //去除重叠部分
400 getDifference (inputGraphic, subGraphic, callBackFuncton) {
401 loadModules([
402 "esri/geometry/Polygon",
403 "esri/geometry/geometryEngine",
404 "esri/Graphic"
405 ]).then(([
406 Polygon,
407 geometryEngine,
408 Graphic
409 ]) => {
410 var inputGeometry = new Polygon(inputGraphic.geometry);
411 var outGeometry = null;
412 for (var i = 0; i < subGraphic.length; i++) {
413 var feature = subGraphic[i].feature;
414 outGeometry = geometryEngine.difference(inputGeometry, feature.geometry);
415 }
416 if (callBackFuncton && typeof callBackFuncton == 'function') {
417 callBackFuncton(outGeometry);
418 }
419 }).catch(err => {
420 console.log(err);
421 })
422 },
423 //业务处理 先用query方法 查询将所有属性查询 在做空间裁剪
424 getResultsDif (subGraphics, currntGraphic, callBackFunction, flag) {
425 var self = this;
426 loadModules([
427 "esri/geometry/geometryEngine",
428 "esri/geometry/Polygon"
429 ]).then(([
430 geometryEngine,
431 Polygon
432 ]) => {
433 var objectIds = [];
434 subGraphics.filter(item => {
435 objectIds.push(item.feature.attributes.OBJECTID);
436 })
437 var inputGeometry = new Polygon(currntGraphic.geometry);
438 var zdLayer = self.getLayerByName("ZDJBXX");
439 queryUtils.methods.queryByWhere(zdLayer.layerUrl + "/" + zdLayer.id, { OBJECTID: objectIds }, null, true, "", subGraphics[0].feature.geometry.spatialReference, function (result) {
440 var features = result.features;
441 if (flag) {
442 for (var i = 0; i < features.length; i++) {
443 features[i].geometry = geometryEngine.difference(features[i].geometry, inputGeometry);
444 features[i].attributes.BGZT = 3;
445 }
446 } else {
447 for (var i = 0; i < features.length; i++) {
448 features[i].geometry = null;
449 features[i].attributes.BGZT = 4;
450 }
451 }
452 if (callBackFunction && typeof callBackFunction == 'function') {
453 callBackFunction(features);
454 }
455 })
456
457 }).catch(err => {
458 console.log(err);
459 })
460
461 },
462 addGeoByBsm (bsm, type, viewId) {
463 var self = this;
464 var layer = null;
465 if (type == 'zd') {
466 layer = this.getLayerByName("ZDJBXX");
467 } else if (type == 'zrz') {
468 layer = this.getLayerByName("ZRZ");
469 } else {
470 console.log("未定义类型！！");
471 return;
472 }
473 if (!layer) {
474 console.log("没有找到图层，不能查询");
475 return;
476 }
477 queryUtils.methods.queryByWhere(layer.layerUrl + "/" + layer.id, { "BSM": bsm }, null, true, null, null, function (res) {
478 var features = res.features;
479 if (features && features.length > 0) {
480 if (!features[0].geometry || features[0].geometry.rings.length == 0) {
481 self.$message.success("暂无图形信息！！");
482 return;
483 }
484 loadModules([
485 "esri/layers/GraphicsLayer"
486 ]).then(([
487 GraphicsLayer
488 ]) => {
489 var view = maps[viewId];
490 var layer = view.map.findLayerById("highlightLayer");
491 if (layer) {
492 layer.removeAll();
493 } else {
494 layer = new GraphicsLayer({
495 id: "highlightLayer"
496 })
497 view.map.add(layer, 5);
498 }
499 var symbol = graphicSymbol.fillSymbol.highlightSymbol;
500 var graphic = features[0];
501 graphic.symbol = symbol;
502 layer.add(graphic);
503 // view.extent = graphic.geometry.extent;
504 view.center = graphic.geometry.extent.center;
505 view.zoom = 15;
506 }).catch(err => {
507 thow(err);
508 })
509 } else {
510 self.$message.success("暂无图形信息！！");
511 return;
512 }
513 });
514 },
515 //清空当前图层
516 clearHighlightLayer (viewId) {
517 var view = maps[viewId];
518 var layer = view.map.findLayerById("highlightLayer");
519 if (layer) {
520 layer.removeAll();
521 }
522 }
523 }
524 }
...\ No newline at end of file ...\ No newline at end of file
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-07-19 16:04:43
5 -->
1 <template> 6 <template>
2 <dialogBox title="新增法律法规" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="50%" 7 <dialogBox title="新增法律法规" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="50%"
3 @closeDialog="closeDialog" v-model="value"> 8 @closeDialog="closeDialog" v-model="value">
...@@ -25,72 +30,71 @@ ...@@ -25,72 +30,71 @@
25 </template> 30 </template>
26 31
27 <script> 32 <script>
28 import { addSysNotice } from "@/api/sysNotice.js" 33 import { addSysNotice } from "@/api/sysNotice.js"
29 import { upload } from "@/api/file.js" 34 import { upload } from "@/api/file.js"
30 export default { 35 export default {
31 props: { 36 props: {
32 value: { type: Boolean, default: false }, 37 value: { type: Boolean, default: false },
33 }, 38 },
34 data () { 39 data () {
35 return { 40 return {
36 ruleForm: { 41 ruleForm: {
37 noticeTitle: '', 42 noticeTitle: '',
38 noticeContent: '', 43 noticeContent: '',
39 noticeFileUrl: '', 44 noticeFileUrl: '',
40 noticeType: '2' 45 noticeType: '2'
46 },
47 rules: {
48 noticeTitle: [
49 { required: true, message: '请输入法律法规标题', trigger: 'blur' }
50 ]
51 },
52 }
53 },
54
55 methods: {
56 submitForm () {
57 let that = this;
58 that.$refs.ruleForm.validate(valid => {
59 if (valid) {
60 addSysNotice(this.ruleForm).then(res => {
61 if (res.code == 200) {
62 this.$message.success('保存成功')
63 this.$emit("input", false);
64 this.resetRuleForm();
65 this.$parent.queryClick();
66 } else {
67 this.$message.error(res.message)
68 }
69 })
70 } else {
71 // console.log('error submit!!');
72 return false;
73 }
74 });
75 },
76 //关闭窗口
77 closeDialog () {
78 this.$emit("input", false);
79 this.resetRuleForm();
41 }, 80 },
42 rules: { 81 //
43 noticeTitle: [ 82 resetRuleForm () {
44 { required: true, message: '请输入法律法规标题', trigger: 'blur' } 83 this.$refs['ruleForm'].resetFields();
45 ] 84 this.ruleForm.noticeType = '2'
85 },
86 beforeUpload (file) {
87 return true;
88 },
89 async handleChange (file) {
90 var formdata = new FormData();
91 formdata.append("file", file.raw);
92 upload(formdata).then(res => {
93 this.ruleForm.noticeFileUrl = res.message
94 })
46 }, 95 },
47 } 96 }
48 },
49
50 methods: {
51 submitForm () {
52 let that = this;
53 that.$refs.ruleForm.validate(valid => {
54 if (valid) {
55 addSysNotice(this.ruleForm).then(res => {
56 if (res.code == 200) {
57 this.$message.success('保存成功')
58 this.$emit("input", false);
59 this.resetRuleForm();
60 this.$parent.queryClick();
61 } else {
62 this.$message.error(res.message)
63 }
64 })
65 } else {
66 // console.log('error submit!!');
67 return false;
68 }
69 });
70 },
71 //关闭窗口
72 closeDialog () {
73 this.$emit("input", false);
74 this.resetRuleForm();
75 },
76 //
77 resetRuleForm () {
78 this.$refs['ruleForm'].resetFields();
79 this.ruleForm.noticeType = '2'
80 },
81 beforeUpload (file) {
82 return true;
83 },
84 async handleChange (file) {
85 var formdata = new FormData();
86 formdata.append("file", file.raw);
87 upload(formdata).then(res => {
88 this.ruleForm.noticeFileUrl = res.message
89 })
90 },
91 } 97 }
92 }
93 </script> 98 </script>
94 <style scoped lang="scss"> 99 <style scoped lang="scss">
95
96 </style> 100 </style>
......
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-07-19 16:04:47
5 -->
1 <template> 6 <template>
2 <div class="from-clues"> 7 <div class="from-clues">
3 <!-- 表单部分 --> 8 <!-- 表单部分 -->
...@@ -11,7 +16,7 @@ ...@@ -11,7 +16,7 @@
11 </el-col> 16 </el-col>
12 <el-col :span="19" class="btnColRight"> 17 <el-col :span="19" class="btnColRight">
13 <el-form-item> 18 <el-form-item>
14 <el-button type="primary" native-type="submit" @click="handleSearch">查询1</el-button> 19 <el-button type="primary" native-type="submit" @click="handleSearch">查询1</el-button>
15 <el-button type="primary" @click="openDialog()">新增</el-button> 20 <el-button type="primary" @click="openDialog()">新增</el-button>
16 </el-form-item> 21 </el-form-item>
17 </el-col> 22 </el-col>
...@@ -29,79 +34,79 @@ ...@@ -29,79 +34,79 @@
29 </div> 34 </div>
30 </template> 35 </template>
31 <script> 36 <script>
32 import table from "@/utils/mixin/table"; 37 import table from "@/utils/mixin/table";
33 import { datas, sendThis } from "./flfgdata"; 38 import { datas, sendThis } from "./flfgdata";
34 import { getSysPolicyList, deleteSysNotice } from "@/api/sysNotice.js" 39 import { getSysPolicyList, deleteSysNotice } from "@/api/sysNotice.js"
35 import addDialog from "./components/addDialog.vue"; 40 import addDialog from "./components/addDialog.vue";
36 export default { 41 export default {
37 name: "flfg", 42 name: "flfg",
38 components: { addDialog }, 43 components: { addDialog },
39 mixins: [table], 44 mixins: [table],
40 mounted () { 45 mounted () {
41 sendThis(this); 46 sendThis(this);
42 this.queryClick() 47 this.queryClick()
43 },
44 data () {
45 return {
46 isDialog: false,
47 viewDialog: false,
48 ruleForm: {
49 noticeTitle: ''
50 },
51 tableData: {
52 total: 0,
53 columns: datas.columns(),
54 data: [],
55 },
56 isDiglog: false
57 }
58 },
59 methods: {
60 // 列表渲染接口
61 queryClick () {
62 this.$startLoading()
63 getSysPolicyList({ ...this.ruleForm, ...this.pageData }, { 'target': '#flfgLoading' }).then(res => {
64 if (res.code === 200) {
65 this.$endLoading()
66 let { total, records } = res.result
67 this.tableData.total = total;
68 this.tableData.data = records
69 }
70 })
71 }, 48 },
72 //打开新增弹窗 49 data () {
73 openDialog () { 50 return {
74 this.isDialog = true; 51 isDialog: false,
52 viewDialog: false,
53 ruleForm: {
54 noticeTitle: ''
55 },
56 tableData: {
57 total: 0,
58 columns: datas.columns(),
59 data: [],
60 },
61 isDiglog: false
62 }
75 }, 63 },
76 downloadFile (item) { 64 methods: {
77 const href = item.noticeFileUrl 65 // 列表渲染接口
78 window.open(href, '_blank'); 66 queryClick () {
79 }, 67 this.$startLoading()
80 //删除 68 getSysPolicyList({ ...this.ruleForm, ...this.pageData }, { 'target': '#flfgLoading' }).then(res => {
81 delNotice (item) { 69 if (res.code === 200) {
82 this.$confirm('是否确定删除', '提示', { 70 this.$endLoading()
83 confirmButtonText: '确定', 71 let { total, records } = res.result
84 cancelButtonText: '取消', 72 this.tableData.total = total;
85 type: 'warning' 73 this.tableData.data = records
86 }).then(() => {
87 deleteSysNotice({ "bsmNotice": item.bsmNotice }).then(res => {
88 if (res.code == 200) {
89 this.$message.success('删除成功')
90 this.queryClick();
91 } else {
92 this.$message.error(res.message)
93 } 74 }
94 }) 75 })
95 }).catch(() => { 76 },
96 this.$message({ 77 //打开新增弹窗
97 type: 'info', 78 openDialog () {
98 message: '已取消删除' 79 this.isDialog = true;
80 },
81 downloadFile (item) {
82 const href = item.noticeFileUrl
83 window.open(href, '_blank');
84 },
85 //删除
86 delNotice (item) {
87 this.$confirm('是否确定删除', '提示', {
88 confirmButtonText: '确定',
89 cancelButtonText: '取消',
90 type: 'warning'
91 }).then(() => {
92 deleteSysNotice({ "bsmNotice": item.bsmNotice }).then(res => {
93 if (res.code == 200) {
94 this.$message.success('删除成功')
95 this.queryClick();
96 } else {
97 this.$message.error(res.message)
98 }
99 })
100 }).catch(() => {
101 this.$message({
102 type: 'info',
103 message: '已取消删除'
104 });
99 }); 105 });
100 }); 106 },
101 }, 107 },
102 }, 108 };
103 };
104 </script> 109 </script>
105 <style scoped lang="scss"> 110 <style scoped lang="scss">
106 @import "~@/styles/public.scss"; 111 @import "~@/styles/public.scss";
107 </style> 112 </style>
......
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-07-19 16:04:58
5 -->
1 <template> 6 <template>
2 <div> 7 <div>
3 <div class="qtjfjmb-edit-title"> 8 <div class="qtjfjmb-edit-title">
...@@ -117,140 +122,140 @@ ...@@ -117,140 +122,140 @@
117 </template> 122 </template>
118 123
119 <script> 124 <script>
120 import { updateSysSqywmbsz, getSysSqywmbszDetailById } from '@/api/sysSqywmbsz' 125 import { updateSysSqywmbsz, getSysSqywmbszDetailById } from '@/api/sysSqywmbsz'
121 export default { 126 export default {
122 props: { 127 props: {
123 formData: { 128 formData: {
124 type: Object, 129 type: Object,
125 default: () => { } 130 default: () => { }
126 } 131 }
127 }, 132 },
128 mounted () { 133 mounted () {
129 if (this.formData.bsmMb) { 134 if (this.formData.bsmMb) {
130 this.$startLoading() 135 this.$startLoading()
131 getSysSqywmbszDetailById(this.formData.bsmMb).then(res => { 136 getSysSqywmbszDetailById(this.formData.bsmMb).then(res => {
132 this.$endLoading() 137 this.$endLoading()
133 let { result } = res 138 let { result } = res
134 this.ruleForm = result ? result : {} 139 this.ruleForm = result ? result : {}
135 }) 140 })
136 } 141 }
137 }, 142 },
138 data () { 143 data () {
139 return { 144 return {
140 n: 0, 145 n: 0,
141 ruleForm: { 146 ruleForm: {
142 qllx: '', 147 qllx: '',
143 qllxmc: '', 148 qllxmc: '',
144 bdcqzlx: '', 149 bdcqzlx: '',
145 dymbbs: '', 150 dymbbs: '',
146 qlqtzk: '', 151 qlqtzk: '',
147 firstreg: '', 152 firstreg: '',
148 },
149 options: [
150 {
151 value: '1',
152 label: '不动产权证书'
153 }, 153 },
154 { 154 options: [
155 value: '2', 155 {
156 label: '不动产登记证明' 156 value: '1',
157 } 157 label: '不动产权证书'
158 ], 158 },
159 options1: [], 159 {
160 rules: { 160 value: '2',
161 qllx: [ 161 label: '不动产登记证明'
162 { required: true, message: '请输入权利类型编码', trigger: 'blur' } 162 }
163 ], 163 ],
164 qllxmc: [ 164 options1: [],
165 { required: true, message: '请输入权利类型名称', trigger: 'blur' } 165 rules: {
166 ], 166 qllx: [
167 bdcqzlx: [ 167 { required: true, message: '请输入权利类型编码', trigger: 'blur' }
168 { required: true, message: '请选择不动产权类型', trigger: 'change' } 168 ],
169 ], 169 qllxmc: [
170 dymbbs: [ 170 { required: true, message: '请输入权利类型名称', trigger: 'blur' }
171 { required: true, message: '请输入打印模板', trigger: 'blur' } 171 ],
172 ], 172 bdcqzlx: [
173 qlqtztmb: [ 173 { required: true, message: '请选择不动产权类型', trigger: 'change' }
174 { required: true, message: '请输入权利其他状况模板', trigger: 'blur' } 174 ],
175 ], 175 dymbbs: [
176 }, 176 { required: true, message: '请输入打印模板', trigger: 'blur' }
177 titleList: [ 177 ],
178 { 178 qlqtztmb: [
179 name: '首次登记' 179 { required: true, message: '请输入权利其他状况模板', trigger: 'blur' }
180 ],
180 }, 181 },
181 { 182 titleList: [
182 name: '转移登记' 183 {
183 }, 184 name: '首次登记'
184 { 185 },
185 name: '变更登记' 186 {
186 }, 187 name: '转移登记'
187 { 188 },
188 name: '注销登记' 189 {
189 }, 190 name: '变更登记'
190 { 191 },
191 name: '更正登记' 192 {
192 }, 193 name: '注销登记'
193 { 194 },
194 name: '补证登记' 195 {
195 }, 196 name: '更正登记'
196 { 197 },
197 name: '换证登记' 198 {
198 } 199 name: '补证登记'
199 ] 200 },
200 } 201 {
201 }, 202 name: '换证登记'
202 methods: { 203 }
203 handleSelect (index) { 204 ]
204 this.n = index 205 }
205 }, 206 },
206 submitForm () { 207 methods: {
207 let that = this 208 handleSelect (index) {
208 updateSysSqywmbsz(this.ruleForm).then(res => { 209 this.n = index
209 if (res.code === 200) { 210 },
210 this.$popupCacel() 211 submitForm () {
211 that.$message({ 212 let that = this
212 message: '修改成功', 213 updateSysSqywmbsz(this.ruleForm).then(res => {
213 type: 'success' 214 if (res.code === 200) {
214 }) 215 this.$popupCacel()
215 } 216 that.$message({
216 }) 217 message: '修改成功',
218 type: 'success'
219 })
220 }
221 })
222 }
217 } 223 }
218 } 224 }
219 }
220 </script> 225 </script>
221 <style scoped lang="scss"> 226 <style scoped lang="scss">
222 @import "~@/styles/mixin.scss"; 227 @import "~@/styles/mixin.scss";
223 @import "~@/styles/dialogBoxheader.scss"; 228 @import "~@/styles/dialogBoxheader.scss";
224 229
225 .qtjfjmb-edit-title { 230 .qtjfjmb-edit-title {
226 padding-bottom: 10px; 231 padding-bottom: 10px;
227 border-bottom: 1px solid $borderColor; 232 border-bottom: 1px solid $borderColor;
228 margin-bottom: 10px; 233 margin-bottom: 10px;
229 } 234 }
230 235
231 ul { 236 ul {
232 @include flex; 237 @include flex;
233 border-radius: 5px; 238 border-radius: 5px;
234 overflow: hidden; 239 overflow: hidden;
235 margin-bottom: 20px; 240 margin-bottom: 20px;
236 241
237 .active { 242 .active {
238 background: $light-blue; 243 background: $light-blue;
239 color: #fff; 244 color: #fff;
240 } 245 }
241 246
242 li { 247 li {
243 flex: 1; 248 flex: 1;
244 line-height: 36px; 249 line-height: 36px;
245 @include flex-center; 250 @include flex-center;
246 border: 1px solid $borderColor; 251 border: 1px solid $borderColor;
247 margin-left: -1px; 252 margin-left: -1px;
248 cursor: pointer; 253 cursor: pointer;
249 transition: all 0.3s; 254 transition: all 0.3s;
250 255
251 &:hover { 256 &:hover {
252 @extend .active; 257 @extend .active;
258 }
253 } 259 }
254 } 260 }
255 }
256 </style> 261 </style>
......
1 <!-- 1 <!--
2 * @Description: 功能：流程图 2 * @Description: 流程图
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-05-17 10:40:57 4 * @LastEditTime: 2023-07-19 16:04:34
5 --> 5 -->
6 <template> 6 <template>
7 <div class='flowChart'> 7 <div class='flowChart'>
......
...@@ -3,9 +3,7 @@ const path = require('path') ...@@ -3,9 +3,7 @@ const path = require('path')
3 function resolve (dir) { 3 function resolve (dir) {
4 return path.join(__dirname, dir) 4 return path.join(__dirname, dir)
5 } 5 }
6
7 const port = process.env.port || process.env.npm_config_port || 8888 // dev port 6 const port = process.env.port || process.env.npm_config_port || 8888 // dev port
8
9 // All configuration item explanations can be find in https://cli.vuejs.org/config/ 7 // All configuration item explanations can be find in https://cli.vuejs.org/config/
10 module.exports = { 8 module.exports = {
11 /** 9 /**
......